@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');


body {
    font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

:root {
    --primary-red: #F60025; /* fallback */
    --primary-red-p3: color(display-p3 0.8824 0.098 0.1922);
    --primary-red-bubble: #F9D2D7;
    --primary-red-bubble-p3: color(display-p3 0.9529 0.8275 0.8431);
    --primary-yellow: #FFDE00;
    --primary-yellow-p3: color(display-p3 1 0.8745 0.2627);
    --primary-yellow-dark: #645000;
    --primary-yellow-dark-p3: color(display-p3 0.3804 0.3176 0);
    --primary-yellow-light: #FBF5DE;
    --primary-yellow-light-p3: color(display-p3 0.9804 0.9608 0.8784);
    --primary-yellow-background: #EFEFB4;
    --primary-yellow-background-p3: color(display-p3 0.9375 0.9375 0.7305);
    --primary-yellow-hover: #FFE747;
    --primary-yellow-hover-p3: color(display-p3 1 0.9098 0.4);
    --primary-text-fields-p3: color(display-p3 0.1255 0.1255 0.1255);
    --primary-gray-dark: #737373;
    --primary-gray-dark-p3: color(display-p3 0.45 0.45 0.45);
    --primary-gray: #E4E4E4;
    --primary-gray-p3: color(display-p3 0.8941 0.8941 0.8941);
    --primary-gray-background: #F6F6F6;
    --primary-gray-background-p3: color(display-p3 0.9632 0.9632 0.9632);
    --primary-gray-medium: #A7A7A7;
    --primary-gray-medium-p3: color(display-p3 0.6534 0.6534 0.6534);
    --primary-green: #00A700;
    --primary-green-p3: color(display-p3 0.1775 0.642 0.118);
    --primary-green-light: #D3EAD0;
    --primary-green-light-p3: color(display-p3 0.8431 0.9137 0.8235);
    --primary-black: #202020;
    --primary-black-p3: color(display-p3 0.1255 0.1255 0.1255);
}

/*body, p, h2, h4, li {
    color: var(--primary-black) !important;
}*/


div.noPadding{
    padding: 0;
}

.red {
    color: var(--primary-red) !important;
}

a.gray {
    color: var(--primary-gray-dark);
}

/*input[type="text"],
input[type="file"],
input[type="email"],
input[type="password"],*/
.new-loan-page a.mobile-back-button,
.new-loan-page a.desktop-back-button,
#consentsCloseButton {
    font-family: 'Source Sans Pro', sans-serif;
    color: var(--primary-gray-dark);
    box-shadow: none;
    -webkit-box-shadow: none;
    text-decoration: underline;
}

.new-loan-page .loan-step .title, .fancybox .header .title, .loanStep.fifth .title, #userAccount .title, .title {
    color: var(--primary-red); /* fallback */
    text-align: center;
    /*font-family: "Source Sans Pro";*/
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px; /* 104.167% */
}
#memorandum .title{
    margin-top: 30px;
}

#errorMessageBox .title, .title.left {
    text-align: left !important;
}
.loan-step .title {
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 104.167% */
}
.loan-step .title.green, .title.green {
    color: var(--primary-green) !important;
}
.new-loan-page input[type="text"].has-error, .new-loan-page input[type="file"].has-error, .new-loan-page input[type="email"].has-error, .new-loan-page input[type="password"].has-error, .new-loan-page input[type="password"].has-error ~ .new-loan-page.select2Container, .new-loan-page .loan-step .has-error {
    border-color: var(--primary-red) !important;
}

input[type="text"]:hover,
input[type="file"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="text"]:hover ~ .new-loan-page .select2Container,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
.buBox .checkbox .control,
.new-loan-page .loan-step .checkbox .control {
    border-color: var(--primary-red);
}

.new-loan-page .newLoanInput.has-error + span:before, .new-loan-page .invalid-input {
    color: var(--primary-red);
}

a {
    color: var(--primary-red); /* fallback */
}

