.sy-past #header h1 .school-year .fa,
#header h1 .switcher .sy-past a .fa,
#nav .sy-past a .fa {
    color: var(--red);
}
#header h1 .switcher .sy-current a .fa,
#nav .sy-current a .fa {
    color: var(--green);
}
.sy-pre-flight #header h1 .school-year .fa,
#header h1 .switcher .sy-pre-flight a .fa,
#nav .sy-pre-flight a .fa {
    color: var(--blue);
}
/**
 * NAV
 */
#nav {
    bottom: 0;
    position: fixed;
    top: 0;
    width: 150px;
    left: -150px;
    z-index: 4;
}
.nav-collapsed #nav {
    width: 44px;
    left: -44px;
}
.nav-collapsed #nav:hover {
    width: 150px;
}
#nav .subnav {
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.overlay-nav #nav,
.overlay-nav .nav-collapsed #nav {
    left: 0;
}
.overlay-nav .nav-cover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: -3;
}
#nav ul {
    list-style: none;
}
#nav > ul {
    background-color: var(--primary);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
#nav > ul > li.nav-collapse-toggle .pure-button {
    color: var(--white);
    font-size: 20px;
    padding: 0.5em 0;
    width: 100%;
}
#nav > ul > li.nav-collapse-toggle .pure-button:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f100';
}
.nav-collapsed #nav > ul > li.nav-collapse-toggle .pure-button:before {
    content: '\f101';
}
#nav > ul > li > a {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    color: var(--white);
    display: flex;
    align-items: center;
    text-decoration: none;
}
#nav > ul > li > a span {
    min-width: 110px;
}
#nav a:focus {
    box-shadow: inset 0 0 0 3px var(--secondary);
    outline: none;
}
#nav li.nav-active a:focus {
    box-shadow: inset 0 0 0 3px var(--primary);
}
#nav > ul > li.nav-active > a,
#nav > ul > li > a:hover {
    background-color: var(--secondary);
}
/*Transition train*/
/*CLOSING*/
#nav {
    transition: left .2s .4s ease-in-out, width .2s .4s ease-in-out;
}
#nav.collapse-now {
    pointer-events: none;
    transition: left .2s ease-in-out, width .2s ease-in-out;
}
#nav > ul .subnav {
    transition: right .2s .2s ease-in;
}

/*OPENING*/
.nav-collapsed #nav:hover {
    transition: width .2s .4s ease-in-out, box-shadow 0s .4s;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
#nav > ul > li.open .subnav,
#nav > ul > li > a:focus + .subnav,
#nav > ul > li:hover .subnav {
    transition: right .2s .4s ease-out;
}

#nav > ul .subnav {
    background: var(--bg-alt);
    bottom: 0;
    font-size: 0.9em;
    right: 5px;
    margin: 0;
    overflow: auto;
    padding: 15px;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    width: 200px;
    z-index: -2;
    box-sizing: border-box;
}
#nav > ul > li.open .subnav,
#nav > ul > li > a:focus + .subnav,
#nav > ul > li:hover .subnav {
    right: -200px; /* nav-width */
    z-index: -1;
}
#nav .subnav ul {
    padding: 0;
}
#nav .subnav li {
    margin: 0.25em 0;
}
#nav .subnav h3,
#nav .subnav h4 {
    margin: 0 0 0.5em 0;
}
#nav .subnav a {
    color: var(--text-alt);
    display: block;
    padding: 0.25em;
    text-decoration: none;
}
#nav .subnav li.nav-active a,
#nav .subnav a:hover {
    background-color: var(--border-color);
    border-radius: 0.25em;
    color: var(--text);
}
#nav .subnav a .fa {
    float: left;
    margin-right: 0.5em;
    margin-top: 0.1em;
}
#nav .subnav a .fa + span {
    overflow: hidden;
    display: block;
}
#nav .subnav li.startgroup {
    margin-top: 1em;
    padding-top: 1em;
    border-top: var(--border-dark);
}
#nav .subnav li ul {
    margin-top: 0;
}
#nav .subnav li li li {
    font-size: 90%;
    margin-left: 1rem;
}
#ui-index-index .back-nav,
#ui-home-index .back-nav,
#ui-calendar-index .back-nav,
#ui-directory-index .back-nav,
#ui-bulletin-index .back-nav {
    display: none;
}
@media screen and (min-width: 48em) { /*Nav styles for pure-u-md*/
    #nav,
    .nav-collapsed #nav {
        left: 0;
    }
    body.sy-historical #nav,
    body.sy-past       #nav,
    body.sy-pre-flight #nav {
        top: 30px;
    }
    .back-nav {
        display: none;
    }
}

