/* styles/formio.styles.css */
/* Neo theme – scoped to your modal. Covers wizard header, sidebar list, pagination, breadcrumb. */

.formio-dialog {
  /* 🎨 Theme tokens */
  --fio-surface: #0e1b2b; /* modal bg (deep navy) */
  --fio-surface-2: #14263c; /* input bg (slightly lighter navy) */
  --fio-border: #21415d; /* input border */
  --fio-border-hover: #2a5476; /* input hover border */
  --fio-focus: 31, 139, 253; /* rgb for focus ring (blue-500) */
  --fio-fg: #e6effa; /* main text */
  --fio-muted: #8aa2ba; /* help/placeholder */
  --fio-heading: #eaf2ff; /* section headings */

  --fio-radius: 10px; /* rounded corners */
  --fio-input-h: 3.25rem; /* input height (~52px) */
  --fio-gap: 22px; /* vertical field spacing */

  --fio-accent: #22d3ee; /* cyan for active underline/dot */
  --fio-btn: #1f8bfd; /* primary button */
  --fio-btn-hover: #1b79df; /* primary hover */
  --fio-btn-fg: #ffffff; /* button text */

  --fio-err: #ef4444; /* red-500 */
  --fio-err-soft: 239, 68, 68; /* rgb for soft ring */
}

/* ===== Modal surface ===== */
.formio-dialog {
  background: var(--fio-surface) !important;
}

/* Layout and positioning styles from old project */
.formio-dialog .formio-form {
  color: var(--fio-fg) !important;
  font-family: 'Source Sans Pro', sans-serif !important;
}

.formio-dialog .formio-form * {
  font-family: 'Source Sans Pro', sans-serif !important;
}

.formio-dialog .formio-form .fa {
  font-family: 'FontAwesome' !important;
}

/* Form structure and spacing */
.formio-dialog .formio-form .form-group {
  margin-bottom: 32px !important;
  position: relative !important;
}

.formio-dialog .formio-form .formio-choices.form-group {
  margin-bottom: 0 !important;
}

.formio-dialog .formio-form .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}

