/* Input */
.ginput_container.ginput_container_text input,
.ginput_container.ginput_container_email input,
.ginput_container.ginput_container_number input,
.ginput_container.ginput_container_phone input,
.ginput_container.ginput_container_textarea textarea {
    height: 56px;
    border: 1px solid var(--primary-defaultblue);
    border-radius: 5px;
    text-indent: 10px;
    padding-top: 22px !important;
    outline-color: var(--primary-defaultblue);
    color: var(--primary-defaultblue);
    background-color: white;
}

/* Textarea */
.ginput_container.ginput_container_textarea textarea {
    height: 205px;
    outline-color: var(--primary-defaultblue);
}

.gfield {
    position: relative;
}

/* Label */
.gform_wrapper.gravity-theme .active-label .gfield_label {
    font-weight: 400;
    position: absolute;
    top: 20px;
    left: 20px;
    transition: 0.2s;
    cursor: text;
}

.gform_wrapper.gravity-theme .gfield_label {
    font-weight: 400;
    margin-bottom: 0
}

.gform_wrapper.gravity-theme .active-label.active .gfield_label {
    font-size: 12px;
    top: 8px;
}

.gform_wrapper .gfield_required {
    color: var(--secondary-sturdygray);
}

.dark-form .gfield:not(.active-label) label,
.dark-form .gfield:not(.active-label) .gfield_label,
.dark-form .gform_wrapper .gfield:not(.active-label) .gfield_required
.dark-form .gfield_description {
    color: white;
}

/* Validation message below input and above form */
html .cl-theme .gform_wrapper .field_description_below.gfield_error div.validation_message,
.gform_wrapper .gform_validation_errors>h2,
ul.validation_message li {
    background: none;
    color: var(--primary-darkblue);
    font-style: normal;
    border: none;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    font-family: Mulish;
}

html .cl-theme .dark-form .gform_wrapper .field_description_below.gfield_error div.validation_message,
.dark-form .gform_wrapper .gform_validation_errors>h2,
.dark-form ul.validation_message li {
    color: white;
}

.gform_wrapper .gform_validation_errors>h2,
ul.validation_message li {
    padding-left: 10px;
}

/* Validation message above form */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.gform_wrapper .gform_validation_errors>h2 .gform-icon {
    display: none;
}

/* Error message */
html .cl-theme .gform_wrapper .field_description_below.gfield_error div.validation_message:before,
.gform_wrapper .gform_validation_errors>h2:before,
ul.validation_message li:before {
    content: "";
    position: relative;
    left: -10px;
    top: 3px;
    height: 16px;
    width: 16px;
    background-image: var(--icon-error);
    background-position: center;
    display: inline-block;
}

