div.umbraco-forms-page,
.form {
    padding: 20px 0;
}

@media(max-width: 991px) {
    .umbraco-forms-form {
        padding: 0 15px;
    }

    /* Formsbuilder has no separate page wrapper, so both paddings of the Forms theme land here */
    .form {
        padding: 20px 15px;
    }
}

.umbraco-forms-form form .umbraco-forms-field-wrapper {
    position: relative;
}

.umbraco-forms-field-wrapper,
.form .form__group {
    width: 100%;
    position: relative;
}

    .umbraco-forms-field-wrapper.short-answer:before,
    .umbraco-forms-field-wrapper.short-answer:after,
    .form .form__group:has(> input.form__input)::before,
    .form .form__group:has(> input.form__input)::after {
        content: "";
        background-color: #f3f4f7;
        width: 3px;
        height: 70%;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .umbraco-forms-field-wrapper.short-answer:before,
    .form .form__group:has(> input.form__input)::before {
        left: -1px;
    }

    .umbraco-forms-field-wrapper.short-answer:after,
    .form .form__group:has(> input.form__input)::after {
        right: -1px;
    }

    /* 70% of the 35px field. Fixed, because a Formsbuilder group also holds the help text,
       which would otherwise stretch the mask over the whole field */
    .form .form__group:has(> input.form__input)::before,
    .form .form__group:has(> input.form__input)::after {
        height: 24px;
    }

    header .umbraco-forms-field-wrapper.short-answer:before,
    header .umbraco-forms-field-wrapper.short-answer:after {
        background-color: #fff;
    }

section.formulier .umbraco-forms-field-wrapper.short-answer:before,
section.formulier .umbraco-forms-field-wrapper.short-answer:after,
section.formulier .form .form__group:has(> input.form__input)::before,
section.formulier .form .form__group:has(> input.form__input)::after {
    background-color: var(--color-form-background);
}

.umbraco-forms-form form h5 {
    margin-bottom: 30px;
}

.umbraco-forms-form form legend,
.form .form__legend {
    font-size: 18px;
    margin-bottom: 30px;
}

.umbraco-forms-form form .form-group,
.form .form__group,
.form .form__text {
    margin-bottom: 30px;
}

.umbraco-forms-form form .form-group.longanswer,
.form .form__group:has(> textarea.form__input) {
    margin-top: 20px;
}

/* Formsbuilder columns: a 12-column grid with the same gutter as the Bootstrap rows of the
   Forms theme, stacked below md like col-md-* */
.form .form__columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 30px;
}

.form .form__column {
    grid-column: span var(--form-column-span, 12);
}

@media (max-width: 767.98px) {
    .form .form__column {
        grid-column: 1 / -1;
    }
}

/* Text block heading: looks like the h4 the Forms theme used, but is an h3 in the markup so it
   follows the h2 of the section. Size and colour come from the h4 rule in Site.css. */
.form .form__title {
    font-weight: 500;
}

.form-control:focus {
    outline: none;
    box-shadow: none !important;
}

.umbraco-forms-form form input[type=text],
.umbraco-forms-form form input[type=email],
.umbraco-forms-form form input[type=password],
.umbraco-forms-form form textarea,
.umbraco-forms-form form select,
.form .form__input {
    height: 35px;
    font-size: 14px;
    background: transparent;
    border: 1px solid #49618c;
    border-radius: 0 0 10px 10px !important;
    color: #0c2c65;
    width: 100%;
    line-height: 20px;
    padding: 7.5px 15px;
    position: relative;
    outline: none !important;
}

.umbraco-forms-form form input[type=text],
.umbraco-forms-form form input[type=email],
.umbraco-forms-form form input[type=password],
.form input.form__input {
    border-top-color: transparent;
}

/* Alleen-lezen velden blijven leesbaar, maar mogen niet als invulveld overkomen.
   Wordt gebruikt voor het e-mailadres op het inschrijfformulier, dat op de vorige
   stap is ingevuld en via de link boven het formulier wordt gewijzigd. */
.umbraco-forms-form form input[readonly] {
    border-color: #b3bccd;
    color: #6b7a99;
    cursor: not-allowed;
}

