/* ==========================================================================
   Form
   ========================================================================== */

/* jQuery mobile styling */



#scrolltotop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 15px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #ffbd24; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#scrolltotop:hover {
  background-color: #999794; /* Add a dark-grey background on hover */
}





.ui-popup {
    padding: 2px;
    background-color: #fff;
}

/* Secure form header */

.secure-loan-form-container {
    float: left;
    width: 90%;
    padding: 5%;
    background-color: #23b3f0;
}

.secure-loan-padlock {
    margin: 0 auto;
    width: 60%;
    display: block;
}

/* Section header text */

.section-header-container {
    float: left;
    width: 100%;
}

.section-header-text {
    text-align: center;
    color: #333;
    background-color: #ffd622;
    padding: 2.5% 0;
    font-family: 'asapbold';
}

.section-header-text p {
    margin: 0;
}

.section-header-arrow-container {
    width: 100%;
    float: left;
    background-color: #000;    
}

.section-header-container-2 {
    margin: 10% 0 5% 0;
}

.section-header-arrow {
    width: 5%;
    margin: 0 auto;
    display: block;
}

.input-select-container-amount {
    float: left;
    width: 90%;
    margin: 2% 0 0 0;
    padding: 0 5%;
}

.input-select-container-inner-amount {
    width: 100%;
    float: left;
    position: relative;
}

.select-inner-amount {
    width: 100%;
    overflow: hidden;  
    float: left;
    position: relative;
    z-index: 999;
    background-color: #000;
    height: 48px;
    margin: 0 0 30px 0;
}

.input-select-container {
    float: left;
    width: 90%;
    margin: 10px 0 0 0;
    padding: 0 5%;
}

.input-select-container-2 {
    width: 100%;    
    padding: 0;
}

.input-select-container-3 {
    float: left;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 35px;
}

.select-drop-down {
    font-family: 'open_sansregular';
    width: 110%;
    position: absolute;
    top: 7px;
    border: none;
    outline: none;
    margin: 0 0 0 5%;
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 83% center;
    background-size: 20px 20px;
    color: #000;
}

.select-drop-down-2 {
    top: 12px;
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 81% center;
    background-size: 26px 26px;
}

.select-drop-down-smaller {
    margin: 0 0 0 5px;
}

.input-select-container-small {
    float: left;
    width: 90%;
    overflow: auto;
    margin: 10px 0 0 0;
    padding: 0 5%;
}

.input-select-container-top {
    margin: 20px 0 40px 0;    
}

.input-select-container-top-2 {
    margin: 0;    
}

.input-select-container-top-3 {
    margin: 20px 0 0 0;       
}

.input-select-label {
    font-family: 'open_sanslight';
    font-weight: normal !important;
    text-shadow: none;
    color: #033041;
    font-weight: bold;
    margin: 0 0 10px 1%;
    font-size: 14px;
}

.input-select-container-inner {
    width: 100%;
    float: left;
    position: relative;
}

.input-small-inner {
    width: 30%;    
    float: left;
}

.input-field  {
    font-family: 'open_sansregular';
    color: #4e7a84;
    width: 90%;
    height: 38px;
    border: none;
    outline: none;
    float: left;
    border-radius: 5px;
    border: 1px solid #aac1c6;
    position: relative;
    padding: 0 5%;
}

.input-field-small  {
    width: 100%;
    height: 38px;
    border: none;
    outline: none;
    float: left;
    border-radius: 5px;
    border: 1px solid #aac1c6;
    position: relative;
    padding: 0 10px 0 10px;
}

.select-inner {
    width: 100%;
    overflow: hidden;  
    float: left;
    border-radius: 5px;
    height: 38px;
    position: relative;
    z-index: 999;
    background: #e0e1e2;
}

.select-inner-2 {
    height: 50px;
}

.select-inner-small-end {
    margin: 0 !important;
    float: right !important;
}

.select-inner-small-middle {
    margin: 0 auto !important;	
    float: none !important;
}

.select-inner-small {
    font-family: 'open_sansregular';
    color: #4e7a84;
    width: 28.5%;
    overflow: hidden;  
    float: left;
    border: 1px solid #aac1c6;
    border-radius: 5px;
    height: 38px;
    position: relative;
    z-index: 999;
    background: #fff;
}

.select-drop-down-small {
    font-family: 'open_sansregular';
    width: 115%;
    top: 7px;
    outline: none;
    border: none;
    position: relative;
    margin: 0 0 0 2.5%;
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 71.5% center;
    background-size: 20px 20px;
}

