/* Foundation of navbar */
.navbar {
    background-color: #304E80 !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 1000 !important;
}

/* Navbar items */
.navbar .navbar-collapse li a {
    font-weight: 700;
    height: 52px;
}

.navbar .notificationBadge {
    position: relative;
    display: inline-block;
}

.navbar .notificationBadge .notificationNum {
    background-color: var(--error);
    color: white;
    border-radius: 10px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1;
    width: auto;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
    position: absolute;
    transform: translateX(-100%);
    top: -25px;
    left: 13px;
    font-weight: 400;
}

.navbar .navbar-collapse li:hover > a {
    background-color: #1e2e47 !important;
}

/* Navbar active item */
.navbar-nav .active-back {
    background-color: transparent !important;
}

.navbar-nav .active-back > a {
    color: #32AFD4 !important;
}

.navbar-nav li:active {
    background-color: transparent !important;
}

.navbar-nav li:active > a:not(#menuSearchToggle) {
    color: #32AFD4 !important;
}

/* Navbar dropdown menus */
.navbar .navbar-collapse li .dropdown-menu {
    background-color: #304E80 !important;
    padding: 0 0 12px 0;
    border-top: 2px solid #32AFD4 !important;
    border-radius: 0 0 12px 12px;
    /*box-shadow: 0 10px 0 -1px #32AFD4, 0 10px 10px 5px rgba(0,0,0,0.5);*/
}

/* Navbar dropdown menu items */
.navbar .navbar-collapse li .dropdown-menu li {
    margin: 0 !important;
}

.navbar .navbar-collapse li .dropdown-menu li a {
    color: white;
    display: table-cell;
    vertical-align: middle;
    width: 200px;
}

.navbar .navbar-collapse li .dropdown-menu:not(.togglesearch) a:hover {
    background-color: #1e2e47 !important;
    color: white !important;
}

/* Left section of navbar */
.navbar .left-menu {
    position: relative;
    z-index: 1;
    font-size: 15px;
}

.navbar .left-menu ul {
    width: 100% !important;
}

/* Right section of navbar */
.navbar .right-menu {
    position: absolute;
    right: 0;
    top: 0;
}

/* Scale down left side of navbar as screen gets smaller */
@media only screen and (min-width: 768px) and (max-width: 1080px) { .navbar .left-menu { font-size: 14px; } }
@media only screen and (min-width: 768px) and (max-width: 990px) { .navbar .right-menu { top: 50px; } }
@media only screen and (min-width: 768px) and (max-width: 886px) { .navbar .left-menu { width: 560px !important; } }

/* Extra room for pressing the plus button */
#menuItemPlus {
    width: 75px;
}

#menuItemPlus a {
    padding-right: 15px !important;
    text-align: right;
}

/* Navbar toggle buttons */
.navbar-toggle {
    border: none !important;
}

.navbar-toggle span {
    height: 2px;
    margin: 0;
    padding: 0;
    margin-top: 0px !important;
    margin-bottom: 3.5px;
}

#userBox .initials {
    color: #304E80;
}

/* Search Bar */
#menuItemSearch {
    display: flex;
}

#menuSearchToggle {
    z-index: 3;
    cursor: pointer;
}

#searchBar {
    overflow-x: hidden;
    background-color: #1D2E47;
    position: absolute;
    transition: width 0.5s ease-in-out;
    padding-left: 45px;
    width: 0px;
}

#searchBar.hidden { width: 0px; }
#searchBar.visible { width: 520px; }

@media only screen and (min-width: 1350px) and (max-width: 1470px) {
    #searchBar.visible { width: 400px; }
}

@media only screen and (max-width: 1350px) {
    #searchBar.visible {
        width: 540px;
        left: -493px;
        z-index: 2;
        padding-left: 0px;
    }
}

@media only screen and (max-width: 1080px) {
    #searchBar.visible {
        width: 630px;
        left: -584px;
    }
}

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

#searchBar input {
    background-color: #1D2E47;
    height: 52px;
    border: none;
    border-bottom: 1px solid white;
    width: 100%;
    max-width: none;
    outline: none;
    padding-left: 15px;
}

#searchBar input::placeholder {
    color: #B7B7B7;
}

.searchHeader, .searchSubHeader {
    padding: 10px 15px;
    height: 30px;
    float: left;
    font-weight: 700;
}

.searchMore, .searchSubMore {
    padding: 10px 5px;
    text-align: right;
    font-size: 13px;
    height: 30px;
    color: white;
}

.searchMore a, .searchSubMore a {
    color: #32AFD4;
}

.searchItem {
    width: 100%;
}

.searchItem a {
    color: white;
    font-weight: 700;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto !important;
    display: block;
    padding: 10px 15px 10px 30px;
    font-weight: 400 !important;
}

.searchItem a:hover {
    text-decoration: none;
    background-color: #1e2e47;
}

#seeAllButton {
    margin-left: 15px;
    box-shadow: none !important;
}

/* Responsive styling for mobile */
@media only screen and (max-width: 767px) {
    /* Left section of navbar */
    .navbar .left-menu {
        width: auto;
        border-top: none !important;
        top: 1px;
        overflow: hidden;
        background-color: rgba(0,0,0,0) !important;
        padding-left: 0 !important;
    }

    .navbar .left-menu.in {
        overflow: visible;
    }

    .navbar .left-menu > ul {
        border-top: 2px solid #32AFD4;
        width: 190px !important;
        background-color: #304E80 !important;
        margin-top: 0 !important;
        padding-left: 14px !important;
        border-top: 2px solid #32AFD4 !important;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 0 -1px #32AFD4, 0 10px 10px 5px rgba(0,0,0,0.5);
    }

    .navbar .left-menu ul li {
        width: 177px;
    }

    .navbar .left-menu ul li a {
        line-height: 2.2;
    }

    .navbar .left-menu ul li .dropdown-menu li a {
        width: 175px;
    }

    .navbar .left-menu .nav li .dropdown-menu {
        left: 176px;
        top: 0px;
        width: 175px;
    }

    /* Right section of navbar */
    .navbar .right-menu {
        position: absolute;
        z-index: 1;
        right: -20px;
        top: -1px;
        border-top: none !important;
        height: 53px;
    }
    
    .navbar .right-menu .navbar-right {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    .navbar .right-menu .navbar-right > li a {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .navbar .right-menu .navbar-right li ul {
        top: 53px;
        text-align: right;
        width: 160px;
    }

    #menuItemPlus ul {
        left: -83px;
    }

    #menuItemUser ul {
        left: -99px;
    }
}

@media only screen and (max-width: 430px) { .navbar-brand { display: none; } }