/* =====================================================
   Fluent Forms + ACSS Integration
   Mapped from ACSS's WS Forms CSS variables
   ===================================================== */

   /* Braucht zusätzlich im ACSS Global SCSS:
   .ff-default .ff-btn.ff-btn-submit.ff_btn_style { @include btn(primary); }
   .ff-default .ff_upload_btn.ff-btn { @include btn(secondary); }
   Ohne das bleibt der Absende-Button im Fluent-Forms-Blau. */

.fluentform{
  --fluentform-primary: var(--primary);
  --fluentform-secondary: var(--secondary);
  --fluentform-danger: var(--danger);
  --fluentform-border-color: var(--wsf-field-border-color);
  --fluentform-border-radius: var(--wsf-form-border-radius);
  --fluentform-input-select-height: auto;
}


/* =====================================================
   FORM WRAPPER
   padding, background, base text color, typography
   ===================================================== */

.ff-default {
    background-color: var(--wsf-form-color-background);
    color:            var(--wsf-form-color-base);
    font-size:        var(--wsf-form-font-size);
    font-style:       var(--wsf-form-font-style);
    font-weight:      var(--wsf-form-font-weight);
    letter-spacing:   var(--wsf-form-letter-spacing);
    line-height:      var(--wsf-form-line-height);
    text-decoration:  var(--wsf-form-text-decoration);
    text-transform:   var(--wsf-form-text-transform);
    border:           var(--wsf-form-border-width) var(--wsf-form-border-style) var(--wsf-form-border-color);
    border-radius:    var(--wsf-form-border-radius);
    padding:          var(--wsf-form-padding-vertical) var(--wsf-form-padding-horizontal);
}


/* =====================================================
   GROUP / FIELD SPACING
   ===================================================== */

.fluentform .ff-el-group {
    margin-bottom: var(--wsf-form-grid-gap);
}

@media (min-width: 768px) {
    .frm-fluent-form .ff-t-container {
        gap: var(--wsf-form-grid-gap);
    }
}


/* =====================================================
   SECTION BREAKS (legend + divider)
   ===================================================== */

.fluentform .ff-el-section-break {
    background-color: var(--wsf-section-color-background);
}

.fluentform .ff-el-section-break .ff-el-section-title {
    background-color: var(--wsf-section-legend-color-background);
    color:            var(--wsf-section-legend-color);
    font-size:        var(--wsf-section-legend-font-size, var(--wsf-form-font-size-large));
    font-style:       var(--wsf-section-legend-font-style, var(--wsf-form-font-style));
    font-weight:      var(--wsf-section-legend-font-weight, var(--wsf-form-font-weight));
    line-height:      var(--wsf-section-legend-line-height, var(--wsf-form-line-height));
    letter-spacing:   var(--wsf-section-legend-letter-spacing, var(--wsf-form-letter-spacing));
    text-decoration:  var(--wsf-section-legend-text-decoration, var(--wsf-form-text-decoration));
    text-transform:   var(--wsf-section-legend-text-transform, var(--wsf-form-text-transform));
    margin-bottom:    var(--wsf-section-legend-gap);
}

.fluentform .ff-el-section-break hr {
    background-color: var(--wsf-group-ul-border-color);
    border:           none;
    height:           1px;
    margin-bottom:    10px;
}


/* =====================================================
   FIELDSET LEGEND (checkbox / radio group titles)
   ===================================================== */

.ff-default fieldset legend {
    background-color: var(--wsf-field-fieldset-legend-color-background);
    color:            var(--wsf-field-fieldset-legend-color);
    font-size:        var(--wsf-field-fieldset-legend-font-size, var(--wsf-form-font-size-large));
    font-style:       var(--wsf-field-fieldset-legend-font-style, var(--wsf-form-font-style));
    font-weight:      var(--wsf-field-fieldset-legend-font-weight, var(--wsf-form-font-weight));
    letter-spacing:   var(--wsf-field-fieldset-legend-letter-spacing, var(--wsf-form-letter-spacing));
    line-height:      var(--wsf-field-fieldset-legend-line-height, var(--wsf-form-line-height));
    text-decoration:  var(--wsf-field-fieldset-legend-text-decoration, var(--wsf-form-text-decoration));
    text-transform:   var(--wsf-field-fieldset-legend-text-transform, var(--wsf-form-text-transform));
    margin-bottom:    var(--wsf-field-fieldset-legend-gap);
}