.select-drop-down-small-first, .select-drop-down-small-second {
    margin: 0 0 0 20% !important;
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 54% center !important;
    background-size: 20px 20px;
}

.select-question-mark-tab-container {
    float: left; 
    width: 55%;
    overflow: auto;
}

.select-drop-down-small-2 {
    font-family: 'open_sansregular';
    width: 115%;
    top: 7px;
    outline: none;
    border: none;
    position: relative;
    margin: 0 0 0 10px;
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 71% center;
    background-size: 20px 20px;
}

.select-drop-down-time {
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 72% center;
    background-size: 20px 20px;   
}

.select-drop-down-months {
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 75% center;
    background-size: 20px 20px;   
}

.select-inner-small-2 {
    font-family: 'open_sansregular';
    color: #4e7a84;
    width: 50%;
    overflow: hidden;  
    float: left;
    border: 1px solid #aac1c6;
    border-radius: 5px;
    height: 38px;
    position: relative;
    z-index: 999;
    background: #fff;   
}

.select-drop-down-small-3 {
    font-family: 'open_sansregular';
    width: 115%;
    top: 7px;
    outline: none;
    border: none;
    position: relative;
    margin: 0 0 0 2.5%;
    background: transparent url('../../img/cashFlex/drop-down-arrow.png') no-repeat 78% center;
    background-size: 20px 20px;
}

.select-inner-small-3 {
    font-family: 'open_sansregular';
    color: #4e7a84;
    width: 40%;
    overflow: hidden;  
    float: left;
    border: 1px solid #aac1c6;
    border-radius: 5px;
    height: 38px;
    position: relative;
    z-index: 999;
    background: #fff;   
}

.select-inner-small-4 {
    font-family: 'open_sanssemibold';
    color: #4e7a84;
    width: 55%;
    overflow: hidden;  
    float: left;
    border: 1px solid #819da5;
    border-radius: 5px;
    height: 38px;
    position: relative;
    z-index: 999;
    background: #fff;      
}

.select-inner-small-5 {
    width: 60%;   
}

.amount-period-section {
    float: left;
    width: 90%;
    background-color: #adc3c8;
    padding: 15px 5%;
}

.amount-period-wrapper {
    float: left;
    width: 100%;
}

.amount-period-container  {
    float: left;
    width: 100%;   
    clear: both;
    margin: 0 0 5% 0;
}

.amount-period-container-bottom {
    margin: 0;
}

.amount-input-wrapper {
    float: right;
    width: 50%;
    background-color: #fff;
    border: 1px solid #819da5;
    border-radius: 5px;
    height: 38px;
    padding: 0 2.5%;
}

.amount-period-wrapper p  {
    float: left;
    margin: 12px 0 0 0;
    width: 40%;
    letter-spacing: -0.5px;
    font-family: 'open_sansregular';
    color: #022f40;
}

.amount-input-container {
    width: 55%;
    margin: 0 auto;
}

.amount-input-container input {
    width: 100%;
    outline: none;
    border: none;
    text-align: center;
    font-family: 'open_sanssemibold';
    color: #4e7a84;
    letter-spacing: -1px;
    font-size: 18px;
    margin: 6px 0 0 0;
    padding: 0;
}

.form-section {
    float: left;
    width: 100%;
    clear: both;
    padding: 0 0 20px 0;
    margin: 0 0 20px;
    border-bottom: 1px solid #aac1c6;
}

.form-section-2 {
    border-bottom: none;
}

.form-section-header-wrapper {
    float: left;
    width: 90%;
    padding: 0 5% 10px 5%;
}

.form-section-header-container {
    float: left;
    width: 100%;
    clear: both;
    margin: 0 0 10px 0;
}

.form-section-header-container-2 {
    margin: 10px 0;
}

.form-section-header-container-bottom {
    margin: 0;
}

.form-section-header-container .form-section-header-text-container {
    float: left;
    width: 80%;
}

.form-section-header-container .form-section-header-text-container-2 {
    float: left;
    width: 90%;
}

.form-section-header-container .form-section-header-text-container h1 {
    font-family: 'open_sansregular';   
    font-weight: normal;
    margin: 0.75% 0 0 3%;
    font-size: 14px;
    color: #4e7a84;
    width: 100%;
}

.form-section-header-text-container p {
    font-family: 'open_sansregular';  
    float: left;
    margin: 0 0 0 2.5%;
    font-size: 13px;
    color: #4e7a84;
    width: 100%;
}

.form-section-header-text-container-2 p {
    font-family: 'open_sansregular';  
    float: left;
    margin: 8px 0 0 2.5%;
    font-size: 13px;
    color: #4e7a84;
    width: 100%;
}

