/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    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              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------------------------------------------------------
    BASIC OBJECTS / ELEMENTS
-----------------------------------------------------------------------------------*/

body.dark-mode {
    background-color: var(--default-dark);
    color: var(--default-dark-text);
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.dark-mode header, .dark-mode .lower-scroll .header-data .container {
    background-color: var(--default-dark);
    color: var(--default-dark-text);
}

.dark-mode #footer {
    background-color: var(--titan-blue-dark);
    color: var(--titan-blue-dark-text);
}

/*-----------------------------------
    ATI SKIP NAVIGATION
---------------------------------*/

.dark-mode #skipnav {
    background-color: var(--black);
    color: var(--black-text);
}


/*---------------------------------------------------------------------------------------
    HEADER SECTION
--------------------------------*/
.dark-mode header #website-info a,
.dark-mode header #sitename a span,
.dark-mode #search-quicklinks a, .dark-mode #search-quicklinks button {
    border-color: var(--warm-gray);
    color: var(--coal-text);
}

.dark-mode #lnksearch, .dark-mode #social-container a {
    background-color: var(--onyx);
    color: var(--onyx-text);
}

.dark-mode header #website-info a:hover,
.dark-mode header #sitename a:hover span,
.dark-mode header #unit a:hover span,
.dark-mode #search-quicklinks a:hover,
.dark-mode #search-quicklinks #lnkquicklinks:hover {
    color: var(--cloud);
}


/*---------------------------------------------------------------------------------------------
    NAVIGATION
--------------------------------------------------------------------------------------------*/
/*-- main nav bar -- */
.dark-mode:not(.mobile) #main-nav li:hover, .dark-mode:not(.mobile) #main-nav li:focus-within,
.dark-mode:not(.mobile) #main-nav li.main-tab.active,
.dark-mode:not(.mobile) #main-nav li.main-tab.pinned,
.dark-mode:not(.mobile) #main-nav li:hover a.tab-link,
.dark-mode:not(.mobile) #main-nav li:focus-within a.tab-link,
.dark-mode:not(.mobile) #tab-social:hover, .dark-mode:not(.mobile) #tab-social:focus-within {
    background-color: var(--dark-mode-gray);
    color: var(--dark-mode-medium-blue-headers);
    /*border: solid 1px var(--border-dark-mode);*/
    border-bottom: 0px;
}

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

.dark-mode.desktop #main-nav .extended-navigation a {
    color: var(--dark-mode-medium-blue-headers);
}

.dark-mode #main-nav button.show-hide-extended:focus {
    outline: dotted 2px var(--white);
}

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

/*-- extended navigation area */

#top.dark-mode #main-nav .extended-navigation p:hover {
    color: var(--dark-mode-medium-blue-headers);
    background-color: var(--default-dark);
}

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

#top.dark-mode.desktop #main-nav .main-tab .extended-navigation,
#top.dark-mode.desktop #main-nav .main-tab.pinned .extended-navigation,
#top.dark-mode.desktop #main-nav .main-tab.active .extended-navigation {
    background-color: var(--dark-mode-gray);
    color: var(--dark-mode-gray-text);
    /*border: solid 1px var(--border-dark-mode);*/
    border-top: 0px;
}

    #top.dark-mode.desktop #main-nav .main-tab .extended-navigation a:hover {
        text-decoration-color: var(--titan-blue-dark-text);
    }

#top.dark-mode #main-nav .main-tab .extended-navigation .headline {
    color: var(--dark-gray-text);
}

#top.dark-mode #main-nav .extended-navigation p {
    border-color: var(--slate);
}
/* -- lower scroll navigation  ---*/
.dark-mode.desktop .lower-scroll #navigation,
.dark-mode.desktop .lower-scroll #main-nav,
.dark-mode.desktop .lower-scroll #main-nav a.tab-link,
.dark-mode.desktop .lower-scroll #main-nav button.tab-link,
.dark-mode.desktop .lower-scroll #navigation a,
.dark-mode.desktop .lower-scroll #navigation .lower-scroll-csuflogo,
{
    background-color: var(--titan-blue-dark);
    color: var(--titan-blue-dark-text);
}

.dark-mode:not(.mobile) .social-container {
    background-color: var(--dark-mode-gray);
    color: var(--dark-mode-gray-text);
}

    
    .dark-mode:not(.mobile) .social-container a {
        color: var(--titan-blue-dark-text);
    }

    .dark-mode:not(.mobile) .social-container li.linktree a {
        background-color: unset;
    }

    .dark-mode.desktop .lower-scroll #main-nav .main-tab .extended-navigation a {
        background-color: inherit;
        color: var(--dark-mode-medium-blue-headers);
    }

.dark-mode.desktop .lower-scroll #lower-scroll-lnksearch {
    background-color: var(--cool-gray);
    color: var(--cool-gray-text);
}

.dark-mode.desktop .lower-scroll #main-nav li:hover,
.dark-mode.desktop .lower-scroll #main-nav li:hover a.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li:hover button.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li:hover button.show-hide-extended,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active a.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active button.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active button.show-hide-extended.active {
    color: var(--dark-mode-medium-blue-headers);
    background-color: var(--default-dark);
    /*text-decoration: underline 2px var(--orange);*/
    transition: all 200ms ease-in-out;
}

/*-- SOCIAL MEDIA -- */
.dark-mode #tab-social, .dark-mode #tab-social details, .dark-mode #tab-social summary {
    background-color: inherit;
    color: inherit;
}

    .dark-mode #tab-social .social-container {
        background-color: var(--dark-mode-gray);
        color: var(--dark-mode-gray-text);
        border: solid 1px var(--border-dark-mode);
        border-top: solid 4px var(--dark-mode-medium-blue-headers);
    }

