/*********** Table of Contents ***********
    Note: ID = subnav  
    1.0: Utilities
    2.0: Expanded View
    3.0: News View
    4.0: Close button
    5.0: Screen Sizes

    TODO: REMOVE - NC-04052023 We don't need #expanded-view, #mobile-subitems, #mobile-expanded-subitems css anymore, let's wait for feedback and remove it completely.
*****************************************/


#sidenav-modal {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

    /*#sidenav-modal #expanded-view .modal-dialog {
        max-width: 100%;
        background: none;
        height: 100%;
        width: 100%;
    }

    #sidenav-modal #expanded-view .modal-container {
        height: 100%;
        background: none;
        width: 100%;
        overflow-y: scroll;
    }*/
.containing-area {
    background: linear-gradient(135deg, white, #ffffffc2);
    box-shadow: black 0px 0px 10px;
}

/*#sidenav-modal #expanded-view p {
    margin: 0;*/
    /*padding: 2px 0;*/
    /*font-size: var(--font-size-medium-body);
}*/

.hot-items {
    font-size: var(--font-size-title);
    color: var(--background-primary-accent-color);
    transition: 0.3s;
}

    .hot-items span {
        transition: 0.3s;
    }

/*#mobile-expanded-subitems .toggle-menu-item {
    display: none;
}*/

/*#mobile-expanded-subitems li {
    display: block;
    padding-bottom: 5px;
}*/

/*#sidenav-modal #expanded-view .hidden {
    color: #00000033;
}*/

#sidenav-modal .col-container.hidden {
    opacity: 0.2;
    background: none;
    border: none;
}
/* GENERAL BUTTON STYLING */
#sidenav-modal a,
#sidenav-modal a::after {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#sidenav-modal a {
    background: none;
    display: block;
    position: relative;
    /*text-transform: uppercase;*/
    padding-bottom: 0;
    transition: ease 0.5s;
}

    #sidenav-modal a, #sidenav-modal a::after {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

        #sidenav-modal a::before,
        #sidenav-modal a::after {
            background: #00000082;
            content: '';
            position: absolute;
            z-index: -1;
        }
#sidenav-modal #Contacts-expanded-view-reciever a::before,
#sidenav-modal #Contacts-expanded-view-reciever a::after {
    background: #000000b3;
}

#sidenav-modal .btn-1::after {
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
}

#sidenav-modal .modal-content {
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none !important;
    transition: 0.5s ease;
}

