/* Placeholder */
body .sqs-block-form {
    --fallback-white-hsl: 0, 0%, 98%;
    --fallback-black-hsl: 0, 0%, 0%;
    --solid-hover-alpha-modifier: .6;
    --outline-hover-alpha-modifier: .4;
    --solid-focus-alpha-modifier: 1;
    --outline-focus-alpha-modifier: .4;
    --fill-hover-transition: .15s background-color cubic-bezier(.33, 1, .68, 1)
}

body.form-use-theme-colors .sqs-block-form {
    --dynamic-fill-color: var(--tweak-form-block-field-fill-color);
    --dynamic-fill-color-hsl: var(--tweak-form-block-field-fill-color-hsl);
    --dynamic-fill-color-a: var(--tweak-form-block-field-fill-color-a);
    --dynamic-border-color: var(--tweak-form-block-field-border-color);
    --dynamic-border-color-hsl: var(--tweak-form-block-field-border-color-hsl);
    --dynamic-border-color-a: var(--tweak-form-block-field-border-color-a);
    --dynamic-input-text-color: var(--tweak-form-block-field-input-color);
    --dynamic-input-text-color-hsl: var(--tweak-form-block-field-input-color-hsl);
    --dynamic-input-text-color-a: var(--tweak-form-block-field-input-color-a);
    --dynamic-accessory-color: var(--tweak-form-block-field-accessory-color)
}

body.form-use-theme-colors .sqs-block-form.sqs-background-enabled {
    --dynamic-fill-color: var(--tweak-form-block-field-fill-color-on-background);
    --dynamic-fill-color-hsl: var(--tweak-form-block-field-fill-color-on-background-hsl);
    --dynamic-fill-color-a: var(--tweak-form-block-field-fill-color-on-background-a);
    --dynamic-border-color: var(--tweak-form-block-field-border-color-on-background);
    --dynamic-border-color-hsl: var(--tweak-form-block-field-border-color-on-background-hsl);
    --dynamic-border-color-a: var(--tweak-form-block-field-border-color-on-background-a);
    --dynamic-input-text-color: var(--tweak-form-block-field-input-color-on-background);
    --dynamic-input-text-color-hsl: var(--tweak-form-block-field-input-color-on-background-hsl);
    --dynamic-input-text-color-a: var(--tweak-form-block-field-input-color-a);
    --dynamic-accessory-color: var(--tweak-form-block-field-accessory-color-on-background)
}

.sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.sqs-block-form .form-item textarea,
.sqs-block-form .form-item select {
    padding: var(--form-field-padding-vertical) var(--form-field-padding-horizontal)
}

.sqs-block-form .form-item select {
    padding-right: calc(var(--form-field-padding-horizontal) + var(--form-field-dropdown-icon-size) + 4px)
}

.form-field-style-solid .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-style-solid .sqs-block-form .form-item textarea,
.form-field-style-solid .sqs-block-form .form-item select {
    background-color: var(--dynamic-fill-color, #fafafa);
    transition: var(--fill-hover-transition)
}

@media (hover:hover) {

    .form-field-style-solid .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]):hover,
    .form-field-style-solid .sqs-block-form .form-item textarea:hover,
    .form-field-style-solid .sqs-block-form .form-item select:hover {
        background-color: hsla(var(--dynamic-fill-color-hsl, var(--fallback-white-hsl)), calc(var(--dynamic-fill-color-a, 1) * var(--solid-hover-alpha-modifier)))
    }
}

.form-field-style-solid .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field-style-solid .sqs-block-form .form-item textarea:focus,
.form-field-style-solid .sqs-block-form .form-item select:focus {
    background-color: hsla(var(--dynamic-fill-color-hsl, var(--fallback-white-hsl)), calc(var(--dynamic-fill-color-a, 1) * var(--solid-focus-alpha-modifier)))
}