.HCButton {
    display: flex;
    width: 100%;
    height: 44px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 25px;
    background-color: var(--primary-yellow);
    color: var(--primary-text-fields);
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 100% */
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

.HCButton:not(.gray):not(.yellow):not(.green):not(.disabled):not(.noHover):hover {
    background-color: var(--primary-yellow-hover);
}

.HCButton.disabled {
    color: var(--primary-gray-medium);
    background-color: var(--primary-gray);
    pointer-events: none;
    user-select: none;
}

.HCButton.gray {
    background-color: var(--primary-gray);
    color: var(--primary-text-fields);
}

.HCButton.green {
    background-color: var(--primary-green-light);
    color: var(--primary-text-fields);
}

.HCButton.yellow {
    background-color: var(--primary-yellow-light);
    color: var(--primary-yellow-dark);
}

.HCButton .yellow.light {
    background-color: var(--primary-yellow-light);
    color: var(--primary-yellow-dark);
}

.fifth a.pink {
    color: var(--primary-black);
}

.new-loan-page input[type="radio"]:after, .new-loan-page input[type="radio"]:checked:after {
    outline-color: var(--primary-red);
    height: 20px;
    width: 20px;
}

.new-loan-page input[type="radio"]:checked:after {
    background-color: var(--primary-red);
}

.standardText-12 {
    color: var(--primary-text-fields);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 100% */
    font-family: 'Source Sans Pro', sans-serif;
}

.standardText-16 {
    color: var(--primary-text-fields);
    text-transform: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    font-family: 'Source Sans Pro', sans-serif;
}

.standardText-14 {
    color: var(--primary-text-fields);
    text-transform: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 125% */
    font-family: 'Source Sans Pro', sans-serif;
}

.new-loan-page input[type="radio"]{
    height: 20px;
    width: 20px;
    margin-right: 5px;
    margin-left: 10px;
}

.new-loan-page .stepSelect input[type="radio"] {
    margin-left: 0px;
}
.new-loan-page #newstepEducation .stepSelectOption,
.new-loan-page #newstepHousing .stepSelectOption,
.loanStep #PermanentDocumentFirstStep .stepSelectOption,
.new-loan-page #newstepIncome .stepSelectOption {
    border-color: var(--primary-gray);
    /*box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.05);*/
}
.new-loan-page #newstepEducation .stepSelectOption.activeOption,
.new-loan-page #newstepHousing .stepSelectOption.activeOption,
.loanStep #PermanentDocumentFirstStep .stepSelectOption.activeOption,
.new-loan-page #newstepIncome .stepSelectOption.chosen {
    border-color: var(--primary-green);
}

.new-loan-page #newstepEducation .stepSelectButton:after,
.new-loan-page #newstepHousing .stepSelectButton:after,
.loanStep #PermanentDocumentFirstStep .stepSelectButton:after,
.new-loan-page #newstepIncome .stepSelectButton:after {
    outline-color: var(--primary-gray);
}

.stepSelectOption span {
    top: 3px;
    position: relative
}
.new-loan-page .stepTitle p {
    padding: 0 15px;
    line-height: 20px;
}
#documentValidity input::placeholder, .new-loan-page .placeholderText{
    color: var(--primary-text-fields);
    font-weight: 400;
}

.newLoanInput:focus ~ .placeholderText, .newLoanInput:not([value='']) ~ .placeholderText, .newLoanInput.has-success ~ .placeholderText, select.has-success ~ .placeholderText {
    color: var(--primary-gray-dark);
}
.incomeStep .stepSelectOption svg{
    fill: var(--primary-red);
}
.stepSelect .mobile-next-button .d-flex {
    flex-direction: column-reverse;
}
.new-loan-page #BAAgreement.disagree {
    background: #fff;
    border: 1px solid var(--primary-red);
    border-radius: 10px;
}
.new-loan-page .selectContainer select {
    padding: 20px 30px 11px 15px;
    font-weight: 400;
    height: 50px;
}
.new-loan-page .selectContainer #country,
.new-loan-page .selectContainer #countryAddressDelivery {
    padding-top: 12px;
    color: var(--primary-gray-medium);
    border-radius: 8px;
}
.new-loan-page .selectContainer #country option:not(:disabled),
.new-loan-page .selectContainer #countryAddressDelivery option:not(:disabled) {
    color: var(--primary-black);
}
.new-loan-page .selectContainer #country.has-success,
.new-loan-page .selectContainer #countryAddressDelivery.has-success {
    padding-top: 20px;
    color: var(--primary-black);
}
#country ~ .invalid-input {
    position: absolute;
    right: 55px;
    top: 20px;
}
.new-loan-page .loan-step .js-step .selectContainer .check {
    top: 18px;
    right: 60px;
}
.divided .validate-first::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0px;
    height: 1px;
    background-color: var(--primary-gray);
    display: block;
}
.fancybox-close {
    position:absolute;
    visibility: hidden;
}
.homepage .fancybox-wrap .fancybox-close {
    visibility: visible;
}
.fancybox.no-x .header{
    padding-right: 0;
}
.showLabelAfterSuccess + .placeholderText {
    display: none;
}
.showLabelAfterSuccess.has-success + .placeholderText {
    display: block;
}
.loanStep.second .selectContainer{
    height: 50px;
}
.loan-loading .svg #arc, .loan-loading .svg-mobile #arc {
    stroke: var(--primary-red);
}
.loan-step .d-flex {
    flex-wrap: wrap-reverse;
}

