@import "custom.less?ts=4.6.2.08";

.font-family {
    font-family: @primary-font;
}

/*reset.css-Begin*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

*,
*:after,
*::before {
    box-sizing: border-box;
}
/**/
body {
    .font-family;
    line-height: 1;
    color: @primary-font-color;
    background-color: @body-bgcolor;
    font-size: @primary-font-size;
    margin: 0;
    text-align: center;
}
/*styles.css-Begin*/

.pageerror {
    padding-top: 10px;
    padding-left: 14px;
    padding-right: 14px;
}

.inline-block-full {
    display: block;
    width: 100%; /* For Responsive UI error messages*/
    clear: left;
    padding: 9px 10px;
    border-radius: 3px;
    border: 1px solid @control-error-msg-border-color;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    margin: 6px 0px;
}

.inline-block-full.negative {
    color: @control-error-msg-font-color;
    background: @control-error-msg-bgcolor;
}

.pageErrorMsg {
    color: @control-error-msg-font-color !important;
    background: @control-error-msg-bgcolor !important;
}

.padl10 {
    padding-left: 10px;
}

.padl15 {
    padding-left: 15px;
}

.padl20 {
    padding-left: 20px;
}

.padr5 {
    padding-right: 5px;
}

.padr10 {
    padding-right: 10px;
}

.padr15 {
    padding-right: 15px;
}

.padr20 {
    padding-right: 20px;
}

.padt5 {
    padding-top: 5px;
}

.padt7 {
    padding-top: 7px;
}

.padt8 {
    padding-top: 8px;
}

.padt10 {
    padding-top: 10px;
}

.padt15 {
    padding-top: 15px;
}

.padt20 {
    padding-top: 20px;
}

.padt25 {
    padding-top: 25px !important;
}

.padt70 {
    padding-top: 70px;
}

.padt90 {
    padding-top: 90px;
}

.padb5 {
    padding-bottom: 5px;
}

.padb10 {
    padding-bottom: 10px;
}

.padb15 {
    padding-bottom: 15px;
}

.padb20 {
    padding-bottom: 20px;
}

.marl10 {
    margin-left: 10px;
}

.marl4 {
    margin-left: 4px;
}

.marl15 {
    margin-left: 15px;
}

.marl20 {
    margin-left: 20px;
}

.mardr10 {
    margin-right: 10px;
}

.marr15 {
    margin-right: 15px;
}

.marr20 {
    margin-right: 20px;
}

.mart9 {
    margin-top: 9px !important;
}

.mart10 {
    margin-top: 10px;
}

.mart15 {
    margin-top: 15px;
}

.mart20 {
    margin-top: 20px;
}

.marb0 {
    margin-bottom: 0px !important;
}

.marb10 {
    margin-bottom: 10px;
}

.marb5 {
    margin-bottom: 5px;
}

.marb15 {
    margin-bottom: 15px;
}

.marb20 {
    margin-bottom: 20px;
}

.default {
    color: #000;
}

.disabledText { /*Not using*/
    background-color: #f5f5f5 !important;
    text-decoration: none;
}

.uppercaseText {
    text-transform: uppercase;
}

/*Progress bar styles*/

#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 1030;
    background: @fancybox-overlay-bgcolor;
}

#fancybox-overlay.overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.headerControls {
    position: relative;
    float: left;
    width: 100%;
    padding-top: 10px;
}

.disclosureLink {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
    font-size: 14px;
}

.warningMsg {
    background-image: @warning-message-icon;
    background-repeat: no-repeat;
    padding-left: 25px;
    height: 16px;
    display: inline-block;
    margin-left: 20px;
}

.normalFont {
    font-weight: normal;
}

.month {
    width: auto;
    display: inline;
    margin-right: 3px;
}

.day {
    width: auto;
    display: inline;
    margin-right: 3px;
}

.year {
    width: auto;
    display: inline;
}

.hidden {
    display: none !important;
}

.show {
    display: block;
}

.titleConfirmed {
    margin-top: 20px;
    margin-left: 10px !important;
    padding-left: 60px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.paymentsuccessImg {
    background-image: @payment-success-icon-image;
    padding-top: 19px;
    padding-bottom: 5px;
}

.paymentwarningImg {
    background-image: @payment-warning-icon-image;
    padding-top: 12px;
    padding-bottom: 20px;
}

.marginwithlineheight {
    margin-left: 10px !important;
    line-height: 1.5em;
}

@media only screen and (min-width: 200px) and (max-width: 370px) {
    .imagealignWithText {
        line-height: 85%;
    }
}

.agreeTermsLink {
    line-height: 1.8em;
    vertical-align: top;
}

.alignTermsLinkInList {
    font-size: 13px;
    font-weight: bold;
    float: right;
    padding-top: 31px;
    margin-right: 15px;
}

.footerLogo {
    border-bottom: 0px !important;
}

.footerLogo img {
    opacity: 1 !important;
}

.alignLeft {
    float: left;
}

.alignRadioButtonText {
    float: left;
    width: 80%;
    line-height: 1.8em;
}

.popUpDesc {
    font-size: 14px;
    line-height: 18px;
    display: block;
}

.inReviewStatus {
    color: @loan-inreview-font-color;
}

.dateControlWidth {
    width: 100%;
    max-width: 320px;
}

.termsWidth {
    width: 100%;
    max-width: 340px;
}

.paymentMethodError {
    width: 100%;
    max-width: 200px;
}

.paymentComplete {
    margin-top: 0px !important;
    display: inline;
}

.word-break {
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	white-space: pre-wrap; /* css-3 */
	white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
	white-space: normal;
	word-wrap: break-word; /* Internet Explorer 5.5+ */    
	word-break: break-all;    
}

.screenHeaderFooter p {
    border-bottom: none !important;
}

.screenHeader {
    color: @screen-header-font-color !important;
    background-color: @screen-header-bgcolor;
}

.screenFooter {
    color: @screen-footer-font-color !important;
    background-color: @screen-footer-bgcolor;
}


.termsError {
    max-width: 330px;
    width: 100%;
}

.restricted {
    color: #E74C3C;
    font-weight: bold;
}

.mart5 {
    margin-top: 5px !important;
}

.marb20Imp {
    margin-bottom: 20px !important;
}

/*dd.mozmargin {
    -moz-margin-start: -12px !important;
}*/

.recurringFrequency {
    display: block;
    width: 100%;
    padding: 5px 0 5px 25px;
    max-width: 400px;
}

.recuringMonthEndWarning {
    display: block;
    margin-top: 3px;
    line-height: 18px;
}

.recurringSpan label {
    margin-bottom: 0px !important;
}

.ConfirmationInfoMsg {
    display: inline-block;
    width: 100%;
    padding: 0px 30px 0px 30px;
    margin-top: 15px;
    color: @helptext-font-color;
    line-height: 18px;
    font-weight: 600;
}

@media only screen and (max-width: 480px) {
    .ConfirmationInfoMsg {
        padding: 0px;
    }
}

.verifying {
    text-align: center;
}

.verifying p {
    line-height: 18px;
}

.verifying h3 {
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    font-weight: bold;
}

.applicationVersion {
    float: inherit;
}

@media only screen and (max-width: 550px) {
    .applicationVersion {
        float: none;
    }
}

.paymentAmount {
    float: left;
    width: 100%;
    padding: 5px 0 5px 30px;
    margin-bottom: 15px;
    display: block;
}

.specificAmount {
    max-width: 200px;
}

/*.disabledAdvancedOptions .paymentAmount {
    padding: 0px;
    margin: 0px;
}

.form-left dd.method ul.disabledAdvancedOptions {
    margin: 0px;
}

.form-left dd.method ul.disabledAdvancedOptions li {
    padding: 0px;
}*/

.ui-loader {
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
}

.DisabledControl {
    background-color: @disabled-checkbox-bgcolor !important;
}

.disabledTxtControls {
    background-color: @disabled-controls-bgcolor !important;
}

input[type="text"]:disabled {
    background-color: @disabled-controls-bgcolor !important;
}

#creditcardcontainer, #paypalcontainer {
    float: left;
    width: 100%;
    display: none;
    padding: 0px 0px 5px 30px;
}


