.main-container { background-color: #FFF; width: 100%; padding-top: 20px; }
.main-container .container .home-container { height: 250px; }

@media (min-width: 768px) {
    .main-container .container .home-container { height: 300px; }
    .main-container .container .new-user-container { bottom: 10px; position: absolute; }
    .main-container .container .enroll { height: 100% !important; }
}

@media (min-width: 1200px) {
    .main-container { margin-left: auto; margin-right: auto; margin-top: 0; max-width: 1170px; padding-left: 0; padding-right: 0; padding-top: 20px; border-top: 0; /*border-bottom: 1px solid #555555;*/ /*border-right: 1px solid #2C6680; border-left: 1px solid #2C6680;*/ /*border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;*/ }
}

.title-underline { border-bottom: 3px solid #02836D; width: 80px; margin: 5px 0 10px 0; float: left; }
.title-underline.green { border-color: #2C6680; }

/************************-- HOME PAGE --**************************************/

.home-page-wrapper .wrapper-header { height: 95px; text-align: center; color: #fff; padding-top: 15px; border-top-left-radius: 12px; border-top-right-radius: 12px; background: radial-gradient(at top, #A676DA, #572387); }
.home-page-wrapper { height: 683px; max-width: 486px; background-color: #fff; opacity: 0.95; border-radius: 12px; margin: 20px 20px; }
.home-page-logon { height: 743px; background-color: #2C6680; }
.home-page-wrapper div.logon { padding: 18px 20px 0 20px; position: relative; height: 406px; }
/*.home-page-wrapper div.text { padding: 0 20px 0 20px; border-left: none; position: relative; height: 188px; }*/
.home-page-wrapper div.text { padding: 0 20px 0 20px; border-left: none; position: relative; height: 282px; }
.home-page-wrapper div.logon h2 { margin-top: 20px; }
.home-page-wrapper div.text h2 { margin-top: 50px; }


.home-page-logon .btn-col { position: absolute; bottom: 40px; width: 96%; text-align: center; /*left: 50%; margin-left: -104px;*/ }
.home-page-wrapper .visible-xs { padding: 0 20px 0 20px; }
.home-page-wrapper .visible-xs hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid #2C6680; }
.welcome-box .btn-col p { font-family: 'Roboto Slab'; }
.home-page-wrapper .wrapper-header h2 { margin-top: 5px; font-size: 28px; }
.home-page-wrapper div.logon #helpBlock2 { /*color: #8E60C4;*/ text-align: center; }
.home-page-wrapper.home-page-loggedout { height: 700px; }

.home-page-wrapper.new-text { height: 600px; }
.home-page-wrapper.new-text .text { height: 350px; }

.home-page-logon .logon-box { margin-top: 50px; }

@media (min-width: 339px) {
    .home-page-wrapper .wrapper-header h2 { margin-top: 5px; font-size: 30px; }
}

@media (min-width: 420px) {
    .home-page-wrapper .wrapper-header h2 { margin-top: 20px; }
}

@media (min-width: 480px) {

    .home-page-wrapper div.logon { padding: 18px 50px 0 50px; }
    .home-page-wrapper div.text { padding: 0 50px 0 50px; }
    .home-page-wrapper .visible-xs { padding: 0 50px 0 50px; }
    .home-page-logon .btn-col { width: 85%; }
    .home-page-wrapper div.text h2 { margin-top: 30px; }
}

@media (min-width: 600px) {
    .home-page-wrapper { margin: 20px auto; }
    .home-page-wrapper div.logon { padding: 18px 90px 0 90px; }
    .home-page-wrapper div.text { padding: 0 90px 0 90px; }
    .home-page-logon .btn-col { width: 70%; }
}

@media (min-width: 625px) {
}

@media (min-width: 768px) {
    .home-page-wrapper { margin: 120px 25px; max-width: 970px; height: 400px; }
    .home-page-wrapper div.logon { padding: 20px 35px 0 40px; height: 390px; }
    .home-page-wrapper div.text { margin-top: 20px; padding: 0 30px 0 30px; border-left: 1px solid #2C6680; height: 350px; }
    .home-page-logon { height: 650px; }
    .home-page-logon .btn-col { bottom: 30px; width: 86%; }
    .home-page-wrapper div.text .btn-col { bottom: 10px; }
    .home-page-wrapper div.logon #helpBlock2 { text-align: left; }
    .home-page-wrapper.home-page-loggedout { height: 400px; }
    .home-page-wrapper div.text h2, .home-page-wrapper div.logon h2 { margin-top: 10px; }
}

@media (min-width: 992px) {
    .home-page-wrapper { margin: 120px auto; }
    .home-page-wrapper div.logon { padding: 20px 35px 0 70px; }
    .home-page-wrapper div.text { padding: 0 60px 0 30px; }
}

@media (min-width: 1100px) {
}

.welcome-box { margin-top: 0; }
.home-page-wrapper .welcome-box .welcome-title { margin-top: 30px; text-align: center; font-family: 'Roboto Slab'; font-size: 22px; }
.home-page-wrapper .welcome-box .welcome .alert.alert-success { text-align: center; margin-top: 10px; }
@media (min-width: 480px) {
    .home-page-wrapper .welcome-box .welcome-title { font-size: 26px; }
}

@media (min-width: 768px) {
    .welcome-box { margin-top: 87px; min-height: 172px; }
    .home-page-wrapper .welcome-box .welcome-title { font-size: 28px; margin-top: 0px; }
}

@media (min-width: 992px) {
    .home-page-wrapper .welcome-box .welcome-title { font-size: 30px; margin-top: 0px; }
}


.welcome-box p { /*margin-bottom:25px;*/ font-size: 16px; line-height: 35px; }

.welcome-box .row:nth-child(3) { margin-top: 5px; }
/************************-- End of HOME PAGE --**************************************/


/************************-- Header --**************************************/
header { padding: 25px 10px 5px 20px; background-color: #FFF; border-bottom: 2px solid #2C6680; width: 100%; transition: all 0.25s ease-in-out; position: fixed; top: 0px; left: 0px; z-index: 99999; /*height: 87px;*/ }

header.menu-opened { background-color: #FFF; border-bottom: 2px solid #2C6680; }

header .logo { height: auto; width: 247px; float: left; z-index: 20; }

@media (min-width: 375px) {
    header .logo { width: 275px; }
}
/*header .logo-text { width: 185px; float: left; margin-left: 15px; }

header .logo-text .logo-type { height: 15px; }

header .logo-text .logo-tag-line { font-size: smaller; font-style: italic; font-weight: bold; color: #9c7e0f; letter-spacing: .4px; }*/

header .header-container { width: 100%; }


header .web-title { font-size: smaller; margin-left: 3px; color: #C5CED4; text-transform: uppercase; }

header.menu-opened .web-title { color: #FFF; }


header .logout-container { display: none; }


@media (min-width: 992px) {
    header { position: inherit; padding: 50px 10px 5px 20px; }

    header .logo { height: auto; width: 400px; }

    /*header .logo-text { width: 400px; }

    header .logo-text .logo-type { height: 25px; }

    header .logo-text .logo-tag-line { font-size: small; }*/

    header .web-title { font-size: large; margin-left: 10px; color: #87969D; }

    header.menu-opened { background-color: #FFF; border-bottom: 2px solid #2C6680; }

    header .logout-container { display: block; float: right; right: 1px; bottom: 2px; margin-top: 5px; }
    header .logout-container .log-out { padding-right: 10px; text-transform: uppercase; cursor: pointer; }
    header .logout-container .btn.btn-primary { border-top: none; border-left: none; border-right: none; border-bottom: 3px solid #FFF; background-color: #FFF; border-radius: 0; width: 65px; height: 36px; padding: 0; }

    header .logout-container .btn.btn-primary:active,
    header .logout-container .btn.btn-primary:focus,
    header .logout-container .btn.btn-primary:hover { color: #2C6680; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #CCC; background-color: #FFF; }
}

@media (min-width: 1200px) {

    header .header-container { width: 1170px; margin: 0 auto auto; }

    header .logo { height: auto; position: relative; /*top: -5px; left: 10px;*/ float: left; width: 400px; }

    /*header .logo-text { width: 450px; float: left; margin-left: 15px; }

    header .logo-text .logo-tag-line { font-size: medium; }*/
}


/************************-- End of Header --**************************************/


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


#hamburgermenu { display: block; float: right; margin-top: -15px; }

@media (min-width: 992px) {
    #hamburgermenu { display: none; }
}

.page-header-menu { float: right; position: relative; overflow: hidden; border-radius: 9999em; margin-top: 5px; width: 35px; height: 35px; border: 2px solid #9A9FA7; background-color: #FFF; }

.page-header-menu:hover { border: 2px solid #C5CED4; }

.page-header-menu.page-header--nav-open { background-color: #FFF; }


@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: #9A9FA7; transition: all 0.25s ease-in-out; }

@media (min-width: 992px) {
    .page-header-menu__line { left: 10px; width: 24px; }
}

.page-header--transparent .page-header-menu__line, .page-header--nav-open .page-header-menu__line { background-color: #9A9FA7; }


.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 { width: 100%; min-height: 150px; display: block; left: 0; right: 0; font-size: 14px; color: #fff; background-color: #D7D7D7; z-index: 1000; }

.footer-container { max-width: 100%; padding: 15px; margin-left: auto; margin-right: auto; }
footer ul { list-style: none; margin: 0; padding: 0; width: 100%; display: inline-block; }
footer .footer-link-title { font-family: 'Roboto Bold'; min-height: 21px; margin-bottom: 15px; }
footer .footer-row .col-xs-6 { min-height: 108px; }

footer { min-height: 400px; width: 100%; background-color: #707378; float: left; }
footer .footer-container { padding: 24px; }
footer a:hover { text-decoration: underline; }
footer .copyright-text { color: #FFF; font-family: 'Roboto Light'; font-size: 14px; }
footer .footer-icon { float: left; width: auto; margin-right: 40px; height: 100px; display: flex; align-items: center; flex-wrap: wrap; }
footer .footer-logo-container { }
footer .footer-logo-container .footer-logo { background: url('/RV/Images/account_logo.png') no-repeat; background-size: contain; width: 160px; height: 20px; }
footer .footer-logo-container .footer-logo-line { height: 4px; width: 78px; background-color: #FFF; margin-top: 15px; }
footer .footer-row { margin-bottom: 0; margin-top: 30px; }
    footer .social-icons { max-width: 650px;}

    @media (min-width:768px) { footer .footer-row { margin-bottom: 30px; }
}

@media (min-width: 1200px) {
    .footer-container { max-width: 1200px; }
}

/************************-- End of Footer --**************************************/


/************************--  MENU OVERLAY --**************************************/

.nav-menu-overlay { 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: 57px; display: none; }

.nav-menu-overlay.opened { display: block; }

.nav-menu-overlay .nav-menu-items-container { width: 100%; }

.nav-menu-overlay .nav-menu-items-container li { text-transform: uppercase; width: 100%; display: block; list-style: none; text-align: center; display: block; letter-spacing: 0.1em; color: #FFF; margin-bottom: 5px; cursor: pointer; }

.nav-menu-overlay .nav-menu-items-container > li > a { width: 100%; display: block; list-style: none; text-align: center; text-transform: uppercase; letter-spacing: 0.1em; color: #2C6680; }

.nav-menu-overlay .nav-menu-items-container > li > a:hover { text-decoration: none; }

.nav-menu-overlay .nav-menu-items-container .menu-section { background-color: #2C6680; color: #Fff; margin-bottom: 0; border-bottom: 1px solid #FFF; padding: 10px 0; width: 100%; }

.nav-menu-overlay .nav-menu-items-container .menu-section a.menu-inner-title { color: #Fff; }
.nav-menu-overlay .nav-menu-items-container .menu-section:hover, .nav-menu-overlay .nav-menu-items-container .menu-section.active { cursor: pointer; background-color: #02836D; }
.nav-menu-overlay .nav-menu-items-container .menu-section:hover .menu-inner-title, .nav-menu-overlay .nav-menu-items-container .menu-section.active .menu-inner-title { color: #FFF; text-decoration: none; }
.nav-menu-overlay .nav-menu-items-container .menu-section.active .menu-inner .active-li { background-color: #02836D; }
.nav-menu-overlay .nav-menu-items-container .menu-section.active .menu-inner .active-li:hover { background-color: #2C6680; }
.nav-menu-overlay .nav-menu-items-container .menu-section.active .menu-inner .active-li a { color: #FFF; }
.nav-menu-overlay .nav-menu-items-container .menu-section > ul { padding-left: 0; }

.nav-menu-overlay .nav-menu-items-container .menu-section:first-child { border-top: 0px; }

.nav-menu-overlay .nav-menu-items-container .menu-section.menu-opened .menu-inner-title { margin-bottom: 10px; }

.nav-menu-overlay .nav-menu-items-container .menu-section .menu-inner { display: none; }
.nav-menu-overlay .nav-menu-items-container .menu-section.menu-opened .menu-inner { background-color: #FFF; margin-bottom: -15px; margin-top: 10px; }
.nav-menu-overlay .nav-menu-items-container .menu-section .menu-inner > li { width: 100%; padding: 3px; text-transform: none; }

.nav-menu-overlay .nav-menu-items-container .menu-section .menu-inner a { color: #2C6680; }
.nav-menu-overlay .nav-menu-items-container .menu-section .menu-inner > li:hover { background-color: #02836D; }
.nav-menu-overlay .nav-menu-items-container .menu-section .menu-inner > li:hover a { color: #FFF; text-decoration: none; }
.nav-menu-button-container .btn.log-out { width: 100%; }

@media (min-width: 992px) {
    .nav-menu-overlay { display: none; }

    .nav-menu-overlay.opened { display: none; }
}


.nav-menu-overlay.opened { display: block; }

.nav-menu-overlay .nav-menu-button-container { width: 100%; margin-top: 30px; padding: 5px; }




@media (min-width: 992px) {
    .nav-menu-overlay { display: none; }

    .nav-menu-overlay.opened { display: none; }
}

/************************--  End of MENU OVERLAY --**************************************/


/************************--  One off classes --**************************************/

.validation-summary-errors ul { list-style-type: none; padding: 0; }


.logon-box { margin-top: 20px; }

.enroll-box { margin-top: 18px; min-height: 172px; margin-bottom: 20px; }
.enroll-box .page-heading { margin-top: 0; color: #02836D; }
.enroll-box .row:nth-child(3) { margin-top: 5px; }

@media (min-width: 768px) {
    .logon-box .with-button { margin-top: 76px; }
    .enroll-box { margin-bottom: 0; }
}

.title-underline { border-bottom: 3px solid #2C6680; width: 80px; margin: 5px 0 10px 0; text-align: left; }
.title-underline.green { border-color: #02836D; }

.statement-box { border: 1px solid #CCC; border-radius: 3px; margin-left: 3px; margin-right: 5px; margin-bottom: 5px; padding-top: 5px; }

.statement-box p { padding: 0; }

.statement-box .control-label { margin: 0px; }

.statement-box .form-control-static { min-height: 24px; }

.statement-drop-down { padding-top: 15px; }
.statement-icon { color: #02836D; top: 1px; position: relative; }


.secure-tag-container { width: 65px; float: left; }

.secure-tag-container .secure-tag-image { width: 100%; border: none; vertical-align: middle; padding: 0; margin: 0; line-height: 0; border-right: solid 1px #CCC; border-left: solid 1px #CCC; }

.secure-tag-container .secure-tag-title-text { font-weight: bold; width: 100%; font-size: smaller; text-align: center; background-color: #eeeeee; border-right: solid 1px #CCC; border-left: solid 1px #CCC; border-top: solid 1px #CCC; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: none; }

.secure-tag-container .secure-tag-text { font-weight: bold; width: 100%; font-size: smaller; text-align: center; background-color: #eeeeee; border-right: solid 1px #CCC; border-left: solid 1px #CCC; border-bottom: solid 1px #CCC; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

.secure-image-text { float: left; padding-left: 10px; }


/*These are the buttons that show the Help & Print*/

.btn-utility-container { width: 130px; }

.btn-utility-container #btnHelp,
.btn-utility-container #btnPrint { width: 55px; padding: 1px; border-top: none; border-left: none; border-right: none; border-radius: 0; float: left; margin-left: 10px; margin-bottom: 5px; margin-top: 0; color: #02836D; background-color: #FFF; padding-top: 0; height: 25px; font-size: smaller; border-bottom: 1px solid #F2F5F5; }

.btn-utility-container #btnHelp:hover,
.btn-utility-container #btnPrint:hover { border-bottom: 1px solid #02836D; }

/*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: #2C6680; height: 20px; display: block; }

/** the panels are broken into section and this style is applied to the title of those sections ***/
h6.section-title { color: #2C6680; font-family: 'Roboto Bold'; font-size: 18px; margin-right: -5px; margin-left: 0; text-transform: uppercase; margin-bottom: 5px; }
h4.section-title { color: #2C6680; font-family: 'Roboto Bold'; font-size: 18px; margin-right: -5px; margin-left: 0; text-transform: uppercase; margin-bottom: 0; }
/** used in online statements to highlight a row ***/
tr.transactionline:hover { cursor: pointer; background-color: #DDD; }

/** make a payment confirmation number label ***/
p.confirmation-label { font-family: 'Roboto Bold'; }

/** 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: 220px; }


    .client-override .currency-input-container .input-group .other-cent {
           border-left:none;
    }
    .client-override .currency-input-container .input-group .other-cent:focus {
           padding: 5px 10px 5px 10px;
    }
     .client-override .currency-input-container .input-group .amount-dollar {
           border-right:none;
           padding-right:0;
    }
     .client-override .currency-input-container .input-group .amount-dollar:focus {
           padding: 5px 10px 5px 10px;
    }
   .client-override .currency-input-container .input-group .input-group-addon.other-period {
           border-left:none;
    }


/** a container that is used for styling the PHONE NUMBER inputs ***/
.phone-input-group { width: 100%; }

.phone-input-group :nth-child(3),
.phone-input-group :nth-child(5) { border-right: none; border-left: none; }

@media (min-width: 768px) {
    .phone-input-group { width: 280px; }
    .statement-drop-down { padding-top: 39px; }
}


/** 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
    {
        margin-top: 2px;
        border-top: 1px solid #ddd;
    }*/

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; }

.instructions-title { margin-top: 0; font-family: 'Roboto Bold'; font-size: 16px; }

/* This is used on the expense report's action button group */
.expense-report-btn-group.btn-group { max-width: 80px; }

.expense-report-btn-group.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.expense-report-btn-group.btn-group > .btn:last-child:not(:first-child):not(.dropdown-toggle) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.expense-report-btn-group.btn-group .btn.btn-primary.btn-xs { max-width: 40px; }

@media (min-width: 768px) {
    .expense-report-btn-group.btn-group { max-width: 190px; }

    .expense-report-btn-group.btn-group .btn.btn-primary.btn-xs { max-width: 95px; }
}

/*Used to provide spacing for the switch to category view and download tran buttons*/
.tran-button-list:before { margin-top: 10px; }

/*this is used whenever a text box is inline with a radio button similar to the MakePayment view*/
.radio-inline-input { margin-top: 8px !important; }


.currency-multi-input-container { max-width: 300px; display: inline-block; }

.currency-multi-input-container .input-label { max-width: 100px; display: inline-block; height: 38px; }



.currency-multi-input-container .input-container { max-width: 230px; display: inline-block; height: 38px; }

.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 { width: 50px; padding: 4px; }

input.form-control.exp-date { width: 65px; display: inline; }

input.form-control.last-ssn { width: 65px; display: inline; }
input.form-control.user-id { width: 200px; }
input.form-control.secQuestion {width: 250px;}
div.input-group.dob { width: 160px; }
input.form-control.ccv { width: 65px; display: inline; }
input.form-control.account-number { width: 200px; }
.form-group .state {width: 250px;}
.form-control.newPassword {width: 250px;}
input.form-control.first-name { width: 200px; }

input.form-control.middle-intial { width: 94px; }

input.form-control.last-name { width: 200px; }
@media (max-width: 768px) {
    input.form-control.last-ssn { width: 100%; display: inline; }
    input.form-control.user-id, input.form-control.secQuestion, div.input-group.dob, .form-group .state, .form-control.newPassword { width:100%; }
}

.radio.date-radio input[type="radio"] { margin-top: 10px; }

.currency-input-group { width: 100%; }

.date-input-group { width: 100%; cursor: pointer; }

.exp-date-input-group { width: 100%; cursor: pointer; }

@media (min-width: 768px) {
    .currency-input-group { width: 150px; }

    .date-input-group { width: 150px; }

    .exp-date-input-group { width: 100px; }
}


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

/************************--  START SIDE MENU --**************************************/
.side-menu { background-color: #FFF; color: #2C6680; /*position: relative; top: 0; left: -15px; z-index: 10; padding-top: 30px; padding-left: 10px; margin-bottom: -5px; width: 195px;*/ }
.printname { font-size: 12px; margin-bottom: 10px; }
.side-menu .printname { color: #2C6680; margin-bottom: 7px; margin-right: 5px; }
.printname .emphasize { font-family: 'Roboto Bold'; }
.side-menu li { list-style: none; }

.side-menu li > a.menu-inner-title { color: #FFF; font-family: 'Roboto Regular'; text-transform: uppercase; margin: 10px; }
.side-menu li > a.menu-inner-title:hover { text-decoration: none; }
.side-menu .menu-section > ul.menu-inner > li:hover { background-color: #02836D; color: #FFF; }
.side-menu .menu-section > ul.menu-inner > li:hover > a { color: #FFF; text-decoration: none; }
.side-menu .menu-section > ul.menu-inner > li > a:hover, .side-menu .menu-section > ul.menu-inner > li > a:focus { text-decoration: none; }
/*.side-menu li > ul { -webkit-padding-start: 10px; }*/
.side-menu li > ul { padding-left: 0px; margin-top: 7px; padding-top: 5px; margin-bottom: 7px; }
.side-menu ul li { padding-left: 10px; }
.side-menu ul li a { list-style: none; padding-left: 10px; font-family: 'Roboto Light'; }

.side-menu .menu-section { background-color: #2C6680; color: #FFF; padding-top: 7px; }
.side-menu .menu-section .menu-inner { background-color: #FFF; color: #2C6680; font-size: 15px; }
.side-menu .menu-section.active { background-color: #02836D; }
.side-menu .menu-section.active .active-li { background-color: #02836D; }
.side-menu .menu-section.active .active-li:hover { background-color: #2C6680; }
.side-menu .menu-section.active .active-li a { color: #fff; }

@media (min-width: 992px) {
    .side-menu { /*top: -20px; left: -15px;*/ z-index: 10; /*padding-top: 30px; padding-left: 20px; margin-bottom: -21px; width: 250px;*/ }
    .side-menu .menu-container { height: 100%; margin-bottom: 0px; font-size: 16px; margin-top: 7px; border-radius: 4px; border: 1px solid #2C6680; }
    .printname { font-size: 16px; margin-bottom: 20px; min-height: 72px; }
}

/************************--  END OF SIDE 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--**************************************/

/************************--  START OF Carousel--**************************************/

.carousel-background-panel { width: 100%; height: 250px; background-color: #2C6680; }

.carousel-caption-image { }

.carousel-caption-image img { float: right; max-height: 125px; }

.carousel-caption-text { text-align: left; font-size: 12px; color: #FFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }

/************************--  END OF Carousel--**************************************/

/************************-- PROMO BOX --**************************************/
.promo-container { display: none; }

@media (min-width: 768px) {

    .promo-container { display: block; width: 100%; margin-top: 25px; }
}
/************************-- End of PROMO BOX --**************************************/


.other-amount-container { margin-top: 10px; float: left; }
.other-amount-loan-pro { margin-top: 15px; padding-left: 0px;}
    .other-amount-container .breakdown-fields > div { margin-bottom: 5px; }

.other-amount-container .other-amount-total-row { border-top: 2px solid #DDD; font-weight: bold; }
.other-amount-container .other-amount-total-row.debit { border-top: none; }

.other-amount-container .input-group input:not([type='checkbox']).form-control, .other-amount-container .input-group input:not(.alert-input).form-control input,
.currency-input-container .input-group input:not([type='checkbox']).form-control, .currency-input-container .input-group input:not(.alert-input).form-control input { border-left: none; }

.log-out-alert { margin-top: 60px; text-align: center; }
.log-in-alert { margin-top: 35px; text-align: center; }


@media (min-width: 768px) {
    .log-out-alert { margin-top: 120px; }
    .log-in-alert { margin-top: 90px; }
}

/***********Tooltip*******************/
.statement-tooltip { position: relative; display: inline-block; /*  border-bottom: 1px dotted black;*/ opacity: 1; }

.statement-tooltip .tooltiptext { visibility: hidden; width: 260px; background-color: #02836D; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 120%; left: 20%; margin-left: -40px; }

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

.statement-tooltip:hover .tooltiptext { visibility: visible; }
.principal-balance { padding-right: 0; }


/************************-- ONE CLASS --**************************************/
.payment-main-container #rowWarningDQL { padding: 20px 15px; }

@media (min-width: 768px) {
    #btnManageAccounts { width: auto; }
    .payment-main-container #rowWarningDQL { padding: 20px 30px; }
}


.manage-payment-info a, .setup-recurring a, .payment-confirmation a, .recurring-confirmation-panel a { text-decoration: underline; }

#cancelOneTime, #cancelRecurring, #PaymentHistory .lnk-cancel, .table-pending-payments .lnk-cancel { text-decoration: underline; color: #C10A0A; }

/************************--END of ONE CLASS --**************************************/

/************************-- Start of Add Payment Account --**************************************/

.panel-edit-payment-account .checkbox label, .panel-edit-payment-account .checkbox label { font-family: 'Roboto Regular'; }
.panel-add-payment-account .sample-check img, .panel-force-add-payment-account .sample-check img, .panel-edit-payment-account .sample-check img { max-width: 100%; }
.panel-add-payment-account .sample-check .help-text span.route-num, .panel-force-add-payment-account .sample-check .help-text span.route-num, .panel-edit-payment-account .sample-check .help-text span.route-num { text-align: center; }
.sample-check .help-text span:last-child { margin-left: -30px; }
.form-group.bank-name-group { margin-bottom: 30px; }
.panel-add-payment-account .section-title > span, .panel-force-add-payment-account .section-title > span { text-transform: none; font-size: 14px; }

@media (min-width: 768px) {
    .panel-add-payment-account .section-title > span, .panel-force-add-payment-account .section-title > span { font-size: 16px; }
}
/************************-- End of Add Payment Account --**************************************/

/* Start of Downloadable Statements */
.paperless-statements-section a.btn { white-space: normal; width: 100%; text-align: left; position: relative; font-size: 16px; text-transform: none; }
.paperless-statements-section a.btn.current-year { cursor: default; margin-top: 0; }
.paperless-statements-section a.btn.current-year:hover { background-color: #02836D; border-color: #02836D; }
.paperless-statements-section a.btn:not(.current-year).collapsed:after { /*top: 22px;*/ position: absolute; content: "\F140"; font-family: "Material Design Icons"; font-size: 30px; right: 20px; }
.paperless-statements-section a.btn:not(.current-year):after { /*top: 22px;*/ position: absolute; content: "\F143"; font-family: "Material Design Icons"; font-size: 30px; right: 20px; }
.paperless-statements-section a.btn.current-year.collapsed:after { content: ""; }
.paperless-statements-section a.btn.current-year:after { content: ""; }

.paperless-statements-section .paperless-statement { margin-bottom: 10px; margin-top: 40px; padding-left: 0; margin-left: 10px; }
.paperless-statements-section .paperless-statement > div { margin-bottom: 20px; }
.paperless-statements-section .paperless-statement a { text-decoration: none; }
.paperless-statements-section .paperless-statement img { margin-right: 4px; }
.paperless-statements-section .paperless-statement > div { padding-left: 0; padding-right: 0; }
.paperless-statements-section { margin-left: 0; margin-right: 0; }

@media(min-width:375px) {
    .paperless-statements-section:not(:first-child) a.btn.collapsed:after { top: auto; }
    .paperless-statements-section:not(:first-child) a.btn:after { top: auto; }
    .paperless-statements-section .paperless-statement { padding-left: 20px; margin-left: initial; }
    .paperless-statements-section .paperless-statement img { margin-right: 15px; margin-top: 15px }
}

@media(min-width:430px) {
    .paperless-statements-section a.btn { /*padding: 22px 50px; height: 62px;*/ }
}

@media(min-width:530px) {
    .paperless-statements-section .paperless-statement { margin-bottom: 10px; margin-top: auto; padding-left: 10px; }
    .paperless-statements-section .paperless-statement > div { padding-left: 15px; padding-right: 15px; }
}

@media(min-width:768px) {
    .paperless-statements-section { margin-left: 0; margin-right: 0; }
    .client-override .paperless-statements-section a.btn { width: 100%; }
}

/* End of Downloadable Statements */
.bold { font-weight: bold; }

/************************-- Enrollment --**************************************/

.enrollment .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
.enrollment .dob-dropdown-group .dropdown-wrapper { padding-right: 0; }
.enrollment .dob-dropdown-group .dropdown-wrapper:first-child { padding-left: 0; }
.panel.enrollment.agreement .item-title { font-family: 'Roboto Bold'; }
.panel.enrollment.agreement .esign-content { max-height: 350px; padding: 10px; border: 2px solid #DEDEDD; overflow-y: auto; background-color: #FFF; }

@media(min-width:992px) {
    .client-override .panel-default.enrollment { margin-top: 40px; }
    .enrollment .form-group.mid-init { text-align: center; }
    .enrollment input.middle-intial { margin: 0 auto; }
    .enrollment .dob-dropdown-group .dropdown-wrapper { padding-right: 5px; }
    .enrollment .dob-dropdown-group .dropdown-wrapper:first-child { /*padding-left: 5px;*/ }
    /*.panel.enrollment { min-height: 590px; }*/
    /*.panel.enrollment.account-info .panel-body .row.with-button { margin-top: 114px; }*/
    .panel.enrollment.account-info .panel-body { padding-top: 30px; }
    /*.panel.enrollment .panel-body { position: relative; min-height: 528px; }*/
    .panel.enrollment.agreement .panel-body .row.with-button { margin-top: 20px; }
    /*.panel.enrollment.user .panel-body .row.with-button { margin-top: 54px; }*/
    .panel.enrollment.agreement .panel-body #AcceptButton { width: auto; }
    .panel.enrollment.agreement .esign-content { max-height: 350px; padding: 20px; }
}

.enrollment.agreement .additional-disclosure a { text-decoration: underline; font-weight: bold; }
/************************-- End of Enrollment --**************************************/
a.nacha_link { cursor: pointer; text-decoration: underline; }

/************************-- Debit Card Payment --**************************************/
#CardDetailsBlock { margin-left: 20px; }
#SavedCardDetailsBlock .CardExpiration-group { margin-left: 35px; }
#CardDetailsBlock .CardExpiration-group { margin-left: 0px; }
#CardDetailsBlock .form-group, .debit-card-form { margin-bottom: 0; }
.or-label { margin-left: -15px; }
.bank-inputs a.btn.btn-addAccount { width: 100%; }
.fee-amount-row { margin-left: 35px; }
.fee-amount-row > span { margin-left: 15px; }
@media(min-width:768px) {
    .input-container.other-amount #OtherAmount { width: 262px; }
    .bank-inputs a.btn.btn-addAccount { width: auto; }
    .datetime-group .input-group.date-input-group, .bank-inputs .control-dropdown-wrapper { width: 332px; }
}

    /************************-- End of Debit Card Payment --**************************************/

.address-instructions { color: #C10A0A; }
@media(max-width:768px) {
    .address-instructions .visible-xs { display: inline-block !important; }
}