
/*** Large screens ***/
@media only screen and (min-width: 1824px) {


    .quickview-wrapper .tab-content #quickview-notes > .inner{
        width:570px;
    }

    .container-fluid{
         &.container-fixed-lg{
            width: 1700px;
            margin-right: auto;
            margin-left: auto;
        }
    }

}
/*** Desktops ***/
@media (min-width: 1600px) {

}
/*** Medium Size Screen ***/
@media only screen and (max-width: 1400px) {
    body, p{
        font-size: 12px;
        line-height: 20px;
    }
    .page-sidebar .page-sidebar-inner .sidebar-slide {
        .sidebar-menu{
            bottom:50px;
        }
        .sidebar-widgets{
        display: none
        }
    }
    .footer-widget{
        padding: 11px 21px !important;
    }
}
/*** Desktops & Laptops ***/
@media only screen and (min-width: 980px) {
    body{
        &.menu-pin{
            .page-container{
                padding-left: 0;
                .page-content-wrapper {
                    .content{
                        padding-left:$layout-sidepanel-pin-width;
                    } 
                    .footer{
                        left: $layout-sidepanel-pin-width;
                    }
                }
            }
             
            .page-sidebar{
                transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed , 0) !important;
                -webkit-transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed, 0) !important;
                -ms-transform: translate($layout-sidepanel-width - $layout-sidepanel-width-collapsed, 0) !important;
            } 
        }
        &.menu-behind{
            .page-sidebar{
                z-index: $zIndex-navbar - 1;
            }
            .header .brand{
                width: 200px;
                text-align: left;
                padding-left: 20px;
            }
        }
    }


     .header {
        .brand{
            position: relative;
        }
       .user-info-wrapper {
            .user-details {
                .user-name {
                    font-size: 16px;
                }
                .user-other {
                    font-size: 10px;
                }
            }
            .user-pic {
                position: relative;
                top: -6px;
            }
        }
    }

    .page-container {
        .content { 
            &.min-padding{
            }
            &.with-page-cover{
               // padding-top: 65px;
            }
        }   
    }
    .notification-panel{
        width: 400px;
    }

}

/*** General tablets and phones ***/
@media (max-width: 979px) {


    body{
        &.sidebar-open{
            .page-container{
                @include translate3d(250px,0,0);
                overflow: hidden;
                position: fixed;
            }
        }
    }

    .brand{
        @include box_scale($layout-mobile-logo-scale);
    }
    .header {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,.07);
        background: #fff !important;
        .header-inner{
            text-align: center;
            .toggle-sidebar{
                display: block;
                position: absolute;
                left: 23px;
            }
            .mark-email{
                left: 45px;
                position: absolute;
                top: 23px;
            }
            .quickview-link{
                position: absolute;
                right: 0;
                top: 12px;
            }
        }
        .notification-list, .search-link{
            display: none;
        } 

        & > .pull-left{
            width: 100%;
            display: table;
        }
        & > .pull-right{
            position: absolute;
            float: right;
            display: inline-block;
        }
        .user-info-wrapper{
            margin-right: 20px;
        }
    }
     .page-sidebar {
        width: 250px;
        z-index: auto;
        left: 0 !important;

    }

    .page-container{
        padding-left: 0;
        z-index: 100;
        position: relative;
        @include transition(all .2s ease);
        .page-content-wrapper .content{
            overflow-x: hidden;
            height: auto; // minimizes address bar on scroll
            background-color: $color-master-lightest;
        }
    }


    /* Social page */
    //.desktop {
        .stream {
            margin: 0;
            padding: 0 60px;
            width: 100% !important;
            & > .day{
                width: 100% !important;
                .timeline{
                    display: none;
                }
                & > .item{
                    width: 100% !important;
                    margin-bottom: 20px;
                    .item-content > img{
                        width: 100%;
                    }
                }
            }
        }

     .page-sidebar {
        display: none;
        z-index: auto;
        &.visible {
        display: block;
        }
        .page-sidebar-inner{
            z-index: 1;
            left: 0 !important;
            width: 260px;
            .sidebar-slide{
                .sidebar-menu{
                    overflow: scroll;
                    -webkit-overflow-scrolling: touch;
                    top:40px;
                    bottom: 0;
                    ul > li > a > .badge{
                        display: inline-block;
                    }
                }
            }
        }
     }

     .breadcrumb{
        padding-left:15px; 
        padding-right:15px; 
     }
     .copyright{
        padding-left:15px; 
        padding-right:15px;  
     }
    /**** Datatables ****/
    .dataTables_wrapper .dataTables_info{
        float: right;
    }


    // Pages Notification customizations
    .pgn-wrapper[data-position="top"] {
        top: $layout-mobile-header-height;
        left: 0;
    }
    .pgn-wrapper[data-position="bottom"] {
        left: 0;
    }

    .pgn-wrapper[data-position$='-left'] {
        left:  20px;
        right: auto;
    }

    .pgn-wrapper[data-position^='top-'] {
        top:  $layout-mobile-header-height + 10px;
        bottom: auto;
    }



}

/* Landscape view of all tablet devices */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){

    .page-container{
        .page-content-wrapper{
            .content {
                padding-top: $layout-header-height;
            }
        }
    }

    .error-page{
        .error-container{
            width: auto;
        }
    }
}