.gform_validation_error.gform_wrapper .gfield_error input {
    border-color: var(--support-red);
    background-image: var(--icon-error);
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.gform_wrapper .gform_validation_errors>h2 {
    color: white;
}

/* Success checkmark */
.gform_wrapper.gform_validation_error .gform_fields>*:not(.gfield_error) input,
.gform_wrapper.gform_validation_error .gform_fields>*:not(.gfield_error) textarea {
    border: 1px solid var(--support-green);
    background-image: var(--icon-confirmation);
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.gform_wrapper.gform_validation_error .gform_fields>*:not(.gfield_error) textarea {
    background-position: right 20px top 20px;
}

/* Radio buttons and checkboxes */
.gfield_radio input,
.gfield_checkbox input, 
.ginput_container_consent input {
    opacity: 0;
    cursor: pointer;
}

.gfield_radio input+label,
.gfield_checkbox input+label,
.ginput_container_consent input+label {
    margin-left: 10px;
    cursor: pointer;
}

.ginput_container_consent input+label {
    margin-left: 30px;
}

.gfield_radio input+label:before,
.gfield_checkbox input+label:before,
.ginput_container_consent input+label:before {
    content: "";
    height: 16px;
    width: 16px;
    border: 1px solid var(--primary-defaultblue);
    background-color: var(--secondary-lightgray);
    display: inline-block;
    left: 0;
    position: absolute;
    transition: 0.2s;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0%;
}

.gfield_radio input:checked+label:before,
.gfield_checkbox input:checked+label:before,
.ginput_container_consent input:checked+label:before {
    background-size: 70%;
    border: 1px solid var(--secondary-orange);
}

.gfield_radio input:focus-visible+label:before,
.gfield_checkbox input:focus-visible+label:before {
    outline: 2px solid var(--support-activeorange);
}

.dark-form .gfield_radio input:focus-visible+label:before,
.dark-form .gfield_checkbox input:focus-visible+label:before {
    outline: 2px solid var(--support-activeorangedarkbg);
}

/* Radio buttons */
.gfield_radio input+label:before {
    background-image: var(--icon-radiocircle);
    border-radius: 200px;
}

/* Checkboxes */
.gfield_checkbox input+label:before,
.ginput_container_consent input+label:before {
    background-image: var(--icon-checkbox);
    border-radius: 3px;
}

.gfield_checkbox input:checked+label:before,
.ginput_container_consent input:checked+label:before {
    background-size: 70%;
    background-color: var(--secondary-orange);
}

/* Upload input */
.gform_drop_area {
    border: 1px dashed var(--primary-defaultblue);
    background: white;
    font-weight: bold;
    color: var(--primary-defaultblue);
}

.dark-form .gform_drop_area {
    border: 1px dashed white;
    background: transparent;
    color: white;
}

.ginput_container_fileupload {
    margin-top: 5px;
}

/* Upload files */
button.gform_button_select_files {
    color: white;
    border: none;
    outline-color: var(--primary-defaultblue);
    font-family: Poppins;
    font-weight: bold;
    background-color: var(--primary-defaultblue);
    border-radius: 200px;
    font-size: 14px;
    padding: 12px 24px;
}

button.gform_button_select_files:hover,
button.gform_button_select_files:focus-visible {
    background-color: var(--secondary-orange);
}

/* Upload rules */
.gform_wrapper.gravity-theme span.gform_fileupload_rules {
    font-size: 14px;
    color: var(--secondary-sturdygray);
    padding: 0;
}

.dark-form .gform_wrapper.gravity-theme span.gform_fileupload_rules {
    color: white;
}

/* Upload preview file */
.ginput_preview strong {
    font-weight: 400;
}

.gform_delete_file {
    color: var(--primary-defaultblue);
    transition: 0.2s;
}

.gform_delete_file span {
    transition: 0.2s;
}

.gform_delete_file:hover,
.gform_delete_file:focus-visible {
    background: var(--primary-defaultblue);
    color: white
}

/* Extra spacing for label */
/* .ginput_container_select {
    margin-top: 20px !important;
} */

/* Dropdown */
.ginput_container_select .gfield_select {
    height: 56px;
    border: 1px solid var(--primary-defaultblue);
    border-radius: 5px;
    text-indent: 10px;
    color: var(--primary-defaultblue);
    background-image: var(--icon-dropdown-down);
    background-position: right 20px center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline-color: var(--primary-defaultblue);
}

/* Submit button */
.submit-button {
    background-color: var(--secondary-orange);
    border-radius: 100px;
    padding: 12px 24px;
    color: white;
    font-family: Poppins;
    font-weight: bold;
    font-size: 14px;
    border: none;
}

.submit-button img {
    display: inline-block;
    margin-left: 19px;
    top: 3px;
    position: relative;
}

.submit-button:focus-visible {
    outline: 3px solid var(--support-activeorange);
    background-color: var(--secondary-orange);
}

.submit-button:hover {
    background-color: var(--support-hoverorange);
}

/* Privacy statement link in dark form */
.dark-form a {
    color: var(--secondary-orange);
}

.dark-form a {
    color: var(--support-hoverorange);
}

/* Gfield consent required sterretje */
.ginput_container.ginput_container_consent input[aria-required="true"] + label:after {
    content: " *";
}

.ginput_container.ginput_container_consent .gfield_required {
    display: none
}

.ginput_container input::placeholder {
    color: white
}