/*********************************************************************
 VBN theme stylesheet
**********************************************************************/

/* Default primary/secondary colors; these are normally overridden in the sitecolors.css stylesheet for each institution */
:root {
    --primarycolor: #FF6600;
    --secondarycolor: #2E8BC9;
    --thirdcolor: rgba(0, 0, 0, 0.54);
}

a:link, a.actionLink:link, a:visited, a.actionLink:visited, a:hover, a.actionLink:hover, a:active, a.actionLink:active {
    text-decoration: none;
    text-decoration: none;
}

.newVBN {
    display: flex;
    overflow: auto;
    flex-direction: column;
    margin: 0 auto;
}

/* Login Page */
#esoWrapper {
    display: flex;
    width: 100%;
    justify-content: center;
}

#esoDiv {
    display: flex;
    width: 180px;
    height: 40px;
    align-self: center;
}
.esoClass {
    display: flex;
    align-self: center;
    margin-top: 10px;
}
.esoVerticalDiv {
    display: flex;
    flex-direction: column;    
}
#esoVerticalDiv {
    display: flex;
    flex-direction: column;
    width: 110px;   
}

.esoUsername {
    padding-left: 5px !important;
    padding-right: 5px !important;
    width: 90% !important;
    margin-bottom: 10px;
}

.esoButton {
    margin-right: 0;
    margin-left: 5px;
    margin-top: 3px;
    align-self: center;
}

.contentGroup85 {
    width: -webkit-fill-available;
    width: -moz-available;
}

#content {
    text-align: center;
}

.securityBox {
    max-width: 450px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.17);
    opacity: 1;
    border-bottom: 4px solid var(--primarycolor);
    display: inline-block;
    margin: 20px;
    padding: 20px;
}

.editSecurityPhrase {
    display: inline;
    margin: 20px;
    max-width: -webkit-fill-available;
}

#body_body_pnlMaint, #body_body_pnlBroadcasting, #body_body_pnlBulletin {
}
/*modified*/
#body_body_language_lnkChangeLang {
    font-size: 16px; /*Changed 24 px to 16px */
    font-weight: normal; /*Added*/
}

#loggedOffLeftMenu {
    padding: 10px;
    text-align: left;
}

.loggedOffMenuBackground {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    background-color: transparent;
}

.majorLink /* larger links, such as "Switch to List View" or "Quick Transfer" in the "Display Account Summary" page */ {
    font-size: 20px;
    padding-bottom: .5em;
}

.interactiveLink, .interactiveIconLink, .noninteractiveIconLink /* links that shift when you hover over them */ {
}

.noninteractiveText /* class if what is normally an interactiveLink should instead be just text */ {
}

.textboxHint {
    font-size: 10px;
    margin: .3em;
    padding: 0;
    width: 95%;
}


/* Header */
.header {
}
/*VBN2 - Added*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    font-family: 'Open Sans';
    color: rgba(0, 0, 0, 0.87);
}

.contentSection {
    margin-left: 48px;
    margin-right: 48px;
}
/*revisit*/
.nav {
    background: var(--primarycolor) 0% 0% no-repeat padding-box;
    width: 1024px;
    top: 0px;
    z-index: 120;
    /*  height:80px; */
}

.contentPadding {
}

.infoMessageIcon {
    display: inline-flex;
}

#waa389_A2ATransferTnA {
    display: inline-block;
}

input[type="number"][size="1"], input[type="number"][size="2"], input[type="number"][size="3"], input[type="number"][size="4"], input[type="number"][size="5"], input[type="number"][size="6"],
input[type="number"][size="7"], input[type="number"][size="8"], input[type="number"][size="9"], input[type="number"][size="10"], input[type="number"][size="11"], input[type="number"][size="12"]
input[type="number"][size="13"] {
    width: 102px;
}

input[type="number"] {
    width: 102px;
    height: 34px;
    background: rgba(255, 255, 255, 1) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
    opacity: 1;
}

h2 {
    font-weight: Bold;
    letter-spacing: 0px;
    color: rgba(0,0,0, 0.54);
    opacity: 1;
}

textarea /* http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ */ {
    font-family: 'Open Sans';
}

body, select {
    font-family: 'Open Sans';
}

.navarrow {
    height: 30px;
    width: 30px;
    opacity: 1;
}

.navlinkarrow {
    opacity: 1;
    height: 15px;
    width: 15px;
}

.modulemaintext {
    text-align: left;
    font: italic normal normal 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
}

.modulesubtext {
    text-align: left;
    font: italic normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}

    .modulesubtext span {
        margin-left: 15px;
        text-align: left;
        font: italic normal normal 14px 'Open Sans';
        letter-spacing: 0px;
        color: rgba(0, 0, 0, 0.54);
        opacity: 1;
    }

.moduleaccount {
    display: inline-block;
    float: right;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    margin-top: 0.375em;
}

.dropdown {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
    opacity: 1;
    height: 34px;
}

.dropdownemail {
    width: 198px;
}

.dropdowndelivery {
    margin-left: 0.5em !important;
}

.dropdownfrequency {
}

.dropdownPrefs {
    width: 214px;
}
/*VBN5 - Added*/

.openPopUp {
    height: auto;
    width: auto;
    top: 10% !important; /*Modified*/
    left: 25% !important;
    z-index: 199 !important;
}

a.unreadMessage {
    font-weight: bold;
}

.divScheduleTransferAmt {
    text-align: right;
    padding-right: 6px;
}


.paymentFieldValue > .quickPayCalendar > .ui-datepicker-trigger {
    right: 5%;
    margin-top: 18px;
}

#wld558_BillPaymentLanding input {
    height: 34px;
}

#wbp017paymentsearchbydetailsHeader, #wbp017paymentsearchbyconfHeader {
    padding-left: 0px !important;
}

#wbp169_BillPaymentLanding input,
#wld035_BillPaymentLanding input,
#wld039_BillPaymentLanding input,
#wld554_BillPaymentLanding input,
#wld558_BillPaymentLanding input {
    height: 34px;
}

#wbp169_BillPaymentLanding select,
#wld035_BillPaymentLanding select,
#wld039_BillPaymentLanding select,
#wld554_BillPaymentLanding select,
#wld558_BillPaymentLanding select {
    height: 34px;
}

.noHover {
    height: 0px !important;
}

.summaryTable th {
    padding-top: 1.1em;
}

.actionLinkSecondaryColorDeleteBtn {
    color: var(--secondarycolor) !important;
}

#wbp017_PaymentHistoryContainer {
    display: flex;
    flex-direction: row;
}

.paymentTileTable .paymentTileAccountName {
    font-size: 1.2em;
}

#wbp012_PaymentDetail td {
    padding: .4em;
}

.dropdowndays {
}

.dropdownMemberNumber {
}

.dropdownDocumentName {
}

.dropdownAcccountId {
    height: auto;
}

.siteSubMenuSvg {
    width: 20px;
    height: 20px;
    fill: white;
    vertical-align: middle;
}

#BulletinLink {
    margin-left: 70px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

#Bulletin {
}

#BulletinMessage {
    padding: 10px;
    display: none;
    border: 1px solid var(--primarycolor);
}

.showUpDownArrow {
    width: 20px;
    height: 20px;
    fill: white;
    vertical-align: middle;
}

.subMenuItems {
    font-size: 14px !important;
    background-color: black !important;
    padding: .5em;
    text-align: left;
    margin: 0px;
    display: none;
}

    .subMenuItems > ul {
        border-left: none;
    }

    .subMenuItems > li {
        border-left: 4px solid var(--primarycolor);
        padding: .5em;
        display: block;
        border-left: none;
        width: 100%;
        margin-left: -7px;
        text-indent: 23px;
        cursor: pointer;
    }

        .subMenuItems > li:hover {
            font-size: 14px;
            background: #919191;
        }

            .subMenuItems > li:hover > a {
                font-size: 14px;
                background: #919191;
            }

.input-validation-error {
    border-color :red ;
    border-width: 1px;
    background-color: #FFEFEF !important;
}

/*VBN5 - End*/
.vbnAccountdtls {
    background-color: rgba(0, 0, 0, 0.02);
    width: 100%;
}

.accountdtlsHeader {
}

.vbnHistorySearch {
    float: left;
    display: flex;
    margin: 7px 0px 7px 0px;
}

.vbnVaidationerrorHistorySearch {
    float: left;
    display: flex;
    margin: 7px 0px 7px 0px;
    width: 100%;
}

.dtlstile {
    font: normal normal normal 12px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0,0,0,0.54);
    opacity: 0.87;
}

    .dtlstile > .dollarPrefix {
        display: none;
    }

.dtlstileBal > .dollarPrefix {
    display: none;
}

#VBNAccountList {
    background-color: #f2f2f2;
    min-height: 450px;
    /* min-width: 500px; */
}

.AccountTotalLabel {
    color: rgba(0, 0, 0, .54);
}

.vbnlevel2Selected {
    padding-left: 48px;
    display: inline-block;
    text-align: left;
    font: normal normal normal 36px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.vbnsubmenuTransfer {
    float: right;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    display: inline-block;
    padding-top: 48px;
    padding-right: 64px;
}

.vbnsubmenu {
    float: left;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    display: inline-block;
}

.ulsubmenu {
    float: right;
    width: 740px;
    white-space: nowrap;
    display: flex;
    padding-left: 0px;
    margin: 0px;
    height: 65px;
}

.subMenuLink {
    display: flex;
    text-align: center;
    font: normal normal 300 16px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    white-space: pre-wrap;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
}

.submenulinkSelected {
    font: normal normal Bold 16px 'Open Sans';
    border-bottom: 3px solid var(--primarycolor);
}

.dollarPrefix {
    color: rgba(0, 0, 0, 0.54);
    font-size: 1em;
    vertical-align: super;
}

.bigMoney {
    color: rgba(0, 0, 0, 0.87);
    font-size: 1.875em;
}

.smallCents {
    color: rgba(0, 0, 0, 0.54);
    font-size: 1em;
}

.cardBalance {
    font-size: 14px;
    position: relative;
    top: 5px;
}

.accountTotal {
    padding-left: 10px;
    padding-right: 20px;
    float: right;
    margin-top: 20px;
    font-size: .875em;
}

    .accountTotal > .dollarPrefix {
        display: none;
    }

.shareAccountTotal {
    border-left: 4px solid var(--primarycolor);
}

.investmentAccountTotal {
    border-left: 4px solid var(--thirdcolor);
}

.loanAccountTotal {
    border-left: 4px solid var(--secondarycolor);
}

.availablebalance {
    border-left: 4px solid var(--primarycolor);
    text-align: left;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
}

.currentbalance {
    border-left: 4px solid var(--secondarycolor);
    text-align: left;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
}

.opacityLabel {
    opacity: 0.54;
    text-align: left;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
}

.opacityLabelColumns {
    opacity: 0.54;
    text-align: left;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
    padding-left: 9px;
}

.textinput {
    height: 34px;
    background: rgba(255, 255, 255, 1) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
}

.searchCriteria {
    padding-left: 16px;
}

.searchBanner {
    float: left;
    display: flex;
    justify-content: space-between;
}

input#histSearch-button1 {
    background: url('/Content/gifs/vbxicons2.svg#icon_control_search') no-repeat top left;
    padding-left: 24px;
    height: 40px;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    border-radius: 0;
    width: 120px;
}

.button-icon {
    position: absolute;
    margin: -56px;
    top: 89%;
}

input#histSearch-button {
    background: url(/Content/gifs/vbxicons2.svg#icon_control_search) no-repeat center;
    background-size: 50px;
    background-color: whitesmoke;
    padding-left: 24px;
    height: 34px;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    border-radius: 17px;
    width: 64px;
    border: 1px solid #00000042;
    cursor: pointer;
}

.accntTypeSearchCriteria {
    font: normal normal normal 18px 'Open Sans';
    color: rgba(0, 0, 0, 0.54);
    padding-bottom: -11%;
    MARGIN-TOP: 1%;
    margin-left: 11%;
    position: absolute;
    padding: 15% 0% 0% 15%;
}

.histDescription {
    padding-left: 4px;
    padding-top: 8px;
}

.addacctdetails {
    border-left: 4px solid var(--thirdcolor);
    text-align: left;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
    opacity: 0.54;
}

.lastLogin {
    float: left;
    height: 35px;
    width: 180px;
    border-left: 1px solid rgba(0, 0, 0, 0.54);
    color: rgba(0, 0, 0, 0.54);
    font-size: 13px;
    padding-left: 10px;
    margin-left: 10px;
    margin-top: 30px;
}

.accountCardsHolder {
    float: left;
    height: 300px;
    display: flex;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow-x: auto;
    width: -webkit-fill-available;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 10px;
    width:-moz-available;
    overflow:scroll;
    
}

@media all and (min-width: 768px) {
    .accountCardsHolder {
        padding-left: 48px;
    }
}

.linkicon {
    float: right;
    position: relative;
    top: -75px;
    right: 10px;
    color: rgba(0, 0, 0, 0.54);
}

.infoicon {
}

.accountCardsHolder::-webkit-scrollbar {
    display: none;
}

.haccountCardsHolder {
    float: left;
    width: -webkit-fill-available;
    margin-top: 20px;
    margin-bottom: 20px;
    display: inline;
    background-color: #f2f2f2;
}

.acctCardHorizontal {
    display: inline-block;
    width: 414px;
    min-width: 340px;
}

.haccountCardsSection {
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.hcardsvg {
    float: left;
    padding-top: 0px;
}

.hCardName {
    line-height: 24px;
    display: inline-block;
    width:70%;
}

.haccount-dtl {
    width: 60%;
    float: left;
}

.hprice-dtl {
    text-align: right;
    float: right;
    color: rgba(0, 0, 0, 0.54);
    line-height: 24px;
    font-size: 14px;
}

.wrapper {
    position: relative;
}

#listWrapper {
    display: none;
}

.leftScroll {
    position: absolute;
    top: 0;
    left: 0;
    background: none;
}

.rightScroll {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
}

.svgChevron {
    height: 15px;
    width: 15px;
    fill: rgba(0, 0, 0, 0.54);
    vertical-align: bottom;
}

.morelesslink {
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
    height: 20px;
    float: left;
    opacity: 0.54;
    margin-left: 52px;
    font-weight: 600;
}

.depositimg {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}

.scrollSvg {
    fill: rgba(0, 0, 0, 0.54);
    height: 30px;
    width: 30px;
    top: 200px;
    background: #d4d4d4;
    border-radius: 15px;
}

    .scrollSvg:hover {
        fill: black;
        background: #808080;
        cursor: pointer;
    }

.acctCard {
    display: inline-block;
    height: 262px;
    width: 176px;
    flex: 0 0 auto;
    margin: 2px;
    padding: 2px 12px 2px 12px;
}

.acctCardShare {
    border-bottom: 4px solid var(--primarycolor);
}

.acctCardLoan {
    border-bottom: 4px solid var(--secondarycolor);
}

.acctCardInvestment {
    border-bottom: 4px solid var(--thirdcolor);
}

