/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------------
    NO MAIN NAVIGATION OR SOCIAL MEDIA
--------------------------------------------*/

#navigation.hide-me {
    display: grid;
    height: 0px;
    min-height: 0px !important;
    border-top: solid 1px var(--primary);
    position: relative;
}

    #navigation.hide-me .container {
        display: none !important;
    }

#mobile-options .mobile-main-nav.hide-me {
    display: none !important;
}

#navigation-more {
    display: none;
}

    #navigation-more.active {
        display: grid;
    }
/*----------------------------------------------
PRIMARY TABS
------------------------------------------------*/

.link-box {
    position: relative;
    margin: 0;
    padding: 0;
}

#top:not(.mobile):not(.page-landing):not(.page-presentation) #navigation,
#top:not(.mobile) .lower-scroll #navigation {
    background: var(--primary);
    color: var(--primary-text);
    min-height: 44px;
    z-index: 5;
}

#navigation .container {
    z-index: 5;
}

#top:not(.mobile) #navigation .container, #top:not(.mobile) .breadcrumbs .container {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 10px;
    align-items: center;
    padding: var(--navigation-padding);
}

    #top:not(.mobile) #navigation .container.no-socials {
        grid-template-columns: 1fr;
    }
    /*--- WITH MORE BUTTON SHOWING ---*/
    #top:not(.mobile) #navigation .container.with-more {
        grid-template-columns: 1fr auto;
    }

.mobile #navigation-more {
    display: none;
}

.navigation-more.active details {
    border: 0px;
    margin: 0px;
    position: relative;
    height: 44px;
    min-width: 250px;
}

    .navigation-more.active details summary {
        padding: 0px;
        padding-right: 12px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        min-height: 44px;
        align-items: center;
        margin: 0px;
    }

        .navigation-more.active details summary .summary-text {
            text-align: center;
        }

    .page-landing .navigation-more.active details summary {
        background-color:inherit !important;
        color:inherit !important;
        text-shadow:none !important
    }
        .navigation-more.active details[open] summary {
        background-color: var(--my-white);
        color: var(--secondary);
        height: 44px;
    }

        .navigation-more.active details[open] summary i {
            transform: rotateX(180deg);
            transform-origin: center;
            transition: transform var(--transition-time) ease;
        }

    .navigation-more.active details > ul {
        position: absolute;
        left: 0;
        top: 44px;
        background-color: var(--cloud);
        color: var(--cloud-text);
        /* border-top: solid 4px var(--orange); */
        border-bottom-left-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small);
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
        /*pointer-events: none;
        max-height: 450px; */
        height: auto;
        width: 100%;
        z-index: 5;
        transform: rotateX(-90deg);
        transform-origin: top center;
        transition: transform var(--transition-time) ease;
        list-style-type: none;
        margin: 0px;
        padding: 6px;
    }

    .navigation-more.active details[open] > ul {
        transform: rotateX(0deg);
        transition: transform var(--transition-time) ease;
    }

    .navigation-more.active details > ul li {
        margin: 0px;
        min-height: 44px;
        display: grid;
        align-content: center;
        min-width: 100%;
        border-bottom: solid 1px var(--my-gray);
        text-shadow:none;
    }

        .navigation-more.active details > ul li.with-details.with-link .tab-link.with-button {
            background-color: inherit;
            border: 0px;
            color: var(--secondary);
            padding: 0px;
        }

        .navigation-more.active details > ul li.with-details.with-link .tab-link,
        .navigation-more.active details > ul li.with-details.with-link .tab-link.with-button {
            position: absolute;
            z-index: 10;
            left: 20px;
            width: fit-content;
            min-height: 44px;
            align-content: center;
            font-weight: unset;
        }
        .navigation-more.active ul#ulMore li.with-link:not(.with-details) .tab-link{
            padding-left:16px;
        }
        .navigation-more.active details > ul li.with-details.with-link summary {
            justify-content: end;
            width: 100%;
            grid-template-columns: 1fr;
            text-align: right;
        }

        .navigation-more.active details > ul li details {
            width: 100%;
            min-width: unset;
            height: auto;
        }

            .navigation-more.active details > ul li details .summary-text {
                text-align: left;
                padding-left: 6px;
            }

    .navigation-more.active details[open] > ul li details summary i {
        transform: rotateX(0deg);
        transform-origin: center;
        transition: transform var(--transition-time) ease;
    }

    .navigation-more.active details[open] > ul li details[open] summary i {
        transform: rotateX(180deg);
        transform-origin: center;
        transition: transform var(--transition-time) ease;
    }

    .navigation-more.active details[open] > ul li details[open] p {
        margin: 0px;
    }

        .navigation-more.active details[open] > ul li details[open] p button {
            display: none;
        }

.navigation-more.active .with-social details {
    opacity: 1 !important;
}

.navigation-more.active .with-social summary {
    grid-template-columns: auto 1fr auto;
}

.navigation-more.active .with-social ul li {
    width: 44px;
    height: 44px;
    flex-basis: auto;
    min-width: unset;
}
/*--- HIDEING PAGE TOPICS ---*/
.table-of-contents {
    display: none;
}

.setup:not(.mobile) #main-nav {
    background: var(--titan-blue);
    color: var(--titan-blue-text);
}

#top:not(.mobile) #btn-mobile-close-nav {
    display: none;
}

#top:not(.mobile) #main-nav {
    width: 100%;
    font-size: initial;
    z-index: 10;
    position: relative;
    min-height: 44px;
    max-height: 44px;
    height: 44px;
}

.preview-content section.navigation-desktop {
    padding: 0px;
    border-radius: 0;
}

:not(.mobile) #main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: max-content;
}

    :not(.mobile) #main-nav ul li {
        position: relative;
        height: 44px;
        margin: 0px;
        /* place-items: center;
        padding: 0px 6px;*/
        display: flex;
        flex-direction:row;
        align-items: center;
        gap: 6px;
    }

        :not(.mobile) #main-nav ul li.details-only {
            padding-left: 0px;
            padding-right: 0px;
        }

: not(.mobile) #main-nav #btnFullMenu {
    background: inherit;
    border: 0px;
    color: inherit;
}

    :not(.mobile) #main-nav #btnFullMenu:hover {
        cursor: pointer;
    }

#top:not(.mobile) #main-nav li.main-tab {
    position: relative;
}

    #top:not(.mobile) #main-nav li.main-tab.overflowed,
    #top:not(.mobile) #tab-social.overflowed {
        display: none;
    }

    #top:not(.mobile) #main-nav li.main-tab.active a.tab-link,
    #top:not(.mobile) #main-nav li.main-tab.pinned a.tab-link,
    #top:not(.mobile) #main-nav a.tab-link,
    #top:not(.mobile) #main-nav button.tab-link,
    #top:not(.mobile) #main-nav li.main-tab .summary-text {
        color: var(--white);
        background: inherit;
        font-family: var(--font-family);
        font-size: var(--font-size-navigation);
        font-weight: unset;
        text-transform: capitalize;
        text-align: center;
        z-index: 5;
        display: flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-content:baseline;
        /*line-height: 18px;*/
        padding:8px 12px;
        border: none;
        position: relative;
        width: fit-content;
        min-height: unset;
    }

summary.summary-text {
    gap: 10px;
}

summary *.summary-text {
    font-weight: 400;
}


