/****
    Custom styling for the the main navbar
****/

/* Variables */
#main_navbar {
    --hover-bg: var(--massini-shade-gray2);
    --selected-top: var(--massini-sec-red);
    --hover-text: var(--massini-sec-red);
    --hover-underline: var(--massini-main-dark-gray);
    --text-color: var(--massini-main-dark-gray);
    --mobile-bg: whitesmoke;
    --hover-mobile: whitesmoke;
    --mobile-divide: #cccccc;
}


/*#region Bootnavbar.css kmlpandy77/bootnavbar*/
.dropdown-menu {
    margin-top: 0;
}

    .dropdown-menu .dropdown .dropdown-menu {
        left: 100%;
        top: 0%;
        margin: 0 20px;
        border-width: 0;
    }

        .dropdown-menu .dropdown .dropdown-menu.left {
            right: 100%;
            left: auto;
        }


@media (min-width: 768px) {
    .dropdown-menu .dropdown .dropdown-menu {
        margin: 0;
        border-width: 1px;
    }
}

/*#endregion*/

#main_navbar {
    padding:6px;
    box-shadow: 0px 0px 2px #353535;
}

    #main_navbar .navbar-toggler {
        margin-right: 10px;
    }

.vert_line {
    border-right: 2px solid var(--massini-main-dark-gray);
    opacity: .5;
    height: 45px;
    margin: 0px 5px;
}

#main_navbar.navbar-expand-sm .mainNav {
    margin-top: 10px;
}

    /** SETTINGS MENU **/
    .mainNav .nav-flex-icons {
        padding-right: 10px;
    }


#main_navbar .dropdown-item.active, #main_navbar .dropdown-item:active {
    color: var(--text-color);
    background-color: transparent;
}

/*#region TOP MENU */
#main_navbar.navbar-expand-sm .navbar-nav > li > a .drop-icon {
    display: none;
}

#main_navbar.navbar-expand-sm .navbar-nav > li > a.dropdown-toggle:after {
    margin-left:0px;
    margin-right:0px;
}

#main_navbar.navbar-expand-sm .navbar-nav li > a {
    margin-right: 10px;
}

#main_navbar .drop-icon {
    float: right;
    margin-top: 3px;
    color:#888888;
}

#main_navbar .navbar-collapse.collapse .navbar-nav > li > a {
    font-size: 1.2em;
    color: var(--text-color);
}

#main_navbar .navbar-collapse.collapse .navbar-nav a {
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}

#main_navbar [aria-expanded="false"] + .navbar-collapse.collapse .navbar-nav > li > a:hover {
    color: var(--hover-text) !important;
}

#main_navbar [aria-expanded="false"] + .navbar-collapse.collapse .navbar-nav .active > a {
    color: var(--selected-top);
}

/*#region HOVER - TOP MENU*/
#main_navbar.navbar-expand-sm .navbar-nav > li > a:after {
    display: block;
    content: '';
    border-bottom: solid 3px var(--hover-underline);
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    margin-top: 5px;
}

#main_navbar [aria-expanded="false"] + .navbar-collapse.collapse .navbar-nav .active > a:after {
    border-bottom: solid 3px var(--hover-underline);
    transform: scaleX(1) !important
}

#main_navbar.navbar-expand-sm .navbar-nav > li > a:hover:after {
    transform: scaleX(1);
    transition-delay: 100ms;
}

/*Dropdown Transition Time*/
#main_navbar.navbar-expand-sm .dropdown-menu {
    animation-delay: 200ms;
    animation-duration: 300ms;
    display: block !important;
    visibility: hidden;
    transition: 0.2s 0.2s;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
}

    #main_navbar.navbar-expand-sm .dropdown-menu.show {
        display: block !important;
        visibility: visible;
        transition: 0s;
    }

    #main_navbar.navbar-expand-sm .dropdown-menu .dropdown-menu {
        animation-delay: 100ms;
        animation-duration: 100ms;
        display: block !important;
        visibility: hidden;
        transition: 0s;
    }

    #main_navbar.navbar-expand-sm .dropdown-menu.show .dropdown-menu.show {
        display: block !important;
        visibility: visible;
        transition: 0s;
    }

/*#endregion*/
#main_navbar.navbar-expand-sm .navbar-nav .dropdown-menu {
    border-radius: 0px;
    margin-top: -5px;
}


#main_navbar .navbar-collapse.collapse .navbar-nav .nav-item .dropdown-item {
    padding: .5rem 1rem;
}

/*Remove top level dropdown icon*/
.dropdown-toggle::after {
    border: none;
}

/*#endregion*/

/*#region MOBILE MENU */

#main_navbar .navbar-collapse.collapse.show .navbar-nav li > a .drop-icon {
    display: none;
}

#main_navbar .navbar-collapse.collapse.show {
    background-color: var(--mobile-bg);
}

    #main_navbar .navbar-collapse.collapse.show .navbar-nav > li {
        padding-top: 2px;
        padding-bottom: 2px;
        border-bottom: .25px solid var(--mobile-divide);
    }

        #main_navbar .navbar-collapse.collapse.show .navbar-nav > li:not(.show):hover {
            background-color: var(--hover-mobile);
        }

        #main_navbar .navbar-collapse.collapse.show .navbar-nav > li > a {
            text-transform: uppercase;
            color: var(--text-color) !important;
        }

    #main_navbar .navbar-collapse.collapse.show .navbar-nav .active > a {
        color: var(--selected-top) !important;
    }

    #main_navbar .navbar-collapse.collapse.show .nav-link {
        padding: 5px 10px 5px 10px;
    }

    /*Add top level dropdown icon back*/
    #main_navbar .navbar-collapse.collapse.show .dropdown-toggle::after {
        border: solid #888888;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 3px;
        margin-top: 5px;
        float: right;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    #main_navbar .navbar-collapse.collapse.show .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    #main_navbar .navbar-collapse.collapse.show .dropdown-menu {
        border: none;
        border-radius: 0px;
    }

        #main_navbar .navbar-collapse.collapse.show .dropdown-menu .dropdown-menu {
            background-color: var(--hover-mobile);
            margin: 0px;
            padding: 0px 10px;
        }





    #main_navbar .navbar-collapse.collapse.show .navbar-nav .active {
        background-color: var(--hover-mobile);
    }


    #main_navbar .navbar-collapse.collapse.show .nav-flex-icons {
        padding: 0px !important;
    }

#main_navbar .navbar-collapse.collapsing {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none;
}

/*#endregion*/