.cardUpper {
    text-align: center;
    height: 170px;
    padding-top: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.cardLower {
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    width: -webkit-fill-available;
    height: 50px;
}

    .cardLower > tr > td {
        padding: 5px;
    }

.cardNickname {
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    padding-top: 5px;
    padding-bottom: 15px;
    display: inline-block;
    max-width: 85%;
}

.cardLink {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

@media all and (min-width: 768px) {
    .cardLink {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.cardInfoLabel {
    text-align: left;
    color: rgba(0, 0, 0, 0.54);
    font-size: 13px;
}

.cardInfoData {
    text-align: right;
}

.svgCard {
    width: 32px !important;
    height: 32px;
    vertical-align: middle;
    fill: white;
    border-radius: 30px;
    padding: 8px;
}

.svgShare {
    background-color: var(--primarycolor);
}

.svgLoan {
    background-color: var(--secondarycolor);
}

.svgInvestment {
    background-color: var(--thirdcolor);
}

.histsvg {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 20px;
    fill: white;
    border-radius: 24px;
    opacity: 1;
    margin: 5px;
}

.printsvg {
    width: 32px;
    height: 32px;
    padding-top: 20px;
    padding-right: 8px;
}

.acctTypeHeader {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.87);
    padding: 10px;
    width: -webkit-fill-available;
    float: left;
     width: -moz-available;
}

.svgHCard {
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 20px;
    fill: white;
    margin: 5px;
}

.svgHShare {
    background-color: var(--primarycolor);
}

.svgHLoan {
    background-color: var(--secondarycolor);
}

.svgHInvestment {
    background-color: var(--thirdcolor);
}

/* Card Carousel start */
.fdl-2 .form-control {
    border-width: 0px !important;
}

.fdl-select::after {
    color: #e1e1e1;
}

.fdl-2 .form-control:hover {
    background-color: transparent;
}

.fdl-2 .form-control:focus {
    border-color: black;
    box-shadow: 0 0 0 0 transparent;
}

/*---------------Carousel Start---------------*/
.orange-card {
    border-bottom: 4px solid #FF6600;
}

.inner-card {
    padding: 30px 15px;
    box-shadow: 0px 3px 6px #0000002B;
}

.inner-card-title {
    font-size: 20px;
}

.inner-card-txt-color {
    color: #00000089;
}

.bold-amount {
    color: #000000DE;
    font-size: 32px;
    display: inline-block;
    padding: 0 px;
}

.dlr {
    font-size: 16px;
}

.inner-card-footer {
    border-top: 1px solid #e8e8e8;
}

.carousel-control-next {
    right: -80px;
}

.carousel-control-prev {
    left: -80px;
}
/* Card Carousel end*/

.calendar {
    height: 34px;
    width: 102px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
    opacity: 1;
}

.ui-datepicker-trigger {
    position: absolute;
    right: 53%;
    margin-top: 17px;
}

.ui-datepicker {
    margin-top: 0px !important;
    margin-left: 0px !important;
}

.calendar-placeholder {
    position: relative;
    display: inline-block;
}

.skipAltColor > td {
    border-style: none;
}

.altcolor tr:hover td, .refreshingTable .altcolor tr:hover td {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.altcolor tr td {
    opacity: 0.87;
    font-size: 14px;
    border-top: solid 1px rgb(224,224,224);
    border-bottom: none;
    border-right: none;
    border-left: none;
}

.modulealtcolor tr td {
    opacity: 1;
    font: normal normal normal 16px 'Open Sans';
    border-top: solid 1px rgb(224,224,224);
    border-bottom: none;
    border-right: none;
    border-left: none;
    margin-top: 0.5em;
    color: rgba(0, 0, 0, 0.87);
}

.acctimg {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.modulealtcolor tr:first-child {
    border-top: 1px solid #E0E0E0;
    opacity: 1;
}

.altcolor tr:nth-child(even), .altcolor tr:nth-child(even) td {
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.05);
}

.altcolor tr:nth-child(odd), .altcolor tr:nth-child(odd) td {
    background-color: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.05);
}

a.interactiveLink, a.interactiveIconLink, a.noninteractiveIconLink {
    text-decoration: none;
}

a:link, a.actionLink:link, a:visited, a.actionLink:visited, a:hover, a.actionLink:hover, a:active, a.actionLink:active {
    text-decoration: none;
}

#existingTransfers #scheduledTransfers #ModuleScheduledTransfers {
    box-shadow: none;
}

    #existingTransfers #scheduledTransfers #ModuleScheduledTransfers #schdTxfrHeader {
        display: none;
    }

#existingTransfers #transferHistory #ModuleTransferHistory {
    box-shadow: none;
}

    #existingTransfers #transferHistory #ModuleTransferHistory #xfrHistoryHeader {
        display: none;
    }

#VBNAccountHistoryListInner {
    box-shadow: none;
}

#VBNPendingItems {
    box-shadow: none;
}

#PendingHistoryGroup .contentPadding {
    padding-bottom: 32px;
}

.qtContainer, #HistQuickTransfer .contentModule {
    background: rgba(0, 0, 0, 0.04) 0% 0% no-repeat padding-box;
}

.divtxntamt {
    text-align: right;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
}

.divtxntamtcredit {
    text-align: right;
    font-weight: Bold;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
}

.divhistdetails {
    text-align: right;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}

.historyLinks {
    display: flex;
    margin-left: 178px;
}

.printLabel {
    padding-top: 28px;
    text-align: left;
    font: normal normal 600 16px/17px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}

#OverviewColumns {
    column-count: 1;
    -webkit-column-count: 1;
    float: left;
    column-gap: 0px;
    background-color: #f2f2f2;
    padding-left: 0px;
    padding-top: 16px;
    width: 100%;
}

#Transfers {
    display: inline-block;
    width: 100%;
}

#existingTransfers {
    float: left;
    max-width: 450px;
}

#scheduledTransfers {
    float: left;
    max-width: 460px;
}

    #scheduledTransfers .date-as-calendar {
        margin-right: 5px;
    }

    #scheduledTransfers .breakword {
        padding-top: 3px;
    }

#transferHistory {
    float: left;
    max-width: 400px;
}

#editTransfer {
    float: left;
    max-width: 460px;
    width: 100%;
}

/*modified*/
.formTable select,
.formTable input[type="text"], .formTable input[type="number"], .formTable input[type="tel"], .formTable input[type="email"],
.formTable input[type="reset"], .formTable input[type="password"], .tileTable input[type="text"] {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    border: 1px solid rgba(0,0,0,0.26);
    font-size: 14px;
    height: 34px; /*added*/
    margin: 7px 0 7px 0; /*added*/
}

input[type="submit"]:default {
    background: var(--primarycolor) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0,0,0,0.26);
    height: 36px;
    margin-right: 12px;
    color: #ffffff;
    letter-spacing: 0px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
    font-size: 16px;
    font-weight: bold;
}

input[type="submit"]:disabled {
    opacity: .3;
}

.secondaryBtn, input[type="submit"] {
    background: var(--thirdcolor) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0,0,0,0.26);
    height: 36px;
    margin-right: 12px;
    color: #ffffff;
    letter-spacing: 0px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
    font-size: 16px;
    font-weight: bold;
    min-width: 70px;
    border-radius: 18px;
}

.formTable input[type="checkbox"] {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
    opacity: 1;
    width: 18px;
    height: 18px;
}

.formLabelColumn {
    font-size: 14px;
    opacity: 0.87;
}

td.moduleFormSubmitCell, .formTable td.moduleFormSubmitCell {
    text-align: right;
}

.siteMenuLogo {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 8px;
    height: 32px;
    background-image: var(--mobilelogourl);
    background-size: 150px;
    background-repeat: no-repeat;
    background-size: contain;
}

.siteMenuContainer {
    position: relative;
    height: 48px;
    background-color: var(--primarycolor);
}

@media only screen and (min-width: 1024px) {
    .siteMenuContainer {
        position: relative;
        height: 40px;
        background-color: black;
        background-image: none;
    }
}


.menusvg {
    width: 25px;
    height: 25px;
    fill: white;
}

.siteMenuSvg {
    width: 20px;
    height: 20px;
    fill: white;
    vertical-align: middle;
}

.menuLink {
    color: var(--thirdcolor);
    font-size: 14px;
}

.menu li {
    text-align: center;
}

.mailCount {
    color: white;
    background-color: rgba(255, 255, 255, 0.4);
    height: 22px;
    border-radius: 12px;
    padding-left: 3px;
    padding-right: 3px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.infoMessageIcon:after {
    color: rgba(0, 0, 0, 0.54) !important;
    font-size: 14px;
}

.altcolor tr {
    height: 52px;
}

.contentModule {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.17);
    opacity: 1;
}

.overviewTable {
    margin-left: 16px;
    margin-right: 16px;
    width: -webkit-fill-available;
    text-align: left;
    font-size: .75em;
  }

.overviewModuleContainer {
    display: flex;
    flex-direction: column;
}

.preferenceModuleContainer {
    display: inline-block;
}

.columnOptions {
    column-count: 2;
    -webkit-column-count: 2;
}

.prefoptions {
    padding: 4px;
}

#VBNPreferencesGroup .moduleSubHeader {
    border-bottom: 1px solid #E0E0E0;
    opacity: 1;
    margin-bottom: 16px;
}

.preferencesTable {
    text-align: left;
    font: normal normal normal 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 1);
}

.prefFixedLabel {
    width: 140px;
}

.prefFixedValue {
    width: 260px;
    height: 32px;
}

.colJustifyModuleDescription {
    height: 48px;
    width: -webkit-fill-available;
}

.colJustifyItalicModuleDescription {
    height: 48px;
    width: -webkit-fill-available;
    text-align: left;
    font: italic normal normal 16px 'Open Sans' !important;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
}

.colJustifyCurrency {
    text-align: left;
}

.colJustifyItalicCurrency {
    text-align: left;
    font: Italic normal normal 16px 'Open Sans' !important;
}

.colJustifyItalicDefault {
    font: Italic normal normal 16px 'Open Sans' !important;
    text-align: left;
}

.date-as-calendar {
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    font-family: 'Open Sans';
    vertical-align: top;
    color: Black;
    border: 1px solid #888;
    border-radius: 3px;
    overflow: hidden;
}

    .date-as-calendar .day,
    .date-as-calendar .month {
        text-align: center;
        line-height: 1.0;
    }

    .date-as-calendar .month {
        font-family: 'Open Sans';
        text-transform: uppercase;
        background: #B11;
        background: rgba(112, 112, 112, 0.12);
        color: Black;
    }

.position-pixels.date-as-calendar {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 40px;
    border: 1px solid rgba(112, 112, 112, 0.12);
    padding: 0px;
}

    .position-pixels.date-as-calendar .day,
    .position-pixels.date-as-calendar .month {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 1em;
    }

    .position-pixels.date-as-calendar .month {
        top: 0px;
        font-size: 11px;
        padding: 2px 0;
    }

    .position-pixels.date-as-calendar .day {
        top: 20px;
        font-size: 1.25em;
    }

.creditborder {
    border-left: 4px solid var(--primarycolor) !important;
    font-weight: 600 !important;
    height: 40px;
}

.qtBoby {
    padding: 0;
}

/*VBN2 - ENDED*/

.header.headerMobile.mobileAlwaysShow {
    display: block;
    background-image: var(--mobilelogourl);
    list-style-image: var(--mobilelogourl);
    height: 40px;
}

@media all and (min-width: 768px) {
    .header.headerMobile.mobileAlwaysShow {
        display: none;
    }

    .header.headerMobile {
        display: none;
        height: 0;
    }

    .header.headerDesktop {
        background-color: White;
        display: block;
        height: 115px; /*Updated from 95*/
        border-top: 4px solid var(--primarycolor);
        background-image: var(--logourl);
        list-style-image: var(--logourl);
    }

    #MenuLogo {
        display: none;
        height: 95px;
        width: 165px;
        margin-top: 5px;
        margin-right: 30px;
        padding-right: 30px;
        border-right: solid 1px white;
        background-size: 165px;
        height: 40px;
        background-repeat: no-repeat;
        background-image: var(--mobilelogourl);
        background-size: contain;
    }

    #OverviewColumns > div {
        margin-left: 24px;
    }

    .qtBoby {
        padding: 1.5rem;
    }
}

.siteMenu /* new-style menu normally in the header, with icons for chat/mail/logoff */ {
    color: var(--thirdcolor);
}

    .siteMenu > li {
        padding-right: 30px;
    }

        .siteMenu > li > a, .siteMenu > li > a > span {
            font-size: 14px;
            color: white;
        }

.userInitials {
    background-color: rgba(255, 255, 255, 0.4);
    margin-right: 5px;
    padding-left: 3px;
    padding-right: 3px;
}

.userName {
}

/*VBN5 - Modified Added*/
.siteSubMenu {
    border-bottom: 1px solid black;
    right: -2em;
    color: #FFFFFF !important;
    top: 0px;
    width: 234px;
    border: 1px solid #FFFFFF4D;
    box-shadow: 0px 8px 8px #00000042;
    opacity: 1;
    background-color: var(--fallback-dark-gray-alt-1-333333-);
    padding: .2em;
}

.siteSubMenuContainer {
    z-index: 300;
}

.siteSubMenu > li {
    background-color: #333333;
    color: var(--light-white-100-) !important;
}

.siteSubMenu a {
    color: white !important;
}

.siteSubMenu > li > a {
    color: whitesmoke !important;
    text-decoration: none;
    padding: .5em;
    font-size: 14Px;
}

.siteSubMenu > li:hover {
    font-size: 14px;
    background: #919191;
    border-left: 4px solid var(--primarycolor);
}

    .siteSubMenu > li:hover > a {
        background-color: #919191;
        color: var(--light-white-100-);
    }
/*VBN5 - Modified End*/

/* Common Notifications after login */
.systemMessage {
}

.emailChange {
    font-size: 12px;
    line-height: 1.5em;
    text-align: right;
    right: .25em;
}

.bulletin {
    font-size: 20px;
    line-height: 1.25em;
    text-align: center;
    cursor: pointer;
}

/* Page font & color */
body {
}

.content {
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Menu style */
.mobileMenu {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #e6e6e6;
    display: flex;
    z-index: 100;
    box-shadow: 0px 6px 12px rgba(0,0,0,.54);
}

.mobileMenusvg {
    width: 25px;
    height: 25px;
    fill: rgba(0, 0, 0, 0.54);
}

.mobileMenu > ul {
    list-style: none;
    display: flex;
    padding: 5px;
    margin: 0;
}

    .mobileMenu > ul > li {
        margin: 0;
        font-size: 14px;
        display: flex;
        text-align: center;
    }

.mobileMenuItem {
    padding: 5px;
}

.mobileMenuSelected {
    border-bottom: 2px solid var(--primarycolor);
}

    .mobileMenuSelected > a {
        font-weight: 700 !important;
    }


.mobileMenuItem > a {
    font-weight: 400;
    width: 60px;
}

.mobileSlideMenu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 250px;
    background-color: white;
    z-index: 100;
    box-shadow: 0px 6px 12px rgba(0,0,0,.54);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    max-width: 340px;
    overflow: hidden;
}

    .mobileSlideMenu > ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        margin: 0;
    }

        .mobileSlideMenu > ul > li {
            margin: 0;
            font-size: 14px;
            display: flex;
            text-align: center;
        }

#MobileSlideMenuOverlay {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    background: black;
    z-index: 99;
    opacity: .6;
    filter: alpha(opacity=60);
}



.mobileMenuText {
    font-size: 1.25em;
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    margin-right: .3em;
}

.mobileMenuIcon:after /* menu text or image or hacked hamburger*/ {
    /*content: "\2261\2261";*/ /*Arial, Helvetica, and Roboto all have different glyphs */
    content: ""; /* http://www.alwaystwisted.com/post.php?s=2012-05-12-create-a-pure-css-menu-button */
    position: absolute;
    top: .1em;
    left: 0;
    width: .85em;
    height: .166em;
    border-top-width: .5em;
    border-top-style: double;
    border-bottom-width: .175em;
    border-bottom-style: solid;
}

.mobileMenuIcon {
    font-size: 1.875em;
    line-height: .666em;
    vertical-align: top;
    position: relative;
    padding-right: .2em;
    width: .85em;
}
/* Change "Menu" In Branding: STR_MOBILE_MENU_TEXT */
.toggleState0 .mobileMenuText:before {
    content: "Show ";
}

.toggleState1 .mobileMenuText:before {
    content: "Hide ";
}

.nav /* nav is the class of the DIV surrounding the menu items, at ALL menu levels */ {
    padding-left: .5em;
    padding-right: .5em;
}

.menu /* menu is the class of the top-level menu UL */ {
    margin: 0;
    padding: 0;
    text-shadow: 1px 1px 1px #00000052;
}

    .menu > li {
        width: 125px;
        margin: 0;
        vertical-align: middle;
        line-height: normal;
        font-family: 'Open Sans';
        font-weight: bold;
        font-size: 16px;
    }


        .menu > li > a {
            line-height: 1em;
            padding-top: .2em;
            padding-bottom: .2em;
            margin: 0;
            color: #FFFFFF;
        }
            .menu > li > a > i {
                color: #FFFFFF;
            }
            .menu > li > a.menuMobileExpander:before {
                content: none; /* needed for centering */
            }

            .menu > li > a.menuMobileExpander:after {
                content: "+";
            }

            .menu > li > a.menuMobileExpander.toggleState1:after {
                content: "-";
            }

.menuSelected > a {
    font-weight: bold !important;
}

.menuSelected > hr {
    border: 2px solid #FFFFFF;
    width: 60%;
    background: none;
    height: 0px;
}

.menuNotSelected > a {
    font-weight: 500 !important;
}

.menuNotSelected > hr {
    border: 2px solid transparent;
    background: none;
}

