/* Sidebar */


:root{

    --sidebar-width:280px;

    --sidebar-collapse:72px;

}

.va-sidebar{

    width:var(--sidebar-width);

    transition:all .3s ease;

}

/* Desktop Collapse */

body.va-sidebar-collapsed .va-sidebar{

width:var(--sidebar-collapse);

}

body.va-sidebar-collapsed .va-sidebar span,

body.va-sidebar-collapsed .va-user-info{

    display:none;

}

body.va-sidebar-collapsed .va-sidebar-nav a{

    justify-content:center;

}

body.va-sidebar-collapsed .va-sidebar-footer{

    align-items:center;

}

/* Mobile */

@media (max-width: 992px){

    .va-sidebar{

        position: fixed;

        top: 0;
        left: 0;

        width: 260px;
        height: 100vh;

        background: #fff;

        transform: translateX(-100%);

        transition: transform .3s ease;

        z-index: 1001;
    }

    body.va-mobile-sidebar-open .va-sidebar{

        transform: translateX(0);

    }

    .va-overlay{

        position: fixed;

        inset: 0;

        background: rgba(0,0,0,.45);

        opacity: 0;

        visibility: hidden;

        transition: .3s;

        z-index: 1000;
    }

    body.va-mobile-sidebar-open .va-overlay{

        opacity: 1;

        visibility: visible;

    }

    .va-main{

        margin-left: 0 !important;

        width: 100%;
    }

}