#top:not(.mobile) #main-nav li.main-tab.active a.tab-link,
#top:not(.mobile) #main-nav li.main-tab.pinned a.tab-link,
#top:not(.mobile) #main-nav li:hover a.tab-link,
#top:not(.mobile) #main-nav li:focus-within a.tab-link,
#top:not(.mobile) #main-nav li:hover button.tab-link,
#top:not(.mobile) #main-nav li.main-tab.active button.tab-link,
#top:not(.mobile) #main-nav li:focus-within button.tab-link,
#top:not(.mobile) #main-nav li.pinned button.tab-link, #top:not(.mobile) #main-nav li.main-tab.pinned summary *,
#top:not(.mobile) #main-nav li.details-only:hover .summary-text,
#top:not(.mobile) #main-nav li.details-only:focus-within .summary-text,
#top:not(.mobile) #main-nav li.active:focus-within .summary-text,
#top:not(.mobile) #main-nav li.active:hover .summary-text {
    color: var(--titan-blue);
}

:not(.mobile) #main-nav li.with-button {
    display: grid;
   /* grid-template-columns: 1fr auto;*/
    position: relative;
    padding-right: 44px;
}

    :not(.mobile) #main-nav li.with-button details {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 44px;
        border: 0px;
        margin: 0px;
        padding: 0px;
        z-index: 3;
    }

    :not(.mobile) #main-nav li.with-button.details-only details {
        position: relative;
        padding-right: unset;
    }

    :not(.mobile) #main-nav li.with-button details[open] {
        background-color: inherit;
        color: inherit;
    }

    :not(.mobile) #main-nav li.with-button details summary {
        grid-template-columns: auto;
        align-items: center;
        justify-content: end;
        height: 44px;
        padding: 0px;
        padding-right: 12px;
        margin: 0px;
        text-align: right;
        background-color: inherit;
        color: inherit;
    }

    :not(.mobile) #main-nav li.with-button details[open] summary i {
        transform: rotateX(180deg);
        transform-origin: center;
        transition: transform var(--transition-time) ease-in-out;
    }

    :not(.mobile) #main-nav li.with-button details summary i,
    :not(.mobile) #main-nav li.with-button.active details summary i {
        transform: rotateX(0deg);
        transform-origin: center;
        transition: transform var(--transition-time) ease-in-out;
    }


:not(.mobile) #main-nav button.show-hide-extended {
    /*background-color: inherit;*/
    color: inherit;
    position: relative;
    height: unset;
}

:not(.mobile) #main-nav li:hover, :not(.mobile) #main-nav li:focus-within,
:not(.mobile) #main-nav li.main-tab.active,
:not(.mobile) #main-nav li.main-tab.pinned,
:not(.mobile) #main-nav li:hover a.tab-link,
:not(.mobile) #main-nav li:focus-within details .summary-text,
:not(.mobile) #main-nav li:hover details .summary-text {
    background-color: var(--my-white);
    color: var(--my-white-text);
}

    :not(.mobile) #main-nav li.main-tab.active:not(.pinned) button.show-hide-extended i,
    :not(.mobile) #main-nav li.main-tab details[open] summary i {
        transform: rotateX(180deg);
        transition: transform var(--transition-time-slow) ease-in-out;
    }

.tab-link {
    text-decoration: none;
}

    .tab-link:hover {
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-color: var(--orange);
        text-decoration-thickness: 4px;
    }

/*-------------------------------------------
        DROP DOWN MENU
    */

.menu-header {
    position: relative;
    background-color: inherit;
    color: inherit;
}

.dropdown-menu {
    background-color: inherit;
    color: inherit;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    box-shadow: 0 0.15em 0.25em rgba(0,0,0,.25);
    padding: 0.8em;
    min-width: clamp(15ch, 40ch, 300px);
    list-style: none;
    position: absolute;
    top: calc(100% - 0.25rem);
    left: 50%;
    /* use translate X to shift the menu 50% of its width back to the left */
    transform: translateX(-50%);
    /* hide the menu like a garage door in the up position */
    transform: rotateX(-90deg) translateX(-50%);
    transform-origin: top center;
    opacity: 0.3;
    transition: 280ms all 120ms ease-out;
}

.menu-header:hover .dropdown-menu,
.menu-header:focus-within .dropdown-menu {
    opacity: 1;
    transform: rotateX(0) translateX(-50%);
    visibility: visible;
}

/*-----------------------------------------
    LOWER SCROLL
-------------------------------------------*/
#top:not(.mobile) .lower-scroll #main-nav {
    /* background-color: var(--white);
    color: var(--white-text);*/
    display: grid;
}

    #top:not(.mobile) .lower-scroll #main-nav ul li {
        height: unset;
    }

    #top:not(.mobile) .lower-scroll #main-nav li,
    #top:not(.mobile) .lower-scroll #main-nav li a.tab-link,
    #top:not(.mobile) .lower-scroll #main-nav li.main-tab.active a,
    #top:not(.mobile) .lower-scroll #main-nav li.main-tab button.tab-link,
    #top:not(.mobile) .lower-scroll #main-nav li:hover,
    #top:not(.mobile) .lower-scroll #main-nav li.main-tab.active,
    #top:not(.mobile) .lower-scroll #main-nav li.main-tab.pinned,
    #top:not(.mobile) .lower-scroll #main-nav li:hover button.tab-link,
    #top:not(.mobile) .lower-scroll .navigation-more #detailMore .summary-text,
    #top:not(.mobile) .lower-scroll .navigation-more li.with-link .tab-link,
    #top:not(.mobile) .lower-scroll .navigation-more .extended-link a {
        font-size: var(--font-size-navigation-lower);
        transition: font-size var(--transition-time-fast) ease-in-out;
    }

        #top:not(.mobile) .lower-scroll #main-nav li:hover
        #top:not(.mobile) .lower-scroll #main-nav li:hover a.tab-link:before {
            color: var(--light-gray);
            background-color: var(--titan-blue);
            border: none;
            text-decoration: underline 2px var(--orange);
            text-underline-offset: unset;
        }

        #top:not(.mobile) .lower-scroll #main-nav li:hover button.tab-link,
        #top:not(.mobile) .lower-scroll #main-nav li.active button.tab-link {
            text-decoration: none;
        }

        #top:not(.mobile) .lower-scroll #main-nav li a.tab-link i {
           /* font-size: var(--font-size-navigation-lower);
            padding-left: 10px;*/
        }


header.lower-scroll #navigation {
    min-height: 44px;
    transition: background-color 200ms ease-in-out, min-height 200ms ease-in-out;
}

.mobile header.lower-scroll #navigation {
    min-height: 0px;
}

    header.lower-scroll #navigation .container a {
        line-height: unset;
    }

        header.lower-scroll #navigation .container a:focus {
            color: inherit;
            background-color: inherit;
            outline: dotted;
            outline-offset: var(--outline-offset);
            text-decoration: underline;
            text-decoration-color: var(--orange);
            text-decoration-thickness: 2px;
        }

header.lower-scroll #navigation #website-lower-scroll-name a:focus {
    outline-offset: unset;
}

header.lower-scroll #main-nav-lower-scroll button {
    border: 0px;
    background: inherit;
    color: var(--titan-blue);
}

    header.lower-scroll #main-nav-lower-scroll button:hover {
        border-bottom: solid 2px var(--orange);
        cursor: pointer;
    }

header.lower-scroll #main-nav-lower-scroll, header.lower-scroll #main-nav-lower-scroll li a.tab-link {
    height: 50px;
}

    header.lower-scroll #main-nav-lower-scroll ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

        header.lower-scroll #main-nav-lower-scroll ul li {
            display: inline-block;
            position: relative;
            margin: 0;
            padding: 0;
            min-height: 38px;
        }

    header.lower-scroll #main-nav-lower-scroll li a.tab-link {
        color: var(--titan-blue);
        background: inherit;
        text-decoration: none;
        font-family: var(--font-family);
        font-weight: bold;
        font-size: var(--font-size-small);
        text-transform: uppercase;
        letter-spacing: .025em;
        padding: 10px 15px;
        height: 38px;
        position: relative;
        z-index: 3;
        display: block;
    }

    header.lower-scroll #main-nav-lower-scroll li.main-tab.active a.tab-link {
        color: var(--black);
    }

