/* Old responsive rules below */

.navbar,
#mobile-overlay,
#alert,
#forgot-password-alert,
#refresh-results-box,
#main-toolbar,
.ribbon.right {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.charm-title {
    display: none;
}

.charm-shortcut {
    display: none;
}

.charm-shortcut-collapse {
    display: block;
    padding-left: 12px
}

/*** do not edit or add responsive breakpoints, these are bootstrap breakpoints*/
/**** BREAKPOINT: this and higher: large desktops monitors */
@media (min-width: 1400px) {
    /***************************************************************************/
    .charm-title {
        display: inline-block;
        padding: .125rem .125rem .125rem .75rem;
    }

    .charm-shortcut {
        display: inline-block;
    }

    .charm-shortcut-collapse {
        display: none;
    }
}

/*** do not edit or add responsive breakpoints, these are bootstrap breakpoints*/
/**** BREAKPOINT: this and higher: desktops */
@media (min-width: 992px) {
    /***************************************************************************/
    #main-toolbar {
        display: flex;
    }

    .hidden-desktop,
    .mobile-nav-header {
        display: none;
    }
}

/*** do not edit or add responsive breakpoints, these are bootstrap breakpoints*/
/**** BREAKPOINT: this and lower: tablets & phones */

@media only screen and (max-width: 991px) /*, only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)*/ {
    /***************************************************************************/
    /* navigation */
    .hidden-desktop,
    .mobile-nav-header {
        display: block;
    }

    .charm-shortcut {
        display: none;
    }

    .charm-shortcut-collapse {
        display: block;
    }

    #mobile-overlay {
        display: none;
    }

    .toolbar {
        display: none;
    }

        .toolbar.toolbar-visible {
            display: flex;
            box-shadow: 0 2px 10px rgba(0,0,0,0.25);
            border: 2px solid #0076D1;
            border-width: 1px 0 1px 0;
            padding: .5rem;
            height: auto;
            overflow-y: auto;
        }

    .toolbar-noitems .toolbar-noitems-message {
        display: block;
    }


    .sub-toolbar {
        min-height: 2.5rem;
        background: #211551;
        color: #FFFFFF;
    }

        .sub-toolbar .nav {
            display: none;
            position: absolute;
            top: 5.5rem;
            left: 0;
        }

    .sub-toolbar-toggle {
        margin-left: .5rem;
        display: block;
    }

        .sub-toolbar-toggle:before {
            font-family: 'FontAwesome';
            content: '\f058';
            margin-right: .5rem;
        }

        .sub-toolbar-toggle.show-toolbar:before {
            content: '\f00d';
        }

        .sub-toolbar-toggle.show-toolbar ~ .nav {
            display: block;
            z-index: 100;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }

    .sub-toolbar .nav-item .nav-link:after,
    .sub-toolbar .nav-item.files-filter:after {
        content: '';
        width: 95%;
        display: block;
        border-bottom: 1px dotted #352965;
        position: absolute;
        left: 2.5%;
        top: 0;
    }

    .navbar-nav .nav-item.files-filter {
        padding: .5rem 1rem;
    }

        .navbar-nav .nav-item.files-filter input {
            height: 2.5rem;
        }

    header.navbar {
        min-height: 3.5rem;
        left: 0;
        right: 0;
    }

    .toolbar .dd-menu {
        position: static;
        overflow: visible;
        border: 0;
        box-shadow: none;
        padding-left: 1.5rem;
        border: 1px dotted #BAC6D6;
        border-top: 0;
    }

    .toolbar .dd-arrow {
        display: none;
    }

    .app-menu-right {
        margin-left: auto;
    }

    body {
        overflow-x: hidden;
    }

    .page-title {
        font-size: 1.125rem;
        max-width: 16rem;
    }

    .scroll-content {
        background: #e1e9f5;
        z-index: 20;
        left: 0;
        width: 100% !important;
        overflow-y: auto;
    }


    body.mobile-draw-open .navbar,
    body.mobile-draw-open #mobile-overlay,
    body.mobile-draw-open #alert,
    body.mobile-draw-open #forgot-password-alert,
    body.mobile-draw-open #refresh-results-box,
    body.mobile-draw-open #icon-nav,
    body.mobile-draw-open .ribbon.right {
        left: 18rem;
        right: -18rem;
    }

    body.mobile-draw-open #scroll-content {
        left: 18rem;
    }

    body.mobile-draw-open .navbar,
    body.mobile-draw-open #scroll-content {
        -webkit-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
        -moz-box-shadow: -1px 0 0 rgba(0,0,0,0.2);
        box-shadow: -1px 0 0 rgba(0,0,0,0.2);
    }

    #main-nav .nav-item:not(:last-child) .nav-link {
        border-bottom: 1px solid #dee3e8;
    }

    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        border: 0;
        background: #e1e9f5;
        -webkit-overflow-scrolling: touch;
    }

        .navbar-nav .dropdown-menu li {
            border-bottom: 1px solid #dee3e8;
            margin: 0;
            box-shadow: none;
        }

        .navbar-nav .dropdown-menu a {
            padding: .75rem;
        }

        .navbar-nav .dropdown-menu .nav-link,
        #main-nav .nav-item:not(:last-child) .nav-link {
            margin: 0;
            box-shadow: none;
            border-bottom: 0;
        }

    .navbar-nav > div {
        flex-direction: column;
    }

    .toolbar .nav-link .fa {
        font-size: 1.25rem;
        margin-right: 1.5rem;
    }

    .ribbon.right {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        height: auto;
        display: block;
        border-top: 1px solid #BAC6D6;
        text-align: center;
    }

        .ribbon.right .nav-item {
            display: inline-block;
            float: none;
        }

        .ribbon.right .nav-link {
            padding: .5rem 2rem;
            border-bottom: 0;
            height: auto;
            border-top: 2px solid transparent;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
        }

    files-ribbon {
        display: flex;
        flex-direction: column;
    }


    /* compass */


    .mobile-compass {
        line-height: 2rem;
    }

        .mobile-compass a {
            padding: .25rem .5rem;
            border-radius: .25rem;
            border: 1px solid #dee3e8;
        }


    /* body content */


    #secondary-nav {
        top: 0;
        z-index: 0;
        border: 0;
        height: 100%;
        box-shadow: 0;
        bottom: 0;
    }

    body.show-sidebar #secondary-nav {
        z-index: 150;
        box-shadow: 1rem 0 1rem rgba(0,0,0,0.25);
    }

    .panel {
        padding: 0 2%;
    }

    .panel-item, .apps-panel-box {
        overflow: visible;
        height: auto;
    }

    .apps-panel-box {
        height: auto;
    }

        .apps-panel-box .app-description {
            display: block;
            opacity: 1;
            font-size: .75rem;
            line-height: 0.875rem;
        }

    .app-name {
        text-transform: none;
        font-weight: normal;
        font-size: 1rem;
    }

    /*** logon page */

    #signin-section {
        max-width: 18rem;
        width: 100%;
    }

    #files-newfolder-body input {
        width: 100%;
    }

    #files-userswitcher-wrapper {
        width: 100%;
        position: static;
        border: 0;
        min-width: inherit;
        border-bottom: 1px solid #dee3e8;
    }


    .sidebar {
        z-index: 900;
        position: fixed;
        top: 4rem;
        left: calc(-100% - 1rem);
        border-right: 0;
        bottom: 3rem;
        overflow-y: auto;
        height: auto !important;
        width: 90%;
        box-shadow: 0 0 1rem rgba(0,0,0,0.5);
        transition: all .4s ease;
    }

    body.show-sidebar .sidebar {
        left: 0;
    }


    .panel-has-sidebar {
        background: #e1e9f5;
        left: 0;
        width: 100%;
    }

    /* Lightbox stuff */

    .lightbox .panel-has-sidebar {
        background: #fff;
    }

    .lightbox .sidebar {
        float: left;
        width: 40%;
        position: static;
    }

        .lightbox .sidebar + .panel-has-sidebar {
            width: 60%;
            border-left: 1px solid #dee3e8;
        }

    #alert,
    #forgot-password-alert,
    #refresh-results-box,
    .refresh-results-box {
        padding: 0;
    }

    .alert-body {
        width: 100%;
        display: block;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    /* responsive utitlies */

    .hidden-ipad-and-phone {
        display: none !important;
    }

    .show-ipad-and-phone,
    .mobile-compass {
        display: block;
    }



    /* notififications*/
    #sort-filter {
        top: 3.5rem;
    }

    .search-filter-container {
        float: right;
    }

    #search-toolbox-top {
        width: 55%;
    }

    .search-toolbox ~ .titles {
        width: 45%;
        padding-right: .5rem;
    }


    /* lightboxes*/
    .lightbox, .modal-content {
        top: 0 !important; /* important required as sngLightbox sets values inline */
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin-left: 0 !important;
        border: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        margin: 0 !important;
        max-width: none;
        max-height: none;
    }

    .lightbox-title {
        border-radius: 0;
    }

    .lightbox-container {
        padding-top: 0 !important;
    }

    /* Dynoview*/

    .dyno-control.section {
        height: auto;
    }
}

