:root {
    --tp-sidebar-width: 250px;
    --tp-sidebar-icon-width: 70px;
    --tp-header-height: 60px;
    --tp-sidebar-bg: #ffffff;
    --tp-sidebar-border: #EDE7ED;
    --tp-sidebar-text: #3F3F46;
    --tp-sidebar-muted: #C9C0C9;
    --tp-sidebar-active-text: #6C2079;
    --tp-sidebar-active-bg: #F7EDF6;
    --tp-sidebar-hover-bg: #F6F2F6;
    --tp-sidebar-accent: #E20F6D;
}

.uuu-main-body {
    width: calc(100% - var(--tp-sidebar-width));
    /* flex items default to min-width:auto, so wide content would overflow the column */
    min-width: 0;
    /* holds the footer at the bottom on short pages */
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--tp-header-height));
    transition: width 0.3s;
}

.uuu-with-icon-main-body {
    width: calc(100% - var(--tp-sidebar-icon-width));
}

.uuu-main-body.uuu-full-body,
.uuu-main-body.uuu-full-body.uuu-with-icon-main-body {
    width: 100%;
}

    .uuu-main-body .container,
    .uuu-main-body .container-fluid {
        max-width: 100% !important;
    }

    .uuu-main-body .uuu-body-content {
        flex: 1 0 auto;
        padding: 24px 30px 40px;
    }

@media (min-width: 993px) {
    /* 18 tables carry .table-responsive on the <table> itself; its display:block drops
       table layout and leaves the row shrink-to-fit. Narrower screens still need it. */
    .uuu-main-body table.table-responsive {
        display: table;
    }

    /* one value for both, so the first paint needs no measuring */
    .uu-header-wrapper,
    body header#topHeader {
        height: var(--tp-header-height);
    }

    /* this layout's header scrolls away, so the rail rides up with it */
    .tp-static-header .uuu-left-sidebar > .tp-side-nav {
        position: sticky;
        top: 0;
        left: auto;
        height: 100vh;
    }
}

.uu-header-wrapper > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

    .uu-header-wrapper > .container-fluid > .row {
        margin-right: 0;
        margin-left: 0;
    }

.uu-header-wrapper .logo-wrapper.d-middle {
    justify-content: flex-start;
}

/* px-lg-0 zeroes this column's padding with !important, flushing the icon to the edge */
.uu-header-wrapper .uu-mobile-right-menu {
    padding-right: 15px !important;
}

/* teacher-evaluation.css ships an unscoped .logo { width: 300px; margin: 0 auto } */
.uu-header-wrapper .logo {
    position: relative;
    width: auto;
    margin: 0;
}

.uu-demo-site-badge {
    font-size: 16px;
    font-weight: bolder;
    color: #FF0000;
    text-shadow: 2px 2px #bababa;
    white-space: nowrap;
}

/* style.css sets .row { margin: 0 -21px } later in the cascade, defeating .no-gutters */
.uu-main > .container-fluid > .row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

/* teacher-evaluation.css outlines every img under .uu-main */
.uu-main .uuu-left-sidebar img,
.uu-main .uuu-main-body > footer img {
    border: 0;
}

.uuu-left-sidebar {
    width: var(--tp-sidebar-width);
    transition: width 0.3s;
}

    .uuu-left-sidebar > .tp-side-nav {
        position: fixed;
        top: var(--tp-header-height);
        left: 0;
        width: var(--tp-sidebar-width);
        height: calc(100vh - var(--tp-header-height));
        margin: 0;
        padding: 12px 10px 60px;
        list-style: none;
        background: var(--tp-sidebar-bg);
        border-right: 1px solid var(--tp-sidebar-border);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1000;
        transition: width 0.3s, transform 0.3s;
    }

.uuu-icon-sidebar,
.uuu-icon-sidebar > .tp-side-nav {
    width: var(--tp-sidebar-icon-width);
}

.uuu-left-sidebar > .tp-side-nav::-webkit-scrollbar {
    width: 6px;
}