.subMenu /* subMenu is the class of the top-level menu UL */ {
    margin: 0;
    padding: 0;
    text-align: left;
}

    .subMenu > li {
        list-style: none;
        line-height: 1.5em;
        margin: .2em 0 0 0;
        padding: 0;
        padding-left: 10px;
    }

        .subMenu > li > a {
            line-height: 1em;
            padding-top: .2em;
            padding-bottom: .2em;
            border-width: .1em;
            border-style: solid;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgba(255, 255, 255, 1);
        }

            .subMenu > li > a.menuMobileExpander:before {
                content: none; /* needed for centering */
            }

            .subMenu > li > a.menuMobileExpander:after {
                content: "+";
            }

            .subMenu > li > a.menuMobileExpander.toggleState1:after {
                content: "-";
            }

.sectionMenu /* sectionMenu is the class of the top-level menu UL */ {
    margin: 0;
    padding: 0;
}

    .sectionMenu > li {
        list-style: none;
        line-height: 1.5em;
        margin: .2em 0 0 0;
        padding: 0;
        padding-left: 30px;
        font-size: .75em;
    }

        .sectionMenu > li > a {
            line-height: 1em;
            padding-top: .2em;
            padding-bottom: .2em;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgba(255, 255, 255, 1);
        }


/* Error, Display, and Confirmation Messages */
.moduleErrorMessage {
    border-width: 2px;
    border-style: solid;
    border-top-width: 0;
    border-bottom-width: 0;
}

.errorMessageScheduleTransfer {
    margin: 1rem 0 1rem 1.5rem
}

.errorMessage, .moduleErrorMessage, .validation-summary-errors {
    padding: .25em;
    padding-left: 24px; /* make room for the icon, plus some extra space */
    vertical-align: middle;
    position: relative;
}

    .errorMessage:before, .moduleErrorMessage:before, .validation-summary-errors:before {
        position: absolute;
        content: url('/Content/gifs/error.png')'\00a0';
        left: 2px;
        top: 40%; /* graceful fallback */
        top: calc(50% - 5px); /* 5px LOOKS like it centers, because image is bottom-heavy */
        width: 20px;
        height: 19px;
        margin-top: -.25em;
        vertical-align: middle;
    }

.contentModule > .confirmationMessage {
    padding: .25em;
    border-width: 2px;
    border-style: solid;
    border-top-width: 0;
    border-bottom-width: 0;
}

.displayMessage {
    padding: .25em;
    padding-left: 24px;
    vertical-align: middle;
}

.displayMsg .displayMessage:before {
    left: 2px;
}

.displayMessage:before {
    position: absolute;
    content: url('/Content/gifs/ok.png')'\00a0';
    top: 40%; /* graceful fallback */
    top: calc(50% - 6px); /* 6px LOOKS like it centers */
    width: 20px;
    height: 19px;
    margin-top: -.25em;
    vertical-align: middle;
}

#dispMessage:before {
    left: 0px;
}

.overviewMessage {
    font-size: .75em;
    padding: .5em;
    margin: 1em;
    border-width: 1px;
    border-style: solid;
}

.importantMessageText {
    text-align: left;
    font: normal normal normal 14px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
}

.importantMessage {
    font-size: 1em;
    padding: .5em;
    background: rgba(255, 255, 255, 1) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    opacity: 1;
    border-left: 4px solid var(--thirdcolor);
    margin-left: 48px;
    margin-right: 48px;
    width: -webkit-fill-available;
    display: inline-flex;
}

.importantMessageIcon {
    height: 1.25em;
    line-height: 1.25em;
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    .importantMessageIcon.toggleState0 {
        height: 1.25em;
        opacity: 1;
    }

    .importantMessageIcon.toggleState1 {
        height: 0;
        opacity: 0;
    }


/* Modules */
/*VBN modified*/
.prefModule {
    float: left;
    width: 420px;
    break-inside: avoid-column;
    padding-top: 16px;
    margin-left: 32px;
    margin-right: 24px;
   }

.overviewModule {
    float: left;
    width: 100%;
    max-width: 460px;
    break-inside: avoid-column;
    padding-top: 16px;
    break-inside: avoid;
}

.historyModule {
    float: left;
    max-width: 460px;
    break-inside: avoid-column;
    padding-left: 24px;
    padding-right: 24px;
    width:100%;
}

.overviewModuleFullWidth {
    float: left;
    width: 100%;
}

.moduleSubHeader {
    padding: .75em;
    border-top-width: 1px;
    border-bottom-width: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: left;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
}
/*VBN modified*/
.moduleHeader {
    padding: .75em;
    border-top-width: 1px;
    border-bottom-width: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: left;
    font: normal normal 24px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
}

.moduleHeaderLink {
    text-align: right;
    padding: 0 .5em .5em .5em;
    margin-top: -.5em;
    font-size: .8em;
    line-height: 1.5em;
    border-style: solid;
    border-left-width: 2px;
    border-right-width: 2px;
}

/*VBN modified*/
.moduleMessage, .moduleBody {
    padding: .25em;
    border-top-width: 0;
    border-bottom-width: 0;
    word-wrap: break-word;
}
/*VBN modified*/
.moduleFooter {
    text-align: right;
    padding: .25em;
    border-top-width: 0;
    border-bottom-width: 1px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    word-wrap: break-word;
}

.moduleLoading {
    font-style: italic;
    border-style: solid;
    border-top-width: 0;
    border-bottom-width: 0;
}

    .moduleLoading img {
        width: 40px;
        vertical-align: middle;
    }

.moduleFooter .selectLinks /* for the module #ModuleEStatements */ {
    font-size: 1em;
}

.colJustifyAlertsNoticesFooters {
}


/* Sections */
/*VBN modified*/
.sectionHeader {
    display: inline-block !important;
    font-size: 1.5em !important;
    padding-bottom: .5em;
    font-weight: normal !important;
    padding-left: 10px;
    padding-top: 24px;
}

.logincontainer > div > div > .sectionHeader {
    padding-left: 0px;
}

.sectionHeaderLeft {
    float: left;
}

/* VBN modified*/
.sectionHeaderLink {
    text-align: right;
    padding: 0 .5em .5em .5em;
    margin-top: 0.5em;
    font-size: 1em;
    line-height: 1.5em;
    display: inline;
    float: right;
}

.infoIconHeaderLink {
    display: inline;
    float: right;
    font-size: 1.25em;
}

.sectionLoading {
    font-style: italic;
}

    .sectionLoading img {
        width: 40px;
        vertical-align: middle;
    }

.sectionMessage,
.sectionBody,
.sectionFooter {
    padding-bottom: .5em;
    word-wrap: break-word;
}

.footerTop {
    width: 100%;
    min-height: 139px;
    background: rgba(0, 0, 0, 0.79);
    display:inline-block;
}

.footerAdv {
    width: 380px;
    height: 120px;
    margin: 8px;
    overflow: auto;
    float: left;
}

.footerTopLinks {
    max-width: 400px;
    float: right;
    margin: 8px;
}

ul.footerTopLinks {
    margin: 0;
    height: 100%;
    text-align: right;
    column-count: 2;
}

.footerTopLinks li {
    display: inline-block;
    padding: 20px;
    width: 100%;
    text-align: left;
}

    .footerTopLinks li a {
        margin-left: .4em;
        margin-right: .4em;
        color: #FFFFFF;
    }

.footerLinks {
    width: 100%;
    float: right;
}

.spacer {
    height: 65px;
    width: 100%;
    display: flex;
}

.footerTable {
    padding-right: 20px;
    text-align: left;
    font-size: 14px;
}

    .footerTable td, .footerTable td b {
        color: rgba(255, 255, 255, 1);
    }

.contentLoading {
    font-style: italic;
}

    .contentLoading img {
        width: 40px;
        vertical-align: middle;
    }


/* Tables */
.refreshingTable {
    background-image: url('/Content/gifs/loading_snake.gif');
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

.colJustifyAlertsNoticesFooters {
}

.formTable td.formSectionHeader {
    padding-top: 1em;
    font-weight: bold;
}

.formHint, .formTable td.formHint {
    font-size: .75em;
    font-style: italic;
    padding-bottom: 1em;
}

/*VBN Modified*/
.infoMessage, td.infoMessage {
    padding-top: .75em;
    padding-bottom: 1em;
    line-height: 1.2em;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    font-style: normal;
}



/* Tiles */
.tileHeader {
    margin-bottom: .25em;
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
    padding-left: .5em;
    padding-right: .5em;
    border-radius: 5px;
}

    .tileHeader:hover {
        margin-left: .5em;
        margin-right: .5em;
        padding-left: 0;
        padding-right: 0;
    }

.tileMessage {
}

.tileHeaderTable td {
    vertical-align: middle;
    padding: .35em;
}

.tileHeaderExpandCell {
    width: 1em;
    font-size: 2em;
    text-align: center;
    border-right: 2px white solid;
}

.tileHeaderTitleCell {
    word-wrap: break-word;
    font-size: 1.5em;
    line-height: 1.1em;
}

.tile {
    margin-bottom: .25em;
    cursor: pointer;
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 5px;
}

    .tile:hover {
        margin-left: 1.5em;
        margin-right: 1.5em;
        padding-left: .5em;
        padding-right: .5em;
    }
/*VBN modified*/
.tileTable {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.17);
    opacity: 1;
    border-left: 5px solid var(--primarycolor);
}

    .tileTable td {
        padding-top: .3em;
        padding-right: .5em;
        padding-bottom: .3em;
        padding-left: .5em;
        font-size: 1em;
    }
/*VBN Modified*/
span.tileLabel {
    font-size: 18px;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.87);
    opacity: 1;
    font: normal normal 600 18px 'Open Sans';
}
/* if you change the font size of a td, it will mess up alignment on hover in Chrome */
/* if you add a span to the td and change the font size, alignment won't break */
span.tileBalanceCell {
    font-size: 1.1em;
}

span.tileBalanceCell, div.tileHeader td.colJustifyTileValue {
    white-space: nowrap;
}

.tileDropDown {
    width: 80%;
    font-size: 1em;
    border-width: .125em;
    border-style: solid;
    border-radius: .2em;
}

.refreshingTile {
    background-image: url('/Content/gifs/loading_snake.gif');
    background-repeat: no-repeat no-repeat;
    background-position: center 3em;
    background-repeat: no-repeat repeat;
}

/* Tile Animation */
/* States:
	 1. PreIntro
	 2. PostIntro
	 3. PreOutro
	 4. PostOutro
	 Tile & Table have a base state and start as "base + PreIntro". Then they animate to "base + PostIntro". After "base + PostOutro", "PostOutro" will be removed and only "base" will remain..
*/
.tileListPreIntro {
    height: 0;
    overflow: hidden;
    position: static;
    visibility: visible;
}

.tileListPostIntro {
    height: auto;
    position: static;
    visibility: visible;
    overflow: visible;
}

.tileListPreOutro {
    height: auto;
    position: static;
    visibility: visible;
}

.tileListPostOutro {
    height: 0;
    overflow: hidden;
    position: static;
    visibility: visible;
}

.tilePreIntro {
    margin-left: 2em;
    margin-right: 2em;
    padding-left: 0;
    padding-right: 0;
}
/*VBN Modified */
.tilePostIntro {
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 12px
}

.tilePreOutro {
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.tilePostOutro {
    margin-left: 2em;
    margin-right: 2em;
    padding-left: 0;
    padding-right: 0;
}

.printTile {
    border-collapse: separate;
    padding: .5em 0;
    border-top: 3px solid rgb(237, 237, 237);
    border-bottom: 3px solid rgb(237, 237, 237);
    font-size: .9em;
}

.printTileLabel {
    font-weight: bold;
}

.printTileValue {
}


/* specific element stylings */
table#wit270_BillPayAlerts .formValueColumn,
table#wit316_AccountAlerts .formValueColumn,
table#wit408_GeneralAlerts .formValueColumn,
table#wit412_TransferAlerts .formValueColumn {
    text-align: right;
}

#wxm376_PaymentCalendar {
    background-color: rgb(224, 224, 224);
    border: 1px solid rgb(224, 224, 224);
    margin-top: .5em;
}

#wxm376_PaymentCalendar_NavHeader td {
    padding: .25em;
    color: rgb(51, 51, 51);
    font-weight: bold;
}

#wxm376_PaymentCalendar_DayHeader td {
    padding: .25em;
    color: rgb(51, 51, 51);
    text-align: center;
    font-weight: bold;
}

.wxm376_PaymentCalendar_Days td {
    height: 8em;
    font-size: .8em;
    vertical-align: top;
    border: 1px solid rgb(192, 192, 192);
    border-right-width: 0;
    border-bottom-width: 0;
}

    .wxm376_PaymentCalendar_Days td:last-child {
        border-right-width: 1px;
    }

.wxm376_PaymentCalendar_Days:last-child td {
    border-bottom-width: 1px;
}

.wxm376_PaymentCalendar_DateDefault {
    background-color: white;
}

.wxm376_PaymentCalendar_DatePaymentAccountName a:link,
.wxm376_PaymentCalendar_DatePaymentAccountName a:active,
.wxm376_PaymentCalendar_DatePaymentAccountName a:visited {
    text-decoration: none;
    color: black;
}

.wxm376_PaymentCalendar_DatePaymentAccountName a, .wxm376_PaymentCalendar_DatePaymentAccountAmount a {
    font-weight: bold;
}

.wxm376_PaymentCalendar_DatePayment {
    font-size: .8em;
}

    .wxm376_PaymentCalendar_DatePayment:hover {
        background-color: rgb(224, 224, 224);
    }

.wxm376_PaymentCalendar_DatePaymentInfo.pop-info {
    width: 340px;
    position: absolute;
    z-index: 1;
    padding: 20px;
    background-color: white;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(224, 224, 224);
    border-radius: 20px;
}

    .wxm376_PaymentCalendar_DatePaymentInfo.pop-info > div {
        padding: .25em;
    }

        .wxm376_PaymentCalendar_DatePaymentInfo.pop-info > div:nth-child(odd) {
            background-color: rgb(244, 244, 244);
        }

#ModuleEStatements .moduleMessage {
    font-size: 1.25em;
}

#AccountHistoryPager > .interactiveLink, #AccountHistoryPager > .noninteractiveText {
    margin-top: .5em;
}

#HistorySearch {
    font-size: .75em;
}

#wit272_AlertHistoryDetail_Subject {
    margin-top: 2em;
}

#wit272_AlertHistoryDetail_Message {
    margin-top: 1em;
}

td#wld554_QuickPaymentLimit {
    padding: 0;
}

/* The following pages use tiles for style/layout, but shouldn't indicate that they are interactive tiles */
/* wld035, wld039, wbp169, wld554, wbp556, wld558, RichAccountHistory */
.noninteractiveContentTile .tileHeader, .noninteractiveContentTile .tile {
    cursor: inherit;
}

.noninteractiveContentTile .tileHeaderTitleCell {
    font-size: 1em;
    height: 2em;
}

    .noninteractiveContentTile .tileHeaderTitleCell .tileDropDown {
        font-size: 1em;
        min-width: inherit;
        /* if dropdown is too long and wraps to its own line: */
        margin-top: .1em;
        margin-bottom: .1em;
    }

.noninteractiveContentTile .tileHeader:hover {
    margin-left: 0;
    margin-right: 0;
    padding-left: .5em;
    padding-right: .5em;
}

.noninteractiveContentTile .tile:hover {
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

#wld035_BillPaymentTilePaymentLimits,
#wld039_BillPaymentTilePaymentLimits,
#wbp169_BillPaymentTilePaymentLimits,
#wld554_BillPaymentTilePaymentLimits,
#wbp556_BillPaymentTilePaymentLimits,
#wld558_BillPaymentTilePaymentLimits {
    text-align: right;
}

.wld554_BillPaymentTilePaymentLimits td:first-child,
.wbp556_BillPaymentTilePaymentLimits td:first-child {
    /* copied from .minWidthShrunkColumn */
    width: 1px;
    white-space: nowrap;
}

#QuickTransferModule .moduleFormTable select.dropdown,
#RichQuickTransferModule .moduleFormTable select.dropdown,
#BankingQuickTransferModule .moduleFormTable select.dropdown,
#ModuleEStatements .moduleFormTable select.dropdown,
.paymentTileTable .paymentFieldValue select.dropdown,
#ComposeMessage_Table select.dropdown {
    width: 100%;
}

#AccountActionLinksPadding .twoColumn > li {
    display: none;
}

    #AccountActionLinksPadding .twoColumn > li#RAH_ExportTransactions,
    #AccountActionLinksPadding .twoColumn > li#RAH_PendingTransactions {
        display: list-item;
    }

#waa390_ManageA2AAccounts th, #waa390_ManageA2AAccounts td {
    word-break: break-word;
}