/*** do not edit or add responsive breakpoints, these are bootstrap breakpoints*/
/**** BREAKPOINT: this and lower: tablets only */
@media only screen and (max-width: 991px) and (min-width: 768px) /*, only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)*/ {
    /***************************************************************************/
    #main-nav {
        position: fixed;
        top: 5.5rem;
        left: 2rem;
        border: 1px solid #0076D1;
        box-shadow: 0 0 0 3px rgba(0,118,209, 0.5);
        background: #fff;
        overflow-y: auto;
        z-index: 5;
        width: 16rem;
        height: auto;
        max-height: 17rem;
        border-radius: .25rem;
    }

    .charm-shortcut {
        display: none;
    }

    .charm-shortcut-collapse {
        display: block;
    }

    .charm-title {
        display: none;
    }

    #main-nav li {
        display: block;
        float: none;
        width: 100%;
    }

    #main-nav .nav-link {
        padding: .5rem 1rem;
        height: auto;
        width: 100%;
    }

    #main-nav .navbar-nav {
        height: auto;
        width: 100%;
    }

    .navbar-nav > div {
        display: block;
    }

    .icon-nav-btn > .icon-item-count {
        position: absolute;
        left: 1.5rem;
        top: .25rem;
    }

    /* TFS #11111 minimize rendering artefacts */
    #main-nav:empty {
        display: none;
    }

    #main-nav > :empty {
        display: none;
    }

    /* responsive utitlies */

    .hidden-ipad {
        display: none;
    }

    .show-ipad {
        display: block !important;
    }

    .alert-body .fa {
        font-size: 1.5rem;
        padding: 0;
    }

    /* notififications*/
    #sort-filter {
        top: 3.5rem;
    }

    /* SngFilter */

    .sngfilter-menu,
    .sngfilter .toggle {
        min-width: 14rem;
    }

    #notifications-wrapper {
        position: relative;
        height: calc(100vh - 3.5rem);
    }

    /* take app-menu-bottom (secondary nav) out of normal flow to allow main navigation slide into second row with icons . See #12842 */
    .app-menu-bottom {
        position: absolute;
    }

        .app-menu-bottom .mobile-btn-large {
            display: block;
            height: 2rem;
        }
}