.formio-dialog .formio-form .row > [class^='col'] {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ===== Section headings ===== */
.formio-dialog .formio-form h1,
.formio-dialog .formio-form h2,
.formio-dialog .formio-form h3,
.formio-dialog .formio-form .panel-title,
.formio-dialog .formio-form .card-header {
  color: var(--fio-heading) !important;
  font-weight: 700 !important;
}

.formio-dialog .formio-form .card-body {
  padding: 0 !important;
}

.formio-dialog .formio-form h1 {
  font-size: 22px !important;
  margin: 0 0 14px !important;
}
.formio-dialog .formio-form h2,
.formio-dialog .formio-form .panel-title {
  font-size: 18px !important;
  margin: 0 0 12px !important;
}

/* Section separators */
.formio-dialog .formio-form .panel,
.formio-dialog .formio-form .card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Card styling from old project */
.formio-dialog .formio-form .card-header {
  background: rgb(51 65 85) !important; /* secondary-200 */
  border-color: var(--fio-border) !important; /* Match your theme */
  padding: 16px 20px !important; /* Add padding */
  margin: 20px 0 !important; /* Add gap above and below header */
  border-radius: var(--fio-radius) !important; /* Match your theme */
}

.formio-dialog .formio-form .card-title {
  font-size: 18px !important; /* From old project */
  font-weight: 600 !important; /* From old project */
  color: white !important; /* White text for contrast */
  margin: 0 !important; /* Remove default margins */
}
.formio-dialog .formio-form .panel + .panel,
.formio-dialog .formio-form .card + .card {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 18px !important;
  margin-top: 18px !important;
}

/* ===== Labels & help ===== */
.formio-dialog .formio-form .control-label,
.formio-dialog .formio-form label,
.formio-dialog .formio-form .col-form-label {
  margin-bottom: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important; /* From old project */
  color: var(--fio-fg) !important;
  display: block !important;
  padding: 0 !important;
  margin: 8px 0 12px 0 !important; /* From old project */
}

.formio-dialog .formio-form .col-form-label:first-child {
  margin-top: 0 !important;
}

.formio-dialog .formio-form .formio-component-container > label:first-child {
  font-size: 18px !important; /* From old project */
}
.formio-dialog .formio-form .form-text,
.formio-dialog .formio-form .help-block,
.formio-dialog .formio-form .text-muted {
  color: var(--fio-muted) !important;
  font-size: 13px !important;
}

/* ===== Inputs ===== */
.formio-dialog .formio-form input:not([type='checkbox']):not([type='radio']),
.formio-dialog .formio-form select,
.formio-dialog .formio-form textarea,
.formio-dialog .formio-form .form-control {
  width: 100% !important;
  min-height: 50px !important; /* From old project */
  /* height: 50px !important; */ /* From old project - disabled */
  background: var(--fio-surface-2) !important;
  color: var(--fio-fg) !important;
  border: 1px solid var(--fio-border) !important;
  border-radius: var(--fio-radius) !important;
  padding: 15px 13px !important; /* From old project */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease !important;
}

/* Special input styles from old project */
.formio-dialog .formio-form .form-control.selection {
  padding: 4px 13px !important;
}

.formio-dialog .formio-form textarea.form-control {
  height: auto !important;
  min-height: 120px !important;
}
.formio-dialog .formio-form textarea {
  min-height: 120px !important;
  height: auto !important;
}
.formio-dialog .formio-form ::placeholder {
  color: var(--fio-muted) !important;
}
.formio-dialog .formio-form input:hover,
.formio-dialog .formio-form select:hover,
.formio-dialog .formio-form textarea:hover,
.formio-dialog .formio-form .form-control:hover {
  border-color: var(--fio-border-hover) !important;
}
.formio-dialog .formio-form input:focus,
.formio-dialog .formio-form select:focus,
.formio-dialog .formio-form textarea:focus,
.formio-dialog .formio-form .form-control:focus {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(var(--fio-focus), 0.55) !important;
}
.formio-dialog .formio-form .form-group {
  margin-bottom: var(--fio-gap) !important;
}
.formio-dialog .formio-form .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
}
.formio-dialog .formio-form .row > [class^='col'] {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ===== Buttons ===== */
.formio-dialog .formio-form .btn {
  border-radius: var(--fio-radius) !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  border: none !important;
}

/* Button container for horizontal alignment */
.formio-dialog .formio-form .btn-group,
.formio-dialog .formio-form .wizard-nav,
.formio-dialog .formio-form .form-actions,
.formio-dialog .formio-form .wizard-page .btn-group,
.formio-dialog .formio-form .wizard-page .wizard-nav,
.formio-dialog .formio-form .wizard-page .form-actions,
.formio-dialog .formio-form .wizard-page .btn-toolbar,
.formio-dialog .formio-form .wizard-page .form-buttons,
.formio-dialog .formio-form .wizard-page .button-group,
.formio-dialog .formio-form .wizard-page .navigation-buttons,
.formio-dialog .formio-form .wizard-page .step-buttons,
.formio-dialog .formio-form .wizard-page .wizard-buttons,
.formio-dialog .formio-form .wizard-page .formio-buttons,
.formio-dialog .formio-form .wizard-page .formio-wizard-buttons,
.formio-dialog .formio-form .wizard-page .formio-wizard-nav,
.formio-dialog .formio-form .wizard-page .formio-wizard-navigation,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .btn-group,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .wizard-nav,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .form-actions,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .btn-toolbar,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .form-buttons,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .button-group,
.formio-dialog
  .formio-form
  .wizard-page
  .formio-wizard-controls
  .navigation-buttons,
.formio-dialog .formio-form .wizard-page .formio-wizard-controls .step-buttons,
.formio-dialog
  .formio-form
  .wizard-page
  .formio-wizard-controls
  .wizard-buttons,
.formio-dialog
  .formio-form
  .wizard-page
  .formio-wizard-controls
  .formio-buttons,
.formio-dialog
  .formio-form
  .wizard-page
  .formio-wizard-controls
  .formio-wizard-buttons,
.formio-dialog
  .formio-form
  .wizard-page
  .formio-wizard-controls
  .formio-wizard-nav,
.formio-dialog
  .formio-form
  .wizard-page
  .formio-wizard-controls
  .formio-wizard-navigation {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* Wizard navigation container positioning from old project */
.formio-dialog .formio-form .formio-wizard-nav-container {
  margin-top: 44px !important; /* From old project */
}

.formio-dialog .formio-form .formio-wizard-nav-container li:first-child {
  display: none !important; /* From old project */
}

.formio-dialog .formio-form .formio-wizard-nav-container li {
  flex: 1 !important; /* From old project */
}

.formio-dialog .formio-form .formio-wizard-nav-container li:nth-child(2n-1) {
  text-align: left !important; /* From old project */
}

.formio-dialog .formio-form .formio-wizard-nav-container li:nth-child(2n) {
  text-align: right !important; /* From old project */
}

.formio-dialog .formio-form .formio-wizard-nav-container li:last-child {
  margin-right: 0 !important; /* From old project */
}

/* Force all button containers to be horizontal */
.formio-dialog .formio-form .wizard-page > div:has(.btn),
.formio-dialog .formio-form .wizard-page > div:has(.btn-wizard-nav-next),
.formio-dialog .formio-form .wizard-page > div:has(.btn-wizard-nav-previous),
.formio-dialog .formio-form .wizard-page > div:has(.btn-wizard-nav-submit) {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 24px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.formio-dialog .formio-form .btn-wizard-nav-next,
.formio-dialog .formio-form .btn-wizard-nav-submit,
.formio-dialog .formio-form .btn-primary {
  background: var(--fio-btn) !important; /* Back to your theme */
  color: var(--fio-btn-fg) !important;
  border-radius: var(--fio-radius) !important; /* Back to your theme */
  height: 50px !important; /* From old project */
  width: 100% !important; /* From old project */
  display: block !important; /* From old project */
  border: 0 !important;
  padding: 10px !important; /* From old project */
  font-weight: 600 !important;
  margin-left: auto !important; /* From old project */
  box-shadow: none !important;
}

/* Button layout and positioning from old project */
.formio-dialog .formio-form .btn-wizard-nav-previous,
.formio-dialog .formio-form .btn-wizard-nav-next,
.formio-dialog .formio-form .btn-wizard-nav-submit {
  border-radius: var(--fio-radius) !important; /* Back to your theme */
  height: 50px !important; /* From old project */
  width: 100% !important; /* From old project */
  display: block !important; /* From old project */
  border: 0 !important;
  padding: 10px !important; /* From old project */
  font-weight: 600 !important;
}

.formio-dialog .formio-form .btn-wizard-nav-previous {
  margin-right: auto !important; /* From old project */
  background: transparent !important; /* Back to your theme */
  color: var(--fio-fg) !important; /* Back to your theme */
  border: 1px solid rgba(255, 255, 255, 0.18) !important; /* Back to your theme */
}

.formio-dialog .formio-form .btn-wizard-nav-cancel {
  display: none !important; /* From old project */
}
.formio-dialog .formio-form .btn-wizard-nav-next:hover,
.formio-dialog .formio-form .btn-wizard-nav-submit:hover,
.formio-dialog .formio-form .btn-primary:hover {
  background: var(--fio-btn-hover) !important;
}
.formio-dialog .formio-form .btn-wizard-nav-previous,
.formio-dialog .formio-form .btn-secondary,
.formio-dialog .formio-form .btn-default {
  background: transparent !important;
  color: var(--fio-fg) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.formio-dialog .formio-form .btn-wizard-nav-previous:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Ensure buttons are inline and not stacked */
.formio-dialog .formio-form .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Force button containers to be horizontal */
.formio-dialog .formio-form .wizard-page > *:has(.btn),
.formio-dialog .formio-form .wizard-page > *:has(.btn-wizard-nav-next),
.formio-dialog .formio-form .wizard-page > *:has(.btn-wizard-nav-previous),
.formio-dialog .formio-form .wizard-page > *:has(.btn-wizard-nav-submit),
.formio-dialog .formio-form .wizard-page > *:has(.btn-primary),
.formio-dialog .formio-form .wizard-page > *:has(.btn-secondary) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
}

/* Target the specific Form.io wizard navigation container */
.formio-dialog .formio-form .formio-wizard-nav-container,
.formio-dialog .formio-form .formio-wizard-nav-container.list-inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 24px 0 0 0 !important;
}

/* Target the list items inside the navigation container */
.formio-dialog .formio-form .formio-wizard-nav-container li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Ensure buttons inside the navigation container are properly spaced */
.formio-dialog .formio-form .formio-wizard-nav-container .btn {
  margin-right: 10px !important;
  margin-bottom: 0 !important;
  display: inline-block !important;
  float: none !important;
}

/* Remove margin from the last button */
.formio-dialog .formio-form .formio-wizard-nav-container .btn:last-child,
.formio-dialog .formio-form .formio-wizard-nav-container li:last-child .btn {
  margin-right: 0 !important;
}

/* ===== Checkboxes & radios ===== */
.formio-dialog .formio-form .checkbox,
.formio-dialog .formio-form .radio {
  margin-bottom: 16px !important;
}

.formio-dialog .formio-form .checkbox label,
.formio-dialog .formio-form .radio label {
  color: var(--fio-fg) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide default checkbox/radio */
.formio-dialog .formio-form input[type='checkbox'],
.formio-dialog .formio-form input[type='radio'] {
  position: absolute !important;
  opacity: 0 !important;
  cursor: pointer !important;
  height: 0 !important;
  width: 0 !important;
}

/* Custom checkbox */
.formio-dialog .formio-form .checkbox label::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--fio-border) !important;
  border-radius: 4px !important;
  background: var(--fio-surface-2) !important;
  transition: all 200ms ease !important;
  flex-shrink: 0 !important;
}

.formio-dialog
  .formio-form
  .checkbox
  input[type='checkbox']:checked
  + label::before {
  background: var(--fio-btn) !important;
  border-color: var(--fio-btn) !important;
}

.formio-dialog
  .formio-form
  .checkbox
  input[type='checkbox']:checked
  + label::after {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.formio-dialog
  .formio-form
  .checkbox
  input[type='checkbox']:focus
  + label::before {
  border-color: var(--fio-btn) !important;
  box-shadow: 0 0 0 2px rgba(var(--fio-focus), 0.3) !important;
}

.formio-dialog .formio-form .checkbox label:hover::before {
  border-color: var(--fio-border-hover) !important;
}

/* Custom radio */
.formio-dialog .formio-form .radio label::before {
  content: '' !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--fio-border) !important;
  border-radius: 50% !important;
  background: var(--fio-surface-2) !important;
  transition: all 200ms ease !important;
  flex-shrink: 0 !important;
}

.formio-dialog .formio-form .radio input[type='radio']:checked + label::before {
  border-color: var(--fio-btn) !important;
  background: var(--fio-btn) !important;
}

.formio-dialog .formio-form .radio input[type='radio']:focus + label::before {
  border-color: var(--fio-btn) !important;
  box-shadow: 0 0 0 2px rgba(var(--fio-focus), 0.3) !important;
}

.formio-dialog .formio-form .radio label:hover::before {
  border-color: var(--fio-border-hover) !important;
}

/* ===== Errors ===== */
.formio-dialog .formio-form .is-invalid,
.formio-dialog .formio-form .has-error .form-control {
  border-color: var(--fio-err) !important;
  box-shadow: 0 0 0 2px rgba(var(--fio-err-soft), 0.35) !important;
}
.formio-dialog .formio-form .formio-errors,
.formio-dialog .formio-form .formio-error-wrapper .error,
.formio-alert-danger {
  color: #fca5a5 !important;
  font-size: 13px !important;
}

/* Hide the error list at the top of the form */
.formio-dialog .formio-form .alert.alert-danger,
.formio-dialog .alert.alert-danger,
.formio-dialog .formio-form #error-list-eh70pp,
.formio-dialog .formio-form [id^='error-list-'],
.formio-dialog .alert,
.formio-dialog .formio-form .alert {
  display: none !important;
}

/* Remove error wrapper styling - don't show big box around inputs */
.formio-dialog .formio-form .formio-error-wrapper {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Keep individual error messages but style them minimally */
.formio-dialog .formio-form .formio-error-wrapper .form-control {
  background: var(--fio-surface-2) !important;
  border-color: var(--fio-err) !important;
  box-shadow: 0 0 0 2px rgba(var(--fio-err-soft), 0.35) !important;
}

/* ===== Choices.js / Select ===== */
.formio-dialog .choices__inner {
  background: var(--fio-surface-2) !important;
  color: var(--fio-fg) !important;
  border-color: var(--fio-border) !important;
  border-radius: var(--fio-radius) !important;
  min-height: var(--fio-input-h) !important;
  display: flex !important;
  align-items: center !important;
  padding: 15px 13px !important;
}

.formio-dialog .choices__item {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  min-height: 50px !important;
}

.formio-dialog .choices__item span {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.formio-dialog .choices__list--single .choices__item {
  padding: 0 !important;
  margin: 0 !important;
}

.formio-dialog .choices__list--dropdown {
  background: #0c1927 !important;
  border: 1px solid var(--fio-border) !important;
  border-radius: 10px !important;
}

/* Choices.js hover and active states */
.formio-dialog .choices__item--selectable:hover {
  background: none !important;
}

.formio-dialog .choices__item--selectable.is-highlighted {
  background: var(--fio-accent) !important;
}
==== */ .formio-dialog .ql-toolbar {
  background: #112338 !important;
  border: 1px solid var(--fio-border) !important;
  border-radius: 10px 10px 0 0 !important;
}
.formio-dialog .ql-container {
  background: var(--fio-surface-2) !important;
  color: var(--fio-fg) !important;
  border: 1px solid var(--fio-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px !important;
}

/* ===== Hide input-group-text elements ===== */
.formio-dialog .input-group-text {
  display: none !important;
}

/* ===== Hide visually-hidden spans with "numeric only" text ===== */
.formio-dialog .visually-hidden {
  display: none !important;
}

/* ===== Hide autocomplete input visually but keep functionality ===== */
.formio-dialog .formio-select-autocomplete-input {
  position: absolute !important;
  z-index: -1 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== HTML Element Component Spacing ===== */
.formio-dialog .formio-component-htmlelement p,
.formio-dialog .formio-component-htmlelement h4 {
  margin-bottom: 16px !important;
  font-weight: 600 !important;
}

/* ===== Signature Pad ===== */
.formio-dialog .signature-pad-refresh {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 10 !important;
  background: transparent !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 1 !important;
}

.formio-dialog .signature-pad-refresh:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #000000 !important;
}

/* Reset icon using CSS - circular arrow */
.formio-dialog .signature-pad-refresh::before {
  content: '↻' !important;
  font-size: 18px !important;
  font-weight: bold !important;
  display: block !important;
}

.formio-dialog .formio-component-columns28 .col-md-6 {
  width: 50% !important;
  flex: 0 0 40% !important;
  max-width: 50% !important;
  box-sizing: border-box !important;
}

.formio-dialog .formio-component-columns28 .col-md-6:first-child {
  padding-left: 0 !important;
}

.formio-dialog .formio-component-columns28 .col-md-6:last-child {
  padding-right: 0 !important;
}

/* Ensure the container doesn't overflow */
.formio-dialog .formio-component-columns28 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix Bootstrap row negative margins that cause overflow */
.formio-dialog .formio-component-columns28.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure columns don't have negative margins */
.formio-dialog .formio-component-columns28 .col-md-6 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =====================================================================
   WIZARD NAV: convert sidebar list to horizontal tabs w/ dot + underline
   (supports: sidebar .list-group, header .pagination, and .nav)
   ===================================================================== */

/* 0) Cover both wrappers (your app & legacy) */
.formio-dialog .formio-wizard .row,
#dynamic-form .pagination /* legacy wizard header */ {
  /* leave as-is here; we restyle specific bits below */
}

/* 1) If Form.io renders a sidebar (list-group or nav) inside a Bootstrap row,
      stack nav on top, content below */
.formio-dialog .formio-wizard .row,
.formio-dialog .formio-form .formio-wizard .row {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.formio-dialog .formio-wizard .row > [class^='col'],
.formio-dialog .formio-wizard .row > [class*=' col'] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}
.formio-dialog .formio-wizard-nav-container,
.formio-dialog .formio-wizard .list-group,
.formio-dialog .formio-wizard .nav {
  order: 0 !important;
}
.formio-dialog .formio-wizard-page,
.formio-dialog .formio-wizard .tab-content,
.formio-dialog .formio-wizard .wizard-page {
  order: 1 !important;
}

/* Divider under the nav */
.formio-dialog .formio-wizard-nav-container {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0 8px 8px !important;
  margin: 0 0 8px !important;
}

/* 2) Normalize any nav list into one horizontal row */
.formio-dialog .formio-wizard-nav-container .list-group,
.formio-dialog .formio-wizard-nav-container .nav,
.formio-dialog .formio-wizard-header .pagination,
#dynamic-form .pagination /* legacy */ {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  list-style: none !important;
  border: 0 !important;
}

/* 3) Items must flex and drop default list styles */
.formio-dialog .formio-wizard-nav-container .list-group-item,
.formio-dialog .formio-wizard-nav-container .nav-item,
.formio-dialog .formio-wizard-header .page-item,
#dynamic-form .pagination .page-item /* legacy */ {
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* Remove the last connector bar if present (legacy) */
#dynamic-form .pagination .page-item:last-child {
  flex: initial !important;
}

/* 4) Clickable label (works for <a>, <span>, or plain item) */
.formio-dialog .formio-wizard-nav-container .list-group-item,
.formio-dialog .formio-wizard-nav-container .nav-link,
.formio-dialog .formio-wizard-nav-container .nav-item > a,
.formio-dialog .formio-wizard-header .page-item .page-link,
.formio-dialog .formio-wizard-header .page-item > a.page-link,
.formio-dialog .formio-wizard-header .page-item > span.page-link,
#dynamic-form .pagination .page-link /* legacy */ {
  position: relative !important;
  display: inline-block !important;
  min-width: 110px !important;
  color: var(--fio-muted) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 18px 0 12px !important; /* room for dot + underline */
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transition: color 160ms ease !important;
}
.formio-dialog .formio-wizard-nav-container .list-group-item:hover,
.formio-dialog .formio-wizard-nav-container .nav-link:hover,
.formio-dialog .formio-wizard-header .page-item .page-link:hover,
#dynamic-form .pagination .page-link:hover {
  color: var(--fio-fg) !important;
}