// Resolution specific borders
// applied to resolutions "lower than" (-lt-) the specified
// @media (max-width:1199px){
//   .b-r-lt-lg,
//   .b-l-lt-lg,
//   .b-t-lt-lg,
//   .b-b-lt-lg{
//     border-width: 0;
//   }
//   .b-r-lt-lg{
//     border-right-width:1px;
//   }
//   .b-l-lt-lg{
//     border-left-width:1px;
//   }
//   .b-t-lt-lg{
//     border-top-width:1px;
//   }
//   .b-b-lt-lg{
//     border-bottom-width:1px;
//   }
// }
@media (max-width:991px){
  .sm-b-r,
  .sm-b-l,
  .sm-b-t,
  .sm-b-b{
    border-width: 0;
  }
  .sm-b-r{
    border-right-width:1px;
  }
  .sm-b-l{
    border-left-width:1px;
  }
  .sm-b-t{
    border-top-width:1px;
  }
  .sm-b-b{
    border-bottom-width:1px;
  }
}
// @media (max-width:767px){
   
//   .b-r-lt-sm,
//   .b-l-lt-sm,
//   .b-t-lt-sm,
//   .b-b-lt-sm{
//     border-width: 0;
//   }
//   .b-r-lt-sm{
//     border-right-width:1px;
//   }
//   .b-l-lt-sm{
//     border-left-width:1px;
//   }
//   .b-t-lt-sm{
//     border-top-width:1px;
//   }
//   .b-b-lt-sm{
//     border-bottom-width:1px;
//   }
// }

// Make all columns equal height
// (Not applied for resolutions lowers than mentioned ex:lg,md,sm
// because they stack up)
@media (min-width:1200px){
    .row-same-height{
      overflow: hidden; 
      & > [class*="col-lg"]{
        margin-bottom: -99999px;
        padding-bottom: 99999px;
      }
    }
}

@media (min-width:992px){
    .row-same-height{
      overflow: hidden; 
      & > [class*="col-md"]{
        margin-bottom: -99999px;
        padding-bottom: 99999px;
      }
    }
}

@media (min-width:768px){
    .row-same-height{
      overflow: hidden; 
      & > [class*="col-sm"]{
        margin-bottom: -99999px;
        padding-bottom: 99999px;
      }
    }
}

    /* Portrait view of all tablet devices */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

    /* Social page */
      .stream {
        margin: 0;
        padding: 0 60px;
        & > .day{
            width: 100% !important;
            .timeline{
                display: none;
            }
            & > .item{
                width: 100% !important;
                margin-bottom: 20px;
                .item-content > img{
                    width: 100%;
                }
            }
        }
     }
    .error-page{
        .error-container{
            width: auto;
        }
    }
}

@media (max-width: 767px) {
    
    .header{
        height: $layout-mobile-header-height;
        padding: 0 25px;
        .notification-list, .search-link{
            display: none;
        } 
        .header-inner{
            height: $layout-mobile-header-height;
        }
    }
    .header .user-info-wrapper{
        display:none;
    }
    .header .search-link{
        height: 19px;
        width:16px;
        overflow:hidden;
    }

     .jumbotron,.container-fluid{
        padding: 0;
     }
   
     .page-container .page-content-wrapper .content {
            padding-top: $layout-mobile-header-height;
    }
}



    /*** Phones ***/
@media (max-width: 480px) {
    body{
        width: 100%;
        .header {
            width: 100%;
            height: $layout-mobile-header-height;
            border-bottom: 1px solid rgba(0,0,0,.07);
            .header-inner{
                height: $layout-mobile-header-height;
                text-align: center;
                .toggle-email-sidebar{
                    font-size: 16px;
                    top: 12px;
                }
                .toggle-sidebar{
                    left: 14px;
                }
                .mark-email{
                    left: 35px;
                    top: 14px;
                }
                .quickview-link{
                    top: 14px;
                }

            }
            .notification-list, .search-link{
                display:none;
            }
            
            
            & > .pull-left{
                width: 100%;
                display: table;
            }

            .dropdown-submenu{
                top:12px;
            }
            .notification-list, .search-link{
                display:none;
            }

        }

        #overlay-search{
            font-size: 48px;
            height: 118px;
            line-height: 46px;
        }
    }
    .page-sidebar .sidebar-header{
        height: $layout-mobile-header-height;
        line-height: $layout-mobile-header-height;
    }
    .panel {
        .panel-heading{
            padding-left: 15px;
        }
        .panel-body{
            padding: 15px;
            padding-top: 0;
        }
    }
    .error-page{
        padding: 15px;
        .error-container{
            margin-top: 30px;
            width: auto;
        }
        .pull-bottom{
            position: relative;
        }
    }

    .map-controls{
        left: 10px;
    }
}

@media (max-width: 320px) {

    }

/*** Retina Display Images **/
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
       only screen and (min--moz-device-pixel-ratio: 2.0),
       only screen and (-o-min-device-pixel-ratio: 200/100),
       only screen and (min-device-pixel-ratio: 2.0) {
        .icon-set {
            background: url('../img/icons/top_tray_2x.png');
            position: relative;
            background-size: 152px 19px;
        }
        .menu-toggler-icon-set{
            background: url('../img/icons/menu_toggler_2x.png');
            position: relative;
            background-size: 60px 30px;        
        }
        .editor-icon {
            background-image: url("../img/editor_tray_2x.png");
            background-size: 480px 40px; 
        }
      .alert .close {
        background: url("../img/icons/noti-cross-2x.png") no-repeat scroll 0 0 transparent;
        background-position: -9px -10px;
        width: 10px;
        height: 9px;
        position: relative;
        opacity: 0.8;
        background-size: 114px 29px;
      }

}