header.lower-scroll #main-nav-holder ul li {
    margin-top: 0px;
}

header.lower-scroll #display-mode button {
    width: unset;
    grid-template-columns: 1fr;
}

    header.lower-scroll #display-mode button span {
        display: none;
    }

header.lower-scroll {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    min-height: 44px;
    max-height: 44px;
    z-index: 9;
    transition: min-height 200ms ease-in-out, height 200ms ease-in-out, transform 200ms ease;
    transform-origin: top center;
}

    header.lower-scroll.lower-scroll-hidden {
        transform: translateY(-120px);
        transition: transform 200ms ease;
    }

    header.lower-scroll #website-lower-scroll-quicklinks, header.lower-scroll #website-lower-scroll-search {
        display: block;
    }

    header.lower-scroll #website-lower-scroll-csuflogo .lower-scroll-csuflogo {
        fill: var(--medium-blue);
        height: auto;
        width: 50px;
    }


    header.lower-scroll #csuf_emblem {
        opacity: 0;
        height: 0px;
        transition: opacity 0.2s;
    }

    header.lower-scroll .CSUF-header-logo {
        margin-left: 0px;
    }

    header.lower-scroll #csuf_wordmark {
        opacity: 1;
        margin-top: 10px;
        transition: opacity 0.2s;
    }

    header.lower-scroll #website-name {
        position: relative;
        z-index: 5;
        display:grid;
        align-items:center;
        align-content:center;
    }

    header.lower-scroll #website-lower-scroll-name {
        display: grid;
        align-content: center;
        justify-content: center;
        height: 38px;
    }

        header.lower-scroll #website-lower-scroll-name a {
            padding: 0px;
            color: var(--medium-blue);
            border-bottom: solid 2px transparent;
        }

            header.lower-scroll #website-lower-scroll-name a:hover, header.lower-scroll #website-lower-scroll-csuflogo .lower-scroll-csuflogo:hover {
                fill: var(--black);
                color: var(--black);
            }

        header.lower-scroll #website-lower-scroll-name i {
            font-size: var(--font-size);
        }

    header.lower-scroll #search-quicklinks {
        top: 0px;
        right: 0px;
        transition: all 200ms ease-in-out;
        height: 38px;
    }

        header.lower-scroll #search-quicklinks article {
            margin-right: 0px;
        }

            header.lower-scroll #search-quicklinks article .quicklink-label {
                display: none;
            }

            header.lower-scroll #search-quicklinks article i {
                display: block;
            }

            header.lower-scroll #search-quicklinks article .quicklinks:focus {
                border-bottom: solid 1px #ff6800;
            }

            header.lower-scroll #search-quicklinks article .search:focus {
                border: solid 1px #ff6800;
                background-color: #00376b
            }




/*----------------------------------------------------
    TABLET / SMALLER LAPTOP MODE
-----------------------------------------------------*/


.tablet #website-unit a {
    font-size: var(--font-size);
}

.tablet #website-unit a {
    font-size: var(--font-size);
}

.tablet header.lower-scroll #website-unit {
    display: none;
}



/*---------------------------------
    EXTENDED NAVIGATION
----------------------*/

#main-nav li.active a.tab-link,
#main-nav li.active button.tab-link,
#main-nav li.pinned a.tab-link,
#main-nav li.pinned button.tab-link,
#main-nav li:hover a.tab-link,
#main-nav li:hover button.tab-link {
    /* color: var(--medium-blue-text);
    background-color: var(--medium-blue);*/
}

#main-nav button.show-hide-extended {
    display: inline-block;
    height: 50px;
    background-color: transparent;
    /* color:var(--medium-blue);    */
    border: 0px;
    width: 100%;
    z-index: 3;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    text-align: right;
}

    #main-nav button.show-hide-extended.active,
    #main-nav li a.tab-link.active,
    #main-nav li button.tab-link.active {
        /* background-color: var(--medium-blue);
        color: var(--medium-blue-text);*/
    }

#main-nav .extended-link {
    border-top: solid 1px var(--cloud);
}

    #main-nav .extended-link:first-child {
        border-top: none;
    }

#top:not(.mobile) #main-nav .main-tab .extended-navigation {
    position: absolute;
    left: 0;
    top: 44px;
    background-color: var(--cloud);
    color: var(--cloud-text);
    /*border-top: solid 4px var(--orange);*/
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    pointer-events: none;
    /*max-height: 450px;*/
    height: auto;
    width: 300px;
    z-index: 5;
    transform: rotateX(-90deg);
    transform-origin: top center;
}

    #top:not(.mobile) #main-nav .main-tab .extended-navigation p:last-child:hover,
    #top:not(.mobile) #main-nav .main-tab .extended-navigation p:last-child:focus {
        /* border-bottom-left-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small);*/
    }

#top:not(.mobile) #main-nav .main-tab.open-right .extended-navigation {
    left: unset;
    right: 0;
}

#top:not(.mobile) #main-nav .main-tab:first-child .extended-navigation {
    left: 0;
    right: unset;
}

#top:not(.mobile) #main-nav .main-tab.active .extended-navigation,
#top:not(.mobile) #main-nav .main-tab.pinned .extended-navigation,
#top:not(.mobile) #main-nav .main-tab:focus-within .extended-navigation,
#top:not(.mobile) #main-nav .main-tab:hover .extended-navigation,
#top:not(.mobile) #main-nav .main-tab details[open] .extended-navigation,
#top:not(.mobile) #main-nav .main-tab.active details[open] .extended-navigation,
#top:not(.mobile) #tab-social.active details[open] .extended-navigation {
    transform: rotateX(0deg);
    /*transition: opacity var(--transition-time-fast) ease-in-out, transform var(--transition-time-fast) ease-in-out, height var(--transition-time-slow) ease-in-out;*/
    pointer-events: unset;
    transition: transform 220ms ease-out;
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--primary) var(--my-gray);
    scrollbar-width: thin;
}

#main-nav .extended-navigation .sub-link {
    display: none;
}

    #main-nav .extended-navigation .sub-link.active {
        display: flow-root;
        padding-left: 30px;
        /*border-top: solid 1px var(--border-gray);*/
        border: 0px;
        position: relative;
    }

        #main-nav .extended-navigation .sub-link.active:before {
            position: absolute;
            left: 10px;
            top: 0px;
            height: 100%;
            width: 2px;
            background-color: var(--border-gray);
            content: " ";
        }

        #main-nav .extended-navigation .sub-link.active.last-sub:before {
            height: 55%;
        }

        #main-nav .extended-navigation .sub-link.active:after {
            position: absolute;
            left: 10px;
            top: 50%;
            height: 2px;
            width: 15px;
            background-color: var(--border-gray);
            content: " ";
        }

        #main-nav .extended-navigation .sub-link.active a:before {
            position: absolute;
            left: -10px;
            top: 43%;
            height: 8px;
            width: 8px;
            border-radius: 50%;
            background-color: var(--border-gray);
            content: " ";
        }

        #main-nav .extended-navigation .sub-link.active a:hover:before {
            background-color: var(--medium-blue);
        }

#main-nav .extended-navigation.active {
    display: block;
    border-top: solid 1px var(--medium-blue);
}

#main-nav .extended-navigation p {
    position: relative;
    min-height: 44px;
    margin: 0px;
    display: block;
    margin-bottom: unset;
    border-bottom: solid 1px var(--light-gray);
    text-shadow: none;
}

    #main-nav .extended-navigation p:hover {
        background-color: var(--off-white);
    }

    #main-nav .extended-navigation p:last-child {
        border-bottom: none;
    }

