.form-wrapper {
    display: flex;
    justify-content: center;
}


.form-wrapper fieldset, .form-wrapper .form-fieldset {
    padding: 0.9em 0.7em;
    margin: 0;
    background-color: var(--color-bg);
    border: none;
}

.form-wrapper fieldset > legend, .form-wrapper .form-fieldset > legend {
    margin: 0 -0.5em;
    padding: 0.5em 0.7em;
    display: block;
    font-weight: bold;
    font-size: 1.4em;
    color: var(--color-title-text);
    width: calc(100% + 1em);
    background-color: var(--color-title-bg);
}

.form-wrapper .form-fieldset > legend {
    margin-top: -0.9rem;
    margin-bottom: 0.85rem;
    line-height: 1.4;
}


.form-wrapper .form-row {
    display: flex;
    /*width: 100%;*/
    /*flex-wrap: wrap;
    max-width: 800px;*/
    border-radius: var(--size-radius);
    overflow: hidden;
}

.form-wrapper .form-row > fieldset, .form-wrapper .form-row > .form-fieldset {
    border-radius: 0;
}


.form-group {
    position: relative;
    width: 100%;
    display: block;
    border: var(--size-border-width) solid var(--color-border);
    border-radius: var(--size-radius);
}


.form-group:focus-within {
    border-color: var(--color-focus);
}
.form-group:focus-within > .form-input {
    outline-color: var(--color-focus);
}


.form-group > .form-label {
    position: absolute;
    left: calc(var(--size-input-padding-lr) * 1);
    top: calc(var(--size-input-padding-tb) * 2.5);
    white-space: nowrap;
    transform: translate(0, -50%);
    transform-origin: 0 0;
    background: transparent;
    transition: transform 120ms ease-in;
    font-weight: bold;
    line-height: 1.25;
    pointer-events: none;
    color: var(--color-input-label);
}



.form-group > .form-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: none;
    padding: calc(var(--size-input-padding-tb) * 2.5) calc(var(--size-input-padding-tb) * 0.5)
        var(--size-input-padding-lr) var(--size-input-padding-lr);
    color: currentColor;
    /*outline: none;*/
    border-radius: var(--size-radius);
}
.form-group > select.form-input {
    /*padding: calc(var(--size-input-padding-tb) * 2) calc(var(--size-input-padding-tb) * 0.5)
        var(--size-input-padding-lr) 0;*/
}
.form-group > textarea.form-input {
    resize: vertical;
    height: 100%;
}

.form-group > input.form-input:not(:placeholder-shown) + .form-label,
.form-group > select.form-input:has(option[value=""]:not(:checked)) + .form-label,
.form-group > .form-input:focus + .form-label {
    transform: translate(0rem, -100%) scale(0.9);
    color: var(--color-focus);
}


.form-group > .form-input[required]:invalid {
    outline-color: var(--color-invalid);
}
.form-group > .form-input[required]:invalid + .form-label {
    color: var(--color-invalid);
}
.form-group > .form-input:placeholder-shown[required] + .form-label:after {
    content: ' *';
}