@keyframes background-fade-in {
    0% {background: rgba(0,0,0,0)}
    100% {background: rgba(0,0,0,0.5)}
}

:root {
    --navbar-header-height: 100px;
    --top-nav-height: 64px;
    --border-grey: #ebebeb
}

.navbar {
    display: none;
    margin-bottom: 0;
    border: none;
}

#header {
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(00, 0, 0, 0.3);
}

.navbar-header {
    background-color: #fff;
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: var(--navbar-header-height);
    padding: 8px 5vw;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.5);

    .navbar-brand {
        box-sizing: border-box;
        padding: 0;
        max-width: 250px;
        width: 57%;
        height: 100%;

        img {
            height: 100%;
        }
    }

    .navbar-toggle {
        order: 2;
        border: none;
    }

    &::before, &::after {
        display: none;
    }
}

a.faculty_link {
    color: #FFFFFF!important;
    background-color: #68335A;
    letter-spacing: 0.01em;
    font-weight: bold;
}

.nav-contents {
    position: relative;

    .mobile_nav_section {
        display: none;
    }

    .mobile_nav_section.active {
        display: block;
    }


    #mobile_menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0;
        background-color: var(--white-purple);
        overflow: hidden;
        z-index: 2;

        &.section-nav-open {
            background-color: #3B4A5A;
        }
    
        &.navbar-collapse {
            /* -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;   */
    
            &::-webkit-scrollbar { 
                display: none;  /* Safari and Chrome */
            }
        }

        #mobile_inner_navigation {
            li {
                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 8px 5vw;
                    text-align: center;
                    vertical-align: middle;
                    color: #3B4A5A;
                    font-family: 'BrotherBold';
                    font-size: 20px;
                    line-height: 1.5;
                    letter-spacing: 0.02em;

                    &:hover {
                        color: #fff;
                        background-color: #3B4A5A;
                    }
        
                    &.join_aicpa_nav {
                        background-color: #EE7623;
                        color: #fff;
                        text-align: center;
        
                        &:hover {
                            background-color: #C7611A;
                        }
                    }
                    
                    span {
                        vertical-align: middle;
                    }
                }
        
                form {
                    display: none;
                }
                
                &:nth-last-child(n + 2) {
                    border-bottom: 1px solid var(--border-grey);
                }

                &.home_toggle {
                    a.faculty_link {
                        font-weight: 500;
                        letter-spacing: 0.04em;
                    }
                } 
            }
        }

        #mobile_inner_top_nav {
            background-color: #f2f2f2;
            height: var(--top-nav-height);
            opacity: 1;
            transition: all 0.15s;
            display: grid;
            gap: 2px;
            background-color: #e5e5e5;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;

            &.top-nav-hide {
                height: 0;
                opacity: 0;
            }

            li {
                position: relative;
                display: inline-block;
                text-align: center;
                background-color: #f2f2f2;
                border: none;    

                a {
                    display: flex;
                    flex-direction: column;
                    gap: 4px 8px;
                    justify-content: center;
                    align-items: center;

                    height: 100%;

                    font-family: 'RobotoCondensedRegular';
                    font-weight: 600;
                    letter-spacing: 0.05em;
                    color: #F47925;
                    text-decoration: none;

                    &.active {
                        background-color: #fff;
                    }

                    img {
                        width: 16px;
                    }

                    &:hover {
                        background-color: #fff;
                        color: #F47925;
                    }

                    i {
                        font-size: 16px;
                    }

                    span {
                        font-size: 16px;
                    }
                }
            }

            @media screen and (max-width: 767px) {
                a,
                a span {
                    font-size: 18px;
                }
            }
        }

        .section-navigation {
            li {
                border-bottom: 2px solid #28323D;
                background-color: #3B4A5A;

                a {
                    color: #fff;
                    line-height: 1;

                    &.close-section {
                        cursor: pointer;
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        transform: translateY(-50%);
                        background: url("/elements/img/close-white.png") center no-repeat;
                        height: 50px;
                        width: 50px;
                        padding: 0;

                        &:hover {
                            opacity: 0.7;
                        }
                    }

                    &:hover {
                        background-color: transparent;
                    }
                }

                &.section-nav-header {
                    position: relative;
                    border-color: #EE7623;
                    font-weight: 600;
                    font-size: 20px;
                    background: -webkit-linear-gradient(bottom, #364352 0%, rgb(110, 124, 140) 100%), #364352;
                    background: -o-linear-gradient(bottom, #364352 0%, rgb(110, 124, 140) 100%), #364352;
                    background: linear-gradient(to top, #364352 0%, rgb(110, 124, 140) 100%), #364352;
                }
            }
        }

        .mobile_nav_section {
            max-height: calc(100vh - var(--navbar-header-height) - var(--top-nav-height));
            overflow-y: scroll;

            &:not(.section-navigation, #mobile_inner_navigation) {
                padding: 20px 5vw;
    
                &#mobile_inner_signin {
                    p {
                        line-height: 1.35;
                        letter-spacing: 0.02em;
                    }
    
                    .option-group {
                        h3 {
                            color: #68335A;
                            margin-bottom: 8px;
                            line-height: 1;
                            letter-spacing: 0.04em;
                        }
                        
                        div:last-child {
                            margin-top: 12px;
    
                            a {
                                padding: 8px 16px;
                                letter-spacing: 0.05em;
                            }
                        }
                    }
                }

                &#mobile_inner_search {
                    #id_search_form_phone {
                        display: flex;
                        justify-content: center;
                        font-size: 20px;

                        input#id_search_text_phone {
                            background-color: #f2f2f2;
                            color: #364352;
                            
                            width: 60%;
                            max-width: 400px;
                            height: 50px;

                            padding: 8px 12px;
                            margin: 0;
                            border: 1px solid var(--border-grey);
                            border-radius: 0;
                        }
    
                        #id_search_submit_phone {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            min-height: 100%;
                            aspect-ratio: 1 / 1;
                            width: 50px;
                            align-self: stretch;

                            background-color: #f47925;
                            color: #fff;
                            text-decoration: none;

                            i {
                                margin-bottom: 4px;
                            }
                        }
                    }
                }

                &#mobile_inner_library,
                &#mobile_inner_signin {
                    margin: 0;

                    li {
                        a {
                            font-weight: 600;
                            letter-spacing: 0.02em;
                            color: #f47925;;
                        }

                        &:nth-last-child(n + 2) {
                            border-bottom: 1px solid var(--border-grey);
                        }
                    }
                }
            }
        }


    }
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
.navbar-toggle .glyphicon-search {
    font-size: 26px;
    color: #67594E;
}
.navbar-toggle .icon-bar {
    transition: transform 0.15s;
}
.navbar-toggle .icon-bar:nth-of-type(2) {
    transform: rotate(-45deg) translateY(100%) translateX(-20%);
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 3px;
    transform: rotate(45deg);
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #3B4A5A;
    width: 34px;
    height: 7px;
}
.navbar-default .navbar-toggle.collapsed {
    padding-bottom: 9px;
}
.navbar-default .navbar-toggle.collapsed .icon-bar {
    transform: none;
}
.navbar-default .navbar-toggle .icon-bar:last-of-type {
    display: none;
}
.navbar-default .navbar-toggle.collapsed .icon-bar:last-of-type {
    display: block;
}
.mobile_search {
    display: none;
}
#mobile_user {
    position: absolute;
    top: 65px;
    right: 0;
    width: 55%;
    float: right;
    height: 20px;
    padding: 0 0 3px 0;
    font-size: 11px;
}
#mobile_user ul li {
    display: inline-block;
    margin: 0 9px 0 2px;
    float: right;
    line-height: 25px;
    vertical-align: baseline;
}
#mobile_user ul li a {
    color: #493F38;
    line-height: 27px;
}
#mobile_user ul li.mobile-my-account a {
    border-right: 1px solid #444;
    padding-right: 10px;
    margin-left: 1px;
}
/* .container-fluid input {
    margin: 0;
    padding: 3px;
    width: 140px;
    border: none;
    background-color: #9a8c81;
    color: #fff;
    font-size: 11px;
} */