/*jquery.fancybox.css*/
/*! fancyBox v2.0.6 fancyapps.com | fancyapps.com/fancybox/#license */

.fancybox-tmp iframe, .fancybox-tmp object {
    vertical-align: top;
    padding: 0;
    margin: 0;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    padding: 0;
    margin: 0;
    background: @fancybox-default-bg-color;
    color: @fancybox-default-font-color;
    text-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.fancybox-opened {
    z-index: 1040;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: @fancybox-opened-box-shadow;
    -moz-box-shadow: @fancybox-opened-box-shadow;
    box-shadow: @fancybox-opened-box-shadow;
}

.fancybox-outer, .fancybox-inner {
    padding: 0;
    margin: 0;
    position: relative;
    outline: none;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: @fancybox-error-font-color;
    font: @fancybox-error-font;
    margin: 0;
    padding: 10px;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: top;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

.fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: @fancybox-close-image;
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    padding: 10px 10px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8020;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: @fancybox-loading-image center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    background: transparent url('blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 20px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 20px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -9999px;
    left: -9999px;
    padding: 0;
    overflow: visible;
    visibility: hidden;
}

/* Overlay helper */

#cubusfancyboxoverlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: #fff;
}

#cubusfancyboxoverlay.overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: @fancybox-title-font;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8030;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #fff;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    margin-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
}
/*template.css-Begin*/
/*@charset "UTF-8";*/

.container { /*Occupied the widget part to full screen width*/
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0px;
}

#header {
    background: @header-bgcolor;
    border-bottom: 5px solid @header-border-color;
    position: relative;
    z-index: 100;
    text-align: left;
}

#header img {
    display: inline-block;
    width: 100%;
    max-width: @header-logo-width;
    height: auto;
    margin: 10px 15px;
}

#main {
    background-color: @body-bgcolor;
    /*padding-top: 20px;
    padding-bottom: 20px;*/
}

.container-block { /*Removed Border of main widget.*/
    position: relative;
    display: inline-block;
    width: 100%;
    /*background-color: #f3f3f3;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);*/
    text-align: left;
}

.container-frame {
    position: relative;
    float: left;
    width: 100%;
    overflow: hidden;
}
/*Uncommented in demo site. But with this change scrollbar is hiding. Previously customer reported issue scroll bar is not visible. so commented*/
/*::-webkit-scrollbar {
    display: none !important;
    width: 10px !important;
    height: 0 !important;
}


::-webkit-scrollbar-thumb {
    background-color: transparent;
}
*/

p.intro {
    font-size: 13px;
    color: #666;
    padding: 10px 25px;
}

h6.widget-title {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: @page-title-bgcolor;
    font-size: 16px;
    line-height: 40px;
    text-indent: 10px;
    font-weight: normal;
    color: @page-title-font-color;
    margin: 0;
    border-bottom: 1px solid @page-title-border-color;
}

h6.widget-title a {
    float: right;
    font-size: 13px;
    font-weight: normal;
    margin-right: 15px;
}

#productNav-trigger { /*Not using*/
    float: left;
    display: inline-block;
    width: 35px;
    height: 39px;
    background-size: 25px;
    background-image: url("../Images/icon-menu.svg");
    background-position: right;
    background-repeat: no-repeat;
    text-indent: 1000px;
    overflow: hidden;
}

@media (min-width: 550px) {
    #productNav-trigger {
        display: none;
    }
}

#productNav-trigger.open {
    background-image: url("../Images/icon-close.svg");
}

a {
    color: @primary-link-color;
    text-decoration: none;
    background-color: @primary-link-bgcolor;
}

a:hover {
    color: @primary-link-hover-color;
}

/*Commented in demo site. But i kept as it is because i found issues after adding reset.css.*/
strong {
    font-weight: bold;
}

.alignRight {
    text-align: right;
}

.prev, .next {
    padding: 0 20px 20px 20px;
    font-size: 14px;
    font-weight: bold;
}

.prev {
    float: left;
}

.next {
    float: right;
}

.disabled {
    color: @disabled-text-font-color;
    pointer-events: none;
    font-weight: normal;
}

.table-title {
    margin: 40px 20px 20px 20px;
}

table {
    margin-bottom: 20px;
    padding: 0;
    font-size: 13px;
    line-height: 17px;
    border-collapse: separate;
    border-spacing: 0;
}

table.footable.footable-filtering-right { /*Not using*/
    margin-top: -50px;
}

.footable-header th { /*Not using*/
    border-bottom: 2px solid rgba(0, 0, 0, 0.075);
}

th {
    color: @table-header-font-color;
    padding: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

tr th:first-child {
    padding-left: 20px;
}

tr th:last-child {
    padding-right: 20px;
}

td {
    padding: 10px;
    border-top: 1px solid @table-column-border-top-color;
    vertical-align: middle;
}

tr td:first-child {
    padding-left: 20px;
}

tr td:last-child {
    padding-right: 20px;
}

.footable-detail-row { /*Not using*/
    background-color: #f6f6f6;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.footable-details tr:first-child td {
    border-top: 0;
}

.tableActions { /*Not using*/
    text-align: right;
    white-space: nowrap;
}

.tableActions a {
    padding-right: 6px;
    margin-right: 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.tableActions a:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
}

/* Tabs
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.tabs {
    display: inline-block;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0 15px;
    margin-left: 15px;
    padding-left: 0px;
    /*white-space: nowrap;*/
    box-shadow: @tabs-container-boxshadow;
    background-color: @tabs-container-background-color;
    /*overflow: auto;*/
    border-bottom: 1px solid @tab-border-color;
}

.tabs li {
    display: inline-block;
}

.tabs li a {
    display: inline-block;
    padding: 15px 20px;
    border-left: 1px solid @tab-border-color;
    border-right: 1px solid @tab-border-color;
    border-top: 1px solid @tab-border-color;
    background-color: @tab-bgcolor;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    position: relative;
    font-size: 13px;
    white-space: nowrap;
    margin-top: 15px;
    color: @tab-font-color;
}

.tabs li a:hover {
    outline: none;
    background-color: @tab-hover-bgcolor;
    color: @tab-link-hover-font-color;
    text-decoration: none;
    margin-bottom: -1px;
    border-bottom: 1px solid @active-tab-border-color;
}

.tabs li.active a, .tabs li:first-child:last-child a {
    background-color: @active-tab-bgcolor;
    color: @active-tab-font-color;
    margin-bottom: -1px;
    border-bottom: 1px solid @active-tab-border-color;
    cursor: default;
    text-decoration: none;
}

.tab-content {
    display: none;
}

#footer {
    display: block;
    width: 100%;
    border-top: 1px solid @footer-border-color;
    padding: 20px 15px 40px 15px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    background: @footer-bgcolor;
    color: @footer-font-color;
}

