.nav-menu-icons {
    font-size:x-large;
    top: -12px !important;
}

.inline {
    display: inline !important
}

.inline-block {
    display: inline-block !important;
}

.highlight-criteria {
    border: 1px solid #d0e2fd;
    background-color: #d0e2fd;
}

.hidden {
    display: none;
}

.teach-criteria-checked {
    position: absolute;
    bottom: 0px;
    color: green;
    font-size: 25px;
}

.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e) no-repeat center / 1.75rem rgba(255, 255, 255, 0.1);
}

.pointer {
    cursor: pointer;
}

.center-div {
    display: block;
    margin: 0 auto;
}

/* === Global sidebar + layout fixes (paste into site.css) === */
:root {
    --sidebar-width: 260px;
    --sidebar-header-h: 56px; /* height of your top row in the sidebar */
    --app-bg: #ffffff; /* your app background */
}

/* Never let the body paint white behind the sidebar */
html, body {
    height: 100%;
    margin: 0;
    background: var(--app-bg);
}

/* Two-column shell: sidebar + content */
.page {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100dvh;
    background: var(--app-bg);
}

/* Sidebar column: full-height, scrollable, and with its own background */
.sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    z-index: 2; /* sits above main content */
    background: linear-gradient(180deg, #101937, #3d0c54);
}

    /* Make everything inside the nav transparent (kills the “white bar”) */
    .sidebar .navbar,
    .sidebar .navbar-dark,
    .sidebar .navbar-collapse,
    .sidebar .mobile_nav,
    .sidebar .nav,
    .sidebar .nav-item,
    .sidebar .nav-link {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* The collapsible nav area may scroll when inner components are tall */
    .sidebar .mobile_nav {
        overflow-y: auto;
        max-height: calc(100dvh - var(--sidebar-header-h));
        /* Scrollbar colors (Firefox) */
        scrollbar-color: rgba(255,255,255,.25) transparent;
    }

        /* Scrollbar styling (Chromium/WebKit) */
        .sidebar .mobile_nav::-webkit-scrollbar {
            width: 10px;
        }

        .sidebar .mobile_nav::-webkit-scrollbar-track {
            background: transparent;
        }
        /* <-- removes white strip */
        .sidebar .mobile_nav::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,.25);
            border-radius: 8px;
        }

/* Ensure the main/content area never paints white behind the sidebar */
.page > main,
.content,
.content > .container,
.content > .container-fluid {
    background-color: transparent !important;
}

/* Styles for all phones */
@media screen and (max-width: 768px) {
    /*.sidebar {        
        height: initial;        
    }*/

    .sidebar {
        height: initial;
        transition: height .2s ease;
    }

        /* when the offcanvas OR your old collapse is open, shrink the sidebar */
        .sidebar:has(#sideNav.show),
        .sidebar:has(.mobile_nav.show) {
            height: 100dvh; /* or: height: var(--sidebar-header-h); */
            transition: height .2s ease;
        }

    section {
        padding: 15px;
    }

    .app-container {
        padding-left: initial;
        padding-right: initial;
    }
}


@media screen and (max-width: 349px) {
    .logo {
        width: 45%;        
    }       
}

@media screen and (min-width: 350px ) and (max-width: 767px) {
    .logo {
        max-width: 45% !important;
    }

    
}

/* Styles for tablets and larger screens */
@media screen and (min-width: 768px) {
    .mobile_nav.collapse,
    .mobile_nav.collapsing {
        /* Override the display: none; from Bootstrap's .collapse */
        display: block !important;
        /* If the menu is meant to be a fixed sidebar: */
        height: 100% !important;
        overflow-y: auto;
    }
}

/* Styles for desktops and larger screens */
@media screen and (min-width: 1024px) {
    .column {
        width: 33.33%;
    }
}

/* keep header (logo + hamburger) tappable above overlay */
.top-row {
    position: relative;
    z-index: 1060;
}

@media (max-width: 768) {
    /* full-screen overlay; appears only when menu is open */
    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 1050; /* below header (.top-row), above page */
        border: 0;
    }

        .menu-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

    /* OPTIONAL: slide-in effect for the collapse panel */
    .mobile_nav {
        position: fixed;
        left: 0;
        right: auto;
        top: var(--sidebar-header-h);
        bottom: 0;
        width: min(85vw, var(--sidebar-width));
        display: block; /* override collapse's display:none */
        transform: translateX(-100%); /* hidden by default */
        transition: transform .2s ease;
        overflow-y: auto;
        z-index: 1065; /* above overlay so it’s clickable */
        background: transparent !important;
    }

        .mobile_nav.show {
            transform: translateX(0);
        }

    
}


/* Desktop & tablets: only the inner menu scrolls */
@media (min-width: 768px) {
    .sidebar {
        overflow-y: hidden; /* stop the outer scrollbar */
    }

    .mobile_nav.collapse,
    .mobile_nav.collapsing {
        display: block !important;
        height: auto !important; /* override the 100% that causes nesting */
        max-height: calc(100dvh - var(--sidebar-header-h));
        overflow-y: auto;
    }
}

/* Mobile: the slide-in panel (mobile_nav) already scrolls; keep sidebar non-scrolling */
@media (max-width: 991.98px) {
    .sidebar {
        overflow: visible;
    }
    /* header only; panel handles its own scroll */
    /* your existing .mobile_nav { position: fixed; ...; overflow-y: auto; } is fine */

    .mobile_nav {
        width:100%;
        max-width:400px;
    }
}