.form-field-style-outline .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-style-outline .sqs-block-form .form-item textarea,
.form-field-style-outline .sqs-block-form .form-item select {
    border-color: var(--dynamic-border-color, #a9a9a9);
    background-color: hsla(var(--dynamic-fill-color-hsl, var(--fallback-white-hsl)), 0);
    transition: var(--fill-hover-transition)
}

@media (hover:hover) {

    .form-field-style-outline .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]):hover,
    .form-field-style-outline .sqs-block-form .form-item textarea:hover,
    .form-field-style-outline .sqs-block-form .form-item select:hover {
        background-color: hsla(var(--dynamic-fill-color-hsl, var(--fallback-white-hsl)), calc(var(--dynamic-fill-color-a, 1) * var(--outline-hover-alpha-modifier)))
    }
}

.form-field-style-outline .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field-style-outline .sqs-block-form .form-item textarea:focus,
.form-field-style-outline .sqs-block-form .form-item select:focus {
    background-color: hsla(var(--dynamic-fill-color-hsl, var(--fallback-white-hsl)), calc(var(--dynamic-fill-color-a, 1) * var(--outline-focus-alpha-modifier)))
}

.form-field-shape-square.form-field-border-none .sqs-block-form .form-item input,
.form-field-shape-square.form-field-border-none .sqs-block-form .form-item textarea,
.form-field-shape-square.form-field-border-none .sqs-block-form .form-item select {
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-square.form-field-border-all .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item textarea,
.form-field-shape-square.form-field-border-all .sqs-block-form .form-item select {
    border: solid var(--form-field-border-thickness) var(--dynamic-border-color, #a9a9a9);
    border-radius: 0;
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item textarea,
.form-field-shape-square.form-field-border-bottom .sqs-block-form .form-item select {
    border-bottom: var(--form-field-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.form-field-shape-rounded .sqs-block-form input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-rounded .sqs-block-form textarea,
.form-field-shape-rounded .sqs-block-form select,
.form-field-shape-rounded .sqs-block-form .form-field-error {
    border-radius: .4rem
}

.form-field-shape-rounded.form-field-border-none .sqs-block-form .form-item input,
.form-field-shape-rounded.form-field-border-none .sqs-block-form .form-item textarea,
.form-field-shape-rounded.form-field-border-none .sqs-block-form .form-item select {
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-rounded.form-field-border-all .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-rounded.form-field-border-all .sqs-block-form .form-item textarea,
.form-field-shape-rounded.form-field-border-all .sqs-block-form .form-item select {
    border: solid var(--form-field-border-thickness) var(--dynamic-border-color, #a9a9a9);
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-rounded.form-field-border-bottom .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-rounded.form-field-border-bottom .sqs-block-form .form-item textarea,
.form-field-shape-rounded.form-field-border-bottom .sqs-block-form .form-item select {
    border-bottom: var(--form-field-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.form-field-shape-pill {
    --pill-border-radius: calc(var(--form-field-padding-vertical) + var(--form-block-input-text-font-line-height) * 0.66)
}

.form-field-shape-pill .sqs-block-form input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-pill .sqs-block-form textarea,
.form-field-shape-pill .sqs-block-form select,
.form-field-shape-pill .sqs-block-form .form-field-error {
    border-radius: var(--pill-border-radius)
}

.form-field-shape-pill.form-field-border-none .sqs-block-form .form-item input,
.form-field-shape-pill.form-field-border-none .sqs-block-form .form-item textarea,
.form-field-shape-pill.form-field-border-none .sqs-block-form .form-item select {
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-pill.form-field-border-all .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-pill.form-field-border-all .sqs-block-form .form-item textarea,
.form-field-shape-pill.form-field-border-all .sqs-block-form .form-item select {
    border: solid var(--form-field-border-thickness) var(--dynamic-border-color, #a9a9a9);
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-pill.form-field-border-bottom .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-pill.form-field-border-bottom .sqs-block-form .form-item textarea,
.form-field-shape-pill.form-field-border-bottom .sqs-block-form .form-item select {
    border-bottom: var(--form-field-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.form-field-shape-custom .sqs-block-form input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-custom .sqs-block-form textarea,
.form-field-shape-custom .sqs-block-form select,
.form-field-shape-custom .sqs-block-form .form-field-error {
    border-top-left-radius: var(--form-field-shape-border-top-left-radius);
    border-top-right-radius: var(--form-field-shape-border-top-right-radius);
    border-bottom-left-radius: var(--form-field-shape-border-bottom-left-radius);
    border-bottom-right-radius: var(--form-field-shape-border-bottom-right-radius)
}

.form-field-shape-custom.form-field-border-none .sqs-block-form .form-item input,
.form-field-shape-custom.form-field-border-none .sqs-block-form .form-item textarea,
.form-field-shape-custom.form-field-border-none .sqs-block-form .form-item select {
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-custom.form-field-border-all .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-custom.form-field-border-all .sqs-block-form .form-item textarea,
.form-field-shape-custom.form-field-border-all .sqs-block-form .form-item select {
    border: solid var(--form-field-border-thickness) var(--dynamic-border-color, #a9a9a9);
    box-shadow: 0 0 0 1px transparent
}

.form-field-shape-custom.form-field-border-bottom .sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]),
.form-field-shape-custom.form-field-border-bottom .sqs-block-form .form-item textarea,
.form-field-shape-custom.form-field-border-bottom .sqs-block-form .form-item select {
    border-bottom: var(--form-field-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    border-top: 0;
    border-right: 0;
    border-left: 0
}

.form-field-border-all .sqs-block-form .form-item .form-input-prefix {
    padding: var(--form-field-padding-vertical) 10px var(--form-field-padding-vertical) var(--form-field-padding-horizontal);
    border-width: var(--form-field-border-thickness) 0;
    left: var(--form-field-border-thickness)
}

.form-field-border-bottom .sqs-block-form .form-item .form-input-prefix {
    padding: var(--form-field-padding-vertical) 10px var(--form-field-padding-vertical) var(--form-field-padding-horizontal);
    border-width: 0 0 var(--form-field-border-thickness) 0;
    left: 0
}

.form-field-border-none .sqs-block-form .form-item .form-input-prefix {
    padding: var(--form-field-padding-vertical) 10px var(--form-field-padding-vertical) var(--form-field-padding-horizontal);
    border-width: 1px 0;
    left: 1px
}

.sqs-block-form .form-item.select svg path,
.sqs-block-form .form-item.time svg path,
.sqs-block-form .form-item.date svg path {
    fill: var(--dynamic-accessory-color, #000000)
}

.sqs-block-form .form-item.select select~div {
    right: var(--form-field-padding-horizontal)
}

.sqs-block-form .form-item.date input~div,
.sqs-block-form .form-item.time input~div {
    right: var(--form-field-padding-horizontal)
}

.form-field-border-all .sqs-block-form .form-item select~div {
    right: calc(var(--form-field-border-thickness) + var(--form-field-padding-horizontal))
}

.form-field-checkbox-shape-square .sqs-block-form .form-item.checkbox input[type="checkbox"],
.form-field-checkbox-shape-square .sqs-block-form .form-item.email input[type="checkbox"] {
    border-radius: 0
}

.form-field-checkbox-shape-pill .sqs-block-form .form-item.checkbox input[type="checkbox"],
.form-field-checkbox-shape-pill .sqs-block-form .form-item.email input[type="checkbox"] {
    border-radius: 300px
}

.form-field-checkbox-shape-rounded .sqs-block-form .form-item.checkbox input[type="checkbox"],
.form-field-checkbox-shape-rounded .sqs-block-form .form-item.email input[type="checkbox"] {
    border-radius: 25%
}

.form-field-checkbox-shape-custom .sqs-block-form .form-item.checkbox input[type="checkbox"],
.form-field-checkbox-shape-custom .sqs-block-form .form-item.email input[type="checkbox"],
.form-field-checkbox-shape-custom .sqs-block-form .form-item.checkbox label span,
.form-field-checkbox-shape-custom .sqs-block-form .form-item.email label span {
    border-top-left-radius: var(--form-field-checkbox-shape-border-top-left-radius);
    border-top-right-radius: var(--form-field-checkbox-shape-border-top-right-radius);
    border-bottom-left-radius: var(--form-field-checkbox-shape-border-bottom-left-radius);
    border-bottom-right-radius: var(--form-field-checkbox-shape-border-bottom-right-radius)
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox,
.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --checked-background-color-alpha: var(--dynamic-fill-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-foreground-color: var(--dynamic-border-color, #000000);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label,
.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label {
    column-gap: var(--form-field-checkbox-space-between-icon-and-text);
    cursor: pointer
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"],
.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"] {
    cursor: pointer;
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-checkbox-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    width: var(--form-field-checkbox-size);
    height: var(--form-field-checkbox-size);
    flex-shrink: 0;
    margin-right: 0px
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]::before,
.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]::before {
    width: 75%;
    height: 75%
}

@media (hover:hover) {

    .form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:hover,
    .form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked,
.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:checked {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked::before,
.form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:checked::before {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {

    .form-field-checkbox-fill-solid.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked:hover,
    .form-field-checkbox-fill-solid.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:checked:hover {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox,
.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label,
.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label {
    column-gap: var(--form-field-checkbox-space-between-icon-and-text);
    cursor: pointer
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"],
.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"] {
    cursor: pointer;
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-checkbox-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    width: var(--form-field-checkbox-size);
    height: var(--form-field-checkbox-size);
    flex-shrink: 0;
    margin-right: 0px
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]::before,
.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]::before {
    width: 75%;
    height: 75%
}

@media (hover:hover) {

    .form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:hover,
    .form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked,
.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:checked {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked::before,
.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:checked::before {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {

    .form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked:hover,
    .form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:checked:hover {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox,
.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --checked-background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --checked-background-color-alpha: var(--dynamic-fill-color-a, 1);
    --checked-background-color-alpha-default: 0;
    --checked-foreground-color: var(--dynamic-border-color, #000000);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label,
.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label {
    column-gap: var(--form-field-checkbox-space-between-icon-and-text);
    cursor: pointer
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"],
.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"] {
    cursor: pointer;
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-checkbox-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    width: var(--form-field-checkbox-size);
    height: var(--form-field-checkbox-size);
    flex-shrink: 0;
    margin-right: 0px
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]::before,
.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]::before {
    width: 75%;
    height: 75%
}

@media (hover:hover) {

    .form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:hover,
    .form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked,
.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:checked {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked::before,
.form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:checked::before {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {

    .form-field-checkbox-fill-outline.form-field-checkbox-color-normal .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked:hover,
    .form-field-checkbox-fill-outline.form-field-checkbox-color-normal .form-item.email label input[type="checkbox"]:checked:hover {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox,
.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label,
.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label {
    column-gap: var(--form-field-checkbox-space-between-icon-and-text);
    cursor: pointer
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"],
.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"] {
    cursor: pointer;
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-checkbox-border-thickness) solid var(--dynamic-border-color, #a9a9a9);
    width: var(--form-field-checkbox-size);
    height: var(--form-field-checkbox-size);
    flex-shrink: 0;
    margin-right: 0px
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]::before,
.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]::before {
    width: 75%;
    height: 75%
}

@media (hover:hover) {

    .form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:hover,
    .form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked,
.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:checked {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked::before,
.form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:checked::before {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {

    .form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked:hover,
    .form-field-checkbox-fill-outline.form-field-checkbox-color-inverted .form-item.email label input[type="checkbox"]:checked:hover {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --foreground-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --foreground-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox label {
    cursor: pointer;
    user-select: none;
    display: inline-flex
}

.form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox label span {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha));
    padding: var(--form-field-checkbox-padding-vertical) var(--form-field-checkbox-padding-horizontal);
    border: var(--form-field-checkbox-border-thickness) solid hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox label span:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked~span {
    background-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha));
    color: var(--checked-foreground-color);
    border-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-checkbox-type-button.form-field-checkbox-fill-solid .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked~span:hover {
        background-color: hsla(var(--foreground-color-hsl), calc(var(--foreground-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --foreground-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --foreground-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox label {
    cursor: pointer;
    user-select: none;
    display: inline-flex
}

.form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox label span {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha));
    padding: var(--form-field-checkbox-padding-vertical) var(--form-field-checkbox-padding-horizontal);
    border: var(--form-field-checkbox-border-thickness) solid hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox label span:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked~span {
    background-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha));
    color: var(--checked-foreground-color);
    border-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-checkbox-type-button.form-field-checkbox-fill-outline .sqs-block-form .form-item.checkbox label input[type="checkbox"]:checked~span:hover {
        background-color: hsla(var(--foreground-color-hsl), calc(var(--foreground-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-checkbox-type-button.form-field-checkbox-shape-square .sqs-block-form .form-item.checkbox label span {
    border-radius: 0
}

.form-field-checkbox-type-button.form-field-checkbox-shape-pill {
    --checkbox-pill-border-radius: calc(var(--form-field-checkbox-padding-vertical) + var(--form-block-option-text-font-line-height) * 0.66)
}

.form-field-checkbox-type-button.form-field-checkbox-shape-pill .sqs-block-form .form-item.checkbox label span {
    border-radius: var(--checkbox-pill-border-radius)
}

.form-field-checkbox-type-button.form-field-checkbox-shape-rounded .sqs-block-form .form-item.checkbox label span {
    border-radius: .4rem
}

.form-field-checkbox-layout-stack .sqs-block-form .form-item.checkbox {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--form-field-checkbox-row-gap) var(--form-field-checkbox-column-gap)
}

.form-field-checkbox-layout-fit .sqs-block-form .form-item.checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--form-field-checkbox-row-gap) var(--form-field-checkbox-column-gap)
}

.form-field-radio-shape-square .sqs-block-form .form-item.radio .radio-mark,
.form-field-radio-shape-square .sqs-block-form .form-item.radio .radio-mark::after,
.form-field-radio-shape-square .sqs-block-form .form-item.radio .radio-label,
.form-field-radio-shape-square .sqs-block-form .form-item.radio .radio-outline {
    border-radius: 0
}

.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-mark,
.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-mark::after,
.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-label,
.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-outline {
    border-radius: 300px
}

.form-field-radio-shape-custom .sqs-block-form .form-item.radio .radio-mark,
.form-field-radio-shape-custom .sqs-block-form .form-item.radio .radio-mark::after,
.form-field-radio-shape-custom .sqs-block-form .form-item.radio .radio-label,
.form-field-radio-shape-custom .sqs-block-form .form-item.radio .radio-outline {
    border-top-left-radius: var(--form-field-radio-shape-border-top-left-radius);
    border-top-right-radius: var(--form-field-radio-shape-border-top-right-radius);
    border-bottom-left-radius: var(--form-field-radio-shape-border-bottom-left-radius);
    border-bottom-right-radius: var(--form-field-radio-shape-border-bottom-right-radius)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --checked-background-color-alpha: var(--dynamic-fill-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-foreground-color: var(--dynamic-border-color, #000000);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label {
    column-gap: var(--form-field-radio-space-between-icon-and-text)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"] {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size);
    margin-right: 0px
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-radio-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label .radio-outline {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label:hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label:hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"] {
    flex-shrink: 0
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label {
    column-gap: var(--form-field-radio-space-between-icon-and-text)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"] {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size);
    margin-right: 0px
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-radio-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label .radio-outline {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label:hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label:hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-radio-type-icon.form-field-radio-fill-solid.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"] {
    flex-shrink: 0
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --checked-background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --checked-background-color-alpha: var(--dynamic-fill-color-a, 1);
    --checked-background-color-alpha-default: 0;
    --checked-foreground-color: var(--dynamic-border-color, #000000);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label {
    column-gap: var(--form-field-radio-space-between-icon-and-text)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"] {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size);
    margin-right: 0px
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-radio-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label .radio-outline {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label:hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label:hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-normal .sqs-block-form .form-item.radio label input[type="radio"] {
    flex-shrink: 0
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label {
    column-gap: var(--form-field-radio-space-between-icon-and-text)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"] {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size);
    margin-right: 0px
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-radio-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label .radio-outline {
    width: var(--form-field-radio-size);
    height: var(--form-field-radio-size)
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label:hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label:hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-radio-type-icon.form-field-radio-fill-outline.form-field-radio-color-inverted .sqs-block-form .form-item.radio label input[type="radio"] {
    flex-shrink: 0
}

.form-field-radio-type-icon.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-mark,
.form-field-radio-type-icon.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-mark::after,
.form-field-radio-type-icon.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-label,
.form-field-radio-type-icon.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-outline {
    border-radius: 25%
}

.form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --foreground-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --foreground-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio label span:empty {
    display: none
}

.form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio label {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio label span {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    color: ;
    padding: var(--form-field-radio-padding-vertical) var(--form-field-radio-padding-horizontal);
    border: var(--form-field-radio-border-thickness) solid hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio label span:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio label input[type="radio"]:checked~span {
    background-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha));
    color: var(--checked-foreground-color);
    border-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-radio-type-button.form-field-radio-fill-solid .sqs-block-form .form-item.radio label input[type="radio"]:checked~span:hover {
        background-color: hsla(var(--foreground-color-hsl), calc(var(--foreground-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --foreground-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --foreground-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio label span:empty {
    display: none
}

.form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio label {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio label span {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    color: ;
    padding: var(--form-field-radio-padding-vertical) var(--form-field-radio-padding-horizontal);
    border: var(--form-field-radio-border-thickness) solid hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio label span:hover {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio label input[type="radio"]:checked~span {
    background-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha));
    color: var(--checked-foreground-color);
    border-color: hsla(var(--foreground-color-hsl), var(--foreground-color-alpha))
}

@media (hover:hover) {
    .form-field-radio-type-button.form-field-radio-fill-outline .sqs-block-form .form-item.radio label input[type="radio"]:checked~span:hover {
        background-color: hsla(var(--foreground-color-hsl), calc(var(--foreground-color-alpha) * var(--hover-alpha-modifier)))
    }
}

.form-field-radio-type-button.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-mark,
.form-field-radio-type-button.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-mark::after,
.form-field-radio-type-button.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-label,
.form-field-radio-type-button.form-field-radio-shape-rounded .sqs-block-form .form-item.radio .radio-outline {
    border-radius: .4rem
}

.form-field-radio-type-button.form-field-radio-shape-pill .sqs-block-form .form-item.radio {
    --radio-pill-border-radius: calc(var(--form-field-radio-padding-vertical) + var(--form-block-option-text-font-line-height) * 0.66)
}

.form-field-radio-type-button.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-mark,
.form-field-radio-type-button.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-mark::after,
.form-field-radio-type-button.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-label,
.form-field-radio-type-button.form-field-radio-shape-pill .sqs-block-form .form-item.radio .radio-outline {
    border-radius: var(--radio-pill-border-radius)
}

.form-field-radio-layout-stack .sqs-block-form .form-item.radio {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--form-field-radio-row-gap) var(--form-field-radio-column-gap)
}

.form-field-radio-layout-stack .sqs-block-form .form-item.radio .radio-mark {
    left: unset
}

.form-field-radio-layout-fit .sqs-block-form .form-item.radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--form-field-radio-row-gap) var(--form-field-radio-column-gap)
}

.form-field-radio-layout-fit .sqs-block-form .form-item.radio .radio-mark {
    left: unset
}

.form-field-survey-shape-square .sqs-block-form .form-item.likert .radio-mark,
.form-field-survey-shape-square .sqs-block-form .form-item.likert .radio-mark::after,
.form-field-survey-shape-square .sqs-block-form .form-item.likert .radio-label,
.form-field-survey-shape-square .sqs-block-form .form-item.likert .radio-outline {
    border-radius: 0
}

.form-field-survey-shape-rounded .sqs-block-form .form-item.likert .radio-mark,
.form-field-survey-shape-rounded .sqs-block-form .form-item.likert .radio-mark::after,
.form-field-survey-shape-rounded .sqs-block-form .form-item.likert .radio-label,
.form-field-survey-shape-rounded .sqs-block-form .form-item.likert .radio-outline {
    border-radius: 25%
}

.form-field-survey-shape-pill .sqs-block-form .form-item.likert .radio-mark,
.form-field-survey-shape-pill .sqs-block-form .form-item.likert .radio-mark::after,
.form-field-survey-shape-pill .sqs-block-form .form-item.likert .radio-label,
.form-field-survey-shape-pill .sqs-block-form .form-item.likert .radio-outline {
    border-radius: 300px
}

.form-field-survey-shape-custom .sqs-block-form .form-item.likert .radio-mark,
.form-field-survey-shape-custom .sqs-block-form .form-item.likert .radio-mark::after,
.form-field-survey-shape-custom .sqs-block-form .form-item.likert .radio-label,
.form-field-survey-shape-custom .sqs-block-form .form-item.likert .radio-outline {
    border-top-left-radius: var(--form-field-survey-shape-border-top-left-radius);
    border-top-right-radius: var(--form-field-survey-shape-border-top-right-radius);
    border-bottom-left-radius: var(--form-field-survey-shape-border-bottom-left-radius);
    border-bottom-right-radius: var(--form-field-survey-shape-border-bottom-right-radius)
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --checked-background-color-alpha: var(--dynamic-fill-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-foreground-color: var(--dynamic-border-color, #000000);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) input[type="radio"] {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size);
    margin-right: 0px
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-survey-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) .radio-outline {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-survey-fill-solid.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
    --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-background-color-alpha-default: var(--dynamic-border-color-a, 1);
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--solid-hover-alpha-modifier)
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) input[type="radio"] {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size);
    margin-right: 0px
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-survey-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) .radio-outline {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-survey-fill-solid.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --checked-background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --checked-background-color-alpha: var(--dynamic-fill-color-a, 1);
    --checked-background-color-alpha-default: 0;
    --checked-foreground-color: var(--dynamic-border-color, #000000);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) input[type="radio"] {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size);
    margin-right: 0px
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-survey-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) .radio-outline {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-survey-fill-outline.form-field-survey-color-normal .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert {
    --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
    --background-color-alpha: var(--dynamic-fill-color-a, 1);
    --background-color-alpha-default: 0;
    --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
    --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
    --checked-background-color-alpha-default: 0;
    --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
    --hover-alpha-modifier: var(--outline-hover-alpha-modifier)
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) input[type="radio"] {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size);
    margin-right: 0px
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) .radio-mark {
    transition: var(--fill-hover-transition);
    background-color: hsla(var(--background-color-hsl), var(--background-color-alpha-default));
    border: var(--form-field-survey-border-thickness) solid var(--dynamic-border-color, #000000);
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) .radio-mark::after {
    background-color: hsla(var(--background-color-hsl), 0);
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) .radio-outline {
    width: var(--form-field-survey-size);
    height: var(--form-field-survey-size)
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark {
    background-color: hsla(var(--checked-background-color-hsl), var(--checked-background-color-alpha-default)) !important
}

.form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title) input[type="radio"]:checked~.radio-mark::after {
    background-color: var(--checked-foreground-color) !important
}

@media (hover:hover) {
    .form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]~.radio-mark {
        background-color: hsla(var(--background-color-hsl), calc(var(--background-color-alpha) * var(--hover-alpha-modifier)))
    }

    .form-field-survey-fill-outline.form-field-survey-color-inverted .sqs-block-form .form-item.likert label:not(.title):hover input[type="radio"]:checked~.radio-mark {
        background-color: hsla(var(--checked-background-color-hsl), calc(var(--checked-background-color-alpha) * var(--hover-alpha-modifier))) !important
    }
}

.form-wrapper .react-form-contents .field-list .title {
    padding-bottom: var(--form-label-spacing-bottom)
}

.form-wrapper .react-form-contents .field-list p.description {
    margin-bottom: var(--form-description-spacing-bottom) !important
}

.form-wrapper .react-form-contents .field-list .description.required {
    padding: 0px
}

.form-wrapper .react-form-contents .field-list .caption-text:not(:empty) {
    padding-bottom: var(--form-caption-spacing-bottom);
    margin-top: 4px
}

.form-wrapper .react-form-contents .field-list .address .field .caption-text {
    padding-top: 0px
}

.form-wrapper .react-form-contents .field-list .address .field:first-of-type .caption-text {
    padding-top: 4px
}

.form-wrapper .react-form-contents .field-list .field {
    margin: 0 0 var(--form-field-spacing-bottom) !important
}

.form-wrapper .react-form-contents .field-list .field.likert {
    margin-bottom: 0px !important;
    padding-bottom: 12px
}

.form-wrapper .react-form-contents .field-list .field.likert .item {
    margin: var(--form-field-spacing-bottom) 0
}

.form-wrapper .react-form-contents .field-list .field.likert .item:first-of-type {
    margin: calc(var(--form-field-spacing-bottom) / 2) 0
}

.form-wrapper .react-form-contents .field-list .field.likert .question {
    margin-bottom: 4px
}

.form-wrapper .react-form-contents .field-list .field .option {
    margin-top: 4px
}

.form-wrapper .react-form-contents .field-list .field .option label {
    padding: 0px 4px 0px 0px
}

.form-wrapper .react-form-contents .field-list .field.radio .option,
.form-wrapper .react-form-contents .field-list .field.checkbox .option {
    margin-bottom: 0px
}

.form-wrapper .react-form-contents .field-list .line-field {
    margin: calc(var(--form-field-spacing-bottom) + 12px) 0 !important
}

.form-wrapper .react-form-contents .field-list .section {
    padding-bottom: 0px;
    margin: 0px
}

.form-wrapper .react-form-contents .field-list .fields {
    column-gap: var(--form-field-column-gap)
}

.form-wrapper .react-form-contents .field-list fieldset {
    row-gap: 0px
}

.form-wrapper .react-form-contents .field-list legend {
    padding: 0 !important
}

input:focus,
select:focus,
textarea:focus,
input[type="radio"]:focus-visible~.radio-outline,
.form-field-checkbox-type-button .field.checkbox input[type="checkbox"]:focus-visible+span,
.form-field-radio-type-button input[type="radio"]:focus-visible+.radio-label {
    outline-style: solid;
    outline-color: var(--dynamic-border-color, var(--navigationLinkColor));
    outline-width: 2px;
    outline-offset: 2px !important
}

.form-wrapper .react-form-contents .field-list input:not([type="checkbox"]):not([type="radio"]),
.form-wrapper .react-form-contents .field-list textarea,
.form-wrapper .react-form-contents .field-list select {
    color: var(--dynamic-input-text-color, #000000)
}

.form-wrapper .react-form-contents .field-list input::placeholder,
.form-wrapper .react-form-contents .field-list textarea::placeholder,
.form-wrapper .react-form-contents .field-list select.show-placeholder {
    color: hsla(var(--dynamic-input-text-color-hsl, var(--fallback-black-hsl)), calc(var(--dynamic-input-text-color-a, 1) * 0.55))
}

.form-wrapper .react-form-contents .field-list .form-input-prefix {
    color: var(--dynamic-input-text-color, #000000);
    opacity: .55;
    pointer-events: none
}

.sqs-block-form .form-item.likert .option,
.sqs-block-form .form-item.line-field {
    border-color: var(--dynamic-border-color) !important
}

.form-use-theme-colors .sqs-modal-lightbox-content .lightbox-inner .lightbox-content.lightbox-form-content-background {
    background-color: var(--tweak-form-block-background-color)
}

.form-use-theme-colors .sqs-modal-lightbox-content .lightbox-inner .lightbox-content.lightbox-form-content-background .sqs-block-form {
    background-color: transparent
}

.form-use-theme-colors .sqs-modal-lightbox-content .lightbox-inner .lightbox-content.lightbox-form-content-background .form-title,
.form-use-theme-colors .sqs-modal-lightbox-content .lightbox-inner .lightbox-content.lightbox-form-content-background .lightbox-close {
    color: var(--tweak-form-block-title-color-on-background)
}

.form-use-theme-colors .sqs-modal-lightbox-content .lightbox-inner .lightbox-content.lightbox-form-content-background .lightbox-close {
    top: 18px;
    right: 18px
}

body:not(.form-use-theme-colors) .sqs-modal-lightbox-content .lightbox-inner .sqs-block-form {
    --tweak-form-block-title-color-on-background: #000000;
    --tweak-form-block-description-color-on-background: #000000;
    --tweak-form-block-caption-color-on-background: #000000;
    --tweak-form-block-option-color-on-background: #000000;
    --tweak-form-block-survey-title-color-on-background: #000000;
    --tweak-form-block-button-text-color-on-background: #ffffff;
    --tweak-form-block-button-background-color-on-background: #000000;
    background-color: #ffffff
}

.sqs-block-form * {
    -webkit-tap-highlight-color: transparent
}

.sqs-block-form textarea {
    height: 4em
}