/* Adverts */
#BrandingAdvertTable {
    width: 100%;
    border-width: 0;
    padding: 0;
    margin: 0;
}

    #BrandingAdvertTable > tbody > tr > td {
        text-align: center;
    }

iframe.AdvertStyle /* copied from legacy */ {
    width: 416px;
    height: 238px;
    border: 0 none;
}

iframe.MarketAdvertStyle, iframe.XSellAdvertStyle {
    width: 160px;
    height: 300px;
    display: block;
    margin: 0 auto;
    border: none;
    overflow: hidden;
}

.advertSpecialOffer {
    text-align: center;
}


/* Footer */
.footer {
    text-align: center;
    padding-bottom: 0;
    background: #000000A6;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    border-top: 4px solid var(--primarycolor);
}

.VBNFooter {
    max-height: 139px;
}

.footerMain {
    position: relative;
    max-width: 600px;
    float: left;
    max-height: 128px;
    padding-top: 10px;
    margin-bottom: 10px;
}

.footerLogo {
    width: 165px;
    height: 35px;
    background-size: cover;
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    background-image: var(--mobilelogourl);
    background-size: contain;
    background-repeat: no-repeat;
}

.footerAddress {
    color: rgba(255, 255, 255, 1);
    width: 200px;
    float: left;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 1);
    text-align: left;
}

.footerText {
    color: rgba(255, 255, 255, 1);
    float: left;
    max-width: 500px;
    text-align: left;
    padding: 20px;
    overflow:hidden;
}

.svgFooter {
    fill:white;
    height:24px;
    width:48px;
    vertical-align:middle;
}
.footerNCUA {
    float: left;
    width: 500px;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color: white;
    display: none !important;
}

.footerEHL {
    float: left;
    width: 500px;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
    color:white;
    display:none !important;
}

@media only screen and (max-width: 380px) {
    .footerEHL {
        width: 300px;
    }

    .footerNCUA {
        width: 300px;
    }
}

ul.aboutLinks {
    margin: 0;
    max-height: 90px;
    text-align: left;
}

.aboutLinks li {
    display: inline-block;
    padding: 15px;
}

    .aboutLinks li a, .aboutLinks li a i {
        margin-left: .4em;
        margin-right: .4em;
        color: #FFFFFF;
    }

#footerOtherLinks {
    text-align: center;
    float:left;
}

.cuInfo {
    text-align: center;
    margin-top: 1em;
}

    .cuInfo > div {
        margin-top: .3em;
    }

.cuName {
    font-weight: bold;
}

.disclaimer {
    display: inline-block;
}

    .disclaimer > div {
        width: 60%;
        display: inline-table;
        vertical-align: top;
    }

    .disclaimer:after {
        content: url('/Content/gifs/ncualogo_disclaimer.png') url('/Content/gifs/ehllogo_disclaimer.png');
    }

.copyright {
    font-size: .7em;
    text-align: right;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 20px;
    color: rgba(255, 255, 255, 1);
}

.siteBestViewed {
    font-size: .7em;
    text-align: left;
    padding-top: 1em;
    padding-bottom: 1em;
}

.timeoutCountMinutes, .timeoutCountSeconds {
    font-weight: bold;
    color: red;
}

#wld033_SS_Message_Alert > .contentPadding > .contentGroupSpacer,
#wld033_SS_Personal_Security > .contentPadding > .contentGroupSpacer,
#wld033_SS_Statement_MemberReq > .contentPadding > .contentGroupSpacer {
    height: 1em;
    padding: .25em; /* match .contentSpacer */
}

#wld033_SS_Message_Alert + .contentSpacer,
#wld033_SS_Personal_Security + .contentSpacer {
    height: 1em;
}

.showOnMobile div.formValueColumn select.dropdown,
.showOnMobile #RAHS_AccountHistorySearch #Mobile_Description,
.showOnMobile #wbp017_PaymentHistorySearchByDetails select.dropdown,
.showOnMobile #wem146_ResearchPaymentRequest select#purpose,
#wit317_AddCheckDraftAlertsGroup select.dropdown,
.showOnMobile #wit532_ACHStopPayment #Mobile_OriginatingCompany,
.showOnMobile #wit503_ACHTransferIn input.longText,
.showOnMobile #wit505_ACHTransferOut input.longText,
.showOnMobile #wit536_CreditCardBalanceTransfer input.longText,
.showOnMobile #wit481_DomesticWire input.longText,
.showOnMobile #wit489_InternationalWire input.longText,
.showOnMobile #wit501_AdditionalMemberAdd input.longText, .showOnMobile #wit501_AdditionalMemberDelete input.longText,
.showOnMobile #wit413_ScheduleReminder input.longText,
.showOnMobile#IAEditQuestions_Mobile select.dropdown, .showOnMobile#IAEditQuestions_Mobile input.longText {
    width: 100%;
}

.showOnMobile #whb195_StatementReprint div.formValueColumn select#Mobile_month, .showOnMobile #whb195_StatementReprint div.formValueColumn select#Mobile_year,
.showOnMobile #whb196_LoanApplication div.formValueColumn select#SSACCTNO,
.showOnMobile #wit194_CheckReorder div.formValueColumn select.dropdown,
.showOnMobile #whb211_CheckReorderHarland select#Mobile_SelectedAccountId {
    width: auto;
}

.showOnMobile #wbp020_MerchantAccountDetail .formValueColumn,
.showOnMobile #wbp022_NewMerchant .formValueColumn,
.showOnMobile #wbp023_NewMerchant .formValueColumn,
.showOnMobile #wit313_UserPreferences .formValueColumn,
.showOnMobile #wit549_UserPreferences .formValueColumn,
.showOnMobile #wit550_UserPreferences .formValueColumn,
.showOnMobile #whb425_SearchAccountHistory .formValueColumn,
.showOnMobile #whb060_SearchByTransferDetails .formValueColumn,
.showOnMobile #whb060_SearchByConfirmationNumber .formValueColumn,
.showOnMobile #waa398_ScheduleA2ATransfer .formValueColumn,
.showOnMobile #wit094_AccountDetails .formValueColumn,
.showOnMobile #RAHS_AccountHistorySearch .formValueColumn,
.showOnMobile #whb057_TransferDetail .formValueColumn,
.showOnMobile #wbp012_PaymentDetail .formValueColumn,
.showOnMobile #wbp017_PaymentHistorySearchByDetails .formValueColumn,
.showOnMobile #ChangePassword_Mobile .formValueColumn,
.showOnMobile #wem146_ResearchPaymentRequest .formValueColumn,
.showOnMobile #wit293_AccountDetails .formValueColumn,
.showOnMobile #waa392_AddA2AAccount_AccountDetails .formValueColumn,
.showOnMobile #wit532_ACHStopPayment .formValueColumn,
.showOnMobile #wit503_ACHTransferIn .formValueColumn,
.showOnMobile #wit505_ACHTransferOut .formValueColumn,
.showOnMobile #wit534_CertificateDepositApp .formValueColumn,
.showOnMobile #wit190_CheckStopPay .formValueColumn,
.showOnMobile #wit536_CreditCardBalanceTransfer .formValueColumn,
.showOnMobile #wit481_DomesticWire .formValueColumn,
.showOnMobile #wit489_InternationalWire .formValueColumn,
.showOnMobile #whb195_StatementReprint .formValueColumn,
.showOnMobile #whb196_LoanApplication .formValueColumn,
.showOnMobile #wit194_CheckReorder .formValueColumn,
.showOnMobile #whb211_CheckReorderHarland .formValueColumn,
.showOnMobile #wit193_CheckCopy .formValueColumn,
.showOnMobile #wit537_CrossMemberAccess .formValueColumn,
.showOnMobile #wit413_ScheduleReminder .formValueColumn {
    text-align: right;
}

.showOnMobile #wbp020_MerchantAccountDetail .formLabelColumn input[type="checkbox"],
.showOnMobile #wbp022_NewMerchant .formLabelColumn input[type="checkbox"],
.showOnMobile #wbp023_NewMerchant .formLabelColumn input[type="checkbox"],
.showOnMobile #wit313_Preferences .formLabelColumn input[type="checkbox"],
.showOnMobile #wit549_UserPreferences .formLabelColumn input[type="checkbox"],
.showOnMobile #wit550_UserPreferences .formLabelColumn input[type="checkbox"],
.showOnMobile #whb425_SearchAccountHistory .formLabelColumn input[type="checkbox"],
.showOnMobile #wit094_AccountDetails .formLabelColumn input[type="checkbox"],
.showOnMobile #wit293_AccountDetails .formLabelColumn input[type="checkbox"] {
    float: right;
}

.showOnMobile #wem146_ResearchPaymentRequest textarea.largeArea,
.showOnMobile #wit532_ACHStopPayment #Mobile_OriginatingCompany,
.showOnMobile #wit503_ACHTransferIn input.longText, .showOnMobile #wit503_ACHTransferIn textarea.largeArea,
.showOnMobile #wit505_ACHTransferOut input.longText, .showOnMobile #wit505_ACHTransferOut textarea.largeArea,
.showOnMobile #wit536_CreditCardBalanceTransfer input.longText, .showOnMobile #wit536_CreditCardBalanceTransfer textarea.largeArea,
.showOnMobile #wit481_DomesticWire input.longText, .showOnMobile #wit481_DomesticWire textarea.largeArea,
.showOnMobile #wit489_InternationalWire input.longText, .showOnMobile #wit489_InternationalWire textarea.largeArea,
.showOnMobile #wit501_AdditionalMemberAdd input.longText, .showOnMobile #wit501_AdditionalMemberDelete input.longText,
.showOnMobile #wit537_CrossMemberAccess textarea.largeArea,
.showOnMobile #wit413_ScheduleReminder input.longText, .showOnMobile #wit413_ScheduleReminder textarea.largeArea,
.showOnMobile#IAEditQuestions_Mobile input.longText {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#waa391_AddAccount .formValueColumn.showOnMobile img {
    padding-top: 1em;
}

.showOnMobile div#wit536_CreditCardBalanceTransfer_PromoCode {
    padding-top: 0;
}

@media only screen and (max-width: 380px) {
    #waa391_AddAccount .formValueColumn.showOnMobile img {
        width: 100%;
    }
}
/* Preferences */
fieldset.preferences#wit313_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn,
fieldset.preferences#wit549_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn {
    width: auto;
    white-space: normal;
}

fieldset.preferences#wit313_UserPreferences_OverviewModules ul,
fieldset.preferences#wit549_UserPreferences_OverviewModules ul,
fieldset.preferences#wit550_UserPreferences_OverviewModules ul {
    margin: 0;
    padding: 0;
}

fieldset.preferences#wit313_UserPreferences_OverviewModules li,
fieldset.preferences#wit549_UserPreferences_OverviewModules li,
fieldset.preferences#wit550_UserPreferences_OverviewModules li {
    list-style: none;
    float: left;
    width: 100%;
    display: inline-block;
    margin: .25em 0;
}

.showOnMobile #wit313_Preferences_OverviewAccountPages td {
    padding-top: 1em;
}

#wit313_Preferences_OverviewAccountPages #overviewAccountsMessage,
fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsMessage,
fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsMessage,
fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsMessage {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

#wit313_Preferences_OverviewAccountPages #overviewAccountsList,
fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList,
fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList,
fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList {
    width: 100%;
    display: inline-block;
    margin-right: 2em;
    padding: 0;
    vertical-align: top;
}

    #wit313_Preferences_OverviewAccountPages #overviewAccountsList li,
    fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList li,
    fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList li,
    fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList li {
        margin: .25em 0;
        list-style: none;
    }

        #wit313_Preferences_OverviewAccountPages #overviewAccountsList li select.dropdown,
        fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
        fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
        fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown {
            font-size: 1em;
            width: 100%;
        }


/* Personal Information */
.showOnMobile #wit091_UpdatePersonalInformation .formValueColumn,
.showOnMobile #wit315_UpdatePersonalInformation .formValueColumn,
.showOnMobile #wit479_UpdatePersonalInformation .formValueColumn,
.showOnMobile #wit552_UpdatePersonalInformation .formValueColumn {
    text-align: right;
}

.showOnMobile #wit091_UpdatePersonalInformation input[type="email"],
.showOnMobile #wit315_UpdatePersonalInformation input[type="email"],
.showOnMobile #wit479_UpdatePersonalInformation input[type="email"],
.showOnMobile #wit552_UpdatePersonalInformation input[type="email"] {
    width: 80%;
}

/* Responsive design sizes */
@media all and (min-width: 0px) {
    body {
    }
}

@media all and (min-width: 300px) {
    body {
    }
}