#main-nav .extended-navigation a {
    color: var(--titan-blue);
    text-underline-offset: var(--text-underline-offset);
}

#main-nav .extended-link a:hover {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: var(--text-underline-offset);
}

#main-nav .extended-navigation p.headline {
    display: grid;
    align-items: center;
}

#main-nav .extended-navigation button {
    position: absolute;
    text-align: right;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: inherit;
    color: inherit;
    border: 0px;
    z-index: 3;
    cursor: pointer;
}

    #main-nav .extended-navigation button i {
        font-size: var(--font-size-reduced);
    }


#main-nav .extended-navigation p.headline {
    color: var(--extended-navigation-headeline-color);
    text-transform: capitalize;
    font-size: var(--navigation-title-size);
    font-variant: small-caps;
    padding-left: 10px;
    padding-bottom: 0px;
    font-weight: bold;
    border-bottom: none;
}

.extended-navigation ul, .extended-navigation li,
.extended-navigation .mobile-scroll-shell div {
    margin: 0px;
    padding: 0px;
    width: 100%;
}

.extended-navigation a {
    display: inline-flex;
    /*display: block;*/
    align-items: center;
    padding: 5px;
    padding-left: 8px;
    min-height: 44px;
    width: fit-content;
    font-size: var(--font-size-reduced);
    line-height:1.5em;
    font-weight: 600;
    text-underline-offset: 2px;
    text-decoration: underline solid 2px transparent;
    z-index: 5;
    position: relative;
}

    .extended-navigation a:hover {
        text-decoration: underline solid 2px var(--orange);
    }

.extended-navigation .headline span {
    z-index: 5;
    width: fit-content;
}

.extended-navigation span.extended-link-icon-group {
    font-size: var(--font-size-small);
    font-weight: bold;
}

.extended-navigation .mobile-scroll-shell div:not([class*='headline']):hover {
    background-color: var(--extended-navigation-link-hover);
    color: var(--black);
}

.extended-navigation .mobile-scroll-shell div.nest-open {
    display: block;
    grid-column: span 2;
}

    .extended-navigation .mobile-scroll-shell div.nest-open a {
        position: relative;
        padding-left: 20px;
    }

.extended-navigation .mobile-scroll-shell div.nest-closed {
    display: none;
}

.extended-navigation div.collapse-nav {
    display: grid;
    grid-template-columns: minmax(50%, auto) 1fr;
    align-items: center;
}

    .extended-navigation div.collapse-nav button {
        border: none;
        background-color: inherit;
        color: inherit;
        height: 44px;
        z-index: 3;
        position: absolute;
        left: 4px;
        top: 0px;
        width: calc(100% - 8px);
        text-align: right;
    }

        .extended-navigation div.collapse-nav button:hover {
            border: none;
            background-color: inherit;
            color: inherit;
            cursor: pointer;
        }

#main-nav .extended-navigation ul li.active ul li a {
    padding-left: 25px;
}

#main-nav button.show-hide-extended:focus {
    outline: dotted 2px var(--orange);
    color: var(--primary-dark);
    outline-offset: var(--outline-offset-outside)
}

#main-nav button:focus {
    outline: dotted 2px var(--titan-blue);
    outline-offset: var(--outline-offset);
}

#main-nav a:focus {
    outline: dotted 2px var(--orange);
    outline-offset: var(--outline-offset);
}

#main-nav .extended-navigation a:focus {
    outline: dotted 2px var(--dark-gray);
    outline-offset: var(--outline-offset);
}

#main-nav .extended-navigation a.menu-closed,
#main-nav .extended-navigation a.menu-open,
#main-nav-lower-scroll a.menu-closed, #main-nav-lower-scroll a.menu-closed,
#main-nav-lower-scroll a.menu-open, #main-nav-lower-scroll a.menu-open {
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 32px;
    display: grid;
    justify-content: center;
    align-content: center;
    border-left: solid 1px #ccc;
    font-weight: normal;
    font-size: var(--font-size-small);
}

    #main-nav .extended-navigation a.menu-closed::before,
    #main-nav .extended-navigation a.menu-open::before {
        display: none;
    }

/*----------------------------------------------
SOCIAL MEDIA
------------------------------------------------*/


#navMain li a img[alt='Opens in new window'],
#navMain li a img[alt='PDF File'],
#navigation.LowerScroll #navMain li a img[alt='Opens in new window'],
#navigation.LowerScroll #navMain li a img[alt='PDF File'] {
    float: right;
    margin: 2px !important;
    margin-top: 0px !important;
    margin-left: 5px !important;
}

#navMain li a img[alt='Opens in new window'] {
    margin-top: 8px !important;
}


:not(.mobile).has-social .MaxGutter {
    /*  padding-right: 60px;*/
}


/*----------------------------------------------------------
    BREADCRUMBS
*/
.breadcrumbs {
    position: relative;
    height: 0px;
}

    .breadcrumbs .crumbs-gutter {
        position: relative;
        width: clamp(750px, 100%, var(--container-max-width));
        margin: auto;
    }

    .breadcrumbs .container {
        position: absolute;
        top: 10px;
        left: 0px;
        opacity: 0;
        display: grid;
        grid-template-columns: 1fr;
        /* background: var(--titan-blue);
    color: var(--titan-blue-text);*/
        animation: 500ms linear 200ms forwards breadcrumbs;
    }

@keyframes breadcrumbs {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.edit-mode-crumbs li {
    padding: 8px;
    border-radius: var(--border-radius-chamfer);
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    font-size: var(--font-size-small);
}

.breadcrumbs ul {
    position: relative;
    display: flex;
    list-style-type: none;
    margin: 0px;
    padding: 4px;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 6px;
}

    .breadcrumbs ul li {
        flex-basis: auto;
    }

        .breadcrumbs ul li a {
            color: var(--dark-text);
            display: block;
            background: var(--dark);
            text-decoration: none;
            position: relative;
            height: 32px;
            line-height: 32px;
            padding: 0 8px 0 3px;
            text-align: center;
            margin-right: 23px;
            font-size: var(--font-size-small);
            text-transform: capitalize;
        }

.breadcrumbs li a:before, .breadcrumbs li a:after {
    content: "";
    position: absolute;
    top: 0;
    border: 0 solid var(--dark);
    border-width: 16px 10px;
    width: 0;
    height: 0;
}

.breadcrumbs li a:before {
    left: -18px;
    height:100%;
    border-left-color: transparent;
}

.breadcrumbs li a:after {
    left: 100%;
    border-color: transparent;
    border-left-color: var(--dark);
}

.breadcrumbs li a:hover {
    background-color: var(--dark-hover);
    color: var(--dark-hover-text);
}

    .breadcrumbs li a:hover:before {
        border-color: var(--dark-hover);
        border-left-color: transparent;
    }

    .breadcrumbs li a:hover:after {
        border-left-color: var(--dark-hover);
    }

.breadcrumbs li:first-child a {
    padding-left: 15px;
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px 0 0 4px;
}

    .breadcrumbs li:first-child a:before, .breadcrumbs li:last-child a:after,
    .breadcrumbs li:first-child a:hover:before, .breadcrumbs li:last-child a:hover:after {
        border: none;
    }

.breadcrumbs li:last-child a {
    padding-right: 15px;
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0px;
    border-radius: 0 4px 4px 0;
}


.lower-scroll .breadcrumbs {
    display: none;
}

.has-breadcrumbs [id*='box']:not([breakout="has-breakout"]):first-child {
    padding-top: 44px;
}

.left-nav.has-breadcrumbs [id*='box']:not([breakout="has-breakout"]):first-child {
    padding-top: 60px;
}

.mobile .has-breadcrumbs [id*='box']:not([breakout="has-breakout"]):first-child {
    padding-top: unset;
}

.has-breadcrumbs [id*='box'][breakout="has-breakout"] .breakout-shell.stock {
    padding-top: 44px;
}

.mobile .has-breadcrumbs [id*='box'][breakout="has-breakout"] .breakout-shell.stock {
    padding-top: unset;
}

.mobile .breadcrumbs {
    display: none;
}


/*------------------------------------
    MOBILE LEFT NAV STUFF
----------------------------------------*/

#divMobleLeftNav {
    display: none;
}