@media (min-width: 550px) {
    #footer {
        text-align: left;
    }
}

#footer img {
    width: 100%;
    max-width: 125px;
    height: auto;
    display: inline-block;
    margin-top: 10px;
    opacity: 0.5;
}

@media (min-width: 550px) {
    #footer img {
        display: block;
        clear: left;
    }
}

#footer ul {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer ul li {
    display: inline-block;
    color: @footer-font-color;
    width: 100%;
}

@media (min-width: 550px) {
    #footer ul li {
        width: auto;
        border-right: 1px solid @footer-mobile-screen-border-right-color;
        padding-right: 10px;
        margin-right: 10px;
    }
}

#footer ul li a {
    display: inline-block;
    width: 100%;
    line-height: 40px;
    border-bottom: 1px solid @footer-link-border-bottom-color;
    color: @footer-link-color;
}

@media (min-width: 550px) {
    #footer ul li a {
        line-height: normal;
        border: 0;
    }
}

#footer p {
    display: block;
    clear: left;
    color: @footer-font-color;
    margin-top: 0px;
}

#main section {
    float: left;
    width: 100%;
    background-color: @body-bgcolor;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.blockTitle {
    box-sizing: border-box;
    float: left;
    width: 100%;
    padding: 15px;
    /*border-top: 1px solid #fff;*/
}

.blockTitle h1 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/*.splashContent {
    box-sizing: border-box;
    float: left;
    width: 100%;
    min-height: 400px;
    font-size: 14px;
}*/

.blockContent {
    box-sizing: border-box;
    float: left;
    width: 100%;
    padding: 15px;
    font-size: 14px;
}

.blockContent p {
    margin: 0 0 14px 0;
    color: @blockcontent-font-color;
    line-height: 18px;
}

.confirm {
    min-height: 40px;
    display: inline-block;
    padding-left: 90px;
    margin-bottom: 0;
    background-image: @checkmark-icon;
    background-repeat: no-repeat;
    background-position: 30px 0;
    background-size: 40px 40px;
    /*margin-top: 20px;*/
}

.loan {
    display: inline-block;
    width: 100%;
    border: 1px solid @loanlist-border-color;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 50px 50px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    line-height: 1.5;
}

.loan:hover {
    border: 1px solid @loanlist-hover-border-color;
    background-color: @loanlist-hover-bgcolor;
    background-position: 10px 5px;
    box-shadow: @loanlist-hover-boxshadow;
}

.loan.credit {
    padding-left: 75px;
    background-image: @loan-creditcard-image;
}

.loan.automobile {
    padding-left: 75px;
    background-image: @loan-automobile-image;
}

.loan.residence {
    padding-left: 75px;
    background-image: @loan-residence-image;
}

.loan.general {
    background-size: 40px 40px;
    padding-left: 75px;
    background-image: @loan-general-image;
}

.loan.signature {
    padding-left: 75px;
    background-image: @loan-signature-image;
}

.loan.secure {
    padding-left: 75px;
    background-image: @loan-secure-image;
}

.loan.quick-cash {
    padding-left: 75px;
    background-image: @loan-quickcash-image;
}

.loan.student {
    padding-left: 75px;
    background-image: @loan-student-image;
}

.loan.shared {
    padding-left: 75px;
    background-image: @loan-shared-image;
}

.loan.business {
    padding-left: 75px;
    background-image: @loan-business-image;
}

.loan.line-of-credit {
    padding-left: 75px;
    background-image: @loan-loc-image;
}

.loan.motorcycle {
    padding-left: 75px;
    background-image: @loan-motorcycle-image;
}

.loan.motorhome {
    padding-left: 75px;
    background-image: @loan-motorhome-image;
}

.loan.boat {
    padding-left: 75px;
    background-image: @loan-boat-image;
}

.loan dl {
    display: -webkit-box;
    display: flex;
    width: 100%;
    margin: 0 0 3px 0;
    padding: 0 0 3px 0;
    border-bottom: 1px solid @loanlist-details-border-bottom-color;
    color: @loanlist-details-font-color;
    font-size: 12px;
}

.loan dl:first-child {
    border-bottom: 0;
}

.loan dl:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
}

.loan dl dt {
    -webkit-box-flex: 1;
    flex-grow: 1;
}

.loan dl dt.title {
    font-size: 14px;
    font-weight: bold;
    color: @loanlist-loan-title-font-color;
}

.loan dl dd {
    margin: 0;
    text-align: right;
    -webkit-box-flex: 2;
    flex-grow: 2;
    padding-left: 25px;
}

.loan dl.pastdue {
    font-weight: bold;
    color: @loan-pastdue-font-color;
}

.loan dl.pastdue dt {
    padding-left: 30px;
    line-height: 20px;
    text-transform: uppercase;
    background-image: @loan-pastdue-icon;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.loan dl.pastdue dd {
    line-height: 20px;
    font-weight: normal;
}

.loan dl.scheduled {
    font-weight: bold;
}

.loan dl.scheduled dt {
    padding-left: 30px;
    line-height: 20px;
    text-transform: uppercase;
    background-image: @loan-scheduled-calendar-icon;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.loan dl.scheduled dd {
    line-height: 20px;
    font-weight: normal;
}

.loan dl.processing {
    font-weight: bold;
}

.loan dl.processing dt {
    padding-left: 30px;
    line-height: 20px;
    text-transform: uppercase;
    background-image: @loan-processing-icon;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.loan dl.processing dd {
    line-height: 20px;
}

#session-popup {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: @session-popup-bgcolor;
}

#session-container {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: @session-popup-container-bgcolor;
    border-radius: 6px;
    box-shadow: @session-popup-container-boxshadow;
    padding: 15px;
    width: 100%;
    max-width: 320px;
    text-align: center;
}

#session-container h1 {
    display: inline-block;
    width: 100%;
    margin: 0 0 15px 0;
    font-size: 32px;
    font-weight: bold;
}

