/* While the screen's width is decreasing from 1383.39px to 1099.31px, */
/* we also reduce the width of background running badge */

@media only screen and (max-width: 1124.31px) {
    /* .dashboardNavLink is actually not found in the project */
    /* This piece of code is added here to keep consistence with previous css code */
    .dashboardNavLink {
        display: none !important;
    }
}

/* Left Sidebar */
@media screen and (max-width: 1054px) {
    body:not(.sidebar-expanded-mobile) #left {
        width: 87px;
        transition: width 0.25s;
    }

        body:not(.sidebar-expanded-mobile) #left .k-panelbar-header > .k-link {
            font-size: 0px; /* On left sidebar collapsed, hide the text while showing the icon */
        }

        body:not(.sidebar-expanded-mobile) #left ul.k-group {
            display: none !important;
        }

        body:not(.sidebar-expanded-mobile) #left .navVersion {
            width: 87px;
            font-size: 10px;
            padding: 30px 10px;
        }

    body:not(.sidebar-expanded-mobile) #page-wrapper {
        width: calc(100% - 87px);
        transition: width 0.25s;
    }

    body:not(.sidebar-expanded-mobile) #toggleMenu,
    body:not(.sidebar-expanded-mobile) #menuHint,
    body:not(.sidebar-expanded-mobile) #sidebarQuickLinks,
    body:not(.sidebar-expanded-mobile) #pageToolHint,
    body:not(.sidebar-expanded-mobile) #togglePageTool {
        display: none !important;
    }

    body:not(.sidebar-expanded-mobile) #siteLogo {
        padding: 15px 0px;
        width: 112px;
        height: 110px;
        display: flex;
    }

    body:not(.sidebar-expanded-mobile) #siteLogoText {
        display: none;
    }

    body:not(.sidebar-expanded-mobile) #toggleSidebar {
        left: 72px;
        transition: left 0.25s;
    }

    body:not(.sidebar-expanded-mobile) #toggleSidebar .fa-angle-left {
        display: none;
    }

    body:not(.sidebar-expanded-mobile) #toggleSidebar,
    body:not(.sidebar-expanded-mobile) #toggleSidebar .fa-angle-right {
        display: inline-block !important;
    }

    body:not(.sidebar-expanded-mobile) #sidebar-wrapper.pageToolMode #sidebarNav {
        margin-left: 0px;
        transition: margin 0.25s;
    }

    /* Set hidden div to display none so it wouldn't affect the vertical scrollbar of the visible div */
    body:not(.sidebar-expanded-mobile) #sidebarPageNav .sidebar-nav li {
        display: none;
    }
}

/* Top Nav */
@media screen and (max-width: 1700px) {
    /* SIDE BAR EXPANDED: Hide the top nav menu texts when searching or changing global location filter */
    body:not(.sidebar-collapsed) .navbar-top-links.searchMode li.numberBadgeLink span,
    body:not(.sidebar-collapsed) .navbar-top-links.locationFilterMode li.numberBadgeLink span {
        font-size: 0px;
        transition: font-size 0.25s;
    }
}

@media screen and (max-width: 1500px) {
    /* SIDE BAR EXPANDED: Hide the top nav menu texts */
    body:not(.sidebar-collapsed) .navbar-top-links li.numberBadgeLink span {
        font-size: 0px;
        transition: font-size 0.25s;
    }
}
@media screen and (max-width: 1346px) {
    /* SIDE BAR COLLAPSED: Hide the top nav menu texts when searching or changing global location filter */
    body.sidebar-collapsed .navbar-top-links.searchMode li.numberBadgeLink span,
    body.sidebar-collapsed .navbar-top-links.locationFilterMode li.numberBadgeLink span {
        font-size: 0px;
        transition: font-size 0.25s;
    }
}

@media screen and (max-width: 1280px) {
    /* SIDE BAR EXPANDED: Hide the top nav number badge links when searching or changing global location filter */
    body:not(.sidebar-collapsed) .navbar-top-links.searchMode li.numberBadgeLink,
    body:not(.sidebar-collapsed) .navbar-top-links.locationFilterMode li.numberBadgeLink {
        display: none;
    }
}

@media screen and (max-width: 1172px) {
    /* SIDE BAR COLLAPSED: Hide the top nav nav menu texts */
    body.sidebar-collapsed .navbar-top-links li.numberBadgeLink span {
        font-size: 0px;
        transition: font-size 0.25s;
    }
}

@media screen and (max-width: 1108px) {
    /* SIDE BAR EXPANDED: Hide the top nav number badge links */
    body:not(.sidebar-collapsed) .navbar-top-links li.numberBadgeLink,
    body.sidebar-expanded-mobile .navbar-top-links li.numberBadgeLink {
        display: none;
    }
}

@media screen and (max-width: 1082px) {
    /* SIDE BAR COLLAPSED: Hide the top nav number badge links */
    body.sidebar-collapsed .navbar-top-links li.numberBadgeLink,
    body:not(.sidebar-expanded-mobile) .navbar-top-links li.numberBadgeLink {
        display: none;
    }
}

@media screen and (max-width: 1026px) {
    /* SIDE BAR EXPANDED:Hide the top nav system control icons when searching or changing global location filter */
    body.sidebar-expanded-mobile .navbar-top-links.searchMode li.systemControlLink,
    body.sidebar-expanded-mobile .navbar-top-links.locationFilterMode li.systemControlLink {
        display: none;
    }
}

@media screen and (max-width: 885px) {
    /* SIDE BAR COLLAPSED: Hide the top nav number badge links */
    body:not(.sidebar-expanded-mobile) .navbar-top-links li.numberBadgeLink {
        display: none;
    }
}

@media screen and (max-width: 852px) {
    /* SIDE BAR EXPANDED: Show the condensed menu icon */
    body.sidebar-expanded-mobile #topNavMenuToggle {
        display: inline-block;
    }

    /* SIDE BAR EXPANDED: Hide the top nav system control icons and search controls */
    body.sidebar-expanded-mobile .systemControlLink,
    body.sidebar-expanded-mobile .searchLink {
        display: none;
    }
}

@media screen and (max-width: 815px) {
    /* SIDE BAR COLLAPSED: Hide the top nav system control icons when searching or changing global location filter in small screen */
    body:not(.sidebar-expanded-mobile) .navbar-top-links.searchMode li.systemControlLink,
    body:not(.sidebar-expanded-mobile) .navbar-top-links.locationFilterMode li.systemControlLink {
        display: none;
    }
}

/* We currently don't have a decent solution to response the case when the screen width is below 506.51px*/