
/* Adds padding below custom portal elements on mobile */
@media (max-width:767px) {
    #bca-portalnav-mobile {
        padding-bottom: 15px;
        float: right;
        display: inline-block;
        padding-right: 15px;
    }
}

/* Styles login controls on authenticated menu */
.bca-portalnav .login-controls.bca-authenticated {
    margin: 0 10px;
}

/* Styles login controls on authenticated menu in mobile view */
.bca-portalnav .login-controls-mobile.bca-authenticated {
    display: inline-block;
}

/* Styles login controls on unauthenticated menu in mobile view */
.bca-portalnav .login-controls-mobile.bca-unauthenticated {
    padding: 20px 0 0 0;
    margin-bottom: -15px;
    display: block;
}
/* Hides mobile login controls for both menus in desktop view */
@media (min-width:768px) {
    .bca-portalnav .login-controls-mobile.bca-unauthenticated,
    .bca-portalnav .login-controls-mobile.bca-authenticated {
        display: none;
    }
}

/* Hides desktop version of authenticated and unauthenticated login controls on mobile view */
@media (max-width: 767px) {
    .bca-portalnav .login-controls {
        display: none;
    }
}

/* Styles login controls on unauthenticated page */
.bca-portalnav .login-controls.bca-unauthenticated {
    margin: 7px 0 0 14px;
    color: #07819a;
}

/* Styles login controls' Login and Register links for unauthenticated page */
.bca-portalnav .login-controls .bca-login,
.bca-portalnav .login-controls .bca-register,
.bca-portalnav .login-controls-mobile .bca-login,
.bca-portalnav .login-controls-mobile .bca-register {
    /* padding: 10px 20px; */
    margin: 0px;
}

.bca-portalnav .login-controls .bca-login,
.bca-portalnav .login-controls-mobile .bca-login {
    padding-top: 1px;
    padding-bottom: 2px;
    padding-right: 5px;
    padding-left: 20px;
}

.bca-portalnav .login-controls .bca-register,
.bca-portalnav .login-controls-mobile .bca-register {
    padding-top: 1px;
    padding-bottom: 2px;
    padding-right: 10px;
    padding-left: 5px;
}

/* Adds a line between Login and Register */
.bca-portalnav .login-controls .bca-login,
.bca-portalnav .login-controls-mobile .bca-login {
    border-right: 1px solid #07819a;
}

.bca-portalnav .login-controls .bca-register,
.bca-portalnav .login-controls-mobile .bca-register {
    border-left: 1px solid #07819a;
}

/* Styles user button on authenticated menu in mobile view */

.bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button {
    padding: 3px 0;
}

    .bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button button {
        top: -2px;
    }

    /* Styles user button on authenticated menu for mobile and desktop */
    .bca-portalnav .login-controls.bca-authenticated .bca-user-button button,
    .bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button button {
        color: #07819a;
        border: none;
        position: relative;
        padding-right: 60px;
        max-width: 300px;
    }
/* Controls width of user button in mobile and desktop views */
@media (min-width:768px) and (max-width:992px) {
    .bca-portalnav .login-controls.bca-authenticated .bca-user-button button {
        max-width: 148px;
    }
}

@media (max-width:479px) {
    .bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button button {
        max-width: 170px;
    }
}

/* Styles username on user button */
.bca-portalnav .bca-user-button span.username {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
    display: inline-block;
    padding-top: 7px;
}
/* Hides username on mobile view */
@media (max-width: 315px) {
    .bca-portalnav .bca-user-button span.username {
        display: none;
    }
}