.payment {
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: @loanpayment-history-item-bgcolor;
    border: 1px solid @loanpayment-history-item-border-color;
    border-radius: 4px;
    margin-bottom: 5px;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.payment:hover {
    background-color: @loanpayment-history-item-hover-bgcolor;
}

.payment h4 {
    float: right;
    width: 30%;
    display: inline-block;
    margin: 0;
    padding: 15px 15px 0 0;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
}

.payment h4 span {
    display: block;
    font-weight: normal;
    opacity: 0.45;
    margin-top: 5px;
    font-size: 13px;
}

@media (min-width: 750px) {
    .payment h4 span {
        display: inline-block;
    }
}

.payment .status {
    float: left;
    width: 60%;
    display: inline-block;
    margin: 0;
    padding: 15px 0;
    padding-left: 35px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-size: 13px;
    background-repeat: no-repeat;
    background-position: left 8px top 15px;
    background-size: 20px 20px;
}

.payment .status dt {
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

@media (min-width: 750px) {
    .payment .status dt {
        float: left;
    }
}

.payment .status dd {
    opacity: 0.55;
    padding: 0;
    margin: 5px 0 0 0;
}

@media (min-width: 750px) {
    .payment .status dd {
        float: left;
        margin-top: 4px;
        margin-left: 5px;
    }
}

.payment .status.failed {
    color: @loanpayment-history-status-failed-font-color;
    background-image: @loanpayment-history-status-failed-image;
}

.payment .status.paid, .payment .status.positive {
    color: @loanpayment-history-status-success-font-color;
    background-image: @loanpayment-history-status-success-image;
}

.payment .status.scheduled {
    background-image: @loanpayment-status-scheduled-image;
}

.payment .details {
    float: left;
    display: none;
    width: 100%;
    padding: 15px;
    border-top: 1px solid @loanpayment-history-item-details-border-top-color;
    background-color: @loanpayment-history-item-details-bgcolor;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.payment .details h3 {
    display: inline-block;
    width: 100%;
    margin: 0;
    color: #333;
}

.payment .details dl {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    opacity: 0.65;
    font-size: 13px;
}

@media (min-width: 750px) {
    .payment .details dl {
        width: auto;
        margin-right: 45px;
    }
}

.payment .details dl:first-of-type {
    padding-top: 10px;
}

.payment .details dl:last-child {
    border: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.payment .details dl dt {
    float: left;
    margin: 0;
    padding-right: 10px;
    font-weight: bold;
    line-height: 21px;
}

.payment .details dl dd {
    float: left;
    margin: 0;
    line-height: 21px;
}

.pagination {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.thanks, .expired, .identityfail {
    /*text-align: center;*/
}

.thanks img, .expired img, .identityfail img {
    max-width: 50px;
    max-height: 50px;
    display: inline-block;
    margin-top: 25px;
}

.thanks h2, .expired h2, .identityfail h2 {
    font-weight: bold;
    margin: 20px 0;
}

.thanks p, .expired p, .identityfail p {
    margin-bottom: 20px;
}

.breadcrumb {
    padding: 0 0 20px 0;
    font-size: 12px;
}

.breadcrumb a {
    color: @back-button-font-color;
    text-transform: uppercase;
    font-size: @back-button-font-size;
    background-color: @back-button-bgcolor;
    box-shadow: @back-button-boxshadow-color;
    border-color: @back-button-border-color;
}

.breadcrumb a:hover {
    color: @back-button-hover-font-color;
    background-color: @back-button-hover-bgcolor;
}

.breadcrumb a span {
    color: #ccc;
}

/* Form Controls
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
label {
    display: inline-block;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="month"] {
    .font-family;
    position: relative;
    width: 100%;
    height: auto;
    display: table-cell;
    color: inherit;
    background-color: @input-text-default-bgcolor;
    border: 1px solid @input-text-default-border-color;
    /*border-top: 1px solid rgba(0, 0, 0, 0.4);*/
    font-size: 15px;
    /*font-family: Helvetica, sans-serif;*/
    padding: 9px 10px;
    margin: 0;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
}

.inputRow,
.inputGroup {
    position: relative;
    /*display: table;*/
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    width: 100%;
    margin-bottom: 10px;
}

.inputRow.error input[type="text"],
.inputRow.error input[type="number"],
.inputRow.error input[type="password"],
.inputRow.error input[type="tel"],
.inputRow.error input[type="search"],
.inputGroup.error input[type="text"],
.inputGroup.error input[type="number"],
.inputGroup.error input[type="password"],
.inputGroup.error input[type="tel"],
.inputGroup.error input[type="search"] {
    color: @inputrow-errortext-font-color;
    background-color: @inputrow-errortext-bgcolor;
}

.inputRow.error .custom-select-menu label,
.inputGroup.error .custom-select-menu label {
    color: @inputrow-errortext-font-color;
    background-color: @inputrow-errortext-bgcolor;
}

.inputRow.error .custom-select-menu label:after,
.inputGroup.error .custom-select-menu label:after {
    border-top: 6px solid @inputrow-errortext-border-color;
}

.inputGroup input[type="text"]:first-child,
.inputGroup input[type="number"]:first-child,
.inputGroup input[type="password"]:first-child,
.inputGroup input[type="tel"]:first-child,
.inputGroup input[type="search"]:first-child,
.inputGroup input[type="date"]:first-child,
.inputGroup select:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.inputGroup input[type="text"]:last-child,
.inputGroup input[type="number"]:last-child,
.inputGroup input[type="password"]:last-child,
.inputGroup input[type="tel"]:last-child,
.inputGroup input[type="search"]:last-child,
.inputGroup input[type="date"]:last-child,
.inputGroup select:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.inputGroup input[type="text"]:not(:first-child):not(:last-child),
.inputGroup input[type="number"]:not(:first-child):not(:last-child),
.inputGroup input[type="password"]:not(:first-child):not(:last-child),
.inputGroup input[type="tel"]:not(:first-child):not(:last-child),
.inputGroup input[type="search"]:not(:first-child):not(:last-child),
.inputGroup input[type="date"]:not(:first-child):not(:last-child),
.inputGroup select:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.inputGroup .prefix,
.inputGroup .suffix {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
    /*width: 1%;*/
    padding: 10px;
    background-color: @inputgroup-prefixsuffix-bgcolor;
    color: @inputgroup-prefixsuffix-font-color;
}

.inputGroup .prefix {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: @inputgroup-prefix-boxshadow;
}

.inputGroup .suffix {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: @inputgroup-suffix-boxshadow;
}

select {
    .font-family;
    position: relative;
    width: 100%;
    height: auto;
    display: table-cell;
    color: inherit;
    font-size: 15px;
    /*font-family: Helvetica, sans-serif;*/
    padding: 9px 25px 9px 10px;
    margin: 0;
    background-color: @select-bgcolor;
    border: 1px solid @select-border-color;
    /*border-top: 1px solid rgba(0, 0, 0, 0.4);*/
    border-radius: 3px;
    background-image: @select-bgimage;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 25px 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Custom Radio and Checkbox
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
input[type="checkbox"]:not(old),
input[type="radio"]:not(old) {
    width: 0;
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 0;
}

input[type="checkbox"]:not(old) + label,
input[type="radio"]:not(old) + label {
    display: inline-block;
    margin-left: 0;
    line-height: 1.5em;
}

input[type="checkbox"]:not(old) + label > span,
input[type="radio"]:not(old) + label > span {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 2px 6px 2px 0;
    border-radius: 10px;
    vertical-align: bottom;
}

input[type="checkbox"]:not(old) + label > span {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px @input-checkbox-border-color;
    background: @input-checkbox-bgcolor;
}

input[type="radio"]:not(old) + label > span {
    box-shadow: inset 0 0 0 1px @input-radio-border-color;
    background: @input-radio-bgcolor;
}

input[type="checkbox"]:not(old):checked + label > span {
    background: @input-checkbox-checked-color;
}

input[type="radio"]:not(old):checked + label > span {
    background: @input-radio-checked-color;
}

input[type="checkbox"]:not(old):checked + label > span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    background-image: @input-checkbox-checked-bgimage;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    background-color: @input-checkbox-checked-bgcolor;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 0 0.0714em #73994d;
    font-weight: bold;
    line-height: 20px;
    letter-spacing: 4px;
    border-radius: 2px;
}

input[type="radio"]:not(old):checked + label > span > span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 5px;
    border: 1px solid @input-radio-checked-bgcolor;
    background: @input-radio-checked-bgcolor;
    border-radius: 10px;
}

/* Date Picker
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.pickadate__active {
    overflow: hidden;
}

.picker-holder--inline {
    width: 100%;
    position: relative;
    clear: left;
    background: url("../Images/icon-datepicker.svg");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 97% 45%;
}

.picker-holder--inline .pickadate__frame {
    position: absolute;
    background: #fff;
    max-height: 0;
    overflow-y: hidden;
}

.picker-holder--inline .pickadate__holder--opened .pickadate__frame {
    top: 0;
    z-index: 2;
    max-height: 25em;
}

.picker-holder--inline .pickadate__calendar {
    padding: 1em;
    font-size: 1em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.picker-holder--inline .pickadate__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: inherit;
    width: 100%;
    margin-top: 0.75em;
}

.picker-holder--inline .pickadate__table td {
    margin: 0;
    padding: 0;
}

.picker-holder--inline .pickadate__header {
    text-align: center;
    position: relative;
}

.picker-holder--inline .pickadate__nav--prev,
.picker-holder--inline .pickadate__nav--next {
    position: absolute;
    top: -0.1em;
    padding: 0.5em;
    margin: -0.5em;
    text-align: center;
    min-width: 24px;
    height: 24px;
    line-height: 26px;
}

.picker-holder--inline .pickadate__nav--prev {
    left: 0;
}

.picker-holder--inline .pickadate__nav--next {
    right: 0;
}

.picker-holder--inline .pickadate__month,
.picker-holder--inline .pickadate__year {
    font-weight: 500;
    display: inline-block;
}

.picker-holder--inline .pickadate__year {
    font-size: 0.8em;
    font-style: italic;
    margin-left: 0.5em;
    opacity: 0.5;
}

.picker-holder--inline .pickadate__weekday {
    width: 14.285714286%;
    font-size: 0.75em;
    padding-bottom: 0.5em;
    font-weight: 500;
    opacity: 0.4;
}

.picker-holder--inline .pickadate__day {
    padding: 0.33em 0 0.25em;
    font-weight: 100;
    border: 1px solid transparent;
    margin-bottom: 1px;
}

.picker-holder--inline .pickadate__day--today {
    position: relative;
    font-weight: bold;
}

.picker-holder--inline .pickadate__day--today:before {
    content: " ";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0;
    height: 0;
    border-top: 0.5em solid #999;
    border-left: 0.5em solid transparent;
}

.picker-holder--inline .pickadate__day--selected,
.picker-holder--inline .pickadate__day--selected:hover {
    border-color: #666;
}

.picker-holder--inline .pickadate__day--outfocus {
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}

.picker-holder--inline .pickadate__footer {
    text-align: center;
    margin: 0.5em 0 -0.5em;
}

.picker-holder--inline .pickadate__button--today,
.picker-holder--inline .pickadate__button--clear {
    font-size: 1em;
    margin: 0 2.5%;
    width: 45%;
}

.picker-holder--inline .pickadate__button--today:before,
.picker-holder--inline .pickadate__button--clear:before {
    position: relative;
    display: inline-block;
    height: 0;
}

.picker-holder--inline .pickadate__button--today:focus,
.picker-holder--inline .pickadate__button--clear:focus {
    background: #f5f5f5;
    border-color: transparent;
    outline: none;
}

.picker-holder--inline .pickadate__day--infocus:hover,
.picker-holder--inline .pickadate__day--outfocus:hover {
    cursor: pointer;
    background: #f5f5f5;
}

.picker-holder--inline .pickadate__nav--prev:hover,
.picker-holder--inline .pickadate__nav--next:hover {
    cursor: pointer;
    opacity: 0.8;
}

.picker-holder--inline .pickadate__day--disabled,
.picker-holder--inline .pickadate__day--disabled:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: transparent;
    cursor: default;
    opacity: 0.4;
}

/* Form Structure: left-side labels
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.form-left {
    display: inline-block;
    width: 100%;
}

.form-left dt {
    clear: left;
    float: left;
    width: 25%;
    line-height: 18px;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    font-weight: bold;
}

@media only screen and (max-width: 480px) {
    .form-left dt {
        width: 100%;
    }
}

.form-left dd {
    float: left;
    width: 75%;
    padding: 0;
    margin: 0;
}

@media only screen and (max-width: 480px) {
    .form-left dd {
        width: 100%;
        max-width: 100%;
    }
}

.form-left dd label.micro {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: 0.5;
}

.form-left dd .forminputgroup {
    float: left;
    margin-right: 10px;
}

.form-left dd.name, .form-left dd.firstname, .form-left dd.lastname, .form-left dd.cardholder, .form-left dd.ccno, .form-left dd.emailaddress {
    max-width: 400px;
}

.form-left dd.vinno, .form-left dd.memberno, .form-left dd.paymentdate, .form-left dd.ssn {
    max-width: 300px;
}

.form-left dd.last4ssn, .form-left dd.cvvno {
    max-width: 100px;
}

.form-left dd.driverslicenseno {
    max-width: 390px;
}

.form-left dd.paymentamount .paymentamount-container {
    display: -webkit-inline-box;
    display: inline-flex;
    /*width: 100%;*/
    max-width: 450px;
}

.form-left dd.paymentamount .suffix {
    color: #069;
}

.form-left dd.paymentamount .suffix:hover {
    color: #036;
    background-color: #fff;
}

.form-left dd.paymentamount input {
    max-width: 150px;
}

/*.form-left dd.paymentamount #paymentamount-options*/
.form-left dd.paymentamount .advanceOptionsDrp {
    display: none;
    border-left: 0;
    /*width: auto;*/
    width: 100%;
}

.form-left dd.method, .form-left dd.advOptions {
    max-width: 400px;
}

.form-left dd.method .errorMessage {
    float: none;
    display: block;
}

.form-left dd.method .note {
    opacity: 0.65;
    margin-top: 10px;
    font-size: 12px;
    line-height: 18px;
    font-style: italic;
}

.form-left dd.method ul {
    margin-bottom: 10px;
}

.form-left dd.method ul li {
    display: inline-block;
    width: 100%;
}

.form-left dd.amount {
    width: 150px;
}

.form-left dd.summary p {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 480px) {
    .form-left dd.summary p {
        max-width: 100%;
    }
}

.form-left dd.summary p strong {
    float: right;
}

.form-left dd .billing label,
.form-left dd .carddetails label {
    margin-bottom: 5px;
}

.form-left dd .billing.street {
    float: left;
    width: 60%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
    .form-left dd .billing.street {
        width: 100%;
        max-width: 100%;
    }
}

.form-left dd .billing.city {
    float: left;
    clear: left;
    max-width: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.form-left dd .billing.state {
    float: left;
    max-width: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.form-left dd .billing.zip {
    float: left;
    max-width: 100px;
}

.form-left dd .carddetails .error-bar,
.form-left dd .carddetails .success-bar {
    margin-top: 10px;
}

.form-left dd .carddetails.firstname {
    float: left;
    width: 40%;
    margin-bottom: 10px;
    margin-right: 10px;
}

@media only screen and (max-width: 480px) {
    .form-left dd .carddetails.firstname {
        width: 100%;
        max-width: 100%;
    }
}

.form-left dd .carddetails.lastname {
    float: left;
    width: 40%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
    .form-left dd .carddetails.lastname {
        width: 100%;
        max-width: 100%;
    }
}

.form-left dd .carddetails.ccno {
    float: left;
    width: 60%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 480px) {
    .form-left dd .carddetails.ccno {
        width: 100%;
        max-width: 100%;
    }
}

.form-left dd .carddetails.ccexpiry {
    float: left;
    clear: left;
    max-width: 250px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.form-left dd .carddetails.cvvno {
    float: left;
    max-width: 100px;
    margin-bottom: 10px;
}

.form-left dd .carddetails.ccexpiry label {
    width: 100%;
}

.form-left dd .carddetails.ccexpiry input {
    width: 75px;
    display: inline-block;
    margin-right: 10px;
}

.identity-types {
    list-style: none;
    padding: 0;
    margin: 0;
}

.identity-types li {
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid @identitytypes-item-border-bottom-color;
}

.identity-types li div {
    display: none;
    width: 100%;
    max-width: 300px;
    padding-top: 5px;
    padding-left: 25px;
}

#ssn-lastfour {
    display: none;
}

#recurring label {
    margin-bottom: 20px;
}

#edit {
    margin-left: 20px;
}

#newcard,
#creditcardcontainer,
#paypalcontainer {
    display: none;
}

#creditcardcontainer .micro,
#paypalcontainer .micro {
    margin-bottom: 15px;
    padding-left: 30px;
}