.fixed_bottom_join_aicpa {
    background-color: #EE7623;
    color: #fff;
    text-align: center;
    position: fixed;
    height: 60px;
    bottom: 0;
    left: 0;
    right: 0;
}
.fixed_bottom_join_aicpa:hover {
    background-color: #C7611A;
}
.fixed_bottom_join_aicpa a {
    display: inline-block;
    width: 100%;
    font-size: 24px;
    line-height: 60px;
    color: #fff;
    font-family: 'BrotherBold';
    text-decoration: none;
}
#fixed_bottom_join_aicpa:hover {
    background-color: #C7611A;
}
#header_top {
    background-color: #f2f2f2;
    height: 60px;
}
.header_inner {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    position: relative;
}
.header_bottom .header_inner {
    padding: 0;
}
#header_top .header_inner {
    height: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header_inner.mobile .center_box,
#header_top .center_box {
    display: flex;
    margin: 0 auto;
}

.header_inner.mobile .center_box {
    flex-direction: column;
    align-items: center;
    display: none;
    padding: 10px;
}

.header_inner.mobile .center_box .logo_row {
    display: flex;
    justify-content: space-around;
}

.header_inner.mobile .center_box p {
    margin-bottom: 10px;
}

.header_inner.mobile .center_box .logo_row * {
    max-width: 23%;
}