/* nav icons */
body:not(.combine-nav) #nav > ul > li > a > i::before {
    content:'' !important;
}
#nav > ul > li > a > i {
    background: url(/ui/alma/base/images/nav-icons-2x.png?v=v9.4.0) no-repeat 0 0/100px;
    display: inline-block;
    height: 40px;
    vertical-align: middle;
    min-width: 40px;
    color: var(--text);
    font-size: 22px;
    line-height: 40px;
    margin: 2px;
}
#nav .nav-activities i {
    background-position: -30px -30px;
}
#nav .nav-activities.nav-active a i,
#nav .nav-activities a:hover i {
    background-position: -30px -130px;
}
#nav .nav-assessments i {
    background-position: -30px -230px;
}
#nav .nav-assessments.nav-active a i,
#nav .nav-assessments a:hover i {
    background-position: -30px -330px;
}
#nav .nav-attendance i {
    background-position: -30px -230px;
}
#nav .nav-attendance.nav-active a i,
#nav .nav-attendance a:hover i {
    background-position: -30px -330px;
}
#nav .nav-calendar i {
    background-position: -30px -430px;
}
#nav .nav-calendar.nav-active a i,
#nav .nav-calendar a:hover i {
    background-position: -30px -530px;
}
#nav .nav-classes i {
    background-position: -30px -630px;
}
#nav .nav-classes.nav-active a i,
#nav .nav-classes a:hover i {
    background-position: -30px -730px;
}
#nav .nav-courses i {
    background-position: -30px -830px;
}
#nav .nav-courses.nav-active a i,
#nav .nav-courses a:hover i {
    background-position: -30px -930px;
}
#nav .nav-directory i {
    background-position: -30px -1030px;
}
#nav .nav-directory.nav-active a i,
#nav .nav-directory a:hover i {
    background-position: -30px -1130px;
}
#nav .nav-fees i {
    background-position: -30px -1230px;
}
#nav .nav-fees.nav-active a i,
#nav .nav-fees a:hover i {
    background-position: -30px -1330px;
}
#nav .nav-home i {
    background-position: -30px -1430px;
}
#nav .nav-home.nav-active a i,
#nav .nav-home a:hover i {
    background-position: -30px -1530px;
}
#nav .nav-incidents i {
    background-position: -30px -1630px;
}
#nav .nav-incidents.nav-active a i,
#nav .nav-incidents a:hover i {
    background-position: -30px -1730px;
}
#nav .nav-reportcards i {
    background-position: -30px -1830px;
}
#nav .nav-reportcards.nav-active a i,
#nav .nav-reportcards a:hover i {
    background-position: -30px -1930px;
}
#nav .nav-reports i {
    background-position: -30px -2030px;
}
#nav .nav-reports.nav-active a i,
#nav .nav-reports a:hover i {
    background-position: -30px -2130px;
}
#nav .nav-scheduling i {
    background-position: -30px -2230px;
}
#nav .nav-scheduling.nav-active a i,
#nav .nav-scheduling a:hover i {
    background-position: -30px -2330px;
}
#nav .nav-settings i {
    background-position: -30px -2430px;
}
#nav .nav-settings.nav-active a i,
#nav .nav-settings a:hover i {
    background-position: -30px -2530px;
}
#nav .nav-workflows i {
    background-position: -30px -2630px;
}
#nav .nav-workflows.nav-active a i,
#nav .nav-workflows a:hover i {
    background-position: -30px -2730px;
}
#nav .nav-import i {
    background-position: -30px -2830px;
}
#nav .nav-import.nav-active a i,
#nav .nav-import a:hover i {
    background-position: -30px -2930px;
}
#nav .nav-file-cabinet i {
    background-position: -30px -3030px;
}
#nav .nav-file-cabinet.nav-active a i,
#nav .nav-file-cabinet a:hover i {
    background-position: -30px -3130px;
}
#nav .nav-surveys i {
    background-position: -30px -3230px;
}
#nav .nav-surveys.nav-active a i,
#nav .nav-surveys a:hover i {
    background-position: -30px -3330px;
}

/*combine nav for mobile*/
@media only screen and (max-width : 767px) {/*pure-u-md - 1px*/
    .combine-nav #nav {
        top: auto;
        box-shadow: none;
        right: 40vw;
        left: 0;
        bottom: 10px;
        width: auto;
        transition: none;
    }
    .ua-ios .combine-nav #nav {
        bottom: 25px;
    }
    .ua-ios #user-menu {
        padding-bottom: 25px;
    }
    .combine-nav #nav ul {
        background: transparent;
        height: auto;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
    .combine-nav #nav ul > li {
        width: 20vw;
    }
    .combine-nav #nav ul > li > a {
        color: var(--text);
        text-align: center;
        text-transform: none;
        border: none;
    }
    .combine-nav #nav > ul > li:not(.nav-home):not(.nav-directory):not(.nav-calendar):not(.nav-netsuite) {
        display: none;
    }
    .combine-nav #nav > ul > li.nav-active > a,
    .combine-nav #nav > ul > li > a:hover {
        background-color: transparent;
    }
    .combine-nav #nav ul > li > a span {
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        width: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
    }
    .pure-button.toggle-nav {
        border-right: 0;
    }
    .combine-nav #nav > ul > li > a > i {
        display: block;
        margin: auto;
        line-height: 48px;
        height: auto;
        background: none;
        color: var(--text);
    }
    .combine-nav #nav > ul > li > a > i::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-size: 22px;
        display: block;
    }
    .combine-nav #nav > ul > li.nav-active > a > i {
        color: var(--primary);
    }
    .combine-nav #nav .nav-home i::before {
        content: '\f015';
    }
    .combine-nav #nav .nav-directory i::before {
        content: '\f2b9';
    }
    .combine-nav #nav .nav-calendar i::before {
        content: '\f073';
    }
}