/* =====================================================
   LABELS
   ===================================================== */

.ff-default .ff-el-input--label label {
    background-color: var(--wsf-field-label-color-background);
    color:            var(--wsf-field-label-color);
    font-size:        var(--wsf-field-label-font-size);
    font-style:       var(--wsf-field-label-font-style, var(--wsf-form-font-style));
    font-weight:      var(--wsf-field-label-font-weight, var(--wsf-form-font-weight));
    letter-spacing:   var(--wsf-field-label-letter-spacing, var(--wsf-form-letter-spacing));
    line-height:      var(--wsf-field-label-line-height, var(--wsf-form-line-height));
    text-decoration:  var(--wsf-field-label-text-decoration, var(--wsf-form-text-decoration));
    text-transform:   var(--wsf-field-label-text-transform, var(--wsf-form-text-transform));
    margin-bottom:    var(--wsf-field-label-gap);
}

/* Inside (floating) label */
.fluentform .ff-el-input--label.ff-label-inside label {
    transform-origin: 0 0;
}

.fluentform .ff-el-input--label.ff-label-inside.ff-label-active label {
    background-color: var(--wsf-field-label-color-background);
    transform: translate(0, var(--wsf-field-label-inside-offset)) scale(var(--wsf-field-label-inside-scale));
}

/* Required asterisk */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color:       var(--wsf-form-color-danger);
    margin-left: 3px;
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
    color:        var(--wsf-form-color-danger);
    margin-right: 3px;
}


/* =====================================================
   HELP TEXT
   ===================================================== */

.fluentform .ff-el-help-message {
    background-color: var(--wsf-field-help-color-background);
    color:            var(--wsf-field-help-color);
    font-size:        var(--wsf-field-help-font-size, var(--wsf-form-font-size-small));
    font-style:       var(--wsf-field-help-font-style, var(--wsf-form-font-style));
    font-weight:      var(--wsf-field-help-font-weight, var(--wsf-form-font-weight));
    letter-spacing:   var(--wsf-field-help-letter-spacing, var(--wsf-form-letter-spacing));
    line-height:      var(--wsf-field-help-line-height, var(--wsf-form-line-height));
    text-decoration:  var(--wsf-field-help-text-decoration, var(--wsf-form-text-decoration));
    text-transform:   var(--wsf-field-help-text-transform, var(--wsf-form-text-transform));
    margin-top:       var(--wsf-field-help-gap);
}


/* =====================================================
   VALIDATION ERROR MESSAGES
   ===================================================== */

.fluentform .ff-el-is-error .text-danger,
.fluentform .text-danger {
    background-color: var(--wsf-field-invalid-feedback-color-background);
    color:            var(--wsf-field-invalid-feedback-color);
    font-size:        var(--wsf-field-invalid-feedback-font-size, var(--wsf-form-font-size-small));
    font-style:       var(--wsf-field-invalid-feedback-font-style, var(--wsf-form-font-style));
    font-weight:      var(--wsf-field-invalid-feedback-font-weight, var(--wsf-form-font-weight));
    letter-spacing:   var(--wsf-field-invalid-feedback-letter-spacing, var(--wsf-form-letter-spacing));
    line-height:      var(--wsf-field-invalid-feedback-line-height, var(--wsf-form-line-height));
    text-decoration:  var(--wsf-field-invalid-feedback-text-decoration, var(--wsf-form-text-decoration));
    text-transform:   var(--wsf-field-invalid-feedback-text-transform, var(--wsf-form-text-transform));
    margin-top:       var(--wsf-field-invalid-feedback-gap);
}


/* =====================================================
   FIELD CONTROLS - inputs, textareas, selects
   ===================================================== */