#header_top .center_box > * {
    margin: 0 40px;
}

#header_top .center_box > p {
    font-size: 20px
}

#header_top > .header_inner > * {
    display: flex;
    align-items: center;
}


#header_top .aicpa_logo_grey {
    display: none;
}
#header_top ul {
    float:right;
}
#header_top a.join_aicpa {
    border: 1px solid #EE7623;
    padding: 5px 10px;
    text-decoration: none;
    line-height: normal;
}
#header_top a.join_aicpa:hover {
    color: #fff;
    background-color: #EE7623;
}
#header li {
    display: inline-block;
    cursor: pointer;
}
#header_top li {
    color: #EE7623;
    margin: 0 10px;
    height: 39px;
    line-height: 39px;
    vertical-align: middle;
}
#header_top li>a {
    display: inline-block;
    color: #EE7623;
}

#header_top a.join_aicpa.tablet {
    display: none;
}



.educator_signin li a img,
#header_top li a img {
    transform: translateY(19%);
    margin-right: 2px;
    height: 14px;
}

#header div.educator_signin_header {
    position: absolute;
    display: inline-block;
    right: 5vw;
    bottom: 100%;
    cursor: pointer;
    background-color: #EE7623;
    transition: background-color 0.2s, border-color 0.2s;
    border: 1px solid white;
    border-bottom: none;

    a {
        color: white;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    &:hover {
        background-color: white;
        border-color: #EE7623;

        a {
            color: #EE7623;
        }
    }
}



#header ul.top_level_nav {
    --button-vertical-padding: 8px;
    --button-height: 52px;
    --nav-item-gap: 3vw;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .home_toggle, .user_actions {
        grid-row: 1;
    }

    > *:not(.home_toggle,.user_actions) {
        grid-row: 2;
        display: flex;
        align-items: center;

        min-height: var(--button-height);
        line-height: 1;
        padding: var(--button-vertical-padding) calc(var(--nav-item-gap) / 2);
        white-space: nowrap;
    }

    .home_toggle  {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(calc(-1 * (100% + 78px + 12vw)));

        z-index: 2;
        border: 1px solid white;

        a.faculty_link {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: var(--button-height);
            padding: var(--button-vertical-padding) calc(var(--nav-item-gap) / 2);
            background-color: #EE7623;
            height: 100%;
        }
    }

    span, a {
        font-size: 16px;
    }


    .user_actions {
        grid-column: 1 / -1;
        justify-self: end;

        width: 100vw;
        padding: 0 5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 28px;

        background-color: #f2f2f2;
        border-bottom: 1px solid #b9b9b9;

        z-index: 1;

        li, a {
            color: #EE7623;
            line-height: 1;
            font-weight: 600;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        > li {
            display: flex;
            align-items: center;
            min-height: var(--button-height);
            padding: var(--button-vertical-padding) 0;
        }

        li:has(#id_search_form_base) {
            display: flex;
            justify-content: end;
            width: fit-content;

            #id_search_form_base {
                display: none;

    
                input {
                    width: 100%;
                    height: auto;
                    line-height: 1;
                    padding: 0;
                    margin: 0;
                    border-radius: 3px 0 0 3px;
                    padding: 8px 0 8px 2%;
                    border-right: none;
                    color: black;

                    /* border-bottom: 1px solid #EE7623;
                    font-family: 'RobotoRegular';
                    color: #3B4A5A; */
                }
    
                a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 36px;
                    background-color: #EE7623;
                    border-radius: 0 3px 3px 0;
                    border: 1px solid #afafac;
    
                    img {
                        width: 50%;
                    }
                }
            }
            
            &:has(.slide_over) {
                flex-grow: 1;
                max-width: 500px;

                #id_search_form_base {
                    display: flex;
                    width: 100%;

                }

                & + li {
                    display: none;
                }
            }
        }


        li:has(img) {
            > a, div {
                display: flex;
                align-items: start;
                gap: 6px;

                img {
                    aspect-ratio: 1 / 1;
                    width: 14px;
                }
            }
        }
    }



    .sub_level_nav {
        display: none;
        position: absolute;
        z-index: 2;
        top: 100%;
        left: 0;
        background-color: #425061;
        padding: 15px;
        text-align: left;
        border-bottom: 4px solid #EE7623;
        font-family: 'RobotoCondensedRegular';

        li {
            white-space: nowrap;
            display: block;

            a {
                color: #fff;
                display: inline-block;
                padding: 25px 30px;
            }
        }
    }


    > li {
        position: relative;
        font-family: 'BrotherRegular';
        color: #3B4A5A;
        text-align: center;

        a {
            font-weight: 600;
            color: #3B4A5A;
        }

        &:last-of-type {
            --chevron-width: 14px;
            padding-right: calc(var(--chevron-width) + var(--nav-item-gap) / 2);

            > a {
                font-weight: 400;

                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(-50%, -50%);
    
                    background-color: #3B4A5A;
                    width: 2px;
                    height: calc(0.5* var(--button-height));
                }
    
                &::after {
                    content: '';
                    background-image: url("/elements/img/chevron-down.svg");
                    background-size: cover;
                    position: absolute;
                    right: calc(var(--nav-item-gap) / 2 - 8px);
                    top: 50%;
                    width: var(--chevron-width);
                    aspect-ratio: 5 / 4;
                    transform: translate(0%, -60%);
                }
            }

            > .sub_level_nav {
                left: auto;
                right: 0;
            }


        }


        &:hover {
            background: linear-gradient(#8697ac, #425061);
            color: #fff;

            a {
                color: #fff;
                text-decoration: none;


                &::after {
                    background-image: url("/elements/img/chevron-down-white.svg");
                }
            }

            .sub_level_nav {
                display: block;
            }
        }

    }
}

