@media (max-width: 767px) {
    /*teamleader filters*/
    #dropdownfilter, #departmentFilter, #teamFilter, #usercategoryFilter {
        width: 20% !important;
    }

    .k-dropdown .k-dropdown-wrap {
        height: 4em;
    }

    .k-button {
        height: 4em;
    }

    /*fix margin from sidebar in mobile res*/
    .body-content-wrapper {
        margin-left: 0px !important;
        max-width: none !important
    }

    .nofloat {
        float: none;
        padding: 10px 15px;
    }

    .navbar-brand {
        background-position: 6px -12px;
    }
    /*fix login text position*/
    #body-row > div.col.body-content-wrapper > div > h2 {
        margin-left: 0.3em;
    }

    body > nav > button {
        margin-top: 0 !important;
    }
}
/*Fixes height of logo on mobile*/
@media (max-width: 1023px) {
    .navbar-brand {
        background-position: 10px -14px !important
    }
    /*Fixes height of drawer on mobile*/

    body > nav > button {
        position: relative !important;
        margin-top: 0;
    }
}
/*767 and down, teh nav-bar is collapsed*/
@media (max-width: 767px) {
    BODY {
        font-size: 61%;
    }

    .navbar {
        font-size: 1.3em;
    }

    .breadcrumb {
        font-size: 1.4em;
    }

    #search_key {
        width: 12em;
    }

    #search-form {
        display: initial;
    }
}

/*1023 - 768*/
@media (max-width: 1023px) {
    BODY {
        font-size: 61%;
    }

    .navbar {
        font-size: 1.3em;
    }

    .breadcrumb {
        font-size: 1.4em;
    }

    .navbar-brand {
        background-size: 90%;
        width: 120px;
        background-position: 10px 15px;
    }

    #search-form {
        display: none;
    }
}


@media (min-width: 768px) {

    .k-grid tbody .k-button {
        vertical-align: top;
        padding-top: 0em;
        height: 1.7em;
        overflow: hidden;
    }

    .container {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .container {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 100%;
    }
}
/*1440 - 1280*/
@media (max-width: 1440px) {
    BODY {
        font-size: 82%;
    }

    .navbar {
        font-size: 1.1em;
    }

    .breadcrumb {
        font-size: 1.1em;
    }
}
/*1280 - 1025 */
@media (max-width: 1280px) {
    BODY {
        font-size: 70%;
    }

    .navbar {
        font-size: 1.3em;
    }

    .breadcrumb {
        font-size: 1.3em;
    }

    #search_key {
        width: 9em;
    }
}
/*1024 */
@media (max-width: 1024px) {
    BODY {
        font-size: 61%;
    }

    .navbar {
        font-size: 1.3em;
    }

    .breadcrumb {
        font-size: 1.4em;
    }

    #search_key {
        width: 6em;
    }
    /*Remove footer, dont forget to change value input common.dynamicGridHeight if this line is changed or moved*/
    footer {
        /*display:none;*/
    }
}
/*1024 */
@media (max-width: 1024px) {
    ::-webkit-scrollbar {
        width: 2px;
        height: 2px;
        background-color: #ededed;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: unset 0 0 4px rgba(0,0,0,0.3);
        border-radius: 4px;
        background-color: #ededed;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        -webkit-box-shadow: unset 0 0 4px rgba(0,0,0,0.3);
        background-color: #8e8e93;
    }

    #navbarSupportedContent > form.form-inline.my-2.my-lg-0.ng-pristine.ng-valid {
        padding: 12px 8px;
    }
    #logoutForm {
        padding: 12px 8px;
    }
    #logoutForm > ul > li.px-2.pt-1 {
        height: 100%;
        width: 100%;
    }
        #logoutForm > ul > li, #logoutForm > ul {
            padding-left: 0px !important;
            width: 100% !important
        }
    d.flex, #teamLeaderFilters {
        display: -webkit-box !important;
    }
}
#navbarSupportedContent {
    background-color: #333 !important;
    background-repeat: repeat;
}
@media (max-width: 1279px) {
    #Header2, #HeaderAll {
        visibility: hidden;
        content: none;
        display: none !important;
    }
}

@media (max-width: 1024px) {
    #breadcrumb {
        padding-bottom: 4px;
    }
}