/* 5) Connector line between steps (subtle) */
.formio-dialog .formio-wizard-nav-container .list-group-item::after,
.formio-dialog .formio-wizard-header .page-item::after,
#dynamic-form .pagination .page-item::after /* legacy */ {
  content: '' !important;
  flex: 1 1 auto !important;
  height: 2px !important;
  margin-left: 20px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.formio-dialog .formio-wizard-nav-container .list-group-item:last-child::after,
.formio-dialog .formio-wizard-header .page-item:last-child::after,
#dynamic-form .pagination .page-item:last-child::after {
  display: none !important;
}

/* 6) Dot above each item (muted by default) */
.formio-dialog .formio-wizard-nav-container .list-group-item::before,
.formio-dialog .formio-wizard-nav-container .nav-link::before,
.formio-dialog .formio-wizard-header .page-item .page-link::before,
#dynamic-form .pagination .page-link::before /* legacy */ {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  z-index: 1 !important;
}

/* 7) Underline (off by default) */
.formio-dialog .formio-wizard-nav-container .list-group-item::after,
.formio-dialog .formio-wizard-nav-container .nav-link::after,
.formio-dialog .formio-wizard-header .page-item .page-link::after,
#dynamic-form .pagination .page-link::after /* legacy */ {
  /* NOTE: we already used ::after for connectors on items.
     For links we add a separate underline element using the link pseudo */
}
.formio-dialog .formio-wizard-nav-container .nav-link::after,
.formio-dialog .formio-wizard-header .page-item .page-link::after,
#dynamic-form .pagination .page-link::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
}

