/* 
    Created on : 2 Jan. 2023, 9:10:24 pm
    Author     : Linko Technology PTY LTD

    Shell breakpoints. The side nav width is driven by --nav_side-width
    (declared in core.css) so the body column and footer stay in sync.
*/

/* Extra small devices .col-xs : off-canvas drawer */
@media only screen and (max-width: 768px) {
    :root {
        --nav_side-width: 0px;
    }

    /* WIDTH - RESPONSIVE */
    .width-xs-100p{
        width: 100% !important;
    }
    .width-sm-100p{
        width: 100% !important;
    }
    .width-md-100p{
        width: 100% !important;
    }
    .width-lg-100p{
        width: 100% !important;
    }

    .hidden-xs{
        display:none !important;
    }
    .nav_top{       
        padding-left:2px;
        padding-right:4px;       
    }
    .nav_top .nav-logo{
        max-width: 120px;
        padding: 0 2px;
        margin-right: 0;
    }
    .nav_top-btn{
        min-width: 36px;
        padding: 0 6px;
    }
    .nav_top-left{
        gap: 0;
    }
    .nav_top .nav-logo img{
        max-height: 34px;
    }
    .nav_top-company-toggle{
        padding: 0 8px;
    }

    /* Drawer */
    .col-nav-side{
        position: fixed;
        top: var(--nav_top-height);
        bottom: 0;
        left: 0;
        height: auto;
        width: 280px;
        max-width: 85vw;
        flex: none;
        align-self: auto; /* keep the fixed box stretched between top and bottom */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
        z-index: 1040;
    }
    .col-nav-side.is-open{
        transform: none;
        visibility: visible;
        transition: transform .25s ease, visibility 0s linear 0s;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    }
    .nav-side{
        display: flex;
        height: auto;
    }
    .nav-side-backdrop{
        position: fixed;
        top: var(--nav_top-height);
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        background: rgba(0, 0, 0, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
        z-index: 1035;
    }
    .nav-side-backdrop.is-open{
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s linear 0s;
    }
    body.nav-side-open{
        overflow: hidden;
    }

    .footer-content {
        margin-left: 0px;
    }
}

/* Small devices .col-sm : icon-only rail */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    :root {
        --nav_side-width: 56px;
    }

    /* WIDTH - RESPONSIVE */
    .width-sm-100p{
        width: 100% !important;
    }
    .width-md-100p{
        width: 100% !important;
    }
    .width-lg-100p{
        width: 100% !important;
    }

    .hidden-sm{
        display:none !important;
    }
    .nav-logo
    {
        width:180px;
    }
    .footer-content {
        margin-left: var(--nav_side-width);
    }
    /* Icon-only rail */
    .nav-side .px-nav-label,
    .nav-side .multi-toggle,
    .nav-side .side-item.sub::after{
        display: none !important;
    }
    .nav-side .side-item{
        margin: 2px 7px;
        justify-content: center;
    }
    .nav-side .side-item > a{
        justify-content: center;
        padding: 7px 0;
    }
    .nav-side .side-item.sub{
        margin-left: 7px;
    }
    .nav-side .side-item.sub > a{
        padding: 5px 0;
    }
    .nav-side .side-item.active::before{
        left: -7px;
    }
    .nav-side-collapse{
        justify-content: center;
        padding: 10px 0;
    }
    .nav-side-collapse i{
        width: auto;
    }
    .nav_top-company-toggle{
        max-width: 180px;
    }
}

/* Medium devices .col-md */
@media only screen and (min-width: 993px)  and (max-width: 1200px) {
    :root {
        --nav_side-width: 180px;
    }

    /* WIDTH - RESPONSIVE */
    .width-md-100p{
        width: 100% !important;
    }
    .width-lg-100p{
        width: 100% !important;
    }

    .hidden-md{
        display:none !important;
    }
    .nav-logo
    {
        width:180px;
    }
    .footer-content {
        margin-left: var(--nav_side-width);
    }
}

/* Large devices .col-lg */
@media only screen and (min-width: 1201px)  and (max-width: 2000px){
    :root {
        --nav_side-width: 200px;
    }

    /* WIDTH - RESPONSIVE */
    .width-lg-100p{
        width: 100% !important;
    }

    .hidden-lg{
        display:none !important;
    }
    .nav-logo
    {
        width:200px;
    }
    .footer-content {
        margin-left: var(--nav_side-width);
    }
}

/* Extra large devices xl */
@media only screen and (min-width: 2001px) {
    :root {
        --nav_side-width: 200px;
    }

    .hidden-xl{
        display:none !important;
    }
    .nav-logo
    {
        width:200px;
    }
    .footer-content {
        margin-left: var(--nav_side-width);
    }
}

/* Desktop: collapsed icon-only rail (toggle persisted in localStorage) */
@media only screen and (min-width: 993px) {
    html.nav-rail {
        --nav_side-width: 56px;
    }
    /* Icon-only rail */
    html.nav-rail .nav-side .px-nav-label,
    html.nav-rail .nav-side .multi-toggle,
    html.nav-rail .nav-side .side-item.sub::after{
        display: none !important;
    }
    html.nav-rail .nav-side .side-item{
        margin: 2px 7px;
        justify-content: center;
    }
    html.nav-rail .nav-side .side-item > a{
        justify-content: center;
        padding: 7px 0;
    }
    html.nav-rail .nav-side .side-item.sub{
        margin-left: 7px;
    }
    html.nav-rail .nav-side .side-item.sub > a{
        padding: 5px 0;
    }
    html.nav-rail .nav-side .side-item.active::before{
        left: -7px;
    }
    html.nav-rail .nav-side-collapse{
        justify-content: center;
        padding: 10px 0;
    }
    html.nav-rail .nav-side-collapse i{
        width: auto;
    }
}