/* Bootstrap navbar:

    .navbar-dark sets nav-link 50% transparent white, nav-link.active white

    Add .underline-selected to the DevExpress BootStrapMenu CssClasses, if you want the selected menu item underlined.
    Add .underline-hover to the DevExpress BootStrapMenu CssClasses, if you want a menu item underlined when you hover over it.

*/

/* although .collapsing exists in Bootstrap 4.6.0, easing doesn't seem to be applied beyond 4.0, but adding it here fixes that */
.collapsing { transition: height 0.65s ease;}

.navbar-toggler {
    padding: 0;
}
.navbar-nav li {
    text-align: left;
}
@media only screen and (min-width: 768px) {
    .navbar-toggler {
        padding: 20px 0 0;
    }
    .navbar-nav li {
        text-align: right;
        padding-right: 10px;
    }
}
@media only screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.4rem;
        padding-left: 1.4rem;
    }
}
.navbar-dark .navbar-toggler {
    color: transparent;
    border-color: transparent;
}
.navbar-dark .navbar-toggler-icon {
    background-image: url('../../Images/deloitte/menu/menu_icon_w_title.svg');
    width: 37px;
}

/* prevent anchor targets from being overlapped by sticky header.  
   For various solutions, see https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors?page=1&tab=votes#tab-top
    or better http://nicolasgallagher.com/jump-links-and-viewport-positioning/ */
.target-link:target::before {
    content: "";
    display: block;
    height: 200px; /* fixed header height*/
    margin: -200px 0 0; /* negative fixed header height */
}


/* P2H styles applied on GGC */

.navbar {
    transition: background-color .3s ease-in-out, color .3s ease-in-out, padding .3s ease-in-out;
}

.navbar-dark .navbar-toggler {
    z-index: 2;
}

.navbar-nav .nav-item {
    transition: font-weight .3s ease-in-out;
    display: inline-block;
    font-size: 0;
}

/*    .navbar-nav .nav-item.active a {
        font-weight: 700;
    }
*/
    .navbar-nav .nav-item .nav-link {
        -webkit-transition: font-weight .3s ease-in-out;
        -moz-transition: font-weight .3s ease-in-out;
        transition: font-weight .3s ease-in-out;
        display: inline-block;
        font-size: 1rem;
        font-size: 20px;
        font-weight: 300;
        text-align: center;
        white-space: nowrap;
        color: #fff; /* colour overridden in registration-project-specific-colors.css */
        position: relative;
    }
        .navbar-nav .nav-item .nav-link.active,
        .navbar-nav .nav-item .nav-link:hover {
            /*font-weight: 700;*/
            color: #fff; /* colour overridden in registration-project-specific-colors.css */
        }
        .navbar-nav .nav-item .nav-link.active,
        .navbar-nav .nav-item .nav-link:hover {
            text-decoration: none !important;
            border-bottom: 2px solid #26890D; /* colour overridden in registration-project-specific-colors.css */
            padding-bottom: 5px;
        }

/* uncomment when you want underline of items on hover */
.navbar-nav .nav-item .nav-link:hover:before {
    width: calc(100% + 30px);
    left: -15px;
    right: -15px;
}

/*.navbar-nav .nav-item .nav-link:before {
    transition: font-weight .3s ease-in-out;
    content: attr(title);
    display: block;
    font-weight: 700;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}*/

/* use when you want underline of items on hover */
        .navbar-nav .nav-item .nav-link:before {
            position: absolute;
            bottom: -14px;
            z-index: 1;
            content: "";
            height: 7px;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            transition: all .5s ease;
            background: #fff;
        }

/*@media (max-width: 991.98px) {
}*/
.navbar .collapsing,
.navbar .show {
    transition: background-color .3s ease-in-out;
    /*margin: calc(-56px - 1rem) -16px 0 -16px;*/
    padding: 0 15px;
    background-color: #066C3A; /* colour overridden in registration-project-specific-colors.css */
}
    .navbar .collapsing .navbar-nav,
    .navbar .show .navbar-nav {
        transition: display .3s ease-in-out;
        /*margin-top: calc(56px + 1rem);*/
    }


/* styles applied on Deloitte? NO SIGN OF underline-selected, underline-hover etc being applied */

.navbar-dark .underline-selected .navbar-nav a.nav-link,
.navbar-dark .underline-hover .navbar-nav a.nav-link, 
.navbar-dark .underline-selected .navbar-nav a.nav-link.active, 
.navbar-dark .underline-hover .navbar-nav a.nav-link.active {
    color: #fff; /* remove the 50% transparency when applying .underline-selected or .underline-hover*/
    position: relative;
    text-decoration: none;
}

.underline-hover .navbar-nav a.nav-link::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 3px;
        top: 100%;
        left: 0;
        -webkit-transition: transform .5s ease;
        transition: transform .5s ease;
        transform: scaleX(0);
        transform-origin: center;
    }
    .underline-hover .navbar-nav a.nav-link:hover::after {
        transform: scaleX(1);
    }

.underline-selected .navbar-nav a.nav-link.active::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    top: 100%;
    left: 0;
    transition: none;
    transform: scaleX(1);
}

.navbar-dark .underline-hover .navbar-nav a.nav-link::after, 
.navbar-dark .underline-selected .navbar-nav a.nav-link.active::after {
    background: #fff;
}


@media (min-width: 1024px) {
}

@media (max-width: 1023px) {

    /* on a collapsed menu, left-align menu items */
    .navbar-expand-lg .nav-justified .nav-item, .nav-justified > .nav-link {
        text-align: left;
    }

    /* on a collapsed menu, make the underline transform start on the left */
    .navbar-expand-lg .underline-hover .navbar-nav a.nav-link::after {
        transform-origin: left;
    }

}

@media (max-width: 767px) {

    /* on a collapsed menu, make the underline transform start on the left */
    .navbar-expand-md .navbar-expand-md .underline-hover .navbar-nav a.nav-link::after {
        transform-origin: left;
    }

}