.block__form h2 {
    margin-bottom: 2.4rem;
}

form.form,
.form form,
.umbraco-forms-page {
    display: flex;
    flex-flow: column;
    gap: .8rem;
}

.form legend {
    font-weight: 500;
}

.form * + legend {
    margin-top: 2.4rem;
}

.form .umbraco-forms-navigation {
    margin-top: 2.4rem;
}

.form .form__group {
    position: relative;
}

    .form .form__group > label {
        font-size: 1.8rem;
        font-weight: 400;
        color: var(--grey-400);
        position: absolute;
        top: .8rem;
        left: 2.4rem;
        display: inline-block;
        line-height: 3.2rem;
        padding-top: .2rem;
    }

        .form .form__group > label:has(~.form__input:focus),
        .form .form__group > label:has(~.form__input.has--value) {
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.2rem;
            top: .4rem;
        }

.form .form__input {
    border: none;
    width: 100%;
    max-width: 42rem;
    min-height: 4.8rem;
    padding: 1.2rem 2.4rem .4rem;
    border-radius: 4rem;
    font-family: var(--fontbody);
    font-size: 1.8rem;
    color: var(--antracite);
    transition: var(--transition-default);
}

.form .form__input--textarea {
    min-height: 12rem;
    border-radius: 2rem;
    padding: 1.2rem 2.4rem;
    line-height: 1.4;
    resize: vertical;
}

.form--white .form__input {
    border: .2rem solid var(--black);
}

    .form--white .form__input:focus-visible {
        outline-color: var(--pink);
    }

.form--grey .form__input,
.form .form__input--grey {
    background-color: var(--grey-100);
}

.form .form__input.input-validation-error {
    border-color: var(--red);
}

.form .field-validation-error {
    color: var(--red);
    font-size: var(--fontsize-body-sm);
    display: inline-block;
    margin-top: .8rem;
}

.form .form__input--search {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: 2.4rem 50%;
    background-repeat: no-repeat;
    padding-left: calc(2.4rem + 2.4rem + .8rem);
}

    .form .form__input--search:focus-visible {
        outline-offset: 0;
    }

    .form label:has(+.form__input--search) {
        left: calc(2.4rem + 2.4rem + .8rem);
    }

.form select.form__input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.8rem center;
    background-size: 12px 8px;
}

.form .form__group--filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}

    .form .form__group--filter input[type="checkbox"],
    .form .form__group--filter input[type="radio"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        opacity: 0;
    }

    .form .form__group--filter label {
        display: flex;
        align-items: center;
        border: .2rem solid var(--antracite);
        width: 100%;
        min-height: 4.8rem;
        padding: 1rem 2.4rem .6rem;
        border-radius: 4rem;
        font-family: var(--fontbody);
        font-size: 1.8rem;
        font-weight: 500;
        color: var(--antracite);
        cursor: pointer;
        opacity: .6;
        transition: var(--transition-default);
    }

        .form .form__group--filter label:before {
            content: "";
            height: 2.4rem;
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
            width: 0;
            transform: scale(0);
            transition: var(--transition-default);
        }

    .form .form__group--filter input:checked + label {
        opacity: 1;
        gap: .8rem;
    }

        .form .form__group--filter input:checked + label:before {
            width: 2.4rem;
            transform: scale(1);
        }

@media (pointer: fine) {
    .form .form__group--filter label:hover {
        opacity: 1;
    }
}

.umbraco-forms-tooltip {
    display: inline-block;
    color: var(--grey-400);
    margin-bottom: .8rem;
}

.form__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .form__toggle + .form__toggle {
        margin-top: 1rem;
    }

.toggle {
    width: 5rem;
    height: 2.8rem;
    border-radius: 1.4rem;
    background-color: var(--grey-200);
    padding: .4rem;
    position: relative;
    transition: var(--transition-default);
}

    .toggle input {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        opacity: 0;
    }

    .toggle label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 1.4rem;
        box-shadow: 0 0 0 0.2rem transparent;
        cursor: pointer;
        transition: var(--transition-default);
        z-index: 2;
    }

    .toggle:after {
        content: "";
        width: 2rem;
        height: 2rem;
        border-radius: 100%;
        background-color: var(--white);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        position: absolute;
        top: .4rem;
        left: .4rem;
        transition: var(--transition-default);
        z-index: 1;
    }

    .toggle:has(>input:checked) {
        background-color: var(--grey-500);
    }

        .toggle:has(>input:checked):after {
            transform: translateX(calc(100% + .1rem));
            background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1663 3.92834L5.74967 10.345L2.83301 7.42834' stroke='%232A2A2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        }