/* 8) ACTIVE state: bright dot + cyan underline + stronger label */
.formio-dialog .formio-wizard-nav-container .list-group-item.active,
.formio-dialog .formio-wizard-nav-container .nav-link.active,
.formio-dialog .formio-wizard-nav-container .nav-item.active > .nav-link,
.formio-dialog .formio-wizard-nav-container [aria-selected='true'],
.formio-dialog .formio-wizard-header .page-item.active .page-link,
#dynamic-form .pagination .page-item.active .page-link /* legacy */ {
  color: var(--fio-fg) !important;
}
.formio-dialog .formio-wizard-nav-container .list-group-item.active::before,
.formio-dialog .formio-wizard-nav-container .nav-link.active::before,
.formio-dialog
  .formio-wizard-nav-container
  .nav-item.active
  > .nav-link::before,
.formio-dialog .formio-wizard-nav-container [aria-selected='true']::before,
.formio-dialog .formio-wizard-header .page-item.active .page-link::before,
#dynamic-form .pagination .page-item.active .page-link::before {
  background: var(--fio-accent) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18) !important;
}
.formio-dialog .formio-wizard-nav-container .nav-link.active::after,
.formio-dialog .formio-wizard-header .page-item.active .page-link::after,
#dynamic-form .pagination .page-item.active .page-link::after {
  background: var(--fio-accent) !important;
}

