html {
    scroll-behavior: smooth;
}

body {
    background: var(--teflie-background-warm) !important;
}

#primary {
    margin: 3rem 0 !important;
}

.ast-container {
    max-width: 1300px !important;
    margin: auto !important;
}

body.screening_form-template-default #content>.ast-container {
    padding: 0 20px !important;
}

body.screening_form-template-default .ast-container,
body.screening_form-template-default .ast-container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Section Title */
.section-title {
    font-family: var(--teflie-font-headings);
    font-size: 40px;
    font-weight: var(--salmond-news);
    line-height: 120%;
    letter-spacing: 0.5px;
    margin-bottom: var(--teflie-space-md);
    color: var(--teflie-text-primary);
}

.img-col div {
    width: 580px;
    height: 330px;
    border-radius: 25px;
    background-position: center;
    background-size: cover;
}

label {
    display: block;
    margin: 0;
    padding: 0;
}

.send-email-success {
    display: none;
}

.get-started-text {
    margin-bottom: 0px !important;
}

.get-started-btn i {
    font-size: 1.2rem;
    margin-left: 5px
}

.salary-calc-row {
    padding: 70px 0;
    display: flex;
    align-items: center;
}

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

.name-div,
.email-div,
.phone-div,
.tefl-passport-div,
.tefl-english-level-div,
.tefl-degree-div,
.tefl-age-div,
.tefl-criminal-record-div,
.tefl-health-div,
.tefl-open-mind-div,
.final-submit-div,
.name-ok-btn,
.email-ok-btn,
.phone-ok-btn {
    display: none;
}

label .wpcf7-list-item-label {
    cursor: pointer !important;
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-radius: 15px;
    margin-bottom: 10px;
    background: var(--teflie-background-light-green);
}

label .wpcf7-list-item-label:before {
    font-weight: 400;
    font-size: 24px;
    margin: 0 10px 0 5px;
    background-color: var(--teflie-border-2);
    color: #fff;
    border-radius: 10px;
    font-size: 1rem;
    padding: 4px 10px;
}

.wpcf7-list-item-label:before {
    content: 'A';
}

label:nth-child(2) .wpcf7-list-item-label:before {
    content: 'B';
}

label:nth-child(3) .wpcf7-list-item-label:before {
    content: 'C';
}

label:nth-child(4) .wpcf7-list-item-label:before {
    content: 'D';
}


/*.tefl-qualification span.wpcf7-list-item {
    width: 30%;
}*/

.wpcf7-radio span.wpcf7-list-item label::before {
    background-color: #193847;
    color: #fff;
    line-height: 1em;
    margin-right: 5px;
    border-radius: 10px;
    padding: 4px 10px;
}

.wpcf7-radio span.wpcf7-list-item.first label::before {
    content: 'A';
}

.wpcf7-radio span.wpcf7-list-item:nth-child(2) label::before {
    content: 'B';
}

.wpcf7-radio span.wpcf7-list-item:nth-child(3) label::before {
    content: 'C';
}

.wpcf7-radio span.wpcf7-list-item:nth-child(4) label::before {
    content: 'D';
}

.wpcf7 input[type=radio] {
    border-radius: 0px !important;
    font-size: 0;
    display: none;
}

.wpcf7 input[type=radio]:checked::after {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 25px !important;
    margin-left: 15px;
    color: #193847;
}

.salary-calculator-form .wpcf7-response-output {
    font-size: 20px !important;
    border: none !important;
    text-align: center;
    margin: 0 0 !important;
    padding: 0 !important;
}

.salary-calculator-form form.wpcf7-form.init {
    /*width: 70%;*/
    margin: 0 auto;
}

.salary-calculator-form .wpcf7-text,
.salary-calculator-form .wpcf7-intl-tel {
    border: none !important;
    border-bottom: .25px solid #cdced0 !important;
    background: none !important;
    padding: 0px !important;
    line-height: 2em;
    font-size: 22px;
}

.salary-calculator-form form.wpcf7-form.init div>label {
    /*font-size: 25px;
    font-weight: bold;*/
    text-transform: uppercase;
    font-weight: 500;
    /* letter-spacing: 0.3rem; */
    font-size: 1.3rem;
    display: block;
}

.salary-calculator-form form.wpcf7-form i.fa.fa-arrow-right {
    font-size: 25px;
    margin: 0 5px;
}

.info-text {
    display: flex;
}


/*.info-text p {
    font-size: 20px;
}*/

.info-text h3 {
    text-transform: uppercase;
    font-size: 1.875rem;
    line-height: 2.6rem;
    margin-bottom: 20px;
}

