form {
    --form-label-width: 140px;
    --form-column-gap: 28px;
    width: min(100%, 760px);
    margin-inline: auto;

    h2 {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .form-element-radio {
        grid-column: 1 / -1;

        display: block !important;
        width: 100%;
        min-inline-size: 0;

        margin: 0 !important;
        padding: 1rem 0;
        border: 0;

        > legend {
            float: left;
            clear: none;
            width: var(--form-label-width);
            max-width: var(--form-label-width);
            margin: 0;
            padding: 3px 0 0;
            border: 0;
            box-sizing: border-box;
            font: inherit;
            line-height: 1.45;
            color: inherit;
            text-align: right;
        }


        > legend + * {
            clear: none !important;
        }

        > [role="radiogroup"],
        > [role="group"] {
            clear: none !important;
            width: calc(100% - var(--form-label-width) - var(--form-column-gap));
            min-width: 0;
            margin: 0 0 0
            calc(var(--form-label-width) + var(--form-column-gap));
            padding: 0;
        }

        .form-check {
            width: 100%;
            margin: 0 !important;
            padding: 0;
        }

        .form-check-wrapping-label {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr);
            column-gap: 10px;
            align-items: start;
            width: 100%;
            margin: 0;
            padding: 0;
            cursor: pointer;

            > input[type="hidden"] {
                display: none;
            }

            > .form-check-input {
                grid-column: 1;
                position: static;
                float: none;
                width: 16px;
                height: 16px;
                margin: 4px 0 0;
                padding: 0;
                align-self: start;
            }

            > .form-check-label {
                grid-column: 2;
                display: block;
                min-width: 0;
                margin: 0;
                line-height: 1.45;
            }
        }
    }

.form-element-fieldset {
        display: grid;
        grid-template-columns: var(--form-label-width) minmax(0, 1fr);
        column-gap: var(--form-column-gap);
        row-gap: 14px;
        min-inline-size: 0;
        width: 100%;
        margin: 0 0 24px;
        padding: 0;
        border: 0;

        .form-element:not(.form-element-radio) {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            align-items: start;
            min-width: 0;
            margin-bottom: 0 !important;
            .form-select {
                height: 34px;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857;
                color: #555555;
                border: 1px solid #c2cad8;
                border-radius: 4px;
                &:active {
                    border-color: #94a4b4;
                    box-shadow: none !important;
                }
                &:focus-visible {
                    border-color: #94a4b4;
                    box-shadow: none !important;
                }
            }
            .form-label {
                text-align: right;
            }
        }


    }

    .actions {
        margin-top: 1rem;
    }
    @media (max-width: 580px) {
        .form-element-fieldset {
            grid-template-columns: minmax(0, 1fr);

            > .form-element:not(.form-element-radio) {
                grid-column: 1;
                grid-template-columns: minmax(0, 1fr);
                row-gap: 6px;

                > .form-label,
                > .form-control,
                > .form-select {
                    grid-column: 1;
                }

                > .form-label {
                    padding-top: 0;
                    text-align: left;
                }
            }

            > .form-element-radio {
                > legend {
                    float: none;
                    width: 100%;
                    max-width: none;
                    margin: 0 0 8px;
                    padding: 0;
                    text-align: left;
                }

                > [role="radiogroup"],
                > [role="group"] {
                    width: 100%;
                    margin-left: 0;
                }
            }
        }
    }
}