@media (min-width: 1400px){
    .col-xl-0-7 {
        flex: 0 0 5.833331%;
        max-width: 5.833331%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    .col-xl-11-3 {
        flex: 0 0 94.166669%;
        max-width: 94.166669%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .col-xl-0-2 {
        flex: 0 0 2.833331%;
        max-width: 2.833331%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    .col-xl-11-8 {
        flex: 0 0 97.166669%;
        max-width: 97.166669%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

@media (max-width: 1400px){
    .col-xl-0-7 {
        flex: 0 0 9.833331%;
        max-width: 9.833331%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    .col-xl-11-3 {
        flex: 0 0 90.166669%;
        max-width: 90.166669%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    .col-xl-0-2 {
        flex: 0 0 2.833331%;
        max-width: 2.833331%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    .col-xl-11-8 {
        flex: 0 0 97.166669%;
        max-width: 97.166669%;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .navbar.navbar-theme .navbar-nav .nav-link{
        font-size: 18px;
    }
}

@media (max-width: 1691px) {
    .page-action-container.action-container .dropdown {
        margin-left: 9px;
    }
}

@media (min-width: 1440px) {
    .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        width: 100%;
    }
}

@media (max-height: 850px) {
    .content{
        height: 83vh !important;
    }
    .page-header{
        height: 9vh !important;
    }
    .page-footer{
        height: 6vh !important;
    }
}

@media (max-height: 800px) {
    .page-header{
        height: 10vh !important;
    }
}

/* ------------------------------------------------------------------ *
 * Touch devices — phones & tablets (iPhone, iPad, Samsung, etc.)
 *
 * The desktop layout pins html/body to 100% height, clips .wrapper with
 * overflow:hidden, and locks .content / .page-header / .page-footer to
 * fixed vh heights so the app fills the screen with no page scroll. On a
 * small touch screen that clips any content taller than the viewport,
 * and mobile browsers report an unstable vh (the URL bar grows/shrinks),
 * so the user can never reach the cut-off part.
 *
 * Here we release those height/overflow locks so the whole page flows as
 * one document and scrolls naturally when content is bigger than the
 * screen. Targeted via (hover:none) and (pointer:coarse) — the standard
 * "is a touch device" test — so it matches phones and tablets regardless
 * of pixel width and leaves mouse-driven laptops/desktops untouched.
 * ------------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    html,
    body {
        height: auto !important;
        min-height: 100%;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
    }

    /* The flex shell must grow with its content instead of clipping it. */
    .wrapper {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    /* Release the fixed vh heights (incl. the !important rules above) so
       these regions size to their content and the page can scroll. */
    .content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .page-header,
    .page-footer {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Wide tables / workstation grids scroll sideways on their own rather
       than forcing the whole page wider than the screen. */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}