.subtitle {
  color: #6b7280;
  /* text-gray-600 */
  margin-top: 0.0rem;
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

.form-container textarea,
.form-container input,
.form-container select {
  max-width: 100%;
}

#form-list-container {
    height: 70vh;
    max-height: 70vh;
    overflow-y: auto;
}

.bg-white {
  box-sizing: border-box;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.shadow {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.hover\:bg-blue-600:hover {
  background-color: #2563eb;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px #3b82f6;
}

.focus\:ring-blue-500:focus {
  box-shadow: 0 0 0 2px #3b82f6;
}

.focus\:ring-offset-2:focus {
  outline-offset: 2px;
}

.rounded-full {
  border-radius: 9999px;
}

.bg-blue-500 {
  background-color: #3b82f6;
}

.border-l-4 {
  border-left-width: 4px;
}

.mb-4 {
  margin-bottom: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.w-auto {
  width: auto;
}


.h-20 {
  height: 3rem;
}

@media (min-width: 576px) {
  .h-20 {
    height: 5rem;
  }
}

.mr-4 {
  margin-right: 1rem;
}

.text-white {
  color: #fff;
}

.rounded-md {
  border-radius: 0.375rem;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.text-green-500 {
  color: #22c55e;
}

.bg-red-100 {
  background-color: #fee2e2;
}

.text-red-700 {
  color: #b91c1c;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-x-3 {
  column-gap: 0.75rem;
}

.inline-block {
  display: inline-block;
}

@media (min-width: 768px) {
  .md\:justify-end {
    justify-content: flex-end;
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.inline-flex {
  display: inline-flex;
}

.max-w-full {
  max-width: 100%;
}

.basis-auto {
  flex-basis: auto;
}

.min-w-14ch {
  min-width: 14ch;
}

.min-w-100px {
  min-width: 100px;
}

.min-w-160px {
  min-width: 160px;
}

.min-w-200px {
  min-width: 200px;
}

.dcforms-btn-cancel {
  padding-left: 1rem;
  /* px-4 */
  padding-right: 1rem;
  padding-top: 0.5rem;
  /* py-2 */
  padding-bottom: 0.5rem;
  border: 1px solid #d1d5db;
  /* border, border-gray-300 */
  border-radius: 0.25rem;
  /* rounded */
  color: #374151;
  /* text-gray-700 */
  background: #fff;
  transition: background 0.2s;
  outline: none;
}

.dcforms-btn-cancel:hover {
  background-color: #f3f4f6;
  /* hover:bg-gray-100 */
}

.dcforms-btn-cancel:focus {
  outline: 2px solid #3b82f6;
  /* focus:outline, focus:ring-2, focus:ring-blue-500 */
  outline-offset: 2px;
  /* focus:ring-offset-2 */
}

.dcforms-btn-submit {
  flex-grow: 1;
  background-color: #3b82f6;
  /* bg-blue-500 */
  color: #fff;
  /* text-white */
  padding: 0.5rem;
  /* p-2 */
  border-radius: 0.25rem;
  /* rounded */
  border: none;
  transition: background 0.2s;
  outline: none;
}

.dcforms-btn-submit:hover {
  background-color: #2563eb;
  /* hover:bg-blue-600 */
}

.dcforms-btn-submit:focus {
  outline: 2px solid #2563eb;
  /* focus:outline, focus:ring-2, focus:ring-blue-500 */
  outline-offset: 2px;
  /* focus:ring-offset-2 */
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-x-3 {
  column-gap: 0.75rem;
  /* 12px */
}

.gap-y-1 {
  row-gap: 0.25rem;
  /* 4px */
}

.bg-white {
  background-color: #fff;
}

.p-3 {
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .md\:p-6 {
    padding: 1.5rem;
  }
}

.rounded-lg {
  border-radius: 0.5rem;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.text-gray-600 {
  color: #4b5563;
  margin-top: 0.25rem;
  /* Add this line to reduce space between title and subtitle */
}

.text-gray-500 {
  color: #6b7280;
}

.text-xs {
  font-size: 0.75rem;
  /* 12px */
  line-height: 1rem;
  /* 16px */
}

.text-base {
  font-size: 1rem;
  /* 16px */
  line-height: 1.5rem;
  /* 24px */
}

.text-lg {
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.75rem;
  /* 28px */
}

.text-xl {
  font-size: 1.25rem;
  /* 20px */
  line-height: 1.75rem;
  /* 28px */
}

.text-2xl {
  font-size: 1.5rem;
  /* 24px */
  line-height: 1.3rem;
  /* 16 * 1.3px */
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.w-full {
  width: 100%;
}

.p-2 {
  padding: 0.5rem;
  /* 8px */
}

.border {
  border: 1px solid #d1d5db;
  /* Tailwind's default border color (gray-300) */
}

.rounded {
  border-radius: 0.25rem;
  /* 4px */
}

.block {
  display: block;
}

.text-gray-400 {
  color: #9ca3af;
}

.text-gray-700 {
  color: #374151;
}

.font-bold {
  font-weight: 700;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.text-sm {
  font-size: 0.875rem;
  /* 14px */
  line-height: 1.25rem;
  /* 20px */
}



.mt-1 {
  margin-top: 0.25rem;
}

.error-text {
  /* You can add custom error styles here if needed */
  display: block;
}

.text-sm {
  font-size: 0.875rem;
  /* 14px */
  line-height: 1.25rem;
  /* 20px */
}



.hidden {
  display: none !important;
}

.gap-1 {
  gap: 0.25rem;
  /* 4px */
}

.gap-2 {
  gap: 0.5rem;
  /* 8px */
}

.w-full {
  width: 100%;
}

.p-2 {
  padding: 0.5rem;
  /* 8px */
}

.border {
  border: 1px solid #d1d5db;
  /* Tailwind's default border color (gray-300) */
}

.rounded {
  border-radius: 0.25rem;
  /* 4px */
}

.text-red-500 {
  color: #ef4444;
}

.block {
  display: block;
}


.font-bold {
  font-weight: 700;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.z-10 {
  z-index: 10;
}

.flex {
  display: flex;
}

.gap-2 {
  gap: 0.5rem;
  /* 8px */
}

.flex-wrap {
  flex-wrap: wrap;
}

.min-w-8 {
  min-width: 8px;
}

.min-w-16 {
  min-width: 16px;
}

.min-w-24 {
  min-width: 24px;
}

.min-w-32 {
  min-width: 32px;
}

.min-w-40 {
  min-width: 40px;
}

.min-w-48 {
  min-width: 48px;
}

.min-w-56 {
  min-width: 56px;
}

.min-w-60 {
  min-width: 60px;
}

.min-w-64 {
  min-width: 64px;
}

.min-w-70 {
  min-width: 70px;
}

.min-w-72 {
  min-width: 72px;
}

.min-w-80 {
  min-width: 80px;
}

.min-w-88 {
  min-width: 88px;
}

.min-w-96 {
  min-width: 96px;
}

.min-w-100 {
  min-width: 100px;
}

.min-w-160 {
  min-width: 160px;
}

.min-w-200 {
  min-width: 200px;
}

.w-16 {
  width: 4rem;
}

/* 16 x 0.25rem = 4rem = 64px */
.w-20 {
  width: 5rem;
}

/* 20 x 0.25rem = 5rem = 80px */
.w-24 {
  width: 6rem;
}

/* 24 x 0.25rem = 6rem = 96px */
.w-30 {
  width: 7.5rem;
}

/* 30 x 0.25rem = 7.5rem = 120px */
.w-40 {
  width: 10rem;
}

/* 40 x 0.25rem = 10rem = 160px */

.flex-1 {
  flex: 1 1 0%;
}

.h-20 {
  height: 5rem;
  /* 80px */
}

.w-auto {
  width: auto;
}

.items-center {
  align-items: center;
}

.mr-1 {
  margin-right: 0.25rem;
}

/* 4px */
.mr-2 {
  margin-right: 0.5rem;
}

/* 8px */
.mr-3 {
  margin-right: 0.75rem;
}


/* 16px */
.mr-5 {
  margin-right: 1.25rem;
}

/* 20px */
.mr-6 {
  margin-right: 1.5rem;
}

/* 24px */
.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1;
}

.flex-col {
  flex-direction: column;
  display: flex;
}

.dcforms-instruction {
  color: #374151;
  /* text-gray-700 */
  font-size: 0.875rem;
  /* text-sm (14px) */
  background-color: #f9fafb;
  /* bg-gray-50 */
  padding: 0.75rem;
  /* p-3 */
  border-radius: 0.375rem;
  /* rounded-md */
}



.text-2xl {
  font-size: 1.5rem;
  /* 24px */
  line-height: 2rem;
  /* 32px */
}

.text-xl {
  font-size: 1.25rem;
  /* 20px */
  line-height: 1.75rem;
  /* 28px */
}

.font-bold {
  font-weight: 700;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

/* 20px */
.mb-6 {
  margin-bottom: 1.5rem;
}

/* 24px */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.dcforms-btn-primary {
  margin-top: 1rem;
  /* mt-4 */
  background-color: #3b82f6;
  /* bg-blue-500 */
  color: #fff;
  /* text-white */
  padding: 0.5rem 1rem;
  /* p-2 */
  border-radius: 0.5rem;
  /* rounded */
  border: none;
  transition: background 0.2s;
  cursor: pointer;
}

.dcforms-btn-primary:hover {
  background-color: #2563eb;
  /* hover:bg-blue-600 */
}


/* Custom for DCForms */
.section-title {
  background-color: #DDDEDF;
  color: #111;
}

.text-required-asterisk {
  color: #b91c1c;
}

/* DCForms custom utility classes for Tailwind replacement */
.dcforms-bg {
  background: var(--bg-main, #f9f9f9);
  color: var(--color-text, #222);
}

.theme-toggle-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  background: #e5e7eb;
  color: #222;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
  font-size: 1rem;
  transition: background 0.2s;
}

.theme-toggle-btn:hover {
  background: #d1d5db;
}

.print-hidden {
  display: none !important;
}

.dcforms-lang-selector {
  position: fixed;
  top: 8rem;
  right: 1rem;
  z-index: 40;
}

.lang-toggle-btn {
  background: #e5e7eb;
  color: #222;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
  font-size: 1rem;
  transition: background 0.2s;
}

.lang-toggle-btn:hover {
  background: #d1d5db;
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 12rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  z-index: 50;
}

.lang-option {
  display: block;
  padding: 0.5rem 1rem;
  color: #222;
  text-decoration: none;
  transition: background 0.2s;
}

.lang-option:hover {
  background: #f3f4f6;
}

.dcforms-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dcforms-main {
  width: 100%;
  max-width: 48rem;
  padding: 0.5rem 0.5rem;
}

@media (min-width:640px) {
  .dcforms-main {
    padding: 1.5rem;
  }
}

.dcforms-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  margin-bottom: 1.5rem;
}

.text-center {
  text-align: center;
}

.text-red {
  color: #ef4444;
}

.dcforms-text-xl {
  font-size: 1.25rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.dcforms-group-border {
    border: 2px solid #999ca1;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #f8fafc;
}
[data-theme="dark"] .dcforms-group-border {
    border-color: #60a5fa;
    background: #23272f;
}

/* Print utility */
@media print {
  .print-hidden {
    display: none !important;
  }
}

/* Print styles (for print media) */
@media print {
  .print\:hidden {
    display: none !important;
  }

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

  .form-print-header {
    margin-bottom: 1.5rem;
  }

  /* Ensure all images in form print header are visible */
  .form-print-header img,
  .print-header-logo-group img,
  .print-logo-container img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
  }

  .form-print-field {
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }

  .form-print-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .form-print-value {
    min-height: 1.5rem;
    margin-bottom: 0.2rem;
  }

  .form-print-line {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #000;
    border-bottom: 1px solid #000;
    margin: 0;
  }

  .form-print-help {
    font-style: italic;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.25rem;
  }

  .form-print-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }

  .form-print-column {
    min-width: 180px !important;
    display: block !important;
  }

  .form-print-group {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
  }

  .checkbox-container-horizontal,
  .radio-container-horizontal {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.5rem !important;
  }

  .checkbox-container-vertical,
  .radio-container-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .form-print-checkbox-option,
  .form-print-radio-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .form-print-footer {
    margin-top: 2rem;
    text-align: right;
    font-size: 0.75rem;
    color: #666;
  }
}

/* Remove Tailwind utility selectors and replace with custom class selectors if needed */
[data-theme="dark"] .dcforms-card {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .dcforms-bg {
  background-color: #181e24 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .theme-toggle-btn,
[data-theme="dark"] .lang-toggle-btn {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .lang-dropdown {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

[data-theme="dark"] .lang-option {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .lang-option:hover {
  background: #444 !important;
}


body,
input,
textarea,
select,
button {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 100%;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  opacity: 1;
}

input,
textarea,
select {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  font-size: 1rem;
  border-radius: 0.375rem;
  /* min-height: unset; */
  /* height: unset; */
}

textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
  max-width: 100%;
  box-sizing: border-box;
}

input[type="date"] { width: auto; }
/* dcforms-has-placeholder is already defined for input/textarea: */
input.dcforms-has-placeholder,
textarea.dcforms-has-placeholder {
  padding-bottom: 4px !important;
}


/* Equivalent for: 
fixed top-4 right-4 z-50 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 
px-4 py-2 rounded-full shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none
*/
.custom-btn2 {
  position: fixed;
  top: 1rem;
  /* top-4 */
  right: 1rem;
  /* right-4 */
  z-index: 50;
  /* z-50 */
  background-color: #e5e7eb;
  /* bg-gray-200 */
  color: #1f2937;
  /* text-gray-800 */
  padding: 0.5rem 1rem;
  /* py-2 px-4 */
  border-radius: 9999px;
  /* rounded-full */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  /* shadow */
  outline: none;
  /* focus:outline-none */
  border: none;
  transition: background 0.2s;
}

.custom-btn2:hover {
  background-color: #d1d5db;
  /* hover:bg-gray-300 */
}

@media (prefers-color-scheme: dark) {
  .custom-btn2 {
    background-color: #374151;
    /* dark:bg-gray-700 */
    color: #e5e7eb;
    /* dark:text-gray-200 */
  }

  .custom-btn2:hover {
    background-color: #4b5563;
    /* dark:hover:bg-gray-600 */
  }
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.min-h-screen {
  min-height: 100vh;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3b82f6;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus {
  outline: 1.5px solid #2563eb;
  outline-offset: 0;
  box-shadow: 0 0 0 2px #bfdbfe;
}

textarea:focus,
input:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 2px #bfdbfe;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3b82f6;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.1s ease-in;
}

.skip-link:focus {
  top: 0;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .border-red-500 {
    outline: 3px solid CanvasText;
  }

  button[type="submit"],
  .hover\:bg-blue-600:hover {
    forced-color-adjust: none;
  }
}

[data-theme="dark"] {
  --bg-main: #1a1a1a;
  --bg-surface: #2d2d2d;
  --color-text: #e0e0e0;
  --color-border: #555555;
  --bg-hover: #444444;
  --bg-selected: #2c3a54;
  --color-placeholder: #555555;
}

body[data-theme="dark"],
[data-theme="dark"] body {
  background-color: var(--bg-main) !important;
  color: var(--color-text) !important;
}
body {
  margin: 0 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #222 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
  color: #c0c0c0 !important;
}

[data-theme="dark"] .border {
  border-color: #555 !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #181e24 !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: #23272f !important;
}

[data-theme="dark"] .bg-blue-500 {
  background-color: #2563eb !important;
}

[data-theme="dark"] .bg-red-100 {
  background-color: #3b1e1e !important;
}

[data-theme="dark"] .text-red-700 {
  color: #ffb4b4 !important;
}

[data-theme="dark"] .text-green-500 {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .bg-blue-600:hover {
  background-color: #1d4ed8 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #888 !important;
}

.section-title {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.5rem 1rem;
  background-color: #DDDEDF;
  color: #111;
  font-weight: bold;
  font-size: 1.1em;
  border-radius: 0.375rem;
  /* Prevent overflow */
  overflow: hidden;
  /* Optional: add word-break for long text */
  word-break: break-word;
}

[data-theme="dark"] .section-title {
  background-color: #57595B !important;
  color: #fff !important;
}

.dcforms-placeholder {
  font-size: 0.8em;
  margin-top: 0.0em;
  margin-bottom: 0.0em;
  padding-top: 0.0em;
  padding-left: 0.0em;
  color: #9ca3af;
  pointer-events: none;
  transition: opacity 0.2s;
  position: relative;
  z-index: 1;
  display: none;
}
body.show-help .dcforms-placeholder {
  display: block !important;
  color: #f59e42;
}


.text-required-asterisk {
  color: #b91c1c;
  /* dark red for light mode, better contrast */
}

[data-theme="dark"] .text-required-asterisk {
  color: #ff6b6b !important;
  /* brighter red for dark mode */
}

/* Print button styles */
#print-btn2 {
  position: fixed;
  top: 4rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #f3f4f6;
  color: #111827;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

[data-theme="dark"] #print-btn2 {
  background-color: #374151;
  color: #f3f4f6;
}

#print-btn2:hover {
  background-color: #e5e7eb;
}

[data-theme="dark"] #print-btn2:hover {
  background-color: #4b5563;
}

/* Print styles */
@media print {
  body {
    background-color: white !important;
    color: black !important;
  }

  #theme-toggle,
  #print-btn2,
  .skip-link,
  footer,
  button[type="submit"],
  #language-selector,
  a[id^="lang-"],
  [class*="Version"] {
    display: none !important;
  }

  #theme-toggle,
  #print-btn2 {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    background-color: #e5e7eb;
    color: #1f2937;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    outline: none;
    border: none;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  #theme-toggle:hover,
  #print-btn2:hover {
    background-color: #d1d5db;
  }

  @media (prefers-color-scheme: dark) {

    #theme-toggle,
    #print-btn2 {
      background-color: #374151;
      color: #e5e7eb;
    }

    #theme-toggle:hover,
    #print-btn2:hover {
      background-color: #4b5563;
    }
  }

  /* Move print button below theme toggle */
  #print-btn2 {
    top: 4rem;
  }

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

  .form-print-header {
    margin-bottom: 1.5rem;
  }

  .form-print-field {
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }

  .form-print-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .form-print-value {
    min-height: 1.5rem;
    margin-bottom: 0.2rem;
  }

  .form-print-line {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #000;
    border-bottom: 1px solid #000;
    margin: 0;
  }

  .form-print-help {
    font-style: italic;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.25rem;
  }

  .form-print-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }

  .form-print-column {
    min-width: 180px !important;
    display: block !important;
  }

  .form-print-group {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
  }

  .checkbox-container-horizontal,
  .radio-container-horizontal {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.5rem !important;
  }

  .checkbox-container-vertical,
  .radio-container-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .form-print-checkbox-option,
  .form-print-radio-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .form-print-footer {
    margin-top: 2rem;
    text-align: right;
    font-size: 0.75rem;
    color: #666;
  }
}

.ml-1 {
  margin-left: 0.25rem;
}



.language-btn {
  background-color: #e5e7eb;
  /* bg-gray-200 */
  color: #1f2937;
  /* text-gray-800 */
  padding: 0.5rem 1rem;
  /* py-2 px-4 */
  border-radius: 9999px;
  /* rounded-full */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  /* shadow */
  outline: none;
  /* focus:outline-none */
  border: none;
  display: flex;
  /* flex */
  align-items: center;
  /* items-center */
  transition: background 0.2s;
}

.language-btn:hover {
  background-color: #d1d5db;
  /* hover:bg-gray-300 */
}

@media (prefers-color-scheme: dark) {
  .language-btn {
    background-color: #374151;
    /* dark:bg-gray-700 */
    color: #e5e7eb;
    /* dark:text-gray-200 */
  }

  .language-btn:hover {
    background-color: #4b5563;
    /* dark:hover:bg-gray-600 */
  }
}

.fixed-top-lang {
  position: fixed;
  /* fixed */
  top: 10rem;
  /* top-32 (32 * 0.25rem = 8rem) */
  right: 1rem;
  /* right-4 (4 * 0.25rem = 1rem) */
  z-index: 40;
  /* z-40 */
}

@media print {
  .print-hidden {
    display: none !important;
    /* print:hidden */
  }
}

.transition-transform {
  transition-property: transform;
}

.duration-200 {
  transition-duration: 200ms;
}

.language-dropdown {
  display: none;
  /* hidden */
  position:inherit;
  /* absolute */
  top: 100%;
  /* top-full */
  right: 0;
  /* right-0 */
  margin-top: 0.5rem;
  /* mt-2 */
  width: 12rem;
  /* w-48 (48 * 0.25rem = 12rem) */
  background-color: #fff;
  /* bg-white */
  border-radius: 0.5rem;
  /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  /* shadow-lg */
  border: 1px solid #e5e7eb;
  /* border, border-gray-200 */
  overflow: hidden;
  /* overflow-hidden */
  z-index: 50;
  /* z-50 */
}

[data-theme="dark"] .language-dropdown,
@media (prefers-color-scheme: dark) {
  .language-dropdown {
    background-color: #374151 !important;
    /* dark:bg-gray-700 */
    border-color: #4b5563 !important;
    /* dark:border-gray-600 */
  }
}

.language-dropdown-link {
  display: block;
  /* block */
  padding: 0.5rem 1rem;
  /* py-2 px-4 */
  color: #1f2937;
  /* text-gray-800 */
  background: none;
  text-decoration: none;
  display: flex;
  /* flex */
  align-items: center;
  /* items-center */
  transition: background 0.2s;
}

.language-dropdown-link:hover {
  background-color: #f3f4f6;
  /* hover:bg-gray-100 */
}

@media (prefers-color-scheme: dark) {
  .language-dropdown-link {
    color: #e5e7eb;
    /* dark:text-gray-200 */
  }

  .language-dropdown-link:hover {
    background-color: #4b5563;
    /* dark:hover:bg-gray-600 */
  }
}


.ml-2 {
  margin-left: 0.5rem;
}

.language-arrow {
  transition: transform 0.2s;
  /* transition-transform */
}

.flex-center-screen {
  display: flex;
  /* flex */
  justify-content: center;
  /* justify-center */
  align-items: center;
  /* items-center */
  min-height: 100vh;
  /* min-h-screen */
  padding: 1rem;
  /* p-4 */
}

@media (max-width: 576px) {
  .flex-center-screen {
    padding: 0.1rem !important;
  }
}
.form-container {
  width: 100%;
  max-width: 48rem;
  /* 3xl = 48rem = 768px */
  padding: 0.5rem;
  /* p-2 */
  box-sizing: border-box;
}

@media (min-width: 640px) {

  /* sm: */
  .form-container {
    padding: 1.5rem;
    /* p-6 */
  }
}

.w-full {
  width: 100%;
}

.bg-white-panel {
  background-color: #fff;
  /* bg-white */
  padding: 1.5rem;
  /* p-6 */
  border-radius: 0.5rem;
  /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  /* shadow-md */
  display: flex;
  /* flex */
  justify-content: center;
  /* justify-center */
  align-items: center;
  /* items-center */
}

.text-center {
  text-align: center;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3b82f6;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 0.75rem;
}




.mb-4 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}






.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3b82f6;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Accessibility improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus {
  outline: 1.5px solid #2563eb;
  outline-offset: 0;
  box-shadow: 0 0 0 2px #bfdbfe;
}

textarea:focus,
input:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 2px #bfdbfe;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3b82f6;
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.1s ease-in;
}

.skip-link:focus {
  top: 0;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .border-red-500 {
    outline: 3px solid CanvasText;
  }

  button[type="submit"],
  .hover\:bg-blue-600:hover {
    forced-color-adjust: none;
  }
}

[data-theme="dark"] {
  --bg-main: #1a1a1a;
  --bg-surface: #2d2d2d;
  --color-text: #e0e0e0;
  --color-border: #555555;
  --bg-hover: #444444;
  --bg-selected: #2c3a54;
  --color-placeholder: #555555;
}

body[data-theme="dark"],
[data-theme="dark"] body {
  background-color: var(--bg-main) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .bg-white {
  background-color: #222 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
  color: #c0c0c0 !important;
}

[data-theme="dark"] .border {
  border-color: #555 !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #181e24 !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: #23272f !important;
}

[data-theme="dark"] .bg-blue-500 {
  background-color: #2563eb !important;
}

[data-theme="dark"] .bg-red-100 {
  background-color: #3b1e1e !important;
}

[data-theme="dark"] .text-red-700 {
  color: #ffb4b4 !important;
}

[data-theme="dark"] .text-green-500 {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .bg-blue-600:hover {
  background-color: #1d4ed8 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #23272f !important;
  color: #e0e0e0 !important;
  border-color: #555 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #888 !important;
}

.section-title {
  background-color: #DDDEDF;
  color: #111;
}

[data-theme="dark"] .section-title {
  background-color: #57595B !important;
  color: #fff !important;
}



.text-required-asterisk {
  color: #b91c1c;
  /* dark red for light mode, better contrast */
}

[data-theme="dark"] .text-required-asterisk {
  color: #ff6b6b !important;
  /* brighter red for dark mode */
}

#accessibility-bar {
  gap: 0.5rem;
  background: rgba(255,255,255,0.95);
  z-index: 50;
}
@media (max-width: 576px) {
  #accessibility-bar {
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
  }
  #accessibility-bar > * {
    margin-bottom: 0.25rem;
  }
}


/* Print button styles */
#print-btn3 {
  position: fixed;
  top: 4rem;
  right: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #e5e7eb; /* Tailwind bg-gray-200 */
  color: #1f2937;            /* Tailwind text-gray-800 */
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
[data-theme="dark"] #print-btn3 {
  background-color: #374151; /* Tailwind dark:bg-gray-700 */
  color: #e5e7eb;            /* Tailwind dark:text-gray-200 */
}
#print-btn3:hover {
  background-color: #d1d5db; /* Tailwind hover:bg-gray-300 */
}
[data-theme="dark"] #print-btn3:hover {
  background-color: #4b5563; /* Tailwind dark:hover:bg-gray-600 */
}

/* Hide help text by default, show when .show-help is on body */
.dcforms-help {
  display: none;
  color: #353433;
  font-size: 0.9em;
  margin-top: 0.25rem;
}
body.show-help .dcforms-help {
  display: block;
}

.help-toggle-btn {
  position: fixed;
  top: 6rem;           /* top-24 = 24 * 0.25rem = 6rem */
  right: 1rem;         /* right-4 = 1rem */
  z-index: 50;
  background-color: #e5e7eb;   /* bg-gray-200 */
  color: #1f2937;              /* text-gray-800 */
  padding: 0.5rem 1rem;        /* py-2 px-4 */
  border-radius: 9999px;       /* rounded-full */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin-top: 1rem;            /* mt-4 */
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  transition: background 0.2s;
}
.help-toggle-btn:hover {
  background-color: #fde68a;   /* hover:bg-yellow-300 */
}




@media (prefers-color-scheme: dark) {
  .help-toggle-btn {
    background-color: #374151; /* dark:bg-gray-700 */
    color: #e5e7eb;            /* dark:text-gray-200 */
  }
  .help-toggle-btn:hover {
    background-color: #ca8a04; /* dark:hover:bg-yellow-600 */
  }
}
/* Hide when printing */
@media print {
  .help-toggle-btn {
    display: none !important;
  }
}

/* Print styles */
@media print {
  body {
    background-color: white !important;
    color: black !important;
  }

  #theme-toggle,
  #print-btn4,
  .skip-link,
  footer,
  button[type="submit"],
  #language-selector,
  a[id^="lang-"],
  [class*="Version"] {
    display: none !important;
  }

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

  .form-print-header {
    margin-bottom: 1.5rem;
  }

  .form-print-field {
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }

  .form-print-label {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .form-print-value {
    min-height: 1.5rem;
    margin-bottom: 0.2rem;
  }

  .form-print-line {
    display: block;
    height: 1px;
    width: 100%;
    background-color: #000;
    border-bottom: 1px solid #000;
    margin: 0;
  }

  .form-print-help {
    font-style: italic;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.25rem;
  }

  .form-print-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }

  .form-print-column {
    min-width: 180px !important;
    display: block !important;
  }

  .form-print-group {
    margin-bottom: 1.5rem;
    page-break-inside: avoid;
  }

  .checkbox-container-horizontal,
  .radio-container-horizontal {
    display: flex !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.5rem !important;
  }

  .checkbox-container-vertical,
  .radio-container-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .form-print-checkbox-option,
  .form-print-radio-option {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .form-print-footer {
    margin-top: 2rem;
    text-align: right;
    font-size: 0.75rem;
    color: #666;
  }
}

/* Add to dcforms-ui.css */

/* Accessibility Bar */
#accessibility-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;  /* px-2 */
  padding-right: 0.5rem;
  padding-top: 0.5rem;   /* py-2 */
  padding-bottom: 0.5rem;
  background: rgba(255,255,255,0.95);
  z-index: 50;
  position: sticky;
  top: 0;
}

/* Responsive: wrap and reduce gap on small screens */
@media (max-width: 576px) {
  #accessibility-bar {
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
  }
  #accessibility-bar > * {
    margin-bottom: 0.25rem;
  }
}

