@charset "UTF-8";

:root,
[data-bs-theme=light] {
    --jbsvis-navbar-height: 60px;
    --jbsvis-sidenav-width: 18rem;
    --jbsvis-sidenav-width: 288px;
    --jbsvis-breakpoint: 768px;
    --jbsvis-light: var(--bs-light);
    --jbsvis-gray-light: var(--bs-gray-300);
    --jbsvis-gray-normal: var(--bs-gray-400);
    --jbsvis-gray-dark: var(--bs-gray-500);
    --jbsvis-navi-bg: var(--bs-body-bg);
    --jbsvis-content-bg: var(--bs-border-color-translucent);
}

[data-bs-theme=dark] {
    --jbsvis-light: var(--bs-border-color-translucent);
    --jbsvis-gray-light: var(--bs-gray-500);
    --jbsvis-gray-normal: var(--bs-gray-600);
    --jbsvis-gray-dark: var(--bs-gray-800);
    --jbsvis-navi-bg: var(--bs-body-bg);
    --jbsvis-content-bg: var(--bs-border-color-translucent);
}

#jbsvis-app-header {
    height: var(--jbsvis-navbar-height);
}

#jbsvis-app-loader {
    z-index: 1000;
}

#jbsvis-app-main,
#jbsvis-app-loader {
    height: calc(100vh - var(--jbsvis-navbar-height));
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop,
#jbsvis-app-sidenav.jsbvis_sidenav_mobile {
    width: var(--jbsvis-sidenav-width) !important;
    min-width: var(--jbsvis-sidenav-width) !important;
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop {
    overflow-y: scroll;
}

#jbsvis-app-sidenav-header {
    width: calc(var(--jbsvis-sidenav-width) - 1px) !important;
    min-width: calc(var(--jbsvis-sidenav-width) - 1px) !important;
}

#jbsvis-app-sidenav.jsbvis_sidenav_mobile .offcanvas-body {
    overflow-y: scroll;
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop::-webkit-scrollbar,
#jbsvis-app-sidenav .offcanvas-body::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop::-webkit-scrollbar-track,
#jbsvis-app-sidenav .offcanvas-body::-webkit-scrollbar-track {
    background: var(--jbsvis-navi-bg);
    border-radius: 4px;
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop::-webkit-scrollbar-thumb,
#jbsvis-app-sidenav .offcanvas-body::-webkit-scrollbar-thumb {
    background: var(--jbsvis-gray-light);
    border-radius: 4px;
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop::-webkit-scrollbar-thumb:hover,
#jbsvis-app-sidenav .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: var(--jbsvis-gray-normal);
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop,
#jbsvis-app-sidenav .offcanvas-body {
    scrollbar-width: thin;
}

#jbsvis-app-sidenav.jsbvis_sidenav_desktop,
#jbsvis-app-sidenav .offcanvas-body {
    scrollbar-color: var(--jbsvis-gray-light) var(--jbsvis-light);
}

#jbsvis-app-loader,
#jbsvis-app-header,
#jbsvis-app-sidenav {
    background-color: var(--jbsvis-navi-bg);
}


.jbsvis-brand {
    height: var(--jbsvis-navbar-height) !important;
    min-height: var(--jbsvis-navbar-height) !important;
}

#jbsvis-app-header .jbsvis-brand {
    width: 76px !important;
    min-width: 76px !important;
}

#jbsvis-app-header .jbsvis-brand>span {
    display: none;
}

#jbsvis-app-container {
    padding: 0.5rem;
}

[data-jbsvis-mode=desktop] {
    #jbsvis-app-header .jbsvis-brand,
    .jbsvis-brand {
        width: var(--jbsvis-sidenav-width) !important;
        min-width: var(--jbsvis-sidenav-width) !important;
    }

    #jbsvis-app-header .jbsvis-brand>span {
        display: flex;
    }

    #jbsvis-app-container {
        padding: 1.5rem;
    }

}


#jbsvis-app-container {
    background-color: var(--jbsvis-content-bg);
    overflow-y: auto;
}