@media all and (min-width: 768px) {
    body {
    }

    .unreadCount {
        font-size: 0.458333em;
    }
}
/* VB Minimum Desktop Width is 1024px */
@media only screen and (min-width: 1024px) {

    #DesktopNav {
        display: flex;
    }

    #OverviewColumns {
        column-count: 2;
        -webkit-column-count: 2;
    }

    .sectionHeader {
        font-size: 2.25em !important;
        padding-left: 60px;
    }

    .lastLogin {
        width: 180px;
        padding-left: 20px;
        margin-left: 20px;
    }

    #HLMFmasterMainContent .sectionHeader {
        text-align: left;
    }
    /* VBN: add spacing around DIV on STS */
    #HLMFmasterMainContent > div > div.contentModule {
        padding: 20px;
        margin: 20px;
    }

    ._helpexit {
    }

    .unreadCount {
        font-size: .6875em; /* all other em sizes in this rule are based on this size (11px), not the document font size (16px) */
    }

    .nav {
        position: relative; /* so that .subMenu can position relative to .menu, ditto .sectionMenu to .subMenu */
        padding-left: 0;
        padding-right: 0;
        overflow: visible; /* desktop .subMenu needs to be drawn at top:100% of .menu, and so on */
    }

        .nav.toggleState0, .nav.toggleState1 {
            height: 80px;
        }







    .menu > li.invisibleParent {
        margin: 0;
    }

    .menu > li > a,
    .subMenu > li > a,
    .sectionMenu > li > a {
        display: inline-block;
        padding: .625em;
        padding-bottom: .2em;
        float: none;
        vertical-align: baseline;
    }

        .menu > li > a:before,
        .subMenu > li > a:before,
        .sectionMenu > li > a:before {
            content: none;
        }

        .menu > li > a, .menu > li > a.menuMobileExpandable,
        .subMenu > li > a, .subMenu > li > a.menuMobileExpandable,
        .sectionMenu > li > a, .sectionMenu > li > a.menuMobileExpandable {
            width: auto;
        }

            .menu > li > a.menuMobileExpander,
            .subMenu > li > a.menuMobileExpander,
            .sectionMenu > li > a.menuMobileExpander {
                display: none;
            }

    .menu > li > .nav {
        width: 100%;
        width: calc(100% - .5em);
        position: absolute;
        z-index: 2;
        top: 100%;
        left: 0;
        padding-left: .5em;
        padding-right: 0;
    }

    .menu .nav {
        line-height: normal;
    }

    /* only show subMenu if parent menu is selected */
    .menu > li.selected > .nav {
        display: block;
    }

        .menu > li.selected > .nav > .subMenu {
            display: inline;
            font-size: .8em; /* undo .menu li font-size: 1.25em */
            text-align: left;
        }

    .subMenu > li {
        width: auto;
        margin: .2em .3em 0 0;
    }

        .subMenu > li > a {
            border: none;
            padding: 0;
            vertical-align: middle;
            overflow: visible;
        }

            .subMenu > li > a.menuMobileExpandable {
                float: none;
                margin-right: 0;
            }

    .subMenu li:after {
        content: " |";
    }

    .subMenu li:last-child:after {
        content: none;
    }

    .subMenu > li > a:after {
        content: none;
    }

    .subMenu > li > .nav {
        width: 100%;
        width: calc(100% - .5em);
        position: absolute;
        z-index: 2;
        top: 100%;
        right: 0;
        padding-left: 0;
        padding-right: .5em;
    }

    .sectionMenu {
        text-align: right;
    }

    /* only show sectionMenu if parent subMenu is selected */
    .menu > li.selected > .nav > .subMenu > li.selected > .nav {
        display: block;
    }

        .menu > li.selected > .nav > .subMenu > li.selected > .nav > .sectionMenu {
            display: block;
        }

    .sectionMenu > li {
        width: auto;
        display: inline;
        font-size: 1em; /* override the above shrink, for both links and vertical bars */
        margin: .2em .3em 0 0;
    }

        .sectionMenu > li > a {
            border: none;
            padding: 0;
            vertical-align: middle;
            overflow: visible;
        }

    .sectionMenu li:after {
        content: " |";
    }

    .sectionMenu li:last-child:after {
        content: none;
    }

    .content.paddingMenuLogin {
        padding-top: 0;
        padding-bottom: 0;
        background-color: transparent;
    }

    .content.paddingMenuLevel0, /* Level0 if the current page doesn't show up in any menu */
    .content.paddingMenuLevel1 {
        padding-top: 1em;
    }

    #EmptyMasterContent > .content.paddingMenuLevel0, /* on login pages, don't add padding */
    #EmptyMasterContent > .content.paddingMenuLevel1 {
        padding-top: 0;
        padding-bottom: 0;
    }

    .content, .content.paddingMenuLevel3 {
        padding-top: 5em;
    }

        .content.paddingMenuLevel2 {
            padding-top: 3em;
        }

        .content.contentNoPadding {
            padding-top: 0;
            padding-bottom: 0;
        }

    .tileHeader {
        margin-left: 0;
        margin-right: .5em;
        padding-left: 0;
        padding-right: 0;
    }

        .tileHeader:hover {
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: .5em;
        }

    .tileHeaderTable {
        width: 100%;
    }
    /*VBN Modified*/
    .tile {
        display: inline-block;
        margin-left: 2em;
        margin-right: 1em;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }
    /*VBN modified*/
    .contentGroup50 {
        width: 100%;
    }

    .tile:hover {
        margin-left: 2em;
        margin-right: 0;
        padding-left: 0;
        padding-right: 1em;
    }

    .tileTable {
        width: 100%;
    }
    /* States:
		 1. PreIntro
		 2. PostIntro
		 3. PreOutro
		 4. PostOutro
		 Tile & Table have a base state and start as "base + PreIntro". Then they animate to "base + PostIntro". After "base + PostOutro", "PostOutro" will be removed and only "base" will remain..
	*/
    .tileListPreIntro {
        height: 0;
        /*padding-left: 20px;*/
        overflow: hidden;
        position: static;
        visibility: visible;
    }

    .tileListPostIntro {
        height: auto;
        /*padding-left: 30px;*/
        position: static;
        visibility: visible;
        overflow: visible;
    }

    .tileListPreOutro {
        height: auto;
        /*padding-left: 30px;*/
        position: static;
        visibility: visible;
    }

    .tileListPostOutro {
        height: 0;
        /*padding-left: 20px;*/
        overflow: hidden;
        position: static;
        visibility: visible;
    }

    .tilePreIntro {
        margin-left: 1em;
        margin-right: 1em;
        padding-left: 1em;
        padding-right: 0;
    }

    .tilePostIntro {
        margin-left: 2em;
        margin-right: 1em;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 12px;
        width: 400px;
    }

    .tilePreOutro {
        margin-left: 2em;
        margin-right: 1em;
        padding-left: 0;
        padding-right: 0;
    }

    .tilePostOutro {
        margin-left: 1em;
        margin-right: 1em;
        padding-left: 1em;
        padding-right: 0;
    }

    /* specific element stylings */
    .noninteractiveContentTile .tileHeader {
        margin-right: 0;
    }

        .noninteractiveContentTile .tileHeader:hover {
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }

    .noninteractiveContentTile .tile:hover {
        margin-left: 2em;
        margin-right: 1em;
        padding-left: 0;
        padding-right: 0;
    }

    #AccountHistoryTile.tile, #AccountHistoryTile.tile:hover {
        margin-left: 1em;
        margin-right: 1em;
        padding-left: 0;
        padding-right: 0;
    }

    #ChangePasswordGroup.contentGroup100,
    #ChangeUserIdGroup.contentGroup100 {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
    }

    #wh_hbbp001_HelpGroup.contentGroup100, #wh_se005_AboutSecurityGroup.contentGroup100, #wh_se007_AboutSecurityGroup.contentGroup100,
    #wh_se008_GettingStartedGroup.contentGroup100, #wh_se009_GettingStartedGroup.contentGroup100, #wh_se010_GettingStartedGroup.contentGroup100,
    #wh_se011_GettingStartedGroup.contentGroup100, #wh_se012_GettingStartedGroup.contentGroup100, #wh_se013_ContactUsGroup,
    #whb195_StatementReprintGroup.contentGroup100,
    #whb262_EStatementSelectAccountGroup.contentGroup100 {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    #wh_se006_FAQGroup.contentGroup100 {
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }

    #wit313_Preferences td {
        padding-top: .2em;
        padding-bottom: .2em;
    }

    #wit313_Preferences_OverviewAccountPages .formLabelColumn {
        vertical-align: text-top;
    }

    #wit313_Preferences_OverviewAccountPages .formValueColumn ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #wit313_Preferences_OverviewAccountPages .formValueColumn li {
        margin-top: .25em;
    }

    #AccountActionLinksPadding .twoColumn > li {
        display: list-item;
    }

    /* Make right-hand 50% column line up vertically with left, since left-hand has a title at the top */
    #wld554_BillPayPaymentsHistoryGroup {
        margin-top: 1.875em; /* 1.25 line height + .5 padding (1.25 + .5*1.25 = 1.875) */
    }

    /* Preferences */
    fieldset.preferences#wit313_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn,
    fieldset.preferences#wit549_UserPreferences_StartPage .formLabelColumn.minWidthShrunkColumn {
        width: 1px;
        white-space: nowrap;
    }

    fieldset.preferences#wit313_UserPreferences_OverviewModules li,
    fieldset.preferences#wit549_UserPreferences_OverviewModules li,
    fieldset.preferences#wit550_UserPreferences_OverviewModules li {
        list-style: none;
        width: 40%;
    }

    #wit313_Preferences_OverviewAccountPages #overviewAccountsMessage,
    fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsMessage,
    fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsMessage,
    fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsMessage {
        width: 30%;
    }

    #wit313_Preferences_OverviewAccountPages #overviewAccountsList,
    fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList,
    fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList,
    fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList {
        width: 30%;
        margin-top: 0;
    }

        .paymentTileTable .paymentFieldValue select.dropdown,
        #wit313_Preferences_OverviewAccountPages #overviewAccountsList li select.dropdown,
        fieldset.preferences#wit313_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
        fieldset.preferences#wit549_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
        fieldset.preferences#wit550_UserPreferences_OverviewAccounts #overviewAccountsList li select.dropdown,
        #QuickTransferModule .moduleFormTable select.dropdown,
        #ModuleEStatements .moduleFormTable select.dropdown,
        #ComposeMessage_Table select.dropdown,
        #wit317_AddCheckDraftAlertsGroup select.dropdown {
            width: auto;
        }

    .loggedOffMenu > a {
        padding-left: 1em;
    }

        .loggedOffMenu > a > img {
            border: 0;
            width: 117px;
            height: 35px;
        }

    .footerTable {
        padding-left: 20px;
    }

    .footerLinks {
        width: 40%;
    }
}

@media only print {
    .showMobileBar, .systemMessage, ._helpexit, .nav, .siteMenuContainer, .aboutLinks {
        display: none;
    }

    hr /* hr elements aren't printed because they are considered background, so reduce it to 0 and draw a border, since borders are printed */ {
        height: 0;
        border: 2px solid rgb(237, 237, 237);
    }

    /* http://stackoverflow.com/a/34379688 */
    .altcolor tr:nth-child(even), .altcolor tr:nth-child(even) td {
        background-color: unset;
        /*VBN2 box-shadow: inset 0 0 0 2000px white; */
    }

    .altcolor tr:nth-child(odd), .altcolor tr:nth-child(odd) td {
        background-color: unset;
        /*VBN2 box-shadow: inset 0 0 0 2000px rgb(233, 233, 233); */
    }

    /* hide specific elements */
    #AccountActionLinksPadding {
        display: none;
    }
}


/*VBN3 - Added*/
.needHelp {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    margin-right: 50px;
    align-self: flex-end;
    color: #fff !important;
    background-color: #069;
    border-radius: 10px 10px 0 0 !important;
}

    .needHelp:hover {
        color: #69c !important;
    }

.btnChat {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.2;
    border-radius: 0.125rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
    .btnChat {
        transition: none;
    }
}

.btnChat:hover, .btnChat:focus {
    text-decoration: none;
}

.btnChat:focus, .btnChat.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btnChat.disabled, .btn:disabled {
    opacity: 0.65;
}

.btnChat:not(:disabled):not(.disabled) {
    cursor: pointer;
}

a.btnChat.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}

.btnChat {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.2;
    border-radius: 0.125rem;
    font-weight: normal;
    margin-bottom: 0;
    white-space: nowrap;
}

    .btnChat .material-icons {
        font-size: 0.875rem;
        margin: 0;
        padding: 0;
        vertical-align: inherit;
        color: #fff;
    }

    .btnChat:focus {
        outline: 0.3125rem auto -webkit-focus-ring-color;
        outline-offset: 0.125rem;
    }

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(MaterialIcons-Regular.woff2) format('woff2'), url(MaterialIcons-Regular.woff) format('woff'), url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

@media only screen and (min-width: 1024px) {
    .newVBN {
        display: flex;
        flex-direction: column;
        max-width: 1024px;
        margin: 0 auto;
        overflow: visible;
    }

    .header, .systemMessage, .showMobileBar, ._helpexit, .nav, .content, .footer {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .navLevel2 {
        height: 72px;
        background-color: rgba(0, 0, 0, 0.02);
        margin-bottom: 10px;
    }
}

.accountdtls-dropdown {
    margin-top: 14px;
    margin-left: 36px;
    position: relative;
    display: inline-flex;
    font: normal normal normal 36px/29px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
}

.account-dropdown {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    font-family: 'Open Sans' !important;
    width: 100%;
}

    .account-dropdown > .btn {
        position: relative;
        flex: 0 1 auto;
    }

account-dropdown > .btn > img {
    padding: 0.125rem 0.25rem;
}

account-dropdown > .btn:hover {
    z-index: 1;
}

account-dropdown > .btn:focus, account-dropdown > .btn:active, account-dropdown > .btn.active {
    z-index: 1;
}

account-dropdown > .btn:first-child {
    margin-left: 0;
}

account-dropdown > .btn:not(:last-child):not(.dropdown-toggle),
account-dropdown > account-dropdown:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

account-dropdown > .btn:not(:first-child),
account-dropdown > account-dropdown:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropdown-toggle::after {
    display: none;
}

.btn-secondary {
    color: #212529;
    background-color: #fff;
    border: 0px;
    font-family: 'Open Sans';
}

    .btn-secondary:hover {
        color: #fff;
    }

    .btn-secondary:focus, .btn-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(102, 153, 204, 0.5);
    }



    .btn-secondary.disabled, .btn-secondary[disabled] {
        background-color: #fff;
        color: #a6a6a6;
        opacity: 1;
    }

    .btn-secondary:not(:disabled):not(.disabled):active {
        background-color: #fff;
        color: #69c;
    }

        .btn-secondary:not(:disabled):not(.disabled):active:hover {
            background-color: #fff;
        }

    .btn-secondary:focus {
        background-color: #fff;
        box-shadow: 0 0 0.125rem 0.125rem rgba(56, 102, 195, 0.47);
    }

    .btn-secondary:hover {
        background-color: #fff;
        color: #69c;
    }

    .btn-secondary.dropdown-toggle:after {
        display: none;
    }

account-dropdown .btn-secondary,
account-dropdown .btn-alt-style {
    border-color: #9e9e9e;
}

    account-dropdown .btn-secondary.disabled,
    account-dropdown .btn-secondary[disabled] {
        border-color: #bdbdbd;
        color: #bcbcbc;
    }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: auto;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    margin: 0.1125rem .0025rem 0 0;
    padding: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 0 0 0 #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
}



    .dropdown-menu > li > a {
        padding: 0.3125rem 1.25rem;
        color: #333333;
        text-decoration: none;
    }

        .dropdown-menu > li > a:first-child {
            padding-top: 0.5rem;
        }

        .dropdown-menu > li > a:last-child {
            padding-bottom: 0.5rem;
        }

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem .5rem;
    clear: both;
    font-weight: normal;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: default;
}

    .dropdown-item:hover, .dropdown-item:focus {
        color: #fff;
        text-decoration: none;
        background-color: #2E8BC9;
    }

    .dropdown-item.active, .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #007bff;
    }

    .dropdown-item.disabled, .dropdown-item:disabled {
        color: #6c757d;
        background-color: transparent;
    }

.dropdown-item {
    text-decoration: none;
    padding: 0.3125rem 0.25rem;
    line-height: 1.2;
}

    .dropdown-item:active {
        background-color: #fff;
        color: #212121;
    }

    .dropdown-item:first-child {
        padding-top: 0.5rem;
    }

    .dropdown-item:last-child {
        padding-bottom: 0.5rem;
    }

.icon-img {
    width: 21px;
    vertical-align: top;
    height: 25px;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}



.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.dropdown-menu.show {
    display: block;
}


.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 153, 204, 0.5);
}


/* Quick Transfer */

.qtContainer {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}



.headline {
    margin-bottom: .25rem;
    font-size: 1.5rem;
    font-weight: normal;
}

.subhead {
    font-size: 1rem;
    margin: 0;
    color: rgba(0,0,0,.54);
    padding-left: 1.5em;
}

.text-center {
    text-align: center;
}

.switch-arrow {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-top: 1.25rem;
    width: 6.28%;
}

    .switch-arrow span {
        background: transparent url('/Content/gifs/vbxicons2.svg#icon_arrow_thin_right');
        border: none;
        height: 1.5rem;
        width: 1.5rem;
    }

.icon-and-text {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
}

    .icon-and-text .icon {
        border-radius: 100%;
        height: 2.5rem;
        line-height: 2.5rem;
        margin-bottom: .5rem;
        text-align: center;
        width: 2.5rem;
    }

    .icon-and-text .text {
        color: rgba(0,0,0,.54);
        white-space: nowrap;
    }

    .icon-and-text .add-icon {
        position: relative;
    }

        .icon-and-text .add-icon:after {
            color: rgba(0,0,0,.26);
            content: '+';
            font-size: 2rem;
            left: .5rem;
            position: absolute;
            top: -.25rem;
        }

    .icon-and-text .icon-outline {
        border: 1px solid rgba(0,0,0,.12);
    }




.currency-icons {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.svgCurrency {
    width: 3rem;
    height: 1.5rem;
    fill: rgba(0,0,0,.54);
}

.currency-icons li a {
    float: left;
    margin-right: 1.5rem;
}

.currency-icons li:last-child a {
    margin-right: 0;
}



.qt-card {
    border: 1px solid rgba(0,0,0,.26);
    background: #fff;
    padding: 1rem;
    margin-top: .25rem;
    height: 10.5rem;
}

.align-centered-hv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.select-account-box {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 2rem .5rem 1.5rem;
}

.account-box {
    width: 43.72%;
    max-width: 145px;
    text-decoration: none;
  
}

span.arrow {
    position: relative;
    color: rgba(0,0,0,.54);
}

    span.arrow::after {
        background: url('/Content/gifs/vbxicons2.svg#icon_arrow_chevron_right') no-repeat;
        content: '';
        height: .875rem;
        position: absolute;
        top: .3rem;
        width: .875rem;
    }

.qt-form-group {
    margin-bottom: 1rem;
}

    .qt-form-group > label {
        display: inline-block;
        padding-bottom: .5rem;
        color: rgba(0,0,0,.54);
    }

#transAmount,
#txtTransferAmount {
    width: 90%;
    height: 48px;
    text-align: center;
    font-size: 1.3em;
    height: 48px;
    background: rgba(255, 255, 255, 1) 0% 0% no-repeat padding-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
    opacity: 1;
}

.bottom-links {
    display: flex;
    justify-content: space-between;
    margin-top: 1.75rem;
    margin-bottom: 1.75em;
    width: 100%;
}

    .bottom-links a {
        text-decoration: none;
        color: rgba(0,0,0,.54);
        font-size: 1rem;
        width: 95%;
        text-align: right;
    }

.transfer-bottom {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
   
    margin-bottom: 1em;
    font-size: 1rem;
    text-decoration: none;
    width: 96%;
}

    .transfer-bottom span {
        color: rgba(0,0,0,.54);
    }

    .transfer-bottom .lnkRecurring {
        color: rgba(0,0,0,.54);
        cursor: pointer;
        margin-right: 20px;
    }

.transferDate {
    width: 56%;
    float:left;
    margin-bottom: 1.75em;
    margin-right: 25px;
    margin-left: 5px;
}