#lblMainNav {
    display: none;
}



/*--------------------------------------------------------------------------
LEFT NAVIGATION MENU
--------------------------------------------------------------------------*/

#MobileVertNavSlider {
    display: none;
}

#btnMobileLeftMenu, #left-nav,
:not(.mobile) #btn-mobile-left-nav {
    display: none;
}


:not(.mobile) .left-nav #left-compartment {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 240px;
    /* height: calc(100% - 30px); */
    z-index: 14;
}
    :not(.mobile) .left-nav #left-compartment-shell{
    background-color: var(--left-nav-background);
    color: var(--left-nav-text);
    border: solid 1px var(--left-nav-border);
    font-size: var(--navigation-link-size);
    border-radius: var(--border-radius-small);
    backdrop-filter: blur(5px);
    height:inherit;
    padding:6px;
}

:not(.mobile) .left-nav.has-breadcrumbs #left-compartment {
    top: 60px;
}

.tablet .left-nav #left-compartment,
.mobile .left-nav #left-compartment {
    display: block;
    position: absolute;
    top: 2px;
    left: 0px;
    width: 240px;
    /*height: calc(100% - 30px);*/
    z-index: 14;
    background-color: var(--left-nav-background);
    color: var(--left-nav-text);
    border: solid 1px var(--primary-border-alt);
    font-size: var(--font-size);
    border-radius: 0px;
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    border-left: 0px;
    border: 0px;
    backdrop-filter: blur(5px);
}

.tablet .left-nav.has-breadcrumbs #left-compartment {
    top: 60px;
}

.mobile .left-nav.has-breadcrumbs #left-compartment {
    top: 10px;
}

#left-compartment #left-nav-extend {
    text-align: right;
}

#left-compartment.active #left-nav-extend {
    box-shadow: none;
    display: grid;
    justify-content: end;
 /*   padding-right: 3px;*/
}

#left-compartment .span-left-nav-close,
#right-compartment .span-right-nav-close {
    display: none;
}


#btn-left-nav-show-hide {
    background-color: var(--primary);
    color: var(--primary-text);
    border: solid 1px var(--primary-border-alt) !important;
    padding: 6px !important;
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    min-width: 40px;
    cursor: pointer;
    font-size: var(--font-size);
    border-left: 0px;
}

    #btn-left-nav-show-hide:hover, #btn-left-nav-show-hide:focus {
        background-color: var(--primary-hover);
        color: var(--primary-hover-text);
        border: solid 1px var(--primary-border);
    }
#left-compartment.active #btn-left-nav-show-hide{
    border-radius:var(--border-radius-tiny);
}
#left-compartment.active .span-left-nav-close,
#right-compartment.active .span-right-nav-close {
    display: contents;
}

:not(.mobile) .left-nav #left-compartment a,
:not(.mobile) .left-nav #left-compartment p::before,
:not(.mobile) .left-nav #left-compartment button {
    color: var(--white);
    line-height:unset;
}

:not(.mobile) .left-nav #left-nav {
    display: grid;
}

:not(.mobile) .left-nav .MaxGutter {
    /* padding-left: 100px;
     transition:padding-left var(--transition-time-fast) ease;*/
}

.mobile .left-nav .MaxGutter {
    padding-left: 0px;
    transition: all 20ms;
}

/*---- 
    TABLET DEFAULT LEFT NAV COLAPSE
*/

#left-nav-extend {
    display: none;
}

.tablet #left-nav-extend,
.mobile #left-nav-extend {
    display: block;
}

    .tablet #left-nav-extend button {
        margin: 0;
        padding: 0;
        /*border: 0;*/
        cursor: pointer;
    }

        .tablet #left-nav-extend button i {
            font-size: var(--font-size-large);
            font-size: var(--font-size);
            font-weight: 100;
        }

.tablet .left-nav .MaxGutter {
    /* padding-left: 44px;*/
}

.tablet #left-compartment:not(.active) #btn-left-nav-show-hide {
    padding-top: 12px;
    padding-left: 10px;
}

.tablet .left-nav.T3-layout {
    grid-template-columns: 44px 1fr;
}

.tablet #left-nav, .tablet #site-wide-content-left {
    width: 0px;
    transform: rotateY(90deg);
    transition: transform var(--transition-time-fast);
}

#left-compartment.active #left-nav, .tablet #site-wide-content-left {
    width: 100%;
    transform: rotateY(0deg);
    transition: transform var(--transition-time-fast);
    transform-origin: left center;
}

.section-nav p {
    margin: 0;
    padding: 5px;
    padding-left: 10px;
    z-index: 5;
    width: fit-content;
}

.section-nav > div {
    /* border-radius: var(--border-radius-small);*/
    min-height: 40px;
    word-break: break-word;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

    .section-nav > div:first-child {
        border-top-left-radius: var(--border-radius-small);
        border-top-right-radius: var(--border-radius-small);
    }

    .section-nav > div:last-child {
        border-bottom-left-radius: var(--border-radius-small);
        border-bottom-right-radius: var(--border-radius-small);
    }

.section-nav a {
    font-family: var(--font-family);
    display: block;
    position: relative;
    color: var(--my-white);
    font-size: var(--font-size-reduced);
    line-height: 32px;
    box-sizing: border-box;
    font-weight: normal !important;
    text-decoration: none;
    padding: 0px 8px;
    padding-left: 14px;
}

    .section-nav a:hover, .section-nav a:focus {
        text-decoration-color: var(--my-white);
    }

:not(.mobile) .left-nav #left-compartment a:hover {
    color: var(--white);
}

.section-nav .headline,
.extended-navigation div.headline {
    font-family: var(--font-family);
    font-size: var(--font-size-reduced);
    text-transform: uppercase;
    color: var(--black);
    background: inherit;
    background-color: transparent;
    margin: 0px;
    margin-top: 8px;
    padding: 2px 10px;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: solid 1px var(--orange);
    padding-bottom: var(--text-underline-offset);
    position: relative;
}

.section-nav .headline {
    color: var(--white);
    margin-left: 10px;
    padding-left: 0px;
    letter-spacing: 2px;
    width: calc(100% - 20px);
    text-align: left;
}

    .section-nav .headline:before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: var(--orange-dark);
        position: absolute;
        left: 0px;
        bottom: -2px;
    }

.current-link {
    position: relative;
}

    .current-link:before {
        content: "\e1d8";
        font-family: "font awesome 6 pro";
        font-size: 12px;
        width: 18px;
        height: 18px;
        position: absolute;
        left: 0px;
        top: 0px;
        color: var(--orange-hover);
    }

.left-nav-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    align-content: center;
    height: 43px;
    width: 100%;
    text-align: right;
    background-color: inherit;
    color: inherit;
    border: none;
    z-index: 4;
    cursor: pointer;
}

.active .left-nav-btn {
    background-color: var(--slate);
    color: var(--slate-text);
}

    .active .left-nav-btn:after {
        content: "";
        right: 0px;
        left: 0px;
        bottom: 0;
        position: absolute;
        border-bottom: solid 2px var(--border-gray);
    }

.left-nav-btn:focus {
    border-bottom: solid 1px var(--border-gray) !important;
}