.umbraco-forms-form form input[readonly] ~ .control-label {
    color: #6b7a99;
}


    .umbraco-forms-form form input[type=text][data-toggle=tooltip] {
        background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10,0A10,10,0,1,0,20,10,10,10,0,0,0,10,0Zm1.23,15H9.14V7.36h2.09ZM11,6.14a1.19,1.19,0,0,1-.85.27c-.76,0-1.14-.34-1.14-1s.38-1,1.14-1,1.13.34,1.13,1A1,1,0,0,1,11,6.14Z' fill='%238595b2'/%3E%3C/svg%3E");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: calc(100% - 7.5px) 7.5px;
    }

.umbraco-forms-form form textarea,
.form textarea.form__input {
    height: 150px;
    border-radius: 10px !important;
    background-color: transparent;
}

.umbraco-forms-form form textarea:focus,
.form textarea.form__input:focus {
    background-color: transparent;
}


.umbraco-forms-form form select,
.form select.form__input {
    border-radius: 10px !important;
    font-size: 14px;
    color: #49618c;
}

    .umbraco-forms-form form select:focus,
    .form select.form__input:focus {
        background-color: var(--color-form-background) !important;
        border-color: #0c2c65 !important;
    }

.umbraco-forms-form form input[type=text]:focus,
.umbraco-forms-form form input[type=email]:focus,
.umbraco-forms-form form input[type=password]:focus,
.umbraco-forms-form form textarea:focus,
.form input.form__input:focus,
.form textarea.form__input:focus {
    border-color: #0c2c65;
    border-top-color: transparent;
}

.umbraco-forms-form form input[type=text].valid,
.umbraco-forms-form form input[type=text].input-validation-error,
.umbraco-forms-form form input[type=email].valid,
.umbraco-forms-form form input[type=email].input-validation-error,
.umbraco-forms-form form input[type=password].valid,
.umbraco-forms-form form input[type=password].input-validation-error,
.umbraco-forms-form form textarea.valid,
.umbraco-forms-form form textarea.input-validation-error,
.umbraco-forms-form form.form-edit textarea {
    border-color: #49618c;
    border-top-color: transparent;
}

.umbraco-forms-form form input[type=text].input-validation-error,
.umbraco-forms-form form input[type=email].input-validation-error,
.umbraco-forms-form form input[type=password].input-validation-error,
.umbraco-forms-form form textarea.input-validation-error,
.form .has--error > input.form__input,
.form .has--error > textarea.form__input {
    border-color: var(--color-form-error);
    border-top-color: transparent;
    color: var(--color-form-error);
}

.umbraco-forms-form form label.control-label,
.form .form__group > label[for],
.form .form__group--options > legend {
    position: absolute;
    top: -12px;
    left: 0;
    height: 10px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    line-height: 10px;
    padding: 0 0 0 15px;
    color: #49618c;
    cursor: pointer;
    z-index: 2;
}


.umbraco-forms-form form .recaptcha2 label.control-label,
.umbraco-forms-form form .dataconsent label.control-label {
    display: none;
}

.umbraco-forms-form form label.control-label em {
    font-style: normal;
}


.umbraco-forms-form form label.control-label.control-label-aanhef {
    padding-left: 0;
    top: -10px;
}

.umbraco-forms-form form .fileupload label.control-label {
    top: -15px;
}

.umbraco-forms-form form .multiplechoice label.control-label,
.form .form__group--options:has(input[type=checkbox]) > legend {
    top: 0;
}

.umbraco-forms-form form .dropdown label.control-label,
.form .form__group:has(> select.form__input) > label[for] {
    top: -5px;
    background-color: var(--color-form-background);
}

.umbraco-forms-form form span.field-validation-error,
.umbraco-forms-form form .custom-feedback,
.umbraco-forms-form .error,
.form .form__error,
.form .form__status:not(:empty) {
    color: var(--color-form-error);
    font-size: 12px;
    padding: 5px 0 0 15px;
}

.form-control.is-wrong ~ .custom-feedback {
    display: block;
}

.form-control.is-wrong ~ .custom-feedback {
    display: block;
}

.custom-feedback {
    display: none;
    float: left;
}

.umbraco-forms-form form .multiplechoice .umbraco-forms-field-wrapper,
.form .form__options:has(input[type=checkbox]) {
    padding-top: 15px;
}