.uuu-left-sidebar > .tp-side-nav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.uuu-left-sidebar > .tp-side-nav::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 3px;
}

    .uuu-left-sidebar > .tp-side-nav::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

.tp-side-nav li {
    list-style: none;
}

.tp-side-nav > li {
    margin-bottom: 2px;
}

.tp-side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--tp-sidebar-text);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .tp-side-nav a:hover,
    .tp-side-nav a:focus {
        background: var(--tp-sidebar-hover-bg);
        color: var(--tp-sidebar-active-text);
        text-decoration: none;
    }

    .tp-side-nav a.active {
        background: var(--tp-sidebar-active-bg);
        color: var(--tp-sidebar-active-text);
        font-weight: 500;
    }

.tp-side-nav .tp-menu-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
}

.tp-side-nav .menu-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-side-nav .tp-caret {
    font-size: 12px;
    color: var(--tp-sidebar-muted);
    transition: transform 0.2s ease;
}

.tp-menu-group.tp-open > .tp-group-toggle .tp-caret {
    transform: rotate(180deg);
}

.tp-menu-group.tp-open > .tp-group-toggle,
.tp-menu-group.tp-has-active > .tp-group-toggle {
    background: var(--tp-sidebar-active-bg);
    color: var(--tp-sidebar-active-text);
}

    .tp-menu-group.tp-open > .tp-group-toggle .tp-caret,
    .tp-menu-group.tp-has-active > .tp-group-toggle .tp-caret {
        color: var(--tp-sidebar-active-text);
    }

.tp-submenu {
    display: none;
    margin: 2px 0 6px 8px;
    padding: 0 0 0 8px;
    border-left: 1px solid #E6DFE6;
}

    .tp-submenu > li > a {
        padding: 7px 10px;
        font-size: 14px;
        white-space: normal;
        align-items: flex-start;
    }

        .tp-submenu > li > a::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            min-width: 6px;
            margin-top: 7px;
            border-radius: 50%;
            background: var(--tp-sidebar-muted);
        }

        .tp-submenu > li > a.active::before {
            background: var(--tp-sidebar-accent);
        }

/* main.js hides the labels by adding d-none on ready; keying off the rail class
   too lets the server-rendered collapsed state paint correctly on first load */
.uuu-icon-sidebar .tp-side-nav .menu-text,
.uuu-icon-sidebar .tp-submenu,
.uuu-icon-sidebar .tp-caret {
    display: none !important;
}

.uuu-icon-sidebar .tp-side-nav a {
    justify-content: center;
    padding: 8px 4px;
}

@media (max-width: 992px) {
    .uuu-main-body,
    .uuu-with-icon-main-body {
        width: 100%;
    }

    /* .uu-mobile-menu already gets the burger's off-canvas drawer from style.css,
       so only the width is corrected here rather than running a second drawer */
    div.uuu-left-sidebar.uu-mobile-menu {
        width: var(--tp-sidebar-width);
        /* the legacy drawer cleared the .uu-desible-body scrim through its header
           stacking context; this one sits in .uu-main and has to clear it itself */
        z-index: 100000;
    }

    /* fixed would pin the rail to the viewport instead of riding with the drawer */
    .uuu-left-sidebar > .tp-side-nav,
    .uuu-icon-sidebar > .tp-side-nav {
        position: static;
        width: 100%;
        height: auto;
        border-right: 0;
    }

    .uuu-icon-sidebar .tp-side-nav .menu-text {
        display: block !important;
    }

    .uuu-icon-sidebar .tp-caret {
        display: inline-block !important;
    }

    .uuu-icon-sidebar .tp-menu-group.tp-open > .tp-submenu {
        display: block !important;
    }

    .uuu-icon-sidebar .tp-side-nav a {
        justify-content: flex-start;
        padding: 8px 10px;
    }

    .tp-submenu > li > a {
        white-space: pre-wrap;
    }
}