.section-nav .parent-node {
    display: grid;
    grid-template-columns: 1fr 35px;
    align-items: center;
    position: relative;
}

    .section-nav .parent-node .child-node {
        display: none;
        grid-column: span 2;
        position: relative;
        border-left: solid 2px var(--light-blue);
        margin-left: 10px;
    }


    .section-nav .parent-node.active .child-node {
        display: block;
        margin-left: 20px;
        padding-left: 8px !important;
    }

        .section-nav .parent-node.active .child-node:before {
            content: " ";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 15px;
            height: 50%;
            border-bottom: solid 2px var(--light-blue);
        }

        .section-nav .parent-node.active .child-node:last-child {
            border-bottom: solid 2px var(--light-blue);
        }

.section-nav [class*='nav-icon-'] {
    position: relative;
    padding-left: 30px;
}

    .section-nav [class*='nav-icon-']:before {
        position: absolute;
        left: 5px;
        top: 18%;
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        padding: 5px;
        border-radius: var(--border-radius-small);
        place-content: center;
        display: grid;
    }

.section-nav .nav-icon-lock:before {
    content: "\f023";
}

.section-nav .nav-icon-landing:before {
    content: "\f015";
}

.section-nav .nav-icon-email:before {
    content: "\f0e0";
}

.section-nav .nav-icon-document:before {
    content: "\f15b";
}

.section-nav .nav-icon-video:before {
    content: "\f03d";
}

.section-nav .nav-icon-user:before {
    content: "\f007";
}

/*--- LEFT NAV TABLET / MOBILE  ---*/

.tablet #left-compartment, .mobile #left-compartment {
    height: 0px;
    transform: rotateX('90');
}

.tablet #btn-mobile-left-nav {
    position: absolute;
    display: block;
    left: 15px;
    top: 60px;
    z-index: 5;
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    border: 0px;
    cursor: pointer;
}

    .tablet #btn-mobile-left-nav:hover, .tablet #btn-mobile-left-nav:focus,
    .mobile #btn-mobile-left-nav:hover, .mobile #btn-mobile-left-nav:focus {
        text-decoration: underline;
        text-decoration-color: var(--orange);
        text-decoration-thickness: 2px;
        text-underline-offset: var(--text-underline-offset);
    }

    .tablet #btn-mobile-left-nav:focus, .mobile #btn-mobile-left-nav:focus {
        outline: dashed;
        outline-color: var(--orange);
        outline-offset: 3px;
        text-decoration: none;
    }


.tablet .left-nav #left-compartment {
    height: 30px;
    width: 40px;
    padding:0px;
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    background-color: var(--left-nav-background);
}
.tablet .left-nav #left-compartment-shell,
.mobile .left-nav #left-compartment-shell {
    padding: 0px;
    border: 0px;
}
    .tablet #left-compartment.active, .mobile #left-compartment.active {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    gap: 10px;
    width: 290px;
    height: calc(100vh - 200px);
    position: fixed;
    top: 170px;
    left: 0px;
    z-index: 5;
    transform: rotateY(0);
    transition: transform var(--transition-time-slow) ease-in-out;
    overflow-y: auto;
    /*padding: 10px;*/
    box-shadow: var(--box-shadow-more);
}

.tablet #left-compartment.active {
    position: absolute;
    top: 3px;
    height: auto;
}

    .tablet #left-compartment.active #left-nav, .mobile #left-compartment.active #left-nav {
        display: block;
    }


.tablet .section-nav .parent-node.active,
.mobile .section-nav .parent-node.active {
    background-color: inherit;
}

/*-----------------------------------------
    MOBILE MODE
---------------------*/

.mobile header:not(.lower-scroll) {
    min-height: 44px;
    width: 100%;
    position: relative;
    top: 0px;
    transition: padding var(--transition-time-fast) ease-in-out;
    z-index: 100;
    display: block;
}

.tablet-small.left-nav header,
.tablet-small.right-nav header,
.mobile.left-nav header,
.mobile.right-nav header {
    z-index: 0;
}

.mobile .header-top {
    padding: 0px 15px;
    flex-basis: 48%;
    display: none;
}

.mobile .lower-scroll .header-data .container {
    justify-content: start;
}

.mobile #website-info {
  /*  padding: 8px;
    padding-left: 20px;
    border-bottom: solid 1px var(--dark-gray);*/
}

.mobile .lower-scroll #website-info {
    border-bottom: 0px;
    padding:0px 8px;
    display:grid;
}

.mobile header #website-unit {
    display: none;
}

.mobile header .header-name-social-search-grid {
    display: grid;
    grid-template-columns: 50px auto;
}

.mobile header .CSUF-header-logo a {
    position: relative;
    display: block;
}

.mobile header #csuf_emblem {
    height: 50px;
}

.mobile #sitename a span {
    font-size: var(--sitename-font-size-mobile);
}

.mobile header #search-quicklinks,
.mobile header .span-campus,
.mobile header #lnksearch span {
    display: none;
}


.mobile header #mobile-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    min-height: 44px;
    align-items: center;
    text-align: center;
    padding: 3px 5px;
    position: sticky;
    z-index: 10;
}

.mobile header .header-hours-title a {
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: var(--medium-blue);
    border-bottom: dotted 2px var(--primary);
    text-underline-offset: 3px;
}

    .mobile header .header-hours-title a:hover, .mobile header .header-hours-title a:focus {
        border-bottom: dotted 2px var(--orange);
    }

.mobile header.lower-scroll .header-data {
    padding: 2px 0px;
}

.mobile header.lower-scroll .header-name-social-search-grid {
    margin-bottom: 0;
}

.mobile header #mobile-options #btn-mobile-menu {
    width: 70px;
    text-align: center;
}

.mobile header #mobile-options a, .mobile header #mobile-options button {
    border: 0px;
    background-color: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--font-size-small);
}

.mobile header #navigation {
    pointer-events: none;
    transform: translateX(-1000px);
    z-index: 15;
    position: absolute;
    top: 0vh;
    /*left: 0vw;*/
    width: 100vw;
    height: calc(100vh - 60px);
    border-top: solid 4px var(--medium-blue);
    border-bottom: solid 4px var(--medium-blue);
    transform-origin: left center;
    background: var(--primary);
    color: var(--primary-text);
}

    .mobile header #navigation.close {
        transition: transform var(--transition-time) ease-in-out;
        transform: translateX(-1000px);
    }

    .mobile header #navigation.open {
        transform: translateX(0px);
        pointer-events: unset;
        transition: transform var(--transition-time-slow) ease-in-out;
    }

.mobile header.lower-scroll #navigation.open {
    top: 0vh;
    height: calc(100vh - 60px);
}
.mobile header.lower-scroll.lower-scroll-hidden #navigation.open {
    transform: translateY(117px);
}

.mobile header #navigation.open .container {
    display: grid;
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 10px;
    gap: 0px;
    row-gap: 10px;
    max-height: calc(100% - 60px);
}

.mobile header #navigation-links,
.mobile .lower-scroll #navigation-links {
    grid-column: span 2;
    width: 100%;
}

.mobile header #navigation #tab-social {
    position: relative;
    z-index: 10;
    padding: 0px;
    background-color: inherit;
    color: inherit;
    border: solid 1px var(--medium-blue);
    margin: 0px 15px;
}

header #navigation #tab-social.hide-me {
    display: none;
}

.mobile #navigation details,
.mobile #main-nav li.with-button details {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    min-height: 44px;
    height: unset;
    z-index: 4;
}

    .mobile #main-nav li.with-button details summary {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: space-between;
        text-align: right;
        gap: 10px;
        padding-right: 25px;
        min-height: 50px;
    }

.mobile #main-nav li.with-button.details-only details summary {
    grid-template-columns: 1fr 44px;
    text-align: left;
    padding-right: 0px;
}

    .mobile #main-nav li.with-button.details-only details summary .summary-text {
        background-color: inherit;
        color: inherit;
    }