/*** do not edit or add responsive breakpoints, these are bootstrap breakpoints*/
/**** BREAKPOINT: this and lower: mobile only */
@media (max-width: 767px) {
    /****************************************************************************/

    .page-title {
        display: none;
    }

    .charm-shortcut {
        display: none;
    }

    .charm-shortcut-collapse {
        display: block;
    }

    .dropdown > .icon-nav-btn {
        width: 100%;
    }

    .icon-nav-icon {
        float: none;
    }

    .app-logo,
    .app-menu-right {
        display: none;
    }

    .app-menu {
        min-height: 4rem;
    }

        .app-menu ~ .scroll-content, .app-menu ~ .sidebar {
            height: calc(100vh - 7rem);
        }

    .app-menu-spinner {
        padding: 0 1.25rem;
    }


    .toolbar-toggle {
        margin: .5rem .5rem .5rem auto;
    }


    body.chrome-hidden .scroll-content,
    body.chrome-hidden .sidebar {
        height: 100vh;
        padding: 0;
    }

    .page-content {
        padding: 0.5rem;
    }

    .panel {
        padding: 0;
    }

    .compass {
        position: fixed;
        top: 4rem;
        left: 0;
        right: 0;
        z-index: 20;
        display: flex;
        visibility: hidden;
        transition: opacity .2s ease;
        opacity: 1;
        max-width: none;
        background: #fff;
        box-shadow: 0 1px 4px 1px rgba(0,0,0,0.15);
    }

    .compass-close {
        display: block;
    }

    body.show-compass .compass {
        visibility: visible;
        opacity: 1;
    }

    /* navigation */
    #main-toolbar {
        position: fixed;
        top: 3.5rem;
        left: 0;
        background: #fff;
        z-index: 5;
        width: 100%;
        height: auto;
        max-height: 15rem;
        min-height: 0;
    }

    .app-menu-top .mobile-btn-large {
        height: 3rem;
        display: block;
    }



    .icon-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        background: #fff;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.15);
    }

        .icon-nav > button,
        .icon-nav > a,
        .icon-nav > .dropdown {
            width: 19%;
            text-align: center;
        }

        .icon-nav .icon-nav-btn {
            padding: 0 0 1rem;
        }

    .dropdown .icon-nav-btn {
        width: 100%;
    }

    .charm-title {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: .75rem;
        width: 100%;
        display: block;
        padding: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .charm-shortcut {
        display: none;
    }

    .charm-shortcut-collapse {
        display: block;
    }

    .icon-nav .caret {
        margin: 0;
        position: absolute;
        top: 0;
        right: .5rem;
    }

        .icon-nav .caret:before {
            content: '\f0d8';
        }

    .icon-nav .dropdown .dd-menu {
        top: auto;
        bottom: 3rem;
        width: 100vw;
        left: 0;
        position: fixed;
        box-shadow: -2px 0 8px 0px rgba(0,0,0,0.2);
        border-radius: 0;
        border-width: 1px 0 0;
    }

    .icon-nav .dd-arrow {
        display: none;
    }

    #preference-box {
        width: 100%;
    }

    .icon-nav-btn > .icon-item-count.notifications-count {
        position: absolute;
        top: 0;
        right: .125rem;
        left: auto;
    }

    .grid-section {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.25rem 0 -.25rem;
    }

    body.mobile-draw-open #main-toolbar,
    body.mobile-draw-open .ribbon.right {
        left: 18rem;
    }

    .nav.navbar-nav {
        width: 100%;
        height: auto;
    }

    .navbar-nav .nav-item {
        width: 100%;
        float: none;
        margin: 0;
    }

        .navbar-nav .nav-item .nav-link,
        .dropdown-item > div, .dropdown-item > button,
        .dropdown-item > a {
            padding: .5rem .5rem .5rem 3rem;
            height: auto;
            position: relative;
            font-size: 1rem;
            width: 100%;
            float: none;
            display: block;
        }

            .navbar-nav .nav-link .fa,
            .dropdown-item > div > .fa,
            .dropdown-item > a > .fa,
            .dropdown-item > button > .fa {
                position: absolute;
                top: .5625rem;
                font-size: 1.25rem;
                left: .75rem;
            }

    .ribbon.right {
        bottom: 3rem;
    }

        .ribbon.right .nav-item {
            display: inline-block;
            width: auto;
        }

        .ribbon.right.nav .nav-item .nav-link {
            font-size: .875rem;
            width: auto;
            text-align: center;
            padding: .25rem .375rem;
            border-bottom: 0;
        }

    .tasks-button {
        float: right;
    }

    .zugo-title {
        display: none;
    }

    .zugo-description {
        flex-basis: 100%;
    }


    /* tables */


    .table .mobile-display-name {
        display: block;
        font-weight: bold;
        color: #0076D1;
        float: left;
        width: 9rem;
    }

    .table, .table tbody, .table tbody tr, .table tbody tr td {
        display: block;
    }

        .table thead, .table.fixed-table-head {
            display: none;
        }

        .table tbody tr {
            border: 0;
        }

            .table tbody tr:not(:last-child) {
                border-bottom: 1px solid #BAC6D6;
            }

        .table tbody td:after {
            display: block;
            clear: both;
            content: '';
        }

        .table tbody td {
            border: 0 !important;
            width: 100% !important;
        }

        .table thead th, .table tbody td {
            padding: .25rem .5rem;
        }

    td.item-selection-column {
        text-align: left;
        padding: 1rem 1rem 0;
    }

    .table {
        border: 0;
        border: 1px solid #BAC6D6;
        border-left: 0;
        border-right: 0;
    }

    /* alerts */

    .alert-body {
        min-height: 4.5rem;
    }

        .alert-body #show-errorlogs-button,
        .alert-body .closebutton-wrapper {
            float: none;
            margin: 0;
        }

        .alert-body .message {
            font-size: .875rem;
            padding-right: 1.25rem;
        }


    .files-toggle-switch {
        margin-left: 0;
        padding: .5rem;
    }

        .files-toggle-switch .toggle-switch {
            font-size: 1rem;
        }

    /* apps panel*/

    #apps-search-container .panel {
        padding: 1rem .5rem;
    }

    .apps-panel > div {
        width: 33.33%;
        height: 12rem;
    }

    .apps-panel-box {
        width: calc(100% - 0.5m);
        margin: 0 0.5rem 1rem;
    }

    .app-icon {
        width: 7rem;
        height: 6rem;
        border-radius: 1.675rem;
    }


    .apps-panel-box .button-icon {
        height: 4rem;
        line-height: 3.75rem;
    }

    .apps-panel-box,
    .apps-panel-box.clickable:after {
        border-radius: 1.5rem;
    }

    .panel {
        width: 100%;
    }

    .app-icon {
        padding: .675rem;
    }


    .apps-panel-box .button-icon {
        width: 4rem;
    }

    .app-icon .sub-icon {
        font-size: 1.25rem;
        right: 20%;
    }

    .panel {
        width: 100%;
    }

    .app-icon {
        padding: .675rem;
    }

    .app-description {
        display: none;
    }

    .app-name {
        text-transform: none;
        font-weight: normal;
        font-size: 1rem;
    }

    /* #### DynoView ##### */

    .dyno-view-body {
        padding: 0;
    }

    .header ~ .dyno-view-body {
        padding: 3.5rem 0 0;
    }

    .header h1 {
        line-height: 1.25rem;
    }

    .header h2 {
        line-height: 1rem;
        font-size: 1rem;
    }

    .tabbed-window-content {
        padding: .25rem 0;
    }

    .grid-section .col {
        padding: 0;
    }

    .tabbed-window-content .dyno-control {
        padding: 0;
    }

    img {
        max-width: 100%;
    }

    .dv-body {
        padding: 1rem .5rem;
    }

    .section-content {
        padding: .5rem;
    }

    .col, .grid-section .col, .grid-section .col + .col {
        padding: 0 .25rem .75rem .25rem;
    }

    dynoview .grid-section, div[dynoview] .grid-section {
        margin-bottom: 0;
    }

    /* #### Zugo searches #### */

    .zugo-header h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        margin: 0;
    }

        .zugo-header h1: focus {
            white-space: normal;
            overflow: visible;
            position: relative;
        }

    .zugo-result-count-message {
        position: absolute;
        bottom: 0;
        z-index: 3;
        background: #ebf1f7;
        border-top: 1px solid #fff;
        width: 100%;
        left: 0;
    }

    .zugo-header ~ .zugo-body {
        height: calc(100% - 7.5rem) !important;
    }


    .search-bar .input-group {
        width: 100%;
    }

    .results-count-message {
        display: none;
    }

    #page > .results-container, #page > #results, #page > #results-container, #page > div[sng-zugo] {
        height: calc(100vh - 6.5rem);
    }
    /* Lightbox stuff */
    .lightbox .title-text {
        text-overflow: ellipsis;
        display: inline-block;
        width: calc(100% - 4rem);
        overflow: hidden;
        white-space: nowrap;
    }

    .lightbox .panel-has-sidebar {
        background: #fff;
    }

    .lightbox .sidebar {
        position: absolute;
        top: 0;
        left: -100%;
        width: calc(100% - 40px);
        z-index: 2;
        border-right: 1px solid #BAC6D6;
        -webkit-transition: all .4s ease;
        -ms-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        -moz-transition: all .4s ease;
    }

        .lightbox .sidebar.open {
            left: 0;
        }

        .lightbox .sidebar + .panel-has-sidebar {
            width: 100%;
        }

        .lightbox .sidebar.open + .panel-has-sidebar:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.1);
            content: '';
            display: block;
        }

    .lightbox-sidebar-toggle {
        margin-right: 1rem;
        font-size: 1.25rem;
        float: left;
        line-height: 1rem;
        display: block;
    }

    .logon-logo {
        padding: 2rem 0 1rem;
    }

    /* Input file selector */

    .file-input-button {
        width: 100%;
        margin-bottom: .5rem;
    }

    .file-input-item {
        width: 100%;
    }

    .file-input-wrapper.file-input-inline .file-input-display {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }
}


/**** BREAKPOINT: this and lower: small mobile only */
@media (max-width: 568px) {
    .apps-panel > div {
        width: 50%;
        margin: 0;
    }

    .charm-shortcut {
        display: none;
    }

    .charm-shortcut-collapse {
        display: block;
    }

    .apps-panel-box {
        margin: 0;
        width: auto;
    }

    .app-icon.app-folder-icon {
        width: 8rem;
        height: 5.5rem;
        padding: 0 0.675rem;
    }

    .panel-item.zugo-item.no-checkbox.apps-panel-item {
        width: 100%;
    }
}




@media (max-width: 47.9em) and (min-width: 30em) {
    #notifications-wrapper {
        height: calc(100vh - 6.5rem);
    }
}

@media (max-width: 33em) {
    #field-selector-wrapper {
        width: 22rem;
    }
}

@media (max-width: 28em) {
    #field-selector-wrapper {
        width: 18rem;
    }
}



/* Resolution */


.logo-lores {
    display: block;
}

.logo-hires {
    display: none;
}

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {

    .logo-lores {
        display: none;
    }

    .logo-hires {
        display: block;
    }
}