.umbraco-forms-form form .custom-control {
    padding-left: 0;
    padding-left: 15px;
    min-height: 35px;
    align-items: center;
}

.umbraco-forms-form form .multiplechoice .custom-control,
.form .form__options:has(input[type=checkbox]) > .form__option {
    margin-top: 15px;
}

.umbraco-forms-form form .multiplechoice .custom-control:not(:first-of-type),
.form .form__options:has(input[type=checkbox]) > .form__option:not(:first-child) {
    margin-top: 0;
}

.umbraco-forms-form form .custom-control-label {
    min-height: 20px;
    font-size: 15px;
    line-height: 20px;
    padding: 0 0 0 30px;
    color: #49618c;
    cursor: pointer;
    transition: all 0.2s linear;
}

    .umbraco-forms-form form .custom-control-label a:before {
        content: "";
        height: 1px;
        width: 100%;
        background-color: #e60881;
        position: absolute;
        bottom: -2px;
        left: 0;
        transition: all 0.2s linear;
    }

    .umbraco-forms-form form .custom-control-label a:hover:before {
        background-color: #0c2c65;
        bottom: 1px;
    }

.umbraco-forms-form form .custom-radio .custom-control-input:checked ~ .custom-control-label,
.umbraco-forms-form form .custom-checkbox .custom-control-input:checked ~ .custom-control-label {
    color: #0c2c65;
}


.umbraco-forms-form form .custom-control-label:before {
    width: 20px;
    height: 20px;
    top: 2px;
    left: 0;
    background-color: transparent;
    border: 2px solid #49618c;
}

.umbraco-forms-form form .custom-checkbox .custom-control-label::before {
    border-radius: 0;
}

.umbraco-forms-form form .custom-control-input:checked ~ .custom-control-label:before {
    background-color: transparent;
    border-color: #0c2c65;
}

.umbraco-forms-form form .custom-radio .custom-control-input ~ .custom-control-label::after {
    width: 8px;
    height: 8px;
    top: 8px;
    left: 6px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    background-image: none !important;
    transition: all 0.2s linear;
}

.umbraco-forms-form form .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #0c2c65;
    border: 1px solid #0c2c65;
}


.umbraco-forms-form form .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #49618c;
}

.umbraco-forms-form form .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

/* Formsbuilder radios and checkboxes are native inputs inside their label, so they get the look
   of the custom controls above without Bootstrap's pseudo-elements */
.form .form__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 38px; /* margin-right (1rem), padding-left (15px) and the space between the inline custom controls */
    min-height: 35px;
    padding-left: 15px;
}

.form .form__option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: #49618c;
    cursor: pointer;
}

    .form .form__option:has(> input:checked) {
        color: #0c2c65;
    }

/* Checkbox lists were stacked in the Forms theme, radio lists inline */
.form .form__options:has(input[type=checkbox]) {
    flex-direction: column;
    align-items: flex-start;
}

    .form .form__options:has(input[type=checkbox]) > .form__option {
        min-height: 35px;
    }

    .form .form__option > input[type=radio],
    .form .form__option > input[type=checkbox] {
        flex: none;
        width: 20px;
        height: 20px;
        margin: 0;
        border: 2px solid #49618c;
        background: transparent no-repeat 50% 50%;
        cursor: pointer;
        appearance: none;
    }

    .form .form__option > input[type=radio] {
        border-radius: 50%;
    }

        .form .form__option > input[type=radio]:checked {
            border-color: #0c2c65;
            background-image: radial-gradient(circle, #0c2c65 0 4px, transparent 5px);
        }

        .form .form__option > input[type=checkbox]:checked {
            background-color: #49618c;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
            background-size: 10px 10px;
        }

        .form .form__option > input:focus-visible {
            outline: 2px solid #0c2c65;
            outline-offset: 2px;
        }

.umbraco-forms-form form p,
.form .form__text p,
.form .form__success {
    font-size: 14px;
    line-height: 22px;
}

/* Help text: the Forms theme only showed it as a tooltip. Formsbuilder shows it, so it sits under
   the field in small print, indented like the label */
.form .form__group:has(> .form__help) {
    display: flex;
    flex-direction: column;
}

    .form .form__group > .form__help {
        order: 1;
        margin: 5px 0 0;
        padding-left: 15px;
        font-size: 12px;
        line-height: 18px;
        color: #49618c;
    }

.umbraco-forms-form form .btn-first,
.form .btn-first {
    min-width: 275px;
    margin: 0 auto 0 0;
}

.umbraco-forms-form form .recaptcha3 {
    display: none;
}

.tooltip-inner {
    background-color: #8595b2;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #8595b2;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #8595b2;
}

.grecaptcha-badge {
    opacity: 0;
}

.was-validated .form-control:valid, .form-control.is-valid {
    background-image: none;
    border-color: #0c2c65;
    border-top: none !important;
}

    .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
        border-color: inherit;
        border-top: none !important;
    }

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
    color: inherit;
}

    .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
        border-color: inherit;
    }

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
    border-color: #0c2c65;
    background-color: inherit;
}