.savedcardscontainer {
    display: block;
}

.savedcardscontainer #savedcards {
    float: left;
    width: 100%;
    padding: 5px 0 5px 30px;
    margin-bottom: 15px;
}

.savedcardscontainer #savedcards p {
    font-size: 12px;
    margin: 15px 0;
}

.savedcardscontainer #savedcards p a {
    float: right;
    margin-left: 20px;
}

.internalaccountscontainer {
    display: block;
}

#internalaccounts {
    float: left;
    width: 100%;
    padding: 5px 0 5px 30px;
    margin-bottom: 15px;
}

.externalaccountscontainer {
    display: block;
}

#externalaccounts {
    float: left;
    width: 100%;
    display: none;
    padding: 5px 0 5px 30px;
    margin-bottom: 15px;
}

.totalamount {
    font-size: 36px;
}

button,
.button {
    .font-family;
    display: inline-block;
    margin: 0 8px 0 0;
    border: 1px solid @primary-button-border-color;
    /*border-color: @primary-button-border-color;*/
    padding: 11px 15px;
    /*font-family: -apple-system, BlinkMacSystemFont, "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", sans-serif;*/
    border-radius: 3px;
    color: @primary-button-font-color;
    font-size: @primary-button-font-size;
    box-shadow: inset 0 0 0 1px @primary-button-boxshadow-color, inset 0 -3px 0 0 @primary-button-boxshadow-color;
    background-color: @primary-button-bgcolor;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    /*line-height: 19px;*/
}

