form,
.form {
    h2,
    h3 {
        padding: 0px 2.4rem;
        color: var(--text-invers-100);
        margin-bottom: 0.6rem;
    }
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
    justify-content: space-between;

    .row {
        padding: 0px 2.4rem;
        display: flex;
        width: 100%;
        gap: 1.2rem;
        position: relative;
        .row {
            padding: 0px;
        }
    }
    @media (max-width: 500px) {
        gap: 0.6rem;
        .row {
            gap: 0.6rem;
            flex-direction: column;
        }
    }
    .action-button-line,
    .action-line {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .action-line {
        background: var(--bg-100);
        padding: 0.6rem 3.3rem 0.6rem 3.3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 2.4rem;
        justify-content: space-between;
        p,
        span {
            color: var(--neutral-white);
        }
    }
    .data-protection {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        width: 100%;

        p {
            flex-grow: 1;
        }
    }
    .action-button-line {
        min-height: 2.4rem;
        display: flex;
        width: 100%;
        button {
            width: 0px;
            height: 100%;
            flex-grow: 1;
        }
    }
    .error-message {
        font-size: 0.7rem;
        line-height: 0.7rem;
        color: var(--primary-100);
        position: absolute;
        bottom: -2px;
    }
    .checkit-span {
        height: 1.2rem;
        width: 1.2rem;
        min-height: 1.2rem;
        min-width: 1.2rem;
        border: 1px solid grey;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    [type="checkbox"]:checked + .checkit-span:before {
        content: "\2714";
        position: absolute;
        color: var(--text-invers-100);
        transform-origin: bottom;
    }
    label {
        width: 100%;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: flex-end;
        gap: 12px;
        height: 60px;
        max-height: 60px;
        &.checkbox {
            height: 1.2rem;
            max-height: 1.2rem;
        }

        span {
            opacity: 0;
            transition: opacity 0s;
            padding: 0px 19px;
            width: 100%;
            height: 12px;
            text-align: left;
            &.hasValue {
                display: block;
                opacity: 1;
                font-size: 0.7rem;
                line-height: 0.7rem;
                font-weight: 700;
                text-transform: uppercase;
            }
        }
        p {
            padding: 0px 19px;
            font-size: 0.7rem;
        }
        &.textarea,
        &.file {
            height: auto;
            max-height: none;
        }
        & > input,
        & > div.svelte-select,
        & > div.wrapper,
        & > .no-input,
        & > textarea,
        .fileContainer {
            width: 100% !important;
            padding: 0px 18px 12px 18px !important;
            height: 30px !important;
            max-height: 30px !important;
            border: 0px solid black !important;
            border-radius: 0px !important;
            border-bottom: 1px solid var(--text-invers-100) !important;
            text-align: start !important;
            color: var(--text-invers-100) !important;
            font-size: 1rem !important;
            &.fileContainer {
                max-height: none !important;
                height: 100% !important;
            }
            &.svelte-select {
                min-height: 30px !important;
                & > .value-container {
                    overflow: visible !important;
                }
            }
            &:focus {
                outline: none !important;
                border-bottom: 1px solid var(--primary-100) !important;
            }
            &.error {
                border-bottom: 3px solid var(--primary-100) !important;
            }

            &.checkit {
                display: none !important;
            }
            &.no-input {
                border-bottom: none !important;
            }
            &:disabled {
                opacity: 0.5;
            }
            &[type="checkbox"] {
                border-bottom: 0px solid black !important;
            }
        }
        textarea {
            min-height: 170px;
        }
    }
}