.dark-mode:not(.mobile) .social-container a {
    background-color: inherit;
    color: var(--titan-blue-dark-text);
}


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

.dark-mode.tablet #main-nav .main-tab a.tab-link:hover,
.dark-mode.tablet #main-nav .main-tab button.tab-link:hover,
.dark-mode.tablet #main-nav .main-tab.active .extended-link:hover a,
.dark-mode.tablet #main-nav .main-tab.active .sub-link:hover a,
.dark-mode.mobile #main-nav .main-tab a.tab-link:hover,
.dark-mode.mobile #main-nav .main-tab button.tab-link:hover,
.dark-mode.mobile #main-nav .main-tab.active .extended-link:hover a,
.dark-mode.mobile #main-nav .main-tab.active .sub-link:hover a {
    color: var(--cool-gray-text);
    background-color: var(--cool-gray);
    transition: all 200ms ease-in-out;
}

.dark-mode.mobile #main-nav .extended-navigation p:hover {
    background-color: inherit;
}

.dark-mode.tablet #main-nav.navigation-tablet button.show-hide-extended.active,
.dark-mode.mobile #main-nav.navigation-mobile button.show-hide-extended.active {
    background-color: var(--dark-warm-gray);
    color: var(--dark-warm-gray-text);
    transition: all 200ms ease-in-out;
}

.dark-mode.tablet #main-nav .main-tab:hover .extended-navigation a,
.dark-mode.tablet #main-nav .main-tab.active .extended-navigation a {
    color: var(--warm-gray-text);
    background-color: var(--warm-gray);
    transition: all 200ms ease-in-out;
}

/*--------------------------------------------------------------------
    RESOURCES AND SEARCH PAGES
-----------------------------------------------*/

.dark-mode #lnksearch:hover {
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
}

.dark-mode #lnksearch:focus {
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
    outline: solid 2px var(--orange);
    outline-offset: .25rem;
}

.dark-mode .campus-portal-link a:hover, .dark-mode .quicklinks:hover {
    text-decoration-color: var(--white);
}

.dark-mode .campus-portal-link a:focus, .dark-mode .campus-portal-link a:active, .dark-mode .quicklinks:focus, .dark-mode .quicklinks:active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--orange);
}
/*
.dark-mode #social-quicklinks-search summary{
    background-color:var(--titan-blue-dark);
    color:var(--titan-blue-dark-text);
}

    .dark-mode #social-quicklinks-search summary:hover,
    .dark-mode #social-quicklinks-search summary:focus {
        background-color: var(--dark-mode-medium-blue);
        color: var(--dark-mode-medium-blue-text);
    }
    */
.dark-mode #website-quicklinks,
.dark-mode #website-search,
.dark-mode #website-search fieldset {
    background-color: var(--default-dark);
    color: var(--default-dark-text);
    transition: all 200ms ease-in-out;
}

    /*
.dark-mode .menu-close a {
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
}

    .dark-mode .menu-close a:hover,
    .dark-mode .menu-close a:focus {
        border: solid 1px var(--dark-mode-medium-blue);
        color: var(--titan-blue-dark-text);
        background-color: var(--titan-blue-dark-text);
    }
    */
    .dark-mode #website-search fieldset {
        border-color: var(--titan-blue-dark);
    }

.dark-mode .gsc-control-cse {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

.dark-mode #quicklinks-container ul li a {
    background-color: var(--onyx);
    color: var(--onyx-text);
}

    .dark-mode #quicklinks-container ul li a:hover {
        text-decoration: underline solid 2px var(--white);
        background-color: var(--ash);
        color: var(--ash-text);
    }

.dark-mode #website-search fieldset label:focus-within {
    color: var(--light-blue);
}

/*-----------------------------------------------
    MAIN CONTENT / SITE WIDE CONTENT
*/

.dark-mode main a {
    color: var(--white);
    text-decoration-color: var(--white);
    text-decoration-style: dotted;
}

    .dark-mode main a:hover,
    .dark-mode #block-container a:hover {
        color: var(--light-warm-gray);
        text-decoration-color: var(--light-blue);
        text-decoration-style: solid;
        text-decoration-thickness: 3px;
    }

.dark-mode main .headline,
.dark-mode #block-container .headline {
    color: var(--white);
}

.dark-mode #site-wide-content-header,
.dark-mode.desktop .lower-scroll #site-wide-content-header *,
.dark-mode #site-wide-content-header .site-wide-item .block-item-extended,
.dark-mode.desktop .lower-scroll #site-wide-content-header a {
    /*background-color: var(--dark-dialog);
    color: var(--dark-dialog-text);*/
}

.dark-mode .sitewide-links .site-wide-item:hover {
    background-color: var(--ash);
    color: var(--ash-text);
}


.dark-mode #site-wide-content-header a {
   /* background-color: var(--dark-dialog);
    color: var(--dark-dialog-link-text);*/
}

/*--------------------------
    INPUT ELEMENTS
*/

.dark-mode input, .dark-mode option, .dark-mode textarea {
    background: var(--dialog);
    color: var(--dialog-text);
}

.dark-mode input, .dark-mode textarea {
    border: solid 1px var(--dark-dialog);
}

/*--------------------------------------------------------------------
 FOOTER SECTION
 ---------------------*/
.dark-mode #footer a {
    color: var(--dark-dialog-text);
}

    .dark-mode #footer a:hover, .dark-mode #footer a:focus {
        color: var(--dialog-text);
    }

.dark-mode #footer img {
    filter: invert(.2);
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                               END OF CSS FILE                                       +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT IN THE CSS OVERRIDE FILES    +
+     CHANGES TO THIS FILE WILL BE DELETED UPON NEXT TEMPLATE UPDATE                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/