.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
    border-color: #49618c;
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #49618c;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    background-image: none;
}

.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
    border-color: var(--color-form-error);
    border-top: none !important;
    background-image: none;
}

.form-group-password .form-control {
    max-width: 200px;
    margin: 0 auto;
}

.form-group-password input[type=password] + span + label.control-label {
    left:calc(50% - 100px) !important;
}

.form-group-password .umbraco-forms-field-wrapper.short-answer:before {
    left: calc(50% - 102px) !important;
}

.form-group-password .umbraco-forms-field-wrapper.short-answer:after {
    right: calc(50% - 102px) !important;
}

.form-group-password .invalid-feedback {
    text-align: center;
}

@media(min-width: 768px) {
    .form-login.umbraco-forms-form form span.field-validation-error {
        position: absolute;
        bottom: -18px;
        left: 0;
    }
}

.form-new form .form-group {
    margin-bottom: 34px;
}

.form-new .umbraco-forms-field-wrapper.short-answer:before,
.form-new .umbraco-forms-field-wrapper.short-answer:after {
    content: none;
}

.form-new form input[type=text],
.form-new form input[type=email],
.form-new form input[type=password],
.form-new form textarea,
.form-new form select {
    height: 38px;
    padding: 9px 15px;
    background-color: #fff;
    border: none;
    border-radius: 10px !important;
}
    .form-new form input[type=text].is-wrong,
    .form-new form input[type=text].input-validation-error,
    .form-new form input[type=email].input-validation-error,
    .form-new form input[type=password].input-validation-error,
    .form-new form textarea.input-validation-error,
    .form-new form select.input-validation-error {
        box-shadow: 0 0 0 2px #ff0000;
    }

        .form-new form input[type=text].input-validation-error ~ .invalid-feedback,
        .form-new form input[type=text].is-wrong ~ .invalid-feedback,
        .form-new form input[type=email].input-validation-error ~ .invalid-feedback,
        .form-new form input[type=password].input-validation-error ~ .invalid-feedback,
        .form-new form textarea.input-validation-error ~ .invalid-feedback,
        .form-new form select.input-validation-error ~ .invalid-feedback {
            display: inline-block;
            color: #ff0000;
            font-size: 14px;
        }

.form-new form label.control-label {
    top: -15px;
    padding-left: 5px;
}

.form-new form .custom-control-label:before,
.form-new form .custom-control-input:checked ~ .custom-control-label:before {
    background-color: #fff;
}

.form-new form textarea {
    height: 100px;
}

.form-new form textarea:focus {
    background-color: #fff;
}

.form-new .form-subscribe .btn-first:not(:hover):after {
    transform: translateX(-87%) translateY(-25%) rotate(45deg);
}

/* Inschrijven — stap "Controleer gegevens": op mobiel extra ruimte zodat lange labels niet over het veld vallen.
   Op desktop past elk label op één regel, dus daar geen extra padding nodig. */
@media (max-width: 991.98px) {
    section.formulier.formulier-bevestigen .form-confirm .umbraco-forms-field-wrapper {
        padding-top: 2.4rem;
    }

    section.formulier.formulier-bevestigen .form-confirm label.control-label.umbraco-forms-label {
        top: 0.4rem;
        height: auto;
        min-height: 0;
        line-height: 1.35;
        white-space: normal;
    }
}