/* Styles caret on user button for mobile and desktop */
.bca-portalnav .login-controls.bca-authenticated .bca-user-button button .bca-caret,
.bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button button .bca-caret {
    /*position: absolute;
    right: 5px;
    border-top-color: #07819a;
    margin: 10px 0 0 10px ;*/
    display: inline-block;
    background-image: url('../Images/grn-chevron-dwn.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 14px;
    vertical-align: top;
    width: 20px;
    position: absolute;
    padding-left: 45px;
    padding-top: 20px;
}


/* Removes drop shadow from user button (Note: The dropdown menu should still have a drop shadow)  */
.bca-portalnav .bca-user-button.btn-group.open .dropdown-toggle,
.bca-portalnav .bca-user-button.btn-group .dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Changes size of user icon on user button */
.bca-portalnav .login-controls.bca-authenticated .bca-user-button .bca-icon,
.bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button .bca-icon {
    font-size: 20px;
    position: absolute;
    right: 30px;
}

/* Changes width of user button */
.bca-portalnav .dropdown-toggle {
    width: auto;
}

/* Styles user button dropdown menu on authenticated menu in mobile and desktop views */
.bca-portalnav .login-controls.bca-authenticated .bca-user-button .dropdown-menu,
.bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button .dropdown-menu {
    border-radius: 0px;
    border: none;
    padding: 0;
}

    .bca-portalnav .login-controls.bca-authenticated .bca-user-button .dropdown-menu li a,
    .bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button .dropdown-menu li a {
        padding: 10px 20px;
        border-bottom: 1px solid #eef8f9;
        color: #07819a;
    }

        .bca-portalnav .login-controls.bca-authenticated .bca-user-button .dropdown-menu li a:hover,
        .bca-portalnav .login-controls-mobile.bca-authenticated .bca-user-button .dropdown-menu li a:hover {
            background-color: #eef8f9;
            color: #56565a;
        }

/* Styles link to switch between unauthenticated/authenticated menus */
.bca-portalnav .bca-external-link .bca-user-button button,
.bca-portalnav .bca-external-link-mobile .bca-user-button button {
    background-color: #eef8f9;
    color: #07819a;
    /*text-decoration: underline;*/
    border: none;
    position: relative;
    top: -20px;
    padding: 33px 20px 13px 20px;
}
/* Hides link to switch between unauthenticated/authenticated menus on mobile view */
@media (max-width: 767px) {
    .bca-portalnav .bca-external-link {
        display: none;
    }

    .bca-external-link-mobile {
        display:none;
    }
}

.bca-portalnav .bca-external-link-mobile {
    display: block;
    clear: both;
    width: 100%;
}

    .bca-portalnav .bca-external-link-mobile .bca-user-button button {
        display: block;
        width: 100%;
        margin: 0;
    }

/* Hides mobile link to switch between unauthenticated/authenticated menus on desktop view */
@media (min-width: 768px) {
    .bca-portalnav .bca-external-link-mobile {
        display: none;
    }
}

/* Styles notifications group on mobile and desktop views */
.bca-portalnav .bca-notif-group *,
.bca-portalnav .bca-notif-group-mobile * {
    text-decoration: none;
}

/* Styles notifications group on mobile */
.bca-portalnav .bca-notif-group-mobile {
    float: right;
    padding: 0 0 0 10px;
}

/* Hides notifications group on mobile view */
@media (max-width: 767px) {
    .bca-portalnav .bca-notif-group {
        display: none;
    }
}

/* Hides mobile notifications group on desktop view */
@media (min-width: 768px) {
    .bca-portalnav .bca-notif-group-mobile {
        display: none;
    }
}

/* Styles notification links to make clickable area bigger */
.bca-portalnav .bca-notif-group .bca-notif a,
.bca-portalnav .bca-notif-group-mobile .bca-notif a {
    padding: 10px 15px;
}

/* Adds vertical lines between notifications */
.bca-portalnav .bca-notif-group .bca-notif,
.bca-portalnav .bca-notif-group-mobile .bca-notif {
    border-left: 1.5px solid #ABDFDC;
    display: inline-block;
    padding: 5px 0px;
}

    /* Styles notification icons */
    .bca-portalnav .bca-notif-group .bca-notif .bca-icon,
    .bca-portalnav .bca-notif-group-mobile .bca-notif .bca-icon {
        position: relative;
        top: 3px;
        left: -5px;
        padding: 5px 7px;
    }

/* Styles notification counter */
.bca-portalnav .bca-notif-group .bca-notif-count,
.bca-portalnav .bca-notif-group-mobile .bca-notif-count {
    vertical-align: super;
    font-size: 12px;
    font-weight: normal;
    position: relative;
    left: 17px;
    top: 0;
}

/* Styles heart notifications */
.bca-portalnav .bca-notif-group #bca-favoritenotif,
.bca-portalnav .bca-notif-group-mobile #bca-favoritenotif,
.bca-portalnav .bca-notif-group #bca-favoritenotif a,
.bca-portalnav .bca-notif-group-mobile #bca-favoritenotif a {
    color: #ED3436;
}

/* Styles arrow notifications */
.bca-portalnav .bca-notif-group #bca-comparenotif,
.bca-portalnav .bca-notif-group-mobile #bca-comparenotif,
.bca-portalnav .bca-notif-group #bca-comparenotif a,
.bca-portalnav .bca-notif-group-mobile #bca-comparenotif a {
    color: #07819a;
}

/* Styles bell notifications */
.bca-portalnav .bca-notif-group #bca-recentsearchnotif,
.bca-portalnav .bca-notif-group-mobile #bca-recentsearchnotif,
.bca-portalnav .bca-notif-group #bca-recentsearchnotif a,
.bca-portalnav .bca-notif-group-mobile #bca-recentsearchnotif a {
    color: #F8993A;
}

/* Sprites (Icons) */

.bca-user-sprite,
.bca-favoritenotif-sprite,
.bca-comparenotif-sprite,
.bca-recentsearchnotif-sprite {
    background-image: url('bca-portalnav-sprites.png');
    background-repeat: no-repeat;
    height: 30px;
}

.bca-user-sprite {
    background-position: -3px 0px;
    padding: 0 10px;
}

.bca-favoritenotif-sprite {
    background-position: -28px 0px;
}

.bca-comparenotif-sprite {
    background-position: -55px 0px;
}

.bca-recentsearchnotif-sprite {
    background-position: -80px 0px;
}