.ff-default .ff-el-form-control,
.ff-default .frm-fluent-form .choices__inner{
    background-color: var(--wsf-field-color-background);
    border:           var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color);
    border-radius:    var(--wsf-field-border-radius);
    color:            var(--wsf-field-color);
    font-size:        var(--wsf-field-font-size, var(--wsf-form-font-size));
    font-style:       var(--wsf-field-font-style, var(--wsf-form-font-style));
    font-weight:      var(--wsf-field-font-weight, var(--wsf-form-font-weight));
    letter-spacing:   var(--wsf-field-letter-spacing, var(--wsf-form-letter-spacing));
    line-height:      var(--wsf-field-line-height, var(--wsf-form-line-height));
    text-decoration:  var(--wsf-field-text-decoration, var(--wsf-form-text-decoration));
    text-transform:   var(--wsf-field-text-transform, var(--wsf-form-text-transform));
    padding:          var(--wsf-field-padding-vertical) var(--wsf-field-padding-horizontal);
    transition:       background-color var(--wsf-form-transition),
                      border-color     var(--wsf-form-transition),
                      box-shadow       var(--wsf-form-transition);
}

.ff-default .ff-el-form-control:hover:enabled:not(:focus) {
    background-color: var(--wsf-field-color-background-hover);
    border-color:     var(--wsf-field-border-color-hover);
    color:            var(--wsf-field-color-hover);
}

.ff-default .ff-el-form-control:focus,
.ff-default .frm-fluent-form .choices__inner:focus-within{
    background-color: var(--wsf-field-color-background-focus);
    border-color:     var(--wsf-field-border-color-focus);
    box-shadow:       var(--wsf-field-box-shadow);
    color:            var(--wsf-field-color-focus);
    outline:          0;
}

.ff-default .ff-el-form-control::placeholder,
.ff-default select.ff-el-form-control,
.ff-default .frm-fluent-form .choices__input::placeholder{
    color:   var(--wsf-field-color-placeholder);
    opacity: 1;
}

.ff-default .ff-el-form-control:disabled,
.ff-default .ff-el-form-control[readonly]:not(.flatpickr-input),
.ff-default .frm-fluent-form .choices__input:disabled{
    background-color: var(--wsf-field-color-background-disabled);
    border-color:     var(--wsf-field-border-color-disabled);
    color:            var(--wsf-field-color-disabled);
    opacity:          1;
}

/* Invalid state */
.fluentform .ff-el-is-error .ff-el-form-control {
    background-color: var(--wsf-field-color-background-invalid);
    border-color:     var(--wsf-field-border-color-invalid);
    color:            var(--wsf-field-color-invalid);
}

/* Textarea */
.ff-default textarea.ff-el-form-control {
    min-height: 90px;
    resize:     vertical;
}

/* Select */
.ff-default .frm-fluent-form .choices__inner{
  height: var(--fluentform-input-select-height);
}
.frm-fluent-form .choices[data-type*=select-multiple] .choices__input{
  height: 100%;
}

/* Multiselect */
.frm-fluent-form .choices__list--dropdown .choices__list{
  background: var(--wsf-field-select-select2-choice-color-background);
  color: var(--wsf-field-select-select2-choice-color);
}
.frm-fluent-form .choices__list--dropdown .choices__item--selectable.is-highlighted{
  background: var(--wsf-field-select-select2-result-color-background-highlighted);
  color: var(--wsf-field-select-select2-result-color-highlighted);
}
.frm-fluent-form .choices__list--multiple .choices__item{
  background: var(--wsf-field-select-select2-result-color-background-selected);
  border-color: var(--wsf-field-select-select2-result-color-background-selected);
  color: var(--wsf-field-select-select2-result-color-selected);
}


/* =====================================================
   PREFIX / SUFFIX - fixes border-radius on grouped inputs
   ===================================================== */

/* Structural wrappers - layout only */
.fluentform .ff_input-group-prepend,
.fluentform .ff_input-group-append {
    display: flex;
}