.numberOfTransfer {
    margin-bottom: 1.75rem;
    font-size: 1rem;
    text-decoration: none;
    float: left;
    width: 36%;
}

.transferElementContainer {
    margin-bottom: 1.75rem;
    font-size: 1rem;
    text-decoration: none;
}

.transferDate p, .numberOfTransfer p, .transferElementContainer p {
    margin-bottom: 0.25em;
    color: rgba(0,0,0,.54);
}

    .transferDate input, .numberOfTransfer input, .transferElementContainer input, .transferElementContainer select {
        width: 100%;
        height: 34px;
        padding: 0;
    }


        .transferElementContainer input[type="text"][size="3"] {
            width: 28%;
            height: 34px;
            padding-left: 2px;
        }

.transferDate .calendar-placeholder {
    width: 98%;
}




.hide {
    display: none;
}

.show {
    display: block;
}

/* Select Account*/

.selectAccount .heading {
    font-weight: normal;
    margin: 25px 0 5px 0;
    font-size: 16px;
}

.selectAccount .body {
    padding: 0;
    height: 31rem;
    overflow: auto;
    margin: 5px;
}

@media only screen and (min-width: 768px) {
    .selectAccount .body {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}

.selectAccount .acct-details {
    background: #fff;
    border: 1px solid #00000042;
    margin-bottom: 7px;
    padding: 0;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    width: 99%;
}

@media only screen and (min-width: 768px) {
    .selectAccount .acct-details {
        padding: 9px;
    }
}

.acct-details .acctCardHorizontal {
    max-width: 389px;
    width: 100%;
}


.selectAcctBack {
    padding-right: 1.5rem;
    cursor: pointer;
}

.initiateTransfer {
    clear: both;
}

.btnTransfer, .btnSelectAcct, .btnTransferContinue {
    width: 100%;
    position: relative;
}

.btnTransferContinue {
    padding-top: 2rem;
    padding-bottom: 5rem;
}

.recurring-confirmation {
    color: rgba(0,0,0,.54);
}

.padding5px {
    padding: 5px 0px;
}

.btnSelectAcct {
    padding-top: 1.5rem;
}

    .btnTransfer input, .btnSelectAcct input, .btnTransferContinue input {
        background: var(--primarycolor) !important;
        border-radius: 18px;
        height: 36px;
        margin: 0 auto !important;
        display: block;
        color: #ffffff;
        text-align: center;
        letter-spacing: 0px;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border: 0px;
    }

.btnTransfer input {
    width: 70%;
    padding-left: 35px;
}

.btnSTSubmit {
    cursor: pointer;
}

.btnSelectAcct input {
    width: 90%;
    padding-left: 35px;
}

.btnSelectAcct .svgBtnCard {
    padding-top: 30px;
    padding-left: 60px;
}

.btnTransferContinue input {
    width: 50%;
}


.btnConfirmTransfer {
    text-align: center;
}

    .btnConfirmTransfer input {
        border-radius: 18px;
        height: 36px;
        margin: 20px 10px !important;
        color: #ffffff;
        text-align: center;
        letter-spacing: 0px;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        border: 0px;
        width: 160px;
    }

.transferLabel {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 0px !important;
}

.primaryBtn {
    background: var(--primarycolor) !important;
}

.secondaryBtn {
    background: var(--thirdcolor) !important;
}

/* Account Card */
.select-account-box .cardUpper {
    height: 140px;
    padding-top: 15px;
}

.select-account-box .cardLower {
    height: 40px;
}

.select-account-box .cardNickname {
    padding-top: 10px;
    padding-bottom: 10px;
}

.select-account-box .acctCard {
    height: 202px;
    max-width: 125px;
    width: 100%;
    margin-top: .25rem;
    border-top: 1px solid rgba(0,0,0,.26);
    border-left: 1px solid rgba(0,0,0,.26);
    border-right: 1px solid rgba(0,0,0,.26);
}


.select-account-box .linkicon {
    top: -60px;
    left: 0px;
}

.select-account-box .bigMoney {
    font-size: 1.575em;
}

.select-account-box span.tileBalanceCell {
    font-size: .9em;
}

.loadingImage {
    width: 0px;
    height: 0px;
    position: relative;
    top: -350px;
    left: 40%;
}

.disabledArea {
    pointer-events: none;
    opacity: 0.4;
}

.disabledAreaWithNoEffect {
    pointer-events: none;
}

/* Transfer Complete */
.TransferSuccess {
    padding: 30px 1.5rem;
}

    .TransferSuccess .t-header {
        padding: 28px 0px;
        width: 100%;
        text-align: center;
        font: normal normal 24px 'Open Sans';
        letter-spacing: 0px;
        color: rgba(0, 0, 0, 0.87);
    }

    .TransferSuccess .t-content {
        padding-bottom: 10px;
        width: 100%;
        text-align: center;
        font: normal normal 16px 'Open Sans';
        letter-spacing: 0px;
        color: rgba(0,0,0,.54);
    }

    .TransferSuccess .t-amount {
        text-align: center;
        margin-bottom: 40px;
    }

    .TransferSuccess .select-account-box {
        margin-top: 0px;
        margin-bottom: 2rem;
    }

.svgBtnCard {
    width: 24px;
    height: 24px;
    padding-top: 7px;
    padding-left: 30%;
    fill: white;
    position: absolute;
    pointer-events: none;
    top: 0px;
}

.actionLinkSecondaryColor {
    color: var(--secondarycolor);
    font-weight: bold;
}

/*VBN5 Modified*/
.quickPayCalendar .ui-datepicker-trigger {
    right: 5%;
    margin-top: 14px;
}

.transferCalendar .ui-datepicker-trigger {
    right: 2%;
    margin-top: 12px;
    top: 0px;
}
#wit539_SkipPayment .transferCalendar .ui-datepicker-trigger {
    right: 5%;
    margin-top: 12px;
    top: 6px;
}
#whb057_TransferDetail .transferCalendar .ui-datepicker-trigger {
    right: 5%;
    margin-top: 12px;
    top: 6px;
}
/* Recurring Option*/

.recurring-options, .open-enhance {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

    .recurring-options .subhead, .open-enhance .subhead {
        padding-left: 0px;
    }

    .open-enhance .subhead {
        line-height: 23px;
        font-size: 16px;
    }

    .recurring-options ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
        margin-bottom: 1rem;
    }

        .recurring-options ul li {
            width: 160px;
            height: 40px;
            list-style-type: none;
            cursor: pointer;
        }

    .recurring-options span {
        font-size: 14px;
        vertical-align: super;
    }

    .open-enhance .subhead {
        padding-bottom: 1.5rem;
    }

.select-account-box .cardEnhancedAcctNum {
    padding-top: 50px;
}

.cardEnhancedAcctNum {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.87);
    display: inline-block;
}


.svgRecurringOption {
    width: 43.5px;
    height: 36px;
    pointer-events: none;
    display: inline;
    margin-bottom: -6px;
}

.tileHeaderTitleCell .tileDropDown {
    width: 300px;
}

.alignLeft {
    margin-left: -34px;
}

.selectfrequencyClick {
    border: 1px solid #2E8BC9;
    background: #ECF5FA 0% 0% no-repeat padding-box;
    display: inline-block;
}

.svgSmallCard {
    width: 18px;
    height: 18px;
    fill: rgba(0, 0, 0, 0.54);
}

.svgContainer {
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
}

.linksContainer {
    display: block;
    float: left;
    width: -webkit-fill-available;
    width: -moz-available;
}

    .linksContainer .eStatmentLinks {
        float: right;
        margin-right: 52px;
    }

.esDropdown {
    background-color: transparent;
    color: rgba(0, 0, 0, 1);
    opacity: 0.54;
    border: 0;
    font-weight: 600;
}

.svgeStatment {
    width: 24px;
    height: 24px;
    fill: #0000008A;
    position: relative;
}

.esLink {
    float: right;
    padding-left: 3px;
    padding-top: 3px;
    color: rgba(0, 0, 0, 1);
    opacity: 0.54;
    font-weight: 500;
}

.esdropDownContainer {
    float: right;
}


@media only screen and (max-width: 380px) {
    .contentSection {
        margin-left: 15px;
        margin-right: 15px;
    }

    .sectionHeader {
        padding-left: 0px;
        font-size: 2.00em !important;
    }

    #wit316_AccountAlerts h2 {
        padding-bottom: 20px;
    }

    .showOnMobile #wbp020_MerchantAccountDetail .formValueColumn,
    .showOnMobile #wbp022_NewMerchant .formValueColumn,
    .showOnMobile #wbp023_NewMerchant .formValueColumn,
    .showOnMobile #wit313_UserPreferences .formValueColumn,
    .showOnMobile #wit549_UserPreferences .formValueColumn,
    .showOnMobile #wit550_UserPreferences .formValueColumn,
    .showOnMobile #whb425_SearchAccountHistory .formValueColumn,
    .showOnMobile #whb060_SearchByTransferDetails .formValueColumn,
    .showOnMobile #whb060_SearchByConfirmationNumber .formValueColumn,
    .showOnMobile #waa398_ScheduleA2ATransfer .formValueColumn,
    .showOnMobile #wit094_AccountDetails .formValueColumn,
    .showOnMobile #RAHS_AccountHistorySearch .formValueColumn,
    .showOnMobile #whb057_TransferDetail .formValueColumn,
    .showOnMobile #wbp012_PaymentDetail .formValueColumn,
    .showOnMobile #wbp017_PaymentHistorySearchByDetails .formValueColumn,
    .showOnMobile #ChangePassword_Mobile .formValueColumn,
    .showOnMobile #wem146_ResearchPaymentRequest .formValueColumn,
    .showOnMobile #wit293_AccountDetails .formValueColumn,
    .showOnMobile #waa392_AddA2AAccount_AccountDetails .formValueColumn,
    .showOnMobile #wit532_ACHStopPayment .formValueColumn,
    .showOnMobile #wit503_ACHTransferIn .formValueColumn,
    .showOnMobile #wit505_ACHTransferOut .formValueColumn,
    .showOnMobile #wit534_CertificateDepositApp .formValueColumn,
    .showOnMobile #wit190_CheckStopPay .formValueColumn,
    .showOnMobile #wit536_CreditCardBalanceTransfer .formValueColumn,
    .showOnMobile #wit481_DomesticWire .formValueColumn,
    .showOnMobile #wit489_InternationalWire .formValueColumn,
    .showOnMobile #whb195_StatementReprint .formValueColumn,
    .showOnMobile #whb196_LoanApplication .formValueColumn,
    .showOnMobile #wit194_CheckReorder .formValueColumn,
    .showOnMobile #whb211_CheckReorderHarland .formValueColumn,
    .showOnMobile #wit193_CheckCopy .formValueColumn,
    .showOnMobile #wit537_CrossMemberAccess .formValueColumn,
    .showOnMobile #wit413_ScheduleReminder .formValueColumn {
        text-align: left;
    }

    .formTable input[type="text"],
    .formTable input[type="number"], .formTable input[type="tel"],
    .formTable input[type="email"], .formTable input[type="reset"],
    .formTable input[type="password"], .tileTable input[type="text"] {
        width: 95%;
    }

    #wit316_AccountAlerts .text-box {
        width: 70%;
    }

    #wit316_AccountAlerts .calendar {
        width: 37%;
    }

    #wit496_ViewEnotices .calendar {
        width: 41%;
    }

    #SetUpReminder .future-calendar {
        width: 50%;
    }

    #wit540_TravelNotification .calendar {
        width: 60%;
    }

    #wbp017_PaymentHistorySearchByDetails .calendar,
    #wit489_InternationalWire .calendar,
    #wit481_DomesticWire .calendar,
    #wit505_ACHTransferOut .achtransfer-calendar,
    #wit503_ACHTransferIn .achtransfer-calendar {
        width: 65%;
    }

    #wit540_TravelNotification .calendar-placeholder,
    #wbp017_PaymentHistorySearchByDetails .calendar-placeholder,
    #wit489_InternationalWire .calendar-placeholder,
    #wit481_DomesticWire .calendar-placeholder,
    #wit505_ACHTransferOut .calendar-placeholder,
    #wit316_AccountAlerts .calendar-placeholder,
    #SetUpReminder .calendar-placeholder,
    #wit503_ACHTransferIn .calendar-placeholder {
        display: contents;
    }

    #wit540_TravelNotification .ui-datepicker-trigger,
    #wbp017_PaymentHistorySearchByDetails .ui-datepicker-trigger,
    #wit489_InternationalWire .ui-datepicker-trigger,
    #wit481_DomesticWire .ui-datepicker-trigger,
    #wit505_ACHTransferOut .ui-datepicker-trigger,
    #wit316_AccountAlerts .ui-datepicker-trigger,
    #SetUpReminder .ui-datepicker-trigger,
    #wit496_ViewEnotices .ui-datepicker-trigger,
    #wit503_ACHTransferIn .ui-datepicker-trigger {
        position: relative;
        margin-top: 0px;
    }

    #wit532_ACHStopPayment .ui-datepicker-trigger {
        right: 5%;
    }

    #wit540_TravelNotification .ui-datepicker-trigger,
    #wbp017_PaymentHistorySearchByDetails .ui-datepicker-trigger,
    #wit489_InternationalWire .ui-datepicker-trigger,
    #wit481_DomesticWire .ui-datepicker-trigger,
    #wit316_AccountAlerts .ui-datepicker-trigger,
    #wit503_ACHTransferIn .ui-datepicker-trigger,
    #wit505_ACHTransferOut .ui-datepicker-trigger {
        right: 8%;
    }

    .paymentTileTable .ui-datepicker-trigger {
        top: 0;
    }

    #wit489_InternationalWire input[type="number"][size="11"],
    #wit505_ACHTransferOut input[type="number"][size="11"],
    #wit481_DomesticWire input[type="number"][size="11"],
    #wit534_CertificateDepositApp input[type="number"][size="11"],
    #wit536_CreditCardBalanceTransfer input[type="number"][size="11"],
    #wit503_ACHTransferIn .Money {
        width: 94%;
    }

    #SetUpReminder .ui-datepicker-trigger {
        right: 10%;
    }

    #wit496_ViewEnotices .ui-datepicker-trigger {
        right: 11%;
    }



    .infoMessage {
        display: inline-block;
    }

    #wit537_CrossMemberAccess .infoMessage,
    #wit538_OverdraftProtectionElection .infoMessage,
    #wit540_TravelNotification .infoMessage,
    #wit501_AdditionalMemberAdd .infoMessage,
    #whb462_WithdrawByCheck .infoMessage,
    #wit193_CheckCopy .infoMessage,
    #wit194_CheckReorder .infoMessage,
    #wit412_TransferAlerts .infoMessage,
    #wit270_BillPayAlerts .infoMessage,
    #wit408_GeneralAlerts .infoMessage,
    #SetUpReminder .infoMessage {
        display: table-cell;
    }

    .formTable select {
        width: 98%;
    }

    .altcolor tr.skipAltColor {
        padding-bottom: 20px;
    }

    #wit489_InternationalWire input[type="text"][size="11"],
    #wit489_InternationalWire input[type="text"][size="20"],
    #wit505_ACHTransferOut input[type="text"][size="9"],
    #wit190_CheckStopPay input[type="text"],
    #wit481_DomesticWire input[type="text"][size="9"],
    #wit481_DomesticWire input[type="tel"],
    #wit534_CertificateDepositApp input[type="text"],
    #wit536_CreditCardBalanceTransfer input[type="text"],
    #wit503_ACHTransferIn input[type="text"][size="9"] {
        width: 98%;
    }

    #whb462_WithdrawByCheck input[type="number"][size="11"] {
        width: 96%;
    }

    .calendar {
        width: 100%;
    }

    .ui-datepicker-trigger {
        right: 2%;
    }

    .formValueColumn {
        text-align: left;
        padding-bottom: 15px;
    }

    .minWidthShrunkColumn .formValueColumn {
        padding-top: 15px;
    }

    .dropdownfrequency {
        width: 100% !important;
    }

    .dropdowndelivery {
        margin-left: 0px !important;
    }

    td.minWidthShrunkColumn {
        vertical-align: top;
    }

    #whb428_SelectMemberNumber td.minWidthShrunkColumn,
    #whb211_CheckReorderHarland td.minWidthShrunkColumn {
        vertical-align: middle;
    }

    #wit537_CrossMemberAccess td.minWidthShrunkColumn,
    #wit538_OverdraftProtectionElection td.minWidthShrunkColumn,
    #wit540_TravelNotification td.minWidthShrunkColumn,
    #wit539_SkipPayment td.minWidthShrunkColumn,
    #wit501_AdditionalMemberAdd td.minWidthShrunkColumn,
    #whb195_StatementReprint td.minWidthShrunkColumn,
    #SetUpReminder td.minWidthShrunkColumn,
    #whb462_WithdrawByCheck td.minWidthShrunkColumn,
    #wit193_CheckCopy td.minWidthShrunkColumn,
    #wit194_CheckReorder td.minWidthShrunkColumn,
    #whb301_EStatmentSelectAccount td.minWidthShrunkColumn,
    #wit496_ViewEnotices td.minWidthShrunkColumn {
        vertical-align: middle;
    }

    #wit539_SkipPayment .transferCalendar .ui-datepicker-trigger {
        right: 5%;
        margin-top: 17px;
    }

    .formMobileColumn label {
        padding-right: 20px;
    }

    .formMobileColumn div {
        display: inline-block;
    }

    #wit532_ACHStopPayment input[type=radio] {
        float: left;
        height: 20px;
    }

    #wit532_ACHStopPayment label {
        margin-left: 6px;
        height: 20px;
        display: inline-block;
        margin-top: 4px;
    }

    .prefModule {
        width: 350px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .prefFixedLabel {
        width: 180px;
    }

    .prefFixedValue {
        width: 195px;
    }

    .dropdownPrefs {
        width: 210px;
    }

    .showOnMobile #wit315_UpdatePersonalInformation input[type="email"] {
        width: 100%;
    }

    .showOnMobile #wbp022_NewMerchant .formLabelColumn input[type="checkbox"] {
        float: initial;
    }

    .colJustifyDate {
        vertical-align: top;
    }

    .colJustifyDefault {
        vertical-align: top;
    }

    .colJustifyActionLink {
        text-align: left;
        vertical-align: top;
    }

    .paddingBottom7 {
        padding-bottom: 7px;
    }

    .dropdownMobileStatementReprint {
        width: 47% !important;
    }

    .mobileSubMenu {
        padding: 15px;
        margin-bottom: 10px;
        background-color: rgba(0, 0, 0, 0.04);
    }

    .dropdownmobileSubMenu {
        border-radius: 14px;
        float: right;
    }

    .vbnlevel2SelectedMobile {
        display: inline-block;
        text-align: left;
        font: normal normal normal 24px 'Open Sans';
        letter-spacing: 0px;
        color: #000000;
        opacity: 1;
    }

    .importantMessage {
        margin: 15px 15px 0px 15px;
    }

    .altcolor tr {
        height: 20px;
    }

    .formTable td.formSectionHeader {
        padding-bottom: 1em;
    }

    .paymentTileTable input[type="submit"] {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media only screen and (min-width: 381px) and (max-width: 768px) {

    .formValueColumn {
        font-size: 14px;
    }

    .infoMessage, td.infoMessage {
        font-size: 16px;
    }

    .ui-datepicker-trigger {
        width: 1.2em;
        height: 1.2em;
    }

    .ui-datepicker-trigger {
        right: 50%;
    }

    #wit540_TravelNotification div.minWidthShrunkColumn {
        width: 167px;
        white-space: nowrap;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #whb195_StatementReprint div.minWidthShrunkColumn {
        width: 200px;
        white-space: nowrap;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #whb195_StatementReprint div,
    #wit540_TravelNotification div {
        padding: .1em;
        display: inherit;
    }
}