button:hover,
.button:hover {
    /*background-color: #f5f5f5;
    color: #1a1919;*/
    background-color: @primary-button-hover-bgcolor;
    color: @primary-button-hover-font-color;
}

button:active, .button:active {
    outline: none;
}

button.delete, .button.delete {
    background-color: @delete-button-bgcolor;
    color: @delete-button-font-color;
    box-shadow: inset 0 0 0 1px @delete-button-boxshadow-color, inset 0 -3px 0 0 @delete-button-boxshadow-color;
    font-size: @delete-button-font-size;
    /*border-color: @delete-button-border-color;*/
    border: 1px solid @delete-button-border-color;
}

button.delete:hover, .button.delete:hover {
    background-color: @delete-button-hover-bgcolor;
    color: @delete-button-hover-font-color;
}

button.cancel, .button.cancel {
    background-color: @cancel-button-bgcolor;
    color: @cancel-button-font-color;
    box-shadow: inset 0 0 0 1px @cancel-button-boxshadow-color, inset 0 -3px 0 0 @cancel-button-boxshadow-color;
    font-size: @cancel-button-font-size;
    /*border-color: @cancel-button-border-color;*/
    border: 1px solid @cancel-button-border-color;
}

button.cancel:hover, .button.cancel:hover {
    background-color: @cancel-button-hover-bgcolor;
    color: @cancel-button-hover-font-color;
}

.agreeTerms {
    float: left;
    width: 100%;
    padding: 20px;
    margin-bottom: -20px;
    font-size: 14px;
    /*-moz-margin-start: -12px;*/
}

.ctaRow {
    float: left;
    width: 100%;
    padding: 25px 15px;
    margin: 20px 0 0 0;
    box-sizing: border-box;
    border: 0;
    border-top: 1px solid @button-container-border-color;
}

@media only screen and (max-width: 480px) {
    .ctaRow {
        padding-bottom: 60px;
        background-position: bottom 20px center;
    }
}

.ctaRow button,
.ctaRow .button {
    float: left;
    margin-right: 25px;
}

@media only screen and (max-width: 480px) {
    .ctaRow button,
    .ctaRow .button {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }
}

.confirmPayment h3 {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

@media only screen and (max-width: 480px) {
    .confirmPayment h3 {
        max-width: 100%;
        float: none;
    }
}

.confirmPayment h3 + span {
    display: inline-block;
    width: 75%;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
    padding: 0 20px;
    font-weight: bold;
    color: #666;
}

.confirmPayment h3 strong {
    display: block;
    width: 100%;
    font-size: 2.8rem;
    line-height: 3.2rem;
    margin-top: 10px;
    font-weight: bold;
}

.confirmPayment p {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid @confirmpayment-details-bottom-border-color;
}

@media only screen and (max-width: 480px) {
    .confirmPayment p {
        max-width: 100%;
    }
}

.confirmPayment p strong {
    text-align: right;
}

.confirmPayment p strong span {
    font-weight: bold;
}

/* header button and span styles for signout and username in header*/
#header span {
    float: right;
    color: @header-username-font-color;
    font-size: 14px;
    margin: 20px 5px;
}

#header .button {
    float: right;
    margin: 10px 15px;
    /*text-transform: uppercase;
    padding: 8px 15px;*/
    color: @header-button-font-color;
    background-color: @header-button-bgcolor;
}

/*@media only screen and (min-width: 320px) and (max-width: 480px) {
    #header .button {
        display: none;
    }
}

#header .button:hover {
    background-color: #ffc23e;
}*/

/*header conflict in master pages*/
/*#QPMain section {
    float: left;
    width: 100%;    
    min-height: 200px;
    background-color: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.form-left dd span.micro {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: .5;
}*/
.micro,
.microWarning {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 14px 0;
    color: @helptext-font-color;
    line-height: 18px;
}

/*pop up styles*/

.popup {
    position: relative;
    background: @popup-bgcolor;
    padding: 20px 20px 20px 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}

.popup h1 {
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    margin: 0px 0px 20px 0px;
    border-bottom: 1px solid @popup-title-border-color;
    font-weight: bold;
    font-size: 16px;
    color: @popup-title-font-color;
}

.popup p {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}

.popup .button {
    display: inline-block;
    clear: left;
    margin-right: 15px;
}

/*#terms .scrolly {
    padding: 15px 0;
    height: 300px;
}

.scrolly {
    overflow: scroll;
}

.popup button:hover {
    background-color: #fff;
 }

.form-left dd .billing span,
.form-left dd .carddetails span {
    margin-bottom: 5px;
    display: inline-block;
}
*/

.error-bar[style*="inline"] {
    display: block !important;
    margin: 6px 0;
}

.payment-expiring {
    color: #d4a002;
}

.payment-expired {
    color: #e74c3c;
}

.payment-message {
    display: inline-block;
    font-weight: bold;
    text-align: right;
}

.payment-pastdue {
    color: #e74c3c;
}

.loan.pastdue {
    padding-left: 75px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' enable-background='new 0 0 24 24'%3E%3Cpath fill='%23E74C3C' d='M13.5 0h-2c-.8 0-1.5.7-1.5 1.5v14c0 .8.7 1.5 1.5 1.5h2c.8 0 1.5-.7 1.5-1.5v-14c0-.8-.7-1.5-1.5-1.5z'%3E%3C/path%3E%3Ccircle fill='%23E74C3C' cx='12.5' cy='21.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E");
    background-size: 30px 30px;
    background-position: 22px 15px;
}

