﻿#navigation {
    font-family: barlowcondensed-300,sans-serif;
    font-style: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    font-size: 20px;
    font-weight: normal;
    color: #2366c1;
    padding: 0px 15px 0px 0px; /*padding-left 15px for a vertical scroll that is drawn on top*/
    background-color: #1E468D;
    background-image: url(/img/diagonal.png) !important;
    background-repeat: repeat !important;
    border-bottom: 2px solid #fd0;
}
    #navigation .nav-brand {
        margin-top: 3px;
    }

        #navigation .nav-brand > a {
            margin-right: 40px;
            padding-left: 12px;
            padding-bottom: 0px;
            text-decoration: none;
        }

    #navigation .nav-container {
        flex-grow: 1;
        align-items: center;
    }

    #navigation breadcrumb-nav-container{
        justify-content: start;
        align-items: center;
        flex-grow: 1;
        float: left;
        display: block;
    }

    #navigation .navbar-nav > li > a {
        color: white;
    }

        #navigation .navbar-nav > li > a#userAccessBtn {
            color: #fd0;
            padding: 5px 15px;
        }

        #navigation .navbar-nav > li > a:hover, #navigation .navbar-nav > li > a:active, #navigation .navbar-nav > li > a:focus {
            color: #fd0;
            background-color: transparent !important;
            cursor: pointer;
        }

    #navigation .open > a, #navigation .open > a:focus, #navigation .open > a:hover {
        color: #fd0 !important;
        background-color: transparent !important;
    }

    #navigation .topnav-container {
        justify-content: end;
        align-items: center;
        flex-grow: 1;
        float:right;
        display:block;
    }

.nav-search-container {
    flex: 0.3;
    margin: 8px 20px;
}
    .nav-search-container .nav-search-btn {
        width: 40px !important;
        height: 34px;
        background-color: #fd0 !important;
    }

ul.navigation-path {
    margin: 0;
}
    ul.navigation-path li {
        color: #fd0;
        text-decoration: none;
    }
        ul.navigation-path li a {
            color: white;
            text-decoration: none;
        }
            ul.navigation-path li a:hover, ul.navigation-path li a:active, ul.navigation-path li a:focus {
                color: #fd0;
                text-decoration: none;
                cursor: pointer;
            }

.message-container {
    padding: 0px !important;
    min-width: 450px !important;
    max-height: 80vh !important;
    overflow: auto;
    box-shadow: 0 2px 6px #274BA7 !important;
}

    .message-container li.nav-item {
        padding: 5px;
    }

    .message-container li.message-footer {
        color: #111;
    }

    .message-container li.message-header {
        padding: 5px;
        color: #111;
        text-align: center;
        font-size: 20px;
    }

    .message-container li.nav-item:not(:first-child)::before {
        height: 0;
        margin: .5rem 0;
        overflow: hidden;
        border-top: 1px solid #e9ecef;
        width: 100%;
        content: "";
        display: block;
        transform: translateY(-1rem);
    }

    .message-container .message-date {
        display: block;
        padding-bottom: 5px;
        color: #222222;
    }

    .message-container .message-footer button {
        background-color: #fd0;
        padding: 10px 15px;
    }

.submenu-nav-container ul.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 17px;
    background-color: #f5f5f5 !important;
    box-shadow: 0 2px 6px #274BA7 !important;
}

    .submenu-nav-container ul.dropdown-menu li {
        list-style: none;
        margin: 0;
    }

    .submenu-nav-container ul.dropdown-menu > li > a {
        padding: 8px 15px;
        font-size: 17px;
        color: #274BA7;
        cursor: pointer;
    }

        .submenu-nav-container ul.dropdown-menu > li > a:focus, .submenu-nav-container .dropdown-menu > li > a:hover, .submenu-nav-container .dropdown-menu > li > a:active {
            background-color: #dddddd;
            color: #222222;
            text-decoration: none;
        }

/*Display global search results*/
#searchContainer ul {
    box-shadow: 3px 3px 6px #274ba7 !important;
    margin: 0;
    border-top: none;
    overflow: hidden;
    overflow-y: auto;
    max-height: 210px;
    min-width: 200px;
}

/*Display clear button for global search*/
#searchContainer #globalSearchInput:not([value=""]) ~ #globalSearchClearButton::after {
    content: "&times;";
    position: absolute;
    border: none;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    top: 0;
    bottom: 0;
    right: 65px;
    margin: auto;
    background: none;
    padding: 0;
    outline: none;
    cursor: pointer;
    transition: .1s;
}

/*Hide global search clear button*/
#searchContainer #globalSearchInput[value=""] ~ #globalSearchClearButton {
    display: none;
}

@media only screen and (max-width: 600px) {
    #navigation {
        min-width: 375px;
    }

        #navigation .nav-brand span.menu-collapsed {
            display: none;
        }
}

@media only screen and (max-width: 767px) {
    #searchContainer {
        display: none;
    }
}

@media only screen and (max-width: 1024px ) {
    .navbar-nav {
        margin: 0 !important;
    }

        .navbar-nav > li {
            float: left;
        }

            .navbar-nav > li:not(:first-child) {
                padding: 4px 0;
            }

            .navbar-nav > li > a {
                padding: 4px 0;
            }

    #navigation .navbar-nav > li > a#userAccessBtn {
        color: white !important;
    }

        #navigation .navbar-nav > li > a#userAccessBtn:hover, #navigation .navbar-nav > li > a#userAccessBtn:active, #navigation .navbar-nav > li > a#userAccessBtn:focus {
            color: #fd0 !important;
        }

    #userAccessBtn * {
        display: none;
    }

    #userAccessBtn:before {
        float: right !important;
        content: "\f21d";
        display: inline-block;
        padding: 0 0 0px 0 !important;
        font-size: 1.33333em;
        line-height: .75em;
        vertical-align: -0.0667em;
        text-decoration: none !important;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-style: normal;
        text-transform: none;
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

@media only screen and (max-width: 1660px) {
    #navigation .breadcrumb-nav-container > .navigation-path {
        display: none;
    }

    #navigation .breadcrumb-nav-container .breadcrumb-nav-container-mobile {
        display: flex;
    }
}

.address-nav-container {
    font-size: 16px !important
}

.address-nav-caret {
    margin: 3px 3px -5px;
}

.clock {
    padding: 2px;
    color: white;
}

    .clock:hover span {
        color: #fd0;
    }

    .clock > span {
        color: white;
        text-shadow: 0 0 2px white;
        font-size: 16px
    }

    .clock > div.tooltip.bottom {
        margin-top: 0px !important;
    }

@media only screen and (max-width: 1400px) {
    #dealerLocationTimeZoneContainer {
        display: none;
    }
}