@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.dwk6czdzfo.bundle.scp.css';
@import '_content/Vintus.UI.Components/Vintus.UI.Components.cbm5jjo9qe.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
@layer base {
    .main-layout[b-mj7pz2zmn3] {
        display: grid;
        grid-template-areas:
            'theme home menu'
            'nav nav nav'
            'main main main';

        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto 1fr; /* Prevents theme/home/menu from stretching */
        height: 100vh;
    }

    [b-mj7pz2zmn3] .theme-button {
        grid-area: theme;
        padding: 0.75rem;
        background-color: rgba(0, 0, 0, 0.4);
    }

    [b-mj7pz2zmn3] header {
        grid-area: home;
        padding: 0.75rem 1.25rem;
        background-color: rgba(0, 0, 0, 0.4);
        display: grid;
        place-items: center;

        a.brand {
            text-decoration: none;
            color: var(--neutral-foreground-rest);
            font-size: 1.1rem;
        }
    }

    [b-mj7pz2zmn3] .menu-button {
        grid-area: menu;
        padding: 0.75rem;
        background-color: rgba(0, 0, 0, 0.4);
    }

    [b-mj7pz2zmn3] nav {
        grid-area: nav;
    }

    [b-mj7pz2zmn3] main {
        grid-area: main;
        padding: 0.5rem 0.25rem;
        overflow: auto;
    }

    .page[b-mj7pz2zmn3] {
        position: relative;
        display: flex;
        flex-direction: column;
    }
}

@layer desktop {
    @media (min-width: 640px) {
        .main-layout[b-mj7pz2zmn3] {
            grid-template-areas:
                'home theme'
                'nav main';

            grid-template-columns: auto 1fr;
        }

        [b-mj7pz2zmn3] .menu-button {
            display: none;
        }

        [b-mj7pz2zmn3] .theme-button {
            display: grid;
            justify-items: end;
        }

        [b-mj7pz2zmn3] nav {
            min-width: 250px;
            overflow-y: auto;
        }

        *:hover[b-mj7pz2zmn3]::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,.15);
        }

        [b-mj7pz2zmn3]::-webkit-scrollbar {
            width: 6px;
        }

        [b-mj7pz2zmn3]::-webkit-scrollbar-thumb {
            background-color: rgba(255,255,255,0);
            border-radius: 20px;
        }

        [b-mj7pz2zmn3]::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255,255,255,.25);
            border-radius: 20px;
        }

        [b-mj7pz2zmn3] main {
            padding: 1rem 2rem;
        }
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
[b-0vhyl86xt5] .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-brand[b-0vhyl86xt5] {
    font-size: 1.1rem;
}

.nav-item[b-0vhyl86xt5] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item:first-of-type[b-0vhyl86xt5] {
    padding-top: 1rem;
}

.nav-item:last-of-type[b-0vhyl86xt5] {
    padding-bottom: 1rem;
}

.nav-item[b-0vhyl86xt5]  a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item[b-0vhyl86xt5]  a.active {
    background-color: rgba(255, 255, 255, 0.37);
    color: white;
}

.nav-item[b-0vhyl86xt5]  a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.collapse[b-0vhyl86xt5] {
    display: none;
}

@media (min-width: 641px) {
    [b-0vhyl86xt5] .navbar-toggler {
        display: none;
    }

    .collapse[b-0vhyl86xt5] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}