.form-floating>.form-control,
.form-floating>label {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%
}

.form-group .input-description,
.form-group label {
    font-family: "geomanist-wzbook";
    font-weight: 100 !important;
    font-size: 0.9em
}

@media screen and (min-width:1200px) {

    .form-group .input-description,
    .form-group label {
        font-size: 1em
    }
}

.form-control {
    padding: 10px 12px;
    color: var(--xxblacklight)
}

.form-control::-webkit-input-placeholder {
    font-family: "geomanist-wzbook";
    font-weight: 200 !important;
    font-size: 1em;
    color: var(--xxnavy)
}

.form-control::-moz-placeholder {
    font-family: "geomanist-wzbook";
    font-weight: 200 !important;
    font-size: 1em;
    color: var(--xxnavy)
}

.form-control:-ms-input-placeholder {
    font-family: "geomanist-wzbook";
    font-weight: 200 !important;
    font-size: 1em;
    color: var(--xxnavy)
}

.form-control::-ms-input-placeholder {
    font-family: "geomanist-wzbook";
    font-weight: 200 !important;
    font-size: 1em;
    color: var(--xxnavy)
}

.form-control::placeholder {
    font-family: "geomanist-wzbook";
    font-weight: 200 !important;
    font-size: 1em;
    color: var(--xxnavy)
}

.form-control:active {
    border: solid 1px #323232
}

.form-control:focus,
.form-control:focus-visible {
    border-color: var(--xxturquoisedark);
    -webkit-box-shadow: 0 0 0 0.1rem var(--xxturquoisedark);
    box-shadow: 0 0 0 0.1rem var(--xxturquoisedark);
    outline: none
}

.form-control:hover {
    -webkit-box-shadow: 0 0 0 0.2rem var(--xxturquoisedark);
    box-shadow: 0 0 0 0.2rem var(--xxturquoisedark);
    outline: white 2px solid
}

.form-control:disabled:active,
.form-control:disabled:focus,
.form-control:disabled:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
    color: var(--xxnavy)
}

.form-floating>.form-control:not(:-ms-input-placeholder)~label {
    color: var(--xxnavy)
}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: var(--xxnavy)
}

.form-check {
    padding: 0.5em 0
}

.form-check:focus,
.form-check:focus-visible {
    border: solid 1px var(--xxturquoisedark) !important;
    padding: 0.5em
}

.form-check-input {
    border-color: var(--xxblacklight)
}

.form-check-input:checked {
    background-color: var(--xxnavy) !important;
    border-color: var(--xxnavy) !important
}

.form-check-input:focus,
.form-check-input:focus-visible {
    -webkit-box-shadow: 0 0 0 0.2rem var(--xxturquoisedark);
    box-shadow: 0 0 0 0.2rem var(--xxturquoisedark);
    outline: white 2px solid;
    border-color: var(--xxblacklight)
}

.form-check.focused {
    outline: 2px solid var(--xxturquoisedark)
}

.form-check-modal-link {
    text-decoration: underline
}

.form-control[type=password] {
    width: 45px;
    height: 45px
}

.otp-container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.otp-container.error input[type=password] {
    background-color: var(--xxredlight) !important;
    border-color: var(--xxred) !important
}

.form-control.error_field,
.input_field.error_field {
    border-color: var(--xxred) !important;
    background-color: var(--xxredlight) !important;
    outline: none
}

.form-control.error::-webkit-input-placeholder {
    color: var(--xxreddark) !important;
    background-color: transparent !important
}

.form-control.error::-moz-placeholder {
    color: var(--xxreddark) !important;
    background-color: transparent !important
}

.form-control.error:-ms-input-placeholder {
    color: var(--xxreddark) !important;
    background-color: transparent !important
}

.form-control.error::-ms-input-placeholder {
    color: var(--xxreddark) !important;
    background-color: transparent !important
}

.form-control.error::placeholder {
    color: var(--xxreddark) !important;
    background-color: transparent !important
}

.form-select.error_field,
.input-label.error_label {
    color: var(--xxreddark) !important
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label:after {
    background-color: transparent !important
}

.form-floating>.form-control:not(:-ms-input-placeholder)~label:after {
    background-color: transparent !important
}

.form-floating>.form-control-plaintext~label:after,
.form-floating>.form-control:focus~label:after,
.form-floating>.form-control:not(:placeholder-shown)~label:after,
.form-floating>.form-select~label:after {
    background-color: transparent !important
}

.form-check-input.error_field {
    background-color: var(--xxredlight) !important;
    border-color: var(--xxred) !important
}

.form-select-container .form-select.error_label {
    border-color: var(--xxred) !important;
    background-color: var(--xxredlight) !important;
    outline: none
}

.error {
    display: none;
    color: var(--xxreddark);
    font-size: 0.875em !important;
    margin-top: 1em
}

.form-container {
    border-radius: 25px;
    padding: 2.5em 1.5em;
    margin: 2em 0
}

.form-title {
    font-size: 1.4em
}

.form-select-container .form-select {
    min-height: 58px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.form-check-input[type=radio] {
    background-image: none !important
}

.form-check-input:checked[type=radio] {
    background-image: url("../../img/long-form/form_checked.svg") !important;
    background-size: 18px
}

.form-check-input:checked[type=radio] {
    background-color: var(--xxwhite) !important;
    border: solid 2px var(--xxnavy) !important
}

.form-select {
    font-family: "geomanist-wzbook" !important;
    font-weight: 100 !important
}

.input-group {
    min-height: 58px
}

.form-check-input[role=switch] {
    height: 1.5em;
    width: 3em;
    margin: 0 auto
}

.form-check .form-check-input {
    margin: 0
}

.form-check,
.form-switch {
    padding: 0
}

.form-check-input:checked[role=switch] {
    background-color: var(--xxturquoiselight) !important
}

.form-switch .form-check-input {
    background-image: url("../../img/long-form/icon_switch_off.svg") !important
}

.form-switch .form-check-input:checked {
    background-image: url("../../img/long-form/icon_switch_on.svg") !important
}

#validation-dialog{
    background-color: white;
}

#success-dialog{
    background-color: white;
}