@media only screen and (min-width: 1024px) {
    #wit540_TravelNotification div.minWidthShrunkColumn {
        width: 167px;
        white-space: nowrap;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #whb195_StatementReprint div.minWidthShrunkColumn {
        width: 200px;
        white-space: nowrap;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #whb195_StatementReprint div,
    #wit540_TravelNotification div {
        padding: .1em;
        display: inherit;
    }
}

#wit540_TravelNotification td.formSectionHeader {
    padding-bottom: 1em;
}

.field-validation-error span {
    color: red;
}

.lnkVBN {
    color: var(--secondarycolor);
}

.dropdownH39 {
    height: 39px !important;
}

/*VBN3 - End*/
/*VBN4 added*/
.dropdownchecking {
}

.dropdowntransfer {
}

.dropdownstate {
}

.dropdownaccesstype {
}

.dropdownaccounttype {
}

.dropdowncountry {
}

.dropdownaddresstype {
}

.lendingFooter {
    padding: .60em;
}

.securemessages {
    margin-top: 14px;
    padding: 5px;
}

.captchaText {
    top: 10px;
    left: 50px;
    width: 302px;
    height: 76px;
    text-align: center;
    position: absolute !important;
}

.captchaNextButton {
    margin: 36px;
    float: right;
    background: #ff6600;
    color: #fff;
    padding: 8px 20px;
    border-radius: 15px;
    width: 150px;
    border: 1px solid #d35806;
}

.confrimation-container {
    max-width: 700px;
    margin: 5% auto;
    border-bottom: 3px solid #ff6600;
    overflow: hidden;
    box-shadow: 0px 0px 20px 5px #d1d1d1;
    height: 400px;
}


.signup-container {
    max-width: 900px;
    margin: 5% auto;
    border-bottom: 3px solid var(--primarycolor);
    overflow: hidden;
    box-shadow: 0px 0px 20px 5px #d1d1d1;
    height: 100%;
}

    .signup-container h2 {
        font-size: 24px;
    }

h2 {
   font-size: 28px;
}

.signup-left-section {
    width: 35%;
    float: left;
    text-align: center;
    height: 100%;
    position: relative;
    padding: 50px 0;
}

    .signup-left-section .signup-leftWrap {
        width: 100%;
    }

    .signup-left-section p {
        color: #838383;
        font-size: 14px;
        font-weight: normal;
        line-height: 17px;
        margin-bottom: 40px;
    }


.signup-right-section {
    width: 65%;
    float: right;
    text-align: center;
    padding: 50px 0;
    height: 100%;
}

    .signup-right-section button {
        background: #ff6600;
        color: #fff;
        padding: 8px 20px;
        border-radius: 15px;
        width: 150px;
        border: 1px solid #d35806;
        float: right;
    }


.signup-rightWrap p {
    font-size: 14px;
}

.capthca {
    max-width: 335px;
    background: #0000000A;
    position: relative;
    margin: 40px auto 100px auto;
    padding: 0px 10px;
}

.signup-right-section .signup-rightWrap {
    max-width: 70%;
    margin: 0 auto;
}

.signup-progressbar {
    margin: 32px 0 32px 0;
}

    .signup-progressbar li {
        list-style-type: none;
        width: 18%;
        display: inline-block;
        position: relative;
    }

        .signup-progressbar li.first span {
            background: #919191;
            border: 1px solid #bebebe60;
            text-indent: initial;
            padding: 2px 4px;
        }

            .signup-progressbar li.first span i {
                font-size: 14px;
                color: white;
            }

        .signup-progressbar li.currentpage span {
            background: var(--primarycolor);
            border: 2px solid #ddd;
        }

        .signup-progressbar li span {
            background: #dddddd;
            border-radius: 50%;
            color: #fff;
            content: ' ';
            font-size: 0.90625rem;
            left: 50%;
            margin-left: -0.9375rem;
            padding: 2px 10px;
            position: absolute;
            text-align: center;
            top: -1.125rem;
            z-index: 2;
            text-indent: -9999999px;
        }

        .signup-progressbar li:before {
            background: #dddddd;
            content: '';
            height: 0.25rem;
            left: 55%;
            position: absolute;
            top: -0.60rem;
            width: 100%;
        }

        .signup-progressbar li.last:before {
            background: none;
        }


.signup-input-container {
    display: flex;
    width: 100%;
    margin: 2%;
    position: relative;
}

.input-field {
    width: 100%;
    padding: 12px 30px;
    outline: none;
    border: 1px solid #cbcbcb;
}

.icon {
    position: absolute;
    left: 5px;
    top: 9px;
    color: #00000089;
}

.icon-right {
    position: absolute;
    right: 5px;
    top: 9px;
    color: #00000089;
}

.icon-left {
    position: absolute;
    /*right: 269px;*/
    top: 9px;
    color: #00000089;
    left: 100px;
}

.pintextbox {
    margin-right: 60px !important;
    width: 80px !important
}

.wrapText {
    width: 60% !important;
}


.errorMessagesignup {
    top: 80px;
    margin-left: -30px;
    border-left: 4px solid var(--secondarycolor);
}

.ssntextbox {
    width: 480px;
    padding-left: 5%;
}

.securitytextbox {
    margin-right: 30px !important;
    width: 50% !important;
}
.verifySecuritytextbox {
    width: 50% !important;
    padding-left: 5%;
}
.icon-iden {
    position: absolute;
    left: 200px;
    top: 9px;
    color: #00000089;
}

.icon-lock-left {
    position: absolute;
    left: 204px;
    top: 9px;
    color: #00000089;
}

.buttonpadding {
    padding: 120px 0 0 0;
    float: right;
}

.nextMemberformbutton {
    padding: 30px 0 0 0;
    float: right;
}

.errorwidth {
    width: 500px;
    height: 20px;
    margin-left: -30px;
}

.tooltip {
    position: relative;
}

.passwordtooltip {
    left: 4% !important;
    width: 82% !important;
}

.addresstooltip {
    height: 30px !important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 50%;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 108%;
    left: 60%;
    margin-left: 0;
    font-size: 13px;
    height: 91px;
}

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.field-validation-error {
    color: red;
}

.readDisclosure {
    margin-top: 20px;
}

.enrollPin {
  width:19%;
}
.validateSSN {
margin-left:25%;
}
.ssnErrorMessage {
    position: absolute;
    margin: 11% 0% 0% -55%;
}

.ssnErrorMessageReq {
    margin-left: 50%;
}

.labelmessage {
    font-size: 14px;
    font-weight: normal;
    line-height: 17px;
}

.accountdetail-dropdown {
    font-size: 24px;
    width: 230px;
    height: 45px;
}

.backurlposition {
    margin-top: 14px;
}

.mobilemodal-popup.show, .modal-popup.show {
    display: block;
}

.mobilepopup-position {
    position: relative;
}

.mobilemodal-popup {
    z-index: 1;
    position: absolute;
    right: 1%;
    top: 60px;
    left: auto;
    display: none;
    float: right;
    width: 41%;
    font-size: 1rem;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 0 0 0 #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
}

.modal-popup {
    z-index: 1;
    position: absolute;
    top: 100%;
    left: auto;
    display: none;
    float: left;
    width: 180px;
    font-size: 1rem;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 0 0 0 #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top-left-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
    right: -22px;
}

    .mobilemodal-popup ul, .modal-popup ul {
        list-style-type: none;
        margin-left: 27px;
        margin-top: 7px;
        padding-left: 0;
        line-height: 30px;
    }

        .mobilemodal-popup ul li, .modal-popup ul li {
            margin-left: -13px;
        }

            .mobilemodal-popup ul li:hover, .modal-popup ul li:hover {
                background: #d8ecf3;
                border-left: 4px solid var(--primarycolor);
                margin-left: -28px;
                text-indent: 13px;
            }

            .mobilemodal-popup ul li:last-child, .modal-popup ul li:last-child {
                margin-bottom: -13px;
            }

.accoutdetails-more {
    width: 0px;
    position: relative;
    vertical-align: middle;
    font-family: 'Open Sans';
}

.printsvgtran {
    height: 24px;
    width: 24px;
    fill: rgba(0,0,0,0.54);
}

.searchCriteria > span > input[type="number"] {
    width: 90px !important;
}

.moredivsvg {
    width: 24px;
    height: 24px;
    fill: rgba(0,0,0,0.54);
}

.svgmore {
    width: 24px;
    height: 24px;
    fill: rgba(0,0,0,0.54);
}

.moredivsvg:hover {
    cursor: pointer;
    border-radius: 50px;
    background: var(--medium-gray-54-) 0% 0% no-repeat padding-box;
    background: #00000089 0% 0% no-repeat padding-box;
    opacity: 1;
}

.treemore:hover {
    cursor: pointer;
    border-radius: 50px;
    background: var(--medium-gray-54-) 0% 0% no-repeat padding-box;
    background: #00000089 0% 0% no-repeat padding-box;
    opacity: 1;
}

.MoreHeaderColumns, .DesktopMoreHeaderColumns {
    float: right;
    padding: 2px;
}

.morerows {
    padding: 25px;
}

.DesktopMoreHeaderColumns:nth-child(3n), .DesktopMoreHeaderColumns:last-child {
    /* border-left: 4px solid var(--thirdcolor);*/
}



.leftheader {
    width: 100%;
    float: left;
}

.rightheader {
    width: 51%;
    display: grid;
    padding: 8px;
    margin-left: 55%;
    grid-template-columns: 84%;
}

.accountdiv {
    display: inline-block;
    float: right;
}

.accountremainingrows {
    float: right;
    width: 100%;
    display: inline-block;
}

.mobiledatepick .ui-datepicker-title, .datepick .ui-datepicker-title {
    text-align: left;
    font: normal normal normal 16px/17px 'Open Sans';
    letter-spacing: 0px;
    color: #000000DD;
    opacity: 1;
}

.mobiledatepick .ui-datepicker-header, .datepick .ui-datepicker-header {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mobiledatepick .ui-datepicker table, .datepick .ui-datepicker table {
    display: none;
}

.mobiledatepick .ui-datepicker-year, .datepick .ui-datepicker-year {
    display: none;
}

.mobiledatepick .ui-widget-header, .datepick .ui-widget-header {
    color: white;
    font-weight: bold;
    height: 20px !important;
    border: 0px;
    background: white;
    color: #333;
    font-weight: bold;
}

.mobiledatepick .ui-datepicker {
    font-size: 0.8em !important;
}

.mobiledatepick .ui-datepicker-prev span, .datepick .ui-datepicker-prev span {
    background: url('/Content/gifs/vbxicons2.svg#icon_arrow_chevron_left') no-repeat top left !important;
    background-position: 0px 0px !important;
}

.mobiledatepick .ui-datepicker-next span, .datepick .ui-datepicker-next span {
    background: url('/Content/gifs/vbxicons2.svg#icon_arrow_chevron_right') no-repeat top left !important;
    background-position: 0px 0px !important;
}

.mobiledatepick select.ui-datepicker-month, .datepick .ui-datepicker select.ui-datepicker-month {
    width: 95%;
    border: 0px none;
    background: white;
}

.availablebalancetotal {
    margin-left: 160px;
    margin-top: 14px;
    padding-left: 10px;
}

.accountotalcredit {
    margin-left: 109px;
    padding-left: 10px;
    padding-right: 8px;
    float: right;
}

.currenttotalbalance {
    padding-left: 11px;
    float: right;
}

.svgaccounthistoryimg {
    padding-top: 4px;
}

.printsvgtranhover:hover {
    cursor: pointer;
}

.morelinks {
    height: 24px;
    width: 24px;
    margin-top: 21px;
    fill: rgba(0,0,0,0.54);
}

.emptydiv {
    width: 135px;
}

.printimage {
    width: 29px;
    padding-left: 0px !important;
}

.MobileSearchData {
    display: none;
    position: fixed;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 72%;
    background-color: white;
    z-index: 100;
    box-shadow: 0px 6px 12px rgba(0,0,0,.54);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    max-width: 95%;
    overflow: hidden;
}

#MobileSearchOverlay {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    bottom: 0;
    background: black;
    z-index: 99;
    opacity: .6;
    filter: alpha(opacity=60);
}

.MobilevbnAccountdtls {
    background-color: rgba(0, 0, 0, 0.02);
    width: 100%;
    min-height: 10em;
}

.MobiledropdownValue {
    font-size: 28px;
    width: 215px;
}

.Mobileaccountdtls-dropdown {
    float: left;
    margin-top: 14px;
    margin-left: 0.4em;
    position: relative;
    display: inline-flex;
    font: normal normal normal 30px/22px 'Open Sans';
    letter-spacing: 0px;
    color: #000000;
}

.mobileaccountTotal {
    padding-left: 10px;
}

.mobileavailablebalance {
    border-left: 4px solid var(--secondarycolor);
    margin-left: 17px;
}

.mobileBalanceHeader {
    width: 100%;
}

.mobileleftheader {
    width: 42%;
    float: left;
    margin-top: 14px;
}

.mobilerightheader {
    width: 51%;
    display: inline-flex;
    margin-top: 14px;
}