.form-section-header-text-container p.darker-blue-text {
    color: #033041;   
}

.secure-lock-symbol {
    float: left;
    width: 8%;
}


.form-section-header-question-number-container {
    float: left;
    background-image: url('../../img/cashFlex/question-number-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px; 
}

.form-section-header-question-number-container p {
    margin: 10% 0 0 0;
    text-align: center;
    color: #033041;
    font-family: 'open_sansbold';
    font-size: 14px;
}

.form-section-header-question-tip-container {
    float: left;
    background-image: url('../../img/cashFlex/tip-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    width: 31px;
    height: 27px;
}

.form-section-header-question-tip-container  p {
    margin: 0;
    color: #fff;
    font-size: 11px;
    letter-spacing: -0.5px;
    text-align: center;
    font-family: 'open_sansbold';
    margin: 4px 0 0 0;
    position: relative;
    left: -3px;
}

.minus-btn-2 {
    float: left;
    width: 20px;
    margin: 10px 0 0 0;
}

.plus-btn-2 {
    float: right;
    width: 20px;
    margin: 10px 0 0 0;
}

.question-mark-tab {
    background: #1faec0 url('../../img/paydayHeroes/question-mark-bg.png') no-repeat;
    background-size: 22px 22px;
    background-position: 88% center;
    width: 25%;
    height: 46px;
    float: right; 
    border-radius: 10px;
    margin: 0 0 0 -15%;
}

.mr-mrs-container {
    float: left;
    width: 90%;
    overflow: auto;
    padding: 0 5%;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
}

.title-button {
    background: #ce2021; 
    float: left;
    position: relative;   
    padding: 12px 0 11px 0;
    width: 21%;
    text-align: center;
    margin: 0 1% 0 0;
    cursor: pointer;
    color: #fff;
}

.mr-button {
    border-radius: 15px 0 0 15px;
}

.ms-button {
    border-radius: 0 15px 15px 0;
}

.find-address-btn {
    background: url('../../img/cashFlex/find-address-btn.png') no-repeat;
    width: 125px;
    height: 33px;
    padding: 11px 0 0 0;
    float: right;
    position: relative;
    top: -3px;
}

.find-address-btn p {
    color: #fff;
    text-align: center;
    margin: 0;
    font-family: 'open_sansregular';
    letter-spacing: -1px;
}

.address-fields {
    display: none;
    width: 100%;
    float: left;
    overflow: auto;
    position: relative;
    text-shadow: none;
    font-weight: bold;    
}

.address-fields-inner {
    margin: 2% 0 0 0;
}

.ie-text {
    float: left;
    font-family: 'open_sanslight';
    color: #7a9ea6;
    text-shadow: none;
    font-size: 13px;
    margin: 2% 0 0 0;
    width: 100%;
    text-align: right;
}

.button-section {
    float: left;
    width: 100%;
    background: #000;
    padding: 5% 0 0 0;
}

.form-bottom-divider-line {
    width: 100%;
    float: left;
    overflow: auto;
    margin: 10% 0 8.5% 0;
}

.form-bottom-divider-line-thin {
    width: 100%;
    float: left;
    overflow: auto;
    margin: 5% 0 5% 0;
}

.next-step-btn {
    background-image: url('../../img/cashFlex/cta-btn.png');
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 18% 0 0 0;
    width: 90%;
    margin: 0 auto; 
    display: block;
    position: relative;
}

.next-step-btn p {
    color: #fff;
    position: absolute;
    top: 19%;
    left: -6%;
    text-align: center;
    width: 100%;
    font-family: 'open_sansregular';
    letter-spacing: -1px;
    margin: 0;
}

.next-step-btn .arrow {
    position: absolute;
    top: 28%;
    width: 6%;
    right: 29%;
}

.next-step-btn-container {
    float: left;
    width: 100%;
    margin: 0 0 40px 0;
}

.note-container {
    float: left;
    width: 90%;
    padding: 10% 5%;
    background-color: #c6d5d9;
}

.note-container p {
    margin: 0;
    color: #022f40;
    font-family: 'open_sanslight';
    font-size: 14px;
    letter-spacing: -0.5px;
}

.optional-extras-container {
    width: 90%;
    float: left;
    padding: 0 5% 0 5%;
}

.optional-header-text {
    float: left;
    width: 100%;
    overflow: auto;
    color: #fff;
    text-shadow: none;
    margin: 0 0 5% 0;
    font-family: 'asapbold';
    font-size: 24px;
}

.optional-text {
    color: #fff;
    text-shadow: none;
    width: 100%;
    float: left;
    margin: 3% 0 0 0;
    font-family: 'asapbold';
    font-weight: bold;
    font-size: 16px;
}

.optional-extra-container {
    width: 100%;
    float: left;
}

.optional-extra {
    float: left;
    width: 15%;
    overflow: auto;
    margin: 5% 0 5% 0;
    padding: 2.5% 5%;
}

.optional-extra-smartphone {
    padding: 0 0 0 3%;
}

.optional-extra-img {
    margin: 0 auto;
    background-size: 100%;
    display: block;
}

.optional-slider-container {
    background: url('../../img/longerLoans/optional-slider-bg.png') no-repeat;
    float: right;
    width: 68%;
    background-size: 100%;
    margin: 6.5% 2.5% 0 0;
}

.optional-extra-container {
    width: 90%;
    float: left;
    margin: 10px 0;
    background-color: #fff;
    padding: 0 5% 3px 5%;
    border-radius: 10px;
}

.optional-extra-img-container {
    float: left;
}

.optional-extra-img {
    height: 34px;
    display: block;
    margin: 6px 0 0 0;
}

.yes-no-container {
    float: right;
    width: 100px;
    margin: 3px 0 0 0;
}

.yes-no-container .yes-text {
    padding: 11px 0 0 0; 
    height: 29px;
    width: 40px;
    float: right;
    font-size: 16px;
    font-weight: bold;
    color: #adadad;
    text-align: center;
    cursor: pointer;
}

.yes-no-container .no-text {
    color: #adadad;
    padding: 11px 0 0 0; 
    height: 29px;
    width: 40px;
    float: left;
    font-size: 16px;
    font-weight: bold;  
    text-align: center;
    cursor: pointer;
}

.yes-active {
    background: url('../../img/paydayHeroes/yes-bg.png') no-repeat; 
    color: #fff !important;  
}

.no-active {
   background: url('../../img/paydayHeroes/no-bg.png') no-repeat; 
   color: #fff !important; 
}

.credit-rating-text {
    float: left;
    width: 90%;
    padding: 0 5%;
    margin: 0 0 20px 0;
}

.terms-privacy-text {
    float: left;
    width: 100%;
    margin: 20px 0 0 0;
}

.terms-privacy-text p {
    margin: 0;
    padding: 0;
    text-shadow: none;
    color: #7d9fa7;
    font-family: 'open_sansbold';
    font-size: 14px;
    letter-spacing: -0.5px;
}

.terms-privacy-text p a {
    color: #7d9fa7 !important;
    text-decoration: none;
    cursor: pointer;
}

.terms-privacy-text-2 {
    float: left;
    margin: 0;
}

.terms-privacy-text-2 p {
    font-family: 'open_sansregular';
    color: #033041;
}

.untick-box-text {
    float: left;
}

.checkbox-container {
    width: 95%;
    border-radius: 6px;
    background: #adc3c8;
    float: left;
    margin: 20px 0;
    padding: 2.5%;
    cursor: pointer;
}

.checkbox-container-bottom {
    float: left;
    margin: -2px 0 0 6px;
    cursor: pointer;
}

.checkbox-text {
    float: left;
    text-shadow: none;
    color: #033041;
    margin: 3px 0 0 10px;
    font-family: 'open_sansbold';
}

.checkbox-1 {
    float: left;
    background: url('../../img/cashFlex/checkbox.png') no-repeat;
    width: 25px;
    height: 26px;
}

.checkbox-2 {
    background: url('../../img/cashFlex/checkbox-2.png') no-repeat;
    width: 20px;
    height: 20px;
    float: left;
}

.checkbox-active-bg {
    background-position: 0 -26px;
}

.checkbox-bg {
    background-position: 0 0;
}

.checkbox-2-bg {
     background-position: 0 -20px;
}

#terms-and-conditions-label {
    display: none;
    text-shadow: none; 
    width: 90%; 
    color: #DF204D; 
    font-weight: bold; 
    float: left;
    overflow: auto;
    clear: both;
    margin: 20px 0 0 0;
}

.bold-text {
    font-family: 'open_sansbold';   
}

.semibold-italic-text {
    font-family: 'open_sanssemibold_italic';    
}

.semibold-text {
    font-family: 'open_sanssemibold';       
}

.extra-bold-text {
    font-family: 'open_sansextrabold';         
}

.bold-italic-text {
    font-family: 'open_sansbold_italic';            
}


.average-text {
    color: #d3ca00;
}

.good-text {
    color: #adc20d;
}

.very-good-text {
    color: #08b441;
}

.excellent-text {
    color: #086441;
}

.great-news-container h1.unknown-text,
.unknown-text {
    color: #4b4c4c;
}

.meter-wrapper {
    float: left;
    width: 100%; 
    position: relative;
}

.meter-wrapper h1 {
    font-family: 'open_sanslight';
    font-weight: normal;
    letter-spacing: -2px;
    color: #4e7a84;
    font-size: 23px;
    margin: 5% 0;
}    
    
.meter-wrapper .meter-container {
    position : relative;
    float: left;
    width: 100%;
    margin: 0 0 5% 0;
}

.meter-wrapper .meter-container-2 {
    margin: -7% 0 5% 0;    
}

.meter-container .meter-needle {
    display: block;
    margin: 0 auto;
    width: 70%;
}

.meter-container .meter {
    position: absolute;
    bottom: 0;
    left: 12.5%;
    width: 70%;
}

.great-news-container {
    float: left;
    width: 100%;
    margin: 0 0 20px 0;
}

.great-news-container h1 {
    color: #08b441;
    letter-spacing: -1px;
    font-size: 23px;
    margin: 0;
}

.great-news-container p {
    font-size: 16px;
    font-family: 'open_sanslight';
    color: #022f40;
    margin: 10px 0 0 0;
}

.final-step-container {
    float: left;
    width: 90%;
    padding: 5%;
    background-color: #deecd9;
    border: 1px solid #cbd1c9;
}

.final-step-container h1 {
    float: left;
    margin: 2px 0 0 0;
    color: #63a64c;
    font-weight: normal;
    font-family: 'open_sansbold';  
    font-size: 20px;
    letter-spacing: -1px;
}

.final-step-container .proceed-tick {
    float: left;
    width: 30px;
    margin: 0 0 0 2.5%;
}

.final-step-container .data-secure-logo {
    float: left;
    width: 100%;
    margin: 7.5% 0 0 0;
}

.proceed-to-loan-offers-btn-container {
    float: left;
    width: 100%;
    margin: 20px 0;    
}

.proceed-to-loan-offers-btn {
    background-image: url('../../img/cashFlex/cta-btn.png');
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 18% 0 0 0;
    width: 100%;
    margin: 0 auto; 
    display: block;
    position: relative;
}

.proceed-to-loan-offers-btn p {
    color: #fff;
    position: absolute;
    top: 22%;
    text-align: center;
    width: 100%;
    font-family: 'open_sansregular';
    letter-spacing: -1px;
    margin: 0;
}

.proceed-to-loan-offers-supporting-text {
    float: left;
    clear: both;
    margin: 0 0 40px 0;
    color: #033041;
}

.loan-deposited-container {
    float: left;
    width: 100%;
    margin: 5% 0 0 0;
}

.loan-deposited-container .loan-deposited-icon {
    float: left;
    width: 40px;
}

.loan-deposited-text-container {
    float: left;
    width: 100%;
}

.loan-deposited-text-container p {
    margin: 0;
    color: #033041;
    font-family: 'open_sansbold';
    font-size: 14px;
}

/* ==========================================================================
    Error classes
   ========================================================================== */

.error {
    display: block !important;
    color: #df204d;
    background: url(../../img/longerLoans/cross.png) 0 .2em no-repeat;
    padding-left: 20px;
    padding-top: 0;
    font-size: 16px;
    font-weight: normal;
}

#page1errors {
    font-family: 'open_sansregular';
    display: none; 
    text-shadow: none; 
    width: 90%; 
    color: #df204d; 
    float: left;
    clear: both;
    margin: 0 0 20px 5%;
    font-size: 16px;
}

#page2errors {
    font-family: 'open_sansregular';
    display: none; 
    text-shadow: none; 
    width: 100%; 
    color: #df204d; 
    float: left;
    clear: both;
    margin: 0;
    font-size: 16px;    
}

#loanAmount{
    font-size: 16px;
    padding: 1px 0;
    height: 30px;
}


.modalxpup{
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  overflow-x: hidden;
}

/* Modal Content/Box */
.modalx-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
}

.modalx-content p{
    color: black;
    clear: both;
    font-size: 0.5em;
    font-family: 'open_sanslight';
}

/* The Close Button */
.closexpup {
  color: #787777;
  float: right;
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}

.closexpup:hover,
.closexpup:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.popup-button{
    background: none;
	color: #fff;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.modalx-open {
    margin: 0; 
    height: 100%;
    overflow: hidden !important;
    position: fixed;
}

.header-hide{
    display: none;
}