.error-bar,
.success-bar {
    display: block;
    width: auto;
    clear: left;
    padding: 9px 10px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    margin: 6px 0px;
}

.error-bar {
    color: @error-msg-font-color !important;
    background: @error-msg-bgcolor;
    border: 1px solid @error-msg-border-color;
}

.success-bar {
    color: @success-msg-font-color;
    background: @success-msg-bgcolor;
    border: 1px solid @success-msg-border-color;
}

.error-bar a,
.success-bar a {
    white-space: nowrap;
}

.form-left dd.captia img {
    float: left;
    max-height: 41px;
}

.form-left dd.captia input {
    float: left;
    max-width: 200px;
    margin-right: 20px;
}

.form-left dd.captia p {
    display: inline-block;
    width: 100%;
    clear: left;
    margin-top: 5px;
}

/*.confirmPayment h3 span {*/ /*Aimed arrow one*/
.paymentWarning {
    display: inline-block;
    width: 75%;
    font-size: 14px;
    line-height: 18px;
    margin-top: 20px;
    padding: 0 20px;
    font-weight: normal;
    color: @payment-warningmsg-font-color;
}

.col50 {
    float: left;
    width: 50%;
}

@media only screen and (max-width: 480px) {
    .col50 {
        width: 100%;
    }
}

#echeck {
    float: left;
    width: 100%;
    display: none;
    padding: 0px 0 5px 30px;
}

.echeckcontainer {
    display: block;
}

#echeck dd {
    width: 100% !important;
    margin-top: 10px !important;
}

a.button {
    -webkit-touch-callout: none; /* For disabling Context Menu on Anchor tags in IOS Devices */
}

.ScreenWarning {
    font-family: inherit;
    box-sizing: border-box;
    background-color: @warning-msg-bgcolor !important;
    float: left;
    width: 100%;
    padding: 15px !important;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid @warning-msg-border-color;
    border-bottom: 1px solid @warning-msg-border-color;
}

.ScreenWarning h1 {
    font-size: 18px;
    font-weight: normal;
    color: @warning-msg-font-color !important;
    line-height: 26px;
    padding: 5px 0;
    margin: 0px;
}

.ScreenWarningImg {
    background-image: @warning-icon-image;
    background-size: 30px 30px;
    padding: 5px 0;
    background-repeat: no-repeat;
}

.ScreenWarning > * {
    padding-left: 36px !important;
    display: inline-block !important;
}

.input-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.input-group select:last-child, .input-group input:last-child, .input-group .append:last-child, .input-group .button:last-child, .input-group button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group select + .append, .input-group input + .append {
    border-left-width: 0;
}

.input-group .append {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    line-height: 24px;
    padding: 5px 10px;
    border: 1px solid @inputgroup-append-border-color;
    border-radius: 3px;
}

.input-group select:first-child, .input-group input:first-child, .input-group .append:first-child, .input-group .button:first-child, .input-group button:first-child {
    border-left-width: 1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group button:active, .input-group .button:active, .input-group select:active, .input-group input:active {
    z-index: 20;
}

.CheckImage {
    max-width: 100%;
}

#CheckImages {
    padding: 15px 35px;
    border-radius: 8px;
}

#SampleCheckDiv {
    font-weight: bold;
    padding-bottom: 12px;
}

/*#creditcardcontainer .microWarning {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: .5;
    margin-bottom: 15px;
    padding-left: 30px;
}

#paypalcontainer .microWarning {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: .5;
    margin-bottom: 15px;
    padding-left: 30px;
}

#internalaccounts .microWarning {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: .5;
}

#externalaccounts .microWarning {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: .5;
}

#echeck .microWarning {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    opacity: .5;
}

#creditcardcontainer .specialInstructions {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    padding-left: 30px;
}

#paypalcontainer .specialInstructions {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
    padding-left: 30px;
}

#internalaccounts .specialInstructions {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
}

#externalaccounts .specialInstructions {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
}

#echeck .specialInstructions {
    display: block;
    clear: left;
    width: 100%;
    font-size: 12px;
}*/

.blocker {
    z-index: 1000 !important;
}

img.modal {
    max-width: 90% !important;
    padding: 0 !important;
}

.modal-header { /*Not using*/
    display: inline-block;
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-sizing: border-box;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-header strong {
    font-weight: 700;
}

.modal.modal-container {
    padding: 0;
    border-radius: 3px !important;
}

.modal.modal-container .modal-container-inner {
    padding: 1.5rem;
}

.modal.modal-container .icon-close {
    float: right;
    text-indent: -100rem;
    overflow: hidden;
}

.modal.modal-container h6 {
    padding: 0 0 1.5rem 0;
    margin: 0;
}

.modal.modal-container dl {
    display: -webkit-box;
    display: flex;
    margin: 0;
    padding: 0;
}

.modal.modal-container dl dt {
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin: 0;
    padding: 0;
}

.modal.modal-container dl dd {
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    text-align: right;
}

.modal.modal-container ul {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.modal.modal-container ul li {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal.modal-container ul li:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.modal.modal-container > button,
.modal.modal-container > .button {
    margin-top: 1.5rem;
    text-align: center;
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#modal-configbin h6 {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.5;
}

#modal-configbin .row {
    display: inline-block;
    width: 100%;
    margin-bottom: 25px;
}

#modal-configbin .row:last-of-type {
    margin-bottom: 5px;
}

#modal-configbin .row > p {
    margin-bottom: 10px;
    font-style: italic;
    opacity: 0.8;
}

#modal-configbin .row label {
    font-weight: bold;
    margin-bottom: 5px;
}

#modal-configbin .row select,
#modal-configbin .row textarea {
    width: 100%;
}

#modal-configbin .row textarea {
    min-height: 75px;
}

#modal-configbin .button {
    display: inline-block;
    width: 100%;
    margin-top: 0;
}

.external-account { /*Not using*/
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    width: 100%;
    padding: 10px 10px 10px 40px;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-position: left 10px top 10px;
    background-size: 20px 20px;
}

.external-account.unverified {
    color: #990000;
    background-image: url(../Images/icon-failed.svg);
    background-color: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.external-account.verified {
    color: #336633;
    background-image: url(../Images/icon-checkmark-green.svg);
    background-color: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.external-account.locked {
    color: #777;
    background-image: url(../Images/icon-lock.svg);
}

.external-account.pending {
    color: #777;
    background-image: url(../Images/icon-ellipses.svg);
}

.external-account h1 {
    margin: 0;
    -webkit-box-flex: 2;
    flex-grow: 2;
    font-size: 14px;
}

.external-account h1 span {
    font-weight: normal;
}

.external-account .verify,
.external-account .edit {
    margin-left: 20px;
    font-weight: bold;
}

.external-account .status {
    font-size: 12px;
    font-style: italic;
    color: #666;
    margin-top: 5px;
    width: 100%;
}

.external-account .delete {
    margin-left: 20px;
}

.external-account .delete img {
    width: 100%;
    height: 100%;
    max-width: 16px;
    max-height: 16px;
    min-width: 16px;
    min-height: 16px;
}

.external-account .delete:hover {
    opacity: 0.75;
}

.add-external-account .row {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 10px;
}

@media screen and (max-width: 480px) {
    .add-external-account .row {
        display: inline-block;
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
}

.add-external-account label {
    width: 100%;
    max-width: 200px;
    font-size: 13px;
    color: #555;
    font-weight: normal;
    padding-right: 30px;
}

@media screen and (max-width: 480px) {
    .add-external-account label {
        max-width: none;
        margin-bottom: 5px;
    }
}

.add-external-account .inputGroup {
    margin-bottom: 0;
}

.add-external-account .inputGroup input[type="text"] {
    max-width: 100px;
}

.add-external-account select {
    width: auto;
}

@media screen and (max-width: 480px) {
    .add-external-account select {
        width: 100%;
    }
}

.add-external-account input[type="text"] {
    max-width: 300px;
}

@media screen and (max-width: 480px) {
    .add-external-account input[type="text"] {
        max-width: none;
    }
}


.add-external-account input[type="text"][readonly="readonly"] {
    background-color: #fff;
    border-color: #fff;
    padding: 0;
}

.add-external-account input[type="text"][disabled="disabled"] {
    background-color: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.35);
}

#account-personalname input {
    width: 100%;
    max-width: 300px;
    margin-right: 20px;
}

@media screen and (max-width: 480px) {
    #account-personalname input {
        max-width: none;
        margin-bottom: 5px;
    }
}

