@import "fontello.css?v20200219001";

/* transactional header's account selector nav button/dropdown with pics of cards */

/* mobile menu card image animation */
@keyframes slideCardTxtOver {
    100% {
        transform: translateX(3.45rem);
    }
}

@keyframes slideInFromLeft {
    100% {
        transform: translateX(0%);
    }
}
/* the following classes are added/removed via JS */
.mobile-menu-animate-txt {
    animation: slideCardTxtOver 350ms ease-out 200ms 1 normal forwards;
}

.mobile-menu-animate-card {
    animation: slideInFromLeft 400ms ease-out 300ms 1 normal forwards;
}

/* end animation */

/* mobile menu w/ animated card images */
.mobile-menu-card-img {
    position: absolute;
    height: 30px;
    padding-right: 10px;
    display: inline-block;
    transform: translateX(-100%);
}

    .mobile-menu-card-img + span {
        display: inline-block;
    }

.mobile-nav-card-images .message-center-reminder {
    right: 200px;
}

.mobile-nav-card-images .mobile-settings-reminder {
    right: 150px;
}

.mobile-nav-card-images .mobile-menu-icon-cards {
    border: 1px solid #424242;
    border-radius: 5px;
    min-width: 116px !important;
    padding: 5px 5px 5px 5px !important;
    height: 47px !important;
    transition: border-color 200ms linear;
}

    .mobile-nav-card-images .mobile-menu-icon-cards:hover {
        border-color: #f17d1d;
    }

.mobile-menu-icon-cards .js-mobile-menu-animate {
    min-width: 115px !important;
}

    .mobile-menu-icon-cards .js-mobile-menu-animate img {
        height: 34px;
        vertical-align: top;
    }

    .mobile-menu-icon-cards .js-mobile-menu-animate span {
        display: inline-block;
    }

    .mobile-menu-icon-cards .js-mobile-menu-animate .icon2-hamburger {
        position: unset;
    }
/* end mobile menu */


/* desktop menu w/ card image in selector button & three cards in dropdown */
.menu-acct-card-pics {
    min-width: 305px;
    background-color: #ffffff;
    border: 2px solid #f17d1d;
    border-radius: 3px;
}

    .menu-acct-card-pics::after { /* little arrow at top border edge */
        border-color: transparent transparent #f17d1d transparent;
        top: -15px;
    }

    .menu-acct-card-pics .current-acct a span::before {
        font-family: 'fontello';
        font-weight: bold;
        display: inline-block;
        content: "\e819";
        padding-right: 8px;
        vertical-align: middle;
        color: #076191;
        font-size: 0.7rem;
    }

    .menu-acct-card-pics li:not(:last-child) a span {
        color: #076191;
        font-weight: 400;
        float: left;
    }

    .menu-acct-card-pics li a img {
        display: block;
        height: 2.3rem;
        margin-top: -1px;
        float: right;
    }

    .menu-acct-card-pics ul::after {
        content: '';
        display: table;
        clear: both;
    }

    .menu-acct-card-pics li:first-child {
        padding-bottom: 5px;
    }

    .menu-acct-card-pics li:nth-child(2) {
        border-top: 1px dotted #f17d1d;
    }

    .menu-acct-card-pics li:not(:first-child) {
        border-top: 1px dotted #f17d1d;
        height: 3.125rem;
        line-height: 2rem;
        margin: 0 auto;
        width: 90%;
    }

   
        .menu-acct-card-pics li:not(:first-child):not(:last-child):hover {
            background-color: rgba(7, 97, 145, 0.1); /* #076191 w/ alpha */
        }

    .menu-acct-card-pics li:last-child {
        padding-top: 8px;
    }
    li.add-account {
        padding-top: 0px !important;
    }
        .menu-acct-card-pics li:last-child:hover {
            background-color: rgba(7, 97, 145, 0.1); /* #076191 w/ alpha */
        }

    .menu-acct-card-pics li:not(:first-child):not(:last-child):hover a span {
        color: #ff9000;
    }

    .menu-acct-card-pics li:not(:first-child):not(:last-child).current-acct:hover {
        background-color: transparent;
        cursor: default;
    }

        .menu-acct-card-pics li:not(:first-child):not(:last-child).current-acct:hover a {
            cursor: default;
        }

            .menu-acct-card-pics li:not(:first-child):not(:last-child).current-acct:hover a span {
                color: #076191;
            }
/* end desktop menu */

/* JGW 11/2018 */
/* end acct selector with card pics */