.mobile #main-nav li.with-button details[open] summary,
.mobile #tab-social details[open] summary {
    /*background-color: var(--my-white);
    color: var(--my-white-text);*/
    border-bottom: solid 2px var(--medium-blue);
}


.mobile #tab-social details summary {
    grid-template-columns: 25px 1fr 44px;
    background-color: inherit;
    color: inherit;
    min-height: 50px;
    align-content: center;
    padding-left: 15px;
    padding-right: 0px;
}

.mobile #tab-social details .social-container {
    position: relative;
    border-top: 0px;
    top: unset;
    box-shadow: none;
    border: 0px;
}

    .mobile #tab-social details .social-container ul {
        width: 100%;
    }


.mobile .summary-text {
    padding-left: 15px;
}

.mobile #main-nav details[open] {
    height: auto;
}

    .mobile #main-nav details[open] .extended-navigation {
        transform: rotateX(0deg);
        transition: transform var(--transition-time) ease-in-out;
        height: unset;
        position: relative;
    }

.mobile header #navigation.open #sec-display-mode {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    justify-content: end;
}

.mobile header #navigation.open .mobile-nav-website-name-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    padding: 5px;
}

.mobile header #navigation.open #website-lower-scroll-name,
.mobile header #navigation.open #divMobileSocialHours {
    display: block;
    padding: 5px;
}

    .mobile header #navigation.open #website-lower-scroll-name a {
        color: var(--secondary);
    }


.mobile #btn-mobile-close-nav {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    justify-content: end;
    align-items:center;
    text-align: center;
    background-color: inherit;
    color: inherit;
    border: 0;
    min-height: 44px;
    width: 100%;
    cursor: pointer;
    font-size: var(--font-size-navigation);
    margin-bottom:10px;
}

.mobile #main-nav {
    max-width: 100%;
    background-color: inherit;
    color: inherit;
    overflow: auto;
    /*  max-height:85vh;*/
}

    .mobile #main-nav ul {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin: auto;
        padding: 0px 15px;
        gap: 10px;
        /* max-height: 85vh;*/
    }

        .mobile #main-nav ul li,
        .mobile #main-nav ul li.with-button {
            border: solid 1px var(--my-white-border-alt);
            display: grid;
            grid-template-columns: unset;
            position: relative;
            height: unset;
            min-height: 50px;
            margin: 0px;
            padding: 0px;
            place-items: unset;
        }

    .mobile #main-nav li a.tab-link,
    .mobile #main-nav li button.tab-link,
    .mobile #main-nav li.main-tab.pinned a.tab-link {
        min-height: 48px;
        z-index: 8;
        text-underline-offset: 5px;
        text-decoration: underline;
        text-decoration-color: var(--orange);
        color: var(--my-white);
        padding: 10px 15px;
        font-size: var(--font-size);
        font-weight: unset;
        display: grid;
        align-content: center;
        border: solid 2px transparent;
        width: fit-content;
        position: absolute;
        top: 0px;
        left: 0px;
        background: inherit;
    }

    .mobile #main-nav li.main-tab.pinned a.tab-link,
    .mobile #main-nav li.main-tab details[open] a {
        color: var(--my-white);
        background-color: transparent;
    }

    .mobile #main-nav li.main-tab:hover a.tab-link,
    .mobile #main-nav li.main-tab:hover details[open] a,
    .mobile #main-nav li.main-tab:focus-within details[open] a {
        color: var(--secondary);
        background-color: transparent;
    }

    .mobile #main-nav li a.tab-link {
        display: block;
    }

    .mobile #main-nav button.show-hide-extended {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 44px;
        padding: 5px;
        padding-right: 18px;
        text-align: right;
        height: 44px;
    }

    .mobile #main-nav .main-tab .extended-navigation {
        transform: rotateX(90deg);
        height: 0px;
        transform-origin: top center;
        width: 100%;
        position: relative;
        top: unset;
    }

    .mobile #main-nav .extended-navigation.active {
        transform: rotateX(0deg);
        height: auto;
        transition: transform var(--transition-time) ease-out;
        padding-left: 25px;
        position: relative;
        display: block;
        pointer-events: unset;
        top: 0px !important;
    }

.mobile #lnk-toc {
    text-align: center;
    border: solid 1px var(--cloud);
    width: 100%;
    min-height: 44px;
}

.mobile header.lower-scroll #website-lower-scroll-name,
.mobile header.lower-scroll #website-lower-scroll-search {
    display: none;
}

.mobile.narrow header #mobile-options {
    padding: 3px;
}

.mobile.narrow header #btn-mobile-search span {
    display: none;
}

.mobile.narrow header .container {
    padding-left: 8px;
    padding-right: 8px;
}

.mobile.narrow header #website-quicklinks p.menu-close,
.mobile.narrow header #search-container p.menu-close {
    position: relative;
}

.mobile .left-nav.T3-layout {
    grid-template-columns: 1fr;
}

.mobile #main-content.left-nav .container .overlay-content:first-child {
    /*  padding-top: 45px;*/
}

.mobile #main-content.left-nav #PageTopMedia .overlay-content {
    padding-top: 60px;
}


/*-- MOBILE NAVIGATION */

.tablet #left-compartment:not(.active) #btn-left-nav-show-hide,
.mobile #left-compartment:not(.active) #btn-left-nav-show-hide {
    padding: 6px;
    text-align: center;
}

.mobile #btn-left-nav-show-hide {
    /*  font-size: 1.4em;
    width: auto;*/
}

    .mobile #btn-left-nav-show-hide:hover {
        background-color: var(--primary-hover);
        color: var(--primary-hover-text);
        /*border-radius: var(--border-radius-small);*/
    }

.mobile .left-nav #left-compartment.active #btn-left-nav-show-hide {
    padding: 6px;
}

.mobile #left-nav-extend button:not(#btn-left-nav-show-hide) {
    background-color: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.mobile .left-nav #left-compartment {
    height: 30px;
    width: 40px;
    border-top-right-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    background-color: var(--left-nav-background);
}

.tablet-small .left-nav #left-compartment.active, .tablet-small .right-side #right-compartment.active,
.mobile .left-nav #left-compartment.active, .mobile .right-side #right-compartment.active {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 118;
    background-color: var(--left-nav-background);
    color: var(--left-nav-text);
    border: solid 1px var(--left-nav-border);
    font-size: var(--navigation-link-size);
    border-radius: 0px;
    backdrop-filter: blur(5px);
}

.mobile .left-nav #left-compartment {
    display: block;
}

.mobile .left-nav #left-nav {
    width: 0px;
    height: 0px;
    transform: rotateY(90deg);
    transition: transform var(--transition-time-fast) ease-in-out;
}

.mobile #mobile-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 60px;
    width: 100%;
    background-color: var(--default-text);
    color: var(--default);
    align-items: center;
    border-top: solid 4px var(--orange);
    z-index: 500;
}

    .mobile #mobile-options.no-nav {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .mobile #mobile-options article {
        background-color: var(--default);
        color: var(--default-text);
        height: 100%;
        display: grid;
        min-width: 55px;
    }

        .mobile #mobile-options article.campus-quicklinks {
            min-width: 85px;
        }

    .mobile #mobile-options button, .mobile #mobile-options a {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px;
        font-size: var(--font-size-small);
        text-align: center;
        border: 0px;
        height: 100%;
        place-content: center;
        background-color: var(--default);
        color: var(--default-text);
        border-radius: 0;
        font-family: var(--font-family);
        font-size: var(--font-size-reduced);
    }

        .mobile #mobile-options button i {
            display: block;
        }

    .mobile #mobile-options #lnk-mobile-quicklinks {
        grid-template-columns: 1fr;
        gap: 0px;
    }

    .mobile #mobile-options button:hover, .mobile #mobile-options article:hover, .mobile #lnksearch:hover {
        background-color: var(--dark-gray);
        color: var(--dark-gray-text);
        border: 0px;
        border-radius: 0;
        cursor: pointer;
    }

    .mobile #mobile-options article.table-of-contents {
        display: none;
    }