#add-new-institution {
    margin-left: 10px;
}

#add-new-institution:hover {
    opacity: 0.8;
}

#add-new-institution img {
    width: 100%;
    height: 100%;
    max-width: 20px;
    max-height: 20px;
}

.verifing {
    text-align: center;
}
/*Fixes for Reset.css effects*/
#footer p {
    margin-bottom: 11px;
}

dl {
    margin: 14px 0px;
}

.mar0 {
    margin: 0px;
}

section h1 {
    font-size: 21px;
    margin: 18px 0px;
    font-weight: bold;
}

h2 {
    font-size: 21px;
    margin: 18px 0px;
    font-weight: bold;
}

.titleh3 {
    font-size: 16px;
    margin: 19px 0px;
    font-weight: bold;
}

.martb15 {
    margin: 15px 0px;
}

/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: @popup-body-bgcolor;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #cccccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #cccccc;
}

.mfp-preloader a:hover {
    color: white;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
}

button.mfp-close {
    background: @popup-close-button-bgcolor;
}

button.mfp-arrow {
    background: transparent;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    filter: alpha(opacity=65);
    padding: 0 0 18px 10px;
    color: white;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100);
}

.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: @popup-close-button-color !important;
}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: white;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #cccccc;
    font-size: 12px;
    line-height: 18px;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    filter: alpha(opacity=65);
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mfp-arrow:active {
    margin-top: -54px;
}

.mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100);
}

.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}

.mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px;
}

.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f;
}

.mfp-arrow-right {
    right: 0;
}

.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px;
}

.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: black;
}

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444444;
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.mfp-ie7 .mfp-img {
    padding: 0;
}

.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px;
}

.mfp-ie7 .mfp-container {
    padding: 0;
}

.mfp-ie7 .mfp-content {
    padding-top: 44px;
}

.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0;
}

select::-ms-expand {
    display: none;
}

input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

.customChkBx label {
    margin-left: 0;
    line-height: 1.7em !important;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.btnViewNext {
    width: 96%;
    margin: 0 2% !important;
}

.btnViewNext.disabled {
    display: none;
    cursor: not-allowed;
    color: @viewnext-button-disabed-font-color;
    background: @viewnext-button-disabed-bgcolor;
    opacity: 0.50;
    filter: alpha(opacity=50);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    pointer-events: auto;
}

.percentamount {
    width: 50px;
    background-color: #f6f6f6 !important;
    border-left: 0 !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
}

.percentamount::-webkit-outer-spin-button,
.percentamount::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.percentamount:focus {
    background-color: #fff !important;
}

.paymentamount .inputGroup {
    display: -webkit-inline-box !important;
    display: inline-flex !important;
    -webkit-box-align: stretch !important;
    align-items: stretch !important;
}

.advOptions .inputGroup {
    display: inline-flex;
}

.pmtAmtErrorWidth {
    max-width: 355px;
}

.amtOption {
    width: 70px !important;
    min-width: 70px;
}

.paymentamount-container .prefix, .form-left dd.paymentamount input {
    -ms-flex: 0 0 auto;
}

.advOptions .advBalanceDiv {
    display: inline-flex;
    align-items: center;
}

.advOptions .advOptionBalLabel {
    padding-left: 10px;
    clear: left;
    float: left;
    width: 25%;
    line-height: 18px;
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 5px;
    font-weight: bold;
}

.advOptions .advanceOptionsTextBox {
    max-width: 70px;
}

.txtAmt {
    border-bottom-right-radius: 3px !important;
    border-top-right-radius: 3px !important;
}

input:disabled {
    cursor: not-allowed;
}

.errorLnHeight {
    line-height: 1.5;
}

.customChkBx input[type="checkbox"]:not(old),
.customChkBx input[type="radio"]:not(old) {
    margin-top: -20px !important;
}
.comments {
    margin-left: 80px !important;
}

.feeOverride {
    font-weight: normal !important;
}

.convFeeOptions {
    margin-left: 28px;
}

.processingFeeOptions {
    margin-left: 28px;
}

.form-left dd.overrideFeeAmount {
    max-width: 200px;
    /*float: right;
    margin-right: 25px;*/
    float: left;
    margin-right: 0px;
    margin-left: ~"calc(75% - 220px)";
}

.form-left dd.paymentamount.overrideFeeAmount .inputGroup input[type="text"] {
    -moz-padding-end: 2px;
}

.form-left dd.paymentamount.overrideFeeAmount input {
    max-width: 170px;
}

.chkmargin label, .radiomargin label {
   -moz-margin-start: -12px !important;
}
#updateECheckAcctOptionsDiv, #deleteECheckAcctOptionsDiv {
   font-size: 14px;
}

#updateECheckAcctOptionsDiv p, #deleteECheckAcctOptionsDiv p {
       margin-bottom: 5px !important;
   }
   
.button.printBtn {
    background-color: @print-button-bgcolor;
    color: @print-button-font-color;
    box-shadow: inset 0 0 0 1px @print-button-boxshadow-color, inset 0 -3px 0 0 @print-button-boxshadow-color;
    font-size: @print-button-font-size;
    border: 1px solid @print-button-border-color;
}

.button.printBtn:hover {
    background-color: @print-button-hover-bgcolor;
    color: @print-button-hover-font-color;
}

.picker-holder--inline .pickadate__button--today {
    background-color: @datecalendar-today-button-bgcolor;
    color: @datecalendar-today-button-font-color;
    box-shadow: inset 0 0 0 1px @datecalendar-today-button-boxshadow-color, inset 0 -3px 0 0 @datecalendar-today-button-boxshadow-color;
    font-size: @datecalendar-today-button-font-size;
    border: 1px solid @datecalendar-today-button-border-color;
}

.picker-holder--inline .pickadate__button--today:hover {
    background-color: @datecalendar-today-button-hover-bgcolor;
    color: @datecalendar-today-button-hover-font-color;
}

.picker-holder--inline .pickadate__button--clear {
    background-color: @datecalendar-clear-button-bgcolor;
    color: @datecalendar-clear-button-font-color;
    box-shadow: inset 0 0 0 1px @datecalendar-clear-button-boxshadow-color, inset 0 -3px 0 0 @datecalendar-clear-button-boxshadow-color;
    font-size: @datecalendar-clear-button-font-size;
    border: 1px solid @datecalendar-clear-button-border-color;
}

.picker-holder--inline .pickadate__button--clear:hover {
    background-color: @datecalendar-clear-button-hover-bgcolor;
    color: @datecalendar-clear-button-hover-font-color;
}