/* The visible element that actually renders the prefix/suffix text */
.fluentform .ff_input-group-text {
    align-items:      center;
    background-color: var(--wsf-field-prefix-suffix-color-background);
    border:           var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color);
    color:            var(--wsf-field-prefix-suffix-color);
    display:          flex;
    font-size:        var(--wsf-field-prefix-suffix-font-size);
    font-style:       var(--wsf-field-prefix-suffix-font-style);
    font-weight:      var(--wsf-field-prefix-suffix-font-weight);
    letter-spacing:   var(--wsf-field-prefix-suffix-letter-spacing);
    line-height:      var(--wsf-field-prefix-suffix-line-height);
    padding:          var(--wsf-field-padding-vertical) var(--wsf-field-padding-horizontal);
    text-decoration:  var(--wsf-field-prefix-suffix-text-decoration);
    text-transform:   var(--wsf-field-prefix-suffix-text-transform);
    white-space:      nowrap;
}

.fluentform .ff_input-group-prepend .ff_input-group-text {
    border-right:              none;
    border-top-left-radius:    var(--wsf-field-border-radius);
    border-bottom-left-radius: var(--wsf-field-border-radius);
}

.fluentform .ff_input-group-append .ff_input-group-text {
    border-left:                none;
    border-top-right-radius:    var(--wsf-field-border-radius);
    border-bottom-right-radius: var(--wsf-field-border-radius);
}

/* Remove radius from the input itself when adjacent to prepend/append */
.fluentform .ff_input-group .ff_input-group-prepend + .ff-el-form-control,
.fluentform .ff_input-group .ff_input-group-prepend + input {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
}

.fluentform .ff_input-group .ff-el-form-control:has(~ .ff_input-group-append),
.fluentform .ff_input-group input:has(~ .ff_input-group-append) {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
}


/* =====================================================
   SELECT ARROW
   ===================================================== */

.ff-default select.ff-el-form-control {
    -webkit-appearance: none;
    appearance:         none;
}

/* Choices.js arrow */
.frm-fluent-form .choices[data-type*=select-one]:after,
.frm-fluent-form .choices[data-type*=select-multiple]:after{
    border-left:   calc(var(--wsf-field-select-arrow-width, 6px) / 2) solid transparent;
    border-right:  calc(var(--wsf-field-select-arrow-width, 6px) / 2) solid transparent;
    border-top:    var(--wsf-field-select-arrow-height, 5px) solid var(--wsf-field-select-arrow-color);
    content:       "";
    height:        0;
    margin-top:    calc(var(--wsf-field-select-arrow-height, 5px) / -2);
    pointer-events: none;
    position:      absolute;
    right:         11.5px;
    top:           50%;
    width:         0;
}


/* =====================================================
   CHECKBOXES - native style
   ===================================================== */

/* Hide native input */
.fluentform .ff-el-form-check-input.ff-el-form-check-checkbox {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
    margin:   0;
}

/* Row spacing */
.fluentform .ff-el-form-check {
    margin-bottom: var(--wsf-field-checkbox-gap-vertical);
}

.fluentform .ff-el-form-check-label {
    align-items: center;
    cursor:      pointer;
    display:     flex;
}

/* Inline gap = space between the checkbox/radio box and the label text */
.fluentform .ff-el-form-check-label input[type="checkbox"] + span,
.fluentform .ff-el-form-check-label input[type="radio"] + span {
    align-items: center;
    display:     flex;
    gap:         var(--wsf-field-checkbox-gap-horizontal);
}

/* Visible box via ::before on the span */
.fluentform .ff-el-form-check-label input[type="checkbox"] + span::before {
    background-color: var(--wsf-field-checkbox-color-background);
    border:           var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color);
    border-radius:    var(--wsf-field-checkbox-border-radius);
    content:          "";
    display:          inline-block;
    flex-shrink:      0;
    height:           var(--wsf-field-checkbox-size);
    width:            var(--wsf-field-checkbox-size);
    transition:       background-color var(--wsf-form-transition), border-color var(--wsf-form-transition);
}