/* Extra breathing room below nav */
.formio-dialog .formio-wizard-nav-container + * {
  margin-top: 6px !important;
}

/* ===== Breadcrumb (optional component) ===== */
.formio-dialog .breadcrumb {
  --bs-breadcrumb-divider: '›';
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex !important;
  gap: 24px !important;
  align-items: center !important;
  list-style: none !important;
}
.formio-dialog .breadcrumb-item,
.formio-dialog .breadcrumb-item a {
  color: var(--fio-muted) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 18px 0 10px !important; /* dot + underline space */
  text-transform: uppercase !important;
}
.formio-dialog .breadcrumb-item a:hover {
  color: var(--fio-fg) !important;
}
.formio-dialog .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.25) !important;
}
.formio-dialog .breadcrumb-item a::before {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.28) !important;
}
.formio-dialog .breadcrumb-item a::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
}
.formio-dialog .breadcrumb-item.active,
.formio-dialog .breadcrumb-item.active a {
  color: var(--fio-fg) !important;
}
.formio-dialog .breadcrumb-item.active a::before {
  background: var(--fio-accent) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18) !important;
}
.formio-dialog .breadcrumb-item.active a::after {
  background: var(--fio-accent) !important;
}

/* =============================
   WIZARD HEADER (from your DOM)
   <nav aria-label="Wizard navigation"><ul class="pagination">…</ul></nav>
   ============================= */