@media only screen and (min-width: 381px) and (max-width: 768px) {

    .searchCriteria {
        font-size: 13px;
    }

    .searchBanner {
        width: 750px;
    }

    .searchCriteria#desc {
        width: 65px !important;
    }

    .searchCriteria > span > img.ui-datepicker-trigger, input#End.calendar.hasDatepicker > img.ui-datepicker-trigger {
        right: 49%;
        margin-top: 11px;
    }

    .searchCriteria > span > input[type="text"] {
        width: 65px !important;
    }

    .searchCriteria > span > input[type="number"] {
        width: 65px !important;
    }

    #desc {
        width: 120px !important;
    }

    #month_datepicker > div.ui-datepicker {
        font-size: 11px;
    }

    .accountdetail-dropdown {
        width: 70%;
    }

    .rightheader {
        width: 98%;
        margin-left: 40%;
        grid-template-columns: 58%;
    }

    .leftheader {
        width: 100%;
    }

    .emptydiv {
        width: 30px;
    }
}

.mobiledesc {
    width: 150px;
}

.mobileCheckNumber {
    width: 71px;
    padding: 0px;
}

.amountRange {
    width: 160px;
    padding-left: 10px;
}

.checkRange {
    width: 170px;
    padding-left: 10px
}

.mobilehistSearch {
    background: url(/Content/gifs/vbxicons2.svg#icon_control_search) no-repeat 0px;
    background-size: 80px;
    background-color: whitesmoke;
    padding-left: 35px;
    height: 34px;
    font: normal normal 600 16px 'Open Sans';
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.54);
    opacity: 1;
    border-radius: 17px;
    width: 120px;
    justify-content: center;
    border: 1px solid #00000042;
    margin-left: 60%;
}

.searchTransactions {
    width: 300px;
    text-align: center;
    margin-top: 5px;
    font: normal normal 20px 'Open Sans';
}

input#mobileStart, input#mobileEnd {
    width: 110px;
    padding: 0px;
}

.mobileHeader {
    width: 100%;
}

.monthCalendar {
    width: 270px;
}

.mobileSearchBanner {
    width: 340px;
    float: left;
    display: flex;
    justify-content: space-between;
}

.mobileSvgmore {
    width: 24px;
    height: 24px;
}

.mobileSearchCriteria {
    font-size: 14px;
    padding-left: 10px;
}

    .mobileSearchCriteria > span > input[type="number"] {
        width: 65px !important;
    }

    .mobileSearchCriteria .calendar-placeholder {
    }

    .mobileSearchCriteria .ui-datepicker-trigger {
        margin-right: 15px;
        margin-top: 10%;
    }

.mobileVbnHistorySearch {
    float: left;
    display: flex;
    margin: 7px 0px 7px 0px;
    width: 100%;
}

@media only screen and (max-width: 380px) {

    .histsvg {
        height: 20px;
        width: 20px;
    }

    .historyModule {
        width: 100%;
        padding-left: 0px;
    }
}

.mobileCheckRangeNonRich {
    width: 250px;
}

.mobileCheckNumberNonRich {
    width: 100px;
    padding: 0px;
}

.pastHistDescription {
    padding-left: 4px;
}

.secuirtyMessage {
    margin-left: -1%;
}

.verifySecuirtyMessage {
    margin-left: 30%;
}

.phone {
    margin-top: 3%;
}

.phoneErrorMessage {
    position: absolute;
    margin: 17% 0% 0% -70%;
}

.searchCriteria .ui-datepicker-trigger {
    right: 10%;
    margin-top: 11px;
}

.DisableMonth {
    background-color: #e9e9e9 !important;
}

.membeInfoMessage {
    font-size: 16px;
}

.addresstooltip b {
    color: white;
}

.tooltip .Enrolltooltip {
    visibility: hidden;
    width: 85%;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 108%;
    left: 25%;
    margin-left: 0;
    font-size: 14px;
}

    .tooltip .Enrolltooltip::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }

.tooltip:hover .Enrolltooltip {
    visibility: visible;
}
/*VBN4 end*/
/*VBN5 Start  */
/**** Login Flow ****/
.left-section {
    width: 35%;
    float: right;
    background: whitesmoke;
    text-align: center;
    height: 500px;
    position: relative;
}

    .left-section .leftWrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

.logincontainer {
    max-width: 900px;
    margin: 2% auto 5% auto;
    border-bottom: 3px solid var(--primarycolor);
    overflow: hidden;
    box-shadow: 0px 0px 20px 5px #d1d1d1;
    height: 500px;
}

.left-section p {
    color: #838383;
    font-size: 14px;
    font-weight: normal;
    line-height: 17px;
    margin-bottom: 40px;
}

.left-section button {
    background: #fff;
    color: #000;
    padding: 8px 20px;
    border-radius: 15px;
    width: 150px;
    border: 1px solid #acaaa9;
}

    .left-section button:hover {
        background: #ff6600;
        color: #fff;
    }

.rightWrap p {
    color: #919191;
    font-size: 14px;
}

.right-section {
    width: 65%;
    float: left;
    text-align: center;
    padding: 50px 0;
    height: 500px;
}

    .right-section .rightWrap {
        max-width: 70%;
        margin: 0 auto;
    }

.input-container {
    display: -ms-flexbox; /* IE10 */
    width: 325px;
    margin: 20px 0;
    position: relative;
}

.input-field {
    width: 100%;
    padding: 12px 30px;
    outline: none;
    border: 1px solid #cbcbcb;
}

.icon {
    position: absolute;
    left: 5px;
    top: 9px;
    color: #00000089;
}

.icon-right {
    position: absolute;
    right: 5px;
    top: 9px;
    color: #00000089;
}

.submit {
    text-align: center;
    margin: 100px 0 30px 0;
}

.loginfooter a {
    text-decoration: none;
    color: #707070;
    font-size: 13px;
}

    .loginfooter a:first-child {
        float: left;
    }


.alert-message {
    max-width: 900px;
    margin: 0 auto;
    border-left: 4px solid #00000089;
}

    .alert-message p {
        border: 1px solid #0000001E;
        padding: 10px 10px;
        font-size: 14px;
        line-height: 19px;
    }

p .material-icons {
    float: left;
    padding-right: 5px;
    color: #00000089;
}

.displayMsg {
    opacity: 1;
    width: 590px;
    margin-left: -90px
}

.loginInputPanel {
    display: block !important;
}

#HLMFmasterMainContent #body_body_pnlBroadcasting, #HLMFmasterMainContent #body_body_pnlBulletin {
    padding-top: 0em !important;
    padding-bottom: 0em !important;
}

.hyperLinkbtn {
    background: var(--primarycolor);
    color: #fff;
    padding: 8px 20px;
    border-radius: 15px;
    width: 150px;
    border: 1px solid var(--primarycolor);
}

.inputReset {
    width: 304px;
    margin: 20px 0;
    padding-left: 8%;
}

.maxWidth {
    width: 450px;
}

.ChangePassword_Desktop {
    margin-left: 33px;
}

.placeHolderMargin {
    padding-left: 10%;
}

.language {
    margin-top: -55px;
}

.vbstsErrorMessage {
    padding: .25em;
    padding-left: 24px;
    vertical-align: middle;
    position: absolute;
    margin-left: 63px;
}

.contentSectioncenter {
    margin-right: 48px;
    margin-left: 0px !important;
}

.logoff-right-section {
    text-align: center;
    padding: 50px 0;
    height: 550px;
}

.logoff-left-section {
    width: 35%;
    float: left;
    text-align: center;
    height: 550px;
    position: relative;
}

.logoffLink {
    color: #005CAB;
}

.loggedOffMessage a {
    color: var(--secondarycolor);
    font-weight: bold;
}

.CreditSense {
    width: 391px;
    opacity: 1;
    float: right;
    margin: 20px;
}

.crossSell {
    float: left !important;
    display: flex;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow-x: auto;
    width: 242px;
    height: 180px;
    overflow: hidden;
    margin: 15px;
}

#CrossSell > div:nth-child(even) {
    margin-right: 50px;
}

#CrossSell > div:nth-child(odd) {
    margin-left: 75px;
}

#CrossSell > :only-child {
    margin-right: 350px;
}

.CrossSellDivs {
    float: left;
    margin: 0px 30px 0 20px;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active, .dot:hover {
        background-color: #717171;
    }

.dotalign {
    margin-top: 210px;
    margin-left: -154px;
    float: left;
}

#body_body_txtUserName {
    background: url(/Content/gifs/vbxicons2.svg#icon_customer_member_personal) no-repeat -88px;
    background-size: 200px;
}

#body_body_txtPassword, #body_body_txtSponsorCode {
    background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -88px;
    background-size: 200px;
}

@media only screen and (max-width: 415px) {
    .signup-container {
        max-width: 900px;
        margin: 5% auto;
        border-bottom: 3px solid var(--primarycolor);
        overflow: hidden;
        box-shadow: 0px 0px 20px 5px #d1d1d1;
        height: 700px;
        margin-left: -35px;
        margin-bottom: 0px;
    }

    .signup-left-section {
        width: auto;
        float: none;
        background: whitesmoke;
        text-align: center;
        height: 200px;
        position: relative;
    }

    .signup-right-section {
        width: auto;
        float: none;
        padding: 0;
        text-align: center;
        height: 499px;
    }

    .buttonpadding {
        padding: 72px 0 0 0;
        float: right;
    }

    .icon-left {
        position: absolute;
        top: 9px;
        color: #00000089;
    }

    .icon-lock-left {
        position: absolute;
        left: 53%;
        top: 9px;
        color: #00000089;
    }

    #VerifySecurityCode {
      /*  margin-left: -9px;*/
    }

    .rc-anchor-normal .rc-anchor-pt {
        margin: 2px 87px 0 0 !important;
        padding-right: 2px;
        position: absolute;
        right: 0;
        text-align: right;
        width: 276px;
    }

    .logincontainer {
        max-width: 900px;
        margin: 0;
        border-bottom: 3px solid #ff6600;
        overflow: hidden;
        box-shadow: none;
        height: 700px;
    }

    .left-section {
        width: auto;
        float: none;
        background: whitesmoke;
        text-align: center;
        height: 200px;
        position: relative;
    }

    .right-section {
        width: auto;
        float: none;
        text-align: center;
        padding: 0;
        height: 499px;
    }

    .contentPadding {
        padding: 0;
    }

    .input-container {
        width: 210px;
        margin: 20px 0;
        position: relative;
    }

    .displayMsg {
        opacity: 1;
        width: 361px;
        margin-left: -50px;
    }
        .displayMsg .displayMessage:before {
            left: 2px;
        }
    .language {
        margin-top: -10%;
    }

    #lang {
        height: 20px !important;
    }

    .content {
        padding-top: 1em;
        padding-bottom: 0em;
    }

    #logoffpage {
        margin: 10px 10px -3px 60px;
        overflow: hidden;
        box-shadow: none;
        height: 517px;
    }

    .logoff-left-section {
        width: 0%;
        float: left;
        text-align: center;
        height: 550px;
        position: relative;
    }

    .capthca {
        max-width: 335px;
        background: #0000000A;
        position: relative;
        margin: 40px auto 100px -35px;
        padding: 0px 10px;
    }

    .ChangePasswordHeaderMobile {
        margin-left: -30px !important;
    }

    .icon2 {
        position: absolute;
        top: 435px;
        color: #00000089;
        z-index: 1;
    }

    .icon3 {
        position: absolute;
        top: 504px;
        color: #00000089;
        z-index: 1;
    }

    #body_body_txtPassword, #body_body_txtSponsorCode {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -88px;
        background-size: 200px;
    }

    #body_body_txtNewPassword {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -88px;
        background-size: 200px;
    }

    #body_body_txtNewPassword2 {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -88px;
        background-size: 200px;
    }
    #body_body_txtUserName {
        background: url(/Content/gifs/vbxicons2.svg#icon_customer_member_personal) no-repeat -88px;
        background-size: 200px;
    }
}


@media only screen and (min-width: 769px) and (max-width: 1023px) {
    .signup-container {
        height: 700px;
    }
}

@media only screen and (min-width: 416px) and (max-width: 768px) {
    body, input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], select {
        font-size: 1em;
    }
   
    .icon-left {
        position: absolute;
        top: 9px;
        color: #00000089;
    }

    .signup-container {
        max-width: 900px;
        margin: 2% 9% 5% 9%;
        border-bottom: 3px solid var(--primarycolor);
        overflow: hidden;
        box-shadow: 0px 0px 20px 5px #d1d1d1;
        height: 550px;
    }

    .signup-right-section .signup-rightWrap {
        max-width: 100%;
        margin: 0 auto;
    }

    .signup-input-container {
        display: flex;
        width: 90%;
        margin: 2%;
        position: relative;
    }

    .signup-right-section {
        width: 65%;
        float: right;
        text-align: center;
        padding: 50px 0;
        height: 550px;
    }

    .logoff-left-section {
        width: 20%;
        float: left;
        text-align: center;
        height: 550px;
        position: relative;
    }

    .logincontainer {
        margin: 2% 9% 5% 9%;
        border-bottom: 3px solid var(--primarycolor);
        overflow: hidden;
        box-shadow: 0px 0px 20px 5px #d1d1d1;
        height: 500px;
    }

    #body_body_txtUserName, #body_body_txtPassword, #body_body_txtSponsorCode, #body_body_txtPassword, #body_body_txtNewPassword,
    #body_body_txtNewPassword2 {
        width: 100%;
        padding: 12px 15px;
        outline: none;
        border: 1px solid #cbcbcb;
        margin-left: -34px;
    }

    .icon1 {
        position: absolute;
        color: #00000089;
        z-index: 1;
        top: 357px;
    }

    .icon2 {
        position: absolute;
        top: 411px;
        color: #00000089;
        z-index: 1;
    }

    .icon3 {
        position: absolute;
        top: 465px;
        color: #00000089;
        z-index: 1;
    }

    #body_body_txtPassword_Desktop {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -124px;
        background-size: 271px;
    }

    #body_body_txtNewPassword_Desktop {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -124px;
        background-size: 271px;
    }

    #body_body_txtNewPassword2_Desktop {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -124px;
        background-size: 271px;
    }
    #body_body_txtUserName {
        background: url(/Content/gifs/vbxicons2.svg#icon_customer_member_personal) no-repeat -88px;
        background-size: 200px;
    }
}

.formValueColumn .iconReset {
    top: 38px;
    color: #00000089;
    position: relative;
}

.icon1 {
    position: absolute;
    color: #00000089;
    z-index: 1;
    top: 369px;
}

.icon2 {
    position: absolute;
    top: 423px;
    color: #00000089;
    z-index: 1;
}

.icon3 {
    position: absolute;
    top: 473px;
    color: #00000089;
    z-index: 1;
}

#body_body_msg_lblMsg {
    margin-left: 30px;
    display: inline-block;
}

#body_body_txtPassword_Desktop, #body_body_txtSponsorCode {
    background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -124px;
    background-size: 271px;
}

#body_body_txtNewPassword_Desktop {
    background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -124px;
    background-size: 271px;
}

#body_body_txtNewPassword2_Desktop {
    background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat -124px;
    background-size: 271px;
}
#body_body_txtUserName {
    background: url(/Content/gifs/vbxicons2.svg#icon_customer_member_personal) no-repeat -88px;
    background-size: 200px;
}

.theadMedium {
    font-size: medium;
}

#actSummary {
    display: none;
}
/*VBN5 END  */
/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.popup-overlay {
    /*Hides pop-up when there is no "active" class*/
    visibility: hidden;
}

.editorFieldset {
    background-color: White;
    border-style: double;
    border-width: 5px;
    box-shadow: 10px 10px 10px gray;
    padding: 10px;
    float:left;
    max-width:400px;
    margin:10px;
}
.OverViewColumnSingleDiv {
    column-count: 1 !important;
}


#wld434_BillPaySSO > div > div {
    margin-left: 0px;
    margin-right: 0px;
}

@-moz-document url-prefix() {
    #body_body_txtPassword, #body_body_txtPassword_Desktop, #body_body_txtNewPassword_Desktop, #body_body_txtNewPassword2_Desktop {
        background: url(/Content/gifs/vbxicons2.svg#icon_action_override_lock) no-repeat;
        background-size: 25px;
    }

    #body_body_txtUserName {
        background: url(/Content/gifs/vbxicons2.svg#icon_customer_member_personal) no-repeat;
        background-size: 25px;
    }

    .overviewTable {
        width: -moz-available;
        max-width: 94%;
    }

    .overviewModule .account-box {
        height: 280px;
    }

    .searchCriteria .calendar {
        width: 105px !important;
    }
}

/* Safari-specific stuff */
a[href^=tel] { /* don't change phone number styling */
    text-decoration: inherit;
    color: inherit;
}