/* Checked state - white checkmark SVG */
.fluentform .ff-el-form-check.ff_item_selected .ff-el-form-check-label input[type="checkbox"] + span::before,
.fluentform .ff-el-form-check-label input[type="checkbox"]:checked + span::before {
    background-color:    var(--wsf-field-checkbox-checked-color-background);
    border-color:        var(--wsf-field-checkbox-checked-color-background);
    background-image:    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 3.5L6 11 2.5 7.5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     75%;
}


/* =====================================================
   CHECKBOXES - button list style (.ff_list_buttons)
   ===================================================== */

/* Hide the pseudo-element box for button-style */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label input[type="checkbox"] + span::before {
    display: none;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
    background-color: var(--wsf-field-checkbox-button-color-background);
    border:           var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-group-ul-border-color);
    color:            var(--wsf-field-checkbox-button-color);
    font-size:        var(--wsf-group-li-font-size);
    font-weight:      var(--wsf-group-li-font-weight);
    letter-spacing:   var(--wsf-group-li-letter-spacing);
    line-height:      var(--wsf-group-li-line-height);
    padding:          var(--wsf-group-li-padding-vertical) var(--wsf-group-li-padding-horizontal);
    border-radius:    0;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:first-child label > span {
    border-left:   var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-group-ul-border-color);
    border-radius: var(--wsf-form-border-radius) 0 0 var(--wsf-form-border-radius);
    box-shadow:    none !important;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:last-child label > span {
    border-radius: 0 var(--wsf-form-border-radius) var(--wsf-form-border-radius) 0;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
    background-color: var(--wsf-group-li-color-background-focus);
    color:            var(--wsf-group-li-color-focus);
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
    background-color: var(--wsf-field-checkbox-checked-button-color-background);
    border-color:     var(--wsf-field-checkbox-checked-button-color-background);
    color:            var(--wsf-field-checkbox-checked-button-color);
}

/* Focus-within state - shown briefly after unchecking before clicking away */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label:focus-within span {
    background-color: var(--wsf-group-li-color-background-focus);
    color:            var(--wsf-group-li-color-focus);
}


/* =====================================================
   RADIO BUTTONS - native style
   ===================================================== */

.fluentform .ff-el-form-check-input.ff-el-form-check-radio {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
    margin:   0;
}

.fluentform .ff-el-form-check-label input[type="radio"] + span::before {
    background-color: var(--wsf-field-radio-color-background);
    border:           var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color);
    border-radius:    50%;
    content:          "";
    display:          inline-block;
    flex-shrink:      0;
    height:           var(--wsf-field-radio-size);
    width:            var(--wsf-field-radio-size);
    transition:       background-color var(--wsf-form-transition), border-color var(--wsf-form-transition);
}

.fluentform .ff-el-form-check.ff_item_selected .ff-el-form-check-label input[type="radio"] + span::before,
.fluentform .ff-el-form-check-label input[type="radio"]:checked + span::before {
    border-color: var(--wsf-field-radio-checked-color);
    box-shadow:   inset 0 0 0 3px var(--wsf-field-radio-color-background),
                  inset 0 0 0 10px var(--wsf-field-radio-checked-color);
}

/* Block gap between radio items (uses radio token; checkboxes use margin-bottom above) */
.fluentform .ff-el-form-check + .ff-el-form-check {
    margin-top: var(--wsf-field-radio-gap-vertical);
}


/* =====================================================
   RANGE SLIDER (.rangeslider library)
   ===================================================== */

.fluentform .rangeslider {
    background-color: var(--wsf-field-range-track-color);
    border-radius:    var(--wsf-field-range-track-border-radius);
}

.fluentform .rangeslider__fill {
    background-color: var(--wsf-field-range-track-lower-color);
    border-radius:    var(--wsf-field-range-track-border-radius);
}

.fluentform .rangeslider__handle {
    background-color: var(--wsf-field-range-thumb-color);
    border-color:     var(--wsf-field-range-thumb-color);
}

.fluentform .rangeslider__handle:focus,
.fluentform .rangeslider__handle:active {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsf-field-range-thumb-color) 30%, transparent);
}

/* FF rangeslider does not render tickmarks - tickmark tokens have no target */


/* =====================================================
   BUTTONS
   ===================================================== */