/* Button base styles */
.custom-btn,
.language-btn,
.help-toggle-btn {
  background-color: #e5e7eb;
  color: #1f2937;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  font-size: 1rem;
}

.custom-btn:hover,
.language-btn:hover,
.help-toggle-btn:hover {
  background-color: #d1d5db;
}


/* Print button (if needed) */
#print-btn1,
#print-btn2,
#print-btn3 {
  background-color: #e5e7eb;
  color: #1f2937;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  transition: background 0.2s;
  font-size: 1rem;
}
#print-btn1:hover,
#print-btn2:hover,
#print-btn3:hover {
  background-color: #d1d5db;
}

/* Language selector dropdown */
.language-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 12rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  z-index: 50;
}
.language-dropdown-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: #1f2937;
  background: none;
  text-decoration: none;
  transition: background 0.2s;
}
.language-dropdown-link:hover {
  background-color: #f3f4f6;
}

/* Margin helpers */
.mr-1 { margin-right: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }



.pointer-events-none {
    pointer-events: none;
}

a.no-underline {
    text-decoration: none;
}

a.no-underline:hover {
    text-decoration: none;
}

/* Make inputs, textareas, selects readable in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #23272f !important;
    color: #f3f3f3 !important;
    border-color: #444 !important;
}

/* Panels and containers */
[data-theme="dark"] .border,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-100 {
    background-color: #23272f !important;
    color: #f3f3f3 !important;
    border-color: #444 !important;
}