#front-page-header #info:first-child {
    transform: scale(1.1);
}

.stepSelect .stepSelectBottomContainer{
    visibility: hidden;
}
.stepSelect .stepSelectBottomContainer.visible {
    visibility: visible;
}

.js-show-on-valid, .js-hide-on-valid {
    display: none;
}

.js-show-on-valid.visible, .js-hide-on-valid.visible {
    display: block;
}

.employerBox input.open {
    border-radius: 7px 7px 0 0;
    border-bottom: 2px solid var(--primary-red);
}

#employerInput:focus {
    border-color: var(--primary-red);
}
.new-loan-page .loan-step .checkbox label input[type="checkbox"]:checked + .control.green {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}
.new-loan-page #BAAgreement.agree, .consents-redesign .checkbox.agree {
    background: var(--primary-green-light);
    border: 1px solid var(--primary-green-light);
}
.buBox ul.checklist li:before {
    content: "\e647";
    color: #ffffff;
    background-color: var(--primary-green-p3);
    width: 20px;
    height: 20px;
    top: 0;
    content: '\e647';
    font-family: 'icomoon';
    font-size: 8px;
    font-weight: 900;
    padding: 1px 4px;
}
.userPanel a {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    color: var(--primary-black);
    text-decoration: none;
    margin: 0 20px;
    display: inline-block;
}
.userPanel .js-svgImage {
    display: none;
}
#front-page-header #info img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    top: 5px;
    position: relative;
    cursor: pointer;
}

.new-loan-page #newstepEducation .stepSelectOption.activeOption img,
.new-loan-page #newstepHousing .stepSelectOption.activeOption img,
.new-loan-page #newstepIncome .stepSelectOption.chosen img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(83%) saturate(4871%) hue-rotate(83deg) brightness(92%) contrast(96%);
}

