@font-face { font-family: 'FontAwesome'; src: url('/Content/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/Content/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/Content/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/Content/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/Content/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/Content/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;}

.container.main-content { margin-top: 30px;}
a { color: #667FA4;}
.modal .modal-dialog { margin-top: 100px; }
.modal button.close { margin-top: 10px; }
.modal .header h2 { font-size: 26px; font-weight: bold; color: #375A79; margin: 25px 0px 10px 0px;}
.modal .body-container { margin-bottom: 10px; }
.modal .modal-footer { margin-bottom: 10px; }
/************************-- HEADER --*********************************************/ header .main-sub-header { height: 25px; background-color: #59A563; width: 100%; }
header { background: #4E637D; }
    header .header-container .logo-container { display: block; max-width: 180px; float: left; padding-bottom: 0; height: auto; padding-left: 10px; padding-right: 20px; padding-top: 16px; padding-bottom: 14px; }
        header .header-container .logo-container img { width: 100%; }
        header .header-container .logo-container .logo { border: none; -moz-box-sizing: border-box; width: 135px; float: left; background-size: contain; background-repeat: no-repeat; }
    header .header-container .menu-container { display: none; }
    header .top-container { min-height: 58px; padding-top: 10px; display: none; background: #4E637D; }
.logo-container { padding-left: 10px; padding-top: 15px; }

header .top-container .logo-container { display: block; max-width: 180px; float: left; padding-bottom: 0; height: auto; padding-left: 20px; padding-right: 20px; padding-top: 14px; padding-bottom: 14px; }
    header .top-container .logo-container img { width: 100%; }
    header .top-container .logo-container .logo { border: none;  -moz-box-sizing: border-box; width: 200px; float: left; background-size: contain; background-repeat: no-repeat; }


header .header-container .my-account-header { display: none; Font-size: 32px; Font-weight: bold; Letter-spacing: -2px; Text-shadow: 2px 2px #ddd; color: #375A79; float: left; padding-top: 12px; padding-bottom: 0px; }
p.privacy-text-size { font-size: 14px; color: #4F535D; font-family: 'Formata-Regular'; font-weight: 400; line-height: 1.5; font-style: normal; background: url(/PFCARD/Images/bg-pattern.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: contents;}
ul.privacy-text-size { font-size: 14px; }
@media(max-width: 360px)
{
    p.privacy-text-size { font-size: 13px; color: #4F535D; font-family: 'Formata-Regular'; font-weight: 400; line-height: 1.5; font-style: normal; background: url(/PFCARD/Images/bg-pattern.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: contents;}
    ul.privacy-text-size { font-size: 13px; }
}


header .top-container ul.top-menu li a:active::after, header .top-container ul.top-menu li a:hover::after, header .top-container ul.top-menu li a.active::after { content: ""; display: block; width: calc(100% + 6px); margin-left: -3px; height: 3px; background-color: #FFF; margin-bottom: -3px; }
header .top-container ul.top-menu li a:hover {text-decoration: none;}
header .top-container ul.top-menu li a:active, header .top-container ul.top-menu li a:hover, header .top-container ul.top-menu li a.active { font-weight: bold; }
header .top-container ul.top-menu .btn { padding-top: 5px; padding-bottom: 5px; }
header .top-container ul.top-menu li.log-out, header .top-container ul.top-menu li.activate { padding-top: 7px; }
header .top-container ul.top-menu li.messages { padding-top: 7px; }
header .top-inner-container .nav > li > a { padding: 10px; }
header .header-container .menu-container .navbar-nav > li.dropdown span.glyphicon-chevron-down,
.nav-menu-items-container .dropdown span.glyphicon-chevron-down { font-size: 12px; }
header .header-container .menu-container .navbar-nav > li.dropdown > a { font-family: "Formata-Light"; font-size: 18px; margin-top: 45px; padding-left: 12px; padding-right: 12px; color: #FFF; }
    header .header-container .menu-container .navbar-nav > li.dropdown.active > a {font-weight: bold;}

    header ul.top-menu { margin: 0; }
header .top-menu li { list-style: none; padding-top: 7px; }
    header .top-menu li.divider { height: 15px; border-left: 1px solid #fff; float: right !important; margin-top: 20px; }

    header .top-menu li a { font-family: "Formata-Light"; float: left; color: #FFF; padding: 10px; cursor: pointer; }
.nav > li > a:hover, .nav > li > a:focus,
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {color: #fff; background-color: #4E637D; border-color: #FFF; font-weight: bold; /*font-family: "Formata-Regular" !important;*/ }
li.dropdown:hover { background-color:none; }
header .circle { font-family: 'Formata-Light'; position: absolute; border-radius: 50%; display: inline-block; background-color: #D22126;  color: #FFF; text-align: center; font-size: 9px; }
header .top-menu .circle { width: 12px; height: 12px; left: 9px; top: -5px; }
header .mobile-top-menu .circle { width: 14px; height: 14px; left: 13px; top: -5px; }

header .circle[data-badge]:after { content: attr(data-badge); position: absolute; }
header .top-menu .circle[data-badge]:after { height: 12px; width: 12px; left: 0px; top: 2px; }
header .mobile-top-menu .circle[data-badge]:after { height: 14px; width: 14px; left: 0px; top: 3px; }
header .new-account-messages { font-family: "Formata-Light"; float: left; color: #FFF; padding: 10px; cursor: pointer; }
.modal .modal-dialog.modal-pdf { width: 98%; max-width: 1200px; margin-top: 80px; }

@media(min-width:335px) { header .header-container .logo-container { max-width: 200px; }
}

@media(min-width:500px) {
    header .header-container .logo-container { max-width: 230px; }

}

@media (min-width: 768px) { 
    header .header-container .logo-container { padding-left: 20px; }
    header .header-container .my-account-header { display: none; margin: 0px 10px 10px 10px; }
    /*header .header-container .logo-container { margin: 0 0 0 2%; }*/
    header .header-container .mobile-top-menu ul.nav.navbar-nav { width: 100%; }
    .modal .modal-dialog { margin-top: 170px; }
}

@media(min-width:992px) {
    header .top-container ul.top-menu li.log-out .btn, header .top-container ul.top-menu li.activate .btn { margin-top: 0; }
    header .header-container .logo-container { width: 230px; display: none; float: right !important; margin-left: -2px; padding-bottom: 15px; padding-left: 0; }
        header .header-container .logo-container .logo { -moz-box-sizing: border-box; width: 250px; float: left; background-size: contain; background-repeat: no-repeat; display: none; }
    header .header-container .menu-container { display: block; }
    header .header-container .mobile-top-menu { display: none; }
    header .header-container { max-width: 970px; padding: 0 15px; }
    header .blue-header { height: 45px; }
    header .top-container { display: block; }
        header .top-container .top-inner-container { margin: auto; padding-right: 16px; }

        header .top-container .logo-container { display: block; max-width: 180px; float: left; padding-bottom: 0px; height: auto; margin-left: -30px; margin-top: 25px; margin-bottom: 15px; }
    header .header-container .my-account-header { display: inline-block; }
        header .header-container .my-account-header.logged-in, header .header-container .my-account-header { margin-top: 15px !important; margin-left: 0px; }
}

@media(min-width:1170px) {
    header .header-container .menu-container { display: block; margin-left: auto; margin-right: auto; max-width: 720px; }
    header .header-container .logo-container { width: 230px; float: left; margin-left: -2px; padding-bottom: 15px; padding-left: 0; }
        header .header-container .logo-container .logo { -moz-box-sizing: border-box; width: 250px; height: 75px; float: left; background-size: contain; background-repeat: no-repeat; }
    header .header-container { padding: 0 15px; }
    header .top-container .top-inner-container { margin: auto; padding-right: 16px; }
    header .header-container .my-account-header.logged-in, header .header-container .my-account-header { font-size: 36px; margin-left: -105px; }
}
/************************-- END of HEADER --*********************************************/

/************************-- LOGIN --*********************************************/

.login-inner-container { padding: 15px; }
.login-container { width: 100%; float: left; background: #fff; border-radius: 15px; padding: 20px; border: 1px solid #ACACAE; }
    .login-container .login-header { color: #375A79; font-size: 24px; margin: 10px 10px 10px 10px; }
    .login-container .form-horizontal .form-group a { width: 100%; float: left; margin-top: 2px; text-align: center; color: #4F535D; }
.login-splash-card-image { max-width: 430px; }
    .login-splash-card-image img { width: 100%; }
.login-splash-card { padding: 10px 50px 50px 50px; padding-left: 0px; display: none; }
.login-splash-card p strong { color: #4E637D; }
.login-splash-card h3 { font-size: 32px; font-weight: bold; color: #4E637D; }
    .login-splash-card .bottom-message { font-size: 15px; }
.login-container .logon-box #LogonButton { min-width: 100%; }
.login-container .alert-danger a { color: #a94442; }
.login-container .logon-alert-box { padding: 15px; }
.login-container .help-block { color: #737373; margin: 10px 5px 0 5px; }

@media (min-width: 992px) {
    ul.mobile-nav.nav.navbar-nav { display: none; }
} 

@media(min-width: 1170px) {
    .login-splash-card h3 { font-size: 32px; font-weight: bold; color: #4E637D; }
    .login-splash-card .bottom-message { font-size: 20px; margin-top: 34px; }
}

/*.login-splash-card p { color: #375A79; }*/


.promo-message .card { display: inline; margin-top: 95px; }


@media(min-width:992px) {
    .login-container {background: #fff; border-radius: 15px; border: 1px solid #ACACAE; margin-left: 15%; padding: 20px; width: 400px; min-height: 400px; margin: 10px 40px 40px 40px; }
        .login-container .login-header { font-size: 32px; font-weight: bold; margin: 0 0 15px 0; }
        .login-container .form-horizontal .form-group a { margin-top: 0px; }
        .login-container .logon-box #LogonButton { margin-right: 7px; }
    .logon-panel .logon-box #LogonButton { margin-right: 7px; }

    .login-column { height: 371px; }
    .login-splash-card { display: block; width: 47%; float: left; }
}

@media(min-width:1200px) {
    .login-splash-card { width: 50%; }
}

.mobile-image { width: 149px; margin-left: -10px; margin-right: 15px; margin-top: 10px; }
.app-store-image { margin-left: -1px; margin-top: 10px; }
.app-container { margin-bottom: 30px; font-size: 14px; }
   /* .app-container p { color: #375A79;  }*/
/************************--END of LOGIN --*********************************************/


/************************-- Footer --*********************************************/


/************************-- START OF HAMBERGURGER --*********************************************/

#hamburgermenu { display: block;}

@media (min-width: 992px) {
    #hamburgermenu { display: none; }
}
@media (max-width: 992px) {
    .menu-icon { float: right; margin-top: -27px; position: relative; width: 33px; height: 19px; }
    .menu-icon em { position: absolute; top: -1px; left: 0; right: 0; bottom: 0; }
    .menu-icon em:before { content: ""; position: absolute; left: 0; width: 33px; background: #236192; height: 3px; top: 8px; }
    .menu-icon em .line-1 { width: 33px; height: 3px; position: absolute; background: #236192; left: 0; top: 0; -webkit-transition: transform .3s; transition: transform .3s; }
    .menu-icon em .line-1:before { content: ""; position: absolute; left: 18px; top: 0; height: 3px; width: 4px; background: #236192; }
    .menu-icon em .line-2 { width: 33px; height: 3px; position: absolute; background: #236192; right: 0; bottom: 1px; -webkit-transition: transform .3s; transition: transform .3s; }
    .menu-icon em .line-2:before { content: ""; position: absolute; right: 18px; top: 0; height: 3px; width: 5px; background: #236192; }

    .hidden { position: absolute; left: 0; top: -500px; width: 1px; height: 1px; overflow: hidden; }
    .open .menu-icon em:before { opacity: 0; }
    .open .menu-icon em .line-1 { width: 33px; top: 50%; margin-top: -1.5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    .open .menu-icon em .line-2 { width: 33px; bottom: 50%; margin-bottom: -1.5px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
}
.page-header-menu { color: #fff; background: #6ab232; background-image: linear-gradient(to bottom,#a5cd39 0%,#6ab232 100%); padding: .05rem .5rem; border-radius: 4px; font-size: 21px; margin-right: 10px; display: block; }
.page-header-menu:active,
.page-header-menu.active,
.page-header-menu:focus,
.page-header-menu.focus { background: #6BB23A; } 

@media (min-width: 360px) {
    .page-header-menu { padding: .25rem 1rem; }
}
@media (min-width: 768px) {
    .page-header-menu { margin-top: 5px; }
}
@media (min-width: 992px) {
    .page-header-menu { margin-top: 34px; width: 48px; height: 48px; }
}
.page-header-menu__line { position: absolute; left: 7px; width: 17px; height: 2px; background-color: #5C2E91; transition: all 0.25s ease-in-out; }
@media (min-width: 992px) {
    .page-header-menu__line { left: 10px; width: 24px; }
}
.page-header-menu__line--1 { top: 10px; }
@media (min-width: 992px) {
    .page-header-menu__line--1 { top: 15px; }
}
.page-header--nav-open .page-header-menu__line--1 { top: 15px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.page-header--nav-open .page-header-menu__line--3 { top: 15px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
@media (min-width: 992px) {
    .page-header--nav-open .page-header-menu__line--1 { top: 21px; }
}
.page-header--clone .page-header-menu__line--1 { top: 10px; }
.page-header--clone.page-header--nav-open .page-header-menu__line--1 { top: 15px; }
.page-header-menu__line--2 { top: 15px; }
@media (min-width: 992px) {
    .page-header-menu__line--2 { top: 21px; }
}
.page-header--nav-open .page-header-menu__line--2 { opacity: 0; }
.page-header--clone .page-header-menu__line--2 { top: 15px; }
.page-header-menu__line--3 { top: 20px; }
@media (min-width: 992px) {
    .page-header-menu__line--3 { top: 27px; }
}

/************************-- END OF HAMBERGURGER --*********************************************/

/************************-- Footer --*********************************************/

footer { font-family: "Formata-light"; width: 100%; min-height: 150px; display: block; margin-top: 25px; background-color: #4F535D; border-top: 1px solid #ccc; }
    footer a, footer a:hover, footer a:focus { color: #fff; font-size: 14px; }
    footer .container { padding-left: 0; padding-right: 0; }
    footer .footer-container { background-color: #4F535D; color: #fff; text-align: center; padding: 10px; }
        footer .footer-container .footer-top { padding-top: 10px; padding-bottom: 10px; max-width: 1170px; margin: auto; text-align: center; }
            footer .footer-container .footer-top img { height: 40px; }

        /*footer .footer-container .footer-copyright .visa_logo {width: 270px; }*/

        footer .footer-container .footer-links { font-size: 12px; padding: 15px; padding-bottom: 7px; max-width: 1170px; margin: auto; text-align: center; }
            footer .footer-container .footer-links .footer-link { padding: 5px; }
            footer .footer-container .footer-links ul li:before { content: '\2022'; font-size: 14px; margin-right: .5em; }
            footer .footer-container .footer-links ul li:first-child:before { content: ''; font-size: 14px; margin-right: 0; }
            footer .footer-container .footer-links ul li { padding-right: 0; }
            footer .footer-container .footer-links .footer-link ul li a { color: #FFFFFF; text-decoration: none; }

    footer .footer-copyright { padding: 15px; background-color: #4F535D; width: 100%; color: #fff; text-align: center; font-size: 12px; margin-top: 0; max-width: 1170px; margin: auto; margin-bottom: 0; }
    footer .footer-separator { width: 100%; height: 3px; background: #fff; position: relative; }


@media(min-width:1170px) {
    /*footer .footer-container .footer-copyright { width: 1170px; margin-left: auto; margin-right: auto; }
     footer .footer-container .footer-links { width: 1170px; margin-left: auto; margin-right: auto; }*/

}

@media(min-width:992px) {
    footer { margin-top: 40px; }
        footer .footer-container { }
            footer .footer-container .footer-copyright { margin-top: 5px; padding-top: 0; }
            footer .footer-container .footer-links { text-align: center; }
                footer .footer-container .footer-links .footer-link { margin-right: 10px; display: inline-block; }
        footer .footer-disclaimer-text { }
        footer .footer-container .footer-top { text-align: right; }
        
}

@media(min-width:768px) {
    footer .footer-container .footer-top img { height: 65px; }
    footer { margin-top: 40px; }
        footer .footer-container { }
            footer .footer-container .footer-copyright { margin-top: 5px; padding-top: 0; }
            footer .footer-container .footer-links { }
                footer .footer-container .footer-links .footer-link { margin-right: 10px; display: inline-block; }
        footer .footer-disclaimer-text { }
}



/************************-- Start of SIDE MENU--**************************************/
.printname, #divAccountInfo { margin-left: 5px; margin-bottom: 7px; color: #737373; }
.emphasize { font-size: 20px; font-weight: bold; margin: 0 0 10px 0; color: #375A79; text-transform: capitalize; }

.panel.panel-quickActions .panel-body { padding:0;}
    .panel.panel-quickActions .panel-body ul { list-style: none; padding: 0; }
        .panel.panel-quickActions .panel-body ul li { padding: 5px 0; padding-left: 15px;  }
            .panel.panel-quickActions .panel-body ul li a { font-size: 14px; padding: 8px 12px 8px 18px; padding-left: 5px; font-weight: bold; cursor: pointer; color: #4F535D; text-decoration: none; }
.panel.panel-quickActions .panel-body ul li.active { background-color: #4E637D; color: #fff; }
.panel.panel-quickActions .panel-body ul li.active a { color: #fff; }
            .panel.panel-quickActions .panel-body ul li:hover, .panel.panel-quickActions .panel-body ul li:active { background: #667FA4; }
                .panel.panel-quickActions .panel-body ul li a:hover, .panel.panel-quickActions .panel-body ul li:hover a { text-decoration: none; color: #fff; font-weight: normal; }

.panel-rewards .panel-heading {  text-align: center; }
.panel-rewards .panel-body { padding: 10px 15px 20px 15px; text-align: center; }
    .panel-rewards .panel-body .reward-value { font-size: 36px; font-weight: bold; margin: 5px; color: #375A79; }


@media (min-width: 992px) { .printname.no-email { margin-bottom: 29px; }
    .panel-rewards { display: none; }                                           /* bottom */
    .hidden-xs.hidden-sm .panel-rewards { display: block; margin-left:5px; }    /* left */
    .btn.btn-default.btnViewRewards { width: 100%; }
    .panel-rewards .panel-heading { text-align: left; }
    .panel-rewards .panel-body { text-align: left; }

}
/************************-- End of SIDE MENU --**************************************/


@media (min-width: 768px) {
    .top-menu-container { display: inline-block; color: #FFF; position: absolute; left: 73px; margin-top: 26px; }
        .top-menu-container nav > ul { float: left; height: 50px; margin-bottom: 0; margin-top: 0; padding-left: 0; position: relative; }
            .top-menu-container nav > ul > li { position: relative; list-style: none; display: inline-block; cursor: pointer; margin-right: 20px; font-size: 14px; }
                .top-menu-container nav > ul > li.active { border-bottom: solid 3px #65035E; /*color: #65035E;*/ }
                .top-menu-container nav > ul > li .allycon-glyph-caret-right { display: none; }

                .top-menu-container nav > ul > li.opened-menu { z-index: 999; }
                    .top-menu-container nav > ul > li.opened-menu.active { }

}

/************************--  MENU OVERLAY --**************************************/
.nav-menu-overlay { overflow-y: scroll; overflow-x: hidden; transition: all 0.5s ease-in-out; position: absolute; background-color: #FFF; z-index: 9997; width: 100%; left: 0px; top: 0px; height: 100px; margin-top: 76px; display: none; border-top: 1px solid #236192; }
.nav-menu-overlay.opened { display: block; }
.nav-menu-overlay.opened .dropdown-backdrop { display: none;}
.nav-menu-overlay .nav-menu-button-container .btn.btn-primary { margin: 0 auto 15px; }
.nav-menu-overlay .nav-menu-items-container { width: 100%; }
.nav-menu-overlay .nav-menu-items-container > li { padding-left: 0; padding-right: 0; }
.nav-menu-overlay .nav-menu-items-container > li > a { /*font-family:'Lato-Bold';*/ width: 100%; display: block; list-style: none; text-align: center; display: block; cursor: pointer; border-bottom: 1px solid #236192; padding-bottom: 10px; padding-top: 10px; }
.nav-menu-overlay .nav-menu-items-container > li.open > a,
.nav-menu-overlay .nav-menu-items-container > li > a:active,
.nav-menu-overlay .nav-menu-items-container > li > a:focus,
.nav-menu-overlay .nav-menu-items-container > li > a:hover { color: #FFF; text-decoration: none; background-color: #236192; border-radius: 0; }
    .nav-menu-overlay .nav-menu-items-container > li > a > span.glyphicon-chevron-down { display: none; }
.nav-menu-overlay .nav-menu-items-container .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; display: block; padding: 10px 0; border-radius: 0; }
    .nav-menu-overlay .nav-menu-items-container .open .dropdown-menu > li > a { color: #FFF; padding: 7px 20px; font-family: "Formata-Light"; }
        .nav-menu-overlay .nav-menu-items-container .open .dropdown-menu > li > a:hover { background-color: #f9fcff; color: #4E637D; }
.nav-menu-overlay .nav-menu-items-container .open .dropdown-menu > li > a.active { font-weight: bold;}
.nav-menu-overlay .nav-menu-button-container { width: 100%; margin-top: 30px; padding: 5px; text-align: center; }
.nav-menu-overlay.opened { display: block; margin-top: 74px; }

    .nav-menu-overlay .dropdown a { font-family: "Formata-Light"; font-size: 18px; }
header .header-container .nav-menu-overlay.opened ul.nav.navbar-nav > li.dropdown.open { background: #667FA4; color: #fff; }
header .header-container .nav-menu-overlay.opened ul.nav.navbar-nav > li.dropdown.open a.dropdown-toggle { color: #FFFFFF; background-color: #4E637D; }

    @media (min-width: 768px) { .nav-menu-overlay .nav-menu-button-container { padding: 5px 30px 5px 30px; }
    .nav-menu-overlay .nav-menu-items-container > li { padding-left: 30px; padding-right: 30px; }
    .nav-menu-overlay.opened { margin-top: 68px; }
}
@media (min-width: 992px) {
    .nav-menu-overlay {display: none;}
    .nav-menu-overlay.opened { display: none; }
    .subleftmenuitemshadow { display: none;}
    li.nav-menu-overlay-divider {display: none;}
}
.nav-menu-overlay button.white { background-color: #475860; border: 1px solid #CCC; color: #FFF; }
.nav-menu-overlay .nav-menu-items-container li { font-size: 16px; width: 100%; display: block; list-style: none; text-align: center; display: block; cursor: pointer; }
.nav-menu-overlay .nav-menu-items-container li.open { border-bottom: 1px solid #236192;}
.nav-menu-overlay .nav-menu-items-container .dropdown-menu.privacy-policies li.sub-menu { text-transform: none; }
.nav-menu-overlay .nav-menu-items-container li.nav-menu-overlay-divider { padding-right: 10px; padding-left: 10px; position: relative; margin-top: 10px; margin-bottom: 10px; top: -0.1em; color: #4FC143; width: 100%; }
@media (min-width: 992px) {
    .nav-menu-overlay { display: none; }
    .nav-menu-overlay.opened { display: none; }
    li.nav-menu-overlay-divider { display: none; }
}
/************************--  End of MENU OVERLAY --**************************************/

/************************--  One off classes --**************************************/
.unselectable { -webkit-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none;}
.paperlessFaq { cursor: pointer; }
.forgot-password { width: 100%;display: block;}
.log-out-alert { margin: 30px 35px; text-align: center; }
@media (min-width: 1024px) {
    .forgot-password { width: auto;display: inline; }
}

.validation-summary-errors ul { list-style-type: none; padding: 0; }
.phone-stopscroll { overflow: hidden; position: relative; height: 100%; }
.enroll-box p { font-size:16px; line-height: 35px;}
.enroll-box .row:nth-child(3) { margin-top: 5px;}
.logon-box .form-group:nth-child(3) { margin-top: 6px;}
.statement-box { border: 1px solid #236192;border-radius: 0;margin-left: 0;margin-right: 0;padding: 10px 5px; margin-bottom: 15px;}

/*These are the buttons that show the Help & Print*/
.btn-signout { /*font-family: 'Lato-Bold';*/ width: 80px; padding: 1px; border-top: none; border-left: none; border-right: none; border-radius: 0; margin: 0 0 5px 10px; background-color: transparent;padding-top: 0;height: 35px;border-bottom: none; background-image: none;}
.btn-signout:active,
.btn-signout:focus,
.btn-signout:hover,
.btn-signout.active,
.btn-signout.focus,
.btn-signout.hover { background-image: none; text-decoration:underline; outline: none;}
@media (min-width: 480px) {
    .btn-utility-container { top: 0;}
}
/*This is for the alerts textbox next to the radio buttons*/
.alert-input { width: 50px; display: inline; padding: 2px;}

/** Used for bar charts such as the expense report ***/
.bargraph { background-color: #24627c; height: 20px; display: block;}
.form-group-tran-amount .currency-input-group, .form-group-date-range  .date-input-group { }
.table.tblTrans { margin-top: 20px; }

.row.special-data { margin-bottom: 15px;}
    .row.special-data .text-center {margin:10px 0;}
.help-block.warning { color: #f27e21; padding-left: 35px; }
@media (min-width: 768px) {
    .update-account-info input, .reset-password-panel input,
    .add-account input, .logonchallenge-panel input,
    .security-question-panel select, .security-question-panel input { max-width: 350px; }
    .row.special-data .text-center { margin: 0; }
    
}
.show-page-panel h6.section-title { font-size: 18px; font-weight: bold; margin: 3px; color: #375A79; }

.row.special-data p.summary-values { font-size: 36px; font-weight: bold; margin: 5px; color: #375A79; }
.row.special-data h6.section-title { font-size: 16px; font-family: 'Formata-Regular'; margin-right: -5px; margin-left: 0; padding-bottom: 0; margin-bottom:0; }
/** the panels are broken into section and this style is applied to the title of those sections ***/
h6.section-title { color: #4E637D; font-weight: bold; font-size: 16px; font-family: 'Formata-Regular'; /*border-bottom: 1px solid #236192;*/ padding-bottom: 10px; margin-right: -5px; margin-left: 0; }
.show-page-panel h6.section-title {margin: 15px 0px 0px 0px;}
h2.section-title { margin-top: 10px; font-size: 18px; font-family: 'Formata-Regular'; border-bottom: 1px solid #236192; padding-bottom: 10px; margin-right: -5px; margin-left: 0; }
/** used in online statements to highlight a row ***/
tr.transactionline:hover { cursor: pointer; background-color: #eeefef; }
#TransactionList { margin-top:20px;}
.panel .accordion-content { padding-left: 10px; padding-right: 10px;}
/** make a payment confirmation number label ***/
p.confirmation-label { font-family: 'Formata-Regular'; }
#SavedCardDetailsBlock .CardExpiration-group { margin-left: 20px;}
#CardDetailsBlock > div { margin-left: 5px; }

.panel.payment-confirmation .panel-body .row div:first-child,
.recurring-confirmation-panel .panel-body .row div.success-icon { text-align: center; }
.panel.payment-confirmation .panel-body .row div:last-child { padding-top: 5px; }
    .panel.payment-confirmation .panel-body .row div:last-child p:first-child { color: #4E637D; font-size: 16px; }
.panel.payment-confirmation .panel-body .row div:first-child .glyphicon-ok-sign,
.recurring-confirmation-panel .panel-body .row div.success-icon img,
.payment-confirmation .panel-body .row div.success-icon img { max-height: 100px; margin: 30px; }

@media (min-width: 768px) {
    p .confirmation-label { margin-bottom: 0; margin-top: 7px; }
    .panel.payment-confirmation .panel-body .row div:first-child {text-align: center;}
    .panel.payment-confirmation .panel-body .row div:last-child { padding-top: 35px; }
    .panel.payment-confirmation .panel-body .row div:first-child .glyphicon-ok-sign,
    .recurring-confirmation-panel .panel-body .row div.success-icon > img.ach { margin-top: 85px; }
    .recurring-confirmation-panel .panel-body .row div.success-icon > img.card { margin-top: 55px; }
    #CancelForm button#SubmitButton { float: right; }
}
@media (min-width: 1200px) {
    .recurring-confirmation-panel .panel-body .row div.success-icon > img.ach { margin-top: 65px; }
    .recurring-confirmation-panel .panel-body .row div.success-icon > img.card { margin-top: 25px; }
}
    /** a container that is used for styling the DATE inputs ***/
    .date-input-container input { display: inline; padding: 2px; }
        .date-input-container input:nth-child(1) { width: 25px; }
        .date-input-container input:nth-child(2) { width: 25px; }
        .date-input-container input:nth-child(3) { width: 40px; }
    .currency-input-container { width: 200px; }

    /** a container that is used for styling the PHONE NUMBER inputs ***/
    .phone-input-group { width: 100%; }
        .phone-input-group input.form-control, .phone-input-group input.form-control:focus { box-shadow: none; -webkit-box-shadow: none; }
    .currency-multi-input-container input.form-control, .currency-multi-input-container input.form-control:focus { box-shadow: none; -webkit-box-shadow: none; }
    .currency-input-container input.form-control, .currency-input-container input.form-control:focus { box-shadow: none; padding: 6px 0; -webkit-box-shadow: none; }
    .date-input-group input.form-control, .date-input-group input.form-control:focus { box-shadow: none; -webkit-box-shadow: none; }
        .date-input-group input.form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%); } }
    span.input-group-addon:focus { border-color: #66afe9; outline: 0; }
    .phone-input-group .input-group-addon { padding: 6px 8px; }
    .phone-input-group.input-group .input-group-addon:not(:first-child) { border-left: none; border-right: none; padding-left: 3px; padding-right: 3px; }
    .phone-input-group.input-group .input-group-addon:first-child { border-right: none; border-bottom-left-radius: 4px; border-top-left-radius: 4px; padding-right: 6px; }
    .phone-input-group.input-group input:not(:last-child) { padding-left: 0; padding-right: 0; border-left: none; border-right: none; }
.phone-input-group.input-group input:last-child { border-left: none; padding-left: 0; width: 60px; }
    .phone-input-group.input-group input { text-align: center; }
    .date-input-group input { border-right: none; }
    .currency-multi-input-container input { border-left: none; }
    .currency-input-container input { border-left: none; }
    .currency-multi-input-container input:not(:last-child) { border-right: 0; border-left: 0; padding-left: 0; padding-right: 0; }
    .currency-multi-input-container .input-group-addon:nth-child(3) { border-left: none; border-right: none; }
    .currency-multi-input-container .input-group-addon:first-child { border-bottom-left-radius: 4px; border-top-left-radius: 4px; border-right: 0; }
    .phone-input-group { max-width: 180px; }

    @media (min-width: 768px) {
        .phone-input-group input.form-control { box-shadow: none; }
    }

    /** A style for the pending payments table - the mobile version of that table ***/
    table.table-pending-payments > tbody > tr > td { padding: 2px; line-height: 1.1; border-top: none; }
    table.table-pending-payments > tbody > tr.first-item > td { padding-top: 7px; }
    table.table-pending-payments > tbody > tr.last-item { border-bottom: 1px solid #ddd; }
        table.table-pending-payments > tbody > tr.last-item > td { padding-bottom: 7px; }

    /*This is used to fix a width issue on phone devices*/
    #mainContentDiv > .row,
    .row.main-container-row { margin-left: -5px; margin-right: -5px; }

        /*This fixes the padding around the main rows within the main content div. It reduces the paddings to make use of the space.*/
        #mainContentDiv > .row > .col-xs-12 { padding-right: 10px; padding-left: 10px; }

    /* This is used on the homepage's enrollment box */
    h5.enroll-title { margin-top: 0; font-weight: bold; }

    span.helpModalHeader { font-size: 30px; margin-top: 20px; margin-bottom: 10px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; display: block; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; }

    .currency-multi-input-container { max-width: 300px; display: inline-block; }
        .currency-multi-input-container .input-label { max-width: 100px; display: inline-block; }
        .currency-multi-input-container .input-container { max-width: 230px; display: inline-block; }
            .currency-multi-input-container .input-container .input-group-addon:not(:first-child):not(:last-child) { border-left: none; border-right: none; }
            .currency-multi-input-container .input-container input:last-child { border-left: 0; width: 50px; padding: 4px; }
    input.form-control.last-ssn, input.form-control.exp-date, input.form-control.ccv { /*width: 80px;*/ display: inline; }
    input.form-control.middle-intial { /* width: 80px;*/ }
    .radio.date-radio input[type="radio"] { margin-top: 10px; }

    .currency-input-group { width: 100%; }
    .date-input-group { cursor: pointer; max-width: 170px; }
    .exp-date-input-group { width: 118px; cursor: pointer; }

    .panel.travel-not-override #ExpirationDate { max-width: 80px; }
    .panel #CVC { max-width: 60px; }
    .panel.enrollment #CVC { max-width: none; }

    @media (min-width: 768px) {
        .panel.enroll-user .form-control, .panel.panel-default #PasswordBox, .panel.forgot-pw-panel .form-control { max-width: 350px; }
        .enroll-user .panel-body button#NextButton { float: right; }
        .panel.forgot-pw-panel .panel-body #NextButton { float: right; }
        .logonchallenge-panel { margin-bottom: 50px; }
            .logonchallenge-panel .security-question { margin-bottom: 5px; }
            .logonchallenge-panel .row.btnSubmit > div { text-align: right; }
        .currency-input-group { width: 150px; }
        input.form-control.account-number, input.form-control.first-name, input.form-control.last-name, .form-group.state .control-dropdown-wrapper { /*width: 500px;*/ }
        .form-horizontal .control-label.forgot-pw-options-label { text-align: left; }        
    }
    @media (min-width: 992px) {
        .logonchallenge-panel .security-question {text-align: left;}
    }

    #PaymentHistory .clickbutton { cursor: pointer; }
    #PaymentHistory tr.addPaddingRight td { padding-right: 10px; }

    h6.section-title.top-margin, h2.section-title.top-margin { margin-top: 30px; }
    #IsDefaultAccount { width: 24px; height: 24px; }
    #defAcctLbl { padding-left: 0px; }
    .esign-disclosure .section-title, .terms-of-use .section-title { margin-top: 30px; }
    .esign-disclosure p:last-child { margin-bottom: 30px; }
    .terms-of-use-divider hr { border-color: #979797; }
    th.hidden-header { opacity: 0; }
    .pull-right.download-trans { float: right !important; }
    .pull-right > .dropdown-menu { right: 8%; }

    /************************--  END OF One off classes --**************************************/

    /************************--  START NEW MENU --**************************************/
    nav { display: none; }
        nav.sidebar .caret { float: right; margin-top: 7px; color: #236192; }

    @media (min-width: 768px) {
        .navbar-nav > li { float: left; margin: 0; }
    }
    @media (max-width: 992px) {
        .navbar-nav .open .dropdown-menu {background-color: transparent;}
    }


    @media (min-width: 992px) {
        nav { display: block; }
        .navbar-default { background-color: #fff; }
        nav.sidebar .container-fluid { padding: 0; }
        nav.sidebar {background: none; width: 100%; max-width: 250px; height: 100%; float: left; margin-bottom: 0px; font-size: inherit; margin-top: 20px; border: none; }
            nav.sidebar li { width: 100%; }
            nav.sidebar.navbar.sidebar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 0px; }
            nav.sidebar .navbar-brand, nav.sidebar .navbar-header { text-align: center; width: 100%; margin-left: 0px; }
            nav.sidebar a { font-size: 16px; padding: 8px 12px 8px 18px; }
            nav.sidebar .navbar-nav > li.open, nav.sidebar .navbar-nav > li.open > a, nav.sidebar .navbar-nav > li.active > a:hover, nav.sidebar .navbar-nav > li.active:hover, nav.sidebar .navbar-nav > li.open > a:hover, nav.sidebar .navbar-nav > li.open:hover,
            nav.sidebar .navbar-nav > li { background-color: none; }
                nav.sidebar .navbar-nav > li:last-child { border-bottom: none; }
            nav.sidebar .navbar-nav .dropdown.active > .dropdown-menu,
            nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; display: block; }
            nav.sidebar .navbar-nav > li > a { color: #236192; background-color: none; }
            nav.sidebar .navbar-nav > li.active > a { background-color: #f9fcff; color: #236192; border-bottom: 1px solid #ACACAE; }
            nav.sidebar .navbar-nav > li > a:hover, nav.sidebar .navbar-nav > li:hover, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #fff; color: #236192; }
            nav.sidebar .navbar-nav > li.dropdown.open { background-color: #eeefef; }
            nav.sidebar .dropdown-menu > li > a { color: #236192; }
            nav.sidebar .dropdown-menu { padding: 0; }
            nav.sidebar .navbar-nav .dropdown > .dropdown-menu a { background-color: #fff; font-size: 14px; }
            nav.sidebar .navbar-nav .dropdown-menu a.active { background-color: #fff; /*color: #00a5df;*/ font-size: 14px; }
            nav.sidebar .navbar-nav .dropdown > .dropdown-menu a:hover { background-color: #f9fcff; }
            nav.sidebar .navbar-nav > li.dropdown.open > a.dropdown-toggle, nav.sidebar .navbar-nav > li.dropdown.active > a.dropdown-toggle { background-color: #236192; color: #FFF; }
    }
    /************************--  END OF NEW MENU --**************************************/

    /************************--  Start OF Spinning Icons--**************************************/
    .glyphicon-refresh-animate { -animation: spin .7s infinite linear; -webkit-animation: spin2 .7s infinite linear; }

    @-webkit-keyframes spin2 {
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        from { transform: scale(1) rotate(0deg); }
        to { transform: scale(1) rotate(360deg); }
    }
    /************************--  END OF Spinning Icons--**************************************/

    /************************-- HOME PAGE --**************************************/
    @media (min-width: 992px) {
        .logon-box { margin: auto; }
    }

    @media (min-width: 1024px) {
        .logon-box { margin: auto; }
        .navbar-nav > li { float: left; margin: 0 10px; }
        .navbar.sidebar .navbar-nav > li { margin-left:0;}
    }

    /************************-- End of HOME PAGE --**************************************/

    /************************-- Start of ENROLLMENT PAGE --**************************************/
    .panel.enrollment { max-width: 820px; margin: 10px auto; }
        .panel.enrollment .note p { margin: 10px 0 35px 0; font-size: 18px; text-align: center; }
        .panel.enrollment .input-group-expdate .dropdown-wrapper { float: left; }
            .panel.enrollment .input-group-expdate .dropdown-wrapper:last-child { margin-left: 5px; }

        .panel.enrollment .date-input-group .form-control { max-width: unset; }
    .exp-date-input-group input.form-control { border-right: 0; }
    .form-group.payoff-multiple-dates .payoff { margin-right: 40px; }
    .enrollment-paperless .checkbox-inline { padding-left: 0; }
.enrollment-paperless.enrollment-addon button#SubmitButton {float: right;}

.form-group.exp-date-group { margin: 0 0 15px 0; padding: 0; }
        .form-group.exp-date-group > div.col-sm-8 { padding-left: 0; }
        .form-group.exp-date-group > div.col-sm-4 { padding-left: 5px; }
    .form-group.cvc-group { margin: 0; padding: 0; padding-bottom: 15px; }
        .form-group.exp-date-group, .form-group.cvc-group label { padding: 0 15px; }
            .form-group.exp-date-group > div:first-child { text-align: left; }
            .form-group.exp-date-group > div:last-child { margin: 0; padding: 0 10px 0 0; }
                .form-group.exp-date-group > div:last-child .dropdown-wrapper { width: 72px; float: left; }
                    .form-group.exp-date-group > div:last-child .dropdown-wrapper:last-child { margin-left: 5px; }
span#acctBankName { padding-top: 7px; display: inline-block; }

@media (min-width: 768px) { .form-group.exp-date-group > div:last-child { margin-left: -5px; }
        .form-group.exp-date-group, .form-group.cvc-group { margin: 0; padding: 0; padding-bottom: 15px; }
            .form-group.exp-date-group > div:first-child { text-align: right; }
        label .cvc-label { padding-left: 0; padding-right: 0; }
        .form-horizontal .control-label { padding-right: 0; }
        .panel.enrollment .input-group-expdate .dropdown-wrapper:last-child { float: right; }


        .cvc-group > div:first-child { padding: 0; text-align: right; }
        .form-group.cvc-group label { padding: 7px 0 0 0; }
        .form-group.exp-date-group label:first-child { padding-right: 5px; }
        .form-group.exp-date-group .input-group-expdate { padding: 0; padding-left: 8px; }
    input.cellphone-number { max-width: 170px; }
    }

    @media (min-width: 992px) {
        .form-group.exp-date-group > div:last-child .dropdown-wrapper:last-child { margin-left: 25px; }
    }

    /************************-- End of ENROLLMENT PAGE --**************************************/


    /************************-- Start of Online Statements --**************************************/
    .statements-top-text { margin: 10px 0 15px; }
    .online-statement h6.section-title, .online-statement h2.section-title { margin-top: 30px; }
    .account-sum-title, .transactions-title { margin-top: 25px; }
    .onlinestatement-container .control-label-value { margin-top: 7px; font-weight: bold; }
    .panel-body .statementImg { float: left; margin: 15px 10px; }
        .panel-body .statementImg a { color: #4F535D; }
        .panel-body .statementImg i { font-size: 68px; color: #4E637D; vertical-align: middle; margin-right: 10px; }


    @media (min-width: 768px) {
        .panel-body .statementImg:nth-child(4n-3) { margin-left: 10px; }
        .panel-body .statementImg:nth-child(4n) { margin-right: 10px; }
        .panel-body .statementImg { float: left; margin: 15px 8px; }
    }

    @media (min-width: 992px) {
        .panel-body .statementImg:nth-child(4n-3) { margin-left: 0; }
        .panel-body .statementImg:nth-child(4n) { margin-right: 0; }
        .panel-body .statementImg { float: left; margin: 15px 8px; }
    }

    @media (min-width: 1200px) {
        .panel-body .statementImg:nth-child(4n-3) { margin-left: 10px; }
        .panel-body .statementImg:nth-child(4n) { margin-right: 10px; }
        .panel-body .statementImg { float: left; margin: 15px 30px; }
    }

    /************************--End of Online Statements --**************************************/


    /************************-- Start of Customer Service --**************************************/
    .customer-service-view h6.section-title, .customer-service-view h2.section-title { margin-top: 30px; }
    /************************--End of Customer Service --**************************************/

    /************************--Help MOdal for Pending Payments Warning Message --**************************************/
    .modal-body table.pending-payments { margin: 0 auto 20px auto; }
        .modal-body table.pending-payments td { padding: 5px; }
    /************************--End of Help MOdal for Pending Payments Warning Message --**************************************/

    /************************--Recurring Payment --**************************************/
    .setup-recurring #AdditionalAmount { width: 212px; }
.panel.payment legend { margin-left: 0; }

@media (min-width: 768px) { .panel.setup-recurring .col-xs-12.sub-section { margin-left: 33.333%; }
        .panel.payment #ddlExternalAccountID,
        .panel.setup-recurring #ddlPaymentAccount { max-width: 250px; }
    .panel.payment legend { margin-left: 15px; }
    }

    @media (min-width: 992px) {
        .panel.payment .col-xs-12.sub-section { margin-left: 33.333%; }
    }
    /************************-- End of Recurring Payment --**************************************/
    /************************-- Manage Payment Information --**************************************/
    a#linkOnlineBillTerms { text-decoration: underline; }

    @media (min-width: 768px) {
        .panel-add-payment-account input,
        .panel-edit-payment-account input,
        .panel-edit-payment-account select { max-width: 400px; }
    }
    /*.panel-edit-payment-account .checkbox label,
.panel-force-add-payment-account .checkbox label,
.panel-add-payment-account .checkbox label { margin-left: 30px; }*/
    .panel-edit-payment-account .checkbox label input,
    .panel-force-add-payment-account .checkbox label input,
    .panel-add-payment-account .checkbox label input { margin-left: -30px; margin-top: -2px; }

    /************************-- Manage Payment Information --**************************************/
    /************************-- Enroll add On --**************************************/
    .enrollment-addon .link-e-disclosure { text-decoration: underline; }
    .enrollment-addon .enroll-paperless-desc { margin-left: 50px; margin-right: 20px; }
.enrollment-addon .checkbox-paperless,
.enrollment-addon .esignDisclosure { font-weight: bold; }
    .enrollment-addon .esignDisclosure span.help-block { font-weight: normal; }

    /************************-- Enroll add On --**************************************/


    /************************-- Account Overview --**************************************/
    div.paragraph-icon { position: absolute; left: -5px; }
    .extra-padding p { padding-left: 15px; padding-right: 15px; }
    .special-data .form-control-static { padding-top: 0; }
    .transaction-container .tran-title { background-color: #667FA4; color: white; margin: 5px; padding: 10px; cursor: pointer; }
    .transaction-container .posted-tran-title { background-color: #4E637D; }

    .transaction-container .transaction-row-icon { display: inline-block; }
    .transaction-container .tran-content { margin: 5px; padding: 5px; }
        .transaction-container .tran-content table { margin: 0 5px 10px 5px; width: 100%; }
            .transaction-container .tran-content table td > div { padding: 0; }
        .transaction-table tr,
        .transaction-container .tran-content tr { border-bottom: 1px solid #ACACAE; }
            .transaction-table tr td,
            .transaction-container .tran-content tr td { padding: 4px; }
                .transaction-container .tran-content tr td:nth-child(2),
                .transactions-container .transaction-list-table tr td:nth-child(2) { text-align: center; }
        .transaction-container .tran-content .hidden-xs tr td:last-child,
        .transactions-container .transaction-list-table.hidden-xs tr td:last-child { text-align: right; }


    /************************-- Account Overview --**************************************/

    .dropdown-menu > li > a { padding: 10px 20px; }
    header .header-container .mobile-top-menu { display: block; max-width: 225px; height: 60px; float: right; padding-right: 5px; margin-top: 15px; }
        header .header-container .mobile-top-menu .menu-item-box { padding: 15px; float: right; margin-top: -10px; margin-right: -10px; }
            header .header-container .mobile-top-menu .menu-item-box .menu-item-box-icon { font-size: 18px; color: #FFF; text-align: center; }
            header .header-container .mobile-top-menu .menu-item-box .menu-item-box-text { font-size: 11px; color: #FFF; }

    @media (min-width: 992px) {
        header .header-container .mobile-top-menu { display: none; }
    }

    .navbar-default, .panel-quickActions { margin-top: 15px; margin-left: 5px;}
        .navbar-default ul.nav.navbar-nav { float: left; margin: 0; width: 100%; }
            .navbar-default ul.nav.navbar-nav li.dropdown { display: none; width: 100%; overflow:hidden; }
                .navbar-default ul.nav.navbar-nav li.dropdown.active { background: #fff; display: block; border: 1px solid #ACACAE; border-radius: 15px; }
                    .navbar-default ul.nav.navbar-nav li.dropdown.active ul.dropdown-menu { display: block; }
                    .navbar-default ul.nav.navbar-nav li.dropdown.active .glyphicon-chevron-down { display: none; }
                    .navbar-default ul.nav.navbar-nav li.dropdown.active > a,
                    .navbar-default ul.nav.navbar-nav li.dropdown.active:hover,
                    .navbar-default ul.nav.navbar-nav li.dropdown.active > a:hover { font-size: 20px; font-weight: bold; color: #375A79; background: #fff; }
            .navbar-default ul.nav.navbar-nav .dropdown-menu { padding: 0 0 12px 0; box-shadow: none; -webkit-box-shadow: none; margin: 0; /*outline: 1px solid #DDD;*/ border: 0; /* border: 1px solid #ddd; */ width: 100%; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }
                .navbar-default ul.nav.navbar-nav .dropdown-menu li:hover,
                .navbar-default ul.nav.navbar-nav .dropdown-menu li:hover a { }
                .navbar-default ul.nav.navbar-nav .dropdown-menu li { padding: 0; }
                    .navbar-default ul.nav.navbar-nav .dropdown-menu li a { color: #4F535D; font-size: 14px; padding: 6px 15px 5px 20px; font-weight: bold; cursor: pointer; }
                        .navbar-default ul.nav.navbar-nav .dropdown-menu li a:hover { background-color: #f5f5f5; /*color: #fff;*/ /*font-weight: normal;*/ }
                        .navbar-default ul.nav.navbar-nav .dropdown-menu li a.active { background-color: #667FA4; color: #fff; font-weight: normal; }

    .panel.panel-account { border: 1px solid #375A79; }
        .panel.panel-account .panel-title { border-bottom: 1px solid #375A79; margin: 3px 0; text-align: center; font-weight: normal; text-align: center; font-size: 16px; font-family: 'Formata-Regular'; }
        .panel.panel-account .panel-body { padding-left: 0; padding-right: 0; }
            .panel.panel-account .panel-body span.pull-right { text-align: right; }
    .panel-body .controls .menu-item-box { padding: 15px; float: right; margin-top: -10px; margin-right: -10px; }
        .panel-body .controls .menu-item-box .menu-item-box-icon { font-size: 18px; color: #4E637D; text-align: center; }

    .panel-body .controls i { margin-right: 10px; }
    .panel.manage-payment-info .panel { margin-bottom: 0; }
    .vertical-align { margin-bottom: 20px; }
    .edit-account, .remove-account { cursor: pointer; }
        .remove-account:hover, .edit-account:hover { font-weight: bold; }

    @media (min-width: 768px) {
        .manage-payment-info #btnAddPaymentAccount { padding: 1rem 2.5rem; }
        .vertical-align { display: flex; flex-direction: row; }
            .vertical-align > [class^="col-"],
            .vertical-align > [class*=" col-"] { display: flex; flex-direction: column; align-self: center; align-items: flex-start; }
    }

    /************************-- Activate Card --**************************************/
    .card-activation.oos .form-control.zip { max-width: 110px; }
    @media (min-width: 768px) {
        .card-activation .last-ssn,
        .card-activation .datetimepicker-control,
        .card-activation .ccv,
        .card-activation .date-input-group { width: 100%; max-width: 200px; }

        /** oos - out of session **/
        .card-activation.oos { }
            .card-activation.oos .form-control,
            .actenrolldiv .form-control { max-width: 330px; }
            .card-activation.oos .btn-default,
            .actenrolldiv .btn-default { float: right; }            
            .card-activation.oos .form-control.last-ssn { max-width: 80px; }
            .card-activation.oos .form-control#DivisionList { max-width: 300px; }

    }
    /************************-- Activate Card --**************************************/

    /*Checkbox for freeze-unfreeze option*/
    .light-switch { height: 80px; margin-bottom: 25px; }
        .light-switch .on-off-text { position: absolute; top: 5px; left: 25px; color: #FFF; }
        .light-switch span { font-size: 11px; letter-spacing: 1px; color: #737373; }
            .light-switch span:first-child { margin-right: 27px; }
        .light-switch .control-checkbox-wrapper { margin-right: 45px; float: left; height: 42px; }
            .light-switch .control-checkbox-wrapper .control-checkbox-inner { cursor: pointer; position: absolute; width: 88px; height: 42px; top: 30px; left: 15px; border: 1px solid #87878A; border-radius: 21px; }
                .light-switch .control-checkbox-wrapper .control-checkbox-inner:before { content: ''; width: 34px; height: 34px; background: #ACACAE; position: absolute; top: 3px; left: 3px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: 2px 0px 6px rgba(0,0,0,0.1); -moz-box-shadow: 2px 0px 6px rgba(0,0,0,0.1); -webkit-box-shadow: 2px 0px 6px rgba(0,0,0,0.1); -o-box-shadow: 2px 0px 6px rgba(0,0,0,0.1); }
                .light-switch .control-checkbox-wrapper .control-checkbox-inner.checked:before { content: ''; width: 34px; height: 34px; background: #667FA4; position: absolute; top: 3px; left: 49px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: -3px 0px 6px rgba(0,0,0,0.1); -moz-box-shadow: -3px 0px 6px rgba(0,0,0,0.1); -webkit-box-shadow: -3px 0px 6px rgba(0,0,0,0.1); -o-box-shadow: -3px 0px 6px rgba(0,0,0,0.1); }
                .light-switch .control-checkbox-wrapper .control-checkbox-inner input { width: 150px; opacity: 0; }


    .input-group-addon { color: #667FA4; background-color: #FFF; }
    input[type="tel"]::placeholder { /* Firefox, Chrome, Opera */ text-align: center; }
    input[type="email"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ text-align: center; }
    input[type="email"]::-ms-input-placeholder { /* Microsoft Edge */ text-align: center; }

    .payment input[type="tel"]::placeholder { /* Firefox, Chrome, Opera */ text-align: left; }
    .payment input[type="email"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ text-align: left; }
    .payment input[type="email"]::-ms-input-placeholder { /* Microsoft Edge */ text-align: left; }

    .lock-unlock-card .panel-body .help-block { display: none; color: #667FA4; }
        .lock-unlock-card .panel-body .help-block.saved { display: inline-block; }
    /***********Tooltip*******************/
    .glyphicon-info-sign { color: #667FA4; top: 1px; position: relative; }
    .tooltip-inner { background-color: #4E637D; min-width: 100px; max-width: 150px; padding: 8px 8px; }
    .tooltip.bottom .tooltip-arrow { border-bottom-color: #4E637D; }

    /************************-- Transaction Summary --**************************************/
    .recent-activity-container .pending-tran-row button,
    .recent-activity-container .posted-tran-row button { color: #fff; border: none; text-align: left; padding: 10px; font-size: 14px; font-weight: 400; line-height: 1.5; margin: 5px; margin-left: 0px; }
    .recent-activity-container .pending-tran-row button { background: #667FA4; }
    .recent-activity-container .posted-tran-row button { background: #4E637D; }

    .transaction-summary-container .panel-body #ViewAllTransactions { margin-top: 15px; }

    .transaction-summary-container .recent-activity-container #PostedTransactions tbody > tr.statement-summary { border-bottom: none; }
        .transaction-summary-container .recent-activity-container #PostedTransactions tbody > tr.statement-summary.balance td { padding-bottom: 30px; padding-top: 30px; font-weight: bold; }
    .transaction-summary-container .recent-activity-container #PostedTransactions thead, .transaction-summary-container .recent-activity-container #PendingTransactions thead { display: none !important; }
    .transaction-summary-container .recent-activity-container #PostedTransactions tbody > tr.starting-balance td div { margin-top: 30px; }
    .transaction-summary-container .recent-activity-container #PostedTransactions tbody > tr > td.amount, .transaction-summary-container .recent-activity-container #PendingTransactions tbody > tr > td.amount { text-align: right; }
    .transaction-summary-container .recent-activity-container #PostedTransactions tbody > tr > td.memo, .transaction-summary-container .recent-activity-container #PendingTransactions tbody > tr > td.memo { text-align: center; }
    .transaction-summary-container .activity-search-row > div { margin-bottom: 15px !important; }
    .transaction-summary-container .download-statement-link span { margin-left: 15px; text-decoration: underline; color: #667FA4; letter-spacing: 1px; line-height: 20px; cursor: pointer; }

    @media (min-width: 768px) {
        .transaction-summary-container .recent-activity-container #PostedTransactions tbody tr.statement-summary td:first-child { padding-left: 25px; }
        .transaction-summary-container .recent-activity-container #PostedTransactions tbody > tr.statement-summary > td.amount, .transaction-summary-container .recent-activity-container #PendingTransactions tbody > tr.statement-summary > td.amount { padding-right: 25px; padding-left: 15px; }
    }

    .search-wrapper:before { top: 1px; content: "\f002"; font-family: "FontAwesome"; font-size: 22px; left: 23px; color: #4E637D; position: absolute; }
    input.form-control.search { padding-left: 40px; }
    .box-default-padding { padding: 25px; }
    .panel a { text-decoration: underline; }
        .panel a.btn-default { text-decoration: none; }
    form#ChangePinForm #SubmitButton { float: right; }
    form#ChangePinForm #SubmitButtonNoOldPin { float: right; }

    /**********CONSENT***********/
    .modal-header h4.modal-title { font-size: 20px; font-weight: bold; margin: 3px; color: #375A79; }
    .modal-body #AgreementForm div.buttons { text-align: right; }

.active-control-border { border-color: #66afe9 !important; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important; box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%) !important; }
#BrandLabel1 h2 { font-size: 16px; font-weight: bold; margin-bottom: 5px; color: #4E637D; }

.paperless-modal .modal-footer { border-top: none; }
.paperless-modal p { font-size: 16px; }

/************************-- Balance Transfer --**************************************/
.portfolio-offer { border: 1px solid #667FA4; padding: 15px; border-radius: 8px; text-align: center; margin-bottom: 20px; }
.avail-balance-info { font-size: 16px; }
.avail-balance-info span, .box-value.apr { font-weight: bold; color: #4E637D; }
.box-value { font-size: 16px; }
.offer-columns { margin: 20px 0;  }
.offer-expiration { margin-bottom: 30px; }
.offer-expiration p { font-size: 11px; font-weight: bold; }
.panel.balance-transfer a { text-decoration: none; }
.offer-columns .inner-box:not(:first-child) { margin-top: 20px; }
.bold { font-weight: bold; }
.BTReview-consent { font-size: 12px; margin: 10px -15px; }
.BTReview-consent .control-checkbox-wrapper .control-checkbox-inner{ width: 18px; height: 18px;}
.BTReview-consent .control-checkbox-wrapper .control-checkbox-inner.checked:before { font-size: 21px; top:-7px; left: -1px; }
#interestsFeesTable { border: 1px solid #ACACAE; margin-bottom: 15px; }
#interestsFeesTable .row { margin: 0; }
#interestsFeesTable .row:not(:last-child) { border-bottom: 1px solid #ACACAE; }
#interestsFeesTable .row p { margin-top: 10px; }
.help-block.small-note { font-size: 11px; }
.has-error .form-control-static { color: #a94442; }
@media (min-width: 768px) { .offer-note { margin: 0 40px; }
    .offer-columns .inner-box:not(:first-child) { border-left: 1px solid #667FA4; margin-top: 0; }
    .offer-columns { margin: 20px 0; display: flex; }
    #interestsFeesTable .row .col-sm-8 { border-left: 1px solid #ACACAE; }
    .flex-inline-item.zip label { width: 11%; }
    .flex-inline-item.zip > div.col-sm-3 { width: 22%; }
    .request-balance-transfer-confirm .control-label { text-align: right; padding-top: 7px; margin-bottom: 0; }
}
@media (min-width: 992px) {    
    #interestsFeesTable .row .col-lg-9 { border-left: 1px solid #ACACAE; }
}


#spinner { display: none; }
.cv-spinner.bt { height: 100%; display: flex;  }
    .cv-spinner.bt .spinner { width: 20px; height: 20px; border: 4px #ddd solid; border-top: 4px #2e93e6 solid; border-radius: 50%; animation: sp-anime 0.8s infinite linear; }

@keyframes sp-anime {
    100% { transform: rotate(360deg); }
}

/************************-- Income Information --**************************************/

.income-information-text { padding: 0px 10px 20px 15px; }
.income-information-input-lable { width: 20% !important; }
@media (max-width: 1199px) {
    .income-information-input-lable { width: 25% !important; }
}
.income-information-bottom-text { font-weight: bold; padding: 20px 15px 20px 15px; }
.income-information-btn { text-align: right; }
.income-information-list { list-style-type: disc;}
 @media (max-width: 767px){
    .income-information-list { padding-left: 25px; }
    .income-information-input-lable { width: 100% !important; text-align: center; }
    .income-input-box { padding-left: 0px; border-left: transparent; width: 222% !important; }
    .income-information-tooltip .tooltiptext { left: -200px !important; }
 }

.income-information-tooltip { position: relative; display: inline-block; }
.income-information-tooltip .tooltiptext { visibility: hidden; width: 270px; background-color: #e8ecf1; color: #62758b; text-align: center; border: 1px solid; border-color: #869ab7; padding: 5px 0; position: absolute; bottom: 20px; left: 20px; z-index: 4; }
.income-information-tooltip:hover .tooltiptext { visibility: visible; }

.income-information-bullet-points { padding: 0px 0px 0px 10px }
.income-input-box { padding-left: 0px; border-left: transparent; }
.income-alert-success { color: #62758b; background-color: #e8ecf1; border-color: #869ab7; }


/************************ Auto Pay ************************/
.panel-respond { max-width: 820px; margin: 10px auto; }
.auto-pay-border { border: 1px solid #ddd; border-radius: 10px; color: #4F535D; padding: 15px; }
.panel-respond .form-horizontal .control-label { text-align: left; padding-top: 5px; }
.panel-heading-respond { padding-top: 20px; padding-bottom: 0px; }
.panel-respond h6.section-title.panel-sub-titles { padding-top: 10px; font-size: 17px; font-weight: normal; color: #4F535D; }
.panel-respond.respond-confirmation h6.section-title.panel-sub-titles { color: #4E637D; padding: 5px 0;}
.confirm-autopay-text {color: #4E637D; font-weight: bold; font-size: 14px; font-family: 'Formata-Regular';}
.auto-pay-settings { padding-left: 25px;}
.panel-respond .form-horizontal .taxId-form .control-label { padding-top: 7px; }
.panel-respond .mobile-image, .panel-respond .app-store-image { margin-top: 0; margin-bottom: 10px; width: auto; }
.panel-respond .mobile-image { margin-right: 0; height: 70px; }
.panel-respond .app-store-image { height: 48px; }


@media (min-width: 768px) { .panel-respond .form-horizontal .control-label {  padding-top: 0; }
}

    /************************ FAQ ************************/
    .faq-section-body { padding-top: 10px; padding-bottom: 10px; }