.ff-default .ff-btn-lg { font-size: var(--wsf-form-font-size-large); }
.ff-default .ff-btn-sm { font-size: var(--wsf-form-font-size-small); }


/* =====================================================
   TOOLTIPS
   Note: FF renders tooltips outside .wsf-form so the
   scoped WSF variables don't reach them. Hardcoded
   fallbacks used until ACSS moves these to :root.
   ===================================================== */

.fluentform .ff-el-tooltip svg {
    fill: var(--wsf-form-color-accent, var(--fluentform-primary));
}

.ff-el-pop-content {
    background-color: var(--wsf-field-tooltip-color-background, #000);
    border-radius:    var(--wsf-field-tooltip-border-radius, 3px);
    color:            var(--wsf-field-tooltip-color, #fff);
    font-size:        var(--wsf-field-tooltip-font-size, 11px);
    font-weight:      var(--wsf-field-tooltip-font-weight, 400);
    line-height:      var(--wsf-field-tooltip-line-height, 1.5);
    padding:          var(--wsf-field-padding-vertical, 8px) var(--wsf-field-padding-horizontal, 10px);
    margin-top:       var(--wsf-field-tooltip-gap, 5px);
}


/* =====================================================
   PROGRESS BAR (multi-step forms)
   ===================================================== */

.fluentform .ff-el-progress {
    background-color: var(--wsf-field-progress-color-background);
    border-radius:    var(--wsf-form-border-radius);
}

.fluentform .ff-el-progress-bar {
    background-color: var(--wsf-field-progress-color-background-bar);
    color:            var(--wsf-form-color-base-contrast);
}


/* =====================================================
   STEP PROGRESS INDICATOR
   ===================================================== */

.fluentform .ff-step-titles li.ff_active,
.fluentform .ff-step-titles li.ff_completed {
    color: var(--wsf-group-li-color-active);
}

.fluentform .ff-step-titles li.ff_active:before,
.fluentform .ff-step-titles li.ff_completed:before {
    background:   var(--wsf-group-li-steps-color-background-active);
    border-color: var(--wsf-group-li-steps-border-color-active);
    color:        var(--wsf-group-li-steps-color-active);
}

.fluentform .ff-step-titles li.ff_completed:before {
    background:   var(--wsf-group-li-steps-color-background-complete);
    border-color: var(--wsf-group-li-steps-border-color-complete);
    color:        var(--wsf-group-li-steps-color-complete);
}

.fluentform .ff-step-titles li.ff_active:after,
.fluentform .ff-step-titles li.ff_completed:after {
    background: var(--wsf-group-li-steps-border-color-complete);
}


/* =====================================================
   FILE UPLOAD
   FF does not use a dropzone - standard button only
   ===================================================== */

.fluentform .ff_upload_btn.ff-btn {
    background-color: var(--wsf-field-prefix-suffix-color-background);
    border:           var(--wsf-field-border-width) var(--wsf-field-border-style) var(--wsf-field-border-color);
    border-radius:    var(--wsf-field-border-radius);
    color:            var(--wsf-field-color);
}

.fluentform .ff-upload-remove,
.fluentform .ff-upload-remove:hover {
    color: var(--wsf-form-color-danger);
}


/* =====================================================
   SUCCESS MESSAGE
   ===================================================== */

.ff-message-success {
    border:     1px solid var(--wsf-group-ul-border-color);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    padding:    15px;
}


/* =====================================================
   CHECKABLE GRIDS (tabular checkbox/radio)
   ===================================================== */

.fluentform .ff-checkable-grids thead > tr > th {
    background: var(--wsf-form-color-neutral);
}

.fluentform .ff-checkable-grids tbody > tr:nth-child(2n) > td {
    background: var(--wsf-form-color-neutral);
}

.fluentform .ff-checkable-grids tbody > tr:nth-child(2n-1) > td {
    background: var(--wsf-form-color-base-contrast);
}

.ff_net_table tbody tr td input[type=radio]:checked + label {
    background-color: var(--wsf-form-color-success);
    color:            var(--wsf-form-color-base-contrast);
}