/* container + spacing under the tabs */
.formio-dialog nav[aria-label='Wizard navigation'] {
  border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
  padding: 10px 0px 5px !important;
  margin: 0px 0 32px !important;
}

/* horizontal list */
.formio-dialog nav[aria-label='Wizard navigation'] .pagination {
  display: flex !important;
  align-items: flex-start !important;
  gap: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
  scrollbar-width: thin !important; /* Firefox - show thin scrollbar */
  -ms-overflow-style: auto !important; /* IE and Edge - show scrollbar */
  scroll-behavior: smooth !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* Show scrollbar for Chrome, Safari and Opera */
.formio-dialog
  nav[aria-label='Wizard navigation']
  .pagination::-webkit-scrollbar {
  height: 6px !important;
  display: block !important;
}

.formio-dialog
  nav[aria-label='Wizard navigation']
  .pagination::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
}

.formio-dialog
  nav[aria-label='Wizard navigation']
  .pagination::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 3px !important;
}

.formio-dialog
  nav[aria-label='Wizard navigation']
  .pagination::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* items flex across, provide connector line between steps */
.formio-dialog nav[aria-label='Wizard navigation'] .page-item {
  position: relative !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  cursor: default !important;
  border: 0 !important;
  background: transparent !important;
  min-width: 140px !important;
  max-width: 200px !important;
}