.info-text,
.name-div,
.email-div,
.phone-div,
.tefl-passport-div,
.tefl-english-level-div,
.tefl-degree-div,
.tefl-age-div,
.tefl-criminal-record-div,
.tefl-health-div,
.tefl-open-mind-div,
.final-submit-div {
    align-items: center;
}


/*.number-div {
    width: 8%;
    font-size: 30px;
}

.content-div {
    width: 92%;
}*/

.salary-calculator-form .wpcf7-intl-tel {
    padding-left: 50px !important;
}

.wpcf7-radio span.wpcf7-list-item.checked label {
    /*border: 1px solid #fff;*/
    /*background-color: #222;*/
    /*color: #fff;*/
    background: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
}

.wpcf7-radio span.wpcf7-list-item.checked label::before {
    background-color: #fff;
    color: #000;
}

p.small-note {
    line-height: 1em;
}

.salary-calculator-form .wpcf7-response-output .content-col p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.salary-calculator-form .wpcf7-response-output {
    display: flex;
    align-items: center;
}

.salary-calculator-form .wpcf7-response-output .content-col p:last-child {
    margin-bottom: 0px;
}

.salary-calculator-form .wpcf7-response-output .img-col {
    margin-left: -20px;
    margin-right: 20px;
}

.img-col {
    height: 330px;
}

.salary-calculator-form input.wpcf7-phonetext {
    padding-left: 90px !important;
}

.fname-lname-div p {
    display: flex;
}

.fname-lname-div .wpcf7-form-control-wrap input {
    width: 90% !important;
}

.first-email-div,
.first-phone-div .wpcf7-form-control-wrap input {
    width: 95% !important;
}

.salary-calculator-form form.wpcf7-form .ast-row {
    margin-left: -20px;
    margin-right: -20px;
}

.img-col img {
    height: 330px;
    object-fit: cover;
    width: 100%;
    border-radius: 25px;
}

.final-submit-div .wpcf7-submit {
    border-radius: 1.5625rem;
    padding: 1rem 2rem;
    font-size: .875rem;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.final-submit-div .wpcf7-submit:hover {
    background: transparent;
    color: var(--color-primary);
}

@media only screen and (max-width: 768px) {
    .salary-calculator-form form.wpcf7-form.init {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .salary-calculator-form form.wpcf7-form i.fa.fa-arrow-right {
        font-size: 20px;
    }

    .salary-calc-row {
        flex-direction: column;
        padding: 30px 0;
    }

    .cf7form-col {
        padding-top: 30px;
    }

    .info-text,
    .name-div,
    .email-div,
    .phone-div,
    .tefl-passport-div,
    .tefl-english-level-div,
    .tefl-degree-div,
    .tefl-age-div,
    .tefl-criminal-record-div,
    .tefl-health-div,
    .tefl-open-mind-div,
    .final-submit-div {
        flex-direction: column;
    }

    .img-col {
        margin-bottom: 1rem;
    }

    /*.info-text, 
	.name-div, 
	.email-div, 
	.phone-div, 
	.tefl-qualification-div, 
	.tefl-loe-div, 
	.tefl-passport-div, 
	.tefl-experience-div, 
	.final-submit-div {
	    align-items: flex-start;
	}*/
}

/* ================= NAME STEP IMPROVEMENTS ================= */

.name-div {
    gap: 2rem;
}

/* Title */
.name-div>.content-col>label {
    font-family: var(--teflie-font-headings);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: none;
}

/* First + Last name row */
.fname-lname-div {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.fname-lname-div .wpcf7-form-control-wrap {
    flex: 1;
}

.fname-lname-div input {
    width: 100% !important;
}

/* Email + Phone spacing */
.first-email-div,
.first-phone-div {
    margin-bottom: 1.25rem;
}

/* Inputs */
.name-div input[type="text"],
.name-div input[type="email"],
.name-div input[type="tel"] {
    font-size: 1.125rem;
    padding: 0.75rem 0;
    transition: border-color 0.25s ease;
}

/* Input focus */
.name-div input:focus {
    border-bottom-color: var(--color-primary);
}

/* OK button */
.name-ok-btn {
    margin-top: 1.75rem;
    align-self: flex-start;
    padding: 0.85rem 1.75rem;
    font-size: 0.875rem;
    border-radius: 1.5rem;
}

/* ================= MOBILE ================= */

@media (max-width: 767px) {
    .name-div {
        gap: 1.5rem;
    }

    .fname-lname-div {
        flex-direction: column;
        gap: 1rem;
    }

    .name-div>.content-col>label {
        font-size: 1.25rem;
        text-align: left;
    }

    .name-ok-btn {
        width: 100%;
        justify-content: center;
    }
}