label.form-field-label {
    color: #ffffff7d;
}
.form-field:not(.checkbox) {
    width: 100%;
    padding: 12px;
    font-size: 0.875rem;
    color: #222;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    outline: none;
    margin-top: 5px;
}
.form-field:not(.checkbox, .textarea) {
    height: 40px;
}
.form-field-wrapper:not(:nth-last-of-type(-n+3)){
    margin-bottom: 10px;
}
.form-field-label.checkbox {
    display: inline;
    padding-left: 5px;
}
.form-field-label > a {
    color: #1882c5
}
@media (width <= 550px){
    .form-container {
        padding: 12vw 8vw 10vw;
    }
    label.form-field-label {
        font-size: 0.75rem;
    }
}
@media (width >= 551px) and (width <= 766.9px){
    .form-container {
        padding: 10vw;
    }
    label.form-field-label {
        font-size: 0.875rem;
    }
}
@media (width >= 767px) and (width <= 899.9px){
    label.form-field-label {
        font-size: 0.75rem;
    }
}
@media (width >= 767px) and (width <= 1099.9px){
    .form-container {
        padding: 8vw;
    }
}
@media (width >= 900px) and (width <= 1099.9px){
    label.form-field-label {
        font-size: 0.75rem;
    }
}
@media (width >= 1100px) and (width <= 1400px){

    label.form-field-label {
        font-size: 0.75rem;
    }
}
@media (width >= 1401px){

    label.form-field-label {
        font-size: 0.875rem;
    }
}

.form-title { width: 100%; }
.form-field-wrapper { width: 100%; }

textarea.form-field { padding: 12px; height: 150px; border: 1px solid var(--color-border); border-radius: var(--radius-control); resize: none; }
.form-field-error { display: none; margin-top: 5px; color: #F00; text-transform: lowercase; }
.form-field-wrapper.not-valid > .form-field-error.not-valid,
.form-field-wrapper.value-missing > .form-field-error.value-missing,
.form-field-wrapper.bad-input > .form-field-error.bad-input,
.form-field-wrapper.range-overflow > .form-field-error.range-overflow,
.form-field-wrapper.range-underflow > .form-field-error.range-underflow,
.form-field-wrapper.too-long > .form-field-error.too-long,
.form-field-wrapper.too-short > .form-field-error.too-short,
.form-field-wrapper.pattern-mismatch > .form-field-error.pattern-mismatch,
.form-field-wrapper.type-mismatch > .form-field-error.type-mismatch,
.form-field-wrapper.step-mismatch > .form-field-error.step-mismatch,
.form-field-wrapper.custom-error > .form-field-error.custom-error { display: block; }
.form-button { display: none; padding: 14px 30px; width: 190px; color: #FFF; font-size: 0.75rem; font-weight: 300; text-align: center; background-color: var(--mainBlue); border-radius: var(--radius-control); cursor: pointer; user-select: none; transition: .25s; }
.form-button.submitting { opacity: .75; }
.form-button.show { display: unset; }

@media (pointer: fine) {
    .form-button:hover { filter: brightness(115%); }
}