/* Connector line between steps */
.formio-dialog nav[aria-label='Wizard navigation'] .page-item::after {
  content: '' !important;
  position: absolute !important;
  top: 8px !important; /* align with the dot */
  left: 50% !important; /* start from center of current step */
  width: 40px !important; /* width to reach the middle between dots */
  height: 2px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  z-index: 0 !important;
  transform: translateX(70px) !important; /* default: move right by 80px */
}

/* First connector line: translate by 70px */
.formio-dialog
  nav[aria-label='Wizard navigation']
  .page-item:first-child::after {
  transform: translateX(80px) !important;
}

/* Hide connector on last item */
.formio-dialog
  nav[aria-label='Wizard navigation']
  .page-item:last-child::after {
  display: none !important;
}

/* the clickable label (it's a <button class="page-link"> in your DOM) */
.formio-dialog nav[aria-label='Wizard navigation'] .page-link {
  -webkit-appearance: none !important; /* reset Safari button look */
  appearance: none !important;
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 18px 0 12px !important; /* top space for dot, bottom for underline */
  min-width: 140px !important;
  max-width: 200px !important;

  color: var(--fio-muted) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  cursor: default !important; /* Change cursor to default */
  transition: color 160ms ease !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  pointer-events: none !important; /* Make buttons non-clickable */
}
.formio-dialog
  nav[aria-label='Wizard navigation']
  .page-item:not(.active)
  .page-link:hover {
  color: var(--fio-fg) !important;
}