/*-- FOOTER LIGHT / DARK MODE --*/
#art-mobile-display-mode {
    place-content: center;
}

#mobile-options #art-mobile-display-mode button {
    border-radius: var(--border-radius-curved);
    width: 50px;
    height: 30px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    cursor: pointer;
    background-color: inherit;
    color: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: var(--gray);
    background-color: var(--cloud);
    color: var(--cloud-text);
    position: relative;
}

#art-mobile-display-mode button:hover, #art-mobile-display-mode button:focus {
    border: solid 1px var(--white);
}

#art-mobile-display-mode.dark-toggle button i {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 25px;
    width: 25px;
    display: grid;
    align-items: center;
    border: solid 1px var(--gray);
    background-color: var(--white);
    color: var(--white-text);
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    border-radius: var(--border-radius);
    transition: all var(--tranision-time) ease-in-out;
    font-size: var(--font-size-small);
}

#art-mobile-display-mode.dark-toggle button[mode='light'] i {
    background-color: var(--white);
    color: var(--white-text);
    transform: translateX(1px);
    transition: all var(--transition-time) ease-in-out;
}

    #art-mobile-display-mode.dark-toggle button[mode='light'] i:before {
        content: "\f185";
    }

#art-mobile-display-mode.dark-toggle button[mode='dark'] i {
    background-color: var(--dark-mode-button);
    color: var(--dark-mode-button-text);
    transform: translateX(20px);
    transition: all var(--transition-time) ease-in-out;
}

    #art-mobile-display-mode.dark-toggle button[mode='dark'] i:before {
        content: "\f186";
    }

#art-mobile-display-mode.dark-toggle button[mode='dark'] {
    border-color: var(--dark-mode-button-border);
    background-color: var(--dark-mode-button);
    color: var(--dark-mode-button-text);
}

#art-mobile-display-mode button:hover {
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
}

#art-mobile-display-mode button:focus {
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    outline: solid 2px var(--medium-blue);
    outline-offset: .25rem;
}

#art-mobile-display-mode button[mode='dark']:hover {
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
}

#art-mobile-display-mode button[mode='dark']:focus {
    outline: solid 2px var(--orange);
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
}

#art-mobile-display-mode button:hover i, #art-mobile-display-mode button:focus i {
    border: 1px solid var(--gray);
    /*padding: 6px;*/
}
/*--------------------------------------------------------------
        PAGE HEADER VARIATIONS WITH TRANSPARENT BACKGROUND
    */
header.page-landing:not(.lower-scroll), header.page-presentation:not(.lower-scroll) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--background-overlay);
    color: var(--header-transparent-text);
    text-shadow: var(--header-transparent-shadow);
}

    header.page-landing:not(.lower-scroll)::before, header.page-presentation:not(.lower-scroll)::before {
        content: " ";
        background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 10%, rgba(0,0,0,0.30) 22%, rgba(0,0,0,0.45) 32%, rgba(0,0,0,0.70) 100%);
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        height: 145%;
        width: 100%;
        border-bottom: none;
    }

    header.page-presentation:not(.lower-scroll)::before {
        background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 42%, rgba(0,0,0,0.50) 100%);
        height: 150%;
    }

header.page-landing, header.page-presentation, header.page-landing span, header.page-presentation span {
    font-weight: 500;
}

    header.page-landing .header-hours-title a {
        color: var(--my-white);
    }

        header.page-landing .header-hours-title a:hover {
            color: var(--orange);
        }

    header.page-landing .campus-portal-link a:hover, header.page-landing .campus-quicklinks button:hover {
        text-decoration-color: var(--orange);
    }

    header.page-presentation #unit, header.lower-scroll.page-presentation #sitename {
        display: none;
    }

body.page-landing [id*='box']:first-child {
    padding-top: 280px;
}


body.page-landing.no-division [id*='box']:first-child {
    padding-top: 150px;
}

body.page-landing .has-breadcrumbs [id*='box']:first-child {
    padding-top: 220px;
}

body.mobile.page-landing .has-breadcrumbs [id*='box']:first-child {
    padding-top: 150px;
}

.light-mode header.page-landing .CSUF-header-logo .light-mode, .light-mode header.page-presentation .CSUF-header-logo .light-mode {
    display: none;
}

.light-mode header.page-landing .CSUF-header-logo .dark-mode, .light-mode header.page-presentation .CSUF-header-logo .dark-mode {
    display: block;
}

header.page-landing:not(.lower-scroll) #website-info a, header.page-presentation:not(.lower-scroll) #website-info a {
    color: var(--header-transparent-text);
}

#PageTopMedia.page-landing .container, #PageTopMedia.page-presentation .container {
    min-height: var(--half);
}

header.page-presentation #search-quicklinks-desktop, header.page-presentation #website-unit, header.page-presentation #navigation {
    display: none;
}

header.page-presentation, header.page-presentation.lower-scroll .header-data .container {
    background-color: unset;
    border: 0px;
}

    header.page-presentation .header-top {
        border: 0px;
        height: 44px;
        display: grid;
        align-content: center;
    }

    header.page-presentation #website-info {
        position: fixed;
        top: 0px;
        left: 200px;
        display: grid;
        height: 44px;
        align-content: center;
    }

    header.page-presentation.lower-scroll #website-info {
        left: 20px;
    }

        header.page-presentation.lower-scroll #website-info a {
            color: var(--white);
        }

header.page-landing:not(.lower-scroll) #navigation {
    /* background-color: unset;
    color: var(--header-transparent-text);*/
    border-bottom: solid 1px rgba(255,255,255,.40);
}

header.page-landing:not(.lower-scroll) #tab-social:not(.active) summary {
    background-color: unset;
    transition: none;
}

header.page-landing:not(.lower-scroll) #tab-social.active summary {
    background-color: var(--primary);
    transition: none;
}

:not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab:hover, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab.active, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab.pinned, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab:hover a.tab-link, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab.active a.tab-link, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab.pinned a.tab-link, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab:hover button.show-hide-extended, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab.active button.show-hide-extended, :not(.mobile) header.page-landing:not(.lower-scroll) #main-nav li.main-tab.pinned button.show-hide-extended {
    background-color: var(--default);
    color: var(--primary);
    text-shadow: none;
}

#PageTopMedia.page-landing #div-top-media, #PageTopMedia.page-presentation #div-top-media {
    display: grid;
    place-content: center;
    height: 100%;
    width: 100%;
    background: var(--header-transparent);
    color: var(--header-transparent-text);
    text-shadow: var(--header-transparent-shadow);
}

    #PageTopMedia.page-landing #div-top-media .overlay-content, #PageTopMedia.page-presentation #div-top-media .overlay-content {
        padding-left: unset;
    }

header.lower-scroll.page-landing, header.lower-scroll.page-presentation {
    position: sticky;
}

    header.lower-scroll.page-landing .header-data .container, header.lower-scroll.page-presentation .header-data .container, header.lower-scroll.page-landing #navigation, header.lower-scroll.page-presentation #navigation {
        text-shadow: none;
    }

header.page-landing #social-quicklinks-search.show, header.page-presentation #social-quicklinks-search.show {
    background: var(--header-transparent);
    backdrop-filter: blur(7px);
    text-shadow: none;
    color: var(--header-transparent-text);
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              END OF STANDARD STYLES YOU ARE                                         +
+     USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED                   +
+     PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/