/* Buttons */
[data-theme="dark"] button,
[data-theme="dark"] .btn,
[data-theme="dark"] .toolbox-item {
    background-color: #333 !important;
    color: #f3f3f3 !important;
    border-color: #444 !important;
}

/* Toolbox items (disabled) */
[data-theme="dark"] .toolbox-item[disabled],
[data-theme="dark"] .toolbox-item.disabled {
    background-color: #444 !important;
    color: #888 !important;
}

/* Text colors */
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: #bbb !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: #f3f3f3 !important;
}

/* Hide on print */
@media print {
  .print\:hidden,
  .print-hidden,
  #accessibility-bar,
  #language-selector,
  #theme-toggle,
  #print-btn1,
  .custom-btn,
  #help-toggle-btn {
    display: none !important;
  }
}

/* Dark mode support */
[data-theme="dark"] #accessibility-bar {
  background: #23272f !important;
}
[data-theme="dark"] .custom-btn,
[data-theme="dark"] .language-btn,
[data-theme="dark"] .help-toggle-btn {
  background-color: #374151 !important;
  color: #e5e7eb !important;
}
[data-theme="dark"] .custom-btn:hover,
[data-theme="dark"] .language-btn:hover {
  background-color: #4b5563 !important;
}
[data-theme="dark"] .help-toggle-btn:hover {
  background-color: #ca8a04 !important;
}
[data-theme="dark"] .language-dropdown {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}
[data-theme="dark"] .language-dropdown-link {
  color: #e5e7eb !important;
}
[data-theme="dark"] .language-dropdown-link:hover {
  background-color: #4b5563 !important;
}