@media screen and (max-width: 1440px) {
    #header ul.top_level_nav>li {
        font-size: 20px;
    }
    #header ul.top_level_nav>li:last-of-type:before {
        transform: translateY(26%);
    }
}

@media screen and (max-width: 1340px) {
    .header_inner {
        padding: 0 3%;
    }
    #header_top .aicpa_logo_grey {
        display: inline-block;
    }

    #header_top a.join_aicpa.tablet {
        display: inline-block;
    }
    #header_top .center_box > * {
        margin: 0 25px;
    }
    .header_inner {
        position: relative;
    }
}
@media screen and (max-width: 1100px) {
    .header_inner {
        padding: 0 0 0 2.6%;
    }
}

@media screen and (max-width: 1024px) {
    #header_top #id_search_form_base input {
        width: 20vw;
    }
    #header ul.top_level_nav>li {
        font-size: 18px;
    }
 
    #header ul.top_level_nav>li:last-of-type:before {
        transform: translateY(20%);
    }
    #header ul.sub_level_nav {
        font-size: 18px;
    }

}

@media screen and (max-width: 1340px) {

    #header_top a.join_aicpa.tablet {
        display: inline-block;
    }
    #header_top .center_box > * {
        margin: 0 25px;
    }

    .header_inner {
        position: relative;
    }
}



@media only screen and (max-width: 767px) {
    .q-field--float div.q-field__label {
        right: 0;
    }

    #container {
        position: relative;

        & > * {
            width: 100%;
        }

        &::before {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 1;
            content: "";
            background-color: rgba(0,0,0,0);
            transition: background-color 0.5s;
        }

        .navbar {
            display: flex;
            flex-direction: column;
            position: sticky;
            top: -1px;
            left: 0;
            z-index: 2;
    
            .container-fluid {
                margin: 0;
                padding: 0;
    
                & > * {
                    margin: 0;
                }
            }
        }
    }



    .header_inner.mobile .center_box {
        display: flex;
    }

    #header {
        display: none;
    }

    body:has(#mobile_menu[aria-expanded="true"]) {
        overflow: hidden;

        #container {
            &::before {
                background-color: rgba(0,0,0,0.5);
                pointer-events: all;
            }
        }
    }

    /* body:has(.cookie-consent-banner.open) {
        #mobile_inner_navigation {
            max-height: 100vh;
        }
    } */
}



#container .cookie-consent-banner,
.cookie-consent-banner {
    position: relative;
    display: none;
    background-color: #3B4A5A;
    overflow: hidden;
    box-sizing: border-box;
    transition: 0.2s all;

    &.open {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 5vw;
        min-height: fit-content;
    }

    p {
        color: #fff;
        font-family: 'RobotoRegular';
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: 0.03em;
    }

    .accept {
        color: #fff;
        font-size: 42px;
        line-height: 1;
        margin-right: 28px;
    }


    @media screen and (max-width: 767px) {
        &.open {
            padding: 16px 5vw;
        }

        .accept {
            font-size: 32px;
            margin-right: 20px;
        }

        p {
            font-size: 14px;
            line-height: 1.5;
            letter-spacing: 0.02em;
        }
    }
}