@media (min-width: 480px) {
    #front-page-header .navbar img {
        height: 45px;
        top: -7px;
        position: relative;
        left: 20px;
        width: auto;
    }
    .HCButton {
        width: 300px;
    }
}
@media (max-width: 479px) {
    .loan-step .js-step .mobileFixed {
        bottom: 0;
        position: fixed;
        right: 0;
        left: 0;
        padding-bottom: 15px;
    }
    .mobileFixed.blur {
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .stepBody {
        margin-bottom: 150px;
    }
    .stepBody.noBack{
        margin-bottom: 100px;
    }
    .HCButton {
        width: 100%;
    }
}
@media (max-width: 767px) {
    #newstepEducation .housingSelectFirst, #newstepHousing .housingSelectFirst, #PermanentDocumentFirstStep .housingSelectFirst {
        margin-left: 0;
    }
}
@media (max-width: 991px) {
    .mobile-next-button .d-flex {
        flex-direction: column-reverse;
    }
}
@media (min-width: 992px) {
    .validate-first {
        position: relative;
        display: inline-block;
    }
    .HCButton {
        width: 335px;
    }
}
@media (max-width: 600px) {
    .userPanel .headerPhone, .userPanel .headerLogin {
        display: none;
    }

    .userPanel .js-svgImage {
        display: inline-block;
    }
}
@supports (color: color(display-p3 1 0 0)) {
    a, .new-loan-page .loan-step .title, .new-loan-page .newLoanInput.has-error + span:before, .new-loan-page .invalid-input {
        color: var(--primary-red-p3);
    }

    .red {
        color: var(--primary-red-p3) !important;
    }

    .standardText-16, .standardText-12, .new-loan-page .newLoanInput, #documentValidity input::placeholder, .new-loan-page .placeholderText, select ~ .placeholderText {
        color: var(--primary-text-fields-p3);
    }

    #documentValidity input::placeholder,
    /*    input[type="text"],
    input[type="file"],
    input[type="email"],
    input[type="password"],*/
    .new-loan-page .mobile-back-button a,
    .new-loan-page .desktop-back-button a {
        color: var(--primary-gray-dark-p3);
        border-color: var(--primary-gray-p3);
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .newLoanInput:focus ~ .placeholderText, .newLoanInput:not([value='']) ~ .placeholderText, .newLoanInput.has-success ~ .placeholderText, select.has-success ~ .placeholderText, #consentsCloseButton {
        color: var(--primary-gray-dark-p3);
    }

    .new-loan-page input[type="radio"]:checked:after {
        background-color: var(--primary-red-p3);
    }

    .new-loan-page input[type="text"].has-error,
    .new-loan-page input[type="file"].has-error,
    .new-loan-page input[type="email"].has-error,
    .new-loan-page input[type="password"].has-error,
    .new-loan-page input[type="password"].has-error ~ .new-loan-page.select2Container,
    .new-loan-page .loan-step .has-error {
        border-color: var(--primary-red-p3) !important;
    }

    input[type="text"]:hover,
    input[type="file"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    input[type="text"]:hover ~ .new-loan-page .select2Container,
    input[type="text"]:focus,
    input[type="file"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
/*    .new-loan-page #newstepEducation .stepSelectOption.activeOption,
    .new-loan-page #newstepHousing .stepSelectOption.activeOption,*/
    #PermanentDocumentFirstStep .stepSelectOption.activeOption,
    /*.new-loan-page #newstepIncome .stepSelectOption.chosen,*/
    .new-loan-page #BAAgreement.disagree,
    .buBox .checkbox .control,
    .new-loan-page .loan-step .checkbox .control {
        border-color: var(--primary-red-p3);
    }

    .new-loan-page #newstepEducation .stepSelectOption,
    .new-loan-page #newstepHousing .stepSelectOption,
    #PermanentDocumentFirstStep .stepSelectOption,
    .new-loan-page #newstepIncome .stepSelectOption,
    .divided .validate-first::after {
        border-color: var(--primary-gray-p3);
    }

    .new-loan-page .loan-step .checkbox label input[type="checkbox"]:checked + .control.green {
        background-color: var(--primary-green-p3);
        border-color: var(--primary-green-p3);
    }

    .new-loan-page #BAAgreement.agree, .consents-redesign .checkbox.agree {
        background: var(--primary-green-light-p3);
        border: 1px solid var(--primary-green-light-p3);
    }

    .loan-step .title .green {
        color: var(--primary-green-p3);
    }

    .HCButton {
        background-color: var(--primary-yellow-p3);
        color: var(--primary-text-fields-p3);
    }

        .HCButton.gray {
            background-color: var(--primary-gray-p3);
            color: var(--primary-text-fields-p3);
        }

    .new-loan-page input[type="radio"]:after, .new-loan-page input[type="radio"]:checked:after {
        outline-color: var(--primary-red-p3);
    }

    .new-loan-page #newstepEducation .stepSelectButton:after,
    .new-loan-page #newstepHousing .stepSelectButton:after,
    .loanStep #PermanentDocumentFirstStep .stepSelectButton:after,
    .new-loan-page #newstepIncome .stepSelectButton:after {
        outline-color: var(--primary-gray-p3);
    }

    .incomeStep .stepSelectOption svg {
        fill: var(--primary-red-p3);
    }

    .loan-loading .svg #arc, .loan-loading .svg-mobile #arc {
        stroke: var(--primary-red-p3);
    }
}