/* Default styling: Everything centered */
.org-fancy-form-block.vebego-container {
    @apply relative text-center overflow-hidden py-20 rounded-xl p-4 items-center px-4;

    .ambient {
        @apply top-0 left-0;
    }

    .atm-heading {
        @apply max-w-[768px] mx-auto text-[2rem] md:text-[3rem] lg:text-[3.75rem] text-white col-span-11;
    }

    .atm-paragraph {
        @apply max-w-[768px] mx-auto text-center text-white col-span-11;
    }

    .umbraco-forms-form {
        @apply col-span-11 justify-self-center;

        span.field-validation-error {
            @apply text-white;
        }
    }

    .umbraco-forms-fieldset
    {
        > legend {
            @apply text-center ml-auto mr-auto;
        }
    }

    .umbraco-forms-caption,
    .umbraco-forms-legend {
        @apply text-white;
    }

    .umbraco-forms-field {
        @apply flex flex-col justify-center items-center;

        &.umbraco-forms-hidden {
            @apply hidden !important;
        }

        .umbraco-forms-label,
        .form-label {
            @apply font-normal text-white;
        }

        .umbraco-forms-field-wrapper {
            @apply w-full text-white;

            .atm-form-input .form-input,
            .atm-form-textarea .form-textarea,
            .atm-form-select .form-select,
            .atm-form-datepicker .form-datepicker {
                @apply p-2 px-4 text-black w-full rounded-lg h-12;

                --tw-ring-color: #e90745;

                &::placeholder {
                    @apply text-[black];
                }
            }

            .atm-form-textarea .form-textarea {
                @apply max-h-[11rem];
            }

            .atm-form-checkbox .form-checkbox:checked,
            .atm-form-radiobutton .form-radiobutton:checked {
                @apply bg-accent-1;
            }
        }

        &.dataconsent,
        &.shortanswer,
        &.longanswer,
        &.date,
        &.password,
        &.titleanddesc,
        &.titleanddescription {
            span {
                @apply text-[white];
            }
        }

        &.multiplechoice,
        &.singlechoice,
        &.dropdown,
        &.checkbox,
        &.fileupload {
            .umbraco-forms-tooltip {
                @apply text-[white];
            }
        }

        &.titleanddescription,
        &.titleanddesc,
        &.checkboxpolicy,
        &.richtext {
            .umbraco-forms-field-wrapper {
                p {
                    @apply text-[white];
                }
            }
        }

        &.fileupload {
            input[type="file"] {
                @apply text-[white];
            }
        }

        &.richtext {
            .help-block {
                @apply text-[white];
            }
        }

        &.multiplechoice,
        &.singlechoice {
            @apply mb-3;
            --tw-ring-color: #e90745;

            .umbraco-forms-field-wrapper {
                @apply w-max mx-auto;
            }
        }
    }

    .umbraco-forms-form {
        @apply p-0 mx-auto;

        fieldset {
            @apply mb-0 p-0;
            legend {
                @apply text-white;
            }
        }

        span.field-validation-error {
            @apply text-white !important;
        }
    }

    .umbraco-forms-submitmessage-html,
    .umbraco-forms-submitmessage {
        @apply max-w-[768px] mx-auto text-white;
    }
}

/* When form is aligned to left align everything to left */
.fancy-form-content-block.content-block
{
    &.form-align--left {
        .vebego-container {
            @apply text-left;
            h2.atm-heading {
                @apply max-w-[768px] mx-auto text-left;
            }
            .atm-paragraph {
                @apply text-left;
            }
        }
        .org-fancy-form-block {
            div.umbraco-forms-form {
                .umbraco-forms-fieldset
                {
                    > legend {
                        @apply text-left ml-0 mr-0;
                    }
                }
                .umbraco-forms-field {
                    @apply items-start;
                    div.umbraco-forms-field-wrapper {
                        @apply mx-0;
                    }
                    .umbraco-forms-tooltip,
                    .atm-form-label {
                        @apply text-left;
                    }
                }
            }
        }
    }
}