/* DOT above each step */
.formio-dialog nav[aria-label='Wizard navigation'] .page-link::before {
  content: '' !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.28) !important; /* default muted dot */
  z-index: 1 !important;
}

/* UNDERLINE (off by default) */
.formio-dialog nav[aria-label='Wizard navigation'] .page-link::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
}

/* ACTIVE step: brighter label + cyan dot + cyan underline */
.formio-dialog
  nav[aria-label='Wizard navigation']
  .page-item.active
  .page-link {
  color: var(--fio-fg) !important;
}
.formio-dialog
  nav[aria-label='Wizard navigation']
  .page-item.active
  .page-link::before {
  background: var(--fio-accent) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18) !important; /* soft glow around the dot */
}
.formio-dialog
  nav[aria-label='Wizard navigation']
  .page-item.active
  .page-link::after {
  background: var(--fio-accent) !important;
}

/* responsive: maintain horizontal scroll on all screen sizes */
@media (max-width: 640px) {
  .formio-dialog nav[aria-label='Wizard navigation'] .pagination {
    gap: 24px !important;
  }
  .formio-dialog nav[aria-label='Wizard navigation'] .page-item {
    flex: 0 0 auto !important;
    min-width: 120px !important;
  }
}

/* Responsive styles from old project */
@media screen and (max-width: 600px) {
  .formio-dialog .formio-form .form-radio {
    grid-template-columns: auto !important; /* From old project */
  }

  .formio-dialog .formio-form .pagination {
    margin-bottom: 45px !important; /* From old project */
  }

  .formio-dialog .formio-form .pagination .page-link {
    white-space: initial !important; /* From old project */
    font-size: 12px !important; /* From old project */
  }
}