@media (min-width: 767px) {
    #sidenav-modal .btn-1:hover:after {
        width: 100%;
    }
}

    /*#sidenav-modal.fade #expanded-view {*/
    /*background: var(--background-primary-accent-color);*/
    /*}*/

    /************** 2.0: Expanded View ******************/
    /*#sidenav-modal #expanded-view a {
    padding: 0;
}

#sidenav-modal #expanded-view a {
    background: none;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    transition: 0.3s;
    font-weight: 600;
    display: flex;
    padding: 0;
}
    #sidenav-modal #expanded-view a:hover,
    #sidenav-modal:hover #mobile-subitems a:hover {
        color: tan !important;
    }*/
    /************** 3.0: Search container ******************/
    /*#expanded-view .search-container {
    display: flex;
    width: 100%;
    height: 40px;
    border: none;
    color: white;
    outline: none;
    box-shadow: inset 0px 3px 7px -2px #000000;
    width: 100%;
}
#expanded-view .search-container input{
    background: #444444;
    border: none;
    color: white;
    outline: none;
    box-shadow: inset 0px 3px 7px -2px #000000;
    width: 100%;
}

#sidenav-modal #expanded-view .search {
    background: #444444;
    border: none;
    color: white;
    outline: none;
    width: 100%;
}

#sidenav-modal #expanded-view .sidenav-header {
    font-size: var(--font-size-title);
}

#sidenav-modal #expanded-view .search-icon {
    color: white !important;
    background: var(--background-primary-accent-color);
}*/

    /************** 4.0: Main container ******************/
    /*#sidenav-modal #expanded-view .expanded-main-content {*/
    /*border-left: 1px solid #ffffff29;*/
    /*padding-left: 5%;*/
    /* background-image: linear-gradient(91deg, #ffffff12, transparent); */
    /*}
#sidenav-modal #expanded-view .expanded-main-content .menu-committee-items {
    height: 52vh;
}
#sidenav-modal #expanded-view .expanded-main-content .menu-committee-items>* {
    flex: 0 0 15px;
}*/

    /************** 5.0: Footer ******************/

    /*#sidenav-modal #expanded-view .contact-items {
    display: flex;
    width: 100%;
    height: 30px;
    bottom: 0;
    left: 0;
}

#expanded-view #Contacts-expanded-view-reciever {
    border-top: 1px solid #00000029;
}

#sidenav-modal #expanded-view .contact-items a {
    border-right: 1px solid #ffffff29;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: auto;
}

#expanded-view .col {
    width: auto !important;
    padding: 1px 1px 0px 1px;
}

#expanded-view .debreifs-button {
    background: var(--background-primary-accent-color);
    width: 200px !important;
    transition: ease 0.5s !important;
}
#expanded-view .debreifs-button p{
    color: white;
    font-weight:700;
}

#expanded-view .widget-icons.debreifs-button p, #expanded-view .widget-icons.debreifs-button a {
    display: block;
}

#expanded-view div.col-container:hover {*/
    /*width: 200px !important;*/
    /*background: var(--background-primary-accent-color);*/
    /*filter: drop-shadow(0px 2px 5px #00000082);*/
    /*}*/


    nav {
        width: 100%;
        transition: ease 0.5s;
    }

    .subnav {
        width: 100%;
        height: 50px;
        background: var(--background-primary-accent-color);
        z-index: 2;
        transition: 1s ease;
        /*box-shadow: 0px 3px 7px #000000eb;*/
    }

    #sub-nav-ul {
        display: flex;
    }

    #subnav,
    #subnav .nav-link {
        color: white;
    }

    /************sidenav*************/

    .menu-accent {
        color: white;
        font-size: min(max(50px, 7vw),14vw);
        position: absolute;
        opacity: 0.3;
        height: 100%;
        width: 100%;
    }

    #sidenav {
        height: calc(100% - 40px);
        /*margin-top: 20px;*/
        width: 0;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        overflow-x: hidden;
        transition: 0.5s;
        width: 0px;
        position: fixed;
        height: 100%;
    }

        #sidenav .container {
            padding: 20px 0px 20px 0px;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            /*background: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%);*/
        }

        #sidenav .close {
            position: absolute;
            right: 5px;
            margin-top: -20px;
            opacity: 1;
            text-shadow: none;
            color: white;
        }

        /* Style the sidenav links and the dropdown button */

        /*#mobile-subitems a, */
        #sidenav a,
        .dropdown-btn {
            text-decoration: none;
            font-size: var(--font-size-title);
            color: #818181;
            display: block;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            cursor: pointer;
            outline: none;
            padding: 0px 0px 10px 10px;
        }

        #sidenav a {
            text-decoration: none;
            font-size: var(--font-size-title);
            color: gray;
            display: block;
            transition: 0.3s;
            padding: 0px 0px 10px 10px;
        }

        @media only screen and (max-width: 576px) {
            #sidenav a {
                color: white;
            }
        }

        #sidenav p {
            font-size: var(--font-size-body);
            font-weight: 100;
            padding: 10px 30px;
            margin: 0;
        }

            /*#mobile-subitems a {
    font-weight: 100;
    padding: 10px !important;
    margin: 0;
    color: gray !important;
}*/

            /*#mobile-subitems a,*/
            #sidenav p span,
            #sidenav .dropdown-btn p {
                font-size: var(--font-size-body) !important;
            }

        /* #sidenav a .material-icons {
    display: none;
}

#sidenav:hover a .material-icons {
    display: inline;
} */

        #sidenav:hover hr {
            background-color: white;
        }

        #sidenav:hover a,
        #sidenav:hover .dropdown-btn {
            color: white;
        }

    /*#sidenav:hover #mobile-subitems a {
    color: white !important;
}*/


    button:focus {
        outline: none;
    }

    .dropdown-container {
        display: none;
        /* padding-left: 14px; */
    }

        .dropdown-container a {
            padding-bottom: 0 !important;
        }


    /* Optional: Style the caret down icon */

    .dropdown-btn .material-icons:not(.primary-nav-icon) {
        float: right;
        padding-right: 8px;
    }

    /*#sidenav:hover #mobile-subitems a:hover,*/
    #sidenav a:hover {
        color: #fe7a6f !important;
    }

    #sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: var(--font-size-title);
        margin-left: 50px;
    }

    #sidenav-content {
        width: 300px;
        height: 100%;
        top: 0;
        background: rebeccapurple;
        border-right: 1px solid var(--border-color);
    }

    #sidenav .sidenav-header {
        font-size: var(--font-size-title);
    }

    #sidenav-body {
        height: calc(100% - 60px);
        width: 100%;
        margin-top: 60px;
        display: grid;
        box-shadow: inset -6px 7px 20px 0px #00000024;
        background-color: var(--background-primary-accent-color);
    }

    /* BUTTON 3 */

    #sidenav .btn-1::after {
        height: 100%;
        left: 0;
        top: 0;
        width: 0;
    }

    @media (min-width: 767px) {
        #sidenav .btn-1:hover:after {
            width: 100%;
        }
    }

    #sidenav .search {
        background: #444444;
        border: none;
        color: white;
        outline: none;
        width: 100%;
    }


    #sidenav .search-icon {
        color: white !important;
        background: var(--background-primary-accent-color);
    }

    .search-container {
        display: flex;
        width: 100%;
        height: 40px;
    }


    #sidenav.openMegaMenu {
        width: 100%;
        z-index: 101;
    }

    #sidenav.openSideMenu {
        width: 300px;
        background-image: none;
        height: calc(100% - 40px);
        margin-top: 20px;
    }

    #main-content.quarterNav {
        width: calc(100% - 300px);
        margin-left: 300px;
    }

        #main-content.quarterNav.qnavextended {
            width: calc(100% - 75px);
            margin-left: 75px;
        }

    #main-content.fullNav {
        width: 100%;
        margin-left: 300px;
    }

    /************** 3.0: News View ******************/
    #news-view {
        padding: 0 1rem 1rem 1rem;
    }

        #news-view .primary-nav:not(:first-child), #sidenav .home-pages {
            margin-bottom: 1rem;
        }

        #news-view .col-md-4 {
            max-width: 100% !important;
        }

        #news-view .py-1, #news-view a {
            padding: 0;
        }

    /*#news-view #mobile-subitems li {
    padding-top: 10px;
    padding-bottom: 10px;
}*/


    /************** 4.0: Close button ******************/
    #close-expanded-view {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        width: 50px;
        height: 50px;
        z-index: 21;
        color: red;
        cursor: pointer;
        border: none;
        position: relative;
        transition: 0.3s;
    }

    .test {
        margin-left: 315px;
        position: fixed !important;
    }

    #close-expanded-view.active {
        opacity: 1;
    }

    #close-expanded-view > div {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

        #close-expanded-view > div.arrow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            opacity: 1;
        }

        #close-expanded-view > div.text {
            font-size: 5px;
            font-size: 0.5rem;
            line-height: 10px;
            text-transform: uppercase;
            font-weight: 900;
            font-family: "Open Sans", sans-serif;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(50%) translateX(-50%);
            opacity: 0;
            margin-top: 1px;
        }

    #close-expanded-view:hover > div.arrow {
        transform: translateY(-150%) translateX(-50%);
        opacity: 0;
    }

    #close-expanded-view:hover > div.text {
        transform: translateY(-50%) translateX(-50%);
        opacity: 1;
    }

    #close-expanded-view.openMenu, .generictab-bar .openMenu {
        margin-left: 300px !important;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }


    /********************* 5.0: Screen Sizes  ***********************/
    /*@media screen and (max-width: 1445px) {
    #sidenav-modal #expanded-view .expanded-main-content .menu-committee-items {
        height: 60vh;
    }
}

@media screen and (max-width: 1029px) {
    #sidenav-modal #expanded-view .expanded-main-content .menu-committee-items {
        height: 75vh;
    }
}*/

    @media screen and (max-width: 990px) {
        #top-floater {
            background: var(--button-accent-color);
        }

        #sidenav .expanded-view .expanded-main-content {
            border: none;
            padding: 0;
        }

        #sidenav .expanded-view a {
            padding: 4px 0;
        }

        #sidenav .expanded-view .contact-items {
            position: relative;
            height: auto;
        }

            #sidenav .expanded-view .contact-items a, #Contacts-expanded-view-reciever {
                border: none !important;
                padding-left: 0px !important;
                padding-right: 0px !important;
            }

        #sidenav .expanded-view .hidden {
            display: none;
        }

        #close-expanded-view {
            height: 50px;
        }

        /*#sidenav-modal #expanded-view .expanded-main-content {
        border-left: 0;
        padding-left: 0;
    }

    #sidenav-modal #expanded-view .contact-items {
        position: relative;
        height: auto;
    }*/
    }

    /* Some media queries for responsiveness */

    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }

            .sidenav a {
                font-size: var(--font-size-body);
            }

        /*#sidenav-modal #expanded-view .contact-items a {
        border: 0;
        padding: 0 !important;
    }*/
    }

    @media screen and (max-width: 763px) {
        /*#sidenav-modal #expanded-view .contact-items a {
        border: 0;
        padding: 0 !important;
    }*/

        #main-content.quarterNav {
            width: 100%;
        }

        /*#sidenav-modal #expanded-view .expanded-main-content .menu-committee-items {
        height: auto;
    }

    #sidenav-modal #expanded-view p {
        font-size: var(--font-size-body);
    }*/

    }

    /* app navigation stays minified */
    @media (min-width: 992px) {

        #sidenav-modal .btn-1:hover:after {
            width: 100%;
        }
    }

        #sidenav-modal .btn-1::after {
            height: 100%;
            left: 0;
            top: 0;
            width: 0;
        }

        .qnavextended [data-class="nav-function-minify"], .nav-function-fixed [data-class="nav-function-fixed"] {
            background: #505050;
            border-color: #363636 !important;
            -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.37);
            box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.37);
            color: #fff !important;
        }

        .nav-function-minify:not(.nav-function-top) #sidenav {
            overflow-x: visible;
            width: 95px;
            z-index: 1001;
            will-change: width;
            -webkit-transition: all 470ms cubic-bezier(0.34, 1.25, 0.3, 1);
            transition: all 470ms cubic-bezier(0.34, 1.25, 0.3, 1);
        }

            .nav-function-minify:not(.nav-function-top) #sidenav .page-logo .page-logo-text {
                display: none !important; /* Hide Company Name */
            }

            .nav-function-minify:not(.nav-function-top) #sidenav .home-pages span:last-child {
                display: none !important; /* Hide home page name */
            }

            .nav-function-minify:not(.nav-function-top) #sidenav p {
                padding: 0;
            }

            .nav-function-minify:not(.nav-function-top) #sidenav .m-backtotop.news-view-close {
                display: none;
            }

            .nav-function-minify:not(.nav-function-top) #sidenav #news-view {
                padding: 0;
                overflow: hidden;
            }

                .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a {
                    text-align: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    padding-left: 0;
                    padding-right: 0;
                }

                    .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a > .material-icons:not(.primary-nav-icon):last-child {
                        display: none; /* Dropdown Icon  */
                    }
                    /* Add if Icons are bigger 
        .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a > .primary-nav-icon {
            font-size: 1.2375rem;
            margin: 0; } */

                    /* .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav .primary-nav-text {
            display: none; /* Hide's the Text in nav-minified preference */
                    /* } */
                    .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a > .primary-nav-text {
                        display: none;
                        position: absolute;
                        text-align: left;
                        background: transparent;
                        padding-left: 1.375rem;
                        color: #fff;
                        top: 0;
                        left: 6rem;
                        height: 100%;
                        white-space: nowrap;
                        width: 16.75rem;
                        /* width: 13.75rem; */
                        font-weight: 500;
                        margin-top: -1.563rem;
                    }

                    .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a + .primary-nav-items {
                        position: absolute;
                        width: 16.75rem;
                        left: 6rem;
                        background-color: #444444;
                        /* background-color: #584475; */
                        margin-top: 0;
                        border-radius: 0 0 .5rem .5rem;
                        padding-bottom: 1rem;
                    }

                        .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a + .primary-nav-items:before {
                            content: "\f1c8";
                            font-family: 'nextgen-icons';
                            position: absolute;
                            font-size: 3.5rem;
                            left: -0.4125rem;
                            color: #444444;
                            /* color: #584475; */
                            z-index: -1;
                            -webkit-transform: rotate(270deg);
                            transform: rotate(270deg);
                            overflow: hidden;
                            display: block;
                            top: 1rem;
                        }

                .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav .primary-nav-items {
                    display: none !important;
                }
                /* .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav .primary-nav-items > a {
        display: none; /* Hide's all the sub-items in nav-minified preference */
                /*} */
                .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav .primary-nav-icon {
                    display: inline; /* Show's the Icon's in nav-minified preference */
                }

                .nav-function-minify:not(.nav-function-top) #sidenav #news-view .primary-nav > a + .primary-nav-items > a {
                    padding-left: 1.375rem;
                    padding-top: 0.6rem;
                    padding-bottom: 0.6rem;
                }

                .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover {
                    overflow: visible;
                }

                    .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover .primary-nav:hover > a {
                        /* background: #614b82; */
                        color: #fff;
                        overflow: visible;
                        z-index: 10;
                    }

                        .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover .primary-nav:hover > a > .primary-nav-text {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            padding-top: 1rem;
                            padding-bottom: 1rem;
                            border-radius: 4px 0.5rem 0 0;
                            background-color: #444444;
                            height: 50px;
                            display: flex;
                            overflow: hidden;
                            animation: animateFadeInLeft 0.5s;
                            -webkit-animation: animateFadeInLeft 0.5s;
                        }

                            .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover .primary-nav:hover > a > .primary-nav-text:last-child {
                                /* top: 26px; */
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                background: #444444;
                                /* background: #584475; 
                       border-radius: 4px 10px 10px 4px; 
                    */
                                overflow: visible;
                            }

                                .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover .primary-nav:hover > a > .primary-nav-text:last-child:before {
                                    content: "\f1c8";
                                    font-family: 'nextgen-icons';
                                    position: absolute;
                                    font-size: 3.5rem;
                                    left: -7px;
                                    color: #444444;
                                    /* color: #584475; */
                                    z-index: -1;
                                    -webkit-transform: rotate(270deg);
                                    transform: rotate(270deg);
                                    overflow: hidden;
                                    display: block;
                                    top: -9px;
                                }

                    .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover .primary-nav:hover > .primary-nav-items {
                        display: block !important;
                        max-height: 30rem;
                        overflow-y: auto;
                        overflow-x: hidden;
                        z-index: 1;
                        animation: animateFadeInLeft 0.5s;
                        -webkit-animation: animateFadeInLeft 0.5s;
                        -webkit-box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
                        box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.15);
                    }

                        .nav-function-minify:not(.nav-function-top) #sidenav #news-view:hover .primary-nav:hover > .primary-nav-items:after {
                            content: "";
                            display: block;
                            position: absolute;
                            height: calc(100% + 60px);
                            width: calc(100% + 80px);
                            top: -4.125rem;
                            z-index: -1;
                            left: -1rem;
                        }
    }