/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
.activity-report-card, .activity-category-card {
  --activity-border: #e5e7eb;
  --activity-muted: #64748b;
  --activity-surface: #fff;
  --activity-ink: #0f172a;
  color: var(--activity-ink);
  background: var(--activity-surface);
  border: 1px solid var(--activity-border);
  border-radius: 1rem;
}
.activity-report-card {
  padding: 1.2rem 1.35rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 7%);
}
.activity-report-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.activity-report-header h2 {
  margin: 0;
  color: var(--activity-ink);
  font-size: 1.15rem;
  font-weight: 750;
}
.activity-report-header p {
  margin: .35rem 0 0;
  color: var(--activity-muted);
  font-size: .82rem;
}
.activity-report-header h2 a {
  color: inherit;
  text-decoration: none;
}
.activity-report-header h2 a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.activity-report-all-link, .activity-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid #bfdbfe;
  border-radius: .7rem;
  padding: .5rem .75rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.activity-report-all-link:hover, .activity-back-button:hover {
  background: #dbeafe;
  box-shadow: 0 3px 10px rgb(37 99 235 / 12%);
  transform: translateY(-1px);
}
.activity-report-link-icon {
  width: 1rem;
  height: 1rem;
}
.activity-report-tabs {
  display: flex;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 1rem 0 .65rem;
  padding: .28rem;
  gap: .28rem;
  border: 1px solid var(--activity-border);
  border-radius: .85rem;
  background: var(--activity-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--activity-surface) 90%, #64748b);
  }
}
.activity-report-tab {
  position: relative;
  display: flex;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: .62rem;
  padding: .5rem .4rem;
  background: transparent;
  color: var(--activity-muted);
  font: inherit;
  font-size: .77rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.activity-report-tab:hover {
  background: var(--activity-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--activity-surface) 70%, #dbeafe);
  }
  color: #1d4ed8;
}
.activity-report-tab.is-active {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  box-shadow: 0 2px 7px rgb(15 23 42 / 12%);
}
.activity-report-tab.is-active::after {
  position: absolute;
  right: 16%;
  bottom: .12rem;
  left: 16%;
  height: 2px;
  border-radius: 2px;
  background: #3b82f6;
  content: '';
}
.activity-report-tab:disabled {
  cursor: progress;
  opacity: .72;
}
.activity-report-tab:focus-visible, .activity-category-card:focus-visible, .activity-back-button:focus-visible, .activity-report-all-link:focus-visible, .activity-page-button:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 3px;
}
.activity-report-loading {
  align-items: center;
  gap: .45rem;
  min-height: 1.6rem;
  color: var(--activity-muted);
  font-size: .72rem;
}
.activity-report-loading-icon {
  width: .9rem;
  height: .9rem;
  color: #3b82f6;
  animation: activity-report-spin .9s linear infinite;
}
@keyframes activity-report-spin {
  to {
    transform: rotate(360deg);
  }
}
.activity-timeline-scroll {
  display: block;
  height: min(22rem, 44vh);
  min-height: 0;
  max-height: 22rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}
.activity-timeline-scroll:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 2px;
}
.activity-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-height: 4rem;
  padding: .55rem 0;
}
.activity-timeline-item:not(:last-child)::before {
  position: absolute;
  top: calc(50% + .95rem);
  right: 1.11rem;
  height: calc(100% - .5rem);
  border-right: 2px dotted #cbd5e1;
  content: '';
}
.activity-timeline-marker {
  z-index: 1;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid #dbeafe;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
}
.activity-timeline-marker.is-login {
  border-color: #bbf7d0;
  background: #dcfce7;
  color: #15803d;
}
.activity-timeline-marker.is-order {
  border-color: #e9d5ff;
  background: #f3e8ff;
  color: #7e22ce;
}
.activity-timeline-icon {
  width: 1.05rem;
  height: 1.05rem;
}
.activity-timeline-content {
  min-width: 0;
}
.activity-timeline-action {
  margin: 0;
  color: #2563eb;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.activity-timeline-action.is-login {
  color: #15803d;
}
.activity-timeline-action.is-order {
  color: #7e22ce;
}
.activity-timeline-actor {
  margin: .08rem 0 0;
  color: var(--activity-ink);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.activity-timeline-time {
  display: inline-block;
  margin-top: .08rem;
  color: var(--activity-muted);
  font-size: .66rem;
}
.activity-report-state {
  display: flex;
  min-height: 9rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: var(--activity-muted);
  text-align: center;
}
.activity-report-state strong {
  color: var(--activity-ink);
  font-weight: 700;
}
.activity-report-state span {
  max-width: 28rem;
  font-size: .82rem;
}
.activity-report-state-icon {
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: .15rem;
  color: #94a3b8;
}
.activity-reports-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  min-width: 0;
}
.activity-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}
.activity-category-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .85rem;
  padding: 1.05rem;
  text-align: right;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.activity-category-card:hover {
  border-color: var(--primary-300, #93c5fd);
  box-shadow: 0 5px 18px rgb(15 23 42 / 8%);
  transform: translateY(-1px);
}
.activity-category-icon {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .8rem;
  background: #eff6ff;
  color: #2563eb;
}
.activity-category-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}
.activity-category-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: .25rem;
}
.activity-category-copy strong {
  color: var(--activity-ink);
  font-size: .86rem;
}
.activity-category-copy small {
  color: var(--activity-muted);
  font-size: .74rem;
  line-height: 1.55;
}
.activity-category-chevron {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: #94a3b8;
}
.activity-back-button {
  color: #1d4ed8;
}
.activity-back-button svg {
  width: 1rem;
  height: 1rem;
}
.activity-report-kind-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-kind-icon {
  background: #f5f3ff;
  color: #7c3aed;
}
.activity-detail-header {
  align-items: center;
  margin-bottom: .9rem;
}
.activity-report-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding-top: .9rem;
  border-top: 1px solid var(--activity-border);
  color: var(--activity-muted);
  font-size: .8rem;
}
.activity-report-pagination small {
  color: var(--activity-muted);
}
.activity-page-button {
  padding: .42rem .75rem;
  border: 1px solid var(--activity-border);
  border-radius: .6rem;
  background: var(--activity-surface);
  color: var(--activity-ink);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.activity-page-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.activity-report-scroll-hint {
  margin: -.25rem 0 .55rem;
  color: var(--activity-muted);
  font-size: .72rem;
}
.activity-report-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}
.activity-report-table-scroll:focus-visible {
  outline: 2px solid var(--primary-500, #3b82f6);
  outline-offset: 3px;
}
.activity-report-table {
  width: 100%;
  min-width: 70rem;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--activity-ink);
  font-size: .74rem;
  text-align: right;
}
.activity-report-table th, .activity-report-table td {
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--activity-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.activity-report-table th {
  position: sticky;
  top: 0;
  background: var(--activity-surface);
  color: var(--activity-muted);
  font-size: .73rem;
  font-weight: 700;
  white-space: nowrap;
}
.activity-report-table tbody tr:last-child td {
  border-bottom: 0;
}
.activity-report-table-time {
  display: block;
  min-width: 8.5rem;
  white-space: nowrap;
}
.activity-report-table-action, .activity-report-table-actor {
  display: grid;
  justify-items: start;
  gap: .3rem;
}
.activity-report-table-action strong, .activity-report-table-actor strong {
  font-weight: 700;
}
.activity-report-table-actor > span {
  color: var(--activity-muted);
  font-size: .68rem;
}
.activity-report-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .12rem .45rem;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .68rem;
  white-space: nowrap;
}
.activity-report-table-description {
  min-width: 18rem;
  white-space: pre-line;
  line-height: 1.65;
}
.activity-report-table-description p {
  margin: 0;
}
.activity-report-table th:nth-child(1) {
  min-width: 10rem;
}
.activity-report-table th:nth-child(2) {
  min-width: 12rem;
}
.activity-report-table th:nth-child(3) {
  min-width: 12rem;
}
.activity-report-table th:nth-child(4) {
  min-width: 12rem;
}
.activity-report-table th:nth-child(5) {
  min-width: 10rem;
}
.activity-report-facts {
  display: grid;
  gap: .32rem;
  margin-top: .5rem;
}
.activity-report-facts > div {
  display: flex;
  gap: .55rem;
}
.activity-report-facts dt {
  color: var(--activity-muted);
}
.activity-report-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
html.dark .activity-report-card, html.dark .activity-category-card {
  --activity-border: #334155;
  --activity-muted: #94a3b8;
  --activity-surface: #111827;
  --activity-ink: #f8fafc;
}
html.dark .activity-report-card {
  box-shadow: 0 10px 28px rgb(0 0 0 / 24%);
}
html.dark .activity-timeline-item:not(:last-child)::before {
  border-color: #475569;
}
html.dark .activity-timeline-marker {
  border-color: #1e3a8a;
  background: #172554;
  color: #93c5fd;
}
html.dark .activity-timeline-marker.is-login {
  border-color: #166534;
  background: #14532d;
  color: #bbf7d0;
}
html.dark .activity-timeline-marker.is-order {
  border-color: #6b21a8;
  background: #581c87;
  color: #e9d5ff;
}
html.dark .activity-timeline-action {
  color: #93c5fd;
}
html.dark .activity-timeline-action.is-login {
  color: #86efac;
}
html.dark .activity-timeline-action.is-order {
  color: #d8b4fe;
}
html.dark .activity-category-icon {
  background: #172554;
  color: #bfdbfe;
}
html.dark .activity-kind-icon {
  background: #3b0764;
  color: #e9d5ff;
}
html.dark .activity-report-all-link, html.dark .activity-back-button {
  border-color: #1e3a8a;
  background: #172554;
  color: #bfdbfe;
}
html.dark .activity-report-all-link:hover, html.dark .activity-back-button:hover {
  background: #1e3a8a;
}
html.dark .activity-report-tab.is-active {
  background: linear-gradient(135deg, #172554, #1e3a8a);
  color: #dbeafe;
}
html.dark .activity-report-tab:hover {
  background: #1e293b;
  color: #bfdbfe;
}
html.dark .activity-report-status {
  border-color: #1e3a8a;
  background: #172554;
  color: #bfdbfe;
}
@media (max-width: 640px) {
  .activity-report-card {
    padding: .9rem;
  }
  .activity-report-header {
    align-items: flex-start;
    gap: .55rem;
  }
  .activity-report-header h2 {
    font-size: 1.02rem;
  }
  .activity-report-header p {
    font-size: .74rem;
  }
  .activity-report-all-link {
    padding: .45rem .55rem;
    font-size: .7rem;
  }
  .activity-report-tabs {
    gap: .2rem;
    margin-top: .75rem;
    padding: .22rem;
  }
  .activity-report-tab {
    min-height: 2.2rem;
    padding-inline: .18rem;
    font-size: .72rem;
  }
  .activity-timeline-scroll {
    height: min(17rem, 38vh);
    max-height: 17rem;
  }
  .activity-category-grid, .activity-report-kind-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
  }
  .activity-category-card {
    padding: .85rem;
  }
  .activity-detail-header {
    align-items: flex-start;
  }
  .activity-report-pagination {
    flex-wrap: wrap;
    gap: .55rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .activity-report-tab, .activity-category-card, .activity-report-all-link, .activity-back-button {
    transition: none;
  }
  .activity-report-loading-icon {
    animation-duration: 2s;
  }
}
.fi-wi-table .fi-ta.native-dashboard-list-viewport .fi-ta-content-ctn {
  min-height: 0;
  height: min(26rem, 44vh);
  max-height: min(26rem, 44vh);
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .fi-wi-table .fi-ta.native-dashboard-list-viewport .fi-ta-content-ctn {
    min-height: 0;
    height: min(20rem, 38vh);
    max-height: min(20rem, 38vh);
  }
}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-mono: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-cyan-700: oklch(52% 0.105 223.128);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-rose-950: oklch(27.1% 0.105 12.094);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-gray-100: var(--gray-100);
    --color-gray-200: var(--gray-200);
    --color-gray-300: var(--gray-300);
    --color-gray-400: var(--gray-400);
    --color-gray-500: var(--gray-500);
    --color-gray-600: var(--gray-600);
    --color-gray-700: var(--gray-700);
    --color-gray-900: var(--gray-900);
    --color-gray-950: var(--gray-950);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --container-3xs: 16rem;
    --container-2xs: 18rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --leading-loose: 2;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-xs: 4px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --default-mono-font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
    --color-primary-400: var(--primary-400);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .isolate {
    isolation: isolate;
  }
  .z-0 {
    z-index: 0;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .my-auto {
    margin-block: auto;
  }
  .me-3 {
    margin-inline-end: calc(var(--spacing) * 3);
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .-ml-px {
    margin-left: -1px;
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .list-item {
    display: list-item;
  }
  .table {
    display: table;
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }
  .min-h-64 {
    min-height: calc(var(--spacing) * 64);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-48 {
    min-width: calc(var(--spacing) * 48);
  }
  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }
  .min-w-full {
    min-width: 100%;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-items-center {
    justify-items: center;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.divide-gray-100 > :not(:last-child)) {
    border-color: var(--gray-100);
  }
  :where(.divide-gray-200 > :not(:last-child)) {
    border-color: var(--gray-200);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }
  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-4 {
    border-style: var(--tw-border-style);
    border-width: 4px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-amber-300 {
    border-color: var(--color-amber-300);
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-danger-300 {
    border-color: var(--danger-300);
  }
  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }
  .border-emerald-300 {
    border-color: var(--color-emerald-300);
  }
  .border-emerald-600 {
    border-color: var(--color-emerald-600);
  }
  .border-emerald-700 {
    border-color: var(--color-emerald-700);
  }
  .border-gray-200 {
    border-color: var(--gray-200);
  }
  .border-gray-300 {
    border-color: var(--gray-300);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-green-300 {
    border-color: var(--color-green-300);
  }
  .border-primary-200 {
    border-color: var(--primary-200);
  }
  .border-primary-500 {
    border-color: var(--primary-500);
  }
  .border-red-300 {
    border-color: var(--color-red-300);
  }
  .border-red-400 {
    border-color: var(--color-red-400);
  }
  .border-rose-300 {
    border-color: var(--color-rose-300);
  }
  .border-slate-300 {
    border-color: var(--color-slate-300);
  }
  .border-warning-300 {
    border-color: var(--warning-300);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-700 {
    background-color: var(--color-amber-700);
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-danger-50 {
    background-color: var(--danger-50);
  }
  .bg-danger-600 {
    background-color: var(--danger-600);
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-gray-50 {
    background-color: var(--gray-50);
  }
  .bg-gray-100 {
    background-color: var(--gray-100);
  }
  .bg-gray-200 {
    background-color: var(--gray-200);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-primary-50 {
    background-color: var(--primary-50);
  }
  .bg-primary-600 {
    background-color: var(--primary-600);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-rose-50 {
    background-color: var(--color-rose-50);
  }
  .bg-warning-50 {
    background-color: var(--warning-50);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-blue-50 {
    --tw-gradient-from: var(--color-blue-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-indigo-700 {
    --tw-gradient-from: var(--color-indigo-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-blue-700 {
    --tw-gradient-via: var(--color-blue-700);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-cyan-700 {
    --tw-gradient-to: var(--color-cyan-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-indigo-100 {
    --tw-gradient-to: var(--color-indigo-100);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .object-cover {
    object-fit: cover;
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .py-1 {
    padding-block: var(--spacing);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .ps-3 {
    padding-inline-start: calc(var(--spacing) * 3);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .font-mono {
    font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .\[overflow-wrap\:anywhere\] {
    overflow-wrap: anywhere;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .break-all {
    word-break: break-all;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-amber-900 {
    color: var(--color-amber-900);
  }
  .text-amber-950 {
    color: var(--color-amber-950);
  }
  .text-blue-50 {
    color: var(--color-blue-50);
  }
  .text-blue-100 {
    color: var(--color-blue-100);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-blue-950 {
    color: var(--color-blue-950);
  }
  .text-danger-700 {
    color: var(--danger-700);
  }
  .text-danger-800 {
    color: var(--danger-800);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }
  .text-emerald-900 {
    color: var(--color-emerald-900);
  }
  .text-emerald-950 {
    color: var(--color-emerald-950);
  }
  .text-gray-500 {
    color: var(--gray-500);
  }
  .text-gray-600 {
    color: var(--gray-600);
  }
  .text-gray-700 {
    color: var(--gray-700);
  }
  .text-gray-800 {
    color: var(--gray-800);
  }
  .text-gray-950 {
    color: var(--gray-950);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-900 {
    color: var(--color-green-900);
  }
  .text-green-950 {
    color: var(--color-green-950);
  }
  .text-pink-500 {
    color: var(--color-pink-500);
  }
  .text-primary-600 {
    color: var(--primary-600);
  }
  .text-primary-800 {
    color: var(--primary-800);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-900 {
    color: var(--color-red-900);
  }
  .text-rose-900 {
    color: var(--color-rose-900);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-blue-300 {
    --tw-ring-color: var(--color-blue-300);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[configure\(Table\ \\\$table\)\:\ Table\] {
    configure(Table \$table):  Table;
  }
  .\[wire\:model\] {
    wire: model;
  }
  .\[wire\\\\\:current\] {
    wire\\: current;
  }
  .\[wire\\\\\:id\] {
    wire\\: id;
  }
  .\[wire\\\\\:navigate\\\\\.hover\\\\\.preserve-scroll\] {
    wire\\: navigate\\.hover\\.preserve-scroll;
  }
  .\[wire\\\\\:navigate\\\\\.hover\] {
    wire\\: navigate\\.hover;
  }
  .\[wire\\\\\:navigate\\\\\.preserve-scroll\\\\\.hover\] {
    wire\\: navigate\\.preserve-scroll\\.hover;
  }
  .\[wire\\\\\:navigate\\\\\.preserve-scroll\] {
    wire\\: navigate\\.preserve-scroll;
  }
  .\[wire\\\\\:navigate\] {
    wire\\: navigate;
  }
  .\[wire\\\\\:partial\=\"\$\{a\}\"\] {
    wire\\: partial="${a}";
  }
  .\[wire\\\\\:partial\=\"\$\{name\}\"\] {
    wire\\: partial="${name}";
  }
  .\[wire\\\\\:partial\=\"schema-component\:\:\$\{dispatch\.params\.awaitSchemaComponent\}\"\] {
    wire\\: partial="schema-component::${dispatch.params.awaitSchemaComponent}";
  }
  .\[wire\\\\\:partial\=\"schema-component\:\:\$\{t\.params\.awaitSchemaComponent\}\"\] {
    wire\\: partial="schema-component::${t.params.awaitSchemaComponent}";
  }
  .\[wire\\\\\:ref\=\"\$\{t\}\"\] {
    wire\\: ref="${t}";
  }
  .\[wire\\\\\:sort\\\\\:ignore\] {
    wire\\: sort\\:ignore;
  }
  .\[wire\\\\\:stream\=\"\$\{name\}\"\] {
    wire\\: stream="${name}";
  }
  .\[wire\\\\\:stream\=\"\$\{o\}\"\] {
    wire\\: stream="${o}";
  }
  .\[wire\\\\\:stream\\\\\.replace\=\"\$\{name\}\"\] {
    wire\\: stream\\.replace="${name}";
  }
  .\[wire\\\\\:stream\\\\\.replace\=\"\$\{o\}\"\] {
    wire\\: stream\\.replace="${o}";
  }
  .\[wire\\\\\:transition\\\\\.navigate\] {
    wire\\: transition\\.navigate;
  }
  .\[wire\\\\\:transition\] {
    wire\\: transition;
  }
  .\[x-on\\\\\:click\^\=\"\$refs\.\$\{O\}\"\] {
    x-on\\: click^="$refs.${O}";
  }
  .\[x-sort\\\\\:ignore\] {
    x-sort\\: ignore;
  }
  @media (hover: hover) {
    .group-hover\:scale-\[1\.02\]:is(:where(.group):hover *) {
      scale: 1.02;
    }
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .hover\:border-primary-400:hover {
      border-color: var(--primary-400);
    }
    .hover\:bg-danger-50:hover {
      background-color: var(--danger-50);
    }
    .hover\:bg-danger-500:hover {
      background-color: var(--danger-500);
    }
    .hover\:bg-gray-50:hover {
      background-color: var(--gray-50);
    }
    .hover\:bg-primary-500:hover {
      background-color: var(--primary-500);
    }
    .hover\:text-gray-400:hover {
      color: var(--gray-400);
    }
    .hover\:text-gray-500:hover {
      color: var(--gray-500);
    }
    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:z-10:focus {
    z-index: 10;
  }
  .focus\:border-blue-300:focus {
    border-color: var(--color-blue-300);
  }
  .focus\:border-primary-500:focus {
    border-color: var(--primary-500);
  }
  .focus\:ring:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus\:ring-primary-500:focus {
    --tw-ring-color: var(--primary-500);
  }
  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  .focus-visible\:outline-primary-600:focus-visible {
    outline-color: var(--primary-600);
  }
  .active\:bg-gray-100:active {
    background-color: var(--gray-100);
  }
  .active\:text-gray-500:active {
    color: var(--gray-500);
  }
  .active\:text-gray-700:active {
    color: var(--gray-700);
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:cursor-wait:disabled {
    cursor: wait;
  }
  .disabled\:opacity-40:disabled {
    opacity: 40%;
  }
  .disabled\:opacity-50:disabled {
    opacity: 50%;
  }
  .disabled\:opacity-60:disabled {
    opacity: 60%;
  }
  @media (width >= 40rem) {
    .sm\:col-span-3 {
      grid-column: span 3 / span 3;
    }
    .sm\:flex {
      display: flex;
    }
    .sm\:hidden {
      display: none;
    }
    .sm\:flex-1 {
      flex: 1;
    }
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:flex-row {
      flex-direction: row;
    }
    .sm\:items-center {
      align-items: center;
    }
    .sm\:items-end {
      align-items: flex-end;
    }
    .sm\:items-start {
      align-items: flex-start;
    }
    .sm\:justify-between {
      justify-content: space-between;
    }
    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .sm\:p-7 {
      padding: calc(var(--spacing) * 7);
    }
  }
  @media (width >= 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (width >= 80rem) {
    .xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .rtl\:flex-row-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
    flex-direction: row-reverse;
  }
  :where(.dark\:divide-gray-700:where(.dark, .dark *) > :not(:last-child)) {
    border-color: var(--gray-700);
  }
  :where(.dark\:divide-gray-800:where(.dark, .dark *) > :not(:last-child)) {
    border-color: var(--gray-800);
  }
  .dark\:border-danger-700:where(.dark, .dark *) {
    border-color: var(--danger-700);
  }
  .dark\:border-emerald-300:where(.dark, .dark *) {
    border-color: var(--color-emerald-300);
  }
  .dark\:border-emerald-400:where(.dark, .dark *) {
    border-color: var(--color-emerald-400);
  }
  .dark\:border-emerald-700:where(.dark, .dark *) {
    border-color: var(--color-emerald-700);
  }
  .dark\:border-gray-600:where(.dark, .dark *) {
    border-color: var(--gray-600);
  }
  .dark\:border-gray-700:where(.dark, .dark *) {
    border-color: var(--gray-700);
  }
  .dark\:border-green-800:where(.dark, .dark *) {
    border-color: var(--color-green-800);
  }
  .dark\:border-primary-800:where(.dark, .dark *) {
    border-color: var(--primary-800);
  }
  .dark\:border-rose-700:where(.dark, .dark *) {
    border-color: var(--color-rose-700);
  }
  .dark\:border-slate-600:where(.dark, .dark *) {
    border-color: var(--color-slate-600);
  }
  .dark\:border-warning-700:where(.dark, .dark *) {
    border-color: var(--warning-700);
  }
  .dark\:border-white\/10:where(.dark, .dark *) {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .dark\:bg-danger-950:where(.dark, .dark *) {
    background-color: var(--danger-950);
  }
  .dark\:bg-emerald-950:where(.dark, .dark *) {
    background-color: var(--color-emerald-950);
  }
  .dark\:bg-gray-800:where(.dark, .dark *) {
    background-color: var(--gray-800);
  }
  .dark\:bg-gray-900:where(.dark, .dark *) {
    background-color: var(--gray-900);
  }
  .dark\:bg-green-950:where(.dark, .dark *) {
    background-color: var(--color-green-950);
  }
  .dark\:bg-primary-950:where(.dark, .dark *) {
    background-color: var(--primary-950);
  }
  .dark\:bg-rose-950:where(.dark, .dark *) {
    background-color: var(--color-rose-950);
  }
  .dark\:bg-warning-950:where(.dark, .dark *) {
    background-color: var(--warning-950);
  }
  .dark\:text-amber-200:where(.dark, .dark *) {
    color: var(--color-amber-200);
  }
  .dark\:text-amber-300:where(.dark, .dark *) {
    color: var(--color-amber-300);
  }
  .dark\:text-danger-200:where(.dark, .dark *) {
    color: var(--danger-200);
  }
  .dark\:text-danger-300:where(.dark, .dark *) {
    color: var(--danger-300);
  }
  .dark\:text-emerald-100:where(.dark, .dark *) {
    color: var(--color-emerald-100);
  }
  .dark\:text-emerald-200:where(.dark, .dark *) {
    color: var(--color-emerald-200);
  }
  .dark\:text-gray-100:where(.dark, .dark *) {
    color: var(--gray-100);
  }
  .dark\:text-gray-200:where(.dark, .dark *) {
    color: var(--gray-200);
  }
  .dark\:text-gray-300:where(.dark, .dark *) {
    color: var(--gray-300);
  }
  .dark\:text-gray-400:where(.dark, .dark *) {
    color: var(--gray-400);
  }
  .dark\:text-gray-600:where(.dark, .dark *) {
    color: var(--gray-600);
  }
  .dark\:text-green-100:where(.dark, .dark *) {
    color: var(--color-green-100);
  }
  .dark\:text-green-200:where(.dark, .dark *) {
    color: var(--color-green-200);
  }
  .dark\:text-primary-200:where(.dark, .dark *) {
    color: var(--primary-200);
  }
  .dark\:text-rose-100:where(.dark, .dark *) {
    color: var(--color-rose-100);
  }
  .dark\:text-white:where(.dark, .dark *) {
    color: var(--color-white);
  }
  @media (hover: hover) {
    .dark\:hover\:bg-danger-950:where(.dark, .dark *):hover {
      background-color: var(--danger-950);
    }
    .dark\:hover\:bg-gray-700:where(.dark, .dark *):hover {
      background-color: var(--gray-700);
    }
    .dark\:hover\:bg-gray-800:where(.dark, .dark *):hover {
      background-color: var(--gray-800);
    }
    .dark\:hover\:text-gray-300:where(.dark, .dark *):hover {
      color: var(--gray-300);
    }
  }
  .dark\:focus\:border-blue-700:where(.dark, .dark *):focus {
    border-color: var(--color-blue-700);
  }
  .dark\:focus\:border-blue-800:where(.dark, .dark *):focus {
    border-color: var(--color-blue-800);
  }
  .dark\:active\:bg-gray-700:where(.dark, .dark *):active {
    background-color: var(--gray-700);
  }
  .dark\:active\:text-gray-300:where(.dark, .dark *):active {
    color: var(--gray-300);
  }
}
@layer base {
  button:not(:disabled), [role='button']:not(:disabled) {
    cursor: pointer;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer utilities {
  .fi-color-danger {
    --color-50: var(--danger-50);
    --color-100: var(--danger-100);
    --color-200: var(--danger-200);
    --color-300: var(--danger-300);
    --color-400: var(--danger-400);
    --color-500: var(--danger-500);
    --color-600: var(--danger-600);
    --color-700: var(--danger-700);
    --color-800: var(--danger-800);
    --color-900: var(--danger-900);
    --color-950: var(--danger-950);
  }
  .fi-color-gray {
    --color-50: var(--gray-50);
    --color-100: var(--gray-100);
    --color-200: var(--gray-200);
    --color-300: var(--gray-300);
    --color-400: var(--gray-400);
    --color-500: var(--gray-500);
    --color-600: var(--gray-600);
    --color-700: var(--gray-700);
    --color-800: var(--gray-800);
    --color-900: var(--gray-900);
    --color-950: var(--gray-950);
  }
  .fi-color-info {
    --color-50: var(--info-50);
    --color-100: var(--info-100);
    --color-200: var(--info-200);
    --color-300: var(--info-300);
    --color-400: var(--info-400);
    --color-500: var(--info-500);
    --color-600: var(--info-600);
    --color-700: var(--info-700);
    --color-800: var(--info-800);
    --color-900: var(--info-900);
    --color-950: var(--info-950);
  }
  .fi-color-primary {
    --color-50: var(--primary-50);
    --color-100: var(--primary-100);
    --color-200: var(--primary-200);
    --color-300: var(--primary-300);
    --color-400: var(--primary-400);
    --color-500: var(--primary-500);
    --color-600: var(--primary-600);
    --color-700: var(--primary-700);
    --color-800: var(--primary-800);
    --color-900: var(--primary-900);
    --color-950: var(--primary-950);
  }
  .fi-color-success {
    --color-50: var(--success-50);
    --color-100: var(--success-100);
    --color-200: var(--success-200);
    --color-300: var(--success-300);
    --color-400: var(--success-400);
    --color-500: var(--success-500);
    --color-600: var(--success-600);
    --color-700: var(--success-700);
    --color-800: var(--success-800);
    --color-900: var(--success-900);
    --color-950: var(--success-950);
  }
  .fi-color-warning {
    --color-50: var(--warning-50);
    --color-100: var(--warning-100);
    --color-200: var(--warning-200);
    --color-300: var(--warning-300);
    --color-400: var(--warning-400);
    --color-500: var(--warning-500);
    --color-600: var(--warning-600);
    --color-700: var(--warning-700);
    --color-800: var(--warning-800);
    --color-900: var(--warning-900);
    --color-950: var(--warning-950);
  }
  .fi-bg-color-50 {
    --bg: var(--color-50);
  }
  .fi-bg-color-100 {
    --bg: var(--color-100);
  }
  .fi-bg-color-200 {
    --bg: var(--color-200);
  }
  .fi-bg-color-300 {
    --bg: var(--color-300);
  }
  .fi-bg-color-400 {
    --bg: var(--color-400);
  }
  .fi-bg-color-500 {
    --bg: var(--color-500);
  }
  .fi-bg-color-600 {
    --bg: var(--color-600);
  }
  .fi-bg-color-700 {
    --bg: var(--color-700);
  }
  .fi-bg-color-800 {
    --bg: var(--color-800);
  }
  .fi-bg-color-900 {
    --bg: var(--color-900);
  }
  .fi-bg-color-950 {
    --bg: var(--color-950);
  }
  .hover\:fi-bg-color-50 {
    --hover-bg: var(--color-50);
  }
  .hover\:fi-bg-color-100 {
    --hover-bg: var(--color-100);
  }
  .hover\:fi-bg-color-200 {
    --hover-bg: var(--color-200);
  }
  .hover\:fi-bg-color-300 {
    --hover-bg: var(--color-300);
  }
  .hover\:fi-bg-color-400 {
    --hover-bg: var(--color-400);
  }
  .hover\:fi-bg-color-500 {
    --hover-bg: var(--color-500);
  }
  .hover\:fi-bg-color-600 {
    --hover-bg: var(--color-600);
  }
  .hover\:fi-bg-color-700 {
    --hover-bg: var(--color-700);
  }
  .hover\:fi-bg-color-800 {
    --hover-bg: var(--color-800);
  }
  .hover\:fi-bg-color-900 {
    --hover-bg: var(--color-900);
  }
  .hover\:fi-bg-color-950 {
    --hover-bg: var(--color-950);
  }
  .dark\:fi-bg-color-50 {
    --dark-bg: var(--color-50);
  }
  .dark\:fi-bg-color-100 {
    --dark-bg: var(--color-100);
  }
  .dark\:fi-bg-color-200 {
    --dark-bg: var(--color-200);
  }
  .dark\:fi-bg-color-300 {
    --dark-bg: var(--color-300);
  }
  .dark\:fi-bg-color-400 {
    --dark-bg: var(--color-400);
  }
  .dark\:fi-bg-color-500 {
    --dark-bg: var(--color-500);
  }
  .dark\:fi-bg-color-600 {
    --dark-bg: var(--color-600);
  }
  .dark\:fi-bg-color-700 {
    --dark-bg: var(--color-700);
  }
  .dark\:fi-bg-color-800 {
    --dark-bg: var(--color-800);
  }
  .dark\:fi-bg-color-900 {
    --dark-bg: var(--color-900);
  }
  .dark\:fi-bg-color-950 {
    --dark-bg: var(--color-950);
  }
  .dark\:hover\:fi-bg-color-50 {
    --dark-hover-bg: var(--color-50);
  }
  .dark\:hover\:fi-bg-color-100 {
    --dark-hover-bg: var(--color-100);
  }
  .dark\:hover\:fi-bg-color-200 {
    --dark-hover-bg: var(--color-200);
  }
  .dark\:hover\:fi-bg-color-300 {
    --dark-hover-bg: var(--color-300);
  }
  .dark\:hover\:fi-bg-color-400 {
    --dark-hover-bg: var(--color-400);
  }
  .dark\:hover\:fi-bg-color-500 {
    --dark-hover-bg: var(--color-500);
  }
  .dark\:hover\:fi-bg-color-600 {
    --dark-hover-bg: var(--color-600);
  }
  .dark\:hover\:fi-bg-color-700 {
    --dark-hover-bg: var(--color-700);
  }
  .dark\:hover\:fi-bg-color-800 {
    --dark-hover-bg: var(--color-800);
  }
  .dark\:hover\:fi-bg-color-900 {
    --dark-hover-bg: var(--color-900);
  }
  .dark\:hover\:fi-bg-color-950 {
    --dark-hover-bg: var(--color-950);
  }
  .fi-text-color-0 {
    --text: oklch(1 0 0);
  }
  .fi-text-color-50 {
    --text: var(--color-50);
  }
  .fi-text-color-100 {
    --text: var(--color-100);
  }
  .fi-text-color-200 {
    --text: var(--color-200);
  }
  .fi-text-color-300 {
    --text: var(--color-300);
  }
  .fi-text-color-400 {
    --text: var(--color-400);
  }
  .fi-text-color-500 {
    --text: var(--color-500);
  }
  .fi-text-color-600 {
    --text: var(--color-600);
  }
  .fi-text-color-700 {
    --text: var(--color-700);
  }
  .fi-text-color-800 {
    --text: var(--color-800);
  }
  .fi-text-color-900 {
    --text: var(--color-900);
  }
  .fi-text-color-950 {
    --text: var(--color-950);
  }
  .hover\:fi-text-color-0 {
    --hover-text: oklch(1 0 0);
  }
  .hover\:fi-text-color-50 {
    --hover-text: var(--color-50);
  }
  .hover\:fi-text-color-100 {
    --hover-text: var(--color-100);
  }
  .hover\:fi-text-color-200 {
    --hover-text: var(--color-200);
  }
  .hover\:fi-text-color-300 {
    --hover-text: var(--color-300);
  }
  .hover\:fi-text-color-400 {
    --hover-text: var(--color-400);
  }
  .hover\:fi-text-color-500 {
    --hover-text: var(--color-500);
  }
  .hover\:fi-text-color-600 {
    --hover-text: var(--color-600);
  }
  .hover\:fi-text-color-700 {
    --hover-text: var(--color-700);
  }
  .hover\:fi-text-color-800 {
    --hover-text: var(--color-800);
  }
  .hover\:fi-text-color-900 {
    --hover-text: var(--color-900);
  }
  .hover\:fi-text-color-950 {
    --hover-text: var(--color-950);
  }
  .dark\:fi-text-color-0 {
    --dark-text: oklch(1 0 0);
  }
  .dark\:fi-text-color-50 {
    --dark-text: var(--color-50);
  }
  .dark\:fi-text-color-100 {
    --dark-text: var(--color-100);
  }
  .dark\:fi-text-color-200 {
    --dark-text: var(--color-200);
  }
  .dark\:fi-text-color-300 {
    --dark-text: var(--color-300);
  }
  .dark\:fi-text-color-400 {
    --dark-text: var(--color-400);
  }
  .dark\:fi-text-color-500 {
    --dark-text: var(--color-500);
  }
  .dark\:fi-text-color-600 {
    --dark-text: var(--color-600);
  }
  .dark\:fi-text-color-700 {
    --dark-text: var(--color-700);
  }
  .dark\:fi-text-color-800 {
    --dark-text: var(--color-800);
  }
  .dark\:fi-text-color-900 {
    --dark-text: var(--color-900);
  }
  .dark\:fi-text-color-950 {
    --dark-text: var(--color-950);
  }
  .dark\:hover\:fi-text-color-0 {
    --dark-hover-text: oklch(1 0 0);
  }
  .dark\:hover\:fi-text-color-50 {
    --dark-hover-text: var(--color-50);
  }
  .dark\:hover\:fi-text-color-100 {
    --dark-hover-text: var(--color-100);
  }
  .dark\:hover\:fi-text-color-200 {
    --dark-hover-text: var(--color-200);
  }
  .dark\:hover\:fi-text-color-300 {
    --dark-hover-text: var(--color-300);
  }
  .dark\:hover\:fi-text-color-400 {
    --dark-hover-text: var(--color-400);
  }
  .dark\:hover\:fi-text-color-500 {
    --dark-hover-text: var(--color-500);
  }
  .dark\:hover\:fi-text-color-600 {
    --dark-hover-text: var(--color-600);
  }
  .dark\:hover\:fi-text-color-700 {
    --dark-hover-text: var(--color-700);
  }
  .dark\:hover\:fi-text-color-800 {
    --dark-hover-text: var(--color-800);
  }
  .dark\:hover\:fi-text-color-900 {
    --dark-hover-text: var(--color-900);
  }
  .dark\:hover\:fi-text-color-950 {
    --dark-hover-text: var(--color-950);
  }
  .fi-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .fi-prose {
    --prose-color: var(--color-gray-700);
    --prose-heading-color: var(--color-gray-950);
    --prose-strong-color: var(--color-gray-950);
    --prose-link-color: var(--color-gray-950);
    --prose-code-color: var(--color-gray-950);
    --prose-marker-color: var(--color-gray-700);
    @supports (color: color-mix(in lab, red, red)) {
      --prose-marker-color: color-mix(
        in oklab,
        var(--color-gray-700) 25%,
        transparent
    );
    }
    --prose-link-underline-color: var(--color-primary-400);
    --prose-th-borders: var(--color-gray-300);
    --prose-td-borders: var(--color-gray-200);
    --prose-hr-color: var(--color-gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --prose-hr-color: color-mix(
        in oklab,
        var(--color-gray-950) 5%,
        transparent
    );
    }
    --prose-blockquote-border-color: var(--color-gray-300);
    --prose-pre-bg: var(--color-gray-100);
    &:where(.dark, .dark *) {
      --prose-color: var(--color-gray-300);
      --prose-heading-color: var(--color-white);
      --prose-strong-color: var(--color-white);
      --prose-link-color: var(--color-white);
      --prose-code-color: var(--color-white);
      --prose-marker-color: var(--color-gray-300);
      @supports (color: color-mix(in lab, red, red)) {
        --prose-marker-color: color-mix(
            in oklab,
            var(--color-gray-300) 35%,
            transparent
        );
      }
      --prose-link-underline-color: var(--color-sky-400);
      --prose-th-borders: var(--color-gray-600);
      --prose-td-borders: var(--color-gray-700);
      --prose-hr-color: color-mix(
            in oklab,
            #fff 10%,
            transparent
        );
      @supports (color: color-mix(in lab, red, red)) {
        --prose-hr-color: color-mix(
            in oklab,
            var(--color-white) 10%,
            transparent
        );
      }
      --prose-blockquote-border-color: var(--color-gray-600);
      --prose-pre-bg: var(--color-gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        --prose-pre-bg: color-mix(
            in oklab,
            var(--color-gray-900) 40%,
            transparent
        );
      }
    }
    color: var(--prose-color);
    font-size: var(--text-sm);
    line-height: 1.5;
    img + img {
      margin-top: 0;
    }
    *:where(:not(.fi-not-prose, .fi-not-prose *, br)) + *:where(:not(.fi-not-prose, .fi-not-prose *, br)) {
      margin-top: calc(var(--spacing) * 4);
    }
    p br {
      margin: 0;
    }
    h1:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-3xl);
      line-height: calc(36 / 30);
      letter-spacing: -0.025em;
      color: var(--prose-heading-color);
      font-weight: var(--font-weight-bold);
    }
    h2:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-2xl);
      line-height: calc(32 / 24);
      letter-spacing: -0.025em;
      color: var(--prose-heading-color);
      font-weight: var(--font-weight-bold);
    }
    h3:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-xl);
      line-height: calc(28 / 20);
      color: var(--prose-heading-color);
      font-weight: var(--font-weight-bold);
    }
    h4:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-lg);
      line-height: calc(28 / 18);
      color: var(--prose-heading-color);
      font-weight: var(--font-weight-bold);
    }
    h5:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-base);
      line-height: calc(24 / 16);
      color: var(--prose-heading-color);
      font-weight: var(--font-weight-bold);
    }
    h6:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-sm);
      line-height: calc(20 / 14);
      color: var(--prose-heading-color);
      font-weight: var(--font-weight-bold);
    }
    :is(h2, h3, h4, h5, h6):where(:not(.fi-not-prose, .fi-not-prose *)) {
      scroll-margin-top: calc( var(--topbar-height, 4rem) + var(--spacing) * 16 );
      @media (width >= 64rem) {
        scroll-margin-top: calc( var(--topbar-height, 4rem) + var(--spacing) * 2 );
      }
    }
    ol:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-start: calc(var(--spacing) * 6);
      list-style-type: decimal;
    }
    ul:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-start: calc(var(--spacing) * 6);
      list-style-type: disc;
    }
    ol li:where(:not(.fi-not-prose, .fi-not-prose *)), ul li:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-start: calc(var(--spacing) * 3);
    }
    ol li + li:where(:not(.fi-not-prose, .fi-not-prose *)), ul li + li:where(:not(.fi-not-prose, .fi-not-prose *)) {
      margin-top: calc(var(--spacing) * 4);
    }
    ol li:where(:not(.fi-not-prose, .fi-not-prose *))::marker, ul li:where(:not(.fi-not-prose, .fi-not-prose *))::marker {
      color: var(--prose-marker-color);
    }
    a:not(:where(:is(h2, h3, h4, h5, h6) *)):where( :not(.fi-not-prose, .fi-not-prose *) ) {
      color: var(--prose-link-color);
      font-weight: var(--font-weight-semibold);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: var(--prose-link-underline-color);
      text-decoration-thickness: 1px;
      & code {
        font-weight: var(--font-weight-semibold);
      }
    }
    a:hover:where(:not(.fi-not-prose, .fi-not-prose *)) {
      text-decoration-thickness: 2px;
    }
    strong:where(:not(.fi-not-prose, .fi-not-prose *)) {
      color: var(--prose-strong-color);
      font-weight: var(--font-weight-semibold);
    }
    code:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-variant-ligatures: none;
      font-family: var(--font-mono);
      font-weight: var(--font-weight-medium);
      color: var(--prose-code-color);
    }
    :where(h2, h3, h4, h5, h6) code:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-weight: var(--font-weight-semibold);
    }
    code:where(:not(.fi-not-prose, .fi-not-prose *))::before, code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
      display: inline;
      content: '`';
    }
    pre:where(:not(.fi-not-prose, .fi-not-prose *)) {
      margin-top: calc(var(--spacing) * 4);
      margin-bottom: calc(var(--spacing) * 10);
      border-radius: var(--radius-lg);
      padding-top: calc(var(--spacing) * 3);
      padding-inline-end: calc(var(--spacing) * 4);
      padding-bottom: calc(var(--spacing) * 3);
      padding-inline-start: calc(var(--spacing) * 4);
      background-color: var(--prose-pre-bg);
    }
    pre code * + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
      margin-top: 0;
    }
    pre code:where(:not(.fi-not-prose, .fi-not-prose *))::before, pre code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
      content: none;
    }
    pre code:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-variant-ligatures: none;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: 2;
    }
    table:where(:not(.fi-not-prose, .fi-not-prose *)) {
      width: 100%;
      table-layout: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: var(--text-sm);
      line-height: 1.4;
    }
    thead:where(:not(.fi-not-prose, .fi-not-prose *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--prose-th-borders);
    }
    thead th:where(:not(.fi-not-prose, .fi-not-prose *)) {
      color: var(--prose-heading-color);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.6em;
      padding-bottom: 0.8em;
      padding-inline-start: 0.6em;
    }
    thead th:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-start: 0;
    }
    thead th:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-end: 0;
    }
    tbody tr:where(:not(.fi-not-prose, .fi-not-prose *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--prose-td-borders);
    }
    tbody tr:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      border-bottom-width: 0;
    }
    tbody td:where(:not(.fi-not-prose, .fi-not-prose *)) {
      vertical-align: baseline;
    }
    tfoot:where(:not(.fi-not-prose, .fi-not-prose *)) {
      border-top-width: 1px;
      border-top-color: var(--prose-th-borders);
    }
    tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
      vertical-align: top;
    }
    tbody td:where(:not(.fi-not-prose, .fi-not-prose *)), tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-top: 0.8em;
      padding-inline-end: 0.6em;
      padding-bottom: 0.8em;
      padding-inline-start: 0.6em;
    }
    tbody td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)), tfoot td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-start: 0;
    }
    tbody td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)), tfoot td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      padding-inline-end: 0;
    }
    th:where(:not(.fi-not-prose, .fi-not-prose *)), td:where(:not(.fi-not-prose, .fi-not-prose *)) {
      text-align: start;
    }
    td code:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: 0.8125rem;
    }
    hr:where(:not(.fi-not-prose, .fi-not-prose *)) {
      border-color: var(--prose-hr-color);
      margin-block: calc(var(--spacing) * 8);
      & + h2 {
        margin-top: calc(var(--spacing) * 8);
      }
    }
    blockquote {
      font-style: italic;
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--prose-blockquote-border-color);
      padding-inline-start: calc(var(--spacing) * 4);
    }
    blockquote p:first-of-type::before {
      content: open-quote;
    }
    blockquote p:last-of-type::after {
      content: close-quote;
    }
    figure:where(:not(.fi-not-prose, .fi-not-prose *)) {
      figcaption:where(:not(.fi-not-prose, .fi-not-prose *)) {
        margin-top: calc(var(--spacing) * 3);
        text-align: center;
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        font-style: italic;
        color: var(--prose-color);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--prose-color) 75%, transparent);
        }
      }
    }
    :first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      margin-top: 0;
    }
    :last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
      margin-bottom: 0;
    }
    & .color:where(:not(.fi-not-prose, .fi-not-prose *)) {
      color: var(--color);
      &:where(.dark, .dark *) {
        color: var(--dark-color);
      }
    }
    & .lead:where(:not(.fi-not-prose, .fi-not-prose *)) {
      font-size: var(--text-base);
    }
    & span[data-type='mention']:where(:not(.fi-not-prose, .fi-not-prose *)), & a[data-type='mention']:where(:not(.fi-not-prose, .fi-not-prose *)) {
      display: inline-block;
      margin-block: 0;
      font-weight: var(--font-weight-semibold);
      white-space: nowrap;
    }
    & .grid-layout:where(:not(.fi-not-prose, .fi-not-prose *)) {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: calc(var(--spacing) * 4);
      &[data-from-breakpoint='default'] {
        grid-template-columns: var(--cols);
        & > .grid-layout-col {
          grid-column: var(--col-span);
        }
      }
      &[data-from-breakpoint='sm'] {
        @media (width >= 40rem) {
          grid-template-columns: var(--cols);
        }
        & > .grid-layout-col {
          @media (width >= 40rem) {
            grid-column: var(--col-span);
          }
        }
      }
      &[data-from-breakpoint='md'] {
        @media (width >= 48rem) {
          grid-template-columns: var(--cols);
        }
        & > .grid-layout-col {
          @media (width >= 48rem) {
            grid-column: var(--col-span);
          }
        }
      }
      &[data-from-breakpoint='lg'] {
        @media (width >= 64rem) {
          grid-template-columns: var(--cols);
        }
        & > .grid-layout-col {
          @media (width >= 64rem) {
            grid-column: var(--col-span);
          }
        }
      }
      &[data-from-breakpoint='xl'] {
        @media (width >= 80rem) {
          grid-template-columns: var(--cols);
        }
        & > .grid-layout-col {
          @media (width >= 80rem) {
            grid-column: var(--col-span);
          }
        }
      }
      &[data-from-breakpoint='2xl'] {
        @media (width >= 96rem) {
          grid-template-columns: var(--cols);
        }
        & > .grid-layout-col {
          @media (width >= 96rem) {
            grid-column: var(--col-span);
          }
        }
      }
      & > .grid-layout-col {
        margin-top: 0;
        min-width: 0;
      }
    }
  }
}
@layer components {
  .tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0;
  }
  [data-tippy-root] {
    max-width: calc(100vw - 10px);
  }
  .tippy-box {
    position: relative;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform,visibility,opacity;
  }
  .tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: 0;
  }
  .tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top;
  }
  .tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: 0;
  }
  .tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom;
  }
  .tippy-box[data-placement^=left]>.tippy-arrow {
    right: 0;
  }
  .tippy-box[data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left;
  }
  .tippy-box[data-placement^=right]>.tippy-arrow {
    left: 0;
  }
  .tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right;
  }
  .tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54,1.5,.38,1.11);
  }
  .tippy-arrow {
    width: 16px;
    height: 16px;
    color: #333;
  }
  .tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid;
  }
  .tippy-content {
    position: relative;
    padding: 5px 9px;
    z-index: 1;
  }
  .tippy-box[data-theme~=light] {
    color: #26323d;
    box-shadow: 0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;
    background-color: #fff;
  }
  .tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before {
    border-top-color: #fff;
  }
  .tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before {
    border-bottom-color: #fff;
  }
  .tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before {
    border-left-color: #fff;
  }
  .tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before {
    border-right-color: #fff;
  }
  .tippy-box[data-theme~=light]>.tippy-backdrop {
    background-color: #fff;
  }
  .tippy-box[data-theme~=light]>.tippy-svg-arrow {
    fill: #fff;
  }
  .fi-avatar {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: var(--radius-md);
    object-fit: cover;
    object-position: center;
    &.fi-circular {
      border-radius: calc(infinity * 1px);
    }
    &.fi-size-sm {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
    &.fi-size-lg {
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
    }
  }
  .fi-badge {
    display: inline-flex;
    min-width: 1.5rem;
    align-items: center;
    justify-content: center;
    column-gap: var(--spacing);
    border-radius: var(--radius-md);
    background-color: var(--gray-50);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-600);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-600) 10%, transparent);
    }
    --tw-ring-inset: inset;
    &:where(.dark, .dark *) {
      background-color: var(--gray-400);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-400) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: var(--gray-400);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-400) 20%, transparent);
      }
    }
    &:not(.fi-wrapped) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &.fi-disabled:not(.fi-force-enabled), &[disabled]:not(.fi-force-enabled) {
      cursor: default;
      opacity: 70%;
      &:not([x-tooltip]) {
        pointer-events: none;
      }
    }
    & .fi-badge-label-ctn {
      display: grid;
      align-self: baseline;
    }
    & .fi-badge-label {
      &.fi-wrapped {
        text-wrap: wrap;
        word-break: break-word;
      }
      &:not(.fi-wrapped) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    & .fi-icon {
      flex-shrink: 0;
    }
    &.fi-size-xs {
      min-width: 1rem;
      padding-inline: calc(var(--spacing) * 0.5);
      padding-block: 0px;
      --tw-tracking: var(--tracking-tighter);
      letter-spacing: var(--tracking-tighter);
    }
    &.fi-size-sm {
      min-width: 1.25rem;
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
    }
    &.fi-color {
      background-color: var(--color-50);
      color: var(--text);
      --tw-ring-color: var(--color-600);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-600) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--color-400);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-400) 10%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--dark-text);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: var(--color-400);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-400) 30%, transparent);
        }
      }
      & .fi-badge-delete-btn-icon {
        color: var(--color-700);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-700) 50%, transparent);
        }
        &:where(.dark, .dark *) {
          color: var(--color-300);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-300) 50%, transparent);
          }
        }
      }
    }
    &:not(.fi-color) .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & .fi-icon.fi-color {
      color: var(--color-500);
    }
    & .fi-badge-delete-btn {
      margin-block: calc(var(--spacing) * -1);
      margin-inline-start: calc(var(--spacing) * -1);
      margin-inline-end: calc(var(--spacing) * -2);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--spacing);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      --tw-outline-style: none;
      outline-style: none;
    }
    & .fi-badge-delete-btn-icon {
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 3);
      flex-shrink: 0;
      color: var(--gray-700);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--gray-700) 50%, transparent);
      }
      &:where(.dark, .dark *) {
        color: var(--gray-300);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--gray-300) 50%, transparent);
        }
      }
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z' /%3E%3C/svg%3E");
      mask-position: center;
      mask-repeat: no-repeat;
    }
    &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
      & .fi-badge-delete-btn-icon {
        &:focus-visible {
          color: var(--gray-700);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--gray-700) 75%, transparent);
          }
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              color: var(--gray-300);
              @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, var(--gray-300) 75%, transparent);
              }
            }
          }
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            color: var(--gray-300);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--gray-300) 75%, transparent);
            }
          }
        }
      }
      &.fi-color .fi-badge-delete-btn-icon {
        &:hover {
          @media (hover: hover) {
            color: var(--color-700);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--color-700) 75%, transparent);
            }
          }
        }
        &:focus-visible {
          color: var(--color-700);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-700) 75%, transparent);
          }
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              color: var(--color-300);
              @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, var(--color-300) 75%, transparent);
              }
            }
          }
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            color: var(--color-300);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--color-300) 75%, transparent);
            }
          }
        }
      }
    }
  }
  .fi-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
    & li {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      & a {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 75ms;
        transition-duration: 75ms;
        &:hover {
          @media (hover: hover) {
            color: var(--gray-700);
          }
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              color: var(--gray-200);
            }
          }
        }
      }
      & .fi-icon {
        display: flex;
        color: var(--gray-400);
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
        &.fi-ltr {
          &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
            display: none;
          }
        }
        &.fi-rtl {
          &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
            display: none;
          }
        }
      }
    }
  }
  .fi-btn {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    vertical-align: middle;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-outline-style: none;
    outline-style: none;
    &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
    &.fi-disabled:not(.fi-force-enabled), &[disabled]:not(.fi-force-enabled) {
      cursor: default;
      opacity: 70%;
      &:not([x-tooltip]) {
        pointer-events: none;
      }
    }
    & > .fi-icon {
      color: var(--gray-400);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    &.fi-size-xs {
      gap: var(--spacing);
      padding-inline: calc(var(--spacing) * 2);
      padding-block: calc(var(--spacing) * 1.5);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    &.fi-size-sm {
      gap: var(--spacing);
      padding-inline: calc(var(--spacing) * 2.5);
      padding-block: calc(var(--spacing) * 1.5);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.fi-size-lg {
      gap: calc(var(--spacing) * 1.5);
      padding-inline: calc(var(--spacing) * 3.5);
      padding-block: calc(var(--spacing) * 2.5);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.fi-size-xl {
      gap: calc(var(--spacing) * 1.5);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 3);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.fi-outlined {
      color: var(--gray-950);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-300);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: var(--gray-700);
      }
      &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--gray-400);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--gray-400) 10%, transparent);
            }
          }
        }
        &:focus-visible {
          --tw-ring-color: var(--gray-400);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--gray-400) 40%, transparent);
          }
        }
      }
      &.fi-color {
        color: var(--text);
        --tw-ring-color: var(--color-600);
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
        &:where(.dark, .dark *) {
          --tw-ring-color: var(--color-500);
        }
        &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--color-500);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-500) 10%, transparent);
              }
            }
          }
          &:focus-visible {
            --tw-ring-color: var(--color-500);
            @supports (color: color-mix(in lab, red, red)) {
              --tw-ring-color: color-mix(in oklab, var(--color-500) 40%, transparent);
            }
          }
          &:where(.dark, .dark *) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--color-600);
                @supports (color: color-mix(in lab, red, red)) {
                  background-color: color-mix(in oklab, var(--color-600) 10%, transparent);
                }
              }
            }
          }
          &:where(.dark, .dark *) {
            &:focus-visible {
              --tw-ring-color: var(--color-400);
              @supports (color: color-mix(in lab, red, red)) {
                --tw-ring-color: color-mix(in oklab, var(--color-400) 40%, transparent);
              }
            }
          }
        }
        & > .fi-icon {
          color: var(--color-600);
          &:where(.dark, .dark *) {
            color: var(--color-400);
          }
        }
      }
    }
    &:not(.fi-outlined) {
      background-color: var(--color-white);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--gray-50);
          }
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              background-color: color-mix(in srgb, #fff 10%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
              }
            }
          }
        }
      }
      input:checked + label& {
        background-color: var(--gray-400);
        color: var(--color-white);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        &:where(.dark, .dark *) {
          background-color: var(--gray-600);
        }
        &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--gray-300);
            }
          }
          &:where(.dark, .dark *) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--gray-500);
              }
            }
          }
        }
      }
      &.fi-color {
        &:not(label) {
          background-color: var(--bg);
          color: var(--text);
          &:where(.dark, .dark *) {
            background-color: var(--dark-bg);
          }
          &:where(.dark, .dark *) {
            color: var(--dark-text);
          }
          &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
            &:hover {
              @media (hover: hover) {
                background-color: var(--hover-bg);
              }
            }
            &:hover {
              @media (hover: hover) {
                color: var(--hover-text);
              }
            }
            &:focus-visible {
              --tw-ring-color: var(--color-500);
              @supports (color: color-mix(in lab, red, red)) {
                --tw-ring-color: color-mix(in oklab, var(--color-500) 50%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              &:hover {
                @media (hover: hover) {
                  background-color: var(--dark-hover-bg);
                }
              }
            }
            &:where(.dark, .dark *) {
              &:hover {
                @media (hover: hover) {
                  color: var(--dark-hover-text);
                }
              }
            }
            &:where(.dark, .dark *) {
              &:focus-visible {
                --tw-ring-color: var(--color-400);
                @supports (color: color-mix(in lab, red, red)) {
                  --tw-ring-color: color-mix(in oklab, var(--color-400) 50%, transparent);
                }
              }
            }
          }
          & > .fi-icon {
            color: var(--text);
            &:where(.dark, .dark *) {
              color: var(--dark-text);
            }
          }
        }
        label& {
          input:checked + & {
            background-color: var(--bg);
            color: var(--text);
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            &:where(.dark, .dark *) {
              background-color: var(--dark-bg);
            }
            &:where(.dark, .dark *) {
              color: var(--dark-text);
            }
          }
          &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
            input:checked + & {
              &:hover {
                @media (hover: hover) {
                  background-color: var(--hover-bg);
                }
              }
              &:hover {
                @media (hover: hover) {
                  color: var(--hover-text);
                }
              }
              &:where(.dark, .dark *) {
                &:hover {
                  @media (hover: hover) {
                    background-color: var(--dark-hover-bg);
                  }
                }
              }
              &:where(.dark, .dark *) {
                &:hover {
                  @media (hover: hover) {
                    color: var(--dark-hover-text);
                  }
                }
              }
            }
            input:focus-visible + & {
              z-index: 10;
              --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
              --tw-ring-color: var(--gray-950);
              @supports (color: color-mix(in lab, red, red)) {
                --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
              }
              &:where(.dark, .dark *) {
                --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
                @supports (color: color-mix(in lab, red, red)) {
                  --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
                }
              }
            }
            input:checked:focus-visible + & {
              --tw-ring-color: var(--color-500);
              @supports (color: color-mix(in lab, red, red)) {
                --tw-ring-color: color-mix(in oklab, var(--color-500) 50%, transparent);
              }
              &:where(.dark, .dark *) {
                --tw-ring-color: var(--color-400);
                @supports (color: color-mix(in lab, red, red)) {
                  --tw-ring-color: color-mix(in oklab, var(--color-400) 50%, transparent);
                }
              }
            }
          }
        }
      }
    }
    label& {
      cursor: pointer;
      & > .fi-icon:is(:checked + label > .fi-icon) {
        color: var(--text);
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
      }
    }
    &:not(.fi-color), label& {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    &.fi-labeled-from-sm, &.fi-labeled-from-md, &.fi-labeled-from-lg, &.fi-labeled-from-xl, &.fi-labeled-from-2xl {
      display: none;
    }
    &.fi-labeled-from-sm {
      @media (width >= 40rem) {
        display: inline-grid;
      }
    }
    &.fi-labeled-from-md {
      @media (width >= 48rem) {
        display: inline-grid;
      }
    }
    &.fi-labeled-from-lg {
      @media (width >= 64rem) {
        display: inline-grid;
      }
    }
    &.fi-labeled-from-xl {
      @media (width >= 80rem) {
        display: inline-grid;
      }
    }
    &.fi-labeled-from-2xl {
      @media (width >= 96rem) {
        display: inline-grid;
      }
    }
    & .fi-btn-badge-ctn {
      position: absolute;
      inset-inline-start: 100%;
      top: 0px;
      z-index: 1;
      display: flex;
      width: max-content;
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      border-radius: var(--radius-md);
      background-color: var(--color-white);
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-translate-x: calc(1 / 2 * 100%);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
  }
  .fi-btn-group {
    display: grid;
    grid-auto-flow: column;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    & > .fi-btn {
      flex: 1;
      border-radius: 0;
      &:nth-child(1 of .fi-btn) {
        border-start-start-radius: var(--radius-lg);
        border-end-start-radius: var(--radius-lg);
      }
      &:nth-last-child(1 of .fi-btn) {
        border-start-end-radius: var(--radius-lg);
        border-end-end-radius: var(--radius-lg);
      }
      &:not(:nth-child(1 of .fi-btn)) {
        --tw-shadow: -1px 0 0 0 var(--tw-shadow-color, var(--color-gray-200));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
          --tw-shadow: 1px 0 0 0 var(--tw-shadow-color, var(--color-gray-200));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &:where(.dark, .dark *) {
          --tw-shadow: -1px 0 0 0 var(--tw-shadow-color, rgba(255,255,255,0.2));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
          &:where(.dark, .dark *) {
            --tw-shadow: 1px 0 0 0 var(--tw-shadow-color, rgba(255,255,255,0.2));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
        }
      }
      &:not(:nth-last-child(1 of .fi-btn)) {
        margin-inline-end: 1px;
      }
      &.fi-processing:enabled {
        cursor: wait;
        opacity: 70%;
      }
      &:not(.fi-outlined) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:not(.fi-color), label& {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .fi-callout {
    display: flex;
    width: 100%;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & .fi-callout-icon {
      color: var(--gray-400);
      &.fi-color {
        color: var(--color-400);
      }
    }
    & .fi-callout-main {
      margin-top: calc(var(--spacing) * 0.5);
      display: grid;
      flex: 1;
      gap: calc(var(--spacing) * 3);
    }
    & .fi-callout-text {
      display: grid;
      gap: var(--spacing);
    }
    & .fi-callout-heading {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-callout-description {
      overflow: hidden;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      text-wrap: pretty;
      overflow-wrap: break-word;
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      & > p:not(:first-of-type) {
        margin-top: var(--spacing);
      }
    }
    & .fi-callout-footer {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--spacing) * 3);
    }
    & .fi-callout-controls {
      align-self: flex-start;
    }
    &.fi-color {
      --tw-ring-color: var(--color-600);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-600) 20%, transparent);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: var(--color-400);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-400) 30%, transparent);
        }
      }
      background-color: white;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, white 90%, var(--color-400));
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix( in oklab, var(--gray-900) 90%, var(--color-400) );
        }
      }
      & .fi-callout-description {
        color: var(--gray-700);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--gray-700) 75%, transparent);
        }
        &:where(.dark, .dark *) {
          color: var(--gray-300);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--gray-300) 75%, transparent);
          }
        }
      }
    }
  }
  .fi-dropdown-header {
    display: flex;
    width: 100%;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    & .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & span {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: start;
      color: var(--gray-700);
      &:where(.dark, .dark *) {
        color: var(--gray-200);
      }
    }
    &.fi-color {
      & .fi-icon {
        color: var(--color-500);
        &:where(.dark, .dark *) {
          color: var(--color-400);
        }
      }
      & span {
        color: var(--text);
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
      }
    }
  }
  :scope .fi-dropdown-trigger {
    display: flex;
    cursor: pointer;
  }
  :scope .fi-dropdown-panel {
    position: absolute;
    z-index: 20;
    width: 100vw;
    max-width: 14rem !important;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:not(.fi-dropdown-list) {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-100);
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &.fi-opacity-0 {
      opacity: 0%;
    }
    &.fi-width-3xs {
      max-width: var(--container-3xs) !important;
    }
    &.fi-width-2xs {
      max-width: var(--container-2xs) !important;
    }
    &.fi-width-xs {
      max-width: var(--container-xs) !important;
    }
    &.fi-width-sm {
      max-width: var(--container-sm) !important;
    }
    &.fi-width-md {
      max-width: var(--container-md) !important;
    }
    &.fi-width-lg {
      max-width: var(--container-lg) !important;
    }
    &.fi-width-xl {
      max-width: var(--container-xl) !important;
    }
    &.fi-width-2xl {
      max-width: var(--container-2xl) !important;
    }
    &.fi-width-3xl {
      max-width: var(--container-3xl) !important;
    }
    &.fi-width-4xl {
      max-width: var(--container-4xl) !important;
    }
    &.fi-width-5xl {
      max-width: var(--container-5xl) !important;
    }
    &.fi-width-6xl {
      max-width: var(--container-6xl) !important;
    }
    &.fi-width-7xl {
      max-width: var(--container-7xl) !important;
    }
    &.fi-width-none {
      max-width: none !important;
    }
    &.fi-width-container {
      width: 100% !important;
      @media (width >= 40rem) {
        max-width: 40rem !important;
      }
      @media (width >= 48rem) {
        max-width: 48rem !important;
      }
      @media (width >= 64rem) {
        max-width: 64rem !important;
      }
      @media (width >= 80rem) {
        max-width: 80rem !important;
      }
      @media (width >= 96rem) {
        max-width: 96rem !important;
      }
    }
    &.fi-scrollable {
      overflow-y: auto;
    }
  }
  .fi-dropdown-list {
    display: grid;
    gap: 1px;
    padding: var(--spacing);
    & > .fi-grid {
      overflow-x: hidden;
    }
  }
  .fi-dropdown-list-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-outline-style: none;
    outline-style: none;
    -webkit-user-select: none;
    user-select: none;
    &:not(.fi-disabled):not([disabled]) {
      &:hover {
        @media (hover: hover) {
          background-color: var(--gray-50);
        }
      }
      &:focus-visible {
        background-color: var(--gray-50);
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
      &.fi-selected {
        background-color: var(--gray-50);
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &.fi-disabled, &[disabled] {
      cursor: default;
      opacity: 70%;
      &:not([x-tooltip]) {
        pointer-events: none;
      }
    }
    & .fi-icon {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
    }
    & .fi-dropdown-list-item-image {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      border-radius: calc(infinity * 1px);
      background-size: cover;
      background-position: center;
    }
    & > .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &.fi-color {
        color: var(--color-500);
        &:where(.dark, .dark *) {
          color: var(--color-400);
        }
      }
    }
    &.fi-color {
      &:not(.fi-disabled):not([disabled]) {
        &:hover {
          @media (hover: hover) {
            background-color: var(--color-50);
          }
        }
        &:focus-visible {
          background-color: var(--color-50);
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              background-color: var(--color-400);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-400) 10%, transparent);
              }
            }
          }
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            background-color: var(--color-400);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-400) 10%, transparent);
            }
          }
        }
        &.fi-selected {
          background-color: var(--color-50);
          &:where(.dark, .dark *) {
            background-color: var(--color-400);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-400) 10%, transparent);
            }
          }
        }
      }
      & .fi-dropdown-list-item-label {
        color: var(--text);
        &:hover {
          @media (hover: hover) {
            color: var(--hover-text);
          }
        }
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              color: var(--dark-hover-text);
            }
          }
        }
        &.fi-selected {
          color: var(--hover-text);
          &:where(.dark, .dark *) {
            color: var(--dark-hover-text);
          }
        }
      }
    }
    & .fi-badge {
      min-width: 1.25rem;
      padding-inline: calc(var(--spacing) * 1.5);
      padding-block: calc(var(--spacing) * 0.5);
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
    }
  }
  .fi-dropdown-list-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
    color: var(--gray-700);
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
  }
  .fi-dropdown-list-item-badge-placeholder {
    display: flex;
    align-items: center;
    color: var(--gray-400);
    &:where(.dark, .dark *) {
      color: var(--gray-500);
    }
  }
  .fi-empty-state {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    &:not(.fi-empty-state-not-contained) {
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-empty-state-content {
      margin-inline: auto;
      display: grid;
      max-width: var(--container-lg);
      justify-items: center;
      text-align: center;
    }
    & .fi-empty-state-text-ctn {
      display: grid;
      justify-items: center;
      text-align: center;
    }
    & .fi-empty-state-icon-bg {
      margin-bottom: calc(var(--spacing) * 4);
      border-radius: calc(infinity * 1px);
      background-color: var(--gray-100);
      padding: calc(var(--spacing) * 3);
      &:where(.dark, .dark *) {
        background-color: var(--gray-500);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--gray-500) 20%, transparent);
        }
      }
      &.fi-color {
        background-color: var(--color-100);
        &:where(.dark, .dark *) {
          background-color: var(--color-500);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-500) 20%, transparent);
          }
        }
      }
      & .fi-icon {
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
        &.fi-color {
          color: var(--color-500);
          &:where(.dark, .dark *) {
            color: var(--color-400);
          }
        }
      }
    }
    & .fi-empty-state-heading {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-empty-state-description {
      margin-top: var(--spacing);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-empty-state-footer {
      margin-top: calc(var(--spacing) * 6);
    }
    &.fi-compact {
      padding-block: calc(var(--spacing) * 6);
      & .fi-empty-state-content {
        margin-inline: 0px;
        display: flex;
        max-width: none;
        align-items: flex-start;
        gap: calc(var(--spacing) * 4);
        text-align: start;
      }
      & .fi-empty-state-icon-bg {
        margin-bottom: 0px;
        flex-shrink: 0;
      }
      & .fi-empty-state-text-ctn {
        flex: 1;
        justify-items: start;
        text-align: start;
      }
      & .fi-empty-state-description {
        margin-top: var(--spacing);
      }
      & .fi-empty-state-footer {
        margin-top: calc(var(--spacing) * 4);
      }
    }
  }
  .fi-fieldset > legend {
    margin-inline-start: calc(var(--spacing) * -2);
    padding-inline: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    & .fi-fieldset-label-required-mark {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--danger-600);
      &:where(.dark, .dark *) {
        color: var(--danger-400);
      }
    }
  }
  .fi-fieldset.fi-fieldset-label-hidden > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .fi-fieldset:not(.fi-fieldset-not-contained) {
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--gray-200);
    padding: calc(var(--spacing) * 6);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-fieldset.fi-fieldset-not-contained {
    padding-top: calc(var(--spacing) * 6);
  }
  .fi-grid:not(.fi-grid-direction-col) {
    display: grid;
    grid-template-columns: var(--cols-default);
    &.sm\:fi-grid-cols {
      @media (width >= 40rem) {
        grid-template-columns: var(--cols-sm);
      }
    }
    &.md\:fi-grid-cols {
      @media (width >= 48rem) {
        grid-template-columns: var(--cols-md);
      }
    }
    &.lg\:fi-grid-cols {
      @media (width >= 64rem) {
        grid-template-columns: var(--cols-lg);
      }
    }
    &.xl\:fi-grid-cols {
      @media (width >= 80rem) {
        grid-template-columns: var(--cols-xl);
      }
    }
    &.\32xl\:fi-grid-cols {
      @media (width >= 96rem) {
        grid-template-columns: var(--cols-2xl);
      }
    }
    @supports (container-type: inline-size) {
      &.\@3xs\:fi-grid-cols {
        @container (width >= 16rem) {
          grid-template-columns: var(--cols-c3xs);
        }
      }
      &.\@2xs\:fi-grid-cols {
        @container (width >= 18rem) {
          grid-template-columns: var(--cols-c2xs);
        }
      }
      &.\@xs\:fi-grid-cols {
        @container (width >= 20rem) {
          grid-template-columns: var(--cols-cxs);
        }
      }
      &.\@sm\:fi-grid-cols {
        @container (width >= 24rem) {
          grid-template-columns: var(--cols-csm);
        }
      }
      &.\@md\:fi-grid-cols {
        @container (width >= 28rem) {
          grid-template-columns: var(--cols-cmd);
        }
      }
      &.\@lg\:fi-grid-cols {
        @container (width >= 32rem) {
          grid-template-columns: var(--cols-clg);
        }
      }
      &.\@xl\:fi-grid-cols {
        @container (width >= 36rem) {
          grid-template-columns: var(--cols-cxl);
        }
      }
      &.\@2xl\:fi-grid-cols {
        @container (width >= 42rem) {
          grid-template-columns: var(--cols-c2xl);
        }
      }
      &.\@3xl\:fi-grid-cols {
        @container (width >= 48rem) {
          grid-template-columns: var(--cols-c3xl);
        }
      }
      &.\@4xl\:fi-grid-cols {
        @container (width >= 56rem) {
          grid-template-columns: var(--cols-c4xl);
        }
      }
      &.\@5xl\:fi-grid-cols {
        @container (width >= 64rem) {
          grid-template-columns: var(--cols-c5xl);
        }
      }
      &.\@6xl\:fi-grid-cols {
        @container (width >= 72rem) {
          grid-template-columns: var(--cols-c6xl);
        }
      }
      &.\@7xl\:fi-grid-cols {
        @container (width >= 80rem) {
          grid-template-columns: var(--cols-c7xl);
        }
      }
    }
    @supports not (container-type: inline-size) {
      &.\!\@sm\:fi-grid-cols {
        @media (width >= 40rem) {
          grid-template-columns: var(--cols-ncsm);
        }
      }
      &.\!\@md\:fi-grid-cols {
        @media (width >= 48rem) {
          grid-template-columns: var(--cols-ncmd);
        }
      }
      &.\!\@lg\:fi-grid-cols {
        @media (width >= 64rem) {
          grid-template-columns: var(--cols-nclg);
        }
      }
      &.\!\@xl\:fi-grid-cols {
        @media (width >= 80rem) {
          grid-template-columns: var(--cols-ncxl);
        }
      }
      &.\!\@2xl\:fi-grid-cols {
        @media (width >= 96rem) {
          grid-template-columns: var(--cols-nc2xl);
        }
      }
    }
  }
  .fi-grid.fi-grid-direction-col {
    columns: var(--cols-default);
    &.sm\:fi-grid-cols {
      @media (width >= 40rem) {
        columns: var(--cols-sm);
      }
    }
    &.md\:fi-grid-cols {
      @media (width >= 48rem) {
        columns: var(--cols-md);
      }
    }
    &.lg\:fi-grid-cols {
      @media (width >= 64rem) {
        columns: var(--cols-lg);
      }
    }
    &.xl\:fi-grid-cols {
      @media (width >= 80rem) {
        columns: var(--cols-xl);
      }
    }
    &.\32xl\:fi-grid-cols {
      @media (width >= 96rem) {
        columns: var(--cols-2xl);
      }
    }
    @supports (container-type: inline-size) {
      &.\@3xs\:fi-grid-cols {
        @container (width >= 16rem) {
          columns: var(--cols-c3xs);
        }
      }
      &.\@2xs\:fi-grid-cols {
        @container (width >= 18rem) {
          columns: var(--cols-c2xs);
        }
      }
      &.\@xs\:fi-grid-cols {
        @container (width >= 20rem) {
          columns: var(--cols-cxs);
        }
      }
      &.\@sm\:fi-grid-cols {
        @container (width >= 24rem) {
          columns: var(--cols-csm);
        }
      }
      &.\@md\:fi-grid-cols {
        @container (width >= 28rem) {
          columns: var(--cols-cmd);
        }
      }
      &.\@lg\:fi-grid-cols {
        @container (width >= 32rem) {
          columns: var(--cols-clg);
        }
      }
      &.\@xl\:fi-grid-cols {
        @container (width >= 36rem) {
          columns: var(--cols-cxl);
        }
      }
      &.\@2xl\:fi-grid-cols {
        @container (width >= 42rem) {
          columns: var(--cols-c2xl);
        }
      }
      &.\@3xl\:fi-grid-cols {
        @container (width >= 48rem) {
          columns: var(--cols-c3xl);
        }
      }
      &.\@4xl\:fi-grid-cols {
        @container (width >= 56rem) {
          columns: var(--cols-c4xl);
        }
      }
      &.\@5xl\:fi-grid-cols {
        @container (width >= 64rem) {
          columns: var(--cols-c5xl);
        }
      }
      &.\@6xl\:fi-grid-cols {
        @container (width >= 72rem) {
          columns: var(--cols-c6xl);
        }
      }
      &.\@7xl\:fi-grid-cols {
        @container (width >= 80rem) {
          columns: var(--cols-c7xl);
        }
      }
    }
    @supports not (container-type: inline-size) {
      &.\!\@sm\:fi-grid-cols {
        @media (width >= 40rem) {
          columns: var(--cols-ncsm);
        }
      }
      &.\!\@md\:fi-grid-cols {
        @media (width >= 48rem) {
          columns: var(--cols-ncmd);
        }
      }
      &.\!\@lg\:fi-grid-cols {
        @media (width >= 64rem) {
          columns: var(--cols-nclg);
        }
      }
      &.\!\@xl\:fi-grid-cols {
        @media (width >= 80rem) {
          columns: var(--cols-ncxl);
        }
      }
      &.\!\@2xl\:fi-grid-cols {
        @media (width >= 96rem) {
          columns: var(--cols-nc2xl);
        }
      }
    }
  }
  @supports (container-type: inline-size) {
    .fi-grid-ctn {
      container-type: inline-size;
    }
  }
  .fi-grid-col {
    grid-column: var(--col-span-default);
    &.sm\:fi-grid-col-span {
      @media (width >= 40rem) {
        grid-column: var(--col-span-sm);
      }
    }
    &.md\:fi-grid-col-span {
      @media (width >= 48rem) {
        grid-column: var(--col-span-md);
      }
    }
    &.lg\:fi-grid-col-span {
      @media (width >= 64rem) {
        grid-column: var(--col-span-lg);
      }
    }
    &.xl\:fi-grid-col-span {
      @media (width >= 80rem) {
        grid-column: var(--col-span-xl);
      }
    }
    &.\32xl\:fi-grid-col-span {
      @media (width >= 96rem) {
        grid-column: var(--col-span-2xl);
      }
    }
    @supports (container-type: inline-size) {
      &.\@3xs\:fi-grid-col-span {
        @container (width >= 16rem) {
          grid-column: var(--col-span-c3xs);
        }
      }
      &.\@2xs\:fi-grid-col-span {
        @container (width >= 18rem) {
          grid-column: var(--col-span-c2xs);
        }
      }
      &.\@xs\:fi-grid-col-span {
        @container (width >= 20rem) {
          grid-column: var(--col-span-cxs);
        }
      }
      &.\@sm\:fi-grid-col-span {
        @container (width >= 24rem) {
          grid-column: var(--col-span-csm);
        }
      }
      &.\@md\:fi-grid-col-span {
        @container (width >= 28rem) {
          grid-column: var(--col-span-cmd);
        }
      }
      &.\@lg\:fi-grid-col-span {
        @container (width >= 32rem) {
          grid-column: var(--col-span-clg);
        }
      }
      &.\@xl\:fi-grid-col-span {
        @container (width >= 36rem) {
          grid-column: var(--col-span-cxl);
        }
      }
      &.\@2xl\:fi-grid-col-span {
        @container (width >= 42rem) {
          grid-column: var(--col-span-c2xl);
        }
      }
      &.\@3xl\:fi-grid-col-span {
        @container (width >= 48rem) {
          grid-column: var(--col-span-c3xl);
        }
      }
      &.\@4xl\:fi-grid-col-span {
        @container (width >= 56rem) {
          grid-column: var(--col-span-c4xl);
        }
      }
      &.\@5xl\:fi-grid-col-span {
        @container (width >= 64rem) {
          grid-column: var(--col-span-c5xl);
        }
      }
      &.\@6xl\:fi-grid-col-span {
        @container (width >= 72rem) {
          grid-column: var(--col-span-c6xl);
        }
      }
      &.\@7xl\:fi-grid-col-span {
        @container (width >= 80rem) {
          grid-column: var(--col-span-c7xl);
        }
      }
    }
    @supports not (container-type: inline-size) {
      &.\!\@sm\:fi-grid-col-span {
        @media (width >= 40rem) {
          grid-column: var(--col-span-ncsm);
        }
      }
      &.\!\@md\:fi-grid-col-span {
        @media (width >= 48rem) {
          grid-column: var(--col-span-ncmd);
        }
      }
      &.\!\@lg\:fi-grid-col-span {
        @media (width >= 64rem) {
          grid-column: var(--col-span-nclg);
        }
      }
      &.\!\@xl\:fi-grid-col-span {
        @media (width >= 80rem) {
          grid-column: var(--col-span-ncxl);
        }
      }
      &.\!\@2xl\:fi-grid-col-span {
        @media (width >= 96rem) {
          grid-column: var(--col-span-nc2xl);
        }
      }
    }
    &.fi-grid-col-start {
      grid-column-start: var(--col-start-default);
    }
    &.sm\:fi-grid-col-start {
      @media (width >= 40rem) {
        grid-column-start: var(--col-start-sm);
      }
    }
    &.md\:fi-grid-col-start {
      @media (width >= 48rem) {
        grid-column-start: var(--col-start-md);
      }
    }
    &.lg\:fi-grid-col-start {
      @media (width >= 64rem) {
        grid-column-start: var(--col-start-lg);
      }
    }
    &.xl\:fi-grid-col-start {
      @media (width >= 80rem) {
        grid-column-start: var(--col-start-xl);
      }
    }
    &.\32xl\:fi-grid-col-start {
      @media (width >= 96rem) {
        grid-column-start: var(--col-start-2xl);
      }
    }
    @supports (container-type: inline-size) {
      &.\@3xs\:fi-grid-col-start {
        @container (width >= 16rem) {
          grid-column-start: var(--col-start-c3xs);
        }
      }
      &.\@2xs\:fi-grid-col-start {
        @container (width >= 18rem) {
          grid-column-start: var(--col-start-c2xs);
        }
      }
      &.\@xs\:fi-grid-col-start {
        @container (width >= 20rem) {
          grid-column-start: var(--col-start-cxs);
        }
      }
      &.\@sm\:fi-grid-col-start {
        @container (width >= 24rem) {
          grid-column-start: var(--col-start-csm);
        }
      }
      &.\@md\:fi-grid-col-start {
        @container (width >= 28rem) {
          grid-column-start: var(--col-start-cmd);
        }
      }
      &.\@lg\:fi-grid-col-start {
        @container (width >= 32rem) {
          grid-column-start: var(--col-start-clg);
        }
      }
      &.\@xl\:fi-grid-col-start {
        @container (width >= 36rem) {
          grid-column-start: var(--col-start-cxl);
        }
      }
      &.\@2xl\:fi-grid-col-start {
        @container (width >= 42rem) {
          grid-column-start: var(--col-start-c2xl);
        }
      }
      &.\@3xl\:fi-grid-col-start {
        @container (width >= 48rem) {
          grid-column-start: var(--col-start-c3xl);
        }
      }
      &.\@4xl\:fi-grid-col-start {
        @container (width >= 56rem) {
          grid-column-start: var(--col-start-c4xl);
        }
      }
      &.\@5xl\:fi-grid-col-start {
        @container (width >= 64rem) {
          grid-column-start: var(--col-start-c5xl);
        }
      }
      &.\@6xl\:fi-grid-col-start {
        @container (width >= 72rem) {
          grid-column-start: var(--col-start-c6xl);
        }
      }
      &.\@7xl\:fi-grid-col-start {
        @container (width >= 80rem) {
          grid-column-start: var(--col-start-c7xl);
        }
      }
    }
    @supports not (container-type: inline-size) {
      &.\!\@sm\:fi-grid-col-start {
        @media (width >= 40rem) {
          grid-column-start: var(--col-start-ncsm);
        }
      }
      &.\!\@md\:fi-grid-col-start {
        @media (width >= 48rem) {
          grid-column-start: var(--col-start-ncmd);
        }
      }
      &.\!\@lg\:fi-grid-col-start {
        @media (width >= 64rem) {
          grid-column-start: var(--col-start-nclg);
        }
      }
      &.\!\@xl\:fi-grid-col-start {
        @media (width >= 80rem) {
          grid-column-start: var(--col-start-ncxl);
        }
      }
      &.\!\@2xl\:fi-grid-col-start {
        @media (width >= 96rem) {
          grid-column-start: var(--col-start-nc2xl);
        }
      }
    }
    &.fi-grid-col-order {
      order: var(--col-order-default);
    }
    &.sm\:fi-grid-col-order {
      @media (width >= 40rem) {
        order: var(--col-order-sm);
      }
    }
    &.md\:fi-grid-col-order {
      @media (width >= 48rem) {
        order: var(--col-order-md);
      }
    }
    &.lg\:fi-grid-col-order {
      @media (width >= 64rem) {
        order: var(--col-order-lg);
      }
    }
    &.xl\:fi-grid-col-order {
      @media (width >= 80rem) {
        order: var(--col-order-xl);
      }
    }
    &.\32xl\:fi-grid-col-order {
      @media (width >= 96rem) {
        order: var(--col-order-2xl);
      }
    }
    @supports (container-type: inline-size) {
      &.\@3xs\:fi-grid-col-order {
        @container (width >= 16rem) {
          order: var(--col-order-c3xs);
        }
      }
      &.\@2xs\:fi-grid-col-order {
        @container (width >= 18rem) {
          order: var(--col-order-c2xs);
        }
      }
      &.\@xs\:fi-grid-col-order {
        @container (width >= 20rem) {
          order: var(--col-order-cxs);
        }
      }
      &.\@sm\:fi-grid-col-order {
        @container (width >= 24rem) {
          order: var(--col-order-csm);
        }
      }
      &.\@md\:fi-grid-col-order {
        @container (width >= 28rem) {
          order: var(--col-order-cmd);
        }
      }
      &.\@lg\:fi-grid-col-order {
        @container (width >= 32rem) {
          order: var(--col-order-clg);
        }
      }
      &.\@xl\:fi-grid-col-order {
        @container (width >= 36rem) {
          order: var(--col-order-cxl);
        }
      }
      &.\@2xl\:fi-grid-col-order {
        @container (width >= 42rem) {
          order: var(--col-order-c2xl);
        }
      }
      &.\@3xl\:fi-grid-col-order {
        @container (width >= 48rem) {
          order: var(--col-order-c3xl);
        }
      }
      &.\@4xl\:fi-grid-col-order {
        @container (width >= 56rem) {
          order: var(--col-order-c4xl);
        }
      }
      &.\@5xl\:fi-grid-col-order {
        @container (width >= 64rem) {
          order: var(--col-order-c5xl);
        }
      }
      &.\@6xl\:fi-grid-col-order {
        @container (width >= 72rem) {
          order: var(--col-order-c6xl);
        }
      }
      &.\@7xl\:fi-grid-col-order {
        @container (width >= 80rem) {
          order: var(--col-order-c7xl);
        }
      }
    }
    @supports not (container-type: inline-size) {
      &.\!\@sm\:fi-grid-col-order {
        @media (width >= 40rem) {
          order: var(--col-order-ncsm);
        }
      }
      &.\!\@md\:fi-grid-col-order {
        @media (width >= 48rem) {
          order: var(--col-order-ncmd);
        }
      }
      &.\!\@lg\:fi-grid-col-order {
        @media (width >= 64rem) {
          order: var(--col-order-nclg);
        }
      }
      &.\!\@xl\:fi-grid-col-order {
        @media (width >= 80rem) {
          order: var(--col-order-ncxl);
        }
      }
      &.\!\@2xl\:fi-grid-col-order {
        @media (width >= 96rem) {
          order: var(--col-order-nc2xl);
        }
      }
    }
    &.fi-hidden {
      display: none;
    }
  }
  .fi-icon {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    &.fi-size-xs {
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 3);
    }
    &.fi-size-sm {
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
    }
    &.fi-size-md {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }
    &.fi-size-lg {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
    }
    &.fi-size-xl {
      width: calc(var(--spacing) * 7);
      height: calc(var(--spacing) * 7);
    }
    &.fi-size-2xl {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
    & > svg {
      height: inherit;
      width: inherit;
    }
  }
  .fi-icon-btn {
    position: relative;
    margin: calc(var(--spacing) * -2);
    display: flex;
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: var(--gray-500);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-outline-style: none;
    outline-style: none;
    &:where(.dark, .dark *) {
      color: var(--gray-500);
    }
    &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
      &:hover {
        @media (hover: hover) {
          color: var(--gray-600);
        }
      }
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus-visible {
        --tw-ring-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--gray-400);
          }
        }
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          --tw-ring-color: var(--primary-500);
        }
      }
    }
    &.fi-disabled:not(.fi-force-enabled), &[disabled]:not(.fi-force-enabled) {
      cursor: default;
      opacity: 70%;
      &:not([x-tooltip]) {
        pointer-events: none;
      }
    }
    &.fi-size-xs {
      width: calc(var(--spacing) * 7);
      height: calc(var(--spacing) * 7);
      &:has(.fi-icon.fi-size-sm) {
        margin: calc(var(--spacing) * -1.5);
      }
      &:has(.fi-icon.fi-size-md) {
        margin: calc(var(--spacing) * -1);
      }
      &:has(.fi-icon.fi-size-lg) {
        margin: calc(var(--spacing) * -0.5);
      }
    }
    &.fi-size-sm {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
      &:has(.fi-icon.fi-size-sm) {
        margin: calc(var(--spacing) * -2);
      }
      &:has(.fi-icon.fi-size-md) {
        margin: calc(var(--spacing) * -1.5);
      }
      &:has(.fi-icon.fi-size-lg) {
        margin: calc(var(--spacing) * -1);
      }
    }
    &.fi-size-md {
      &:has(.fi-icon.fi-size-sm) {
        margin: calc(var(--spacing) * -2.5);
      }
      &:has(.fi-icon.fi-size-lg) {
        margin: calc(var(--spacing) * -1.5);
      }
    }
    &.fi-size-lg {
      width: calc(var(--spacing) * 10);
      height: calc(var(--spacing) * 10);
      &:has(.fi-icon.fi-size-sm) {
        margin: calc(var(--spacing) * -3);
      }
      &:has(.fi-icon.fi-size-md) {
        margin: calc(var(--spacing) * -2.5);
      }
      &:has(.fi-icon.fi-size-lg) {
        margin: calc(var(--spacing) * -2);
      }
    }
    &.fi-size-xl {
      width: calc(var(--spacing) * 11);
      height: calc(var(--spacing) * 11);
      &:has(.fi-icon.fi-size-sm) {
        margin: calc(var(--spacing) * -3.5);
      }
      &:has(.fi-icon.fi-size-md) {
        margin: calc(var(--spacing) * -3);
      }
      &:has(.fi-icon.fi-size-lg) {
        margin: calc(var(--spacing) * -2.5);
      }
    }
    &.fi-color {
      color: var(--text);
      &:where(.dark, .dark *) {
        color: var(--dark-text);
      }
      &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
        &:hover {
          @media (hover: hover) {
            color: var(--hover-text);
          }
        }
        &:focus-visible {
          --tw-ring-color: var(--color-600);
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              color: var(--dark-hover-text);
            }
          }
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            --tw-ring-color: var(--color-500);
          }
        }
      }
    }
    & > .fi-icon-btn-badge-ctn {
      position: absolute;
      inset-inline-start: 100%;
      top: var(--spacing);
      z-index: 1;
      display: flex;
      width: max-content;
      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      border-radius: var(--radius-md);
      background-color: var(--color-white);
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-translate-x: calc(1 / 2 * 100%);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
    &:has(+ .fi-btn.fi-labeled-from-sm) {
      @media (width >= 40rem) {
        display: none;
      }
    }
    &:has(+ .fi-btn.fi-labeled-from-md) {
      @media (width >= 48rem) {
        display: none;
      }
    }
    &:has(+ .fi-btn.fi-labeled-from-lg) {
      @media (width >= 64rem) {
        display: none;
      }
    }
    &:has(+ .fi-btn.fi-labeled-from-xl) {
      @media (width >= 80rem) {
        display: none;
      }
    }
    &:has(+ .fi-btn.fi-labeled-from-2xl) {
      @media (width >= 96rem) {
        display: none;
      }
    }
  }
  input[type='checkbox'].fi-checkbox-input {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    appearance: none;
    border-radius: 0.25rem;
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-white);
    vertical-align: middle;
    color: var(--primary-600);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:checked {
      background-color: var(--primary-600);
    }
    &:checked {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--primary-600);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:checked {
      &:focus {
        --tw-ring-color: var(--primary-500);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--primary-500) 50%, transparent);
        }
      }
    }
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      background-color: var(--gray-50);
    }
    &:disabled {
      color: var(--gray-50);
    }
    &:disabled {
      &:checked {
        background-color: var(--gray-400);
      }
    }
    &:disabled {
      &:checked {
        color: var(--gray-400);
      }
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--primary-500);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      &:checked {
        background-color: var(--primary-500);
      }
    }
    &:where(.dark, .dark *) {
      &:focus {
        --tw-ring-color: var(--primary-500);
      }
    }
    &:where(.dark, .dark *) {
      &:checked {
        &:focus {
          --tw-ring-color: var(--primary-400);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--primary-400) 50%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        background-color: transparent;
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        &:checked {
          background-color: var(--gray-600);
        }
      }
    }
    &:checked {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
    }
    &:indeterminate {
      background-color: var(--primary-600);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      &:where(.dark, .dark *) {
        background-color: var(--primary-500);
      }
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.75a1.25 1.25 0 0 0 0 2.5h7a1.25 1.25 0 0 0 0-2.5h-7z'/%3E%3C/svg%3E");
      &:focus {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--primary-500);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--primary-500) 50%, transparent);
        }
        &:where(.dark, .dark *) {
          --tw-ring-color: var(--primary-400);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--primary-400) 50%, transparent);
          }
        }
      }
      &:disabled {
        background-color: var(--gray-400);
        &:where(.dark, .dark *) {
          background-color: var(--gray-600);
        }
      }
    }
    &.fi-invalid {
      color: var(--danger-600);
      --tw-ring-color: var(--danger-600);
      &:checked {
        background-color: var(--danger-600);
      }
      &:focus {
        --tw-ring-color: var(--danger-600);
      }
      &:checked {
        &:focus {
          --tw-ring-color: var(--danger-500);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--danger-500) 50%, transparent);
          }
        }
      }
      &:where(.dark, .dark *) {
        color: var(--danger-500);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: var(--danger-500);
      }
      &:where(.dark, .dark *) {
        &:checked {
          background-color: var(--danger-500);
        }
      }
      &:where(.dark, .dark *) {
        &:focus {
          --tw-ring-color: var(--danger-500);
        }
      }
      &:where(.dark, .dark *) {
        &:checked {
          &:focus {
            --tw-ring-color: var(--danger-400);
            @supports (color: color-mix(in lab, red, red)) {
              --tw-ring-color: color-mix(in oklab, var(--danger-400) 50%, transparent);
            }
          }
        }
      }
      &:indeterminate {
        background-color: var(--danger-600);
        &:where(.dark, .dark *) {
          background-color: var(--danger-500);
        }
        &:focus {
          --tw-ring-color: var(--danger-500);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--danger-500) 50%, transparent);
          }
          &:where(.dark, .dark *) {
            --tw-ring-color: var(--danger-400);
            @supports (color: color-mix(in lab, red, red)) {
              --tw-ring-color: color-mix(in oklab, var(--danger-400) 50%, transparent);
            }
          }
        }
      }
    }
  }
  input.fi-input {
    display: block;
    width: 100%;
    appearance: none;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--gray-950);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &::placeholder {
      color: var(--gray-400);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      color: var(--gray-500);
    }
    &:disabled {
      -webkit-text-fill-color: var(--color-gray-500);
    }
    &:disabled {
      &::placeholder {
        -webkit-text-fill-color: var(--color-gray-400);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--gray-500);
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        color: var(--gray-400);
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        -webkit-text-fill-color: var(--color-gray-400);
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        &::placeholder {
          -webkit-text-fill-color: var(--color-gray-500);
        }
      }
    }
    @supports (-webkit-touch-callout: none) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    &.fi-input-has-inline-prefix {
      padding-inline-start: 0px;
    }
    &.fi-input-has-inline-suffix {
      padding-inline-end: 0px;
    }
    &.fi-align-center {
      text-align: center;
    }
    &.fi-align-end {
      text-align: end;
    }
    &.fi-align-left {
      text-align: left;
    }
    &.fi-align-right {
      text-align: end;
    }
    &.fi-align-justify, &.fi-align-between {
      text-align: justify;
    }
  }
  input[type='date'].fi-input, input[type='datetime-local'].fi-input, input[type='time'].fi-input {
    background-color: color-mix(in srgb, #fff 1%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
    }
  }
  input[type='range'].fi-input {
    margin-inline: auto;
    appearance: auto;
    width: calc(100% - 1.5rem);
  }
  .fi-one-time-code-input-ctn {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    & > .fi-one-time-code-input-digit {
      height: calc(var(--spacing) * 11);
      width: calc(var(--spacing) * 10);
      border-radius: var(--radius-lg);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      background-color: var(--color-white);
      text-align: center;
      font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:focus {
        border-color: var(--primary-600);
      }
      &:focus {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus {
        --tw-ring-color: var(--primary-600);
      }
      &:focus {
        --tw-outline-style: none;
        outline-style: none;
      }
      &:disabled {
        pointer-events: none;
      }
      &:disabled {
        color: var(--gray-500);
      }
      &:disabled {
        opacity: 70%;
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &:where(.dark, .dark *) {
        &:focus {
          border-color: var(--primary-500);
        }
      }
      &:where(.dark, .dark *) {
        &:focus {
          --tw-ring-color: var(--primary-500);
        }
      }
    }
  }
  input[type='radio'].fi-radio-input {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    appearance: none;
    border-radius: calc(infinity * 1px);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-white);
    color: var(--primary-600);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:checked {
      background-color: var(--primary-600);
    }
    &:checked {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-ring-color: var(--primary-600);
    }
    &:focus {
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:checked {
      &:focus {
        --tw-ring-color: var(--primary-500);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--primary-500) 50%, transparent);
        }
      }
    }
    &:disabled {
      background-color: var(--gray-50);
    }
    &:disabled {
      color: var(--gray-50);
    }
    &:disabled {
      &:checked {
        background-color: var(--gray-400);
      }
    }
    &:disabled {
      &:checked {
        color: var(--gray-400);
      }
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--primary-500);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      &:checked {
        background-color: var(--primary-500);
      }
    }
    &:where(.dark, .dark *) {
      &:focus {
        --tw-ring-color: var(--primary-500);
      }
    }
    &:where(.dark, .dark *) {
      &:checked {
        &:focus {
          --tw-ring-color: var(--primary-400);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--primary-400) 50%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        background-color: transparent;
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        &:checked {
          background-color: var(--gray-600);
        }
      }
    }
    &:checked {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
    }
    &.fi-invalid {
      color: var(--danger-600);
      --tw-ring-color: var(--danger-600);
      &:checked {
        background-color: var(--danger-600);
      }
      &:focus {
        --tw-ring-color: var(--danger-600);
      }
      &:checked {
        &:focus {
          --tw-ring-color: var(--danger-500);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--danger-500) 50%, transparent);
          }
        }
      }
      &:where(.dark, .dark *) {
        color: var(--danger-500);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: var(--danger-500);
      }
      &:where(.dark, .dark *) {
        &:checked {
          background-color: var(--danger-500);
        }
      }
      &:where(.dark, .dark *) {
        &:focus {
          --tw-ring-color: var(--danger-500);
        }
      }
      &:where(.dark, .dark *) {
        &:checked {
          &:focus {
            --tw-ring-color: var(--danger-400);
            @supports (color: color-mix(in lab, red, red)) {
              --tw-ring-color: color-mix(in oklab, var(--danger-400) 50%, transparent);
            }
          }
        }
      }
    }
  }
  select.fi-select-input {
    display: block;
    width: 100%;
    appearance: none;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding-block: calc(var(--spacing) * 1.5);
    padding-inline-start: calc(var(--spacing) * 3);
    padding-inline-end: calc(var(--spacing) * 8);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--gray-950);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:disabled {
      color: var(--gray-500);
    }
    &:disabled {
      -webkit-text-fill-color: var(--color-gray-500);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &:where(.dark, .dark *) {
      &:disabled {
        color: var(--gray-400);
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        -webkit-text-fill-color: var(--color-gray-400);
      }
    }
    & optgroup {
      background-color: var(--color-white);
    }
    & optgroup {
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
    & option {
      background-color: var(--color-white);
    }
    & option {
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
    @supports (-webkit-touch-callout: none) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      background-position: left 0.5rem center;
    }
    &.fi-select-input-has-inline-prefix {
      padding-inline-start: 0px;
    }
  }
  .fi-select-input .fi-select-input-ctn {
    position: relative;
  }
  .fi-select-input div[x-ref='select'] {
    min-height: calc(var(--spacing) * 9);
  }
  .fi-select-input .fi-select-input-btn {
    display: flex;
    min-height: calc(var(--spacing) * 9);
    width: 100%;
    border-radius: var(--radius-lg);
    padding-block: calc(var(--spacing) * 1.5);
    padding-inline-start: calc(var(--spacing) * 3);
    padding-inline-end: calc(var(--spacing) * 8);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--gray-950);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      background-position: left 0.5rem center;
    }
  }
  .fi-select-input .fi-select-input-value-ctn {
    display: flex;
    width: 100%;
    align-items: center;
    text-wrap: wrap;
    word-break: break-word;
  }
  .fi-select-input .fi-select-input-value-badges-ctn {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .fi-select-input .fi-select-input-value-label {
    flex: 1;
  }
  .fi-select-input .fi-select-input-value-remove-btn {
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 8);
    top: calc(1 / 2 * 100%);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    color: var(--gray-500);
    &:hover {
      @media (hover: hover) {
        color: var(--gray-600);
      }
    }
    &:focus-visible {
      color: var(--gray-600);
    }
    &:focus-visible {
      --tw-outline-style: none;
      outline-style: none;
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          color: var(--gray-300);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        color: var(--gray-300);
      }
    }
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z' /%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
  }
  .fi-select-input .fi-select-input-ctn-clearable .fi-select-input-btn {
    padding-inline-end: calc(var(--spacing) * 14);
  }
  .fi-select-input .fi-dropdown-panel {
    max-height: calc(var(--spacing) * 60);
    max-width: 100% !important;
  }
  :where(.fi-select-input .fi-select-input-options-ctn > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-color: var(--gray-100);
  }
  :where(.fi-select-input .fi-select-input-options-ctn:where(.dark, .dark *) > :not(:last-child)) {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  :where(.fi-select-input .fi-select-input-option-group > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-color: var(--gray-100);
  }
  :where(.fi-select-input .fi-select-input-option-group:where(.dark, .dark *) > :not(:last-child)) {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .fi-select-input .fi-select-input-option-group .fi-dropdown-header {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-select-input .fi-select-input-search-ctn {
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: var(--color-white);
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
  }
  .fi-select-input .fi-select-input-option {
    min-width: 1px;
    text-wrap: wrap;
    word-break: break-word;
  }
  .fi-select-input .fi-select-input-placeholder {
    color: var(--gray-400);
    &:where(.dark, .dark *) {
      color: var(--gray-500);
    }
  }
  .fi-select-input .fi-disabled {
    cursor: not-allowed;
    opacity: 70%;
    & .fi-select-input-placeholder {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-select-input .fi-select-input-message {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-select-input .fi-select-input-max-items-message {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--danger-600);
    &:where(.dark, .dark *) {
      color: var(--danger-400);
    }
  }
  .fi-select-input .fi-select-input-ctn.fi-select-input-ctn-option-labels-not-wrapped .fi-select-input-value-ctn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .fi-select-input .fi-select-input-ctn.fi-select-input-ctn-option-labels-not-wrapped .fi-select-input-option > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fi-input-wrp {
    display: flex;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    &:not(.fi-disabled):not(:has(.fi-ac-action:focus)) {
      &:focus-within {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus-within {
        --tw-ring-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        &:focus-within {
          --tw-ring-color: var(--primary-500);
        }
      }
      &.fi-invalid {
        &:focus-within {
          --tw-ring-color: var(--danger-600);
        }
        &:where(.dark, .dark *) {
          &:focus-within {
            --tw-ring-color: var(--danger-500);
          }
        }
      }
    }
    &.fi-disabled {
      background-color: var(--gray-50);
      &:where(.dark, .dark *) {
        background-color: transparent;
      }
      &:not(.fi-invalid) {
        &:where(.dark, .dark *) {
          --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
    }
    &.fi-invalid {
      --tw-ring-color: var(--danger-600);
      &:where(.dark, .dark *) {
        --tw-ring-color: var(--danger-500);
      }
    }
    & .fi-input-wrp-prefix {
      display: none;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      padding-inline-start: calc(var(--spacing) * 3);
      &.fi-input-wrp-prefix-has-content {
        display: flex;
      }
      &.fi-inline {
        padding-inline-end: calc(var(--spacing) * 2);
        &.fi-input-wrp-prefix-has-label {
          padding-inline-end: var(--spacing);
        }
      }
      &:not(.fi-inline) {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
        border-color: var(--gray-200);
        padding-inline-start: calc(var(--spacing) * 3);
        padding-inline-end: calc(var(--spacing) * 3);
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
    }
    & .fi-input-wrp-content-ctn, &:not(:has(.fi-input-wrp-content-ctn)) > * {
      min-width: 0px;
      flex: 1;
      &.fi-input-wrp-content-ctn-ps {
        padding-inline-start: calc(var(--spacing) * 3);
      }
    }
    & .fi-input-wrp-suffix {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      padding-inline-end: calc(var(--spacing) * 3);
      &.fi-inline {
        padding-inline-start: calc(var(--spacing) * 2);
        &.fi-input-wrp-suffix-has-label {
          padding-inline-start: var(--spacing);
        }
      }
      &:not(.fi-inline) {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
        border-color: var(--gray-200);
        padding-inline-start: calc(var(--spacing) * 3);
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
    }
    & .fi-input-wrp-actions {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 3);
    }
    & .fi-input-wrp-label {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      white-space: nowrap;
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-input-wrp-prefix, & .fi-input-wrp-suffix {
      & > .fi-icon {
        color: var(--gray-400);
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
        &.fi-color {
          color: var(--color-500);
        }
      }
    }
  }
  .fi-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    --tw-outline-style: none;
    outline-style: none;
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    & > .fi-link-label {
      align-self: baseline;
    }
    &.fi-force-enabled, &:not(.fi-disabled):not([disabled]) {
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
      &:focus-visible {
        border-radius: var(--radius-sm);
      }
      &:focus-visible {
        text-decoration-line: underline;
      }
      &:focus-visible {
        outline-style: var(--tw-outline-style);
        outline-width: 2px;
      }
      &:focus-visible {
        outline-offset: 2px;
      }
      &:focus-visible {
        outline-color: currentcolor;
      }
      &:focus-visible {
        --tw-outline-style: solid;
        outline-style: solid;
      }
    }
    &.fi-disabled:not(.fi-force-enabled), &[disabled]:not(.fi-force-enabled) {
      cursor: default;
      opacity: 70%;
      &:not([x-tooltip]) {
        pointer-events: none;
      }
    }
    &.fi-size-xs {
      gap: var(--spacing);
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    &.fi-size-sm {
      gap: var(--spacing);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.fi-size-md, &.fi-size-lg, &.fi-size-xl {
      gap: calc(var(--spacing) * 1.5);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.fi-font-thin {
      --tw-font-weight: var(--font-weight-thin);
      font-weight: var(--font-weight-thin);
    }
    &.fi-font-extralight {
      --tw-font-weight: var(--font-weight-extralight);
      font-weight: var(--font-weight-extralight);
    }
    &.fi-font-light {
      --tw-font-weight: var(--font-weight-light);
      font-weight: var(--font-weight-light);
    }
    &.fi-font-normal {
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
    }
    &.fi-font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &.fi-font-bold {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
    &.fi-font-extrabold {
      --tw-font-weight: var(--font-weight-extrabold);
      font-weight: var(--font-weight-extrabold);
    }
    &.fi-font-black {
      --tw-font-weight: var(--font-weight-black);
      font-weight: var(--font-weight-black);
    }
    &.fi-color {
      color: var(--text);
      &:where(.dark, .dark *) {
        color: var(--dark-text);
      }
    }
    &:not(.fi-color) > .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & .fi-link-badge-ctn {
      position: absolute;
      inset-inline-start: 100%;
      top: 0px;
      z-index: 1;
      display: flex;
      width: max-content;
      --tw-translate-x: calc(calc(1 / 4 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      --tw-translate-y: calc(calc(3 / 4 * 100%) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      border-radius: var(--radius-md);
      background-color: var(--color-white);
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      &:hover {
        @media (hover: hover) {
          text-decoration-line: none;
        }
      }
      &:focus-visible {
        text-decoration-line: none;
      }
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-translate-x: calc(1 / 4 * 100%);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
  }
  p > .fi-link, span > .fi-link {
    padding-bottom: 2px;
    vertical-align: middle;
    text-align: inherit;
  }
  @media (prefers-reduced-motion: no-preference) {
    .fi-loading-indicator {
      animation: var(--animate-spin);
    }
    .fi-loading-section {
      animation: var(--animate-pulse);
    }
  }
  .fi-modal {
    --tw-outline-style: none;
    outline-style: none;
    &.fi-modal-slide-over, &.fi-width-screen {
      & > .fi-modal-window-ctn > .fi-modal-window {
        height: 100dvh;
        & .fi-modal-content {
          flex: 1;
        }
      }
    }
    &.fi-modal-slide-over.fi-modal-slide-over-from-start {
      & > .fi-modal-window-ctn > .fi-modal-window {
        margin-inline-end: auto;
        &.fi-transition-enter-start, &.fi-transition-leave-end {
          --tw-translate-x: -100%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
            --tw-translate-x: 100%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
          }
        }
      }
    }
    &.fi-modal-slide-over.fi-modal-slide-over-from-end {
      & > .fi-modal-window-ctn > .fi-modal-window {
        margin-inline-start: auto;
        &.fi-transition-enter-start, &.fi-transition-leave-end {
          --tw-translate-x: 100%;
          translate: var(--tw-translate-x) var(--tw-translate-y);
          &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
            --tw-translate-x: -100%;
            translate: var(--tw-translate-x) var(--tw-translate-y);
          }
        }
      }
    }
    &.fi-modal-slide-over {
      & > .fi-modal-window-ctn > .fi-modal-window {
        overflow-y: auto;
        &.fi-transition-enter-end, &.fi-transition-leave-start {
          --tw-translate-x: 0px;
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
        & .fi-modal-header {
          column-gap: calc(var(--spacing) * 3);
          padding-top: calc(var(--spacing) * 5);
        }
        & .fi-modal-icon-bg {
          margin-block: calc(var(--spacing) * -2);
          margin-inline-start: calc(var(--spacing) * -2);
          padding: calc(var(--spacing) * 2);
        }
        & .fi-modal-close-btn {
          inset-inline-end: calc(var(--spacing) * 6);
          top: calc(var(--spacing) * 5);
        }
      }
    }
    &:not(.fi-modal-slide-over) {
      &:not(.fi-width-screen) {
        &:not(.fi-modal-has-sticky-header):not( .fi-modal-has-sticky-footer ) {
          & > .fi-modal-window-ctn {
            overflow-y: auto;
          }
        }
        &.fi-modal-has-sticky-header, &.fi-modal-has-sticky-footer {
          & > .fi-modal-window-ctn > .fi-modal-window {
            max-height: calc(100dvh - 2rem);
            overflow-y: auto;
          }
        }
      }
      & > .fi-modal-window-ctn > .fi-modal-window {
        &.fi-transition-enter-start, &.fi-transition-leave-end {
          --tw-scale-x: 95%;
          --tw-scale-y: 95%;
          --tw-scale-z: 95%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
          opacity: 0%;
        }
        &.fi-transition-enter-end, &.fi-transition-leave-start {
          --tw-scale-x: 100%;
          --tw-scale-y: 100%;
          --tw-scale-z: 100%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
          opacity: 100%;
        }
        & .fi-modal-close-btn {
          inset-inline-end: calc(var(--spacing) * 4);
          top: calc(var(--spacing) * 4);
        }
      }
    }
    &.fi-align-start:not(.fi-modal-has-sticky-header) {
      & > .fi-modal-window-ctn > .fi-modal-window-has-icon {
        & .fi-modal-content {
          padding-inline-start: 5.25rem;
          padding-inline-end: calc(var(--spacing) * 6);
        }
        & .fi-modal-footer {
          &:not(.fi-align-center) {
            padding-inline-start: 5.25rem;
            padding-inline-end: calc(var(--spacing) * 6);
          }
        }
      }
    }
    &:not(.fi-align-start) {
      & > .fi-modal-window-ctn > .fi-modal-window {
        & .fi-modal-content, & .fi-modal-footer {
          padding-inline: calc(var(--spacing) * 6);
        }
      }
    }
    & > .fi-modal-close-overlay {
      position: fixed;
      inset: 0px;
      z-index: 40;
      background-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-950) 50%, transparent);
      }
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      &:where(.dark, .dark *) {
        background-color: var(--gray-950);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--gray-950) 75%, transparent);
        }
      }
    }
    &.fi-modal-open:has(~ .fi-modal.fi-modal-open) > .fi-modal-close-overlay {
      opacity: 0%;
    }
    &.fi-modal-open ~ .fi-modal.fi-modal-open {
      & > .fi-modal-close-overlay, & > .fi-modal-window-ctn {
        z-index: 50;
      }
    }
    & > .fi-modal-window-ctn {
      position: fixed;
      inset: 0px;
      z-index: 40;
      display: grid;
      min-height: 100%;
      grid-template-rows: 1fr auto 1fr;
      justify-items: center;
      --tw-outline-style: none;
      outline-style: none;
      @media (width >= 40rem) {
        grid-template-rows: 1fr auto 3fr;
      }
      &.fi-clickable {
        cursor: pointer;
      }
    }
    &.fi-modal-click-through {
      pointer-events: none;
    }
    &:not(.fi-modal-slide-over):not(.fi-width-screen) {
      & > .fi-modal-window-ctn {
        padding: calc(var(--spacing) * 4);
        & > .fi-modal-window {
          margin-inline: auto;
          border-radius: var(--radius-xl);
        }
      }
      &.fi-modal-has-sticky-header {
        & > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
          border-top-left-radius: var(--radius-xl);
          border-top-right-radius: var(--radius-xl);
        }
      }
      &.fi-modal-has-sticky-footer {
        & > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
          border-bottom-right-radius: var(--radius-xl);
          border-bottom-left-radius: var(--radius-xl);
        }
      }
    }
    & > .fi-modal-window-ctn > .fi-modal-window {
      pointer-events: auto;
      position: relative;
      grid-row-start: 2;
      display: flex;
      width: 100%;
      cursor: default;
      flex-direction: column;
      background-color: var(--color-white);
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      --tw-outline-style: none;
      outline-style: none;
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & .fi-modal-header {
        display: flex;
        padding-inline: calc(var(--spacing) * 6);
        padding-top: calc(var(--spacing) * 6);
        &.fi-vertical-align-center {
          align-items: center;
        }
      }
      & .fi-modal-heading {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
      & .fi-modal-description {
        margin-top: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
      & .fi-modal-content {
        display: flex;
        flex-direction: column;
        row-gap: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 6);
      }
      &.fi-align-start, &.fi-align-left {
        & .fi-modal-header {
          column-gap: calc(var(--spacing) * 5);
        }
        & .fi-modal-icon-bg {
          padding: calc(var(--spacing) * 2);
        }
      }
      &.fi-align-center {
        & .fi-modal-header {
          flex-direction: column;
          text-align: center;
        }
        & .fi-modal-icon-ctn {
          margin-bottom: calc(var(--spacing) * 5);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        & .fi-modal-icon-bg {
          padding: calc(var(--spacing) * 3);
        }
      }
      &.fi-hidden {
        display: none;
      }
      &.fi-width-3xs {
        max-width: var(--container-3xs);
      }
      &.fi-width-2xs {
        max-width: var(--container-2xs);
      }
      &.fi-width-xs {
        max-width: var(--container-xs);
      }
      &.fi-width-sm {
        max-width: var(--container-sm);
      }
      &.fi-width-md {
        max-width: var(--container-md);
      }
      &.fi-width-lg {
        max-width: var(--container-lg);
      }
      &.fi-width-xl {
        max-width: var(--container-xl);
      }
      &.fi-width-2xl {
        max-width: var(--container-2xl);
      }
      &.fi-width-3xl {
        max-width: var(--container-3xl);
      }
      &.fi-width-4xl {
        max-width: var(--container-4xl);
      }
      &.fi-width-5xl {
        max-width: var(--container-5xl);
      }
      &.fi-width-6xl {
        max-width: var(--container-6xl);
      }
      &.fi-width-7xl {
        max-width: var(--container-7xl);
      }
      &.fi-width-none {
        max-width: none;
      }
      &.fi-width-full {
        max-width: 100%;
      }
      &.fi-width-min {
        max-width: min-content;
      }
      &.fi-width-max {
        max-width: max-content;
      }
      &.fi-width-fit {
        max-width: fit-content;
      }
      &.fi-width-prose {
        max-width: 65ch;
      }
      &.fi-width-container {
        width: 100%;
        @media (width >= 40rem) {
          max-width: 40rem;
        }
        @media (width >= 48rem) {
          max-width: 48rem;
        }
        @media (width >= 64rem) {
          max-width: 64rem;
        }
        @media (width >= 80rem) {
          max-width: 80rem;
        }
        @media (width >= 96rem) {
          max-width: 96rem;
        }
      }
      &.fi-width-screen-sm {
        max-width: var(--breakpoint-sm);
      }
      &.fi-width-screen-md {
        max-width: var(--breakpoint-md);
      }
      &.fi-width-screen-lg {
        max-width: var(--breakpoint-lg);
      }
      &.fi-width-screen-xl {
        max-width: var(--breakpoint-xl);
      }
      &.fi-width-screen-2xl {
        max-width: var(--breakpoint-2xl);
      }
      &.fi-width-screen {
        position: fixed;
        inset: 0px;
      }
      &.fi-transition-enter, &.fi-transition-leave {
        --tw-duration: 300ms;
        transition-duration: 300ms;
      }
      &.fi-modal-window-has-close-btn {
        &.fi-align-center:not(.fi-modal-window-has-icon) {
          & .fi-modal-heading {
            margin-inline-start: calc(var(--spacing) * 6);
          }
        }
        &:not(.fi-modal-window-has-icon), &.fi-align-start, &.fi-align-left {
          & .fi-modal-heading {
            margin-inline-end: calc(var(--spacing) * 6);
          }
        }
      }
      & .fi-modal-close-btn {
        position: absolute;
      }
      & .fi-modal-footer {
        width: 100%;
        & .fi-modal-footer-actions {
          gap: calc(var(--spacing) * 3);
        }
        &.fi-align-start, &.fi-align-left {
          & .fi-modal-footer-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
          }
        }
        &.fi-align-center {
          padding-inline: calc(var(--spacing) * 6);
          & .fi-modal-footer-actions {
            display: flex;
            flex-direction: column-reverse;
          }
        }
        &.fi-align-end, &.fi-align-right {
          & .fi-modal-footer-actions {
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
            align-items: center;
          }
        }
      }
      & .fi-modal-icon-bg {
        border-radius: calc(infinity * 1px);
        background-color: var(--gray-100);
        &:where(.dark, .dark *) {
          background-color: var(--gray-500);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--gray-500) 20%, transparent);
          }
        }
        & > .fi-icon {
          color: var(--gray-500);
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
        &.fi-color {
          background-color: var(--color-100);
          &:where(.dark, .dark *) {
            background-color: var(--color-500);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-500) 20%, transparent);
            }
          }
          & > .fi-icon {
            color: var(--color-600);
            &:where(.dark, .dark *) {
              color: var(--color-400);
            }
          }
        }
      }
    }
    &.fi-modal-has-sticky-header {
      & > .fi-modal-window-ctn > .fi-modal-window {
        & > .fi-modal-header {
          position: sticky;
          top: 0px;
          z-index: 10;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 1px;
          border-color: var(--gray-200);
          background-color: var(--color-white);
          padding-bottom: calc(var(--spacing) * 6);
          &:where(.dark, .dark *) {
            border-color: color-mix(in srgb, #fff 10%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
            }
          }
          &:where(.dark, .dark *) {
            background-color: var(--gray-900);
          }
        }
        & .fi-modal-content, & .fi-modal-footer {
          padding-inline: calc(var(--spacing) * 6);
        }
      }
    }
    &.fi-modal-slide-over.fi-modal-has-sticky-header {
      & > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
        padding-bottom: calc(var(--spacing) * 5);
      }
    }
    &.fi-modal-has-sticky-footer {
      & > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
        position: sticky;
        bottom: 0px;
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
        border-color: var(--gray-200);
        background-color: var(--color-white);
        padding-block: calc(var(--spacing) * 5);
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-900);
        }
      }
    }
    &:not(.fi-modal-has-sticky-footer) {
      & > .fi-modal-window-ctn > .fi-modal-window {
        &:not(.fi-modal-window-has-content) {
          & .fi-modal-footer {
            margin-top: calc(var(--spacing) * 6);
          }
          &:not(.fi-modal-window-has-footer) {
            & .fi-modal-header {
              padding-bottom: calc(var(--spacing) * 6);
            }
          }
        }
        & .fi-modal-footer {
          padding-bottom: calc(var(--spacing) * 6);
        }
      }
    }
    &:not(.fi-modal-has-sticky-header) {
      & > .fi-modal-window-ctn > .fi-modal-window:not(.fi-modal-window-has-icon) {
        & .fi-modal-content, & .fi-modal-footer {
          padding-inline: calc(var(--spacing) * 6);
        }
      }
    }
    &.fi-modal-slide-over {
      & > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
        margin-top: auto;
      }
    }
    @supports (container-type: inline-size) {
      & > .fi-modal-window-ctn > .fi-modal-window {
        & .fi-modal-footer {
          &.fi-align-center {
            container-type: inline-size;
            & .fi-modal-footer-actions {
              @container (width >= 24rem) {
                display: grid;
              }
              @container (width >= 24rem) {
                grid-template-columns: repeat(auto-fit,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
    @supports not (container-type: inline-size) {
      & > .fi-modal-window-ctn > .fi-modal-window {
        & .fi-modal-footer {
          &.fi-align-center {
            & .fi-modal-footer-actions {
              @media (width >= 40rem) {
                display: grid;
              }
              @media (width >= 40rem) {
                grid-template-columns: repeat(auto-fit,minmax(0,1fr));
              }
            }
          }
        }
      }
    }
  }
  :scope .fi-modal-trigger {
    display: flex;
  }
  .fi-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    &:empty {
      display: none;
    }
    & .fi-pagination-previous-btn {
      justify-self: flex-start;
    }
    & .fi-pagination-overview {
      display: none;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-700);
      &:where(.dark, .dark *) {
        color: var(--gray-200);
      }
    }
    & .fi-pagination-records-per-page-select-ctn {
      grid-column-start: 2;
      justify-self: center;
    }
    & .fi-pagination-records-per-page-select {
      &:not(.fi-compact) {
        display: none;
      }
    }
    & .fi-pagination-next-btn {
      grid-column-start: 3;
      justify-self: flex-end;
    }
    & .fi-pagination-items {
      display: none;
      justify-self: flex-end;
      border-radius: var(--radius-lg);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    & .fi-pagination-item {
      border-inline-style: var(--tw-border-style);
      border-inline-width: 0.5px;
      border-color: var(--gray-200);
      &:first-child {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 0px;
      }
      &:last-child {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 0px;
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &.fi-active {
        & .fi-pagination-item-btn {
          background-color: var(--gray-50);
          &:where(.dark, .dark *) {
            background-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
        & .fi-pagination-item-label {
          color: var(--primary-700);
          &:where(.dark, .dark *) {
            color: var(--primary-400);
          }
        }
      }
      &:first-of-type {
        & .fi-pagination-item-btn {
          border-start-start-radius: var(--radius-lg);
          border-end-start-radius: var(--radius-lg);
        }
      }
      &:last-of-type {
        & .fi-pagination-item-btn {
          border-start-end-radius: var(--radius-lg);
          border-end-end-radius: var(--radius-lg);
        }
      }
      &.fi-disabled {
        & .fi-pagination-item-label {
          color: var(--gray-500);
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
      }
    }
    & .fi-pagination-item-btn {
      position: relative;
      display: flex;
      overflow: hidden;
      padding: calc(var(--spacing) * 2);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      --tw-outline-style: none;
      outline-style: none;
      &:enabled {
        &:hover {
          @media (hover: hover) {
            background-color: var(--gray-50);
          }
        }
        &:focus-visible {
          z-index: 10;
        }
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &:focus-visible {
          --tw-ring-color: var(--primary-600);
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              background-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
          }
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            --tw-ring-color: var(--primary-500);
          }
        }
      }
      &:hover {
        & .fi-icon {
          color: var(--gray-500);
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
      }
      & .fi-icon {
        color: var(--gray-400);
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 75ms;
        transition-duration: 75ms;
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
      }
      & .fi-pagination-item-label {
        padding-inline: calc(var(--spacing) * 1.5);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--gray-700);
        &:where(.dark, .dark *) {
          color: var(--gray-200);
        }
      }
    }
    @supports (container-type: inline-size) {
      container-type: inline-size;
      & .fi-pagination-records-per-page-select {
        &:not(.fi-compact) {
          @container (width >= 28rem) {
            display: inline;
          }
        }
        &.fi-compact {
          @container (width >= 28rem) {
            display: none;
          }
        }
      }
      &:not(.fi-simple) {
        & .fi-pagination-previous-btn, & .fi-pagination-next-btn {
          @container (width >= 56rem) {
            display: none;
          }
        }
      }
      & .fi-pagination-overview {
        @container (width >= 56rem) {
          display: inline;
        }
      }
      & .fi-pagination-items {
        @container (width >= 56rem) {
          display: flex;
        }
      }
    }
    @supports not (container-type: inline-size) {
      & .fi-pagination-records-per-page-select {
        &:not(.fi-compact) {
          @media (width >= 40rem) {
            display: inline;
          }
        }
        &.fi-compact {
          @media (width >= 40rem) {
            display: none;
          }
        }
      }
      &:not(.fi-simple) {
        & .fi-pagination-previous-btn, & .fi-pagination-next-btn {
          @media (width >= 48rem) {
            display: none;
          }
        }
      }
      & .fi-pagination-overview {
        @media (width >= 48rem) {
          display: inline;
        }
      }
      & .fi-pagination-items {
        @media (width >= 48rem) {
          display: flex;
        }
      }
    }
  }
  .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: calc(var(--spacing) * 6);
  }
  .fi-section:not(.fi-section-not-contained).fi-divided > .fi-section-content-ctn > .fi-section-content > * {
    padding: calc(var(--spacing) * 6);
  }
  .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--gray-200);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 4);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &.fi-compact {
      border-radius: var(--radius-lg);
    }
    &.fi-secondary {
      background-color: var(--gray-50);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & > .fi-section-header {
      padding-inline: calc(var(--spacing) * 6);
      padding-block: calc(var(--spacing) * 4);
    }
    &.fi-section-has-header:not(.fi-collapsed) {
      & > .fi-section-content-ctn {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
        border-color: var(--gray-200);
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
    }
  }
  .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-section:not(.fi-section-not-contained).fi-aside.fi-compact > .fi-section-content-ctn {
    border-radius: var(--radius-lg);
  }
  .fi-section:not(.fi-section-not-contained).fi-aside.fi-secondary > .fi-section-content-ctn {
    background-color: var(--gray-50);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .fi-section:not(.fi-section-not-contained).fi-compact:not(.fi-aside) > .fi-section-header {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
  }
  .fi-section:not(.fi-section-not-contained).fi-compact:not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: calc(var(--spacing) * 4);
  }
  .fi-section:not(.fi-section-not-contained).fi-compact.fi-divided > .fi-section-content-ctn > .fi-section-content > * {
    padding: calc(var(--spacing) * 4);
  }
  .fi-section:not(.fi-section-not-contained).fi-compact > .fi-section-footer {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
  }
  @media (width >= 48rem) {
    .fi-section.fi-section-not-contained.fi-aside > .fi-section-content-ctn {
      grid-column: span 2 / span 2;
    }
  }
  .fi-section.fi-section-not-contained:not(.fi-aside) {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    &:not(.fi-collapsed) {
      & > .fi-section-content-ctn {
        display: grid;
        row-gap: calc(var(--spacing) * 4);
      }
    }
    &.fi-divided {
      & > .fi-section-content-ctn > .fi-section-content {
        & > * {
          padding-block: calc(var(--spacing) * 6);
        }
      }
    }
    &.fi-compact {
      row-gap: calc(var(--spacing) * 2.5);
      & > .fi-section-content-ctn {
        row-gap: calc(var(--spacing) * 2.5);
      }
      &.fi-divided {
        & > .fi-section-content-ctn > .fi-section-content {
          & > * {
            padding-block: calc(var(--spacing) * 4);
          }
        }
      }
    }
  }
  .fi-section.fi-divided > .fi-section-content-ctn > .fi-section-content {
    gap: 0px;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .fi-section.fi-aside {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: flex-start;
    column-gap: calc(var(--spacing) * 6);
    row-gap: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .fi-section.fi-collapsible > .fi-section-header {
    cursor: pointer;
  }
  .fi-section.fi-collapsed > .fi-section-header > .fi-section-collapse-btn {
    rotate: 180deg;
  }
  .fi-section.fi-collapsed > .fi-section-content-ctn {
    display: none;
  }
  @media (width >= 48rem) {
    .fi-section.fi-section-has-content-before > .fi-section-content-ctn {
      order: -9999;
    }
  }
  .fi-section > .fi-section-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    & > .fi-icon {
      flex-shrink: 0;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &.fi-color {
        color: var(--color-500);
        &:where(.dark, .dark *) {
          color: var(--color-400);
        }
      }
      &.fi-size-sm {
        margin-top: var(--spacing);
      }
      &.fi-size-md {
        margin-top: calc(var(--spacing) * 0.5);
      }
    }
    & > .fi-section-header-after-ctn {
      align-self: center;
      & .fi-sc-text:not( .fi-section-header-after-ctn .fi-dropdown-panel * ), & .fi-link:not(.fi-section-header-after-ctn .fi-dropdown-panel *) {
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
      }
      &:has(.fi-btn.fi-size-xs:not(.fi-dropdown-panel *)) {
        margin-block: calc(var(--spacing) * -0.5);
      }
      &:has(.fi-btn.fi-size-sm:not(.fi-dropdown-panel *)) {
        margin-block: calc(var(--spacing) * -1);
      }
      &:has(.fi-btn.fi-size-md:not(.fi-dropdown-panel *)) {
        margin-block: calc(var(--spacing) * -1.5);
      }
      &:has(.fi-btn.fi-size-lg:not(.fi-dropdown-panel *)) {
        margin-block: calc(var(--spacing) * -2);
      }
      &:has(.fi-btn.fi-size-xl:not(.fi-dropdown-panel *)) {
        margin-block: calc(var(--spacing) * -2.5);
      }
    }
    & > .fi-section-collapse-btn {
      margin-block: calc(var(--spacing) * -1.5);
      flex-shrink: 0;
    }
  }
  .fi-section .fi-section-header-text-ctn {
    display: grid;
    flex: 1;
    row-gap: var(--spacing);
  }
  .fi-section .fi-section-header-heading {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-section .fi-section-header-description {
    overflow: hidden;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    overflow-wrap: break-word;
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-tabs {
    display: flex;
    max-width: 100%;
    column-gap: var(--spacing);
    overflow-x: auto;
    &.fi-contained {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2.5);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:not(.fi-contained) {
      margin-inline: auto;
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      padding: calc(var(--spacing) * 2);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &.fi-vertical {
      flex-direction: column;
      column-gap: 0px;
      row-gap: var(--spacing);
      overflow-x: hidden;
      overflow-y: auto;
      &.fi-contained {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
      &:not(.fi-contained) {
        margin-inline: 0px;
      }
      & .fi-tabs-item {
        justify-content: flex-start;
      }
    }
  }
  .fi-tabs-item {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-outline-style: none;
    outline-style: none;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:focus-visible {
      background-color: var(--gray-50);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &.fi-active {
      background-color: var(--gray-50);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      & .fi-tabs-item-label, & > .fi-icon {
        color: var(--primary-700);
        &:where(.dark, .dark *) {
          color: var(--primary-400);
        }
      }
    }
    :not(.fi-active) {
      &:hover {
        & .fi-tabs-item-label {
          color: var(--gray-700);
          &:is(:where(.group):focus-visible *) {
            color: var(--gray-700);
          }
          &:where(.dark, .dark *) {
            color: var(--gray-200);
          }
          &:where(.dark, .dark *) {
            &:is(:where(.group):focus-visible *) {
              color: var(--gray-200);
            }
          }
        }
      }
      &:focus-visible {
        & .fi-tabs-item-label {
          color: var(--gray-700);
          &:where(.dark, .dark *) {
            color: var(--gray-200);
          }
        }
      }
    }
    & .fi-tabs-item-label {
      color: var(--gray-500);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & > .fi-icon {
      flex-shrink: 0;
      color: var(--gray-400);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & .fi-badge {
      width: max-content;
    }
    & .fi-tabs-item-badge-placeholder {
      display: flex;
      align-items: center;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-toggle {
    position: relative;
    display: inline-flex;
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 11);
    flex-shrink: 0;
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    border-color: transparent;
    background-color: var(--gray-200);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
    --tw-outline-style: none;
    outline-style: none;
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--primary-600);
    }
    &:focus-visible {
      --tw-ring-offset-width: 1px;
      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
    &:disabled {
      pointer-events: none;
    }
    &:disabled {
      opacity: 70%;
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-700);
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        --tw-ring-color: var(--primary-500);
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        --tw-ring-offset-color: var(--gray-900);
      }
    }
    &:disabled, &[disabled] {
      pointer-events: none;
      opacity: 70%;
    }
    &.fi-color {
      background-color: var(--bg);
      &:where(.dark, .dark *) {
        background-color: var(--dark-bg);
      }
      & .fi-icon {
        color: var(--text);
      }
    }
    &.fi-hidden {
      display: none;
    }
    & > :first-child {
      pointer-events: none;
      position: relative;
      display: inline-block;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
      border-radius: calc(infinity * 1px);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 200ms;
      transition-duration: 200ms;
      --tw-ease: var(--ease-in-out);
      transition-timing-function: var(--ease-in-out);
      & > * {
        position: absolute;
        inset: 0px;
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
      }
    }
    & .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-700);
      }
    }
    &.fi-toggle-on {
      & > :first-child {
        --tw-translate-x: calc(var(--spacing) * 5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
          --tw-translate-x: calc(var(--spacing) * -5);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
        & > :first-child {
          opacity: 0%;
          --tw-duration: 100ms;
          transition-duration: 100ms;
          --tw-ease: var(--ease-out);
          transition-timing-function: var(--ease-out);
        }
        & > :last-child {
          opacity: 100%;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          --tw-ease: var(--ease-in);
          transition-timing-function: var(--ease-in);
        }
      }
    }
    &.fi-toggle-off {
      & > :first-child {
        --tw-translate-x: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
        & > :first-child {
          opacity: 100%;
          --tw-duration: 200ms;
          transition-duration: 200ms;
          --tw-ease: var(--ease-in);
          transition-timing-function: var(--ease-in);
        }
        & > :last-child {
          opacity: 0%;
          --tw-duration: 100ms;
          transition-duration: 100ms;
          --tw-ease: var(--ease-out);
          transition-timing-function: var(--ease-out);
        }
      }
    }
  }
  .tippy-box {
    background-color: var(--tippy-background-color, #333);
  }
  .tippy-arrow {
    color: var(--tippy-background-color, #333);
  }
  .tippy-box[data-theme~='light'] {
    --tippy-background-color: #fff;
    background-color: var(--tippy-background-color);
    box-shadow: var( --tippy-box-shadow, 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15) );
    &[data-placement^='top'] > .tippy-arrow::before {
      border-top-color: var(--tippy-background-color);
    }
    &[data-placement^='bottom'] > .tippy-arrow::before {
      border-bottom-color: var(--tippy-background-color);
    }
    &[data-placement^='left'] > .tippy-arrow::before {
      border-left-color: var(--tippy-background-color);
    }
    &[data-placement^='right'] > .tippy-arrow::before {
      border-right-color: var(--tippy-background-color);
    }
  }
  .fi-sortable-ghost {
    opacity: 30%;
  }
  .fi-ac {
    gap: calc(var(--spacing) * 3);
    &:not(.fi-width-full) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      &.fi-align-start, &.fi-align-left {
        justify-content: flex-start;
      }
      &.fi-align-center {
        justify-content: center;
      }
      &.fi-align-end, &.fi-align-right {
        flex-direction: row-reverse;
      }
      &.fi-align-between, &.fi-align-justify {
        justify-content: space-between;
      }
    }
    &.fi-width-full {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(0,1fr));
    }
  }
  .CodeMirror {
    color: #000;
    direction: ltr;
    height: 300px;
    font-family: monospace;
  }
  .CodeMirror-lines {
    padding: 4px 0;
  }
  .CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
    padding: 0 4px;
  }
  .CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler {
    background-color: #fff;
  }
  .CodeMirror-gutters {
    white-space: nowrap;
    background-color: #f7f7f7;
    border-right: 1px solid #ddd;
  }
  .CodeMirror-linenumber {
    text-align: right;
    color: #999;
    white-space: nowrap;
    min-width: 20px;
    padding: 0 3px 0 5px;
  }
  .CodeMirror-guttermarker {
    color: #000;
  }
  .CodeMirror-guttermarker-subtle {
    color: #999;
  }
  .CodeMirror-cursor {
    border-left: 1px solid #000;
    border-right: none;
    width: 0;
  }
  .CodeMirror div.CodeMirror-secondarycursor {
    border-left: 1px solid silver;
  }
  .cm-fat-cursor .CodeMirror-cursor {
    background: #7e7;
    width: auto;
    border: 0 !important;
  }
  .cm-fat-cursor div.CodeMirror-cursors {
    z-index: 1;
  }
  .cm-fat-cursor .CodeMirror-line::selection {
    background: 0 0;
  }
  .cm-fat-cursor .CodeMirror-line>span::selection {
    background: 0 0;
  }
  .cm-fat-cursor .CodeMirror-line>span>span::selection {
    background: 0 0;
  }
  .cm-fat-cursor .CodeMirror-line::-moz-selection {
    background: 0 0;
  }
  .cm-fat-cursor .CodeMirror-line>span::-moz-selection {
    background: 0 0;
  }
  .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
    background: 0 0;
  }
  .cm-fat-cursor {
    caret-color: #0000;
  }
  @keyframes blink {
    50% {
      background-color: #0000;
    }
  }
  .cm-tab {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    display: inline-block;
  }
  .CodeMirror-rulers {
    position: absolute;
    inset: -50px 0 0;
    overflow: hidden;
  }
  .CodeMirror-ruler {
    border-left: 1px solid #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .cm-s-default .cm-header {
    color: #00f;
  }
  .cm-s-default .cm-quote {
    color: #090;
  }
  .cm-negative {
    color: #d44;
  }
  .cm-positive {
    color: #292;
  }
  .cm-header,.cm-strong {
    font-weight: 700;
  }
  .cm-em {
    font-style: italic;
  }
  .cm-link {
    text-decoration: underline;
  }
  .cm-strikethrough {
    text-decoration: line-through;
  }
  .cm-s-default .cm-keyword {
    color: #708;
  }
  .cm-s-default .cm-atom {
    color: #219;
  }
  .cm-s-default .cm-number {
    color: #164;
  }
  .cm-s-default .cm-def {
    color: #00f;
  }
  .cm-s-default .cm-variable-2 {
    color: #05a;
  }
  .cm-s-default .cm-type,.cm-s-default .cm-variable-3 {
    color: #085;
  }
  .cm-s-default .cm-comment {
    color: #a50;
  }
  .cm-s-default .cm-string {
    color: #a11;
  }
  .cm-s-default .cm-string-2 {
    color: #f50;
  }
  .cm-s-default .cm-meta,.cm-s-default .cm-qualifier {
    color: #555;
  }
  .cm-s-default .cm-builtin {
    color: #30a;
  }
  .cm-s-default .cm-bracket {
    color: #997;
  }
  .cm-s-default .cm-tag {
    color: #170;
  }
  .cm-s-default .cm-attribute {
    color: #00c;
  }
  .cm-s-default .cm-hr {
    color: #999;
  }
  .cm-s-default .cm-link {
    color: #00c;
  }
  .cm-s-default .cm-error,.cm-invalidchar {
    color: red;
  }
  .CodeMirror-composing {
    border-bottom: 2px solid;
  }
  div.CodeMirror span.CodeMirror-matchingbracket {
    color: #0b0;
  }
  div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: #a22;
  }
  .CodeMirror-matchingtag {
    background: #ff96004d;
  }
  .CodeMirror-activeline-background {
    background: #e8f2ff;
  }
  .CodeMirror {
    background: #fff;
    position: relative;
    overflow: hidden;
  }
  .CodeMirror-scroll {
    z-index: 0;
    outline: 0;
    height: 100%;
    margin-bottom: -50px;
    margin-right: -50px;
    padding-bottom: 50px;
    position: relative;
    overflow: scroll !important;
  }
  .CodeMirror-sizer {
    border-right: 50px solid #0000;
    position: relative;
  }
  .CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar {
    z-index: 6;
    outline: 0;
    display: none;
    position: absolute;
  }
  .CodeMirror-vscrollbar {
    top: 0;
    right: 0;
    overflow: hidden scroll;
  }
  .CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow: scroll hidden;
  }
  .CodeMirror-scrollbar-filler {
    bottom: 0;
    right: 0;
  }
  .CodeMirror-gutter-filler {
    bottom: 0;
    left: 0;
  }
  .CodeMirror-gutters {
    z-index: 3;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .CodeMirror-gutter {
    white-space: normal;
    vertical-align: top;
    height: 100%;
    margin-bottom: -50px;
    display: inline-block;
  }
  .CodeMirror-gutter-wrapper {
    z-index: 4;
    position: absolute;
    background: 0 0 !important;
    border: none !important;
  }
  .CodeMirror-gutter-background {
    z-index: 4;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .CodeMirror-gutter-elt {
    cursor: default;
    z-index: 4;
    position: absolute;
  }
  .CodeMirror-gutter-wrapper ::selection {
    background-color: #0000;
  }
  .CodeMirror-lines {
    cursor: text;
    min-height: 1px;
  }
  .CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
    font-family: inherit;
    font-size: inherit;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
    background: 0 0;
    border-width: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    overflow: visible;
  }
  .CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
  }
  .CodeMirror-linebackground {
    z-index: 0;
    position: absolute;
    inset: 0;
  }
  .CodeMirror-linewidget {
    z-index: 2;
    padding: .1px;
    position: relative;
  }
  .CodeMirror-code {
    outline: 0;
  }
  .CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer {
    box-sizing: content-box;
  }
  .CodeMirror-measure {
    visibility: hidden;
    width: 100%;
    height: 0;
    position: absolute;
    overflow: hidden;
  }
  .CodeMirror-cursor {
    pointer-events: none;
    position: absolute;
  }
  .CodeMirror-measure pre {
    position: static;
  }
  div.CodeMirror-cursors {
    visibility: hidden;
    z-index: 3;
    position: relative;
  }
  div.CodeMirror-dragcursors,.CodeMirror-focused div.CodeMirror-cursors {
    visibility: visible;
  }
  .CodeMirror-selected {
    background: #d9d9d9;
  }
  .CodeMirror-focused .CodeMirror-selected {
    background: #d7d4f0;
  }
  .CodeMirror-crosshair {
    cursor: crosshair;
  }
  .CodeMirror-line::selection {
    background: #d7d4f0;
  }
  .CodeMirror-line>span::selection {
    background: #d7d4f0;
  }
  .CodeMirror-line>span>span::selection {
    background: #d7d4f0;
  }
  .CodeMirror-line::-moz-selection {
    background: #d7d4f0;
  }
  .CodeMirror-line>span::-moz-selection {
    background: #d7d4f0;
  }
  .CodeMirror-line>span>span::-moz-selection {
    background: #d7d4f0;
  }
  .cm-searching {
    background-color: #ff06;
  }
  .cm-force-border {
    padding-right: .1px;
  }
  @media print {
    .CodeMirror div.CodeMirror-cursors {
      visibility: hidden;
    }
  }
  .cm-tab-wrap-hack:after {
    content: "";
  }
  span.CodeMirror-selectedtext {
    background: 0 0;
  }
  .EasyMDEContainer {
    display: block;
  }
  .CodeMirror-rtl pre {
    direction: rtl;
  }
  .EasyMDEContainer.sided--no-fullscreen {
    flex-flow: wrap;
    display: flex;
  }
  .EasyMDEContainer .CodeMirror {
    box-sizing: border-box;
    height: auto;
    font: inherit;
    z-index: 0;
    word-wrap: break-word;
    border: 1px solid #ced4da;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 10px;
  }
  .EasyMDEContainer .CodeMirror-scroll {
    cursor: text;
  }
  .EasyMDEContainer .CodeMirror-fullscreen {
    z-index: 8;
    background: #fff;
    height: auto;
    inset: 50px 0 0;
    border-right: none !important;
    border-bottom-right-radius: 0 !important;
    position: fixed !important;
  }
  .EasyMDEContainer .CodeMirror-sided {
    width: 50% !important;
  }
  .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
    border-bottom-right-radius: 0;
    flex: auto;
    position: relative;
    border-right: none !important;
  }
  .EasyMDEContainer .CodeMirror-placeholder {
    opacity: .5;
  }
  .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
    background: #d9d9d9;
  }
  .editor-toolbar {
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 9px 10px;
    position: relative;
  }
  .editor-toolbar.fullscreen {
    box-sizing: border-box;
    opacity: 1;
    z-index: 9;
    background: #fff;
    border: 0;
    width: 100%;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: fixed;
    top: 0;
    left: 0;
  }
  .editor-toolbar.fullscreen:before {
    background: -o-linear-gradient(270deg,#fff 0,#fff0 100%);
    background: -ms-linear-gradient(left,#fff 0,#fff0 100%);
    background: linear-gradient(90deg,#fff 0,#fff0);
    width: 20px;
    height: 50px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
  }
  .editor-toolbar.fullscreen:after {
    background: -o-linear-gradient(270deg,#fff0 0,#fff 100%);
    background: -ms-linear-gradient(left,#fff0 0,#fff 100%);
    background: linear-gradient(90deg,#fff0 0,#fff);
    width: 20px;
    height: 50px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    right: 0;
  }
  .EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
    width: 100%;
  }
  .editor-toolbar .easymde-dropdown,.editor-toolbar button {
    text-align: center;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 3px;
    height: 30px;
    margin: 0;
    padding: 0;
    display: inline-block;
    text-decoration: none !important;
  }
  .editor-toolbar button {
    white-space: nowrap;
    min-width: 30px;
    padding: 0 6px;
    font-weight: 700;
  }
  .editor-toolbar button.active,.editor-toolbar button:hover {
    background: #fcfcfc;
    border-color: #95a5a6;
  }
  .editor-toolbar i.separator {
    color: #0000;
    text-indent: -10px;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #fff;
    width: 0;
    margin: 0 6px;
    display: inline-block;
  }
  .editor-toolbar button:after {
    vertical-align: text-bottom;
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    font-size: 65%;
    position: relative;
    top: 2px;
  }
  .editor-toolbar button.heading-1:after {
    content: "1";
  }
  .editor-toolbar button.heading-2:after {
    content: "2";
  }
  .editor-toolbar button.heading-3:after {
    content: "3";
  }
  .editor-toolbar button.heading-bigger:after {
    content: "▲";
  }
  .editor-toolbar button.heading-smaller:after {
    content: "▼";
  }
  .editor-toolbar.disabled-for-preview button:not(.no-disable) {
    opacity: .6;
    pointer-events: none;
  }
  @media only screen and (max-width:700px) {
    .editor-toolbar i.no-mobile {
      display: none;
    }
  }
  .editor-statusbar {
    color: #959694;
    text-align: right;
    padding: 8px 10px;
    font-size: 12px;
  }
  .EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
    width: 100%;
  }
  .editor-statusbar span {
    min-width: 4em;
    margin-left: 1em;
    display: inline-block;
  }
  .editor-statusbar .lines:before {
    content: "lines: ";
  }
  .editor-statusbar .words:before {
    content: "words: ";
  }
  .editor-statusbar .characters:before {
    content: "characters: ";
  }
  .editor-preview-full {
    z-index: 7;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
  }
  .editor-preview-side {
    z-index: 9;
    box-sizing: border-box;
    word-wrap: break-word;
    border: 1px solid #ddd;
    width: 50%;
    display: none;
    position: fixed;
    top: 50px;
    bottom: 0;
    right: 0;
    overflow: auto;
  }
  .editor-preview-active-side {
    display: block;
  }
  .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
    flex: auto;
    height: auto;
    position: static;
  }
  .editor-preview-active {
    display: block;
  }
  .editor-preview {
    background: #fafafa;
    padding: 10px;
  }
  .editor-preview>p {
    margin-top: 0;
  }
  .editor-preview pre {
    background: #eee;
    margin-bottom: 10px;
  }
  .editor-preview table td,.editor-preview table th {
    border: 1px solid #ddd;
    padding: 5px;
  }
  .cm-s-easymde .cm-tag {
    color: #63a35c;
  }
  .cm-s-easymde .cm-attribute {
    color: #795da3;
  }
  .cm-s-easymde .cm-string {
    color: #183691;
  }
  .cm-s-easymde .cm-header-1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  .cm-s-easymde .cm-header-2 {
    font-size: calc(1.325rem + .9vw);
  }
  .cm-s-easymde .cm-header-3 {
    font-size: calc(1.3rem + .6vw);
  }
  .cm-s-easymde .cm-header-4 {
    font-size: calc(1.275rem + .3vw);
  }
  .cm-s-easymde .cm-header-5 {
    font-size: 1.25rem;
  }
  .cm-s-easymde .cm-header-6 {
    font-size: 1rem;
  }
  .cm-s-easymde .cm-header-1,.cm-s-easymde .cm-header-2,.cm-s-easymde .cm-header-3,.cm-s-easymde .cm-header-4,.cm-s-easymde .cm-header-5,.cm-s-easymde .cm-header-6 {
    margin-bottom: .5rem;
    line-height: 1.2;
  }
  .cm-s-easymde .cm-comment {
    background: #0000000d;
    border-radius: 2px;
  }
  .cm-s-easymde .cm-link {
    color: #7f8c8d;
  }
  .cm-s-easymde .cm-url {
    color: #aab2b3;
  }
  .cm-s-easymde .cm-quote {
    color: #7f8c8d;
    font-style: italic;
  }
  .editor-toolbar .easymde-dropdown {
    background: linear-gradient(to bottom right,#fff 0 84%,#333 50% 100%);
    border: 1px solid #fff;
    border-radius: 0;
    position: relative;
  }
  .editor-toolbar .easymde-dropdown:hover {
    background: linear-gradient(to bottom right,#fff 0 84%,#333 50% 100%);
  }
  .easymde-dropdown-content {
    visibility: hidden;
    z-index: 2;
    background-color: #f9f9f9;
    padding: 8px;
    display: block;
    position: absolute;
    top: 30px;
    box-shadow: 0 8px 16px #0003;
  }
  .easymde-dropdown:active .easymde-dropdown-content,.easymde-dropdown:focus .easymde-dropdown-content,.easymde-dropdown:focus-within .easymde-dropdown-content {
    visibility: visible;
  }
  .easymde-dropdown-content button {
    display: block;
  }
  span[data-img-src]:after {
    content: "";
    background-image: var(--bg-image);
    max-width: 100%;
    height: 0;
    max-height: 100%;
    padding-top: var(--height);
    width: var(--width);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
  }
  .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
    background: #ff000026;
  }
  .cropper-container {
    -webkit-touch-callout: none;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
  }
  .cropper-container img {
    backface-visibility: hidden;
    image-orientation: 0deg;
    width: 100%;
    height: 100%;
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box {
    position: absolute;
    inset: 0;
  }
  .cropper-canvas,.cropper-wrap-box {
    overflow: hidden;
  }
  .cropper-drag-box {
    opacity: 0;
    background-color: #fff;
  }
  .cropper-modal {
    opacity: .5;
    background-color: #000;
  }
  .cropper-view-box {
    outline: 1px solid #3399ffbf;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
  }
  .cropper-dashed {
    opacity: .5;
    border: 0 dashed #eee;
    display: block;
    position: absolute;
  }
  .cropper-dashed.dashed-h {
    border-top-width: 1px;
    border-bottom-width: 1px;
    width: 100%;
    height: 33.3333%;
    top: 33.3333%;
    left: 0;
  }
  .cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    width: 33.3333%;
    height: 100%;
    top: 0;
    left: 33.3333%;
  }
  .cropper-center {
    opacity: .75;
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .cropper-center:after,.cropper-center:before {
    content: " ";
    background-color: #eee;
    display: block;
    position: absolute;
  }
  .cropper-center:before {
    width: 7px;
    height: 1px;
    top: 0;
    left: -3px;
  }
  .cropper-center:after {
    width: 1px;
    height: 7px;
    top: -3px;
    left: 0;
  }
  .cropper-face,.cropper-line,.cropper-point {
    opacity: .1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
  .cropper-face {
    background-color: #fff;
    top: 0;
    left: 0;
  }
  .cropper-line {
    background-color: #39f;
  }
  .cropper-line.line-e {
    cursor: ew-resize;
    width: 5px;
    top: 0;
    right: -3px;
  }
  .cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    top: -3px;
    left: 0;
  }
  .cropper-line.line-w {
    cursor: ew-resize;
    width: 5px;
    top: 0;
    left: -3px;
  }
  .cropper-line.line-s {
    cursor: ns-resize;
    height: 5px;
    bottom: -3px;
    left: 0;
  }
  .cropper-point {
    opacity: .75;
    background-color: #39f;
    width: 5px;
    height: 5px;
  }
  .cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    top: 50%;
    right: -3px;
  }
  .cropper-point.point-n {
    cursor: ns-resize;
    margin-left: -3px;
    top: -3px;
    left: 50%;
  }
  .cropper-point.point-w {
    cursor: ew-resize;
    margin-top: -3px;
    top: 50%;
    left: -3px;
  }
  .cropper-point.point-s {
    cursor: s-resize;
    margin-left: -3px;
    bottom: -3px;
    left: 50%;
  }
  .cropper-point.point-ne {
    cursor: nesw-resize;
    top: -3px;
    right: -3px;
  }
  .cropper-point.point-nw {
    cursor: nwse-resize;
    top: -3px;
    left: -3px;
  }
  .cropper-point.point-sw {
    cursor: nesw-resize;
    bottom: -3px;
    left: -3px;
  }
  .cropper-point.point-se {
    cursor: nwse-resize;
    opacity: 1;
    width: 20px;
    height: 20px;
    bottom: -3px;
    right: -3px;
  }
  @media (min-width:768px) {
    .cropper-point.point-se {
      width: 15px;
      height: 15px;
    }
  }
  @media (min-width:992px) {
    .cropper-point.point-se {
      width: 10px;
      height: 10px;
    }
  }
  @media (min-width:1200px) {
    .cropper-point.point-se {
      opacity: .75;
      width: 5px;
      height: 5px;
    }
  }
  .cropper-point.point-se:before {
    content: " ";
    opacity: 0;
    background-color: #39f;
    width: 200%;
    height: 200%;
    display: block;
    position: absolute;
    bottom: -50%;
    right: -50%;
  }
  .cropper-invisible {
    opacity: 0;
  }
  .cropper-bg {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
  }
  .cropper-hide {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
  }
  .cropper-hidden {
    display: none !important;
  }
  .cropper-move {
    cursor: move;
  }
  .cropper-crop {
    cursor: crosshair;
  }
  .cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {
    cursor: not-allowed;
  }
  .filepond--assistant {
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .filepond--browser.filepond--browser {
    opacity: 0;
    width: calc(100% - 2em);
    margin: 0;
    padding: 0;
    font-size: 0;
    position: absolute;
    top: 1.75em;
    left: 1em;
  }
  .filepond--data {
    visibility: hidden;
    pointer-events: none;
    contain: strict;
    border: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
  }
  .filepond--drip {
    opacity: .1;
    pointer-events: none;
    background: #00000003;
    border-radius: .5em;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .filepond--drip-blob {
    transform-origin: 50%;
    background: #292625;
    border-radius: 50%;
    width: 8em;
    height: 8em;
    margin-top: -4em;
    margin-left: -4em;
  }
  .filepond--drip-blob,.filepond--drop-label {
    will-change: transform,opacity;
    position: absolute;
    top: 0;
    left: 0;
  }
  .filepond--drop-label {
    color: #4f4f4f;
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    height: 0;
    margin: 0;
    display: flex;
    right: 0;
  }
  .filepond--drop-label.filepond--drop-label label {
    margin: 0;
    padding: .5em;
    display: block;
  }
  .filepond--drop-label label {
    cursor: default;
    text-align: center;
    font-size: .875em;
    font-weight: 400;
    line-height: 1.5;
  }
  .filepond--label-action {
    -webkit-text-decoration-skip: ink;
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
    cursor: pointer;
    -webkit-text-decoration: underline #a7a4a4;
    text-decoration: underline #a7a4a4;
  }
  .filepond--root[data-disabled] .filepond--drop-label label {
    opacity: .5;
  }
  .filepond--file-action-button.filepond--file-action-button {
    width: 1.625em;
    height: 1.625em;
    font-family: inherit;
    font-size: 1em;
    line-height: inherit;
    will-change: transform,opacity;
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
  }
  .filepond--file-action-button.filepond--file-action-button span {
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .filepond--file-action-button.filepond--file-action-button svg {
    width: 100%;
    height: 100%;
  }
  .filepond--file-action-button.filepond--file-action-button:after {
    content: "";
    position: absolute;
    inset: -.75em;
  }
  .filepond--file-action-button {
    cursor: auto;
    color: #fff;
    background-color: #00000080;
    background-image: none;
    border-radius: 50%;
    transition: box-shadow .25s ease-in;
    box-shadow: 0 0 #fff0;
  }
  .filepond--file-action-button:focus,.filepond--file-action-button:hover {
    box-shadow: 0 0 0 .125em #ffffffe6;
  }
  .filepond--file-action-button[disabled] {
    color: #ffffff80;
    background-color: #00000040;
  }
  .filepond--file-action-button[hidden] {
    display: none;
  }
  .filepond--file-info {
    will-change: transform,opacity;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    min-width: 0;
    margin: 0 .5em 0 0;
    display: flex;
    position: static;
  }
  .filepond--file-info * {
    margin: 0;
  }
  .filepond--file-info .filepond--file-info-main {
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    font-size: .75em;
    line-height: 1.2;
    overflow: hidden;
  }
  .filepond--file-info .filepond--file-info-sub {
    opacity: .5;
    white-space: nowrap;
    font-size: .625em;
    transition: opacity .25s ease-in-out;
  }
  .filepond--file-info .filepond--file-info-sub:empty {
    display: none;
  }
  .filepond--file-status {
    text-align: right;
    will-change: transform,opacity;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: flex-end;
    min-width: 2.25em;
    margin: 0;
    display: flex;
    position: static;
  }
  .filepond--file-status * {
    white-space: nowrap;
    margin: 0;
  }
  .filepond--file-status .filepond--file-status-main {
    font-size: .75em;
    line-height: 1.2;
  }
  .filepond--file-status .filepond--file-status-sub {
    opacity: .5;
    font-size: .625em;
    transition: opacity .25s ease-in-out;
  }
  .filepond--file-wrapper.filepond--file-wrapper {
    border: none;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .filepond--file-wrapper.filepond--file-wrapper>legend {
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .filepond--file {
    color: #fff;
    border-radius: .5em;
    align-items: flex-start;
    height: 100%;
    padding: .5625em;
    display: flex;
    position: static;
  }
  .filepond--file .filepond--file-status {
    margin-left: auto;
    margin-right: 2.25em;
  }
  .filepond--file .filepond--processing-complete-indicator {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 3;
  }
  .filepond--file .filepond--file-action-button,.filepond--file .filepond--processing-complete-indicator,.filepond--file .filepond--progress-indicator {
    position: absolute;
  }
  .filepond--file [data-align*=left] {
    left: .5625em;
  }
  .filepond--file [data-align*=right] {
    right: .5625em;
  }
  .filepond--file [data-align*=center] {
    left: calc(50% - .8125em);
  }
  .filepond--file [data-align*=bottom] {
    bottom: 1.125em;
  }
  .filepond--file [data-align=center] {
    top: calc(50% - .8125em);
  }
  .filepond--file .filepond--progress-indicator {
    margin-top: .1875em;
  }
  .filepond--file .filepond--progress-indicator[data-align*=right] {
    margin-right: .1875em;
  }
  .filepond--file .filepond--progress-indicator[data-align*=left] {
    margin-left: .1875em;
  }
  [data-filepond-item-state*=error] .filepond--file-info,[data-filepond-item-state*=invalid] .filepond--file-info,[data-filepond-item-state=cancelled] .filepond--file-info {
    margin-right: 2.25em;
  }
  [data-filepond-item-state~=processing] .filepond--file-status-sub {
    opacity: 0;
  }
  [data-filepond-item-state~=processing] .filepond--action-abort-item-processing~.filepond--file-status .filepond--file-status-sub {
    opacity: .5;
  }
  [data-filepond-item-state=processing-error] .filepond--file-status-sub {
    opacity: 0;
  }
  [data-filepond-item-state=processing-error] .filepond--action-retry-item-processing~.filepond--file-status .filepond--file-status-sub {
    opacity: .5;
  }
  [data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg {
    animation: .5s linear .125s both fall;
  }
  [data-filepond-item-state=processing-complete] .filepond--file-status-sub {
    opacity: .5;
  }
  [data-filepond-item-state=processing-complete] .filepond--file-info-sub,[data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden])~.filepond--file-status .filepond--file-status-sub {
    opacity: 0;
  }
  [data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing~.filepond--file-info .filepond--file-info-sub {
    opacity: .5;
  }
  [data-filepond-item-state*=error] .filepond--file-wrapper,[data-filepond-item-state*=error] .filepond--panel,[data-filepond-item-state*=invalid] .filepond--file-wrapper,[data-filepond-item-state*=invalid] .filepond--panel {
    animation: .65s linear both shake;
  }
  [data-filepond-item-state*=busy] .filepond--progress-indicator svg {
    animation: 1s linear infinite spin;
  }
  @keyframes spin {
    0% {
      transform: rotate(0);
    }
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes shake {
    10%,90% {
      transform: translate(-.0625em);
    }
    20%,80% {
      transform: translate(.125em);
    }
    30%,50%,70% {
      transform: translate(-.25em);
    }
    40%,60% {
      transform: translate(.25em);
    }
  }
  @keyframes fall {
    0% {
      opacity: 0;
      animation-timing-function: ease-out;
      transform: scale(.5);
    }
    70% {
      opacity: 1;
      animation-timing-function: ease-in-out;
      transform: scale(1.1);
    }
    to {
      animation-timing-function: ease-out;
      transform: scale(1);
    }
  }
  .filepond--hopper[data-hopper-state=drag-over]>* {
    pointer-events: none;
  }
  .filepond--hopper[data-hopper-state=drag-over]:after {
    content: "";
    z-index: 100;
    position: absolute;
    inset: 0;
  }
  .filepond--progress-indicator {
    z-index: 103;
  }
  .filepond--file-action-button {
    z-index: 102;
  }
  .filepond--file-status {
    z-index: 101;
  }
  .filepond--file-info {
    z-index: 100;
  }
  .filepond--item {
    z-index: 1;
    will-change: transform,opacity;
    touch-action: auto;
    margin: .25em;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .filepond--item>.filepond--panel {
    z-index: -1;
  }
  .filepond--item>.filepond--panel .filepond--panel-bottom {
    box-shadow: 0 .0625em .125em -.0625em #00000040;
  }
  .filepond--item>.filepond--file-wrapper,.filepond--item>.filepond--panel {
    transition: opacity .15s ease-out;
  }
  .filepond--item[data-drag-state] {
    cursor: -webkit-grab;
    cursor: grab;
  }
  .filepond--item[data-drag-state]>.filepond--panel {
    transition: box-shadow .125s ease-in-out;
    box-shadow: 0 0 #0000;
  }
  .filepond--item[data-drag-state=drag] {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .filepond--item[data-drag-state=drag]>.filepond--panel {
    box-shadow: 0 .125em .3125em #00000053;
  }
  .filepond--item[data-drag-state]:not([data-drag-state=idle]) {
    z-index: 2;
  }
  .filepond--item-panel {
    background-color: #64605e;
  }
  [data-filepond-item-state=processing-complete] .filepond--item-panel {
    background-color: #369763;
  }
  [data-filepond-item-state*=error] .filepond--item-panel,[data-filepond-item-state*=invalid] .filepond--item-panel {
    background-color: #c44e47;
  }
  .filepond--item-panel {
    border-radius: .5em;
    transition: background-color .25s;
  }
  .filepond--list-scroller {
    will-change: transform;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .filepond--list-scroller[data-state=overflow] .filepond--list {
    bottom: 0;
    right: 0;
  }
  .filepond--list-scroller[data-state=overflow] {
    -webkit-overflow-scrolling: touch;
    overflow: hidden scroll;
    -webkit-mask: linear-gradient(#000 calc(100% - .5em),#0000);
    mask: linear-gradient(#000 calc(100% - .5em),#0000);
  }
  .filepond--list-scroller::-webkit-scrollbar {
    background: 0 0;
  }
  .filepond--list-scroller::-webkit-scrollbar:vertical {
    width: 1em;
  }
  .filepond--list-scroller::-webkit-scrollbar:horizontal {
    height: 0;
  }
  .filepond--list-scroller::-webkit-scrollbar-thumb {
    background-color: #0000004d;
    background-clip: content-box;
    border: .3125em solid #0000;
    border-radius: 99999px;
  }
  .filepond--list.filepond--list {
    will-change: transform;
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    top: 0;
  }
  .filepond--list {
    left: .75em;
    right: .75em;
  }
  .filepond--root[data-style-panel-layout~=integrated] {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--panel-root,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root {
    border-radius: 0;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--panel-root>*,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root>* {
    display: none;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label {
    z-index: 7;
    justify-content: center;
    align-items: center;
    height: auto;
    display: flex;
    bottom: 0;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--item-panel,.filepond--root[data-style-panel-layout~=integrated] .filepond--item-panel {
    display: none;
  }
  .filepond--root[data-style-panel-layout~=compact] .filepond--list-scroller,.filepond--root[data-style-panel-layout~=integrated] .filepond--list-scroller {
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
  }
  .filepond--root[data-style-panel-layout~=compact] .filepond--list,.filepond--root[data-style-panel-layout~=integrated] .filepond--list {
    height: 100%;
    left: 0;
    right: 0;
  }
  .filepond--root[data-style-panel-layout~=compact] .filepond--item,.filepond--root[data-style-panel-layout~=integrated] .filepond--item {
    margin: 0;
  }
  .filepond--root[data-style-panel-layout~=compact] .filepond--file-wrapper,.filepond--root[data-style-panel-layout~=integrated] .filepond--file-wrapper {
    height: 100%;
  }
  .filepond--root[data-style-panel-layout~=compact] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label {
    z-index: 7;
  }
  .filepond--root[data-style-panel-layout~=circle] {
    border-radius: 99999rem;
    overflow: hidden;
  }
  .filepond--root[data-style-panel-layout~=circle]>.filepond--panel {
    border-radius: inherit;
  }
  .filepond--root[data-style-panel-layout~=circle]>.filepond--panel>*,.filepond--root[data-style-panel-layout~=circle] .filepond--file-info,.filepond--root[data-style-panel-layout~=circle] .filepond--file-status {
    display: none;
  }
  @media not all and (min-resolution:.001dpcm) {
    @supports ((-webkit-appearance:none)) and (stroke-color:transparent) {
      .filepond--root[data-style-panel-layout~=circle] {
        will-change: transform;
      }
    }
  }
  .filepond--panel-root {
    background-color: #f1f0ef;
    border-radius: .5em;
  }
  .filepond--panel {
    pointer-events: none;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100% !important;
  }
  .filepond-panel:not([data-scalable=false]) {
    height: auto !important;
  }
  .filepond--panel[data-scalable=false]>div {
    display: none;
  }
  .filepond--panel[data-scalable=true] {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-color: #0000 !important;
    border: none !important;
  }
  .filepond--panel-bottom,.filepond--panel-center,.filepond--panel-top {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .filepond--panel-bottom,.filepond--panel-top {
    height: .5em;
  }
  .filepond--panel-top {
    border-bottom: none !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .filepond--panel-top:after {
    content: "";
    background-color: inherit;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
  }
  .filepond--panel-bottom,.filepond--panel-center {
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: translateY(.5em);
  }
  .filepond--panel-bottom {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }
  .filepond--panel-bottom:before {
    content: "";
    background-color: inherit;
    height: 2px;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
  }
  .filepond--panel-center {
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    height: 100px !important;
  }
  .filepond--panel-center:not([style]) {
    visibility: hidden;
  }
  .filepond--progress-indicator {
    color: #fff;
    pointer-events: none;
    will-change: transform,opacity;
    width: 1.25em;
    height: 1.25em;
    margin: 0;
    position: static;
  }
  .filepond--progress-indicator svg {
    vertical-align: top;
    transform-box: fill-box;
    width: 100%;
    height: 100%;
  }
  .filepond--progress-indicator path {
    fill: none;
    stroke: currentColor;
  }
  .filepond--list-scroller {
    z-index: 6;
  }
  .filepond--drop-label {
    z-index: 5;
  }
  .filepond--drip {
    z-index: 3;
  }
  .filepond--root>.filepond--panel {
    z-index: 2;
  }
  .filepond--browser {
    z-index: 1;
  }
  .filepond--root {
    box-sizing: border-box;
    text-align: left;
    text-rendering: optimizelegibility;
    contain: layout style size;
    direction: ltr;
    margin-bottom: 1em;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-size: 1rem;
    font-weight: 450;
    line-height: normal;
    position: relative;
  }
  .filepond--root * {
    box-sizing: inherit;
    line-height: inherit;
  }
  .filepond--root :not(text) {
    font-size: inherit;
  }
  .filepond--root[data-disabled] {
    pointer-events: none;
  }
  .filepond--root[data-disabled] .filepond--list-scroller {
    pointer-events: all;
  }
  .filepond--root[data-disabled] .filepond--list {
    pointer-events: none;
  }
  .filepond--root .filepond--drop-label {
    min-height: 4.75em;
  }
  .filepond--root .filepond--list-scroller {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .filepond--root .filepond--credits {
    opacity: .4;
    color: inherit;
    z-index: 3;
    font-size: 11px;
    line-height: .85;
    text-decoration: none;
    position: absolute;
    bottom: -14px;
    right: 0;
  }
  .filepond--root .filepond--credits[style] {
    margin-top: 14px;
    top: 0;
    bottom: auto;
  }
  .filepond--action-edit-item.filepond--action-edit-item {
    width: 2em;
    height: 2em;
    padding: .1875em;
  }
  .filepond--action-edit-item.filepond--action-edit-item[data-align*=center] {
    margin-left: -.1875em;
  }
  .filepond--action-edit-item.filepond--action-edit-item[data-align*=bottom] {
    margin-bottom: -.1875em;
  }
  .filepond--action-edit-item-alt {
    line-height: inherit;
    color: inherit;
    pointer-events: all;
    background: 0 0;
    border: none;
    outline: none;
    margin: 0 0 0 .25em;
    padding: 0;
    font-family: inherit;
    position: absolute;
  }
  .filepond--action-edit-item-alt svg {
    width: 1.3125em;
    height: 1.3125em;
  }
  .filepond--action-edit-item-alt span {
    opacity: 0;
    font-size: 0;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--action-edit-item {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .filepond--image-preview-markup {
    position: absolute;
    top: 0;
    left: 0;
  }
  .filepond--image-preview-wrapper {
    z-index: 2;
  }
  .filepond--image-preview-overlay {
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    min-height: 5rem;
    max-height: 7rem;
    margin: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .filepond--image-preview-overlay svg {
    width: 100%;
    height: auto;
    color: inherit;
    max-height: inherit;
  }
  .filepond--image-preview-overlay-idle {
    mix-blend-mode: multiply;
    color: #282828d9;
  }
  .filepond--image-preview-overlay-success {
    mix-blend-mode: normal;
    color: #369763;
  }
  .filepond--image-preview-overlay-failure {
    mix-blend-mode: normal;
    color: #c44e47;
  }
  @supports (-webkit-marquee-repetition:infinite) and ((-o-object-fit:fill) or (object-fit:fill)) {
    .filepond--image-preview-overlay-idle {
      mix-blend-mode: normal;
    }
  }
  .filepond--image-preview-wrapper {
    -webkit-user-select: none;
    user-select: none;
    background: #00000003;
    border-radius: .45em;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .filepond--image-preview {
    z-index: 1;
    pointer-events: none;
    will-change: transform,opacity;
    background: #222;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
  }
  .filepond--image-clip {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .filepond--image-clip[data-transparency-indicator=grid] img,.filepond--image-clip[data-transparency-indicator=grid] canvas {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M0 0 H50 V50 H0'/%3E%3Cpath d='M50 50 H100 V100 H50'/%3E%3C/svg%3E");
    background-size: 1.25em 1.25em;
  }
  .filepond--image-bitmap,.filepond--image-vector {
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
  }
  .filepond--root[data-style-panel-layout~=integrated] .filepond--image-preview-wrapper {
    border-radius: 0;
  }
  .filepond--root[data-style-panel-layout~=integrated] .filepond--image-preview {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--image-preview-wrapper {
    border-radius: 99999rem;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--image-preview-overlay {
    top: auto;
    bottom: 0;
    transform: scaleY(-1);
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--file .filepond--file-action-button[data-align*=bottom]:not([data-align*=center]) {
    margin-bottom: .325em;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=left] {
    left: calc(50% - 3em);
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--file [data-align*=right] {
    right: calc(50% - 3em);
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=left],.filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=right] {
    margin-bottom: .5125em;
  }
  .filepond--root[data-style-panel-layout~=circle] .filepond--progress-indicator[data-align*=bottom][data-align*=center] {
    margin-top: 0;
    margin-bottom: .1875em;
    margin-left: .1875em;
  }
  .filepond--media-preview audio {
    display: none;
  }
  .filepond--media-preview .audioplayer {
    cursor: pointer;
    width: calc(100% - 1.4em);
    margin: 2.3em auto auto;
  }
  .filepond--media-preview .playpausebtn {
    float: left;
    cursor: pointer;
    background-position: 50%;
    background-repeat: no-repeat;
    border: none;
    border-radius: 25px;
    outline: none;
    width: 25px;
    height: 25px;
    margin-top: .3em;
    margin-right: .3em;
  }
  .filepond--media-preview .playpausebtn:hover {
    background-color: #00000080;
  }
  .filepond--media-preview .play {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAyElEQVQ4T9XUsWoCQRRG4XPaFL5SfIy8gKYKBCysrax8Ahs7qzQ2qVIFOwsrsbEWLEK6EBFGBrIQhN2d3dnGgalm+Jh7789Ix8uOPe4YDCH0gZ66atKW0pJDCE/AEngDXtRjCpwCRucbGANzNVTBqWBhfAJDdV+GNgWj8wtM41bPt3AbsDB2f69d/0dzwC0wUDe54A8wAWbqJbfkD+BZPeQO5QsYqYu6LKb0MIb7VT3VYfG8CnwEHtT3FKi4c8e/TZMyk3LYFrwCgMdHFbRDKS8AAAAASUVORK5CYII=);
  }
  .filepond--media-preview .pause {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAh0lEQVQ4T+2UsQkCURBE30PLMbAMMResQrAPsQ0TK9AqDKxGZeTLD74aGNwlhzfZssvADDMrPcOe+RggYZIJcG2s2KinMidZAvu6u6uzT8u+JCeZArfmcKUeK+EaONTdQy23bxgJX8aPHvIHsSnVuzTx36rn2pQFsGuqN//ZlK7vbIDvq6vkJ9yteBXzecYbAAAAAElFTkSuQmCC);
  }
  .filepond--media-preview .timeline {
    box-sizing: content-box;
    float: left;
    background: #ffffff4d padding-box content-box;
    border-radius: 15px;
    width: calc(100% - 2.5em);
    height: 3px;
    margin-top: 2px;
    padding-block: 14px;
  }
  .filepond--media-preview .playhead {
    background: #fff;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    margin-top: -5px;
    transform: translate(-50%);
  }
  .filepond--media-preview-wrapper {
    pointer-events: auto;
    background: #00000003;
    border-radius: .45em;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .filepond--media-preview-wrapper:before {
    content: " ";
    width: 100%;
    height: 2em;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#00000000",GradientType=0);
    z-index: 3;
    background: linear-gradient(#000,#0000);
    position: absolute;
  }
  .filepond--media-preview {
    z-index: 1;
    transform-origin: 50%;
    will-change: transform,opacity;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }
  .filepond--media-preview video,.filepond--media-preview audio {
    will-change: transform;
    width: 100%;
  }
  .noUi-target,.noUi-target * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: #0000;
    -webkit-user-select: none;
    user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    box-sizing: border-box;
  }
  .noUi-target {
    position: relative;
  }
  .noUi-base,.noUi-connects {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .noUi-connects {
    z-index: 0;
    overflow: hidden;
  }
  .noUi-connect,.noUi-origin {
    will-change: transform;
    z-index: 1;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: flat;
    position: absolute;
    top: 0;
    right: 0;
  }
  .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
    left: 0;
    right: auto;
  }
  .noUi-vertical .noUi-origin {
    width: 0;
    top: -100%;
  }
  .noUi-horizontal .noUi-origin {
    height: 0;
  }
  .noUi-handle {
    backface-visibility: hidden;
    position: absolute;
  }
  .noUi-touch-area {
    width: 100%;
    height: 100%;
  }
  .noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin {
    transition: transform .3s;
  }
  .noUi-state-drag * {
    cursor: inherit !important;
  }
  .noUi-horizontal {
    height: 18px;
  }
  .noUi-horizontal .noUi-handle {
    width: 34px;
    height: 28px;
    top: -6px;
    right: -17px;
  }
  .noUi-vertical {
    width: 18px;
  }
  .noUi-vertical .noUi-handle {
    width: 28px;
    height: 34px;
    bottom: -17px;
    right: -6px;
  }
  .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
    left: -17px;
    right: auto;
  }
  .noUi-target {
    background: #fafafa;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb;
  }
  .noUi-connects {
    border-radius: 3px;
  }
  .noUi-connect {
    background: #3fb8af;
  }
  .noUi-draggable {
    cursor: ew-resize;
  }
  .noUi-vertical .noUi-draggable {
    cursor: ns-resize;
  }
  .noUi-handle {
    cursor: default;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb;
  }
  .noUi-active {
    box-shadow: inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb;
  }
  .noUi-handle:before,.noUi-handle:after {
    content: "";
    background: #e8e7e6;
    width: 1px;
    height: 14px;
    display: block;
    position: absolute;
    top: 6px;
    left: 14px;
  }
  .noUi-handle:after {
    left: 17px;
  }
  .noUi-vertical .noUi-handle:before,.noUi-vertical .noUi-handle:after {
    width: 14px;
    height: 1px;
    top: 14px;
    left: 6px;
  }
  .noUi-vertical .noUi-handle:after {
    top: 17px;
  }
  [disabled] .noUi-connect {
    background: #b8b8b8;
  }
  [disabled].noUi-target,[disabled].noUi-handle,[disabled] .noUi-handle {
    cursor: not-allowed;
  }
  .noUi-pips,.noUi-pips * {
    box-sizing: border-box;
  }
  .noUi-pips {
    color: #999;
    position: absolute;
  }
  .noUi-value {
    white-space: nowrap;
    text-align: center;
    position: absolute;
  }
  .noUi-value-sub {
    color: #ccc;
    font-size: 10px;
  }
  .noUi-marker {
    background: #ccc;
    position: absolute;
  }
  .noUi-marker-sub,.noUi-marker-large {
    background: #aaa;
  }
  .noUi-pips-horizontal {
    width: 100%;
    height: 80px;
    padding: 10px 0;
    top: 100%;
    left: 0;
  }
  .noUi-value-horizontal {
    transform: translate(-50%,50%);
  }
  .noUi-rtl .noUi-value-horizontal {
    transform: translate(50%,50%);
  }
  .noUi-marker-horizontal.noUi-marker {
    width: 2px;
    height: 5px;
    margin-left: -1px;
  }
  .noUi-marker-horizontal.noUi-marker-sub {
    height: 10px;
  }
  .noUi-marker-horizontal.noUi-marker-large {
    height: 15px;
  }
  .noUi-pips-vertical {
    height: 100%;
    padding: 0 10px;
    top: 0;
    left: 100%;
  }
  .noUi-value-vertical {
    padding-left: 25px;
    transform: translateY(-50%);
  }
  .noUi-rtl .noUi-value-vertical {
    transform: translateY(50%);
  }
  .noUi-marker-vertical.noUi-marker {
    width: 5px;
    height: 2px;
    margin-top: -1px;
  }
  .noUi-marker-vertical.noUi-marker-sub {
    width: 10px;
  }
  .noUi-marker-vertical.noUi-marker-large {
    width: 15px;
  }
  .noUi-tooltip {
    color: #000;
    text-align: center;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding: 5px;
    display: block;
    position: absolute;
  }
  .noUi-horizontal .noUi-tooltip {
    bottom: 120%;
    left: 50%;
    transform: translate(-50%);
  }
  .noUi-vertical .noUi-tooltip {
    top: 50%;
    right: 120%;
    transform: translateY(-50%);
  }
  .noUi-horizontal .noUi-origin>.noUi-tooltip {
    bottom: 10px;
    left: auto;
    transform: translate(50%);
  }
  .noUi-vertical .noUi-origin>.noUi-tooltip {
    top: auto;
    right: 28px;
    transform: translateY(-18px);
  }
  .fi-fo-builder {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: calc(var(--spacing) * 4);
    & .fi-fo-builder-actions {
      display: flex;
      column-gap: calc(var(--spacing) * 3);
      &.fi-hidden {
        display: none;
      }
    }
    & .fi-fo-builder-items {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      & > * + * {
        margin-top: calc(var(--spacing) * 4);
      }
    }
    & .fi-fo-builder-item {
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &.fi-collapsed {
        & .fi-fo-builder-item-header-collapsible-actions {
          rotate: calc(180deg * -1);
        }
        & .fi-fo-builder-item-header-collapse-action {
          pointer-events: none;
          opacity: 0%;
        }
      }
      &:not(.fi-collapsed) {
        & .fi-fo-builder-item-header-expand-action {
          pointer-events: none;
          opacity: 0%;
        }
      }
    }
    &.fi-fo-builder-not-contained > .fi-fo-builder-items {
      & > .fi-fo-builder-item {
        border-radius: 0;
        background-color: transparent;
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        & > .fi-fo-builder-item-content {
          padding: 0px;
        }
      }
      & > .fi-fo-builder-label-between-items-ctn {
        & > .fi-fo-builder-label-between-items-divider-before {
          width: 0px;
        }
        & > .fi-fo-builder-label-between-items {
          padding-inline-start: 0px;
        }
      }
    }
    & .fi-fo-builder-item-header {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      overflow: hidden;
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 3);
    }
    &.fi-collapsible {
      & .fi-fo-builder-item-header {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
      }
    }
    & .fi-fo-builder-item-header-start-actions {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-fo-builder-item-header-icon {
      flex-shrink: 0;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & .fi-fo-builder-item-header-label {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &.fi-truncated {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    & .fi-fo-builder-item-header-end-actions {
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-fo-builder-item-header-collapsible-actions {
      position: relative;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-builder-item-header-collapse-action {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-builder-item-header-expand-action {
      position: absolute;
      inset: 0px;
      rotate: 180deg;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-builder-item-content {
      &:not(.fi-fo-builder-item-content-has-preview) {
        padding: calc(var(--spacing) * 4);
      }
      &.fi-fo-builder-item-content-has-preview {
        position: relative;
      }
    }
    & .fi-fo-builder-item-has-header > .fi-fo-builder-item-content {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-100);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-fo-builder-item-preview {
      &:not(.fi-interactive) {
        pointer-events: none;
      }
    }
    & .fi-fo-builder-item-preview-edit-overlay {
      position: absolute;
      inset: 0px;
      z-index: 1;
      cursor: pointer;
    }
    & .fi-fo-builder-block-picker-ctn {
      border-radius: var(--radius-lg);
      background-color: var(--color-white);
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
    & .fi-fo-builder-add-between-items-ctn {
      pointer-events: none;
      visibility: hidden;
      position: relative;
      margin-top: 0px;
      display: flex;
      height: 0px;
      width: 100%;
      justify-content: center;
      overflow: visible;
      opacity: 0%;
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-builder-item:hover + .fi-fo-builder-add-between-items-ctn, & .fi-fo-builder-add-between-items-ctn:has(+ .fi-fo-builder-item:hover), & .fi-fo-builder-add-between-items-ctn:hover, & .fi-fo-builder-add-between-items-ctn:focus-within {
      pointer-events: auto;
      visibility: visible;
      opacity: 100%;
    }
    & .fi-fo-builder-add-between-items {
      position: absolute;
      top: calc(1 / 2 * 100%);
      z-index: 10;
      --tw-translate-y: calc(-50% + 0.5rem);
      translate: var(--tw-translate-x) var(--tw-translate-y);
      border-radius: var(--radius-lg);
      background-color: var(--color-white);
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
    & .fi-fo-builder-label-between-items-ctn {
      position: relative;
      margin-top: var(--spacing);
      margin-bottom: calc(var(--spacing) * -3);
      display: flex;
      align-items: center;
    }
    & .fi-fo-builder-label-between-items-divider-before {
      width: calc(var(--spacing) * 3);
      flex-shrink: 0;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-200);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-fo-builder-label-between-items {
      flex-shrink: 0;
      padding-inline: var(--spacing);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-fo-builder-label-between-items-divider-after {
      flex: 1;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-200);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-fo-builder-block-picker {
      display: flex;
      justify-content: center;
      &.fi-align-start, &.fi-align-left {
        justify-content: flex-start;
      }
      &.fi-align-end, &.fi-align-right {
        justify-content: flex-end;
      }
    }
  }
  .fi-fo-checkbox-list .fi-fo-checkbox-list-search-input-wrp {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .fi-fo-checkbox-list .fi-fo-checkbox-list-actions {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .fi-fo-checkbox-list .fi-fo-checkbox-list-options {
    gap: calc(var(--spacing) * 4);
    &.fi-grid-direction-col {
      margin-top: calc(var(--spacing) * -4);
      & .fi-fo-checkbox-list-option-ctn {
        break-inside: avoid;
        padding-top: calc(var(--spacing) * 4);
      }
    }
  }
  .fi-fo-checkbox-list .fi-fo-checkbox-list-option {
    display: flex;
    column-gap: calc(var(--spacing) * 3);
    & .fi-checkbox-input {
      margin-top: var(--spacing);
      flex-shrink: 0;
    }
    & .fi-fo-checkbox-list-option-text {
      display: grid;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
    & .fi-fo-checkbox-list-option-label {
      overflow: hidden;
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      overflow-wrap: break-word;
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-fo-checkbox-list-option-description {
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    &:has(.fi-checkbox-input:disabled) {
      & .fi-fo-checkbox-list-option-label {
        color: var(--gray-400);
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
      }
      & .fi-fo-checkbox-list-option-description {
        color: var(--gray-300);
        &:where(.dark, .dark *) {
          color: var(--gray-600);
        }
      }
    }
  }
  .fi-fo-checkbox-list .fi-fo-checkbox-list-no-search-results-message {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-fo-code-editor {
    overflow: hidden;
    & .cm-editor {
      &.cm-focused {
        --tw-outline-style: none !important;
        outline-style: none !important;
      }
      & .cm-gutters {
        min-height: calc(var(--spacing) * 48) !important;
        border-inline-end-color: var(--gray-300) !important;
        background-color: var(--gray-100) !important;
        &:where(.dark, .dark *) {
          border-inline-end-color: var(--gray-800) !important;
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-950) !important;
        }
        & .cm-gutter {
          &.cm-lineNumbers {
            & .cm-gutterElement {
              margin-inline-start: var(--spacing);
              border-start-start-radius: var(--radius-md);
              border-end-start-radius: var(--radius-md);
              &.cm-activeLineGutter {
                background-color: var(--gray-200) !important;
                &:where(.dark, .dark *) {
                  background-color: var(--gray-800) !important;
                }
              }
            }
          }
          &.cm-foldGutter {
            & .cm-gutterElement {
              &.cm-activeLineGutter {
                background-color: var(--gray-200) !important;
                &:where(.dark, .dark *) {
                  background-color: var(--gray-800) !important;
                }
              }
            }
          }
        }
      }
      & .cm-scroller {
        min-height: calc(var(--spacing) * 48) !important;
      }
      & .cm-line {
        margin-inline-end: var(--spacing);
        border-start-end-radius: var(--radius-md);
        border-end-end-radius: var(--radius-md);
      }
    }
    &.fi-disabled {
      & .cm-editor {
        & .cm-gutters {
          & .cm-gutter {
            &.cm-lineNumbers {
              & .cm-gutterElement {
                &.cm-activeLineGutter {
                  background-color: transparent !important;
                }
              }
            }
            &.cm-foldGutter {
              & .cm-gutterElement {
                &.cm-activeLineGutter {
                  background-color: transparent !important;
                }
              }
            }
          }
        }
        & .cm-line {
          &.cm-activeLine {
            background-color: transparent !important;
          }
        }
      }
    }
  }
  .fi-fo-color-picker .fi-input-wrp-content {
    display: flex;
  }
  .fi-fo-color-picker .fi-fo-color-picker-preview {
    margin-block: auto;
    margin-inline-end: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    -webkit-user-select: none;
    user-select: none;
    &.fi-empty {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-200);
      --tw-ring-inset: inset;
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .fi-fo-color-picker .fi-fo-color-picker-panel {
    position: absolute;
    z-index: 10;
    display: none;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .fi-fo-date-time-picker input::-webkit-datetime-edit {
    display: block;
    padding: 0;
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-trigger {
    width: 100%;
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-display-text-input {
    width: 100%;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--gray-950);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &::placeholder {
      color: var(--gray-400);
    }
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:disabled {
      color: var(--gray-500);
    }
    &:disabled {
      -webkit-text-fill-color: var(--color-gray-500);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &:where(.dark, .dark *) {
      &::placeholder {
        color: var(--gray-500);
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        color: var(--gray-400);
      }
    }
    &:where(.dark, .dark *) {
      &:disabled {
        -webkit-text-fill-color: var(--color-gray-400);
      }
    }
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-panel {
    position: absolute;
    z-index: 10;
    :where(&) > :where(:not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & .fi-fo-date-time-picker-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-month-select {
    flex-grow: 1;
    cursor: pointer;
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding: 0px;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-year-input {
    width: calc(var(--spacing) * 16);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding: 0px;
    text-align: right;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-950);
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spacing);
    & .fi-fo-date-time-picker-calendar-header-day {
      text-align: center;
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-calendar {
    display: grid;
    grid-template-columns: repeat(7,minmax(calc(var(--spacing) * 7),1fr));
    gap: var(--spacing);
    & .fi-fo-date-time-picker-calendar-day {
      border-radius: calc(infinity * 1px);
      text-align: center;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: var(--leading-loose);
      line-height: var(--leading-loose);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &.fi-disabled {
        pointer-events: none;
        opacity: 50%;
      }
      &:not(.fi-disabled) {
        cursor: pointer;
      }
      &.fi-selected {
        background-color: var(--gray-50);
        color: var(--primary-600);
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
        &:where(.dark, .dark *) {
          color: var(--primary-400);
        }
      }
      &.fi-focused:not(.fi-selected):not(.fi-disabled) {
        background-color: var(--gray-100);
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      &.fi-fo-date-time-picker-calendar-day-today:not(.fi-focused):not( .fi-selected ):not(.fi-disabled) {
        color: var(--primary-600);
        &:where(.dark, .dark *) {
          color: var(--primary-400);
        }
      }
      &:not(.fi-fo-date-time-picker-calendar-day-today):not( .fi-selected ) {
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
    }
  }
  .fi-fo-date-time-picker .fi-fo-date-time-picker-time-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      flex-direction: row-reverse;
    }
    & input {
      margin-inline-end: var(--spacing);
      width: calc(var(--spacing) * 10);
      --tw-border-style: none;
      border-style: none;
      background-color: transparent;
      padding: 0px;
      text-align: center;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-950);
      &:focus {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-fo-date-time-picker-time-input-separator {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
  }
  .fi-fo-field {
    display: grid;
    row-gap: calc(var(--spacing) * 2);
    &.fi-fo-field-has-inline-label {
      @media (width >= 40rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      @media (width >= 40rem) {
        align-items: flex-start;
      }
      @media (width >= 40rem) {
        column-gap: calc(var(--spacing) * 4);
      }
      & .fi-fo-field-content-col {
        @media (width >= 40rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
    & .fi-fo-field-label-ctn, & .fi-fo-field-label {
      display: flex;
      align-items: flex-start;
      column-gap: calc(var(--spacing) * 3);
      & > .fi-checkbox-input {
        margin-top: calc(var(--spacing) * 0.5);
        flex-shrink: 0;
      }
      & > .fi-toggle {
        margin-block: calc(var(--spacing) * -0.5);
      }
      & > .fi-sc:nth-child(1) {
        flex-grow: 0;
      }
      &.fi-hidden {
        display: none;
      }
    }
    & .fi-fo-field-label-content {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      & .fi-fo-field-label-required-mark {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--danger-600);
        &:where(.dark, .dark *) {
          color: var(--danger-400);
        }
      }
    }
    & .fi-fo-field-label-col {
      display: grid;
      height: 100%;
      grid-auto-columns: minmax(0, 1fr);
      row-gap: calc(var(--spacing) * 2);
      &.fi-vertical-align-start {
        @media (width >= 40rem) {
          align-items: flex-start;
        }
      }
      &.fi-vertical-align-center {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
      &.fi-vertical-align-end {
        @media (width >= 40rem) {
          align-items: flex-end;
        }
      }
    }
    & .fi-fo-field-content-col {
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      row-gap: calc(var(--spacing) * 2);
    }
    & .fi-fo-field-content-ctn {
      display: flex;
      width: 100%;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-fo-field-content {
      width: 100%;
    }
    & .fi-fo-field-wrp-error-message {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--danger-600);
      &:where(.dark, .dark *) {
        color: var(--danger-400);
      }
    }
    & .fi-fo-field-wrp-error-list {
      list-style-position: inside;
      list-style-type: disc;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .fi-fo-file-upload {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spacing) * 2);
    &.fi-align-start, &.fi-align-left {
      align-items: flex-start;
    }
    &.fi-align-center {
      align-items: center;
    }
    &.fi-align-end, &.fi-align-right {
      align-items: flex-end;
    }
    & .fi-fo-file-upload-input-ctn {
      height: 100%;
      width: 100%;
    }
    &.fi-fo-file-upload-avatar {
      & .fi-fo-file-upload-input-ctn {
        height: 100%;
        width: calc(var(--spacing) * 32);
      }
    }
    & .fi-fo-file-upload-error-message {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--danger-600);
      &:where(.dark, .dark *) {
        color: var(--danger-400);
      }
    }
    & .filepond--root {
      margin-bottom: 0px;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background-color: var(--color-white);
      font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    & .filepond--root[data-disabled='disabled'] {
      background-color: var(--gray-50);
      &:where(.dark, .dark *) {
        background-color: transparent;
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .filepond--root[data-style-panel-layout='compact circle'] {
      border-radius: calc(infinity * 1px);
    }
    & .filepond--panel-root {
      background-color: transparent;
    }
    & .filepond--drop-label {
      height: auto !important;
      padding: calc(var(--spacing) * 3) !important;
    }
    & .filepond--drop-label label {
      padding: 0px !important;
    }
    & .filepond--drop-label, & .filepond--drop-label label {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-600) !important;
      opacity: 100% !important;
      &:where(.dark, .dark *) {
        color: var(--gray-400) !important;
      }
    }
    & .filepond--label-action {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--primary-700);
      text-decoration-line: none;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:hover {
        @media (hover: hover) {
          color: var(--primary-600);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--primary-400);
          }
        }
      }
    }
    & .filepond--drip-blob {
      background-color: var(--gray-400);
      &:where(.dark, .dark *) {
        background-color: var(--gray-500);
      }
    }
    & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
      display: inline;
      width: calc(50% - 0.5rem);
    }
    @media (width >= 64rem) {
      & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
        width: calc(33.33% - 0.5rem);
      }
    }
    & .filepond--download-icon {
      pointer-events: auto;
      margin-inline-end: var(--spacing);
      display: inline-block;
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
      background-color: var(--color-white);
      vertical-align: bottom;
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 70%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
          }
        }
      }
      -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
      mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100%;
      mask-size: 100%;
    }
    & .filepond--open-icon {
      pointer-events: auto;
      margin-inline-end: var(--spacing);
      display: inline-block;
      width: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 4);
      background-color: var(--color-white);
      vertical-align: bottom;
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 70%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
          }
        }
      }
      -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
      mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100%;
      mask-size: 100%;
    }
    & .filepond--file-action-button.filepond--action-edit-item {
      background-color: color-mix(in srgb, #000 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
      }
    }
    & .fi-fo-file-upload-editor {
      position: fixed;
      inset: 0px;
      isolation: isolate;
      z-index: 50;
      height: 100dvh;
      width: 100vw;
      padding: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        padding: calc(var(--spacing) * 10);
      }
      @media (width >= 48rem) {
        padding: calc(var(--spacing) * 20);
      }
      & .fi-fo-file-upload-editor-overlay {
        position: fixed;
        inset: 0px;
        height: 100%;
        width: 100%;
        cursor: pointer;
        background-color: var(--gray-950);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--gray-950) 50%, transparent);
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-950);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--gray-950) 75%, transparent);
          }
        }
        will-change: transform;
      }
      & .fi-fo-file-upload-editor-window {
        isolation: isolate;
        margin-inline: auto;
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        overflow: hidden;
        border-radius: var(--radius-xl);
        background-color: var(--color-white);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--gray-900);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--gray-900) 10%, transparent);
        }
        @media (width >= 64rem) {
          flex-direction: row;
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-800);
        }
        &:where(.dark, .dark *) {
          --tw-ring-color: var(--gray-50);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--gray-50) 10%, transparent);
          }
        }
      }
      & .fi-fo-file-upload-editor-image-ctn {
        margin: calc(var(--spacing) * 4);
        max-height: 100%;
        max-width: 100%;
        flex: 1;
      }
      & .fi-fo-file-upload-editor-image {
        height: 100%;
        width: auto;
      }
      & .fi-fo-file-upload-editor-control-panel {
        display: flex;
        height: 100%;
        width: 100%;
        flex: 1;
        flex-direction: column;
        overflow-y: auto;
        background-color: var(--gray-50);
        @media (width >= 64rem) {
          max-width: var(--container-xs);
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-900);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--gray-900) 30%, transparent);
          }
        }
        & .fi-fo-file-upload-editor-control-panel-main {
          flex: 1;
          :where(&) > :where(:not(:last-child)) {
            --tw-space-y-reverse: 0;
            margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
            margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
          }
          overflow: auto;
          padding: calc(var(--spacing) * 4);
        }
        & .fi-fo-file-upload-editor-control-panel-group {
          display: grid;
          gap: calc(var(--spacing) * 3);
          & .fi-btn-group {
            width: 100%;
          }
          & .fi-btn.fi-active {
            background-color: var(--gray-50);
            &:where(.dark, .dark *) {
              background-color: var(--gray-700);
            }
          }
          & .fi-fo-file-upload-editor-control-panel-group-title {
            font-size: var(--text-xs);
            line-height: var(--tw-leading, var(--text-xs--line-height));
            color: var(--gray-950);
            &:where(.dark, .dark *) {
              color: var(--color-white);
            }
          }
        }
        & .fi-fo-file-upload-editor-control-panel-footer {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: calc(var(--spacing) * 3);
          padding-inline: calc(var(--spacing) * 4);
          padding-block: calc(var(--spacing) * 3);
        }
        & .fi-fo-file-upload-editor-control-panel-reset-action-ctn {
          display: flex;
          justify-content: flex-end;
        }
      }
      & .cropper-drag-box.cropper-crop.cropper-modal {
        background-color: var(--gray-100);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--gray-100) 50%, transparent);
        }
        opacity: 100%;
        &:where(.dark, .dark *) {
          background-color: var(--gray-900);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--gray-900) 80%, transparent);
          }
        }
      }
      &.fi-fo-file-upload-editor-circle-cropper {
        & .cropper-view-box, & .cropper-face {
          border-radius: 50%;
        }
      }
      &.fi-fo-file-upload-editor-crop-only {
        & .fi-fo-file-upload-editor-window {
          max-width: var(--container-3xl);
          flex-direction: column;
        }
        & .fi-fo-file-upload-editor-image-ctn {
          min-height: 0px;
          flex: 1;
          overflow: hidden;
        }
        & .fi-fo-file-upload-editor-control-panel {
          height: auto;
          flex: none;
          @media (width >= 64rem) {
            max-width: none;
          }
        }
        & .fi-fo-file-upload-editor-control-panel-footer {
          justify-content: flex-start;
        }
      }
    }
  }
  :where(.fi-fo-key-value .fi-fo-key-value-table-ctn > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-color: var(--gray-200);
  }
  :where(.fi-fo-key-value .fi-fo-key-value-table-ctn:where(.dark, .dark *) > :not(:last-child)) {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .fi-fo-key-value .fi-fo-key-value-table {
    width: 100%;
    table-layout: auto;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & > thead {
      & > tr {
        & > th {
          padding-inline: calc(var(--spacing) * 3);
          padding-block: calc(var(--spacing) * 2);
          text-align: start;
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
          color: var(--gray-700);
          &:where(.dark, .dark *) {
            color: var(--gray-200);
          }
          &.fi-has-action {
            width: calc(var(--spacing) * 9);
            padding: 0px;
          }
        }
      }
    }
    & > tbody {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
      & > tr {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 0;
          border-inline-style: var(--tw-border-style);
          border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
          border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        }
        :where(&) > :where(:not(:last-child)) {
          border-color: var(--gray-200);
        }
        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 1;
          }
        }
        &:where(.dark, .dark *) {
          :where(&) > :where(:not(:last-child)) {
            border-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
        & > td {
          width: calc(1 / 2 * 100%);
          padding: 0px;
          &.fi-has-action {
            width: auto;
            padding-inline: calc(var(--spacing) * 3);
            padding-block: calc(var(--spacing) * 2);
            & .fi-fo-key-value-table-row-sortable-handle {
              display: flex;
            }
          }
          & .fi-input {
            font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
          }
        }
      }
    }
  }
  .fi-fo-key-value .fi-fo-key-value-add-action-ctn {
    display: flex;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
  }
  @media (width >= 40rem) {
    .fi-fo-key-value-wrp.fi-fo-field-has-inline-label .fi-fo-field-label-col {
      padding-top: calc(var(--spacing) * 1.5);
    }
  }
  .fi-fo-markdown-editor {
    --color-cm-red: #991b1b;
    --color-cm-orange: #9a3412;
    --color-cm-amber: #92400e;
    --color-cm-yellow: #854d0e;
    --color-cm-lime: #3f6212;
    --color-cm-green: #166534;
    --color-cm-emerald: #065f46;
    --color-cm-teal: #115e59;
    --color-cm-cyan: #155e75;
    --color-cm-sky: #075985;
    --color-cm-blue: #1e40af;
    --color-cm-indigo: #3730a3;
    --color-cm-violet: #5b21b6;
    --color-cm-purple: #6b21a8;
    --color-cm-fuchsia: #86198f;
    --color-cm-pink: #9d174d;
    --color-cm-rose: #9f1239;
    --color-cm-gray: #18181b;
    --color-cm-gray-muted: #71717a;
    --color-cm-gray-background: #e4e4e7;
    &:not(.fi-disabled) {
      max-width: 100%;
      overflow: hidden;
      font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    &.fi-disabled {
      display: block;
      width: 100%;
      border-radius: var(--radius-lg);
      background-color: var(--gray-50);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 3);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: transparent;
      }
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &[style*='--min-height'] {
        min-height: var(--min-height);
      }
      &[style*='--max-height'] {
        overflow-y: auto;
        --tw-outline-style: none;
        outline-style: none;
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &:focus-visible {
          --tw-ring-color: var(--primary-600);
        }
        &:focus-visible {
          --tw-ring-inset: inset;
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            --tw-ring-color: var(--primary-500);
          }
        }
        scrollbar-gutter: stable;
        max-height: var(--max-height);
      }
    }
    & .EasyMDEContainer .CodeMirror {
      padding-inline: calc(var(--spacing) * 4) !important;
      padding-block: 0px !important;
    }
    & .EasyMDEContainer .CodeMirror-lines {
      padding-block: calc(var(--spacing) * 3) !important;
    }
    & .cm-s-easymde .cm-comment {
      background-color: transparent;
      color: var(--color-cm-gray-muted);
    }
    & .EasyMDEContainer .CodeMirror-cursor {
      border-color: currentColor;
    }
    & .EasyMDEContainer .cm-s-easymde .cm-keyword {
      color: var(--color-cm-violet);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-atom {
      color: var(--color-cm-blue);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-number {
      color: var(--color-cm-green);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-def {
      color: var(--color-cm-blue);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-variable {
      color: var(--color-cm-yellow);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-variable-2 {
      color: var(--color-cm-blue);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-variable-3 {
      color: var(--color-cm-emerald);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-property {
      color: var(--color-cm-gray);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-operator {
      color: var(--color-cm-gray);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-string {
      color: var(--color-cm-rose);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-string-2 {
      color: var(--color-cm-rose);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-meta {
      color: var(--color-cm-gray-muted);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-error {
      color: var(--color-cm-red);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-qualifier {
      color: var(--color-cm-gray-muted);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-builtin {
      color: var(--color-cm-violet);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-bracket {
      color: var(--color-cm-gray-muted);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-tag {
      color: var(--color-cm-green);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-attribute {
      color: var(--color-cm-blue);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-hr {
      color: var(--color-cm-gray-muted);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-formatting-quote {
      color: var(--color-cm-sky);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-formatting-quote ~ .cm-quote {
      color: var(--color-cm-gray-muted);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-formatting-list, & .EasyMDEContainer .cm-s-easymde .cm-formatting-list ~ .cm-variable-2, & .EasyMDEContainer .cm-s-easymde .cm-formatting-list ~ .cm-variable-3, & .EasyMDEContainer .cm-s-easymde .cm-formatting-list ~ .cm-keyword, & .EasyMDEContainer .cm-s-easymde .cm-tab ~ .cm-variable-2, & .EasyMDEContainer .cm-s-easymde .cm-tab ~ .cm-variable-3, & .EasyMDEContainer .cm-s-easymde .cm-tab ~ .cm-keyword {
      color: var(--color-cm-gray);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-link {
      color: var(--color-cm-blue);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-tag {
      color: var(--color-cm-red);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-attribute {
      color: var(--color-cm-amber);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-attribute + .cm-string {
      color: var(--color-cm-green);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-formatting-code + .cm-comment:not(.cm-formatting-code) {
      background-color: var(--color-cm-gray-background);
      color: var(--color-cm-gray);
    }
    & .EasyMDEContainer .cm-s-easymde .cm-header-1 {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    & .EasyMDEContainer .cm-s-easymde .cm-header-2 {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    & .EasyMDEContainer .cm-s-easymde .cm-header-3 {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    & .EasyMDEContainer .cm-s-easymde .cm-header-4 {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    & .EasyMDEContainer .cm-s-easymde .cm-header-5 {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    & .EasyMDEContainer .cm-s-easymde .cm-header-6 {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    & .EasyMDEContainer .cm-s-easymde .cm-comment {
      background-image: none;
    }
    & .EasyMDEContainer .cm-s-easymde .cm-formatting-code-block, & .EasyMDEContainer .cm-s-easymde .cm-tab ~ .cm-comment {
      background-color: transparent;
      color: inherit;
    }
    & .EasyMDEContainer .CodeMirror {
      --tw-border-style: none;
      border-style: none;
      background-color: transparent;
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1.5);
      color: inherit;
    }
    & .EasyMDEContainer .CodeMirror-scroll {
      height: auto;
    }
    & .EasyMDEContainer .editor-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing);
      border-radius: 0;
      border-style: var(--tw-border-style);
      border-width: 0px;
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      padding-inline: calc(var(--spacing) * 2.5);
      padding-block: calc(var(--spacing) * 2);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .EasyMDEContainer .editor-toolbar button {
      display: grid !important;
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
      place-content: center;
      border-radius: var(--radius-lg);
      --tw-border-style: none;
      border-style: none;
      padding: 0px;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:hover {
        @media (hover: hover) {
          background-color: var(--gray-50);
        }
      }
      &:focus-visible {
        background-color: var(--gray-50);
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            background-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    & .EasyMDEContainer .editor-toolbar button.active {
      background-color: var(--gray-50);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & .EasyMDEContainer .editor-toolbar button::before {
      display: block;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      background-color: var(--gray-700);
      content: '';
      mask-position: center;
      mask-repeat: no-repeat;
    }
    & .EasyMDEContainer .editor-toolbar button.active::before {
      background-color: var(--primary-600);
    }
    & .EasyMDEContainer .editor-toolbar .separator {
      margin: 0px !important;
      width: var(--spacing);
      --tw-border-style: none;
      border-style: none;
    }
    & .EasyMDEContainer .editor-toolbar .bold::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M4 3a1 1 0 0 1 1-1h6a4.5 4.5 0 0 1 3.274 7.587A4.75 4.75 0 0 1 11.25 18H5a1 1 0 0 1-1-1V3Zm2.5 5.5v-4H11a2 2 0 1 1 0 4H6.5Zm0 2.5v4.5h4.75a2.25 2.25 0 0 0 0-4.5H6.5Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .italic::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M8 2.75A.75.75 0 0 1 8.75 2h7.5a.75.75 0 0 1 0 1.5h-3.215l-4.483 13h2.698a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3.215l4.483-13H8.75A.75.75 0 0 1 8 2.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .strikethrough::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M11.617 3.963c-1.186-.318-2.418-.323-3.416.015-.992.336-1.49.91-1.642 1.476-.152.566-.007 1.313.684 2.1.528.6 1.273 1.1 2.128 1.446h7.879a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5h3.813a5.976 5.976 0 0 1-.447-.456C5.18 7.479 4.798 6.231 5.11 5.066c.312-1.164 1.268-2.055 2.61-2.509 1.336-.451 2.877-.42 4.286-.043.856.23 1.684.592 2.409 1.074a.75.75 0 1 1-.83 1.25 6.723 6.723 0 0 0-1.968-.875Zm1.909 8.123a.75.75 0 0 1 1.015.309c.53.99.607 2.062.18 3.01-.421.94-1.289 1.648-2.441 2.038-1.336.452-2.877.42-4.286.043-1.409-.377-2.759-1.121-3.69-2.18a.75.75 0 1 1 1.127-.99c.696.791 1.765 1.403 2.952 1.721 1.186.318 2.418.323 3.416-.015.853-.288 1.34-.756 1.555-1.232.21-.467.205-1.049-.136-1.69a.75.75 0 0 1 .308-1.014Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .link::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath d='M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z' /%3E%3Cpath d='M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .heading::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12h10' /%3E%3Cpath d='M7 5v14' /%3E%3Cpath d='M17 5v14' /%3E%3Cpath d='M15 19h4' /%3E%3Cpath d='M15 5h4' /%3E%3Cpath d='M5 19h4' /%3E%3Cpath d='M5 5h4' /%3E%3C/svg%3E");
    }
    & .EasyMDEContainer .editor-toolbar .quote::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .code::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .unordered-list::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M6 4.75A.75.75 0 0 1 6.75 4h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 4.75ZM6 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 10Zm0 5.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H6.75a.75.75 0 0 1-.75-.75ZM1.99 4.75a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 15.25a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1v-.01ZM1.99 10a1 1 0 0 1 1-1H3a1 1 0 0 1 1 1v.01a1 1 0 0 1-1 1h-.01a1 1 0 0 1-1-1V10Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .ordered-list::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath d='M3 1.25a.75.75 0 0 0 0 1.5h.25v2.5a.75.75 0 0 0 1.5 0V2A.75.75 0 0 0 4 1.25H3ZM2.97 8.654a3.5 3.5 0 0 1 1.524-.12.034.034 0 0 1-.012.012L2.415 9.579A.75.75 0 0 0 2 10.25v1c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5H3.927l1.225-.613c.52-.26.848-.79.848-1.371 0-.647-.429-1.327-1.193-1.451a5.03 5.03 0 0 0-2.277.155.75.75 0 0 0 .44 1.434ZM7.75 3a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 9.25a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM7.75 15.5a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM2.625 13.875a.75.75 0 0 0 0 1.5h1.5a.125.125 0 0 1 0 .25H3.5a.75.75 0 0 0 0 1.5h.625a.125.125 0 0 1 0 .25h-1.5a.75.75 0 0 0 0 1.5h1.5a1.625 1.625 0 0 0 1.37-2.5 1.625 1.625 0 0 0-1.37-2.5h-1.5Z' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .table::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M.99 5.24A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25l.01 9.5A2.25 2.25 0 0 1 16.76 17H3.26A2.267 2.267 0 0 1 1 14.74l-.01-9.5Zm8.26 9.52v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75v.615c0 .414.336.75.75.75h5.373a.75.75 0 0 0 .627-.74Zm1.5 0a.75.75 0 0 0 .627.74h5.373a.75.75 0 0 0 .75-.75v-.615a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75v.625Zm6.75-3.63v-.625a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75v.625c0 .414.336.75.75.75h5.25a.75.75 0 0 0 .75-.75Zm-8.25 0v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75v.625c0 .414.336.75.75.75H8.5a.75.75 0 0 0 .75-.75ZM17.5 7.5v-.625a.75.75 0 0 0-.75-.75H11.5a.75.75 0 0 0-.75.75V7.5c0 .414.336.75.75.75h5.25a.75.75 0 0 0 .75-.75Zm-8.25 0v-.625a.75.75 0 0 0-.75-.75H3.25a.75.75 0 0 0-.75.75V7.5c0 .414.336.75.75.75H8.5a.75.75 0 0 0 .75-.75Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .upload-image::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .undo::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-toolbar .redo::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='size-5'%3E%3Cpath fill-rule='evenodd' d='M12.207 2.232a.75.75 0 0 0 .025 1.06l4.146 3.958H6.375a5.375 5.375 0 0 0 0 10.75H9.25a.75.75 0 0 0 0-1.5H6.375a3.875 3.875 0 0 1 0-7.75h10.003l-4.146 3.957a.75.75 0 0 0 1.036 1.085l5.5-5.25a.75.75 0 0 0 0-1.085l-5.5-5.25a.75.75 0 0 0-1.06.025Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    }
    & .EasyMDEContainer .editor-statusbar {
      display: none;
    }
    &:where(.dark, .dark *) {
      --color-cm-red: #f87171;
      --color-cm-orange: #fb923c;
      --color-cm-amber: #fbbf24;
      --color-cm-yellow: #facc15;
      --color-cm-lime: #a3e635;
      --color-cm-green: #4ade80;
      --color-cm-emerald: #4ade80;
      --color-cm-teal: #2dd4bf;
      --color-cm-cyan: #22d3ee;
      --color-cm-sky: #38bdf8;
      --color-cm-blue: #60a5fa;
      --color-cm-indigo: #818cf8;
      --color-cm-violet: #a78bfa;
      --color-cm-purple: #c084fc;
      --color-cm-fuchsia: #e879f9;
      --color-cm-pink: #f472b6;
      --color-cm-rose: #fb7185;
      --color-cm-gray: #fafafa;
      --color-cm-gray-muted: #a1a1aa;
      --color-cm-gray-background: #52525b;
      & .EasyMDEContainer .cm-s-easymde span.CodeMirror-selectedtext {
        filter: invert(100%);
      }
      & .EasyMDEContainer .editor-toolbar button::before {
        background-color: var(--gray-300);
      }
      & .EasyMDEContainer .editor-toolbar button.active::before {
        background-color: var(--primary-400);
      }
    }
  }
  [x-sortable]:has(.fi-sortable-ghost) .fi-fo-markdown-editor {
    pointer-events: none;
  }
  .fi-fo-modal-table-select:not(.fi-fo-modal-table-select-multiple) {
    display: flex;
    align-items: flex-start;
    column-gap: calc(var(--spacing) * 3);
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .fi-fo-modal-table-select.fi-fo-modal-table-select-multiple {
    display: grid;
    gap: calc(var(--spacing) * 2);
    & .fi-fo-modal-table-select-badges-ctn {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--spacing) * 1.5);
    }
  }
  .fi-fo-modal-table-select .fi-fo-modal-table-select-placeholder {
    color: var(--gray-400);
    &:where(.dark, .dark *) {
      color: var(--gray-500);
    }
  }
  .fi-fo-radio {
    gap: calc(var(--spacing) * 4);
    &.fi-inline {
      display: flex;
      flex-wrap: wrap;
    }
    &:not(.fi-inline).fi-grid-direction-col {
      margin-top: calc(var(--spacing) * -4);
      & > .fi-fo-radio-label {
        break-inside: avoid;
        padding-top: calc(var(--spacing) * 4);
      }
    }
    & > .fi-fo-radio-label {
      display: flex;
      column-gap: calc(var(--spacing) * 3);
      align-self: flex-start;
      & > .fi-radio-input {
        margin-top: var(--spacing);
        flex-shrink: 0;
      }
      & > .fi-fo-radio-label-text {
        display: grid;
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
      & .fi-fo-radio-label-description {
        --tw-font-weight: var(--font-weight-normal);
        font-weight: var(--font-weight-normal);
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
      &:has(.fi-radio-input:disabled) {
        & > .fi-fo-radio-label-text {
          color: var(--gray-400);
          &:where(.dark, .dark *) {
            color: var(--gray-500);
          }
        }
        & .fi-fo-radio-label-description {
          color: var(--gray-300);
          &:where(.dark, .dark *) {
            color: var(--gray-600);
          }
        }
      }
    }
  }
  .fi-fo-repeater {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    & .fi-fo-repeater-actions {
      display: flex;
      column-gap: calc(var(--spacing) * 3);
      &.fi-hidden {
        display: none;
      }
    }
    & .fi-fo-repeater-items {
      align-items: flex-start;
      gap: calc(var(--spacing) * 4);
    }
    & .fi-fo-repeater-item {
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &.fi-collapsed {
        & .fi-fo-repeater-item-header-collapsible-actions {
          rotate: calc(180deg * -1);
        }
        & .fi-fo-repeater-item-header-collapse-action {
          pointer-events: none;
          opacity: 0%;
        }
      }
      &:not(.fi-collapsed) {
        & .fi-fo-repeater-item-header-expand-action {
          pointer-events: none;
          opacity: 0%;
        }
      }
    }
    & .fi-fo-repeater-item-header {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      overflow: hidden;
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 3);
    }
    &.fi-collapsible {
      & .fi-fo-repeater-item-header {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
      }
    }
    & .fi-fo-repeater-item-header-start-actions {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-fo-repeater-item-header-label {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &.fi-truncated {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    & .fi-fo-repeater-item-header-end-actions {
      margin-inline-start: auto;
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-fo-repeater-item-header-collapsible-actions {
      position: relative;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-repeater-item-header-collapse-action {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-repeater-item-header-expand-action {
      position: absolute;
      inset: 0px;
      rotate: 180deg;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
    & .fi-fo-repeater-item-has-header > .fi-fo-repeater-item-content {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-100);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-fo-repeater-item-content {
      padding: calc(var(--spacing) * 4);
    }
    & .fi-fo-repeater-add-between-items-ctn {
      display: flex;
      width: 100%;
      justify-content: center;
    }
    & .fi-fo-repeater-add-between-items {
      border-radius: var(--radius-lg);
      background-color: var(--color-white);
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
    }
    & .fi-fo-repeater-label-between-items-ctn {
      position: relative;
      margin-block: calc(var(--spacing) * -2);
      display: flex;
      align-items: center;
    }
    & .fi-fo-repeater-label-between-items-divider-before {
      width: calc(var(--spacing) * 3);
      flex-shrink: 0;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-200);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-fo-repeater-label-between-items {
      flex-shrink: 0;
      padding-inline: var(--spacing);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-fo-repeater-label-between-items-divider-after {
      flex: 1;
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-200);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-fo-repeater-add {
      display: flex;
      width: 100%;
      justify-content: center;
      &.fi-align-start, &.fi-align-left {
        justify-content: flex-start;
      }
      &.fi-align-end, &.fi-align-right {
        justify-content: flex-end;
      }
    }
  }
  .fi-fo-simple-repeater {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    & .fi-fo-simple-repeater-items {
      gap: calc(var(--spacing) * 4);
    }
    & .fi-fo-simple-repeater-item {
      display: flex;
      justify-content: flex-start;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-fo-simple-repeater-item-content {
      flex: 1;
    }
    & .fi-fo-simple-repeater-item-actions {
      display: flex;
      align-items: center;
      column-gap: var(--spacing);
    }
    & .fi-fo-simple-repeater-add {
      display: flex;
      width: 100%;
      justify-content: center;
      &.fi-align-start, &.fi-align-left {
        justify-content: flex-start;
      }
      &.fi-align-end, &.fi-align-right {
        justify-content: flex-end;
      }
    }
  }
  .fi-fo-table-repeater {
    display: grid;
    gap: calc(var(--spacing) * 3);
    & > table {
      display: block;
      width: 100%;
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & > thead {
        display: none;
        white-space: nowrap;
        & > tr {
          & > th {
            border-color: var(--gray-200);
            background-color: var(--gray-50);
            padding-inline: calc(var(--spacing) * 3);
            padding-block: calc(var(--spacing) * 2);
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
            color: var(--gray-950);
            &:first-of-type {
              border-start-start-radius: var(--radius-xl);
            }
            &:last-of-type {
              border-start-end-radius: var(--radius-xl);
            }
            &:where(.dark, .dark *) {
              border-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              background-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              color: var(--color-white);
            }
            &:not(:last-of-type) {
              border-inline-end-style: var(--tw-border-style);
              border-inline-end-width: 1px;
            }
            &.fi-align-start, &.fi-align-left {
              text-align: start;
            }
            &.fi-align-end, &.fi-align-right {
              text-align: end;
            }
            &.fi-wrapped {
              white-space: normal;
            }
            &:not(.fi-wrapped) {
              white-space: nowrap;
            }
            &.fi-fo-table-repeater-empty-header-cell {
              width: var(--spacing);
            }
          }
        }
      }
      & > tbody {
        display: block;
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(1px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
        }
        :where(&) > :where(:not(:last-child)) {
          border-color: var(--gray-200);
        }
        &:where(.dark, .dark *) {
          :where(&) > :where(:not(:last-child)) {
            border-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
        & > tr {
          display: grid;
          gap: calc(var(--spacing) * 6);
          padding: calc(var(--spacing) * 6);
          & > td {
            display: block;
            &.fi-hidden {
              display: none;
            }
            &.fi-vertical-align-start {
              vertical-align: top;
            }
            &.fi-vertical-align-center {
              vertical-align: middle;
            }
            &.fi-vertical-align-end {
              vertical-align: bottom;
            }
          }
        }
      }
      & .fi-fo-table-repeater-header-required-mark {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--danger-600);
        &:where(.dark, .dark *) {
          color: var(--danger-400);
        }
      }
      & .fi-fo-table-repeater-actions {
        display: flex;
        height: 100%;
        align-items: center;
        column-gap: calc(var(--spacing) * 3);
      }
    }
    @supports (container-type: inline-size) {
      container-type: inline-size;
      & > table {
        @container (width >= 36rem) {
          display: table;
        }
        & > thead {
          @container (width >= 36rem) {
            display: table-header-group;
          }
        }
        & > tbody {
          @container (width >= 36rem) {
            display: table-row-group;
          }
          & > tr {
            @container (width >= 36rem) {
              display: table-row;
            }
            @container (width >= 36rem) {
              padding: 0px;
            }
            & > td {
              @container (width >= 36rem) {
                display: table-cell;
              }
              @container (width >= 36rem) {
                padding-inline: calc(var(--spacing) * 3);
              }
              @container (width >= 36rem) {
                padding-block: calc(var(--spacing) * 2);
              }
              &.fi-hidden {
                @container (width >= 36rem) {
                  display: table-cell;
                }
              }
              & .fi-fo-field {
                @container (width >= 36rem) {
                  row-gap: 0px;
                }
              }
              & .fi-in-entry {
                @container (width >= 36rem) {
                  row-gap: 0px;
                }
              }
              & .fi-fo-field-label-content {
                @container (width >= 36rem) {
                  display: none;
                }
              }
              & .fi-in-entry-label {
                @container (width >= 36rem) {
                  display: none;
                }
              }
              & .fi-fo-toggle-buttons-wrp .fi-fo-field-content-col {
                @container (width >= 36rem) {
                  grid-auto-columns: 1fr;
                }
              }
            }
          }
        }
      }
      &.fi-compact {
        & > table {
          & > tbody {
            & > tr {
              & > td {
                @container (width >= 36rem) {
                  border-color: var(--gray-200);
                }
                @container (width >= 36rem) {
                  padding-inline: 0px;
                }
                @container (width >= 36rem) {
                  padding-block: var(--spacing);
                }
                @container (width >= 36rem) {
                  &:where(.dark, .dark *) {
                    border-color: color-mix(in srgb, #fff 5%, transparent);
                    @supports (color: color-mix(in lab, red, red)) {
                      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
                    }
                  }
                }
                @container (width >= 36rem) {
                  &:not(:last-of-type) {
                    border-inline-end-style: var(--tw-border-style);
                    border-inline-end-width: 1px;
                  }
                }
              }
            }
          }
        }
        & .fi-input-wrp {
          @container (width >= 36rem) {
            background-color: transparent !important;
          }
          @container (width >= 36rem) {
            --tw-shadow: 0 0 #0000;
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
          @container (width >= 36rem) {
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
          }
        }
        & .fi-fo-table-repeater-actions {
          @container (width >= 36rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @container (width >= 36rem) {
            padding-block: calc(var(--spacing) * 2);
          }
        }
        & .fi-fo-field-wrp-error-message {
          @container (width >= 36rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @container (width >= 36rem) {
            padding-bottom: calc(var(--spacing) * 2);
          }
        }
        & .fi-in-entry-content {
          @container (width >= 36rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
        }
        & .fi-fo-radio {
          @container (width >= 36rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
        }
      }
    }
    @supports not (container-type: inline-size) {
      & > table {
        @media (width >= 64rem) {
          display: table;
        }
        & > thead {
          @media (width >= 64rem) {
            display: table-header-group;
          }
        }
        & > tbody {
          @media (width >= 64rem) {
            display: table-row-group;
          }
          & > tr {
            @media (width >= 64rem) {
              display: table-row;
            }
            @media (width >= 64rem) {
              padding: 0px;
            }
            & > td {
              @media (width >= 64rem) {
                display: table-cell;
              }
              @media (width >= 64rem) {
                padding-inline: calc(var(--spacing) * 3);
              }
              @media (width >= 64rem) {
                padding-block: calc(var(--spacing) * 2);
              }
              &.fi-hidden {
                @media (width >= 64rem) {
                  display: table-cell;
                }
              }
              & .fi-fo-field {
                @media (width >= 64rem) {
                  row-gap: 0px;
                }
              }
              & .fi-in-entry {
                @media (width >= 64rem) {
                  row-gap: 0px;
                }
              }
              & .fi-fo-field-label-content {
                @media (width >= 64rem) {
                  display: none;
                }
              }
              & .fi-in-entry-label {
                @media (width >= 64rem) {
                  display: none;
                }
              }
              & .fi-fo-toggle-buttons-wrp .fi-fo-field-content-col {
                @media (width >= 64rem) {
                  grid-auto-columns: 1fr;
                }
              }
            }
          }
        }
      }
      &.fi-compact {
        & > table {
          & > tbody {
            & > tr {
              & > td {
                @media (width >= 64rem) {
                  border-color: var(--gray-200);
                }
                @media (width >= 64rem) {
                  padding-inline: 0px;
                }
                @media (width >= 64rem) {
                  padding-block: var(--spacing);
                }
                @media (width >= 64rem) {
                  &:where(.dark, .dark *) {
                    border-color: color-mix(in srgb, #fff 5%, transparent);
                    @supports (color: color-mix(in lab, red, red)) {
                      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
                    }
                  }
                }
                @media (width >= 64rem) {
                  &:not(:last-of-type) {
                    border-inline-end-style: var(--tw-border-style);
                    border-inline-end-width: 1px;
                  }
                }
              }
            }
          }
        }
        & .fi-input-wrp {
          @media (width >= 64rem) {
            background-color: transparent !important;
          }
          @media (width >= 64rem) {
            --tw-shadow: 0 0 #0000;
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          }
          @media (width >= 64rem) {
            --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
          }
        }
        & .fi-fo-table-repeater-actions {
          @media (width >= 64rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @media (width >= 64rem) {
            padding-block: calc(var(--spacing) * 2);
          }
        }
        & .fi-fo-field-wrp-error-message {
          @media (width >= 64rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @media (width >= 64rem) {
            padding-bottom: calc(var(--spacing) * 2);
          }
        }
        & .fi-in-entry-content {
          @media (width >= 64rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
        }
        & .fi-fo-radio {
          @media (width >= 64rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
        }
      }
    }
    & .fi-fo-table-repeater-add {
      display: flex;
      width: 100%;
      justify-content: center;
      &.fi-align-start, &.fi-align-left {
        justify-content: flex-start;
      }
      &.fi-align-end, &.fi-align-right {
        justify-content: flex-end;
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-uploading-file {
    pointer-events: none;
    cursor: wait;
    opacity: 50%;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(var(--spacing) * 3);
    row-gap: var(--spacing);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--gray-200);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-floating-toolbar {
    visibility: hidden;
    position: absolute;
    z-index: 20;
    margin-top: calc(var(--spacing) * -1);
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    column-gap: calc(var(--spacing) * 3);
    row-gap: var(--spacing);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--gray-300);
    background-color: var(--color-white);
    padding: var(--spacing);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--gray-600);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-800);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-toolbar-group {
    display: flex;
    column-gap: var(--spacing);
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool {
    position: relative;
    display: inline-flex;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-trigger {
    display: flex;
    height: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 0.5);
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding-inline: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-outline-style: none;
    outline-style: none;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:focus-visible {
      background-color: var(--gray-50);
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &.fi-active {
      background-color: var(--gray-50);
      color: var(--primary-600);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-chevron {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
    color: var(--gray-400);
    &:where(.dark, .dark *) {
      color: var(--gray-500);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-menu {
    position: absolute;
    inset-inline-start: calc(var(--spacing) * 0);
    top: calc(100% + 0.25rem);
    z-index: 30;
    display: flex;
    gap: var(--spacing);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--gray-300);
    background-color: var(--color-white);
    padding: var(--spacing);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(.dark, .dark *) {
      border-color: var(--gray-600);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-800);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-option {
    display: flex;
    height: calc(var(--spacing) * 8);
    min-width: calc(var(--spacing) * 8);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    --tw-border-style: none;
    border-style: none;
    background-color: transparent;
    padding: 0px;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    --tw-outline-style: none;
    outline-style: none;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:focus-visible {
      background-color: var(--gray-50);
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &.fi-active {
      background-color: var(--gray-50);
      color: var(--primary-600);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-textual .fi-fo-rich-editor-dropdown-tool-menu {
    min-width: calc(var(--spacing) * 32);
    flex-direction: column;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-dropdown-tool-textual .fi-fo-rich-editor-dropdown-tool-option {
    min-width: 0px;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: 0.8125rem;
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-tool {
    display: flex;
    height: calc(var(--spacing) * 8);
    min-width: calc(var(--spacing) * 8);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:focus-visible {
      background-color: var(--gray-50);
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &[disabled] {
      pointer-events: none;
      cursor: default;
      opacity: 70%;
    }
    &.fi-active {
      background-color: var(--gray-50);
      color: var(--primary-600);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
    &.fi-fo-rich-editor-tool-with-label {
      align-items: center;
      column-gap: var(--spacing);
      padding-inline: calc(var(--spacing) * 1.5);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-uploading-file-message {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--gray-200);
    background-color: var(--gray-50);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    & .fi-loading-indicator {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-file-validation-message {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--danger-200);
    background-color: var(--danger-50);
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--danger-700);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--danger-200);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-main {
    display: flex;
    flex-direction: column-reverse;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-content {
    position: relative;
    display: flex;
    min-height: calc(var(--spacing) * 12);
    width: 100%;
    flex: 1;
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 5);
    padding-block: calc(var(--spacing) * 3);
  }
  .fi-fo-rich-editor[style*='--min-height'] .fi-fo-rich-editor-content {
    min-height: var(--min-height);
  }
  .fi-fo-rich-editor[style*='--max-height'] .fi-fo-rich-editor-content {
    overflow-y: auto;
    scrollbar-gutter: stable;
    max-height: var(--max-height);
  }
  .fi-fo-rich-editor[style*='--max-height'] .fi-fo-rich-editor-content[role='region'] {
    --tw-outline-style: none;
    outline-style: none;
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--primary-600);
    }
    &:focus-visible {
      --tw-ring-inset: inset;
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        --tw-ring-color: var(--primary-500);
      }
    }
  }
  .fi-fo-rich-editor span[data-type='mergeTag'] {
    margin-block: 0px;
    display: inline-block;
    white-space: nowrap;
    &::before {
      margin-inline-end: var(--spacing);
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      opacity: 60%;
      content: '{{';
    }
    &::after {
      margin-inline-start: var(--spacing);
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      opacity: 60%;
      content: '}}';
    }
  }
  .fi-fo-rich-editor span[data-type='mention'] {
    margin-block: 0px;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: var(--primary-50);
    padding-inline: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--primary-600);
    &:where(.dark, .dark *) {
      background-color: var(--primary-400);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--primary-400) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--primary-400);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-panels {
    width: 100%;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--gray-200);
    background-color: var(--gray-50);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-900) 30%, transparent);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-panel-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-panel-heading {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-panel-close-btn-ctn {
    flex-shrink: 0;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-panel {
    display: grid;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-merge-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-merge-tag-btn {
    cursor: move;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding: var(--spacing);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-600);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-600);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-600) 10%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-400);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-400) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: var(--gray-400);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-400) 20%, transparent);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-blocks-ctn {
    display: grid;
    overflow-y: auto;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-blocks-group-header {
    position: sticky;
    top: -1px;
    z-index: 10;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--gray-200);
    background-color: var(--gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    text-transform: capitalize;
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &:not(:first-child) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-blocks-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  .fi-fo-rich-editor:has(.fi-fo-rich-editor-custom-blocks-group-header) .fi-fo-rich-editor-custom-blocks-list {
    background-color: var(--color-white);
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-btn {
    display: flex;
    cursor: move;
    gap: calc(var(--spacing) * 1.5);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-600);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-600);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-600) 10%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-400);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-400) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: var(--gray-400);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-400) 20%, transparent);
      }
    }
  }
  .fi-fo-rich-editor .tiptap {
    height: 100%;
    flex: 1;
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
      & .ProseMirror-selectednode {
        div&[data-type='customBlock'], img& {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-ring-color: var(--primary-600);
          &:where(.dark, .dark *) {
            --tw-ring-color: var(--primary-500);
          }
        }
      }
    }
    & p.is-editor-empty:first-child {
      &::before {
        pointer-events: none;
        float: inline-start;
        height: 0px;
        color: var(--gray-400);
        content: attr(data-placeholder);
      }
      &:where(.dark, .dark *) {
        &::before {
          color: var(--gray-500);
        }
      }
    }
    & [data-type='details'] {
      margin-block: calc(var(--spacing) * 6);
      display: flex;
      gap: var(--spacing);
      border-radius: var(--radius-md);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--gray-950) 20%, transparent);
      }
      padding: calc(var(--spacing) * 4);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
      & > div:first-of-type {
        margin-top: 0px !important;
      }
      & summary {
        list-style-type: none;
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
      }
      & > button {
        margin-top: 1px;
        margin-right: calc(var(--spacing) * 2);
        display: flex;
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        background-color: transparent;
        padding: var(--spacing);
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
        --tw-leading: 1;
        line-height: 1;
        &:hover {
          @media (hover: hover) {
            background-color: var(--gray-950);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
            }
          }
        }
        &:where(.dark, .dark *) {
          &:hover {
            @media (hover: hover) {
              background-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
          }
        }
        &::before {
          content: '\25B6';
        }
      }
      &.is-open > button::before {
        transform: rotate(90deg);
      }
      & > div {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: calc(var(--spacing) * 4);
        & > [data-type='detailsContent'] {
          margin-top: 0px !important;
          & > :last-child {
            margin-bottom: calc(var(--spacing) * 4);
          }
        }
      }
    }
    & table {
      margin: 0px;
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      overflow: hidden;
      &:first-child {
        margin-top: 0px;
      }
      & td, & th {
        position: relative;
        min-width: 1em;
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--gray-300);
        padding: calc(var(--spacing) * 2) !important;
        vertical-align: top;
        &:where(.dark, .dark *) {
          border-color: var(--gray-600);
        }
        & > * {
          margin-bottom: 0px;
        }
      }
      & th {
        background-color: var(--gray-100);
        text-align: start;
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        &:where(.dark, .dark *) {
          background-color: var(--gray-800);
        }
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
      & .selectedCell {
        &::after {
          pointer-events: none;
          position: absolute;
          inset-inline-start: calc(var(--spacing) * 0);
          inset-inline-end: calc(var(--spacing) * 0);
          top: 0px;
          bottom: 0px;
          z-index: 2;
          background-color: var(--gray-200);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--gray-200) 80%, transparent);
          }
          --tw-content: '';
          content: var(--tw-content);
        }
        &:where(.dark, .dark *) {
          &::after {
            background-color: var(--gray-800);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--gray-800) 80%, transparent);
            }
          }
        }
      }
      & .column-resize-handle {
        pointer-events: none;
        position: absolute;
        inset-inline-end: calc(var(--spacing) * 0);
        top: 0px;
        bottom: 0px;
        margin: 0px !important;
        width: var(--spacing);
        background-color: var(--primary-600);
      }
    }
    & .tableWrapper {
      overflow-x: auto;
    }
    &.resize-cursor {
      cursor: col-resize;
      cursor: ew-resize;
    }
    & .grid-layout > .grid-layout-col {
      border-radius: var(--radius-md);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--gray-950) 20%, transparent);
      }
      padding: calc(var(--spacing) * 4);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    [data-resize-handle] {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 2px;
      z-index: 10;
      &:hover {
        background: rgba(0, 0, 0, 0.8);
      }
      &[data-resize-handle] {
        margin: 0 !important;
      }
      &[data-resize-handle='top-left'], &[data-resize-handle='top-right'], &[data-resize-handle='bottom-left'], &[data-resize-handle='bottom-right'] {
        width: 8px;
        height: 8px;
      }
      &[data-resize-handle='top-left'] {
        top: -4px;
        left: -4px;
        cursor: nwse-resize;
      }
      &[data-resize-handle='top-right'] {
        top: -4px;
        right: -4px;
        cursor: nesw-resize;
      }
      &[data-resize-handle='bottom-left'] {
        bottom: -4px;
        left: -4px;
        cursor: nesw-resize;
      }
      &[data-resize-handle='bottom-right'] {
        bottom: -4px;
        right: -4px;
        cursor: nwse-resize;
      }
      &[data-resize-handle='top'], &[data-resize-handle='bottom'] {
        height: 6px;
        left: 8px;
        right: 8px;
      }
      &[data-resize-handle='top'] {
        top: -3px;
        cursor: ns-resize;
      }
      &[data-resize-handle='bottom'] {
        bottom: -3px;
        cursor: ns-resize;
      }
      &[data-resize-handle='left'], &[data-resize-handle='right'] {
        width: 6px;
        top: 8px;
        bottom: 8px;
      }
      &[data-resize-handle='left'] {
        left: -3px;
        cursor: ew-resize;
      }
      &[data-resize-handle='right'] {
        right: -3px;
        cursor: ew-resize;
      }
    }
    [data-resize-state='true'] [data-resize-wrapper] {
      position: relative;
      outline: 1px solid rgba(0, 0, 0, 0.25);
      border-radius: 0.125rem;
    }
  }
  .fi-fo-rich-editor.fi-disabled [data-resize-handle] {
    display: none;
  }
  .fi-fo-rich-editor.fi-disabled [data-resize-state='true'] [data-resize-wrapper] {
    outline: none;
  }
  @supports (-webkit-touch-callout: none) {
    .fi-fo-rich-editor .tiptap.ProseMirror {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .fi-fo-rich-editor img {
    display: inline-block;
  }
  .fi-fo-rich-editor div[data-type='customBlock'] {
    display: grid;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    overflow: hidden;
    border-radius: var(--radius-lg);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-header {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
    background-color: var(--gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-900) 30%, transparent);
      }
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-heading {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-edit-btn-ctn {
    flex-shrink: 0;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-delete-btn-ctn {
    flex-shrink: 0;
  }
  .fi-fo-rich-editor .fi-fo-rich-editor-custom-block-preview {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
  }
  @supports (container-type: inline-size) {
    .fi-fo-rich-editor {
      container-type: inline-size;
    }
    @container (width >= 42rem) {
      .fi-fo-rich-editor .fi-fo-rich-editor-main {
        flex-direction: row;
      }
      .fi-fo-rich-editor .fi-fo-rich-editor-panels {
        max-width: var(--container-3xs);
        border-end-end-radius: var(--radius-lg);
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
    }
  }
  @supports not (container-type: inline-size) {
    @media (width >= 48rem) {
      .fi-fo-rich-editor .fi-fo-rich-editor-main {
        flex-direction: row;
      }
      .fi-fo-rich-editor .fi-fo-rich-editor-panels {
        max-width: var(--container-3xs);
        border-end-end-radius: var(--radius-lg);
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 0px;
      }
    }
  }
  :scope .fi-fo-rich-editor-text-color-select-option {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    & .fi-fo-rich-editor-text-color-select-option-preview {
      height: calc(var(--spacing) * 5);
      width: calc(var(--spacing) * 5);
      flex-shrink: 0;
      border-radius: calc(infinity * 1px);
      background-color: var(--color);
      &:where(.dark, .dark *) {
        background-color: var(--dark-color);
      }
    }
  }
  [x-sortable]:has(.fi-sortable-ghost) .fi-fo-rich-editor {
    pointer-events: none;
  }
  .fi-fo-select .fi-hidden {
    display: none;
  }
  @media (width >= 40rem) {
    .fi-fo-select-wrp.fi-fo-field-has-inline-label .fi-fo-field-label-col {
      padding-top: calc(var(--spacing) * 1.5);
    }
  }
  .fi-fo-slider {
    gap: calc(var(--spacing) * 4);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    & .noUi-connect {
      background-color: var(--primary-500);
      &:where(.dark, .dark *) {
        background-color: var(--primary-600);
      }
    }
    & .noUi-connects {
      border-radius: var(--radius-lg);
      background-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & .noUi-handle {
      position: absolute;
      border-radius: var(--radius-lg);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      background-color: var(--color-white);
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      backface-visibility: hidden;
      &:focus {
        outline-style: var(--tw-outline-style);
        outline-width: 2px;
      }
      &:focus {
        outline-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-700);
      }
      &:where(.dark, .dark *) {
        &:focus {
          outline-color: var(--primary-500);
        }
      }
      &::before, &::after {
        border-style: var(--tw-border-style);
        border-width: 0px;
        background-color: var(--gray-400);
      }
    }
    & .noUi-tooltip {
      border-radius: var(--radius-md);
      border-style: var(--tw-border-style);
      border-width: 0px;
      background-color: var(--color-white);
      color: var(--gray-950);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-800);
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    & .noUi-pips {
      & .noUi-value {
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
    }
    &.fi-fo-slider-vertical {
      margin-top: calc(var(--spacing) * 4);
      height: calc(var(--spacing) * 40);
      &.fi-fo-slider-has-tooltips {
        margin-inline-start: calc(var(--spacing) * 10);
      }
    }
    &:not(.fi-fo-slider-vertical) {
      &.fi-fo-slider-has-pips {
        margin-bottom: calc(var(--spacing) * 8);
      }
      &.fi-fo-slider-has-tooltips {
        margin-top: calc(var(--spacing) * 10);
      }
      & .noUi-pips {
        & .noUi-value {
          margin-top: var(--spacing);
        }
      }
    }
  }
  .fi-fo-tags-input.fi-disabled .fi-badge-delete-btn {
    display: none;
  }
  .fi-fo-tags-input .fi-fo-tags-input-tags-ctn {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-top-color: var(--gray-200);
    padding: calc(var(--spacing) * 2);
    &:where(.dark, .dark *) {
      border-top-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-top-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & > template {
      display: none;
    }
    & > .fi-badge {
      &.fi-reorderable {
        cursor: move;
      }
      & .fi-badge-label-ctn {
        text-align: start;
        -webkit-user-select: none;
        user-select: none;
      }
    }
  }
  @media (width >= 40rem) {
    .fi-fo-tags-input-wrp.fi-fo-field-has-inline-label .fi-fo-field-label-col {
      padding-top: calc(var(--spacing) * 1.5);
    }
  }
  .fi-fo-text-input {
    overflow: hidden;
    & input {
      &.fi-revealable {
        &::-ms-reveal {
          display: none;
        }
      }
    }
  }
  .fi-fo-textarea {
    overflow: hidden;
    & textarea {
      display: block;
      height: 100%;
      width: 100%;
      --tw-border-style: none;
      border-style: none;
      background-color: transparent;
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1.5);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      color: var(--gray-950);
      &::placeholder {
        color: var(--gray-400);
      }
      &:focus {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus {
        --tw-outline-style: none;
        outline-style: none;
      }
      &:disabled {
        color: var(--gray-500);
      }
      &:disabled {
        -webkit-text-fill-color: var(--color-gray-500);
      }
      &:disabled {
        &::placeholder {
          -webkit-text-fill-color: var(--color-gray-400);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &:where(.dark, .dark *) {
        &::placeholder {
          color: var(--gray-500);
        }
      }
      &:where(.dark, .dark *) {
        &:disabled {
          color: var(--gray-400);
        }
      }
      &:where(.dark, .dark *) {
        &:disabled {
          -webkit-text-fill-color: var(--color-gray-400);
        }
      }
      &:where(.dark, .dark *) {
        &:disabled {
          &::placeholder {
            -webkit-text-fill-color: var(--color-gray-500);
          }
        }
      }
      @supports (-webkit-touch-callout: none) {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
      }
    }
    &.fi-autosizable {
      & textarea {
        resize: none;
      }
    }
  }
  @media (width >= 40rem) {
    .fi-fo-textarea-wrp.fi-fo-field-has-inline-label .fi-fo-field-label-col {
      padding-top: calc(var(--spacing) * 1.5);
    }
  }
  .fi-fo-toggle-buttons.fi-btn-group {
    width: max-content;
  }
  .fi-fo-toggle-buttons:not(.fi-btn-group) {
    gap: calc(var(--spacing) * 3);
    &.fi-inline {
      display: flex;
      flex-wrap: wrap;
    }
    &:not(.fi-inline).fi-grid-direction-col {
      margin-top: calc(var(--spacing) * -3);
      & .fi-fo-toggle-buttons-btn-ctn {
        break-inside: avoid;
        padding-top: calc(var(--spacing) * 3);
      }
    }
  }
  .fi-fo-toggle-buttons .fi-fo-toggle-buttons-input {
    pointer-events: none;
    position: absolute;
    opacity: 0%;
  }
  @media (width >= 40rem) {
    .fi-fo-toggle-buttons-wrp.fi-fo-field-has-inline-label .fi-fo-field-label-col {
      padding-top: calc(var(--spacing) * 1.5);
    }
  }
  .fi-in-code .phiki {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }
  .fi-in-code:where(.dark, .dark *) .phiki, .fi-in-code:where(.dark, .dark *) .phiki span {
    color: var(--phiki-dark-color) !important;
    background-color: var(--phiki-dark-background-color) !important;
    font-style: var(--phiki-dark-font-style) !important;
    font-weight: var(--phiki-dark-font-weight) !important;
    text-decoration: var(--phiki-dark-text-decoration) !important;
  }
  .fi-in-code.fi-copyable {
    cursor: pointer;
  }
  .fi-in-color {
    display: flex;
    width: 100%;
    gap: calc(var(--spacing) * 1.5);
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-justify, &.fi-align-between {
      justify-content: space-between;
    }
    & > .fi-in-color-item {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
      border-radius: var(--radius-md);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
      &.fi-copyable {
        cursor: pointer;
        --tw-outline-style: none;
        outline-style: none;
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &:focus-visible {
          --tw-ring-color: var(--primary-600);
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            --tw-ring-color: var(--primary-500);
          }
        }
      }
    }
  }
  .fi-in-entry {
    display: grid;
    row-gap: calc(var(--spacing) * 2);
    &.fi-in-entry-has-inline-label {
      @media (width >= 40rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      @media (width >= 40rem) {
        align-items: flex-start;
      }
      @media (width >= 40rem) {
        column-gap: calc(var(--spacing) * 4);
      }
      & .fi-in-entry-content-col {
        @media (width >= 40rem) {
          grid-column: span 2 / span 2;
        }
      }
    }
    & .fi-in-entry-label-ctn {
      display: flex;
      align-items: flex-start;
      column-gap: calc(var(--spacing) * 3);
      & > .fi-sc:nth-child(1) {
        flex-grow: 0;
      }
    }
    & .fi-in-entry-label {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-in-entry-label-col {
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      row-gap: calc(var(--spacing) * 2);
    }
    & .fi-in-entry-content-col {
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      row-gap: calc(var(--spacing) * 2);
    }
    & .fi-in-entry-content-ctn {
      display: flex;
      width: 100%;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
    }
    & .fi-in-entry-content {
      display: block;
      width: 100%;
      text-align: start;
      &.fi-align-center {
        text-align: center;
      }
      &.fi-align-end {
        text-align: end;
      }
      &.fi-align-left {
        text-align: left;
      }
      &.fi-align-right {
        text-align: right;
      }
      &.fi-align-justify, &.fi-align-between {
        text-align: justify;
      }
    }
    & .fi-in-placeholder {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-in-key-value {
    width: 100%;
    table-layout: auto;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & thead th {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      text-align: start;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-700);
      &:where(.dark, .dark *) {
        color: var(--gray-200);
      }
    }
    & tbody {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      @media (width >= 40rem) {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
      }
      @media (width >= 40rem) {
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    & tr {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 1;
        }
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    & tbody th, & tbody td {
      width: calc(1 / 2 * 100%);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1.5);
      text-align: start;
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      overflow-wrap: anywhere;
      &.fi-in-placeholder {
        width: 100%;
        padding-block: calc(var(--spacing) * 2);
        text-align: center;
        font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
      }
    }
  }
  .fi-in-icon {
    display: flex;
    width: 100%;
    gap: calc(var(--spacing) * 1.5);
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &.fi-in-icon-has-line-breaks {
      flex-direction: column;
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-justify, &.fi-align-between {
      justify-content: space-between;
    }
    & > .fi-icon, & > a > .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &.fi-color {
        color: var(--text);
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
      }
    }
  }
  .fi-in-image {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    & img {
      max-width: none;
      object-fit: cover;
      object-position: center;
    }
    &.fi-circular {
      & img {
        border-radius: calc(infinity * 1px);
      }
    }
    &.fi-in-image-ring {
      & img, & .fi-in-image-limited-remaining-text {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--color-white);
        &:where(.dark, .dark *) {
          --tw-ring-color: var(--gray-900);
        }
      }
      &.fi-in-image-ring-1 {
        & img, & .fi-in-image-limited-remaining-text {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
      &.fi-in-image-ring-2 {
        & img, & .fi-in-image-limited-remaining-text {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
      &.fi-in-image-ring-4 {
        & img, & .fi-in-image-limited-remaining-text {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    &.fi-in-image-overlap-1 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-2 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-3 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-4 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-5 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -5) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -5) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-6 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -6) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -6) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-7 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -7) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -7) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-in-image-overlap-8 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -8) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-justify, &.fi-align-between {
      justify-content: space-between;
    }
    &.fi-stacked {
      & .fi-in-image-limited-remaining-text {
        border-radius: calc(infinity * 1px);
        background-color: var(--gray-100);
        &:where(.dark, .dark *) {
          background-color: var(--gray-800);
        }
      }
    }
    & .fi-in-image-limited-remaining-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      &.fi-size-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
      }
      &.fi-size-base, &.fi-size-md {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
      }
      &.fi-size-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
      }
    }
  }
  ul.fi-in-repeatable {
    gap: calc(var(--spacing) * 4);
  }
  .fi-in-repeatable > .fi-in-repeatable-item {
    display: block;
  }
  .fi-in-repeatable.fi-contained > .fi-in-repeatable-item {
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-in-table-repeatable {
    display: grid;
    gap: calc(var(--spacing) * 3);
    & > table {
      display: block;
      width: 100%;
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & > thead {
        display: none;
        white-space: nowrap;
        & > tr {
          & > th {
            border-color: var(--gray-200);
            background-color: var(--gray-50);
            padding-inline: calc(var(--spacing) * 3);
            padding-block: calc(var(--spacing) * 2);
            text-align: start;
            font-size: var(--text-sm);
            line-height: var(--tw-leading, var(--text-sm--line-height));
            --tw-font-weight: var(--font-weight-semibold);
            font-weight: var(--font-weight-semibold);
            color: var(--gray-950);
            &:first-of-type {
              border-start-start-radius: var(--radius-xl);
            }
            &:last-of-type {
              border-start-end-radius: var(--radius-xl);
            }
            &:where(.dark, .dark *) {
              border-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              background-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              color: var(--color-white);
            }
            &:not(:last-of-type) {
              border-inline-end-style: var(--tw-border-style);
              border-inline-end-width: 1px;
            }
            &.fi-align-center {
              text-align: center;
            }
            &.fi-align-end, &.fi-align-right {
              text-align: end;
            }
            &.fi-wrapped {
              white-space: normal;
            }
            &:not(.fi-wrapped) {
              white-space: nowrap;
            }
          }
        }
      }
      & > tbody {
        display: block;
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(1px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
        }
        :where(&) > :where(:not(:last-child)) {
          border-color: var(--gray-200);
        }
        &:where(.dark, .dark *) {
          :where(&) > :where(:not(:last-child)) {
            border-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
        & > tr {
          display: grid;
          gap: calc(var(--spacing) * 6);
          padding: calc(var(--spacing) * 6);
          & > td {
            display: block;
            &.fi-hidden {
              display: none;
            }
          }
        }
      }
    }
    @supports (container-type: inline-size) {
      container-type: inline-size;
      & > table {
        @container (width >= 36rem) {
          display: table;
        }
        & > thead {
          @container (width >= 36rem) {
            display: table-header-group;
          }
        }
        & > tbody {
          @container (width >= 36rem) {
            display: table-row-group;
          }
          & > tr {
            @container (width >= 36rem) {
              display: table-row;
            }
            @container (width >= 36rem) {
              padding: 0px;
            }
            & > td {
              @container (width >= 36rem) {
                display: table-cell;
              }
              @container (width >= 36rem) {
                padding-inline: calc(var(--spacing) * 3);
              }
              @container (width >= 36rem) {
                padding-block: calc(var(--spacing) * 2);
              }
              &.fi-hidden {
                @container (width >= 36rem) {
                  display: table-cell;
                }
              }
              & .fi-in-entry {
                @container (width >= 36rem) {
                  row-gap: 0px;
                }
              }
              & .fi-in-entry-label {
                @container (width >= 36rem) {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    @supports not (container-type: inline-size) {
      & > table {
        @media (width >= 64rem) {
          display: table;
        }
        & > thead {
          @media (width >= 64rem) {
            display: table-header-group;
          }
        }
        & > tbody {
          @media (width >= 64rem) {
            display: table-row-group;
          }
          & > tr {
            @media (width >= 64rem) {
              display: table-row;
            }
            @media (width >= 64rem) {
              padding: 0px;
            }
            & > td {
              @media (width >= 64rem) {
                display: table-cell;
              }
              @media (width >= 64rem) {
                padding-inline: calc(var(--spacing) * 3);
              }
              @media (width >= 64rem) {
                padding-block: calc(var(--spacing) * 2);
              }
              &.fi-hidden {
                @media (width >= 64rem) {
                  display: table-cell;
                }
              }
              & .fi-in-entry {
                @media (width >= 64rem) {
                  row-gap: 0px;
                }
              }
              & .fi-in-entry-label {
                @media (width >= 64rem) {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
  .fi-in-text {
    width: 100%;
    &.fi-numeric {
      --tw-numeric-spacing: tabular-nums;
      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    }
    &.fi-in-text-affixed {
      display: flex;
      gap: calc(var(--spacing) * 3);
    }
    & .fi-in-text-affixed-content {
      min-width: 0px;
      flex: 1;
    }
    & .fi-in-text-affix {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 3);
      align-self: stretch;
    }
    &.fi-in-text-list-limited {
      display: flex;
      flex-direction: column;
      &.fi-in-text-has-badges {
        row-gap: calc(var(--spacing) * 2);
      }
      &:not(.fi-in-text-has-badges) {
        row-gap: var(--spacing);
      }
    }
    ul&.fi-bulleted, &.fi-bulleted ul {
      list-style-position: inside;
      list-style-type: disc;
    }
    &:not(.fi-in-text-has-line-breaks) {
      ul&.fi-in-text-has-badges, &.fi-in-text-has-badges ul {
        display: flex;
        column-gap: calc(var(--spacing) * 1.5);
        &.fi-wrapped, &:is(.fi-wrapped ul) {
          flex-wrap: wrap;
          row-gap: var(--spacing);
        }
      }
    }
    ul&.fi-in-text-has-badges, &.fi-in-text-has-badges ul {
      &.fi-in-text-has-line-breaks, &:is(.fi-in-text-has-line-breaks ul) {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacing);
      }
      &:not(ul.fi-in-text-has-line-breaks), &:not(.fi-in-text-has-line-breaks ul) {
        display: flex;
        column-gap: calc(var(--spacing) * 1.5);
        &.fi-wrapped, &:is(.fi-wrapped ul) {
          flex-wrap: wrap;
          row-gap: var(--spacing);
        }
      }
    }
    &.fi-wrapped:not(.fi-in-text-has-badges.fi-in-text-has-line-breaks) {
      white-space: normal;
      overflow-wrap: break-word;
      & .fi-badge, & .fi-in-text-list-limited-message {
        white-space: nowrap;
      }
    }
    & > .fi-in-text-list-limited-message {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    &.fi-align-center {
      text-align: center;
      ul&, & ul {
        justify-content: center;
      }
    }
    &.fi-align-end, &.fi-align-right {
      text-align: end;
      ul&, & ul {
        justify-content: flex-end;
      }
    }
    &.fi-align-justify, &.fi-align-between {
      text-align: justify;
      ul&, & ul {
        justify-content: space-between;
      }
    }
  }
  .fi-in-text-item {
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    & a {
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
      &:focus-visible {
        text-decoration-line: underline;
      }
    }
    &:not(.fi-bulleted li.fi-in-text-item) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--line-clamp,none);
    }
    & > .fi-copyable {
      cursor: pointer;
      border-radius: var(--radius-md);
      --tw-outline-style: none;
      outline-style: none;
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus-visible {
        --tw-ring-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          --tw-ring-color: var(--primary-500);
        }
      }
    }
    &.fi-size-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    &.fi-size-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    &.fi-size-md {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    &.fi-size-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    &.fi-font-thin {
      --tw-font-weight: var(--font-weight-thin);
      font-weight: var(--font-weight-thin);
    }
    &.fi-font-extralight {
      --tw-font-weight: var(--font-weight-extralight);
      font-weight: var(--font-weight-extralight);
    }
    &.fi-font-light {
      --tw-font-weight: var(--font-weight-light);
      font-weight: var(--font-weight-light);
    }
    &.fi-font-normal {
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
    }
    &.fi-font-medium {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    &.fi-font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &.fi-font-bold {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
    &.fi-font-extrabold {
      --tw-font-weight: var(--font-weight-extrabold);
      font-weight: var(--font-weight-extrabold);
    }
    &.fi-font-black {
      --tw-font-weight: var(--font-weight-black);
      font-weight: var(--font-weight-black);
    }
    &.fi-font-sans {
      font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    }
    &.fi-font-serif {
      font-family: var(--serif-font-family), ui-serif, Georgia, Cambria, 'Times New Roman',
        Times, serif;
    }
    &.fi-font-mono {
      font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
    }
    &.fi-color {
      color: var(--text);
      &:where(.dark, .dark *) {
        color: var(--dark-text);
      }
      li&::marker {
        color: var(--gray-950);
      }
      &:where(.dark, .dark *) {
        li&::marker {
          color: var(--color-white);
        }
      }
    }
    &.fi-color-gray {
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      li&::marker {
        color: var(--gray-950);
      }
    }
    & > .fi-icon, & > span:not(.fi-badge) > .fi-icon {
      display: inline-block;
      flex-shrink: 0;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &.fi-color {
        color: var(--color-500);
      }
    }
  }
  .fi-no-database {
    display: flex;
    &.fi-modal .fi-modal-window-ctn > .fi-modal-window {
      & .fi-modal-heading {
        position: relative;
        display: inline-block;
        & .fi-badge {
          position: absolute;
          inset-inline-start: 100%;
          top: calc(var(--spacing) * -1);
          margin-inline-start: var(--spacing);
          width: max-content;
        }
      }
      & .fi-modal-header {
        & .fi-ac {
          margin-top: calc(var(--spacing) * 2);
        }
      }
      & .fi-modal-content {
        row-gap: 0px;
        padding: 0px;
        & .fi-no-notifications {
          margin-bottom: -1px;
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(1px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
          }
          :where(&) > :where(:not(:last-child)) {
            border-color: var(--gray-200);
          }
          &:where(.dark, .dark *) {
            :where(&) > :where(:not(:last-child)) {
              border-color: color-mix(in srgb, #fff 10%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
              }
            }
          }
          & > :last-child {
            border-bottom-style: var(--tw-border-style);
            border-bottom-width: 1px;
            border-color: var(--gray-200);
            &:where(.dark, .dark *) {
              border-color: color-mix(in srgb, #fff 10%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
              }
            }
          }
        }
      }
      &.fi-modal-window-has-footer .fi-modal-content {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--gray-200);
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      & .fi-modal-footer {
        padding-top: calc(var(--spacing) * 6);
      }
    }
    & .fi-no-notification-unread-ctn {
      position: relative;
      &::before {
        content: var(--tw-content);
        position: absolute;
      }
      &::before {
        content: var(--tw-content);
        inset-inline-start: calc(var(--spacing) * 0);
      }
      &::before {
        content: var(--tw-content);
        height: 100%;
      }
      &::before {
        content: var(--tw-content);
        width: calc(var(--spacing) * 0.5);
      }
      &::before {
        content: var(--tw-content);
        background-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        &::before {
          content: var(--tw-content);
          background-color: var(--primary-500);
        }
      }
    }
  }
  .fi-no-notification {
    pointer-events: auto;
    visibility: hidden;
    display: flex;
    width: 100%;
    flex-shrink: 0;
    gap: calc(var(--spacing) * 3);
    overflow: hidden;
    padding: calc(var(--spacing) * 4);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    & .fi-no-notification-icon {
      color: var(--gray-400);
      &.fi-color {
        color: var(--color-400);
      }
    }
    & .fi-no-notification-main {
      margin-top: calc(var(--spacing) * 0.5);
      display: grid;
      flex: 1;
      gap: calc(var(--spacing) * 3);
    }
    & .fi-no-notification-text {
      display: grid;
      gap: var(--spacing);
    }
    & .fi-no-notification-title {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-no-notification-date {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-no-notification-body {
      overflow: hidden;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      text-wrap: pretty;
      overflow-wrap: break-word;
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      & > p:not(:first-of-type) {
        margin-top: var(--spacing);
      }
    }
    &:not(.fi-inline) {
      display: flex;
      max-width: var(--container-sm);
      gap: calc(var(--spacing) * 3);
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      padding: calc(var(--spacing) * 4);
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &.fi-color {
        --tw-ring-color: var(--color-600);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-600) 20%, transparent);
        }
        &:where(.dark, .dark *) {
          --tw-ring-color: var(--color-400);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-400) 30%, transparent);
          }
        }
      }
      &.fi-transition-leave-end {
        --tw-scale-x: 95%;
        --tw-scale-y: 95%;
        --tw-scale-z: 95%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
    &.fi-color {
      background-color: white;
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, white 90%, var(--color-400));
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix( in oklab, var(--gray-900) 90%, var(--color-400) );
        }
      }
      & .fi-no-notification-body {
        color: var(--gray-700);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--gray-700) 75%, transparent);
        }
        &:where(.dark, .dark *) {
          color: var(--gray-300);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--gray-300) 75%, transparent);
          }
        }
      }
    }
    &.fi-transition-enter-start {
      opacity: 0%;
    }
    &.fi-transition-leave-end {
      opacity: 0%;
    }
  }
  :is(.fi-no.fi-align-start, .fi-no.fi-align-left) .fi-no-notification.fi-transition-enter-start {
    --tw-translate-x: calc(var(--spacing) * -12);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  :is(.fi-no.fi-align-end, .fi-no.fi-align-right) .fi-no-notification.fi-transition-enter-start {
    --tw-translate-x: calc(var(--spacing) * 12);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .fi-no.fi-align-center.fi-vertical-align-start .fi-no-notification.fi-transition-enter-start {
    --tw-translate-y: calc(var(--spacing) * -12);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .fi-no.fi-align-center.fi-vertical-align-end .fi-no-notification.fi-transition-enter-start {
    --tw-translate-y: calc(var(--spacing) * 12);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .fi-no {
    pointer-events: none;
    position: fixed;
    inset: calc(var(--spacing) * 4);
    z-index: 50;
    margin-inline: auto;
    display: flex;
    gap: calc(var(--spacing) * 3);
    &.fi-align-start, &.fi-align-left {
      align-items: flex-start;
    }
    &.fi-align-center {
      align-items: center;
    }
    &.fi-align-end, &.fi-align-right {
      align-items: flex-end;
    }
    &.fi-vertical-align-start {
      flex-direction: column-reverse;
      justify-content: flex-end;
    }
    &.fi-vertical-align-center {
      flex-direction: column;
      justify-content: center;
    }
    &.fi-vertical-align-end {
      flex-direction: column;
      justify-content: flex-end;
    }
  }
  .fi-sc-actions {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    & .fi-sc-actions-label-ctn {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      & .fi-sc-actions-label {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
    }
    &.fi-sticky {
      & .fi-ac {
        position: fixed;
        bottom: 0px;
        margin-inline: calc(var(--spacing) * -4);
        width: 100%;
        transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
        background-color: var(--color-white);
        padding: calc(var(--spacing) * 4);
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--gray-950);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
        }
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        @media (width >= 48rem) {
          bottom: calc(var(--spacing) * 4);
        }
        @media (width >= 48rem) {
          border-radius: var(--radius-xl);
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-900);
        }
        &:where(.dark, .dark *) {
          --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
    }
    &.fi-vertical-align-start {
      justify-content: flex-start;
    }
    &.fi-vertical-align-center {
      justify-content: center;
    }
    &.fi-vertical-align-end {
      justify-content: flex-end;
    }
  }
  .fi-sc-flex {
    display: flex;
    gap: calc(var(--spacing) * 6);
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-between, &.fi-align-justify {
      justify-content: space-between;
    }
    &.fi-dense {
      gap: calc(var(--spacing) * 3);
    }
    & > .fi-hidden {
      display: none;
    }
    & > .fi-growable {
      width: 100%;
      flex: 1;
    }
    &.fi-from-default {
      align-items: flex-start;
      &.fi-vertical-align-center {
        align-items: center;
      }
      &.fi-vertical-align-end {
        align-items: flex-end;
      }
    }
    &.fi-from-sm {
      flex-direction: column;
      @media (width >= 40rem) {
        flex-direction: row;
      }
      @media (width >= 40rem) {
        align-items: flex-start;
      }
      &.fi-vertical-align-center {
        @media (width >= 40rem) {
          align-items: center;
        }
      }
      &.fi-vertical-align-end {
        @media (width >= 40rem) {
          align-items: flex-end;
        }
      }
    }
    &.fi-from-md {
      flex-direction: column;
      @media (width >= 48rem) {
        flex-direction: row;
      }
      @media (width >= 48rem) {
        align-items: flex-start;
      }
      &.fi-vertical-align-center {
        @media (width >= 48rem) {
          align-items: center;
        }
      }
      &.fi-vertical-align-end {
        @media (width >= 48rem) {
          align-items: flex-end;
        }
      }
    }
    &.fi-from-lg {
      flex-direction: column;
      @media (width >= 64rem) {
        flex-direction: row;
      }
      @media (width >= 64rem) {
        align-items: flex-start;
      }
      &.fi-vertical-align-center {
        @media (width >= 64rem) {
          align-items: center;
        }
      }
      &.fi-vertical-align-end {
        @media (width >= 64rem) {
          align-items: flex-end;
        }
      }
    }
    &.fi-from-xl {
      flex-direction: column;
      @media (width >= 80rem) {
        flex-direction: row;
      }
      @media (width >= 80rem) {
        align-items: flex-start;
      }
      &.fi-vertical-align-center {
        @media (width >= 80rem) {
          align-items: center;
        }
      }
      &.fi-vertical-align-end {
        @media (width >= 80rem) {
          align-items: flex-end;
        }
      }
    }
    &.fi-from-2xl {
      flex-direction: column;
      @media (width >= 96rem) {
        flex-direction: row;
      }
      @media (width >= 96rem) {
        align-items: flex-start;
      }
      &.fi-vertical-align-center {
        @media (width >= 96rem) {
          align-items: center;
        }
      }
      &.fi-vertical-align-end {
        @media (width >= 96rem) {
          align-items: flex-end;
        }
      }
    }
  }
  .fi-sc-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    &.fi-dense {
      gap: calc(var(--spacing) * 3);
    }
  }
  .fi-sc-fused-group > .fi-sc {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
    }
    &:focus-within {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-within {
      --tw-ring-color: var(--primary-600);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      &:focus-within {
        --tw-ring-color: var(--primary-500);
      }
    }
  }
  .fi-sc-fused-group .fi-sc {
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
    }
    border-radius: var(--radius-lg);
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
    & .fi-sc-component {
      min-height: 100%;
      & .fi-fo-field {
        min-height: 100%;
      }
      & .fi-input {
        min-height: 100%;
      }
      & .fi-sc-actions {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
      }
    }
    & > :first-child .fi-input-wrp {
      border-top-left-radius: var(--radius-lg);
      border-top-right-radius: var(--radius-lg);
    }
    & > :last-child .fi-input-wrp {
      border-bottom-right-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }
    &.fi-grid-cols {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: var(--tw-border-style);
        border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
        border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(0px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
      }
      & > :first-child .fi-input-wrp {
        border-start-end-radius: 0;
        border-end-start-radius: var(--radius-lg);
      }
      & > :last-child .fi-input-wrp {
        border-start-end-radius: var(--radius-lg);
        border-end-start-radius: 0;
      }
    }
    &.sm\:fi-grid-cols {
      @media (width >= 40rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 0;
          border-inline-style: var(--tw-border-style);
          border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
          border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        }
      }
      @media (width >= 40rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(0px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }
      }
      & > :first-child .fi-input-wrp {
        @media (width >= 40rem) {
          border-start-end-radius: 0;
        }
        @media (width >= 40rem) {
          border-end-start-radius: var(--radius-lg);
        }
      }
      & > :last-child .fi-input-wrp {
        @media (width >= 40rem) {
          border-start-end-radius: var(--radius-lg);
        }
        @media (width >= 40rem) {
          border-end-start-radius: 0;
        }
      }
    }
    &.md\:fi-grid-cols {
      @media (width >= 48rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 0;
          border-inline-style: var(--tw-border-style);
          border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
          border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        }
      }
      @media (width >= 48rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(0px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }
      }
      & > :first-child .fi-input-wrp {
        @media (width >= 48rem) {
          border-start-end-radius: 0;
        }
        @media (width >= 48rem) {
          border-end-start-radius: var(--radius-lg);
        }
      }
      & > :last-child .fi-input-wrp {
        @media (width >= 48rem) {
          border-start-end-radius: var(--radius-lg);
        }
        @media (width >= 48rem) {
          border-end-start-radius: 0;
        }
      }
    }
    &.lg\:fi-grid-cols {
      @media (width >= 64rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 0;
          border-inline-style: var(--tw-border-style);
          border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
          border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        }
      }
      @media (width >= 64rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(0px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }
      }
      & > :first-child .fi-input-wrp {
        @media (width >= 64rem) {
          border-start-end-radius: 0;
        }
        @media (width >= 64rem) {
          border-end-start-radius: var(--radius-lg);
        }
      }
      & > :last-child .fi-input-wrp {
        @media (width >= 64rem) {
          border-start-end-radius: var(--radius-lg);
        }
        @media (width >= 64rem) {
          border-end-start-radius: 0;
        }
      }
    }
    &.xl\:fi-grid-cols {
      @media (width >= 80rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 0;
          border-inline-style: var(--tw-border-style);
          border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
          border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        }
      }
      @media (width >= 80rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(0px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }
      }
      & > :first-child .fi-input-wrp {
        @media (width >= 80rem) {
          border-start-end-radius: 0;
        }
        @media (width >= 80rem) {
          border-end-start-radius: var(--radius-lg);
        }
      }
      & > :last-child .fi-input-wrp {
        @media (width >= 80rem) {
          border-start-end-radius: var(--radius-lg);
        }
        @media (width >= 80rem) {
          border-end-start-radius: 0;
        }
      }
    }
    &.\32xl\:fi-grid-cols {
      @media (width >= 96rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-x-reverse: 0;
          border-inline-style: var(--tw-border-style);
          border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
          border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
        }
      }
      @media (width >= 96rem) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(0px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }
      }
      & > :first-child .fi-input-wrp {
        @media (width >= 96rem) {
          border-start-end-radius: 0;
        }
        @media (width >= 96rem) {
          border-end-start-radius: var(--radius-lg);
        }
      }
      & > :last-child .fi-input-wrp {
        @media (width >= 96rem) {
          border-start-end-radius: var(--radius-lg);
        }
        @media (width >= 96rem) {
          border-end-start-radius: 0;
        }
      }
    }
    @supports (container-type: inline-size) {
      &.\@3xs\:fi-grid-cols {
        @container (width >= 16rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 16rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 16rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 16rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 16rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 16rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@2xs\:fi-grid-cols {
        @container (width >= 18rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 18rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 18rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 18rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 18rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 18rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@xs\:fi-grid-cols {
        @container (width >= 20rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 20rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 20rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 20rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 20rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 20rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@sm\:fi-grid-cols {
        @container (width >= 24rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 24rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 24rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 24rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 24rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 24rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@md\:fi-grid-cols {
        @container (width >= 28rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 28rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 28rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 28rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 28rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 28rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@lg\:fi-grid-cols {
        @container (width >= 32rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 32rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 32rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 32rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 32rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 32rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@xl\:fi-grid-cols {
        @container (width >= 36rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 36rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 36rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 36rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 36rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 36rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@2xl\:fi-grid-cols {
        @container (width >= 42rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 42rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 42rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 42rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 42rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 42rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@3xl\:fi-grid-cols {
        @container (width >= 48rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 48rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 48rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 48rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 48rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 48rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@4xl\:fi-grid-cols {
        @container (width >= 56rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 56rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 56rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 56rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 56rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 56rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@5xl\:fi-grid-cols {
        @container (width >= 64rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 64rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 64rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 64rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 64rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 64rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@6xl\:fi-grid-cols {
        @container (width >= 72rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 72rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 72rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 72rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 72rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 72rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\@7xl\:fi-grid-cols {
        @container (width >= 80rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @container (width >= 80rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @container (width >= 80rem) {
            border-start-end-radius: 0;
          }
          @container (width >= 80rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @container (width >= 80rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @container (width >= 80rem) {
            border-end-start-radius: 0;
          }
        }
      }
    }
    @supports not (container-type: inline-size) {
      &.\!\@sm\:fi-grid-cols {
        @media (width >= 40rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @media (width >= 40rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @media (width >= 40rem) {
            border-start-end-radius: 0;
          }
          @media (width >= 40rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @media (width >= 40rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @media (width >= 40rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\!\@md\:fi-grid-cols {
        @media (width >= 48rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @media (width >= 48rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @media (width >= 48rem) {
            border-start-end-radius: 0;
          }
          @media (width >= 48rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @media (width >= 48rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @media (width >= 48rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\!\@lg\:fi-grid-cols {
        @media (width >= 64rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @media (width >= 64rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @media (width >= 64rem) {
            border-start-end-radius: 0;
          }
          @media (width >= 64rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @media (width >= 64rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @media (width >= 64rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\!\@xl\:fi-grid-cols {
        @media (width >= 80rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @media (width >= 80rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @media (width >= 80rem) {
            border-start-end-radius: 0;
          }
          @media (width >= 80rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @media (width >= 80rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @media (width >= 80rem) {
            border-end-start-radius: 0;
          }
        }
      }
      &.\!\@2xl\:fi-grid-cols {
        @media (width >= 96rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-x-reverse: 0;
            border-inline-style: var(--tw-border-style);
            border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
            border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
          }
        }
        @media (width >= 96rem) {
          :where(&) > :where(:not(:last-child)) {
            --tw-divide-y-reverse: 0;
            border-bottom-style: var(--tw-border-style);
            border-top-style: var(--tw-border-style);
            border-top-width: calc(0px * var(--tw-divide-y-reverse));
            border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
          }
        }
        & > :first-child .fi-input-wrp {
          @media (width >= 96rem) {
            border-start-end-radius: 0;
          }
          @media (width >= 96rem) {
            border-end-start-radius: var(--radius-lg);
          }
        }
        & > :last-child .fi-input-wrp {
          @media (width >= 96rem) {
            border-start-end-radius: var(--radius-lg);
          }
          @media (width >= 96rem) {
            border-end-start-radius: 0;
          }
        }
      }
    }
  }
  .fi-sc-fused-group .fi-input-wrp {
    border-radius: 0;
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:not(.fi-disabled):not(:has(.fi-ac-action:focus)) {
      &:focus-within {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &.fi-invalid {
        &:focus-within {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  .fi-sc-icon {
    color: var(--gray-400);
    &:where(.dark, .dark *) {
      color: var(--gray-500);
    }
    &.fi-color {
      color: var(--color-500);
      &:where(.dark, .dark *) {
        color: var(--color-400);
      }
    }
  }
  .fi-sc-image {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--gray-300);
    &:where(.dark, .dark *) {
      border-color: transparent;
    }
    &.fi-align-center {
      margin-inline: auto;
    }
    &.fi-align-end, &.fi-align-right {
      margin-inline-start: auto;
    }
  }
  .fi-sc-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    & .fi-sc-section-label-ctn {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      & .fi-sc-section-label {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
    }
  }
  .fi-sc-tabs {
    display: flex;
    flex-direction: column;
    & .fi-tabs.fi-invisible {
      visibility: hidden;
    }
    & .fi-sc-tabs-tab {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
      &.fi-active {
        margin-top: calc(var(--spacing) * 6);
      }
      &:not(.fi-active) {
        display: none;
      }
    }
    &.fi-contained {
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & .fi-sc-tabs-tab {
        &.fi-active {
          margin-top: 0px;
          padding: calc(var(--spacing) * 6);
        }
      }
    }
    &.fi-vertical {
      flex-direction: row;
      & .fi-sc-tabs-tab {
        &.fi-active {
          margin-inline-start: calc(var(--spacing) * 6);
          margin-top: 0px;
          flex: 1;
        }
      }
    }
  }
  .fi-sc-text.fi-copyable {
    cursor: pointer;
    --tw-outline-style: none;
    outline-style: none;
    &:focus-visible {
      border-radius: var(--radius-sm);
    }
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 2px;
    }
    &:focus-visible {
      outline-offset: 2px;
    }
    &:focus-visible {
      outline-color: currentcolor;
    }
  }
  .fi-sc-text.fi-font-sans {
    font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
  }
  .fi-sc-text.fi-font-serif {
    font-family: var(--serif-font-family), ui-serif, Georgia, Cambria, 'Times New Roman',
        Times, serif;
  }
  .fi-sc-text.fi-font-mono {
    font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
  }
  .fi-sc-text:not(.fi-badge) {
    display: inline-block;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    overflow-wrap: break-word;
    color: var(--gray-600);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
    &.fi-font-thin {
      --tw-font-weight: var(--font-weight-thin);
      font-weight: var(--font-weight-thin);
    }
    &.fi-font-extralight {
      --tw-font-weight: var(--font-weight-extralight);
      font-weight: var(--font-weight-extralight);
    }
    &.fi-font-light {
      --tw-font-weight: var(--font-weight-light);
      font-weight: var(--font-weight-light);
    }
    &.fi-font-normal {
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
    }
    &.fi-font-medium {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    &.fi-font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &.fi-font-bold {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
    &.fi-font-extrabold {
      --tw-font-weight: var(--font-weight-extrabold);
      font-weight: var(--font-weight-extrabold);
    }
    &.fi-font-black {
      --tw-font-weight: var(--font-weight-black);
      font-weight: var(--font-weight-black);
    }
    &.fi-size-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    &.fi-color-neutral {
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    &.fi-color:not(.fi-color-neutral) {
      color: var(--text);
      &:where(.dark, .dark *) {
        color: var(--dark-text);
      }
    }
    &.fi-size-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    &.fi-size-md {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .fi-sc-unordered-list {
    margin-inline-start: calc(var(--spacing) * 3);
    list-style-type: disc;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &.fi-size-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    &.fi-size-md {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    &.fi-size-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .fi-sc-wizard {
    display: flex;
    flex-direction: column;
    & .fi-sc-wizard-header {
      display: grid;
      @media (width >= 48rem) {
        grid-auto-flow: column;
      }
      @media (width >= 48rem) {
        overflow-x: auto;
      }
      & .fi-sc-wizard-header-step {
        position: relative;
        display: flex;
        &:not(.fi-active) {
          display: none;
          @media (width >= 48rem) {
            display: flex;
          }
        }
        & .fi-sc-wizard-header-step-btn {
          display: flex;
          height: 100%;
          align-items: center;
          column-gap: calc(var(--spacing) * 4);
          padding-inline: calc(var(--spacing) * 6);
          padding-block: calc(var(--spacing) * 4);
          text-align: start;
          & .fi-sc-wizard-header-step-icon-ctn {
            display: flex;
            width: calc(var(--spacing) * 10);
            height: calc(var(--spacing) * 10);
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            border-radius: calc(infinity * 1px);
            & .fi-sc-wizard-header-step-number {
              font-size: var(--text-sm);
              line-height: var(--tw-leading, var(--text-sm--line-height));
              --tw-font-weight: var(--font-weight-medium);
              font-weight: var(--font-weight-medium);
            }
          }
          & .fi-sc-wizard-header-step-text {
            display: grid;
            justify-items: start;
            @media (width >= 48rem) {
              width: max-content;
            }
            @media (width >= 48rem) {
              max-width: calc(var(--spacing) * 60);
            }
            & .fi-sc-wizard-header-step-label {
              font-size: var(--text-sm);
              line-height: var(--tw-leading, var(--text-sm--line-height));
              --tw-font-weight: var(--font-weight-medium);
              font-weight: var(--font-weight-medium);
            }
            & .fi-sc-wizard-header-step-description {
              text-align: start;
              font-size: var(--text-sm);
              line-height: var(--tw-leading, var(--text-sm--line-height));
              color: var(--gray-500);
              &:where(.dark, .dark *) {
                color: var(--gray-400);
              }
            }
          }
        }
        & .fi-sc-wizard-header-step-separator {
          position: absolute;
          inset-inline-end: calc(var(--spacing) * 0);
          display: none;
          height: 100%;
          width: calc(var(--spacing) * 5);
          color: var(--gray-200);
          @media (width >= 48rem) {
            display: block;
          }
          &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
            rotate: 180deg;
          }
          &:where(.dark, .dark *) {
            color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
        }
        &.fi-completed {
          & .fi-sc-wizard-header-step-btn {
            & .fi-sc-wizard-header-step-icon-ctn {
              background-color: var(--primary-600);
              &:where(.dark, .dark *) {
                background-color: var(--primary-500);
              }
              & .fi-icon {
                color: var(--color-white);
              }
            }
            & .fi-sc-wizard-header-step-text {
              & .fi-sc-wizard-header-step-label {
                color: var(--gray-950);
                &:where(.dark, .dark *) {
                  color: var(--color-white);
                }
              }
            }
          }
        }
        &:not(.fi-completed) {
          & .fi-sc-wizard-header-step-btn {
            & .fi-sc-wizard-header-step-icon-ctn {
              border-style: var(--tw-border-style);
              border-width: 2px;
            }
          }
          &.fi-active {
            & .fi-sc-wizard-header-step-btn {
              & .fi-sc-wizard-header-step-icon-ctn {
                & .fi-icon {
                  color: var(--primary-600);
                  &:where(.dark, .dark *) {
                    color: var(--primary-500);
                  }
                }
              }
            }
          }
          &:not(.fi-active) {
            & .fi-sc-wizard-header-step-btn {
              & .fi-sc-wizard-header-step-icon-ctn {
                & .fi-icon {
                  color: var(--gray-500);
                  &:where(.dark, .dark *) {
                    color: var(--gray-400);
                  }
                }
              }
              & .fi-sc-wizard-header-step-text {
                & .fi-sc-wizard-header-step-label {
                  color: var(--gray-500);
                  &:where(.dark, .dark *) {
                    color: var(--gray-400);
                  }
                }
              }
            }
          }
        }
        &.fi-active {
          & .fi-sc-wizard-header-step-btn {
            & .fi-sc-wizard-header-step-icon-ctn {
              border-color: var(--primary-600);
              &:where(.dark, .dark *) {
                border-color: var(--primary-500);
              }
              & .fi-sc-wizard-header-step-number {
                color: var(--primary-600);
                &:where(.dark, .dark *) {
                  color: var(--primary-500);
                }
              }
            }
            & .fi-sc-wizard-header-step-text {
              & .fi-sc-wizard-header-step-label {
                color: var(--primary-700);
                &:where(.dark, .dark *) {
                  color: var(--primary-400);
                }
              }
            }
          }
        }
        &:not(.fi-active) {
          & .fi-sc-wizard-header-step-btn {
            & .fi-sc-wizard-header-step-icon-ctn {
              border-color: var(--gray-300);
              &:where(.dark, .dark *) {
                border-color: var(--gray-600);
              }
              & .fi-sc-wizard-header-step-number {
                color: var(--gray-500);
                &:where(.dark, .dark *) {
                  color: var(--gray-400);
                }
              }
            }
          }
        }
      }
    }
    & .fi-sc-wizard-step {
      --tw-outline-style: none;
      outline-style: none;
      @media (forced-colors: active) {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }
      &:not(.fi-active) {
        display: none;
      }
    }
    &:not(.fi-sc-wizard-header-hidden) {
      & .fi-sc-wizard-step {
        &.fi-active {
          margin-top: calc(var(--spacing) * 6);
        }
      }
    }
    & .fi-sc-wizard-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      column-gap: calc(var(--spacing) * 3);
      & > .fi-hidden {
        display: none;
      }
    }
    &.fi-contained {
      border-radius: var(--radius-xl);
      background-color: var(--color-white);
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & .fi-sc-wizard-header {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px;
        border-color: var(--gray-200);
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      & .fi-sc-wizard-step {
        &.fi-active {
          margin-top: 0px;
          padding: calc(var(--spacing) * 6);
        }
      }
      & .fi-sc-wizard-footer {
        padding-inline: calc(var(--spacing) * 6);
        padding-bottom: calc(var(--spacing) * 6);
      }
    }
    &:not(.fi-contained) {
      & .fi-sc-wizard-header {
        border-radius: var(--radius-xl);
        background-color: var(--color-white);
        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--gray-950);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
        }
        &:where(.dark, .dark *) {
          background-color: var(--gray-900);
        }
        &:where(.dark, .dark *) {
          --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      & .fi-sc-wizard-footer {
        margin-top: calc(var(--spacing) * 6);
      }
    }
  }
  .fi-sc {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    &.fi-sc-loading {
      display: grid;
      min-height: calc(var(--spacing) * 32);
      place-items: center;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    &.fi-inline {
      display: flex;
      flex-grow: 1;
      flex-wrap: wrap;
      align-items: center;
      & > .fi-growable {
        width: 100%;
        flex: 1;
      }
      & > .fi-sc-action:not(.fi-hidden) {
        display: contents;
      }
    }
    &.fi-sc-has-gap {
      gap: calc(var(--spacing) * 6);
      &.fi-sc-dense {
        gap: calc(var(--spacing) * 3);
      }
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-between, &.fi-align-justify {
      justify-content: space-between;
    }
    & > .fi-hidden {
      display: none;
    }
    & > .fi-grid-col {
      &.fi-width-3xs {
        max-width: var(--container-3xs);
      }
      &.fi-width-2xs {
        max-width: var(--container-2xs);
      }
      &.fi-width-xs {
        max-width: var(--container-xs);
      }
      &.fi-width-sm {
        max-width: var(--container-sm);
      }
      &.fi-width-md {
        max-width: var(--container-md);
      }
      &.fi-width-lg {
        max-width: var(--container-lg);
      }
      &.fi-width-xl {
        max-width: var(--container-xl);
      }
      &.fi-width-2xl {
        max-width: var(--container-2xl);
      }
      &.fi-width-3xl {
        max-width: var(--container-3xl);
      }
      &.fi-width-4xl {
        max-width: var(--container-4xl);
      }
      &.fi-width-5xl {
        max-width: var(--container-5xl);
      }
      &.fi-width-6xl {
        max-width: var(--container-6xl);
      }
      &.fi-width-7xl {
        max-width: var(--container-7xl);
      }
      &.fi-width-none {
        max-width: none;
      }
      &.fi-width-container {
        width: 100%;
        @media (width >= 40rem) {
          max-width: 40rem;
        }
        @media (width >= 48rem) {
          max-width: 48rem;
        }
        @media (width >= 64rem) {
          max-width: 64rem;
        }
        @media (width >= 80rem) {
          max-width: 80rem;
        }
        @media (width >= 96rem) {
          max-width: 96rem;
        }
      }
      & > .fi-sc-component {
        height: 100%;
      }
    }
  }
  fieldset.fi-sc-visibility-fieldset {
    margin: 0px;
    min-width: 0px;
    border-style: var(--tw-border-style);
    border-width: 0px;
    padding: 0px;
    min-inline-size: 0;
  }
  .fi-ta-actions {
    display: flex;
    max-width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 3);
    & > * {
      flex-shrink: 0;
    }
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &.sm\:fi-not-wrapped {
      @media (width >= 40rem) {
        flex-wrap: nowrap;
      }
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-start {
      justify-content: flex-start;
    }
    &.fi-align-between {
      justify-content: space-between;
    }
    &.md\:fi-align-end {
      @media (width >= 48rem) {
        justify-content: flex-end;
      }
    }
  }
  .fi-ta-cell {
    padding: 0px;
    &:first-child {
      padding-inline-start: var(--spacing);
    }
    &:last-child {
      padding-inline-end: var(--spacing);
    }
    @media (width >= 40rem) {
      &:first-child {
        padding-inline-start: calc(var(--spacing) * 3);
      }
    }
    @media (width >= 40rem) {
      &:last-child {
        padding-inline-end: calc(var(--spacing) * 3);
      }
    }
    &.fi-vertical-align-start {
      vertical-align: top;
    }
    &.fi-vertical-align-end {
      vertical-align: bottom;
    }
    &.sm\:fi-hidden {
      @media (width >= 40rem) {
        display: none;
      }
    }
    &.md\:fi-hidden {
      @media (width >= 48rem) {
        display: none;
      }
    }
    &.lg\:fi-hidden {
      @media (width >= 64rem) {
        display: none;
      }
    }
    &.xl\:fi-hidden {
      @media (width >= 80rem) {
        display: none;
      }
    }
    &.\32xl\:fi-hidden {
      @media (width >= 96rem) {
        display: none;
      }
    }
    &.sm\:fi-visible {
      display: none;
      @media (width >= 40rem) {
        display: table-cell;
      }
    }
    &.md\:fi-visible {
      display: none;
      @media (width >= 48rem) {
        display: table-cell;
      }
    }
    &.lg\:fi-visible {
      display: none;
      @media (width >= 64rem) {
        display: table-cell;
      }
    }
    &.xl\:fi-visible {
      display: none;
      @media (width >= 80rem) {
        display: table-cell;
      }
    }
    &.\32xl\:fi-visible {
      display: none;
      @media (width >= 96rem) {
        display: table-cell;
      }
    }
    & .fi-ta-col {
      display: flex;
      width: 100%;
      justify-content: flex-start;
      text-align: start;
      &:disabled {
        pointer-events: none;
      }
    }
    &:has(.fi-ta-reorder-handle) {
      width: var(--spacing);
      padding-inline: calc(var(--spacing) * 3);
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 4);
      }
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 4);
      }
      @media (width >= 40rem) {
        &:first-of-type {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      @media (width >= 40rem) {
        &:last-of-type {
          padding-inline-end: calc(var(--spacing) * 6);
        }
      }
    }
    &:has(.fi-ta-actions) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
      white-space: nowrap;
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 4);
      }
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 4);
      }
      @media (width >= 40rem) {
        &:first-of-type {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      @media (width >= 40rem) {
        &:last-of-type {
          padding-inline-end: calc(var(--spacing) * 6);
        }
      }
    }
    &:has(.fi-ta-record-checkbox) {
      width: var(--spacing);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 4);
      }
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 4);
      }
      @media (width >= 40rem) {
        &:first-of-type {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      @media (width >= 40rem) {
        &:last-of-type {
          padding-inline-end: calc(var(--spacing) * 6);
        }
      }
    }
    & .fi-ta-placeholder {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    &.fi-ta-summary-row-heading-cell {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      @media (width >= 40rem) {
        &:first-child {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      @media (width >= 40rem) {
        &:last-child {
          padding-inline-end: calc(var(--spacing) * 6);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    &.fi-align-start {
      text-align: start;
    }
    &.fi-align-center {
      text-align: center;
    }
    &.fi-align-end {
      text-align: end;
    }
    &.fi-align-left {
      text-align: left;
    }
    &.fi-align-right {
      text-align: right;
    }
    &.fi-align-justify, &.fi-align-between {
      text-align: justify;
    }
    &.fi-ta-summary-header-cell {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      @media (width >= 40rem) {
        &:first-child {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
      &.fi-wrapped {
        white-space: nowrap;
      }
      &:not(.fi-wrapped) {
        white-space: nowrap;
      }
    }
    &.fi-ta-individual-search-cell {
      min-width: calc(var(--spacing) * 48);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
    }
    & .fi-ta-reorder-handle {
      cursor: move;
    }
    &.fi-ta-selection-cell {
      width: var(--spacing);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 4);
      }
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 4);
      }
      @media (width >= 40rem) {
        &:first-of-type {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      @media (width >= 40rem) {
        &:last-of-type {
          padding-inline-end: calc(var(--spacing) * 6);
        }
      }
    }
    &.fi-ta-group-selection-cell {
      width: var(--spacing);
      padding-inline: calc(var(--spacing) * 3);
      vertical-align: middle;
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 4);
      }
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 4);
      }
      @media (width >= 40rem) {
        &:first-of-type {
          padding-inline-start: calc(var(--spacing) * 6);
        }
      }
      @media (width >= 40rem) {
        &:last-of-type {
          padding-inline-end: calc(var(--spacing) * 6);
        }
      }
    }
  }
  .fi-ta-search-field > .fi-ta-cell-label {
    display: block;
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-500);
    @media (width >= 40rem) {
      display: none;
    }
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-ta-checkbox {
    width: 100%;
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    &.fi-align-center {
      text-align: center;
    }
    &.fi-align-end, &.fi-align-right {
      text-align: end;
    }
  }
  .fi-ta-color {
    display: flex;
    width: 100%;
    gap: calc(var(--spacing) * 1.5);
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-justify, &.fi-align-between {
      justify-content: space-between;
    }
    & > .fi-ta-color-item {
      width: calc(var(--spacing) * 6);
      height: calc(var(--spacing) * 6);
      border-radius: var(--radius-md);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 10%, transparent);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
      &.fi-copyable {
        cursor: pointer;
        --tw-outline-style: none;
        outline-style: none;
        &:focus-visible {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        &:focus-visible {
          --tw-ring-color: var(--primary-600);
        }
        &:where(.dark, .dark *) {
          &:focus-visible {
            --tw-ring-color: var(--primary-500);
          }
        }
      }
    }
  }
  .fi-ta-icon {
    display: flex;
    width: 100%;
    gap: calc(var(--spacing) * 1.5);
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &.fi-ta-icon-has-line-breaks {
      flex-direction: column;
    }
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-justify, &.fi-align-between {
      justify-content: space-between;
    }
    & > .fi-icon, & > a > .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &.fi-color {
        color: var(--text);
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
      }
    }
  }
  .fi-ta-image {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    & img {
      max-width: none;
      object-fit: cover;
      object-position: center;
    }
    &.fi-circular {
      & img {
        border-radius: calc(infinity * 1px);
      }
    }
    &.fi-ta-image-ring {
      & img, & .fi-ta-image-limited-remaining-text {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        --tw-ring-color: var(--color-white);
        &:where(.dark, .dark *) {
          --tw-ring-color: var(--gray-900);
        }
      }
      &.fi-ta-image-ring-1 {
        & img, & .fi-ta-image-limited-remaining-text {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
      &.fi-ta-image-ring-2 {
        & img, & .fi-ta-image-limited-remaining-text {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
      &.fi-ta-image-ring-4 {
        & img, & .fi-ta-image-limited-remaining-text {
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
    &.fi-ta-image-overlap-1 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-2 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-3 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -3) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -3) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-4 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-5 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -5) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -5) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-6 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -6) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -6) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-7 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -7) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -7) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-ta-image-overlap-8 {
      column-gap: 0px;
      :where(&) > :where(:not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * -8) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
    &.fi-wrapped {
      flex-wrap: wrap;
    }
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    &.fi-align-start, &.fi-align-left {
      justify-content: flex-start;
    }
    &.fi-align-center {
      justify-content: center;
    }
    &.fi-align-end, &.fi-align-right {
      justify-content: flex-end;
    }
    &.fi-align-justify, &.fi-align-between {
      justify-content: space-between;
    }
    &.fi-stacked {
      & .fi-ta-image-limited-remaining-text {
        border-radius: calc(infinity * 1px);
        background-color: var(--gray-100);
        &:where(.dark, .dark *) {
          background-color: var(--gray-800);
        }
      }
    }
    & .fi-ta-image-limited-remaining-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      &.fi-size-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height));
      }
      &.fi-size-base, &.fi-size-md {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
      }
      &.fi-size-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height));
      }
    }
  }
  .fi-ta-select {
    width: 100%;
    min-width: calc(var(--spacing) * 48);
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
  }
  .fi-ta-text {
    width: 100%;
    &.fi-numeric {
      --tw-numeric-spacing: tabular-nums;
      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    }
    &.fi-ta-text-has-descriptions, &.fi-ta-text-list-limited {
      display: flex;
      flex-direction: column;
      &.fi-ta-text-has-badges {
        row-gap: calc(var(--spacing) * 2);
      }
      &:not(.fi-ta-text-has-badges) {
        row-gap: var(--spacing);
      }
    }
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    ul&.fi-bulleted, &.fi-bulleted ul {
      list-style-position: inside;
      list-style-type: disc;
    }
    &:not(.fi-ta-text-has-line-breaks) {
      ul&.fi-ta-text-has-badges, &.fi-ta-text-has-badges ul {
        display: flex;
        column-gap: calc(var(--spacing) * 1.5);
        &.fi-wrapped, &:is(.fi-wrapped ul) {
          flex-wrap: wrap;
          row-gap: var(--spacing);
        }
      }
    }
    ul&.fi-ta-text-has-badges, &.fi-ta-text-has-badges ul {
      &.fi-ta-text-has-line-breaks, &:is(.fi-ta-text-has-line-breaks ul) {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacing);
      }
      &:not(ul.fi-ta-text-has-line-breaks), &:not(.fi-ta-text-has-line-breaks ul) {
        display: flex;
        column-gap: calc(var(--spacing) * 1.5);
        &.fi-wrapped, &:is(.fi-wrapped ul) {
          flex-wrap: wrap;
          row-gap: var(--spacing);
        }
      }
    }
    &.fi-wrapped:not(.fi-ta-text-has-badges.fi-ta-text-has-line-breaks) {
      white-space: normal;
      & .fi-badge, & .fi-ta-text-list-limited-message {
        white-space: nowrap;
      }
    }
    & > .fi-ta-text-description, & > .fi-ta-text-list-limited-message {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    &.fi-align-center {
      text-align: center;
      ul&, & ul {
        justify-content: center;
      }
    }
    &.fi-align-end, &.fi-align-right {
      text-align: end;
      ul&, & ul {
        justify-content: flex-end;
      }
    }
    &.fi-align-justify, &.fi-align-between {
      text-align: justify;
      ul&, & ul {
        justify-content: space-between;
      }
    }
  }
  .fi-ta-text-item {
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    & a {
      &:hover {
        @media (hover: hover) {
          text-decoration-line: underline;
        }
      }
      &:focus-visible {
        text-decoration-line: underline;
      }
    }
    &:not(.fi-bulleted li.fi-ta-text-item) {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--line-clamp,none);
    }
    & > .fi-copyable {
      cursor: pointer;
      border-radius: var(--radius-md);
      --tw-outline-style: none;
      outline-style: none;
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus-visible {
        --tw-ring-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          --tw-ring-color: var(--primary-500);
        }
      }
    }
    &.fi-size-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
    &.fi-size-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
    }
    &.fi-size-md {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    &.fi-size-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    &.fi-font-thin {
      --tw-font-weight: var(--font-weight-thin);
      font-weight: var(--font-weight-thin);
    }
    &.fi-font-extralight {
      --tw-font-weight: var(--font-weight-extralight);
      font-weight: var(--font-weight-extralight);
    }
    &.fi-font-light {
      --tw-font-weight: var(--font-weight-light);
      font-weight: var(--font-weight-light);
    }
    &.fi-font-normal {
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
    }
    &.fi-font-medium {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
    }
    &.fi-font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
    }
    &.fi-font-bold {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold);
    }
    &.fi-font-extrabold {
      --tw-font-weight: var(--font-weight-extrabold);
      font-weight: var(--font-weight-extrabold);
    }
    &.fi-font-black {
      --tw-font-weight: var(--font-weight-black);
      font-weight: var(--font-weight-black);
    }
    &.fi-font-sans {
      font-family: var(--font-family), ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    }
    &.fi-font-serif {
      font-family: var(--serif-font-family), ui-serif, Georgia, Cambria, 'Times New Roman',
        Times, serif;
    }
    &.fi-font-mono {
      font-family: var(--mono-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', 'Courier New', monospace;
    }
    &.fi-color {
      color: var(--text);
      &:where(.dark, .dark *) {
        color: var(--dark-text);
      }
      li&::marker {
        color: var(--gray-950);
      }
      &:where(.dark, .dark *) {
        li&::marker {
          color: var(--color-white);
        }
      }
    }
    &.fi-color-gray {
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      li&::marker {
        color: var(--gray-950);
      }
      &:where(.dark, .dark *) {
        li&::marker {
          color: var(--color-white);
        }
      }
    }
    & > .fi-icon, & > span:not(.fi-badge) > .fi-icon {
      display: inline-block;
      flex-shrink: 0;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &.fi-color {
        color: var(--color-500);
      }
    }
    &.fi-ta-text-has-badges > .fi-badge {
      vertical-align: middle;
    }
  }
  @media (hover: hover) {
    .fi-ta-col-has-column-url .fi-ta-text-item:hover {
      text-decoration-line: underline;
    }
  }
  .fi-ta-col-has-column-url .fi-ta-text-item:focus-visible {
    text-decoration-line: underline;
  }
  @media (hover: hover) {
    .fi-ta-col-has-column-url .fi-ta-text-item .fi-icon:hover {
      text-decoration-line: none;
    }
  }
  .fi-ta-col-has-column-url .fi-ta-text-item .fi-icon:focus-visible {
    text-decoration-line: none;
  }
  @media (hover: hover) {
    .fi-ta-col-has-column-url .fi-ta-text-item > .fi-badge:hover {
      text-decoration-line: none;
    }
  }
  .fi-ta-col-has-column-url .fi-ta-text-item > .fi-badge:focus-visible {
    text-decoration-line: none;
  }
  .fi-ta-text-input {
    width: 100%;
    min-width: calc(var(--spacing) * 48);
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
  }
  .fi-ta-toggle {
    width: 100%;
    &:not(.fi-inline) {
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 4);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding: 0px;
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    &.fi-align-center {
      text-align: center;
    }
    &.fi-align-end, &.fi-align-right {
      text-align: end;
    }
  }
  .fi-ta-grid.fi-gap-sm {
    gap: var(--spacing);
  }
  @media (width >= 40rem) {
    .fi-ta-grid.sm\:fi-gap-sm {
      gap: var(--spacing);
    }
  }
  @media (width >= 48rem) {
    .fi-ta-grid.md\:fi-gap-sm {
      gap: var(--spacing);
    }
  }
  @media (width >= 64rem) {
    .fi-ta-grid.lg\:fi-gap-sm {
      gap: var(--spacing);
    }
  }
  @media (width >= 80rem) {
    .fi-ta-grid.xl\:fi-gap-sm {
      gap: var(--spacing);
    }
  }
  @media (width >= 96rem) {
    .fi-ta-grid.\32xl\:fi-gap-sm {
      gap: var(--spacing);
    }
  }
  .fi-ta-grid.fi-gap-lg {
    gap: calc(var(--spacing) * 3);
  }
  @media (width >= 40rem) {
    .fi-ta-grid.sm\:fi-gap-lg {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (width >= 48rem) {
    .fi-ta-grid.md\:fi-gap-lg {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (width >= 64rem) {
    .fi-ta-grid.lg\:fi-gap-lg {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (width >= 80rem) {
    .fi-ta-grid.xl\:fi-gap-lg {
      gap: calc(var(--spacing) * 3);
    }
  }
  @media (width >= 96rem) {
    .fi-ta-grid.\32xl\:fi-gap-lg {
      gap: calc(var(--spacing) * 3);
    }
  }
  .fi-ta-panel {
    border-radius: var(--radius-lg);
    background-color: var(--gray-50);
    padding: calc(var(--spacing) * 4);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    --tw-ring-inset: inset;
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-ta-split {
    display: flex;
    &.default\:fi-ta-split {
      align-items: center;
      gap: calc(var(--spacing) * 3);
    }
    &.sm\:fi-ta-split, &.md\:fi-ta-split, &.lg\:fi-ta-split, &.xl\:fi-ta-split, &.\32xl\:fi-ta-split {
      flex-direction: column;
      gap: calc(var(--spacing) * 2);
    }
    &.sm\:fi-ta-split {
      @media (width >= 40rem) {
        flex-direction: row;
      }
      @media (width >= 40rem) {
        align-items: center;
      }
      @media (width >= 40rem) {
        gap: calc(var(--spacing) * 3);
      }
    }
    &.md\:fi-ta-split {
      @media (width >= 48rem) {
        flex-direction: row;
      }
      @media (width >= 48rem) {
        align-items: center;
      }
      @media (width >= 48rem) {
        gap: calc(var(--spacing) * 3);
      }
    }
    &.lg\:fi-ta-split {
      @media (width >= 64rem) {
        flex-direction: row;
      }
      @media (width >= 64rem) {
        align-items: center;
      }
      @media (width >= 64rem) {
        gap: calc(var(--spacing) * 3);
      }
    }
    &.xl\:fi-ta-split {
      @media (width >= 80rem) {
        flex-direction: row;
      }
      @media (width >= 80rem) {
        align-items: center;
      }
      @media (width >= 80rem) {
        gap: calc(var(--spacing) * 3);
      }
    }
    &.\32xl\:fi-ta-split {
      @media (width >= 96rem) {
        flex-direction: row;
      }
      @media (width >= 96rem) {
        align-items: center;
      }
      @media (width >= 96rem) {
        gap: calc(var(--spacing) * 3);
      }
    }
  }
  .fi-ta-stack {
    display: flex;
    flex-direction: column;
    &.fi-align-start, &.fi-align-left {
      align-items: flex-start;
    }
    &.fi-align-center {
      align-items: center;
    }
    &.fi-align-end, &.fi-align-right {
      align-items: flex-end;
    }
    &.fi-gap-sm {
      :where(&) > :where(:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
        margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
    &.fi-gap-md {
      :where(&) > :where(:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
    &.fi-gap-lg {
      :where(&) > :where(:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .fi-ta-icon-count-summary {
    display: grid;
    row-gap: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding-inline: 0px;
      padding-block: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    & > .fi-ta-icon-count-summary-label {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & > ul {
      display: grid;
      row-gap: calc(var(--spacing) * 1.5);
      & > li {
        display: flex;
        align-items: center;
        column-gap: calc(var(--spacing) * 1.5);
        & > .fi-icon {
          color: var(--gray-400);
          &:where(.dark, .dark *) {
            color: var(--gray-500);
          }
          &.fi-color {
            color: var(--text);
            &:where(.dark, .dark *) {
              color: var(--dark-text);
            }
          }
        }
      }
    }
  }
  .fi-ta-range-summary {
    display: grid;
    row-gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding-inline: 0px;
      padding-block: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    & > .fi-ta-range-summary-label {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
  }
  .fi-ta-text-summary {
    display: grid;
    row-gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding-inline: 0px;
      padding-block: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    & > .fi-ta-text-summary-label {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
  }
  .fi-ta-values-summary {
    display: grid;
    row-gap: var(--spacing);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
    .fi-ta-table-stacked-on-mobile & {
      padding-inline: 0px;
      padding-block: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 3);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 4);
      }
    }
    & > .fi-ta-values-summary-label {
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & > ul {
      &.fi-bulleted {
        list-style-position: inside;
        list-style-type: disc;
      }
    }
  }
  .fi-ta-ctn {
    position: relative;
    display: flex;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:not(.fi-ta-ctn-with-header) {
      overflow: hidden;
    }
    &.fi-loading {
      animation: var(--animate-pulse);
    }
    & .fi-ta-header {
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing) * 3);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      padding: calc(var(--spacing) * 4);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &.fi-ta-header-adaptive-actions-position {
        @media (width >= 40rem) {
          flex-direction: row;
        }
        @media (width >= 40rem) {
          align-items: center;
        }
        & .fi-ta-actions {
          @media (width >= 40rem) {
            margin-inline-start: auto;
          }
        }
        &:not(:has(.fi-ta-header-heading)) {
          &:not(:has(.fi-ta-header-description)) {
            & .fi-ta-actions {
              margin-inline-start: auto;
            }
          }
        }
      }
      & .fi-ta-actions {
        &:has(.fi-btn.fi-size-xs:not(.fi-dropdown-panel *)) {
          @media (width >= 40rem) {
            margin-block: calc(var(--spacing) * -0.5);
          }
        }
        &:has(.fi-btn.fi-size-sm:not(.fi-dropdown-panel *)) {
          @media (width >= 40rem) {
            margin-block: calc(var(--spacing) * -1);
          }
        }
        &:has(.fi-btn.fi-size-md:not(.fi-dropdown-panel *)) {
          @media (width >= 40rem) {
            margin-block: calc(var(--spacing) * -1.5);
          }
        }
        &:has(.fi-btn.fi-size-lg:not(.fi-dropdown-panel *)) {
          @media (width >= 40rem) {
            margin-block: calc(var(--spacing) * -2);
          }
        }
        &:has(.fi-btn.fi-size-xl:not(.fi-dropdown-panel *)) {
          @media (width >= 40rem) {
            margin-block: calc(var(--spacing) * -2.5);
          }
        }
      }
      & .fi-ta-header-heading {
        font-size: var(--text-base);
        line-height: var(--tw-leading, var(--text-base--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold);
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
      & .fi-ta-header-description {
        margin-top: var(--spacing);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        color: var(--gray-600);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
    }
    & .fi-ta-header-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--spacing) * 4);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 3);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & > * {
        display: flex;
        min-height: calc(var(--spacing) * 9);
        align-items: center;
        column-gap: calc(var(--spacing) * 4);
      }
      & > :nth-child(1) {
        flex-shrink: 0;
      }
      & > :nth-child(2) {
        margin-inline-start: auto;
      }
      & .fi-ta-grouping-settings {
        & .fi-dropdown {
          &.sm\:fi-hidden {
            @media (width >= 40rem) {
              display: none;
            }
          }
          & .fi-ta-grouping-settings-fields {
            display: grid;
            row-gap: calc(var(--spacing) * 6);
            padding: calc(var(--spacing) * 6);
            & label {
              display: grid;
              row-gap: calc(var(--spacing) * 2);
              font-size: var(--text-sm);
              line-height: var(--tw-leading, var(--text-sm--line-height));
              --tw-leading: calc(var(--spacing) * 6);
              line-height: calc(var(--spacing) * 6);
              --tw-font-weight: var(--font-weight-medium);
              font-weight: var(--font-weight-medium);
              color: var(--gray-950);
              &:where(.dark, .dark *) {
                color: var(--color-white);
              }
            }
          }
        }
        & > .fi-ta-grouping-settings-fields {
          display: none;
          align-items: center;
          column-gap: calc(var(--spacing) * 3);
          @media (width >= 40rem) {
            display: flex;
          }
        }
      }
      & .fi-ta-filters-dropdown {
        & .fi-ta-filters {
          padding: calc(var(--spacing) * 6);
        }
      }
      & .fi-ta-col-manager-dropdown {
        & .fi-ta-col-manager {
          padding: calc(var(--spacing) * 6);
        }
      }
    }
    & .fi-ta-filters {
      display: grid;
      row-gap: calc(var(--spacing) * 4);
      &.fi-ta-filters-below-content {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
        border-color: var(--gray-200);
        padding: calc(var(--spacing) * 4);
        @media (width >= 40rem) {
          padding-inline: calc(var(--spacing) * 6);
        }
        &:where(.dark, .dark *) {
          border-color: color-mix(in srgb, #fff 10%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
          }
        }
      }
      & .fi-ta-filters-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        & .fi-ta-filters-heading {
          font-size: var(--text-base);
          line-height: var(--tw-leading, var(--text-base--line-height));
          --tw-leading: calc(var(--spacing) * 6);
          line-height: calc(var(--spacing) * 6);
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
          color: var(--gray-950);
          &:where(.dark, .dark *) {
            color: var(--color-white);
          }
        }
        & .fi-loading-indicator {
          color: var(--gray-400);
          &:where(.dark, .dark *) {
            color: var(--gray-500);
          }
        }
      }
      & .fi-ta-filters-actions-ctn {
        display: flex;
        gap: calc(var(--spacing) * 3);
      }
    }
    & .fi-ta-filters-above-content-ctn {
      display: grid;
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 4);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & .fi-ta-filters-trigger-action-ctn {
        margin-inline-start: auto;
      }
      &.fi-open {
        & .fi-ta-filters-trigger-action-ctn {
          margin-top: calc(var(--spacing) * 3);
        }
        &:has(.fi-ta-filters-actions-ctn) {
          & .fi-ta-filters-trigger-action-ctn {
            margin-top: calc(var(--spacing) * -7);
          }
        }
      }
    }
    & .fi-ta-reorder-indicator {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 3);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      background-color: var(--gray-50);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1.5);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-700);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--gray-200);
      }
      & .fi-loading-indicator {
        color: var(--gray-400);
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
      }
    }
    & .fi-ta-selection-indicator {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      row-gap: var(--spacing);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      background-color: var(--gray-50);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      @media (width >= 40rem) {
        flex-direction: row;
      }
      @media (width >= 40rem) {
        align-items: center;
      }
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      @media (width >= 40rem) {
        padding-block: calc(var(--spacing) * 1.5);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      & .fi-loading-indicator {
        color: var(--gray-400);
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
      }
      & .fi-ta-selection-indicator-actions-ctn {
        display: flex;
        column-gap: calc(var(--spacing) * 3);
      }
      & > * {
        display: flex;
        column-gap: calc(var(--spacing) * 3);
      }
      & > :nth-child(1) {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-leading: calc(var(--spacing) * 6);
        line-height: calc(var(--spacing) * 6);
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--gray-700);
        &:where(.dark, .dark *) {
          color: var(--gray-200);
        }
      }
      & > :nth-child(2) {
        margin-inline-start: auto;
      }
    }
    & .fi-ta-filter-indicators {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      column-gap: calc(var(--spacing) * 3);
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
      border-color: var(--gray-200);
      background-color: var(--gray-50);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 1.5);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      & > :nth-child(1) {
        display: flex;
        flex-direction: column;
        column-gap: calc(var(--spacing) * 3);
        row-gap: var(--spacing);
        @media (width >= 40rem) {
          flex-direction: row;
        }
        & .fi-ta-filter-indicators-label {
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          --tw-leading: calc(var(--spacing) * 6);
          line-height: calc(var(--spacing) * 6);
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
          white-space: nowrap;
          color: var(--gray-700);
          &:where(.dark, .dark *) {
            color: var(--gray-200);
          }
        }
        & .fi-ta-filter-indicators-badges-ctn {
          display: flex;
          flex-wrap: wrap;
          gap: calc(var(--spacing) * 1.5);
        }
      }
      & > :nth-child(2).fi-icon-btn {
        margin-top: calc(var(--spacing) * -1);
      }
    }
    & .fi-pagination {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-200);
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 3);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-ta-table-loading-ctn {
      display: flex;
      height: calc(var(--spacing) * 32);
      align-items: center;
      justify-content: center;
    }
    & .fi-ta-main {
      min-width: 0px;
      flex: 1;
    }
    & .fi-ta-filters-trigger-action-ctn.lg\:fi-hidden {
      @media (width >= 64rem) {
        display: none;
      }
    }
    & .fi-ta-filters-before-content-ctn, & .fi-ta-filters-after-content-ctn {
      position: absolute;
      z-index: 20;
      display: none;
      width: 100vw;
      max-width: 14rem !important;
      flex-shrink: 0;
      border-radius: var(--radius-lg);
      border-color: var(--gray-200);
      background-color: var(--color-white);
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      @media (width >= 64rem) {
        position: static;
      }
      @media (width >= 64rem) {
        z-index: auto;
      }
      @media (width >= 64rem) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      @media (width >= 64rem) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        background-color: var(--gray-900);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
      & .fi-ta-filters {
        padding: calc(var(--spacing) * 6);
        @media (width >= 64rem) {
          padding-block: calc(var(--spacing) * 4);
        }
      }
      &.fi-open {
        display: block;
      }
      &.lg\:fi-open {
        @media (width >= 64rem) {
          display: block;
        }
      }
      &.fi-opacity-0 {
        opacity: 0%;
      }
      &.fi-width-3xs {
        max-width: var(--container-3xs) !important;
      }
      &.fi-width-2xs {
        max-width: var(--container-2xs) !important;
      }
      &.fi-width-xs {
        max-width: var(--container-xs) !important;
      }
      &.fi-width-sm {
        max-width: var(--container-sm) !important;
      }
      &.fi-width-md {
        max-width: var(--container-md) !important;
      }
      &.fi-width-lg {
        max-width: var(--container-lg) !important;
      }
      &.fi-width-xl {
        max-width: var(--container-xl) !important;
      }
      &.fi-width-2xl {
        max-width: var(--container-2xl) !important;
      }
      &.fi-width-3xl {
        max-width: var(--container-3xl) !important;
      }
      &.fi-width-4xl {
        max-width: var(--container-4xl) !important;
      }
      &.fi-width-5xl {
        max-width: var(--container-5xl) !important;
      }
      &.fi-width-6xl {
        max-width: var(--container-6xl) !important;
      }
      &.fi-width-7xl {
        max-width: var(--container-7xl) !important;
      }
      &.fi-width-none {
        max-width: none !important;
      }
      &.fi-width-container {
        width: 100% !important;
        @media (width >= 40rem) {
          max-width: 40rem !important;
        }
        @media (width >= 48rem) {
          max-width: 48rem !important;
        }
        @media (width >= 64rem) {
          max-width: 64rem !important;
        }
        @media (width >= 80rem) {
          max-width: 80rem !important;
        }
        @media (width >= 96rem) {
          max-width: 96rem !important;
        }
      }
    }
    & .fi-ta-filters-before-content-ctn {
      inset-inline-start: calc(var(--spacing) * 0);
      @media (width >= 64rem) {
        border-start-start-radius: var(--radius-xl);
        border-end-start-radius: var(--radius-xl);
      }
      @media (width >= 64rem) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
      }
      @media (width >= 64rem) {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
      }
    }
    & .fi-ta-filters-after-content-ctn {
      inset-inline-end: calc(var(--spacing) * 0);
      @media (width >= 64rem) {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
      }
      @media (width >= 64rem) {
        border-start-end-radius: var(--radius-xl);
        border-end-end-radius: var(--radius-xl);
      }
      @media (width >= 64rem) {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
      }
    }
  }
  .fi-ta-content-ctn {
    position: relative;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    overflow-x: auto;
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      border-top-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-top-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & .fi-ta-content-header {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 4);
      column-gap: calc(var(--spacing) * 6);
      background-color: var(--gray-50);
      padding-inline: calc(var(--spacing) * 4);
      @media (width >= 40rem) {
        padding-inline: calc(var(--spacing) * 6);
      }
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      & .fi-ta-page-checkbox {
        margin-block: calc(var(--spacing) * 4);
        flex-shrink: 0;
      }
      & .fi-ta-sorting-settings {
        display: flex;
        column-gap: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 3);
      }
    }
    &:not(.fi-ta-ctn-with-footer .fi-ta-content-ctn) {
      border-bottom-right-radius: var(--radius-xl);
      border-bottom-left-radius: var(--radius-xl);
    }
    &:not(.fi-ta-ctn-with-header .fi-ta-content-ctn) {
      border-top-style: var(--tw-border-style);
      border-top-width: 0px;
    }
    & .fi-ta-content {
      display: grid;
      &.fi-ta-content-grid {
        gap: calc(var(--spacing) * 4);
        padding: calc(var(--spacing) * 4);
        @media (width >= 40rem) {
          padding-inline: calc(var(--spacing) * 6);
        }
        &.fi-ta-content-grouped {
          padding-top: 0px;
        }
        & .fi-ta-group-header {
          margin-inline: calc(var(--spacing) * -4);
          border-block-style: var(--tw-border-style);
          border-block-width: 1px;
          border-color: var(--gray-200);
          &:first-child {
            border-top-style: var(--tw-border-style);
            border-top-width: 0px;
          }
          @media (width >= 40rem) {
            margin-inline: calc(var(--spacing) * -6);
          }
          &:where(.dark, .dark *) {
            border-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
          width: calc(100% + 2rem);
          @media (width >= 40rem) {
            width: calc(100% + 3rem);
          }
        }
        & .fi-ta-record {
          border-radius: var(--radius-xl);
          --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
          --tw-ring-color: var(--gray-950);
          @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
          }
          &:where(.dark, .dark *) {
            background-color: color-mix(in srgb, #fff 5%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
            }
          }
          &:where(.dark, .dark *) {
            --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
            }
          }
          &.fi-clickable {
            &:where(.dark, .dark *) {
              &:hover {
                @media (hover: hover) {
                  background-color: color-mix(in srgb, #fff 10%, transparent);
                  @supports (color: color-mix(in lab, red, red)) {
                    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
                  }
                }
              }
            }
            &:where(.dark, .dark *) {
              &:hover {
                @media (hover: hover) {
                  --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
                  @supports (color: color-mix(in lab, red, red)) {
                    --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
                  }
                }
              }
            }
          }
          &.fi-selected {
            &:where(.dark, .dark *) {
              background-color: color-mix(in srgb, #fff 10%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              --tw-ring-color: color-mix(in srgb, #fff 20%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
              }
            }
          }
          &:not(.fi-selected) {
            background-color: var(--color-white);
            &:where(.dark, .dark *) {
              background-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
              }
            }
          }
          &.fi-ta-record-with-content-prefix {
            & .fi-ta-record-content {
              padding-inline-start: calc(var(--spacing) * 2);
            }
            & .fi-ta-actions {
              padding-inline-start: calc(var(--spacing) * 2);
            }
          }
          &.fi-ta-record-with-content-suffix {
            & .fi-ta-record-content {
              padding-inline-end: calc(var(--spacing) * 2);
            }
            & .fi-ta-actions {
              padding-inline-end: calc(var(--spacing) * 2);
            }
          }
        }
      }
      &:not(.fi-ta-content-grid) {
        :where(&) > :where(:not(:last-child)) {
          --tw-divide-y-reverse: 0;
          border-bottom-style: var(--tw-border-style);
          border-top-style: var(--tw-border-style);
          border-top-width: calc(1px * var(--tw-divide-y-reverse));
          border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
        }
        :where(&) > :where(:not(:last-child)) {
          border-color: var(--gray-200);
        }
        &:where(.dark, .dark *) {
          :where(&) > :where(:not(:last-child)) {
            border-color: color-mix(in srgb, #fff 10%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
            }
          }
        }
        & .fi-ta-record {
          &.fi-clickable {
            &:where(.dark, .dark *) {
              &:hover {
                @media (hover: hover) {
                  background-color: color-mix(in srgb, #fff 5%, transparent);
                  @supports (color: color-mix(in lab, red, red)) {
                    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
                  }
                }
              }
            }
          }
          &.fi-selected {
            &::before {
              content: var(--tw-content);
              position: absolute;
            }
            &::before {
              content: var(--tw-content);
              inset-block: 0px;
            }
            &::before {
              content: var(--tw-content);
              inset-inline-start: calc(var(--spacing) * 0);
            }
            &::before {
              content: var(--tw-content);
              width: calc(var(--spacing) * 0.5);
            }
            &::before {
              content: var(--tw-content);
              background-color: var(--primary-600);
            }
            &:where(.dark, .dark *) {
              background-color: color-mix(in srgb, #fff 5%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
              }
            }
            &:where(.dark, .dark *) {
              &::before {
                content: var(--tw-content);
                background-color: var(--primary-500);
              }
            }
          }
          & .fi-ta-record-content-ctn {
            @media (width >= 48rem) {
              flex-direction: row;
            }
            @media (width >= 48rem) {
              align-items: center;
            }
          }
          &:not(.fi-ta-record-with-content-prefix) {
            & .fi-ta-record-content {
              @media (width >= 40rem) {
                padding-inline-start: calc(var(--spacing) * 6);
              }
            }
            & .fi-ta-actions {
              @media (width >= 40rem) {
                padding-inline-start: calc(var(--spacing) * 6);
              }
            }
          }
          &:not(.fi-ta-record-with-content-suffix) {
            & .fi-ta-record-content {
              @media (width >= 40rem) {
                padding-inline-end: calc(var(--spacing) * 6);
              }
            }
            & .fi-ta-actions {
              @media (width >= 40rem) {
                padding-inline-end: calc(var(--spacing) * 6);
              }
            }
          }
          &.fi-ta-record-with-content-prefix {
            @media (width >= 40rem) {
              padding-inline-start: calc(var(--spacing) * 3);
            }
            & .fi-ta-record-content {
              padding-inline-start: calc(var(--spacing) * 3);
            }
            & .fi-ta-actions {
              padding-inline-start: calc(var(--spacing) * 3);
            }
          }
          &.fi-ta-record-with-content-suffix {
            @media (width >= 40rem) {
              padding-inline-end: calc(var(--spacing) * 3);
            }
            & .fi-ta-record-content {
              padding-inline-end: calc(var(--spacing) * 3);
            }
            & .fi-ta-actions {
              padding-inline-end: calc(var(--spacing) * 3);
            }
          }
          & .fi-ta-actions {
            @media (width >= 48rem) {
              padding-inline-start: calc(var(--spacing) * 3);
            }
          }
        }
      }
      & .fi-ta-group-header {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        align-items: center;
        column-gap: calc(var(--spacing) * 3);
        background-color: var(--gray-50);
        padding-inline: var(--spacing);
        padding-block: calc(var(--spacing) * 2);
        @media (width >= 40rem) {
          padding-inline: calc(var(--spacing) * 3);
        }
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
        &.fi-collapsible {
          cursor: pointer;
          &.fi-collapsed {
            & .fi-icon-btn {
              rotate: calc(180deg * -1);
            }
          }
        }
        & .fi-ta-group-heading {
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          --tw-font-weight: var(--font-weight-medium);
          font-weight: var(--font-weight-medium);
          color: var(--gray-950);
          &:where(.dark, .dark *) {
            color: var(--color-white);
          }
        }
        & .fi-ta-group-description {
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          color: var(--gray-500);
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
        & .fi-ta-group-checkbox {
          margin-inline: calc(var(--spacing) * 3);
        }
      }
      & .fi-ta-table {
        grid-column: 1 / -1;
      }
      & .fi-ta-record {
        position: relative;
        display: flex;
        height: 100%;
        align-items: center;
        background-color: var(--color-white);
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
        --tw-duration: 75ms;
        transition-duration: 75ms;
        &:where(.dark, .dark *) {
          background-color: var(--gray-900);
        }
        &.fi-ta-record-with-content-prefix {
          padding-inline-start: var(--spacing);
        }
        &.fi-ta-record-with-content-suffix {
          padding-inline-end: var(--spacing);
        }
        &.fi-clickable {
          &:hover {
            @media (hover: hover) {
              background-color: var(--gray-50);
            }
          }
        }
        &.fi-collapsed {
          display: none;
        }
        &.fi-selected {
          background-color: var(--gray-50);
        }
        & .fi-ta-reorder-handle {
          margin-inline: var(--spacing);
          margin-block: calc(var(--spacing) * 2);
        }
        & .fi-ta-record-checkbox {
          margin-inline: calc(var(--spacing) * 3);
          margin-block: calc(var(--spacing) * 4);
          flex-shrink: 0;
        }
        & .fi-ta-record-content-ctn {
          display: flex;
          height: 100%;
          width: 100%;
          flex-direction: column;
          row-gap: calc(var(--spacing) * 3);
          padding-block: calc(var(--spacing) * 4);
          & > :nth-child(1) {
            flex: 1;
          }
          & .fi-ta-record-content {
            display: block;
            width: 100%;
            & .fi-ta-col {
              display: flex;
              justify-content: flex-start;
              text-align: start;
              &:disabled {
                pointer-events: none;
              }
              &.fi-growable {
                width: 100%;
              }
              &.fi-align-center {
                justify-content: center;
                text-align: center;
              }
              &.fi-align-end {
                justify-content: flex-end;
                text-align: end;
              }
              &.fi-align-left {
                justify-content: flex-start;
                text-align: left;
              }
              &.fi-align-right {
                justify-content: flex-end;
                text-align: right;
              }
              &.fi-align-justify, &.fi-align-between {
                justify-content: space-between;
                text-align: justify;
              }
            }
            &.fi-collapsible {
              margin-top: calc(var(--spacing) * 3);
            }
            & .fi-growable {
              width: 100%;
              flex: 1;
            }
            & .sm\:fi-hidden {
              @media (width >= 40rem) {
                display: none;
              }
            }
            & .md\:fi-hidden {
              @media (width >= 48rem) {
                display: none;
              }
            }
            & .lg\:fi-hidden {
              @media (width >= 64rem) {
                display: none;
              }
            }
            & .xl\:fi-hidden {
              @media (width >= 80rem) {
                display: none;
              }
            }
            & .\32xl\:fi-hidden {
              @media (width >= 96rem) {
                display: none;
              }
            }
            & .sm\:fi-visible {
              display: none;
              @media (width >= 40rem) {
                display: block;
              }
            }
            & .md\:fi-visible {
              display: none;
              @media (width >= 48rem) {
                display: block;
              }
            }
            & .lg\:fi-visible {
              display: none;
              @media (width >= 64rem) {
                display: block;
              }
            }
            & .xl\:fi-visible {
              display: none;
              @media (width >= 80rem) {
                display: block;
              }
            }
            & .\32xl\:fi-visible {
              display: none;
              @media (width >= 96rem) {
                display: block;
              }
            }
          }
        }
        & .fi-ta-record-collapse-btn {
          margin-inline: var(--spacing);
          margin-block: calc(var(--spacing) * 2);
          flex-shrink: 0;
        }
        & .fi-ta-actions {
          &.fi-ta-actions-before-columns-position {
            order: -9999;
          }
        }
        &:not(.fi-ta-record-with-content-prefix) {
          & .fi-ta-record-content {
            padding-inline-start: calc(var(--spacing) * 4);
          }
          & .fi-ta-actions {
            padding-inline-start: calc(var(--spacing) * 4);
          }
        }
        &:not(.fi-ta-record-with-content-suffix) {
          & .fi-ta-record-content {
            padding-inline-end: calc(var(--spacing) * 4);
          }
          & .fi-ta-actions {
            padding-inline-end: calc(var(--spacing) * 4);
          }
        }
        &.fi-ta-record-collapsed {
          & .fi-ta-record-collapse-btn {
            rotate: 180deg;
          }
        }
      }
    }
  }
  .fi-ta-empty-state {
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    &:not(.fi-ta-ctn-with-content-layout .fi-ta-empty-state) {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
      border-color: var(--gray-200);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    & .fi-ta-empty-state-content {
      margin-inline: auto;
      display: grid;
      max-width: var(--container-lg);
      justify-items: center;
      text-align: center;
    }
    & .fi-ta-empty-state-icon-bg {
      margin-bottom: calc(var(--spacing) * 4);
      border-radius: calc(infinity * 1px);
      background-color: var(--gray-100);
      padding: calc(var(--spacing) * 3);
      &:where(.dark, .dark *) {
        background-color: var(--gray-500);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--gray-500) 20%, transparent);
        }
      }
      & .fi-icon {
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
    }
    & .fi-ta-empty-state-heading {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-ta-empty-state-description {
      margin-top: var(--spacing);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-ta-actions {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .fi-ta-header-cell {
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 3.5);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    @media (width >= 40rem) {
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 6);
      }
    }
    @media (width >= 40rem) {
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 6);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &.fi-growable {
      width: 100%;
    }
    &.fi-grouped {
      border-color: var(--gray-200);
      &:where(.dark, .dark *) {
        border-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:not(:first-of-type) {
        border-inline-start-style: var(--tw-border-style);
        border-inline-start-width: 1px;
      }
      &:not(:last-of-type) {
        border-inline-end-style: var(--tw-border-style);
        border-inline-end-width: 1px;
      }
    }
    &.fi-align-center {
      text-align: center;
      & .fi-ta-header-cell-sort-btn {
        justify-content: center;
      }
    }
    &.fi-align-end {
      text-align: end;
      & .fi-ta-header-cell-sort-btn {
        justify-content: flex-end;
      }
    }
    &.fi-align-left {
      text-align: left;
      & .fi-ta-header-cell-sort-btn {
        justify-content: flex-start;
        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
          flex-direction: row-reverse;
        }
      }
    }
    &.fi-align-right {
      text-align: right;
      & .fi-ta-header-cell-sort-btn {
        justify-content: flex-end;
        &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
          flex-direction: row-reverse;
        }
      }
    }
    &.fi-align-justify, &.fi-align-between {
      text-align: justify;
      & .fi-ta-header-cell-sort-btn {
        justify-content: space-between;
      }
    }
    &.fi-ta-header-cell-sorted {
      & .fi-icon {
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
      }
    }
    &:not(.fi-ta-header-cell-sorted) {
      & .fi-icon {
        color: var(--gray-400);
        &:where(.dark, .dark *) {
          color: var(--gray-500);
        }
      }
      & .fi-ta-header-cell-sort-btn:hover {
        & .fi-icon {
          color: var(--gray-500);
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
      }
      & .fi-ta-header-cell-sort-btn:focus-visible {
        & .fi-icon {
          color: var(--gray-500);
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
      }
    }
    &.sm\:fi-hidden {
      @media (width >= 40rem) {
        display: none;
      }
    }
    &.md\:fi-hidden {
      @media (width >= 48rem) {
        display: none;
      }
    }
    &.lg\:fi-hidden {
      @media (width >= 64rem) {
        display: none;
      }
    }
    &.xl\:fi-hidden {
      @media (width >= 80rem) {
        display: none;
      }
    }
    &.\32xl\:fi-hidden {
      @media (width >= 96rem) {
        display: none;
      }
    }
    &.sm\:fi-visible {
      display: none;
      @media (width >= 40rem) {
        display: table-cell;
      }
    }
    &.md\:fi-visible {
      display: none;
      @media (width >= 48rem) {
        display: table-cell;
      }
    }
    &.lg\:fi-visible {
      display: none;
      @media (width >= 64rem) {
        display: table-cell;
      }
    }
    &.xl\:fi-visible {
      display: none;
      @media (width >= 80rem) {
        display: table-cell;
      }
    }
    &.\32xl\:fi-visible {
      display: none;
      @media (width >= 96rem) {
        display: table-cell;
      }
    }
    &.fi-wrapped {
      white-space: normal;
    }
    &:not(.fi-wrapped) {
      white-space: nowrap;
    }
    & .fi-ta-header-cell-sort-btn {
      display: flex;
      width: 100%;
      cursor: pointer;
      appearance: none;
      align-items: center;
      justify-content: flex-start;
      column-gap: var(--spacing);
      border-radius: var(--radius-md);
      border-style: var(--tw-border-style);
      border-width: 0px;
      background-color: transparent;
      padding: 0px;
      text-align: start;
      --tw-outline-style: none;
      outline-style: none;
      &:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:focus-visible {
        --tw-ring-color: var(--primary-600);
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          --tw-ring-color: var(--primary-500);
        }
      }
      text-transform: inherit;
    }
    & .fi-icon {
      flex-shrink: 0;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
    }
    & .fi-loading-indicator {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-ta-header-group-cell {
    border-color: var(--gray-200);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    @media (width >= 40rem) {
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 6);
      }
    }
    @media (width >= 40rem) {
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 6);
      }
    }
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &:not(:first-of-type) {
      border-inline-start-style: var(--tw-border-style);
      border-inline-start-width: 1px;
    }
    &:not(:last-of-type) {
      border-inline-end-style: var(--tw-border-style);
      border-inline-end-width: 1px;
    }
    &.fi-align-start {
      text-align: start;
    }
    &.fi-align-center {
      text-align: center;
    }
    &.fi-align-end {
      text-align: end;
    }
    &.fi-align-left {
      text-align: left;
    }
    &.fi-align-right {
      text-align: right;
    }
    &.fi-align-justify, &.fi-align-between {
      text-align: justify;
    }
    &.sm\:fi-hidden {
      @media (width >= 40rem) {
        display: none;
      }
    }
    &.md\:fi-hidden {
      @media (width >= 48rem) {
        display: none;
      }
    }
    &.lg\:fi-hidden {
      @media (width >= 64rem) {
        display: none;
      }
    }
    &.xl\:fi-hidden {
      @media (width >= 80rem) {
        display: none;
      }
    }
    &.\32xl\:fi-hidden {
      @media (width >= 96rem) {
        display: none;
      }
    }
    &.sm\:fi-visible {
      display: none;
      @media (width >= 40rem) {
        display: table-cell;
      }
    }
    &.md\:fi-visible {
      display: none;
      @media (width >= 48rem) {
        display: table-cell;
      }
    }
    &.lg\:fi-visible {
      display: none;
      @media (width >= 64rem) {
        display: table-cell;
      }
    }
    &.xl\:fi-visible {
      display: none;
      @media (width >= 80rem) {
        display: table-cell;
      }
    }
    &.\32xl\:fi-visible {
      display: none;
      @media (width >= 96rem) {
        display: table-cell;
      }
    }
    &.fi-wrapped {
      white-space: normal;
    }
    &:not(.fi-wrapped) {
      white-space: nowrap;
    }
  }
  .fi-ta-empty-header-cell {
    width: var(--spacing);
  }
  @media (hover:hover) {
    .fi-ta-row {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
    }
  }
  @media (hover: hover) {
    .fi-ta-row.fi-clickable:hover {
      background-color: var(--gray-50);
    }
    .fi-ta-row.fi-clickable:where(.dark, .dark *):hover {
      background-color: color-mix(in srgb, #fff 5%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .fi-ta-row.fi-clickable:where(.dark, .dark *):hover {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .fi-ta-row.fi-striped {
    background-color: var(--gray-50);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .fi-ta-row.fi-collapsed {
    display: none;
  }
  .fi-ta-row.fi-ta-group-header-row > td {
    background-color: var(--gray-50);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .fi-ta-row .fi-ta-group-header-cell {
    padding-inline: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      &:first-of-type {
        padding-inline-start: calc(var(--spacing) * 6);
      }
    }
    @media (width >= 40rem) {
      &:last-of-type {
        padding-inline-end: calc(var(--spacing) * 6);
      }
    }
  }
  .fi-ta-row .fi-ta-group-header {
    display: flex;
    width: 100%;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    &.fi-collapsible {
      cursor: pointer;
      &.fi-collapsed {
        & .fi-icon-btn {
          rotate: calc(180deg * -1);
        }
      }
    }
    & .fi-ta-group-heading {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-ta-group-description {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
  }
  .fi-ta-row.fi-selected:not(.fi-striped) {
    background-color: var(--gray-50);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .fi-ta-row.fi-selected > :first-child {
    --tw-inset-shadow: inset 2px 0 0 0 var(--tw-inset-shadow-color, var(--primary-600));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      --tw-inset-shadow: inset -2px 0 0 0 var(--tw-inset-shadow-color, var(--primary-600));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:where(.dark, .dark *) {
      --tw-inset-shadow: inset 2px 0 0 0 var(--tw-inset-shadow-color, var(--primary-500));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-inset-shadow: inset -2px 0 0 0 var(--tw-inset-shadow-color, var(--primary-500));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .fi-ta-reordering .fi-ta-row:not(.fi-ta-row-not-reorderable) {
    cursor: move;
  }
  .fi-ta-table {
    width: 100%;
    table-layout: auto;
    :where(&) > :where(:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
    :where(&) > :where(:not(:last-child)) {
      border-color: var(--gray-200);
    }
    text-align: start;
    &:where(.dark, .dark *) {
      :where(&) > :where(:not(:last-child)) {
        border-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &.fi-ta-table-stacked-on-mobile {
      display: block;
      @media (width >= 40rem) {
        display: table;
      }
      @media (width >= 40rem) {
        table-layout: auto;
      }
      & > thead {
        display: block;
        @media (width >= 40rem) {
          display: table-header-group;
        }
        &:not(:has(.fi-ta-table-stacked-header-row)) {
          display: none;
          @media (width >= 40rem) {
            display: table-header-group;
          }
        }
        & > tr:not(.fi-ta-table-stacked-header-row) {
          display: none;
          @media (width >= 40rem) {
            display: table-row;
          }
        }
        & > tr > .fi-ta-header-cell {
          @media (width < 40rem) {
            display: none;
          }
        }
        & > tr > .fi-ta-selection-cell {
          display: none;
          @media (width >= 40rem) {
            display: table-cell;
          }
        }
      }
      & > tbody {
        display: block;
        white-space: normal;
        @media (width >= 40rem) {
          display: table-row-group;
        }
        @media (width >= 40rem) {
          white-space: nowrap;
        }
      }
      & > tbody > tr {
        position: relative;
        display: block;
        padding-block: calc(var(--spacing) * 2);
        @media (width >= 40rem) {
          position: static;
        }
        @media (width >= 40rem) {
          display: table-row;
        }
        @media (width >= 40rem) {
          padding-block: 0px;
        }
        &.fi-collapsed {
          display: none;
        }
        &.fi-selected {
          &::before {
            position: absolute;
            inset-block: 0px;
            inset-inline-start: calc(var(--spacing) * 0);
            width: calc(var(--spacing) * 0.5);
            background-color: var(--primary-600);
            @media (width >= 40rem) {
              display: none;
            }
            content: '';
          }
          &:where(.dark, .dark *) {
            &::before {
              background-color: var(--primary-500);
            }
          }
          & > *:first-child {
            @media (width < 40rem) {
              --tw-inset-shadow: inset 0 0 #0000;
              box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            }
          }
        }
        &.fi-ta-group-header-row {
          padding-block: 0px;
          &.fi-ta-group-header-row-with-selection {
            display: grid;
            grid-template-columns: 1fr auto;
            @media (width >= 40rem) {
              display: table-row;
            }
          }
          & > td {
            display: block;
            width: 100%;
            @media (width >= 40rem) {
              display: table-cell;
            }
            @media (width >= 40rem) {
              width: auto;
            }
          }
          & > td:empty {
            display: none;
            @media (width >= 40rem) {
              display: table-cell;
            }
          }
          & > .fi-ta-group-selection-cell {
            order: 9999;
            display: flex !important;
            width: auto;
            align-items: center;
            padding-inline: calc(var(--spacing) * 4);
            @media (width >= 40rem) {
              display: table-cell !important;
            }
            @media (width >= 40rem) {
              width: var(--spacing);
            }
            @media (width >= 40rem) {
              padding-inline: calc(var(--spacing) * 3);
            }
          }
        }
        &.fi-ta-summary-row {
          padding-block: 0px;
        }
        &.fi-ta-summary-header-row {
          display: none;
          @media (width >= 40rem) {
            display: table-row;
          }
        }
      }
      & > tbody > tr > .fi-ta-selection-cell {
        position: absolute;
        inset-inline-end: calc(var(--spacing) * 4);
        top: 0px;
        padding-inline-end: calc(var(--spacing) * 4);
        @media (width >= 40rem) {
          position: static;
        }
        @media (width >= 40rem) {
          display: table-cell;
        }
        @media (width >= 40rem) {
          width: var(--spacing);
        }
        @media (width >= 40rem) {
          padding-inline: calc(var(--spacing) * 3);
        }
        @media (width >= 40rem) {
          padding-block: calc(var(--spacing) * 4);
        }
        @media (width >= 40rem) {
          &:first-of-type {
            padding-inline-start: calc(var(--spacing) * 6);
          }
        }
        @media (width >= 40rem) {
          &:last-of-type {
            padding-inline-end: calc(var(--spacing) * 6);
          }
        }
      }
      & > tfoot {
        @media (width < 40rem) {
          display: block;
        }
        & > tr {
          @media (width < 40rem) {
            display: block;
          }
        }
      }
      & > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        display: block;
        padding-inline: calc(var(--spacing) * 4);
        @media (width >= 40rem) {
          display: table-cell;
        }
        @media (width >= 40rem) {
          padding-inline: 0px;
        }
        @media (width >= 40rem) {
          &:first-child {
            padding-inline-start: calc(var(--spacing) * 3);
          }
          &:last-child {
            padding-inline-end: calc(var(--spacing) * 3);
          }
        }
        &.fi-ta-summary-row-heading-cell {
          padding-bottom: 0px;
          @media (width >= 40rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @media (width >= 40rem) {
            padding-block: calc(var(--spacing) * 4);
          }
          @media (width >= 40rem) {
            &:first-child {
              padding-inline-start: calc(var(--spacing) * 6);
            }
          }
          @media (width >= 40rem) {
            &:last-child {
              padding-inline-end: calc(var(--spacing) * 6);
            }
          }
        }
        &.fi-ta-summary-header-cell {
          @media (width >= 40rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @media (width >= 40rem) {
            &:first-child {
              padding-inline-start: calc(var(--spacing) * 6);
            }
          }
        }
        &.fi-ta-individual-search-cell {
          @media (width >= 40rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
        }
        &.fi-ta-group-selection-cell, &:has(.fi-ta-reorder-handle) {
          @media (width >= 40rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @media (width >= 40rem) {
            &:first-of-type {
              padding-inline-start: calc(var(--spacing) * 6);
            }
          }
          @media (width >= 40rem) {
            &:last-of-type {
              padding-inline-end: calc(var(--spacing) * 6);
            }
          }
        }
        &.sm\:fi-hidden {
          @media (width >= 40rem) {
            display: none;
          }
        }
        &.md\:fi-hidden {
          @media (width >= 48rem) {
            display: none;
          }
        }
        &.lg\:fi-hidden {
          @media (width >= 64rem) {
            display: none;
          }
        }
        &.xl\:fi-hidden {
          @media (width >= 80rem) {
            display: none;
          }
        }
        &.\32xl\:fi-hidden {
          @media (width >= 96rem) {
            display: none;
          }
        }
        &.sm\:fi-visible {
          display: none;
          @media (width >= 40rem) {
            display: table-cell;
          }
        }
        &.md\:fi-visible {
          display: none;
          @media (width >= 48rem) {
            display: table-cell;
          }
        }
        &.lg\:fi-visible {
          display: none;
          @media (width >= 64rem) {
            display: table-cell;
          }
        }
        &.xl\:fi-visible {
          display: none;
          @media (width >= 80rem) {
            display: table-cell;
          }
        }
        &.\32xl\:fi-visible {
          display: none;
          @media (width >= 96rem) {
            display: table-cell;
          }
        }
        &.fi-ta-summary-row-heading-cell-responsive {
          @media (width < 40rem) {
            display: block !important;
          }
        }
        & > .fi-ta-cell-label {
          padding-top: calc(var(--spacing) * 2);
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          --tw-leading: calc(var(--spacing) * 6);
          line-height: calc(var(--spacing) * 6);
          --tw-font-weight: var(--font-weight-semibold);
          font-weight: var(--font-weight-semibold);
          color: var(--gray-500);
          @media (width >= 40rem) {
            display: none;
          }
          &:where(.dark, .dark *) {
            color: var(--gray-400);
          }
        }
        & > .fi-ta-cell-content {
          font-size: var(--text-sm);
          line-height: var(--tw-leading, var(--text-sm--line-height));
          overflow-wrap: break-word;
          color: var(--gray-800);
          @media (width >= 40rem) {
            display: block;
          }
          &:where(.dark, .dark *) {
            color: var(--gray-200);
          }
        }
        &:has(.fi-ta-actions) {
          padding-block: calc(var(--spacing) * 2);
          @media (width >= 40rem) {
            padding-inline: calc(var(--spacing) * 3);
          }
          @media (width >= 40rem) {
            padding-block: calc(var(--spacing) * 4);
          }
          @media (width >= 40rem) {
            &:first-of-type {
              padding-inline-start: calc(var(--spacing) * 6);
            }
            &:last-of-type {
              padding-inline-end: calc(var(--spacing) * 6);
            }
          }
          & > .fi-ta-actions {
            width: 100%;
            flex-wrap: wrap;
            justify-content: flex-start;
            column-gap: calc(var(--spacing) * 3);
            row-gap: calc(var(--spacing) * 2);
            @media (width >= 40rem) {
              width: auto;
            }
            @media (width >= 40rem) {
              flex-wrap: nowrap;
            }
            @media (width >= 40rem) {
              justify-content: flex-end;
            }
            @media (width >= 40rem) {
              gap: calc(var(--spacing) * 3);
            }
          }
        }
      }
    }
    & > thead {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
      & > tr {
        background-color: var(--gray-50);
        &:where(.dark, .dark *) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
        &.fi-ta-table-head-groups-row {
          background-color: var(--gray-100);
          &:where(.dark, .dark *) {
            background-color: transparent;
          }
        }
      }
    }
    & > tbody {
      :where(&) > :where(:not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
      }
      :where(&) > :where(:not(:last-child)) {
        border-color: var(--gray-200);
      }
      white-space: nowrap;
      &:where(.dark, .dark *) {
        :where(&) > :where(:not(:last-child)) {
          border-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    & > tfoot {
      background-color: var(--gray-50);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  @media (width < 40rem) {
    :where(.fi-ta-table.fi-ta-table-stacked-on-mobile > tfoot > tr > td), :where(.fi-ta-table.fi-ta-table-stacked-on-mobile > tfoot > tr > th) {
      display: block;
      width: 100%;
    }
    .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='base'] {
      display: none;
    }
  }
  @media (width >= 40rem) {
    @media (width < 48rem) {
      .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='sm'] {
        display: none;
      }
    }
  }
  @media (width >= 48rem) {
    @media (width < 64rem) {
      .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='md'] {
        display: none;
      }
    }
  }
  @media (width >= 64rem) {
    @media (width < 80rem) {
      .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='lg'] {
        display: none;
      }
    }
  }
  @media (width >= 80rem) {
    @media (width < 96rem) {
      .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='xl'] {
        display: none;
      }
    }
  }
  @media (width >= 96rem) {
    .fi-ta-table .fi-ta-individual-search-row[data-search-hidden-at~='2xl'] {
      display: none;
    }
  }
  .fi-ta-summary-row-heading-fallback {
    display: none;
    min-height: calc(var(--spacing) * 9);
    padding-inline: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    & > span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border-width: 0;
    }
  }
  @media (width < 40rem) {
    .fi-ta-summary-row[data-summary-heading-hidden-at~='base'] > td:has( > .fi-ta-summary-row-heading-fallback) {
      vertical-align: top;
    }
    .fi-ta-summary-row[data-summary-heading-hidden-at~='base'] > td > .fi-ta-summary-row-heading-fallback {
      display: block;
      & > span[data-visible-at~='base'] {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        display: block;
        white-space: nowrap;
      }
    }
  }
  @media (width >= 40rem) {
    @media (width < 48rem) {
      .fi-ta-summary-row[data-summary-heading-hidden-at~='sm'] > td:has( > .fi-ta-summary-row-heading-fallback) {
        vertical-align: top;
      }
      .fi-ta-summary-row[data-summary-heading-hidden-at~='sm'] > td > .fi-ta-summary-row-heading-fallback {
        display: block;
        & > span[data-visible-at~='sm'] {
          position: static;
          width: auto;
          height: auto;
          padding: 0;
          margin: 0;
          overflow: visible;
          clip-path: none;
          white-space: normal;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }
  @media (width >= 48rem) {
    @media (width < 64rem) {
      .fi-ta-summary-row[data-summary-heading-hidden-at~='md'] > td:has( > .fi-ta-summary-row-heading-fallback) {
        vertical-align: top;
      }
      .fi-ta-summary-row[data-summary-heading-hidden-at~='md'] > td > .fi-ta-summary-row-heading-fallback {
        display: block;
        & > span[data-visible-at~='md'] {
          position: static;
          width: auto;
          height: auto;
          padding: 0;
          margin: 0;
          overflow: visible;
          clip-path: none;
          white-space: normal;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }
  @media (width >= 64rem) {
    @media (width < 80rem) {
      .fi-ta-summary-row[data-summary-heading-hidden-at~='lg'] > td:has( > .fi-ta-summary-row-heading-fallback) {
        vertical-align: top;
      }
      .fi-ta-summary-row[data-summary-heading-hidden-at~='lg'] > td > .fi-ta-summary-row-heading-fallback {
        display: block;
        & > span[data-visible-at~='lg'] {
          position: static;
          width: auto;
          height: auto;
          padding: 0;
          margin: 0;
          overflow: visible;
          clip-path: none;
          white-space: normal;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }
  @media (width >= 80rem) {
    @media (width < 96rem) {
      .fi-ta-summary-row[data-summary-heading-hidden-at~='xl'] > td:has( > .fi-ta-summary-row-heading-fallback) {
        vertical-align: top;
      }
      .fi-ta-summary-row[data-summary-heading-hidden-at~='xl'] > td > .fi-ta-summary-row-heading-fallback {
        display: block;
        & > span[data-visible-at~='xl'] {
          position: static;
          width: auto;
          height: auto;
          padding: 0;
          margin: 0;
          overflow: visible;
          clip-path: none;
          white-space: normal;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }
  @media (width >= 96rem) {
    .fi-ta-summary-row[data-summary-heading-hidden-at~='2xl'] > td:has( > .fi-ta-summary-row-heading-fallback) {
      vertical-align: top;
    }
    .fi-ta-summary-row[data-summary-heading-hidden-at~='2xl'] > td > .fi-ta-summary-row-heading-fallback {
      display: block;
      & > span[data-visible-at~='2xl'] {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
        display: block;
        white-space: nowrap;
      }
    }
  }
  .fi-ta-table-stacked-header-row {
    display: block;
    width: 100%;
    border-block-style: var(--tw-border-style);
    border-block-width: 0px;
    @media (width >= 40rem) {
      display: none;
    }
    & .fi-ta-table-stacked-header-cell {
      display: flex;
      width: 100%;
      align-items: center;
      gap: calc(var(--spacing) * 4);
      background-color: var(--gray-50);
      padding-inline: calc(var(--spacing) * 4);
      padding-block: calc(var(--spacing) * 3);
      --tw-font-weight: var(--font-weight-normal);
      font-weight: var(--font-weight-normal);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      & .fi-ta-page-checkbox {
        margin-inline-start: auto;
        flex-shrink: 0;
      }
      & .fi-ta-table-stacked-sorting {
        display: flex;
        flex: 1;
        column-gap: calc(var(--spacing) * 3);
      }
    }
  }
  .fi-ta-col-manager {
    display: grid;
    gap: calc(var(--spacing) * 4);
    & .fi-ta-col-manager-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    & .fi-ta-col-manager-heading {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      --tw-leading: calc(var(--spacing) * 6);
      line-height: calc(var(--spacing) * 6);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-ta-col-manager-items {
      margin-top: calc(var(--spacing) * -6);
      column-gap: calc(var(--spacing) * 6);
    }
    & .fi-ta-col-manager-item {
      display: flex;
      break-inside: avoid;
      align-items: center;
      gap: calc(var(--spacing) * 3);
      padding-top: calc(var(--spacing) * 6);
      & .fi-ta-col-manager-label {
        display: flex;
        width: 100%;
        flex: 1;
        align-items: center;
        column-gap: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        color: var(--gray-950);
        &:where(.dark, .dark *) {
          color: var(--color-white);
        }
        & .fi-checkbox-input {
          flex-shrink: 0;
        }
      }
      & .fi-ta-col-manager-reorder-handle {
        cursor: move;
      }
    }
    & .fi-ta-col-manager-group {
      break-inside: avoid;
      & .fi-ta-col-manager-group-items {
        padding-inline-start: calc(var(--spacing) * 8);
      }
    }
    & .fi-ta-col-manager-actions-ctn {
      display: flex;
      gap: calc(var(--spacing) * 3);
    }
  }
  .fi-wi-chart .fi-wi-chart-frame {
    margin-inline: auto;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    &:not(.fi-wi-chart-frame-no-aspect-ratio) {
      aspect-ratio: 1 / 1;
    }
  }
  @supports (container-type: inline-size) {
    .fi-wi-chart .fi-section-content {
      container-type: inline-size;
    }
    @container (width >= 24rem) {
      .fi-wi-chart .fi-wi-chart-frame:not(.fi-wi-chart-frame-no-aspect-ratio) {
        aspect-ratio: 1.5;
      }
    }
  }
  @supports not (container-type: inline-size) {
    @media (width >= 40rem) {
      .fi-wi-chart .fi-wi-chart-frame:not(.fi-wi-chart-frame-no-aspect-ratio) {
        aspect-ratio: 1.5;
      }
    }
  }
  .fi-wi-chart .fi-wi-chart-filter.fi-input-wrp {
    width: max-content;
    @media (width >= 40rem) {
      margin-block: calc(var(--spacing) * -2);
    }
  }
  .fi-wi-chart .fi-wi-chart-filter.fi-dropdown .fi-wi-chart-filter-content {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 6);
  }
  .fi-wi-chart .fi-wi-chart-filter.fi-dropdown .fi-wi-chart-filter-content-actions-ctn {
    display: flex;
    gap: calc(var(--spacing) * 3);
  }
  .fi-wi-chart .fi-color .fi-wi-chart-bg-color {
    color: var(--color-50);
    &:where(.dark, .dark *) {
      color: var(--color-400);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-400) 10%, transparent);
      }
    }
  }
  .fi-wi-chart .fi-color .fi-wi-chart-border-color {
    color: var(--color-500);
    &:where(.dark, .dark *) {
      color: var(--color-400);
    }
  }
  .fi-wi-chart .fi-wi-chart-bg-color {
    color: var(--gray-100);
    &:where(.dark, .dark *) {
      color: var(--gray-800);
    }
  }
  .fi-wi-chart .fi-wi-chart-border-color {
    color: var(--gray-400);
  }
  .fi-wi-chart .fi-wi-chart-grid-color {
    color: var(--gray-200);
    &:where(.dark, .dark *) {
      color: var(--gray-800);
    }
  }
  .fi-wi-chart .fi-wi-chart-text-color {
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-wi-chart .fi-wi-chart-tooltip-bg-color {
    color: rgb(0 0 0 / 0.8);
  }
  .fi-wi-chart .fi-wi-chart-tooltip-text-color {
    color: rgb(255 255 255);
  }
  .fi-wi-chart .fi-wi-chart-tooltip-border-color {
    color: rgb(255 255 255 / 0.2);
  }
  .fi-wi-chart .fi-empty-state {
    padding: 0px;
  }
  .fi-wi-stats-overview-stat {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--radius-xl);
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 6);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    --tw-outline-style: none;
    outline-style: none;
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--primary-600);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        --tw-ring-color: var(--primary-500);
      }
    }
    & .fi-icon {
      flex-shrink: 0;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & .fi-wi-stats-overview-stat-content {
      display: grid;
      row-gap: calc(var(--spacing) * 2);
    }
    & .fi-wi-stats-overview-stat-label-ctn {
      display: flex;
      align-items: center;
      column-gap: calc(var(--spacing) * 2);
    }
    & .fi-wi-stats-overview-stat-label {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-wi-stats-overview-stat-value {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      --tw-tracking: var(--tracking-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--gray-950);
      --tw-numeric-spacing: tabular-nums;
      font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
    & .fi-wi-stats-overview-stat-placeholder {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
    }
    & .fi-wi-stats-overview-stat-description {
      display: flex;
      align-items: center;
      column-gap: var(--spacing);
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      color: var(--gray-500);
      &:where(.dark, .dark *) {
        color: var(--gray-400);
      }
      &.fi-color {
        color: var(--text);
        &:where(.dark, .dark *) {
          color: var(--dark-text);
        }
        & .fi-icon {
          color: var(--color-500);
        }
      }
    }
    & .fi-wi-stats-overview-stat-chart {
      position: absolute;
      inset-inline: 0px;
      bottom: 0px;
      overflow: hidden;
      border-bottom-right-radius: var(--radius-xl);
      border-bottom-left-radius: var(--radius-xl);
      & > canvas {
        height: calc(var(--spacing) * 6);
      }
      & .fi-wi-stats-overview-stat-chart-bg-color {
        color: var(--gray-100);
        &:where(.dark, .dark *) {
          color: var(--gray-800);
        }
      }
      & .fi-wi-stats-overview-stat-chart-border-color {
        color: var(--gray-400);
      }
      &.fi-color {
        & .fi-wi-stats-overview-stat-chart-bg-color {
          color: var(--color-50);
          &:where(.dark, .dark *) {
            color: var(--color-400);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--color-400) 10%, transparent);
            }
          }
        }
        & .fi-wi-stats-overview-stat-chart-border-color {
          color: var(--color-500);
          &:where(.dark, .dark *) {
            color: var(--color-400);
          }
        }
      }
    }
  }
  .fi-wi {
    gap: calc(var(--spacing) * 6);
  }
}
@layer base {
  :root.dark {
    color-scheme: dark;
  }
  [data-field-wrapper], [data-field-wrapper] * {
    scroll-margin-top: calc(var(--topbar-height) + 4rem);
  }
}
@layer components {
  .fi-global-search-ctn {
    display: flex;
    align-items: center;
  }
  .fi-global-search {
    flex: 1;
    @media (width >= 40rem) {
      position: relative;
    }
  }
  .fi-global-search-results-ctn {
    position: absolute;
    inset-inline: calc(var(--spacing) * 4);
    z-index: 10;
    margin-top: calc(var(--spacing) * 2);
    max-height: calc(var(--spacing) * 96);
    overflow: auto;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    @media (width >= 40rem) {
      inset-inline: auto;
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    transform: translateZ(0);
    &.fi-transition-enter-start, &.fi-transition-leave-end {
      opacity: 0%;
    }
  }
  @media (width >= 40rem) {
    .fi-topbar .fi-global-search-results-ctn {
      inset-inline-end: calc(var(--spacing) * 0);
      width: 100vw;
      max-width: var(--container-sm);
    }
  }
  .fi-sidebar .fi-global-search-ctn {
    margin-inline: calc(var(--spacing) * 3);
    margin-top: calc(var(--spacing) * 3);
  }
  @media (width >= 40rem) {
    .fi-sidebar .fi-global-search-results-ctn {
      inset-inline-start: calc(var(--spacing) * 0);
    }
  }
  .fi-global-search-no-results-message {
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  :where(.fi-global-search-results > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-color: var(--gray-200);
  }
  :where(.fi-global-search-results:where(.dark, .dark *) > :not(:last-child)) {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .fi-global-search-result-group-header {
    position: sticky;
    top: 0px;
    z-index: 10;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--gray-200);
    background-color: var(--gray-50);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    text-transform: capitalize;
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-800);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  :where(.fi-global-search-result-group-results > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-color: var(--gray-200);
  }
  :where(.fi-global-search-result-group-results:where(.dark, .dark *) > :not(:last-child)) {
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .fi-global-search-result {
    scroll-margin-top: calc(var(--spacing) * 9);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:focus-within {
      background-color: var(--gray-50);
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:where(.dark, .dark *) {
      &:focus-within {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &.fi-global-search-result-has-actions {
      & .fi-global-search-result-link {
        padding-bottom: 0px;
      }
    }
  }
  .fi-global-search-result-link {
    display: block;
    padding: calc(var(--spacing) * 4);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  .fi-global-search-result-heading {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-global-search-result-details {
    margin-top: var(--spacing);
  }
  .fi-global-search-result-detail {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-global-search-result-detail-label {
    display: inline;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .fi-global-search-result-detail-value {
    display: inline;
  }
  .fi-global-search-result-actions {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    column-gap: calc(var(--spacing) * 3);
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }
  .fi-header {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    @media (width >= 40rem) {
      flex-direction: row;
    }
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
    @media (width >= 40rem) {
      align-items: center;
    }
    @media (width >= 40rem) {
      justify-content: space-between;
    }
    & .fi-breadcrumbs {
      margin-bottom: calc(var(--spacing) * 2);
      display: none;
      @media (width >= 40rem) {
        display: block;
      }
    }
    & > div:first-child:not(.fi-header-actions-ctn) {
      max-width: 100%;
      @media (width >= 40rem) {
        width: max-content;
      }
    }
    &.fi-header-has-subheading {
      & .fi-header-actions-ctn {
        @media (width >= 40rem) {
          align-self: center;
        }
      }
    }
  }
  .fi-header-heading {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--gray-950);
    @media (width >= 40rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-header-subheading {
    margin-top: calc(var(--spacing) * 2);
    max-width: var(--container-2xl);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--gray-600);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-header-actions-ctn {
    display: flex;
    max-width: 100%;
    flex-shrink: 0;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    @media (width >= 40rem) {
      align-self: flex-end;
    }
    & > .fi-ac {
      flex: 1;
      &:not(.fi-width-full) {
        &.fi-align-end, &.fi-align-right {
          flex-direction: row;
          justify-content: flex-end;
        }
      }
    }
  }
  .fi-simple-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    & .fi-logo {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .fi-simple-header-heading {
    text-align: center;
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-simple-header-subheading {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  html.fi {
    min-height: 100dvh;
  }
  .fi-body {
    min-height: 100dvh;
    background-color: var(--gray-50);
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
    color: var(--gray-950);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &:where(.dark, .dark *) {
      background-color: var(--gray-950);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &.fi-body-has-sidebar-collapsible-on-desktop, &.fi-body-has-sidebar-fully-collapsible-on-desktop {
      & .fi-main-ctn {
        min-height: calc(100dvh - var(--topbar-height));
        opacity: 0%;
        transition-property: all;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration));
      }
    }
    & > .fi-layout-sidebar-toggle-btn-ctn {
      padding-inline-start: calc(var(--spacing) * 5);
      padding-top: calc(var(--spacing) * 5);
      &.lg\:fi-hidden {
        @media (width >= 64rem) {
          display: none;
        }
      }
    }
    &.fi-body-has-navigation:not( .fi-body-has-sidebar-collapsible-on-desktop ):not(.fi-body-has-sidebar-fully-collapsible-on-desktop):not( .fi-body-has-top-navigation ) {
      & .fi-main-ctn {
        opacity: 0%;
      }
    }
    &.fi-body-has-top-navigation, &:not(.fi-body-has-navigation) {
      & .fi-main-ctn {
        display: flex;
        min-height: calc(100dvh - var(--topbar-height));
      }
    }
    &:not(.fi-body-has-topbar) {
      & .fi-main-ctn {
        display: flex;
        min-height: 100dvh;
      }
    }
  }
  .fi-layout {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: clip;
  }
  .fi-main-ctn {
    min-width: 0px;
    flex: 1;
    flex-direction: column;
  }
  .fi-main {
    margin-inline: auto;
    height: 100%;
    width: 100%;
    padding-inline: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  :is(.fi-main, .fi-simple-main).fi-width-3xs {
    max-width: var(--container-3xs);
  }
  :is(.fi-main, .fi-simple-main).fi-width-2xs {
    max-width: var(--container-2xs);
  }
  :is(.fi-main, .fi-simple-main).fi-width-xs {
    max-width: var(--container-xs);
  }
  :is(.fi-main, .fi-simple-main).fi-width-sm {
    max-width: var(--container-sm);
  }
  :is(.fi-main, .fi-simple-main).fi-width-md {
    max-width: var(--container-md);
  }
  :is(.fi-main, .fi-simple-main).fi-width-lg {
    max-width: var(--container-lg);
  }
  :is(.fi-main, .fi-simple-main).fi-width-xl {
    max-width: var(--container-xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-2xl {
    max-width: var(--container-2xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-3xl {
    max-width: var(--container-3xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-4xl {
    max-width: var(--container-4xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-5xl {
    max-width: var(--container-5xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-6xl {
    max-width: var(--container-6xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-7xl {
    max-width: var(--container-7xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-none {
    max-width: none;
  }
  :is(.fi-main, .fi-simple-main).fi-width-full {
    max-width: 100%;
  }
  :is(.fi-main, .fi-simple-main).fi-width-min {
    max-width: min-content;
  }
  :is(.fi-main, .fi-simple-main).fi-width-max {
    max-width: max-content;
  }
  :is(.fi-main, .fi-simple-main).fi-width-fit {
    max-width: fit-content;
  }
  :is(.fi-main, .fi-simple-main).fi-width-prose {
    max-width: 65ch;
  }
  :is(.fi-main, .fi-simple-main).fi-width-container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  :is(.fi-main, .fi-simple-main).fi-width-screen-sm {
    max-width: var(--breakpoint-sm);
  }
  :is(.fi-main, .fi-simple-main).fi-width-screen-md {
    max-width: var(--breakpoint-md);
  }
  :is(.fi-main, .fi-simple-main).fi-width-screen-lg {
    max-width: var(--breakpoint-lg);
  }
  :is(.fi-main, .fi-simple-main).fi-width-screen-xl {
    max-width: var(--breakpoint-xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-screen-2xl {
    max-width: var(--breakpoint-2xl);
  }
  :is(.fi-main, .fi-simple-main).fi-width-screen {
    position: fixed;
    inset: 0px;
  }
  .fi-simple-layout {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
  }
  .fi-simple-layout-header {
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 0);
    top: 0px;
    display: flex;
    height: calc(var(--spacing) * 16);
    align-items: center;
    column-gap: calc(var(--spacing) * 4);
    padding-inline-end: calc(var(--spacing) * 4);
    @media (width >= 48rem) {
      padding-inline-end: calc(var(--spacing) * 6);
    }
    @media (width >= 64rem) {
      padding-inline-end: calc(var(--spacing) * 8);
    }
  }
  .fi-simple-main-ctn {
    display: flex;
    width: 100%;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
  }
  .fi-simple-main {
    margin-block: calc(var(--spacing) * 16);
    width: 100%;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 12);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    @media (width >= 40rem) {
      border-radius: var(--radius-xl);
    }
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 12);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  .fi-logo {
    display: flex;
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
    &.fi-logo-light {
      &:where(.dark, .dark *) {
        display: none;
      }
    }
    &.fi-logo-dark {
      display: none;
      &:where(.dark, .dark *) {
        display: flex;
      }
    }
  }
  @media (width >= 48rem) {
    .fi-page-sub-navigation-dropdown {
      display: none;
    }
  }
  .fi-page-sub-navigation-dropdown > .fi-dropdown-trigger > .fi-btn {
    width: 100%;
    justify-content: space-between;
  }
  .fi-page-sub-navigation-sidebar-ctn {
    display: none;
    width: calc(var(--spacing) * 72);
    flex-direction: column;
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .fi-page-sub-navigation-sidebar {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spacing) * 7);
  }
  .fi-page-sub-navigation-tabs {
    display: none;
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .fi-page.fi-height-full {
    height: 100%;
    & .fi-page-main, & .fi-page-header-main-ctn, & .fi-page-content {
      height: 100%;
    }
  }
  .fi-page.fi-page-has-sub-navigation .fi-page-main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 8);
  }
  @media (width >= 48rem) {
    :is(.fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start, .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-end) .fi-page-main {
      flex-direction: row;
      align-items: flex-start;
    }
  }
  .fi-page-header-main-ctn {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spacing) * 8);
    padding-block: calc(var(--spacing) * 8);
  }
  .fi-page-main-sub-navigation-mobile-menu-render-hook-ctn {
    display: contents;
    @media (width >= 48rem) {
      display: none;
    }
  }
  .fi-page-content {
    display: grid;
    flex: 1;
    grid-auto-columns: minmax(0, 1fr);
    row-gap: calc(var(--spacing) * 8);
  }
  .fi-simple-page-content {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    row-gap: calc(var(--spacing) * 6);
  }
  .fi-sidebar-group {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing);
    &.fi-collapsed {
      & .fi-sidebar-group-collapse-btn {
        rotate: calc(180deg * -1);
      }
    }
    &.fi-collapsible > .fi-sidebar-group-btn {
      cursor: pointer;
    }
    &.fi-active {
      & .fi-sidebar-group-dropdown-trigger-btn {
        & .fi-icon {
          color: var(--primary-600);
          &:where(.dark, .dark *) {
            color: var(--primary-400);
          }
        }
      }
    }
  }
  .fi-sidebar-group-btn {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 2);
    & .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-sidebar-group-label {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-sidebar-group-dropdown-trigger-btn {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-100);
      }
    }
    &:focus-visible {
      background-color: var(--gray-100);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-sidebar-group-items {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing);
  }
  :is(.fi-sidebar-group-btn, .fi-sidebar-group-items).fi-transition-enter {
    transition-delay: 100ms;
    @media (width >= 64rem) {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }
  :is(.fi-sidebar-group-btn, .fi-sidebar-group-items).fi-transition-enter-start {
    opacity: 0%;
  }
  :is(.fi-sidebar-group-btn, .fi-sidebar-group-items).fi-transition-enter-end {
    opacity: 100%;
  }
  .fi-sidebar {
    position: fixed;
    inset-block: 0px;
    inset-inline-start: calc(var(--spacing) * 0);
    z-index: 30;
    display: flex;
    height: 100dvh;
    flex-direction: column;
    align-content: flex-start;
    background-color: var(--color-white);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    @media (width >= 64rem) {
      z-index: 20;
    }
    @media (width >= 64rem) {
      background-color: transparent;
    }
    @media (width >= 64rem) {
      transition-property: none;
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      @media (width >= 64rem) {
        background-color: transparent;
      }
    }
    &.fi-sidebar-open {
      width: var(--sidebar-width);
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      --tw-ring-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
      @media (width >= 64rem) {
        --tw-shadow: 0 0 #0000;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      @media (width >= 64rem) {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-translate-x: 0px;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
      &:where(.dark, .dark *) {
        --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
    &:not(.fi-sidebar-open) {
      --tw-translate-x: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
      &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
        --tw-translate-x: 100%;
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  @media (width >= 64rem) {
    .fi-body-has-topbar .fi-sidebar {
      top: var(--topbar-height);
      height: calc(100dvh - var(--topbar-height));
    }
  }
  .fi-sidebar-close-overlay {
    position: fixed;
    inset: 0px;
    z-index: 30;
    background-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gray-950) 50%, transparent);
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 500ms;
    transition-duration: 500ms;
    @media (width >= 64rem) {
      display: none;
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--gray-950) 75%, transparent);
      }
    }
  }
  @media (width >= 64rem) {
    .fi-body.fi-body-has-top-navigation .fi-sidebar {
      --tw-translate-x: -100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .fi-body.fi-body-has-top-navigation .fi-sidebar:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .fi-body:not(.fi-body-has-top-navigation) .fi-sidebar.fi-sidebar-open {
      position: sticky;
    }
    .fi-body:not(.fi-body-has-top-navigation).fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
      position: sticky;
      width: var(--collapsed-sidebar-width);
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .fi-body:not(.fi-body-has-top-navigation).fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .fi-body:not(.fi-body-has-top-navigation).fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
      padding-inline-end: 0px;
    }
    .fi-body:not(.fi-body-has-top-navigation).fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
      width: max-content;
    }
    .fi-body:not(.fi-body-has-top-navigation):not(.fi-body-has-sidebar-collapsible-on-desktop):not(.fi-body-has-sidebar-fully-collapsible-on-desktop ) .fi-sidebar {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .fi-body:not(.fi-body-has-top-navigation):not(.fi-body-has-sidebar-collapsible-on-desktop):not(.fi-body-has-sidebar-fully-collapsible-on-desktop ) .fi-sidebar:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .fi-body:not(.fi-body-has-top-navigation):not(.fi-body-has-sidebar-collapsible-on-desktop):not(.fi-body-has-sidebar-fully-collapsible-on-desktop ) .fi-sidebar:not(.fi-sidebar-open) {
    width: var(--sidebar-width);
    @media (width >= 64rem) {
      position: sticky;
    }
  }
  .fi-sidebar-header-ctn {
    overflow-x: clip;
  }
  .fi-sidebar-header {
    display: flex;
    height: var(--topbar-height);
    align-items: center;
    justify-content: center;
  }
  .fi-sidebar-header-logo-ctn {
    flex: 1;
  }
  .fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 6);
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    @media (width >= 64rem) {
      display: none;
    }
    @media (width >= 64rem) {
      --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
  }
  :not(.fi-body-has-topbar) .fi-sidebar-header {
    background-color: transparent;
    padding-inline: calc(var(--spacing) * 4);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    .fi-logo {
      margin-inline-start: calc(var(--spacing) * 3);
    }
  }
  .fi-sidebar-header-controls {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    &::after {
      content: var(--tw-content);
      margin-inline: calc(var(--spacing) * 4);
    }
    &::after {
      content: var(--tw-content);
      margin-top: calc(var(--spacing) * 3);
    }
    &::after {
      content: var(--tw-content);
      border-top-style: var(--tw-border-style);
      border-top-width: 1px;
    }
    &::after {
      content: var(--tw-content);
      border-color: var(--gray-950);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
      }
    }
    &::after {
      content: var(--tw-content);
      --tw-content: '';
      content: var(--tw-content);
    }
    &:where(.dark, .dark *) {
      &::after {
        content: var(--tw-content);
        border-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .fi-sidebar-nav {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    row-gap: calc(var(--spacing) * 7);
    overflow-x: hidden;
    overflow-y: auto;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 8);
    scrollbar-gutter: stable;
  }
  .fi-sidebar-nav-groups {
    margin-inline: calc(var(--spacing) * -2);
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--spacing) * 7);
  }
  .fi-sidebar-item.fi-active, .fi-sidebar-item.fi-sidebar-item-has-active-child-items {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing);
  }
  .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--gray-100);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    & > .fi-icon {
      color: var(--primary-700);
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
    & > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
      background-color: var(--primary-700);
      &:where(.dark, .dark *) {
        background-color: var(--primary-400);
      }
    }
    & > .fi-sidebar-item-label {
      color: var(--primary-700);
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
    .fi-sidebar-item-grouped-border-part {
      position: relative;
      height: calc(var(--spacing) * 1.5);
      width: calc(var(--spacing) * 1.5);
      border-radius: calc(infinity * 1px);
    }
  }
  @media (hover: hover) {
    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
      background-color: var(--gray-100);
    }
  }
  .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--gray-100);
  }
  @media (hover: hover) {
    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:where(.dark, .dark *):hover {
      background-color: color-mix(in srgb, #fff 5%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:where(.dark, .dark *):hover {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
  }
  .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:where(.dark, .dark *):focus-visible {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .fi-sidebar-item-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    & > .fi-icon {
      flex-shrink: 0;
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-sidebar-item-grouped-border {
    position: relative;
    display: flex;
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    align-items: center;
    justify-content: center;
  }
  .fi-sidebar-item-grouped-border-part-not-first {
    position: absolute;
    top: calc(calc(1 / 2 * 100%) * -1);
    bottom: calc(1 / 2 * 100%);
    width: 1px;
    background-color: var(--gray-300);
    &:where(.dark, .dark *) {
      background-color: var(--gray-600);
    }
  }
  .fi-sidebar-item-grouped-border-part-not-last {
    position: absolute;
    top: calc(1 / 2 * 100%);
    bottom: calc(calc(1 / 2 * 100%) * -1);
    width: 1px;
    background-color: var(--gray-300);
    &:where(.dark, .dark *) {
      background-color: var(--gray-600);
    }
  }
  .fi-sidebar-item-grouped-border-part {
    position: relative;
    height: calc(var(--spacing) * 1.5);
    width: calc(var(--spacing) * 1.5);
    border-radius: calc(infinity * 1px);
    background-color: var(--gray-400);
    &:where(.dark, .dark *) {
      background-color: var(--gray-500);
    }
  }
  .fi-sidebar-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
  }
  @media (width >= 64rem) {
    :is(.fi-sidebar-item-label, .fi-sidebar-item-badge-ctn).fi-transition-enter {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      transition-delay: 100ms;
    }
  }
  :is(.fi-sidebar-item-label, .fi-sidebar-item-badge-ctn).fi-transition-enter-start {
    opacity: 0%;
  }
  :is(.fi-sidebar-item-label, .fi-sidebar-item-badge-ctn).fi-transition-enter-end {
    opacity: 100%;
  }
  .fi-sidebar-footer {
    margin-inline: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 3);
    display: grid;
    row-gap: calc(var(--spacing) * 3);
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    border-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    padding-top: calc(var(--spacing) * 3);
    &:where(.dark, .dark *) {
      border-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & > .fi-no-database {
      display: block;
    }
  }
  .fi-sidebar-sub-group-items {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing);
  }
  .fi-sidebar-database-notifications-btn {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    text-align: start;
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-100);
      }
    }
    &:focus-visible {
      background-color: var(--gray-100);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & > .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
    & > .fi-sidebar-database-notifications-btn-label {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
      --tw-font-weight: var(--font-weight-medium);
      font-weight: var(--font-weight-medium);
      color: var(--gray-700);
      &:where(.dark, .dark *) {
        color: var(--gray-200);
      }
    }
    & > .fi-sidebar-database-notifications-btn-label, & > .fi-sidebar-database-notifications-btn-badge-ctn {
      &.fi-transition-enter {
        @media (width >= 64rem) {
          transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
          transition-duration: var(--tw-duration, var(--default-transition-duration));
        }
        @media (width >= 64rem) {
          transition-delay: 100ms;
        }
      }
      &.fi-transition-enter-start {
        opacity: 0%;
      }
      &.fi-transition-enter-end {
        opacity: 100%;
      }
    }
  }
  .fi-sidebar-open-sidebar-btn, .fi-sidebar-open-collapse-sidebar-btn {
    margin-inline: 0px !important;
  }
  .fi-sidebar-close-collapse-sidebar-btn {
    margin-inline: 0px !important;
    display: none;
    @media (width >= 64rem) {
      display: flex;
    }
  }
  @media (width >= 64rem) {
    :is(.fi-body.fi-body-has-sidebar-collapsible-on-desktop, .fi-body:not(.fi-body-has-sidebar-fully-collapsible-on-desktop)) .fi-sidebar-open-sidebar-btn {
      display: none;
    }
  }
  .fi-sidebar-close-sidebar-btn {
    margin-inline: 0px !important;
    @media (width >= 64rem) {
      display: none;
    }
  }
  .fi-tenant-menu-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-100);
      }
    }
    &:focus-visible {
      background-color: var(--gray-100);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & .fi-tenant-avatar {
      max-width: none;
      flex-shrink: 0;
    }
    & .fi-icon {
      margin-inline-start: auto;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--gray-400);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--gray-500);
        }
      }
      &:is(:where(.group):focus-visible *) {
        color: var(--gray-500);
      }
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &:where(.dark, .dark *) {
        &:is(:where(.group):hover *) {
          @media (hover: hover) {
            color: var(--gray-400);
          }
        }
      }
      &:where(.dark, .dark *) {
        &:is(:where(.group):focus-visible *) {
          color: var(--gray-400);
        }
      }
    }
    &:hover {
      & .fi-icon {
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
    }
    &:focus-visible {
      & .fi-icon {
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
    }
  }
  .fi-tenant-menu-trigger-text {
    display: grid;
    justify-items: start;
    text-align: start;
  }
  .fi-tenant-menu-trigger-current-tenant-label {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-tenant-menu-trigger-tenant-name {
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-sidebar .fi-tenant-menu {
    margin-inline: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 3);
  }
  .fi-theme-switcher {
    display: grid;
    grid-auto-flow: column;
    column-gap: var(--spacing);
  }
  .fi-theme-switcher-btn {
    display: flex;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:focus-visible {
      background-color: var(--gray-50);
    }
    &:focus-visible {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-visible {
      --tw-ring-color: var(--primary-600);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        --tw-ring-color: var(--primary-500);
      }
    }
    &.fi-active {
      background-color: var(--gray-50);
      color: var(--primary-500);
      &:where(.dark, .dark *) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
    &:not(.fi-active) {
      color: var(--gray-400);
      &:hover {
        @media (hover: hover) {
          color: var(--gray-500);
        }
      }
      &:focus-visible {
        color: var(--gray-500);
      }
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &:where(.dark, .dark *) {
        &:hover {
          @media (hover: hover) {
            color: var(--gray-400);
          }
        }
      }
      &:where(.dark, .dark *) {
        &:focus-visible {
          color: var(--gray-400);
        }
      }
    }
  }
  .fi-body {
    --topbar-height: 4rem;
  }
  .fi-topbar-ctn {
    position: sticky;
    top: 0px;
    z-index: 30;
    overflow-x: clip;
  }
  .fi-topbar {
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--gray-950) 5%, transparent);
    }
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }
    & .fi-tenant-menu {
      display: none;
      @media (width >= 64rem) {
        display: block;
      }
    }
  }
  .fi-topbar-open-sidebar-btn {
    margin-inline: 0px !important;
  }
  .fi-topbar-close-sidebar-btn {
    margin-inline: 0px !important;
    @media (width >= 64rem) {
      display: none;
    }
  }
  .fi-topbar-open-collapse-sidebar-btn {
    margin-inline: 0px !important;
  }
  .fi-topbar-close-collapse-sidebar-btn {
    margin-inline: 0px !important;
    display: none;
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .fi-topbar-start {
    margin-inline-end: calc(var(--spacing) * 6);
    display: none;
    align-items: center;
    @media (width >= 64rem) {
      display: flex;
    }
    & .fi-logo {
      margin-inline-start: calc(var(--spacing) * 3);
    }
  }
  .fi-topbar-collapse-sidebar-btn-ctn {
    width: calc(var(--spacing) * 9);
    flex-shrink: 0;
  }
  @media (width >= 64rem) {
    :is(.fi-body.fi-body-has-sidebar-collapsible-on-desktop, .fi-body:not(.fi-body-has-sidebar-fully-collapsible-on-desktop)) .fi-topbar-open-sidebar-btn {
      display: none;
    }
  }
  .fi-topbar-nav-groups {
    margin-inline-start: calc(var(--spacing) * 4);
    margin-inline-end: calc(var(--spacing) * 4);
    display: none;
    align-items: center;
    column-gap: calc(var(--spacing) * 4);
    @media (width >= 64rem) {
      margin-block: calc(var(--spacing) * 2);
    }
    @media (width >= 64rem) {
      display: flex;
    }
    @media (width >= 64rem) {
      flex-wrap: wrap;
    }
    @media (width >= 64rem) {
      row-gap: var(--spacing);
    }
  }
  .fi-topbar-end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 4);
  }
  .fi-topbar-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    &:hover {
      @media (hover: hover) {
        background-color: var(--gray-50);
      }
    }
    &:focus-visible {
      background-color: var(--gray-50);
    }
    &:where(.dark, .dark *) {
      &:hover {
        @media (hover: hover) {
          background-color: color-mix(in srgb, #fff 5%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
          }
        }
      }
    }
    &:where(.dark, .dark *) {
      &:focus-visible {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
    & > .fi-icon {
      color: var(--gray-400);
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
    }
  }
  .fi-topbar-item-label {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    &:where(.dark, .dark *) {
      color: var(--gray-200);
    }
  }
  .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: var(--gray-50);
    &:where(.dark, .dark *) {
      background-color: color-mix(in srgb, #fff 5%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }
    & > .fi-icon {
      color: var(--primary-600);
      &:where(.dark, .dark *) {
        color: var(--primary-400);
      }
    }
  }
  .fi-topbar-item.fi-active .fi-topbar-item-label {
    color: var(--primary-600);
    &:where(.dark, .dark *) {
      color: var(--primary-400);
    }
  }
  .fi-simple-user-menu-ctn {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 4);
  }
  .fi-topbar .fi-user-menu-trigger {
    flex-shrink: 0;
  }
  .fi-sidebar .fi-user-menu-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    column-gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: 75ms;
    transition-duration: 75ms;
    & .fi-user-avatar {
      flex-shrink: 0;
    }
    & .fi-icon {
      margin-inline-start: auto;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
      flex-shrink: 0;
      color: var(--gray-400);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: 75ms;
      transition-duration: 75ms;
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          color: var(--gray-500);
        }
      }
      &:is(:where(.group):focus-visible *) {
        color: var(--gray-500);
      }
      &:where(.dark, .dark *) {
        color: var(--gray-500);
      }
      &:where(.dark, .dark *) {
        &:is(:where(.group):hover *) {
          @media (hover: hover) {
            color: var(--gray-400);
          }
        }
      }
      &:where(.dark, .dark *) {
        &:is(:where(.group):focus-visible *) {
          color: var(--gray-400);
        }
      }
    }
    &:hover {
      & .fi-icon {
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
    }
    &:focus-visible {
      & .fi-icon {
        color: var(--gray-500);
        &:where(.dark, .dark *) {
          color: var(--gray-400);
        }
      }
    }
    .fi-tenant-menu-trigger-text {
      display: grid;
      justify-items: start;
      text-align: start;
      color: var(--gray-950);
      &:where(.dark, .dark *) {
        color: var(--color-white);
      }
    }
  }
  .fi-sidebar .fi-user-menu .fi-dropdown-panel {
    max-width: max(14rem, calc(100% - 1.5rem)) !important;
  }
  .fi-account-widget .fi-section-content {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
  }
  .fi-account-widget-logout-form {
    margin-block: auto;
  }
  .fi-account-widget-main {
    flex: 1;
  }
  .fi-account-widget-heading {
    display: grid;
    flex: 1;
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-account-widget-user-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-filament-info-widget .fi-section-content {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 3);
  }
  .fi-filament-info-widget-main {
    flex: 1;
  }
  .fi-filament-info-widget-logo {
    height: calc(var(--spacing) * 5);
    color: var(--gray-950);
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
  .fi-filament-info-widget-version {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--gray-500);
    &:where(.dark, .dark *) {
      color: var(--gray-400);
    }
  }
  .fi-filament-info-widget-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: var(--spacing);
  }
}
@layer utilities {
  .fi-skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    position: fixed;
    inset-inline-start: calc(var(--spacing) * 4);
    top: calc(var(--spacing) * 4);
    z-index: 50;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--primary-600);
    --tw-outline-style: none;
    outline-style: none;
    &:where(.dark, .dark *) {
      background-color: var(--gray-900);
    }
    &:where(.dark, .dark *) {
      color: var(--color-white);
    }
  }
}
.fi-input-wrp {
  border-radius: var(--radius-3xl);
}
.fi-no-database .fi-modal-content {
  margin: 0px;
  padding: 0px;
}
.fi-no-notification {
  border-radius: var(--radius-3xl);
}
.fi-simple-main {
  border-radius: var(--radius-3xl);
}
.fi-page-header-main-ctn .fi-header .fi-header-heading {
  position: relative;
  display: inline-block;
  &::after {
    content: var(--tw-content);
    position: absolute;
  }
  &::after {
    content: var(--tw-content);
    right: calc(var(--spacing) * -1);
  }
  &::after {
    content: var(--tw-content);
    bottom: var(--spacing);
  }
  &::after {
    content: var(--tw-content);
    left: calc(var(--spacing) * -1);
  }
  &::after {
    content: var(--tw-content);
    z-index: calc(10 * -1);
  }
  &::after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 1.5);
  }
  &::after {
    content: var(--tw-content);
    border-radius: calc(infinity * 1px);
  }
  &::after {
    content: var(--tw-content);
    background-color: var(--primary-400);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--primary-400) 75%, transparent);
    }
  }
  &::after {
    content: var(--tw-content);
    --tw-content: '';
    content: var(--tw-content);
  }
  &:where(.dark, .dark *) {
    &::after {
      content: var(--tw-content);
      background-color: var(--primary-600);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--primary-600) 75%, transparent);
      }
    }
  }
}
.fi-global-search-results-ctn {
  border-top-left-radius: var(--radius-3xl);
  border-bottom-left-radius: var(--radius-3xl);
}
.fi-global-search-result-group-header {
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
.fi-global-search-result {
  padding-inline: calc(var(--spacing) * 2);
}
.fi-sidebar-item .fi-sidebar-item-btn {
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 4);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background-color: var(--primary-400);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--primary-600);
  }
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge {
  background-color: var(--color-white);
  color: var(--gray-900);
  &:where(.dark, .dark *) {
    background-color: var(--gray-900);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gray-900) 75%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border .fi-sidebar-item-grouped-border-part {
  background-color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, #fff 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
    }
  }
}
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border .fi-sidebar-item-grouped-border-part-not-last, .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border .fi-sidebar-item-grouped-border-part-not-first {
  background-color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--gray-900) 25%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: color-mix(in srgb, #fff 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
}
.fi-sidebar-group-dropdown-trigger-btn {
  border-radius: var(--radius-3xl);
}
.fi-tenant-menu-trigger {
  border-radius: var(--radius-3xl);
  padding-inline: calc(var(--spacing) * 4);
}
.fi-theme-switcher-btn {
  border-radius: calc(infinity * 1px);
}
.fi-theme-switcher-btn.fi-active {
  background-color: var(--primary-400);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--primary-600);
  }
}
.fi-theme-switcher-btn.fi-active .fi-icon {
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-topbar-item .fi-topbar-item-btn {
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 4);
}
.fi-topbar-item.fi-active .fi-topbar-item-btn {
  background-color: var(--primary-400);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *) {
    background-color: var(--primary-600);
  }
}
.fi-topbar-item.fi-active .fi-topbar-item-label, .fi-topbar-item.fi-active .fi-topbar-item-icon {
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-topbar-item.fi-active .fi-topbar-item-badge-ctn .fi-badge {
  background-color: var(--color-white);
  color: var(--gray-900);
  &:where(.dark, .dark *) {
    background-color: var(--gray-900);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gray-900) 75%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-topbar-item.fi-active .fi-topbar-group-toggle-icon {
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-topbar-group-dropdown-trigger-btn {
  border-radius: var(--radius-3xl);
}
.fi-btn {
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
div.fi-fo-toggle-buttons-btn-ctn > input:checked + label {
  background-color: var(--bg);
  color: var(--text);
  &:where(.dark, .dark *) {
    color: var(--dark-text);
  }
}
div.fi-fo-toggle-buttons-btn-ctn > input:checked + label, div.fi-fo-toggle-buttons-btn-ctn > input:checked + label > .fi-icon {
  color: var(--text);
  &:where(.dark, .dark *) {
    color: var(--dark-text);
  }
}
.fi-badge {
  border-radius: calc(infinity * 1px);
}
.fi-badge:not(.fi-color) {
  background-color: var(--gray-400);
  color: var(--gray-900);
  &:where(.dark, .dark *) {
    background-color: var(--gray-600);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-badge.fi-color-primary {
  background-color: var(--primary-400);
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    background-color: var(--primary-600);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-badge.fi-color:not(.fi-color-primary) {
  background-color: var(--color-400);
  color: var(--gray-900) !important;
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 60%, transparent) !important;
  }
  &:where(.dark, .dark *) {
    background-color: var(--color-600);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white) !important;
  }
}
.fi-badge.fi-color:not(.fi-color-primary) .fi-icon {
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 60%, transparent);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-icon-btn-badge-ctn {
  margin-top: calc(var(--spacing) * 0.5);
  margin-left: calc(var(--spacing) * -1.5);
  background-color: transparent;
}
.fi-dropdown-panel {
  border-radius: var(--radius-3xl);
}
.fi-dropdown-list-item {
  border-radius: calc(infinity * 1px);
}
.fi-modal-window {
  border-radius: var(--radius-3xl);
}
.fi-modal-close-overlay {
  --tw-backdrop-blur: blur(var(--blur-xs));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.fi-modal-slide-over .fi-modal-window {
  margin-top: calc(var(--spacing) * 2);
  margin-right: calc(var(--spacing) * 3);
  height: calc(100vh - 2rem);
}
.fi-section {
  border-radius: var(--radius-3xl);
}
.fi-tabs {
  border-radius: var(--radius-3xl);
  padding: var(--spacing);
}
.fi-tabs-item {
  border-radius: calc(infinity * 1px);
}
.fi-tabs-item.fi-active {
  background-color: var(--primary-400);
  &:where(.dark, .dark *) {
    background-color: var(--primary-600);
  }
}
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-icon {
  color: var(--gray-900);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--gray-900) 75%, transparent);
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-tabs-item.fi-active .fi-badge {
  background-color: var(--color-white);
  color: var(--gray-900);
  &:where(.dark, .dark *) {
    background-color: var(--gray-900);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gray-900) 75%, transparent);
    }
  }
  &:where(.dark, .dark *) {
    color: var(--color-white);
  }
}
.fi-ta-ctn {
  border-radius: var(--radius-3xl);
}
.fi-wi-stats-overview-stat {
  border-radius: var(--radius-3xl);
}
.fi-wi-stats-overview-stat-chart {
  border-bottom-right-radius: var(--radius-3xl);
  border-bottom-left-radius: var(--radius-3xl);
}
:root {
  --font-family: 'IRANSansWeb', sans-serif;
}
html[data-fastpanel-ui-palette='vivid'] {
  --native-ui-surface: linear-gradient(145deg, #eff6ff 0%, #f5f3ff 58%, #fdf2f8 100%);
  --native-ui-border: #a78bfa;
  --native-ui-shadow: 0 12px 28px rgb(79 70 229 / 12%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #eef2ff 100%);
}
html[data-fastpanel-ui-palette='light'] {
  --native-ui-surface: #fff;
  --native-ui-border: #cbd5e1;
  --native-ui-shadow: 0 5px 18px rgb(15 23 42 / 7%);
  --native-ui-inset: #f8fafc;
}
html[data-fastpanel-ui-palette='mono'] {
  --native-ui-surface: linear-gradient(150deg, #f8fafc 0%, #e2e8f0 100%);
  --native-ui-border: #94a3b8;
  --native-ui-shadow: 0 8px 22px rgb(15 23 42 / 8%);
  --native-ui-inset: #fff;
}
html[data-fastpanel-ui-palette='spectrum'] {
  --native-ui-surface: linear-gradient(135deg, #ecfeff 0%, #f0fdf4 32%, #fff7ed 67%, #fdf2f8 100%);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 12px 30px rgb(14 165 233 / 14%);
  --native-ui-inset: linear-gradient(135deg, #fff 0%, #f0fdfa 100%);
}
html[data-fastpanel-ui-palette='ocean'] {
  --native-ui-surface: linear-gradient(140deg, #ecfeff 0%, #dbeafe 54%, #eef2ff 100%);
  --native-ui-border: #0284c7;
  --native-ui-shadow: 0 12px 30px rgb(2 132 199 / 16%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #cffafe 100%);
}
html[data-fastpanel-ui-palette='sunset'] {
  --native-ui-surface: linear-gradient(140deg, #fff7ed 0%, #ffe4e6 52%, #fce7f3 100%);
  --native-ui-border: #f97316;
  --native-ui-shadow: 0 12px 30px rgb(249 115 22 / 16%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #ffedd5 100%);
}
html[data-fastpanel-ui-palette='emerald'] {
  --native-ui-surface: linear-gradient(140deg, #ecfdf5 0%, #ccfbf1 52%, #f0fdf4 100%);
  --native-ui-border: #059669;
  --native-ui-shadow: 0 12px 30px rgb(5 150 105 / 15%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #d1fae5 100%);
}
html[data-fastpanel-ui-palette='amber'] {
  --native-ui-surface: linear-gradient(140deg, #fffbeb 0%, #fef3c7 54%, #fff7ed 100%);
  --native-ui-border: #d97706;
  --native-ui-shadow: 0 12px 28px rgb(217 119 6 / 15%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #fef3c7 100%);
}
html[data-fastpanel-ui-palette='rose'] {
  --native-ui-surface: linear-gradient(140deg, #fff1f2 0%, #ffe4e6 54%, #fce7f3 100%);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 12px 30px rgb(225 29 72 / 14%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #fff1f2 100%);
}
html[data-fastpanel-ui-palette='violet'] {
  --native-ui-surface: linear-gradient(140deg, #f5f3ff 0%, #ede9fe 54%, #fae8ff 100%);
  --native-ui-border: #8b5cf6;
  --native-ui-shadow: 0 12px 30px rgb(109 40 217 / 14%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #f5f3ff 100%);
}
html[data-fastpanel-ui-palette='graphite'] {
  --native-ui-surface: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 52%, #cbd5e1 100%);
  --native-ui-border: #64748b;
  --native-ui-shadow: 0 10px 24px rgb(15 23 42 / 11%);
  --native-ui-inset: #fff;
}
html[data-fastpanel-ui-palette='aqua'] {
  --native-ui-surface: linear-gradient(140deg, #ecfeff 0%, #cffafe 50%, #dbeafe 100%);
  --native-ui-border: #06b6d4;
  --native-ui-shadow: 0 12px 30px rgb(8 145 178 / 15%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #ecfeff 100%);
}
html[data-fastpanel-ui-palette='royal'] {
  --native-ui-surface: linear-gradient(140deg, #eff6ff 0%, #dbeafe 50%, #e0e7ff 100%);
  --native-ui-border: #4f46e5;
  --native-ui-shadow: 0 12px 30px rgb(49 46 129 / 15%);
  --native-ui-inset: linear-gradient(140deg, #fff 0%, #eff6ff 100%);
}
html.dark[data-fastpanel-ui-palette='vivid'] {
  --native-ui-surface: linear-gradient(145deg, #111827 0%, #24204b 58%, #3b1d3b 100%);
  --native-ui-border: #8b5cf6;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 24%);
  --native-ui-inset: linear-gradient(140deg, #1e293b 0%, #24204b 100%);
}
html.dark[data-fastpanel-ui-palette='light'] {
  --native-ui-surface: #1f2937;
  --native-ui-border: #475569;
  --native-ui-shadow: 0 5px 18px rgb(0 0 0 / 18%);
  --native-ui-inset: #111827;
}
html.dark[data-fastpanel-ui-palette='mono'] {
  --native-ui-surface: linear-gradient(150deg, #1f2937 0%, #111827 100%);
  --native-ui-border: #64748b;
  --native-ui-shadow: 0 8px 22px rgb(0 0 0 / 22%);
  --native-ui-inset: #0f172a;
}
html.dark[data-fastpanel-ui-palette='spectrum'] {
  --native-ui-surface: linear-gradient(135deg, #10222b 0%, #123023 32%, #332518 67%, #351b2b 100%);
  --native-ui-border: #22d3ee;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 25%);
  --native-ui-inset: linear-gradient(135deg, #17212b 0%, #142b2a 100%);
}
html.dark[data-fastpanel-ui-palette='ocean'] {
  --native-ui-surface: linear-gradient(140deg, #102b3b 0%, #172a4a 54%, #222647 100%);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 25%);
  --native-ui-inset: linear-gradient(140deg, #132d3a 0%, #172a4a 100%);
}
html.dark[data-fastpanel-ui-palette='sunset'] {
  --native-ui-surface: linear-gradient(140deg, #3a2117 0%, #42202b 52%, #351d38 100%);
  --native-ui-border: #fb923c;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 26%);
  --native-ui-inset: linear-gradient(140deg, #3b241a 0%, #3d202d 100%);
}
html.dark[data-fastpanel-ui-palette='emerald'] {
  --native-ui-surface: linear-gradient(140deg, #103329 0%, #123a37 52%, #173526 100%);
  --native-ui-border: #34d399;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 25%);
  --native-ui-inset: linear-gradient(140deg, #12382d 0%, #123a37 100%);
}
html.dark[data-fastpanel-ui-palette='amber'] {
  --native-ui-surface: linear-gradient(140deg, #382d13 0%, #3a2b1a 54%, #3a2117 100%);
  --native-ui-border: #fbbf24;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 25%);
  --native-ui-inset: linear-gradient(140deg, #3b3016 0%, #3b2819 100%);
}
html.dark[data-fastpanel-ui-palette='rose'] {
  --native-ui-surface: linear-gradient(140deg, #3b1d27 0%, #4a202e 54%, #3a1d36 100%);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 26%);
  --native-ui-inset: linear-gradient(140deg, #39202a 0%, #3c1d31 100%);
}
html.dark[data-fastpanel-ui-palette='violet'] {
  --native-ui-surface: linear-gradient(140deg, #252044 0%, #30234d 54%, #3b1f43 100%);
  --native-ui-border: #a78bfa;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: linear-gradient(140deg, #282344 0%, #342243 100%);
}
html.dark[data-fastpanel-ui-palette='graphite'] {
  --native-ui-surface: linear-gradient(145deg, #334155 0%, #1e293b 52%, #0f172a 100%);
  --native-ui-border: #94a3b8;
  --native-ui-shadow: 0 10px 24px rgb(0 0 0 / 27%);
  --native-ui-inset: #1e293b;
}
html.dark[data-fastpanel-ui-palette='aqua'] {
  --native-ui-surface: linear-gradient(140deg, #123b44 0%, #123a48 50%, #1c3152 100%);
  --native-ui-border: #22d3ee;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 26%);
  --native-ui-inset: linear-gradient(140deg, #153b44 0%, #1b354d 100%);
}
html.dark[data-fastpanel-ui-palette='royal'] {
  --native-ui-surface: linear-gradient(140deg, #1e3155 0%, #202f5a 50%, #292b57 100%);
  --native-ui-border: #818cf8;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: linear-gradient(140deg, #1f3152 0%, #282f54 100%);
}
html[data-fastpanel-ui-palette] :is(.fi-section, .fi-ta-ctn, .fi-wi-widget, .fi-wi-stats-overview-stat, .native-ui-preview-card) {
  background: var(--native-ui-surface);
  border-color: var(--native-ui-border);
  box-shadow: var(--native-ui-shadow);
}
html[data-fastpanel-ui-palette] .native-detail-card .fi-in-entry-wrp, html[data-fastpanel-ui-palette] .native-detail-card .fi-in-repeatable-item {
  border-color: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--native-ui-border) 58%, transparent);
  }
  background: var(--native-ui-inset);
  border-radius: 0.9rem;
}
html[data-fastpanel-ui-palette='spectrum'] .fi-wi-stats-overview .fi-wi-stats-overview-stat:nth-child(4n + 1) {
  border-inline-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-palette='spectrum'] .fi-wi-stats-overview .fi-wi-stats-overview-stat:nth-child(4n + 2) {
  border-inline-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-palette='spectrum'] .fi-wi-stats-overview .fi-wi-stats-overview-stat:nth-child(4n + 3) {
  border-inline-start: 4px solid #f97316;
}
html[data-fastpanel-ui-palette='spectrum'] .fi-wi-stats-overview .fi-wi-stats-overview-stat:nth-child(4n) {
  border-inline-start: 4px solid #d946ef;
}
html[data-fastpanel-ui-palette] .fi-ta-header-ctn {
  border-color: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--native-ui-border) 70%, transparent);
  }
}
html[data-fastpanel-ui-layout='distributed'] .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col > .fi-sc-component {
  padding: 0.75rem;
  border: 1px solid var(--native-ui-border, var(--gray-200));
  border-radius: 1rem;
  background: var(--native-ui-inset, var(--gray-50));
}
html[data-fastpanel-ui-layout='distributed'] .fi-wi-stats-overview .fi-wi-stats-overview-stat {
  border-radius: 1.15rem;
}
html[data-fastpanel-ui-layout='columns'] .fi-wi-stats-overview .fi-section-content, html[data-fastpanel-ui-layout='columns'] .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content {
  grid-template-columns: minmax(0, 1fr);
}
html[data-fastpanel-ui-layout='columns'] .native-card-rail > .fi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  overflow: visible;
}
html[data-fastpanel-ui-layout='scroll'] .native-card-rail > .fi-grid {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--native-ui-border, #94a3b8) transparent;
  scrollbar-width: thin;
  padding: 0.4rem 0.2rem 0.9rem;
}
html[data-fastpanel-ui-layout='scroll'] .native-card-rail > .fi-grid > .fi-grid-col, html[data-fastpanel-ui-layout='scroll'] .native-card-rail > .fi-grid > .fi-grid-col > .fi-sc-component {
  flex: 0 0 clamp(17rem, 36vw, 28rem);
  min-width: clamp(17rem, 36vw, 28rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-compact'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='scroll-wide'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: var(--native-ui-border, #94a3b8) transparent;
  scrollbar-width: thin;
  padding: 0.4rem 0.2rem 0.9rem;
}
html[data-fastpanel-ui-layout='scroll-compact'] .native-card-rail > .fi-grid > .fi-grid-col, html[data-fastpanel-ui-layout='scroll-compact'] .native-card-rail > .fi-grid > .fi-grid-col > .fi-sc-component {
  flex: 0 0 clamp(11rem, 27vw, 17rem);
  min-width: clamp(11rem, 27vw, 17rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-wide'] .native-card-rail > .fi-grid > .fi-grid-col, html[data-fastpanel-ui-layout='scroll-wide'] .native-card-rail > .fi-grid > .fi-grid-col > .fi-sc-component {
  flex: 0 0 clamp(20rem, 43vw, 32rem);
  min-width: clamp(20rem, 43vw, 32rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col, html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col > .fi-sc-component {
  flex: 0 0 clamp(15rem, 33vw, 23rem);
  min-width: clamp(15rem, 33vw, 23rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 1) .fi-section, html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 1) .fi-wi-widget {
  border-inline-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 2) .fi-section, html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 2) .fi-wi-widget {
  border-inline-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n) .fi-section, html[data-fastpanel-ui-layout='scroll-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n) .fi-wi-widget {
  border-inline-start: 4px solid #f97316;
}
html[data-fastpanel-ui-widget='vivid'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border: 1px solid var(--primary-600);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--primary-600) 55%, #ec4899);
  }
  box-shadow: 0 12px 26px var(--primary-600);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-600) 18%, transparent);
  }
}
html[data-fastpanel-ui-widget='bright'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #fff 0%, #eff6ff 55%, #fdf2f8 100%);
  border-color: #93c5fd;
  box-shadow: 0 8px 22px rgb(59 130 246 / 12%);
}
html.dark[data-fastpanel-ui-widget='bright'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #253349 0%, #282747 55%, #3b263b 100%);
  border-color: #818cf8;
}
html[data-fastpanel-ui-widget='mono'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #94a3b8;
  box-shadow: 0 5px 16px rgb(15 23 42 / 8%);
}
html.dark[data-fastpanel-ui-widget='mono'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #334155 0%, #1e293b 100%);
  border-color: #64748b;
}
html[data-fastpanel-ui-widget='gradient'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(135deg, var(--primary-500), #fdf2f8 52%, #ecfeff);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 14%, white), #fdf2f8 52%, #ecfeff);
  }
  border-color: var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--primary-500) 52%, #f472b6);
  }
}
html.dark[data-fastpanel-ui-widget='gradient'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(135deg, #202b48, #3b203b 52%, #123b43);
}
html[data-fastpanel-ui-widget='neon'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: #172033;
  border: 1px solid #22d3ee;
  box-shadow: none;
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='outline'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: var(--native-ui-surface, #fff);
  border: 2px solid var(--native-ui-border, var(--primary-500));
  box-shadow: none;
}
html[data-fastpanel-ui-widget='compact'] :is(.fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  padding: 0.7rem;
}
html[data-fastpanel-ui-widget='soft'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-color: #dbeafe;
  border-radius: 1.35rem;
  box-shadow: 0 6px 20px rgb(100 116 139 / 9%);
}
html.dark[data-fastpanel-ui-widget='soft'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-color: #475569;
}
html[data-fastpanel-ui-widget='colorful'] .fi-wi-stats-overview-stat:nth-child(4n + 1) {
  border-block-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-widget='colorful'] .fi-wi-stats-overview-stat:nth-child(4n + 2) {
  border-block-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-widget='colorful'] .fi-wi-stats-overview-stat:nth-child(4n + 3) {
  border-block-start: 4px solid #f97316;
}
html[data-fastpanel-ui-widget='colorful'] .fi-wi-stats-overview-stat:nth-child(4n) {
  border-block-start: 4px solid #d946ef;
}
html[data-fastpanel-ui-widget='solid'] .fi-wi-stats-overview-stat {
  background: linear-gradient(135deg, var(--primary-700), var(--primary-500));
  border-color: var(--primary-700);
  color: white;
}
html[data-fastpanel-ui-card='elevated'] .fi-section, html[data-fastpanel-ui-card='elevated'] .native-ui-preview-card {
  box-shadow: 0 16px 34px rgb(15 23 42 / 13%);
  transform: translateY(-1px);
}
html[data-fastpanel-ui-card='outline'] .fi-section, html[data-fastpanel-ui-card='outline'] .native-ui-preview-card {
  background: var(--native-ui-surface, #fff);
  border: 2px solid var(--native-ui-border, var(--gray-300));
  box-shadow: none;
}
html[data-fastpanel-ui-card='gradient'] .fi-section, html[data-fastpanel-ui-card='gradient'] .native-ui-preview-card {
  background: linear-gradient(145deg, var(--native-ui-surface, white), var(--native-ui-border, #94a3b8));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg, var(--native-ui-surface, white), color-mix(in srgb, var(--native-ui-border, #94a3b8) 12%, white));
  }
}
html.dark[data-fastpanel-ui-card='gradient'] .fi-section, html.dark[data-fastpanel-ui-card='gradient'] .native-ui-preview-card {
  background: linear-gradient(145deg, var(--native-ui-surface, #1e293b), var(--native-ui-border, #64748b));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg, var(--native-ui-surface, #1e293b), color-mix(in srgb, var(--native-ui-border, #64748b) 22%, #111827));
  }
}
html[data-fastpanel-ui-card='compact'] .fi-section-header {
  padding-block: 0.65rem;
}
html[data-fastpanel-ui-card='compact'] .fi-section-content-ctn > .fi-section-content {
  gap: 0.65rem;
  padding: 0.75rem;
}
html[data-fastpanel-ui-card='editorial'] .fi-section-header {
  border-block-end: 2px solid var(--native-ui-border, var(--primary-300));
}
html[data-fastpanel-ui-card='floating'] .fi-section, html[data-fastpanel-ui-card='floating'] .native-ui-preview-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
html[data-fastpanel-ui-card='floating'] .fi-section:hover, html[data-fastpanel-ui-card='floating'] .native-ui-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgb(15 23 42 / 15%);
}
html[data-fastpanel-ui-card='framed'] .fi-section, html[data-fastpanel-ui-card='framed'] .native-ui-preview-card {
  outline: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 42%, transparent);
  }
  outline-offset: 3px;
}
html[data-fastpanel-ui-card='accent'] .fi-section, html[data-fastpanel-ui-card='accent'] .native-ui-preview-card {
  border-inline-start: 5px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-card='split'] .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content, html[data-fastpanel-ui-card='split'] .native-ui-preview-card__tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-fastpanel-ui-card='columns'] .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content, html[data-fastpanel-ui-card='columns'] .native-ui-preview-card__column-items {
  grid-template-columns: minmax(0, 1fr);
}
html[data-fastpanel-ui-card='mosaic'] .native-detail-card .fi-in-entry-wrp, html[data-fastpanel-ui-card='mosaic'] .native-detail-card .fi-in-repeatable-item, html[data-fastpanel-ui-card='mosaic'] .native-ui-preview-card__tiles > div {
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 52%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, var(--gray-50));
  box-shadow: 0 5px 14px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-list='rows'] .fi-ta-tbody > tr:nth-child(even) {
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 7%, transparent);
  }
}
html[data-fastpanel-ui-list='cards'] .fi-ta-table {
  border-collapse: separate;
  border-spacing: 0 0.45rem;
}
html[data-fastpanel-ui-list='cards'] .fi-ta-tbody > tr {
  outline: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 36%, transparent);
  }
  background: var(--native-ui-surface, var(--gray-50));
}
html[data-fastpanel-ui-list='cards'] .fi-ta-tbody > tr > td:first-child {
  border-start-start-radius: 0.75rem;
  border-end-start-radius: 0.75rem;
}
html[data-fastpanel-ui-list='cards'] .fi-ta-tbody > tr > td:last-child {
  border-start-end-radius: 0.75rem;
  border-end-end-radius: 0.75rem;
}
html[data-fastpanel-ui-list='compact'] .fi-ta-tbody > tr > td {
  padding-block: 0.45rem;
}
html[data-fastpanel-ui-list='spacious'] .fi-ta-tbody > tr > td {
  padding-block: 1rem;
}
html[data-fastpanel-ui-list='horizontal'] .fi-ta-content, html[data-fastpanel-ui-list='horizontal-compact'] .fi-ta-content, html[data-fastpanel-ui-list='horizontal-wide'] .fi-ta-content {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-list='horizontal-compact'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-list='horizontal-wide'] .native-card-rail > .fi-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.35rem 0.2rem 0.8rem;
}
html[data-fastpanel-ui-list='horizontal'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(16rem, 32vw, 24rem);
  min-width: clamp(16rem, 32vw, 24rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-compact'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(11rem, 24vw, 16rem);
  min-width: clamp(11rem, 24vw, 16rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-wide'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(21rem, 45vw, 34rem);
  min-width: clamp(21rem, 45vw, 34rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='chips'] .native-card-rail > .fi-grid > .fi-grid-col .fi-section {
  border-radius: 999px;
}
html[data-fastpanel-ui-list='metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 1) .fi-section, html[data-fastpanel-ui-list='metrics'] .fi-ta-tbody > tr:nth-child(3n + 1) {
  border-inline-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-list='metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 2) .fi-section, html[data-fastpanel-ui-list='metrics'] .fi-ta-tbody > tr:nth-child(3n + 2) {
  border-inline-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-list='metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n) .fi-section, html[data-fastpanel-ui-list='metrics'] .fi-ta-tbody > tr:nth-child(3n) {
  border-inline-start: 4px solid #f97316;
}
html[data-fastpanel-ui-list='timeline'] .fi-ta-tbody > tr > td:first-child {
  border-inline-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='timeline'] .native-card-rail > .fi-grid {
  grid-template-columns: minmax(0, 1fr);
}
html[data-fastpanel-ui-list='colorful'] .fi-ta-tbody > tr:nth-child(4n + 1) {
  border-inline-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-list='colorful'] .fi-ta-tbody > tr:nth-child(4n + 2) {
  border-inline-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-list='colorful'] .fi-ta-tbody > tr:nth-child(4n + 3) {
  border-inline-start: 4px solid #f97316;
}
html[data-fastpanel-ui-list='colorful'] .fi-ta-tbody > tr:nth-child(4n) {
  border-inline-start: 4px solid #d946ef;
}
html[data-fastpanel-ui-list='striped'] .fi-ta-tbody > tr:nth-child(odd) {
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 9%, transparent);
  }
}
html[data-fastpanel-ui-list='borderless'] .fi-ta-tbody > tr > td {
  border-block-end-color: transparent;
}
.native-ui-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  width: 100%;
  min-width: 0;
  container-name: native-ui-catalog;
  container-type: inline-size;
}
.native-ui-gallery__group {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--gray-200);
  border-radius: 1.25rem;
  background: var(--gray-50);
}
.dark .native-ui-gallery__group {
  border-color: var(--gray-700);
  background: var(--gray-900);
}
.native-ui-gallery__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.native-ui-gallery__heading h3 {
  margin: 0;
  color: var(--gray-950);
  font-size: 1rem;
  font-weight: 750;
}
.dark .native-ui-gallery__heading h3 {
  color: var(--gray-50);
}
.native-ui-gallery__heading p {
  margin: 0.35rem 0 0;
  color: var(--gray-600);
  font-size: 0.82rem;
  line-height: 1.7;
}
.native-ui-gallery__scope {
  flex: 0 0 auto;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-600);
  font-size: 0.7rem;
}
.native-ui-gallery__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.65rem;
}
.native-ui-gallery__choice {
  display: flex;
  min-width: 0;
  min-height: 4.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  background: var(--gray-50);
  color: var(--gray-950);
  text-align: start;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.dark .native-ui-gallery__choice {
  border-color: var(--gray-700);
  background: var(--gray-800);
  color: var(--gray-50);
}
.native-ui-gallery__choice:hover, .native-ui-gallery__choice:focus-visible {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent);
  }
  outline: none;
}
.native-ui-gallery__choice.is-active {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 2px var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-500) 22%, transparent);
  }
}
.native-ui-gallery__swatch {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgb(15 23 42 / 12%);
  border-radius: 0.8rem;
}
.native-ui-gallery__swatch--native {
  background: linear-gradient(135deg, #475569, #94a3b8);
}
.native-ui-gallery__swatch--vivid {
  background: linear-gradient(135deg, #2563eb, #7c3aed 58%, #db2777);
}
.native-ui-gallery__swatch--light {
  background: linear-gradient(135deg, #fff, #dbeafe);
}
.native-ui-gallery__swatch--mono {
  background: linear-gradient(135deg, #0f172a, #64748b, #e2e8f0);
}
.native-ui-gallery__swatch--spectrum {
  background: linear-gradient(135deg, #06b6d4, #22c55e 35%, #f97316 68%, #d946ef);
}
.native-ui-gallery__swatch--ocean {
  background: linear-gradient(135deg, #0284c7, #22d3ee 55%, #6366f1);
}
.native-ui-gallery__swatch--sunset {
  background: linear-gradient(135deg, #f97316, #fb7185 55%, #c026d3);
}
.native-ui-gallery__swatch--emerald {
  background: linear-gradient(135deg, #047857, #34d399 55%, #14b8a6);
}
.native-ui-gallery__swatch--amber {
  background: linear-gradient(135deg, #b45309, #fbbf24 55%, #fb923c);
}
.native-ui-gallery__swatch--rose {
  background: linear-gradient(135deg, #e11d48, #fb7185 55%, #f0abfc);
}
.native-ui-gallery__swatch--violet {
  background: linear-gradient(135deg, #4c1d95, #8b5cf6 55%, #d946ef);
}
.native-ui-gallery__swatch--graphite {
  background: linear-gradient(135deg, #0f172a, #64748b 55%, #cbd5e1);
}
.native-ui-gallery__swatch--aqua {
  background: linear-gradient(135deg, #0e7490, #06b6d4 55%, #93c5fd);
}
.native-ui-gallery__swatch--royal {
  background: linear-gradient(135deg, #1e3a8a, #4f46e5 55%, #818cf8);
}
.native-ui-gallery__choice-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.2rem;
}
.native-ui-gallery__choice-copy strong {
  font-size: 0.82rem;
  line-height: 1.45;
}
.native-ui-gallery__choice-copy small {
  color: var(--gray-500);
  font-size: 0.68rem;
  line-height: 1.5;
}
.native-ui-gallery__check {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: var(--primary-600);
  opacity: 0;
}
.native-ui-gallery__choice.is-active .native-ui-gallery__check {
  opacity: 1;
}
.native-ui-gallery__layout-icon {
  position: relative;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.65rem;
  background: var(--gray-100);
}
.native-ui-gallery__layout-icon::before, .native-ui-gallery__layout-icon::after {
  position: absolute;
  border: 1px solid var(--primary-500);
  border-radius: 0.2rem;
  background: var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--primary-400) 25%, white);
  }
  content: '';
}
.native-ui-gallery__layout-icon--distributed::before {
  inset: 0.3rem 1.1rem 1.1rem 0.3rem;
}
.native-ui-gallery__layout-icon--distributed::after {
  inset: 1.1rem 0.3rem 0.3rem 1.1rem;
}
.native-ui-gallery__layout-icon--columns::before {
  inset: 0.25rem 0.35rem 1.25rem;
}
.native-ui-gallery__layout-icon--columns::after {
  inset: 1.25rem 0.35rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll::before {
  inset: 0.35rem 1.15rem 0.35rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll::after {
  inset: 0.35rem 0.25rem 0.35rem 1.3rem;
}
.native-ui-gallery__layout-icon--standard::before {
  inset: 0.3rem 0.95rem 0.3rem 0.3rem;
}
.native-ui-gallery__layout-icon--standard::after {
  inset: 0.3rem 0.3rem 0.3rem 1.3rem;
}
.native-ui-gallery__layout-icon--scroll-compact::before {
  inset: 0.55rem 1.25rem 0.55rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll-compact::after {
  inset: 0.55rem 0.25rem 0.55rem 1.35rem;
}
.native-ui-gallery__layout-icon--scroll-wide::before {
  inset: 0.25rem 0.95rem 0.25rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll-wide::after {
  inset: 0.25rem 0.25rem 0.25rem 1.05rem;
}
.native-ui-gallery__layout-icon--scroll-metrics::before {
  inset: 0.25rem 1.15rem 1.1rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll-metrics::after {
  inset: 1.1rem 0.25rem 0.25rem 1.15rem;
}
.native-ui-gallery__layout-icon--mosaic::before {
  inset: 0.25rem 0.95rem 0.85rem 0.25rem;
}
.native-ui-gallery__layout-icon--mosaic::after {
  inset: 0.95rem 0.25rem 0.25rem 1.05rem;
}
.native-ui-gallery__layout-icon--stack::before {
  inset: 0.25rem 0.35rem 1.15rem;
}
.native-ui-gallery__layout-icon--stack::after {
  inset: 1.05rem 0.55rem 0.2rem;
}
.native-ui-gallery__layout-icon--split::before {
  inset: 0.25rem 1.2rem 0.25rem 0.25rem;
}
.native-ui-gallery__layout-icon--split::after {
  inset: 0.25rem 0.25rem 0.25rem 1.3rem;
}
.native-ui-gallery__layout-icon--grid-asymmetric::before {
  inset: 0.25rem 0.8rem 0.65rem 0.25rem;
}
.native-ui-gallery__layout-icon--grid-asymmetric::after {
  inset: 0.8rem 0.25rem 0.25rem 1.2rem;
}
.native-ui-gallery__layout-icon--scroll-cards::before {
  inset: 0.25rem 1.1rem 0.25rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll-cards::after {
  inset: 0.45rem 0.25rem 0.45rem 1.15rem;
}
.native-ui-gallery__layout-icon--scroll-chips::before {
  inset: 0.55rem 1.15rem 0.55rem 0.2rem;
  border-radius: 999px;
}
.native-ui-gallery__layout-icon--scroll-chips::after {
  inset: 0.55rem 0.2rem 0.55rem 1.25rem;
  border-radius: 999px;
}
.native-ui-gallery__layout-icon--scroll-timeline::before {
  inset: 0.25rem 1.1rem 0.25rem 0.25rem;
}
.native-ui-gallery__layout-icon--scroll-timeline::after {
  inset: 0.55rem 0.25rem 0.55rem 1.2rem;
}
.native-ui-gallery__choice-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  align-content: center;
  gap: 0.2rem;
  padding: 0.35rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.7rem;
  background: var(--gray-100);
}
.native-ui-gallery__choice-mark i {
  display: block;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--primary-500);
}
.native-ui-gallery__choice-mark i:nth-child(2) {
  width: 70%;
  background: #22c55e;
}
.native-ui-gallery__choice-mark i:nth-child(3) {
  width: 48%;
  background: #f97316;
}
.native-ui-gallery__choice-mark--widget {
  align-content: end;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 0.18rem;
}
.native-ui-gallery__choice-mark--widget i {
  height: 0.55rem;
  border-radius: 0.2rem;
}
.native-ui-gallery__choice-mark--widget i:nth-child(2) {
  height: 0.95rem;
}
.native-ui-gallery__choice-mark--widget i:nth-child(3) {
  height: 0.72rem;
}
.native-ui-gallery__choice-mark--card {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.17rem;
}
.native-ui-gallery__choice-mark--card i {
  height: 0.55rem;
  border-radius: 0.2rem;
}
.native-ui-gallery__choice-mark--card i:first-child {
  grid-column: 1 / -1;
  height: 0.35rem;
}
.native-ui-gallery__choice-mark--list {
  align-content: center;
}
.native-ui-gallery__choice-mark--layout i {
  height: 0.4rem;
  border-radius: 0.2rem;
}
.native-ui-gallery__previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: stretch;
  gap: 0.85rem;
}
.native-ui-preview-card {
  display: grid;
  min-width: 0;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 1.15rem;
  background: var(--white);
  box-shadow: 0 5px 16px rgb(15 23 42 / 6%);
}
.native-ui-preview-card header, .native-ui-preview-card footer {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
}
.native-ui-preview-card header > div {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}
.native-ui-preview-card header strong {
  font-size: 0.85rem;
}
.native-ui-preview-card header small, .native-ui-preview-card footer {
  color: var(--gray-500);
  font-size: 0.68rem;
}
.native-ui-preview-card__icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--primary-500) 14%, white);
  }
  color: var(--primary-700);
  font-size: 1.1rem;
}
.native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.native-ui-preview-card__tiles > div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  padding: 0.65rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.8rem;
  background: var(--gray-50);
}
.native-ui-preview-card__tiles small, .native-ui-preview-card__tiles span {
  color: var(--gray-500);
  font-size: 0.62rem;
}
.native-ui-preview-card__tiles strong {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}
.native-ui-preview-card__tiles > div:nth-child(2) {
  background: color-mix(in srgb, #06b6d4 9%, white);
}
.native-ui-preview-card__tiles > div:nth-child(3) {
  background: color-mix(in srgb, #22c55e 9%, white);
}
.native-ui-preview-card__tiles > div:nth-child(4) {
  background: color-mix(in srgb, #f97316 9%, white);
}
.native-ui-preview-card--mosaic footer b {
  color: #16a34a;
}
.native-ui-preview-card__meter {
  height: 0.35rem;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-200);
}
.native-ui-preview-card__meter i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #06b6d4, #6366f1, #d946ef);
}
.native-ui-preview-card__column-items {
  display: grid;
  gap: 0.5rem;
}
.native-ui-preview-card__column-items > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.8rem;
  background: var(--gray-50);
}
.native-ui-preview-card__column-items > div > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.15rem;
}
.native-ui-preview-card__column-items small {
  color: var(--gray-500);
  font-size: 0.63rem;
}
.native-ui-preview-card__column-items strong {
  overflow-wrap: anywhere;
  font-size: 0.74rem;
}
.native-ui-preview-card__column-items b {
  color: var(--primary-700);
  font-size: 0.65rem;
}
.native-ui-preview-card__dot {
  width: 0.6rem;
  height: 0.6rem;
  flex: 0 0 auto;
  border-radius: 50%;
}
.native-ui-preview-card__dot.is-blue {
  background: #0ea5e9;
}
.native-ui-preview-card__dot.is-green {
  background: #22c55e;
}
.native-ui-preview-card__dot.is-violet {
  background: #8b5cf6;
}
.native-ui-preview-card__rail {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.15rem 0 0.55rem;
}
.native-ui-preview-card__rail > div {
  display: grid;
  min-width: 8.5rem;
  gap: 0.4rem;
  padding: 0.7rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.85rem;
  background: var(--gray-50);
  scroll-snap-align: start;
}
.native-ui-preview-card__rail span {
  font-size: 0.7rem;
  font-weight: 650;
}
.native-ui-preview-card__rail strong {
  width: fit-content;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.62rem;
}
.native-ui-preview-card__rail small {
  color: var(--gray-500);
  font-size: 0.62rem;
}
.native-ui-preview-card--horizontal footer {
  justify-content: space-between;
}
.native-ui-preview-card__rail--chips > div {
  display: flex;
  min-width: max-content;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: var(--native-ui-inset, var(--gray-50));
}
.native-ui-preview-card__rail--chips span {
  color: var(--gray-700);
  white-space: nowrap;
}
.native-ui-preview-card__rail--metrics > div {
  min-width: 9.5rem;
  border-block-start: 3px solid var(--native-ui-border, var(--gray-300));
}
.native-ui-preview-card__rail--metrics > div:nth-child(3n + 1) strong {
  background: #cffafe;
  color: #155e75;
}
.native-ui-preview-card__rail--metrics > div:nth-child(3n + 2) strong {
  background: #dcfce7;
  color: #166534;
}
.native-ui-preview-card__rail--metrics > div:nth-child(3n) strong {
  background: #ffedd5;
  color: #9a3412;
}
.native-ui-preview-card__rail--shortcuts > div {
  min-width: 7.5rem;
  justify-items: center;
  text-align: center;
}
.native-ui-preview-card__rail--shortcuts > div > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 16%, white);
  }
  color: var(--primary-700);
  font-size: 1rem;
}
.native-ui-preview-card__rail--shortcuts strong {
  background: none;
  color: var(--gray-800);
  font-size: 0.72rem;
}
html[data-fastpanel-ui-layout='columns'] .native-ui-gallery__previews {
  grid-template-columns: minmax(0, 1fr);
}
html[data-fastpanel-ui-layout='scroll'] .native-ui-gallery__previews {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.2rem 0 0.75rem;
}
html[data-fastpanel-ui-layout='scroll'] .native-ui-gallery__previews > .native-ui-preview-card {
  flex: 0 0 min(26rem, calc(100vw - 4rem));
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-compact'] .native-ui-gallery__previews {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
html[data-fastpanel-ui-layout='scroll-wide'] .native-ui-gallery__previews > .native-ui-preview-card {
  min-width: min(32rem, 100%);
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-ui-preview-card--metric-rail .native-ui-preview-card__rail > div:nth-child(3n + 1) {
  border-color: #06b6d4;
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-ui-preview-card--metric-rail .native-ui-preview-card__rail > div:nth-child(3n + 2) {
  border-color: #22c55e;
}
html[data-fastpanel-ui-layout='scroll-metrics'] .native-ui-preview-card--metric-rail .native-ui-preview-card__rail > div:nth-child(3n) {
  border-color: #f97316;
}
html[data-fastpanel-ui-list='rows'] .native-ui-preview-card__rail > div:nth-child(even) {
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 10%, white);
  }
}
html.dark[data-fastpanel-ui-list='rows'] .native-ui-preview-card__rail > div:nth-child(even) {
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 20%, #111827);
  }
}
html[data-fastpanel-ui-list='cards'] .native-ui-preview-card__rail > div {
  box-shadow: 0 5px 14px rgb(15 23 42 / 8%);
}
html[data-fastpanel-ui-list='compact'] .native-ui-preview-card__rail > div {
  min-width: 7rem;
  gap: 0.25rem;
  padding: 0.45rem;
}
html[data-fastpanel-ui-list='spacious'] .native-ui-preview-card__rail > div {
  min-width: 10rem;
  gap: 0.6rem;
  padding: 0.95rem;
}
html[data-fastpanel-ui-list='horizontal-compact'] .native-ui-preview-card__rail > div {
  min-width: 7rem;
}
html[data-fastpanel-ui-list='horizontal-wide'] .native-ui-preview-card__rail > div {
  min-width: 13rem;
}
html[data-fastpanel-ui-list='chips'] .native-ui-preview-card__rail > div {
  border-radius: 999px;
}
html[data-fastpanel-ui-list='timeline'] .native-ui-preview-card__rail > div {
  border-inline-start: 3px solid var(--native-ui-border, var(--primary-500));
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
html[data-fastpanel-ui-list='colorful'] .native-ui-preview-card__rail > div:nth-child(4n + 1) {
  border-block-start: 3px solid #06b6d4;
}
html[data-fastpanel-ui-list='colorful'] .native-ui-preview-card__rail > div:nth-child(4n + 2) {
  border-block-start: 3px solid #22c55e;
}
html[data-fastpanel-ui-list='colorful'] .native-ui-preview-card__rail > div:nth-child(4n + 3) {
  border-block-start: 3px solid #f97316;
}
html[data-fastpanel-ui-list='colorful'] .native-ui-preview-card__rail > div:nth-child(4n) {
  border-block-start: 3px solid #d946ef;
}
html[data-fastpanel-ui-list='striped'] .native-ui-preview-card__rail > div:nth-child(odd) {
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 10%, white);
  }
}
html[data-fastpanel-ui-list='borderless'] .native-ui-preview-card__rail > div {
  border-color: transparent;
  box-shadow: none;
}
html[data-fastpanel-ui-layout='mosaic'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-ui-gallery__previews {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='mosaic'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
html[data-fastpanel-ui-layout='mosaic'] .native-ui-gallery__previews > .native-ui-preview-card:first-child, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-ui-gallery__previews > .native-ui-preview-card:first-child, html[data-fastpanel-ui-layout='mosaic'] .native-card-rail > .fi-grid > .fi-grid-col:first-child, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid > .fi-grid-col:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='stack'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='stack'] .native-card-rail > .fi-grid {
  grid-template-columns: minmax(0, 1fr);
}
html[data-fastpanel-ui-layout='split'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='split'] .native-card-rail > .fi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='split'] .native-ui-gallery__previews > .native-ui-preview-card:first-child, html[data-fastpanel-ui-layout='split'] .native-card-rail > .fi-grid > .fi-grid-col:first-child {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='grid-asymmetric'] .native-ui-gallery__previews > .native-ui-preview-card:nth-child(3n), html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n) {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='scroll-cards'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='scroll-chips'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='scroll-timeline'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='scroll-cards'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='scroll-chips'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='scroll-timeline'] .native-card-rail > .fi-grid {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.2rem 0 0.75rem;
}
html[data-fastpanel-ui-layout='scroll-cards'] .native-ui-gallery__previews > .native-ui-preview-card {
  flex: 0 0 min(20rem, calc(100vw - 4rem));
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-chips'] .native-ui-gallery__previews > .native-ui-preview-card {
  flex: 0 0 min(15rem, calc(100vw - 4rem));
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-timeline'] .native-ui-gallery__previews > .native-ui-preview-card {
  flex: 0 0 min(24rem, calc(100vw - 4rem));
  scroll-snap-align: start;
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-layout='scroll-cards'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(15rem, 30vw, 22rem);
  min-width: clamp(15rem, 30vw, 22rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-chips'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(9rem, 19vw, 13rem);
  min-width: clamp(9rem, 19vw, 13rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-timeline'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(16rem, 32vw, 24rem);
  min-width: clamp(16rem, 32vw, 24rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-timeline'] .native-card-rail .fi-section {
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-layout='scroll-chips'] .native-ui-preview-card__rail > div, html[data-fastpanel-ui-layout='scroll-chips'] .native-card-rail .fi-section {
  border-radius: 999px;
}
@media (max-width: 40rem) {
  .native-ui-gallery__scope {
    display: none;
  }
  .native-ui-gallery__group {
    padding: 0.85rem;
  }
  .native-ui-gallery__choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .native-ui-gallery__choice {
    min-height: 4.2rem;
    gap: 0.45rem;
    padding: 0.55rem;
  }
  .native-ui-gallery__choice-copy strong {
    font-size: 0.72rem;
  }
  .native-ui-gallery__choice-copy small {
    font-size: 0.6rem;
  }
  .native-ui-gallery__swatch, .native-ui-gallery__choice-mark {
    width: 1.85rem;
    height: 1.85rem;
    flex-basis: 1.85rem;
    border-radius: 0.55rem;
  }
  .native-ui-gallery__check {
    width: 0.9rem;
    height: 0.9rem;
  }
  .native-ui-gallery__previews {
    grid-template-columns: minmax(0, 1fr);
  }
  .native-ui-preview-card__tiles {
    gap: 0.4rem;
  }
  html[data-fastpanel-ui-layout='mosaic'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-ui-gallery__previews, html[data-fastpanel-ui-layout='split'] .native-ui-gallery__previews {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-layout='mosaic'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='split'] .native-card-rail > .fi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-layout='mosaic'] .native-ui-gallery__previews > .native-ui-preview-card:first-child, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-ui-gallery__previews > .native-ui-preview-card:first-child, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-ui-gallery__previews > .native-ui-preview-card:nth-child(3n), html[data-fastpanel-ui-layout='split'] .native-ui-gallery__previews > .native-ui-preview-card:first-child, html[data-fastpanel-ui-layout='mosaic'] .native-card-rail > .fi-grid > .fi-grid-col:first-child, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid > .fi-grid-col:first-child, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n), html[data-fastpanel-ui-layout='split'] .native-card-rail > .fi-grid > .fi-grid-col:first-child {
    grid-column: auto;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='mosaic'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='grid-asymmetric'] .native-card-rail > .fi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.fi-sidebar-header .native-sidebar-brand-name, .fi-topbar .native-sidebar-brand-name {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: 0.55rem;
  color: var(--gray-950);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.dark .fi-sidebar-header .native-sidebar-brand-name {
  color: var(--gray-50);
}
.fi-wi-stats-overview .fi-sc-section:not(.native-dashboard-summary-card) > .fi-section .fi-section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
  gap: 0.75rem;
  overflow: visible;
}
.fi-wi-stats-overview .fi-section-content > .fi-grid-col {
  width: 100%;
  min-width: 0;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat {
  min-width: 0;
  height: 100%;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='success'] {
  background-color: var(--success-100);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--success-100) 72%, white);
  }
  border-color: var(--success-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--success-400) 55%, white);
  }
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='info'] {
  background-color: var(--info-100);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--info-100) 72%, white);
  }
  border-color: var(--info-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--info-400) 55%, white);
  }
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='warning'] {
  background-color: var(--warning-100);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--warning-100) 72%, white);
  }
  border-color: var(--warning-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--warning-400) 55%, white);
  }
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='danger'] {
  background-color: var(--danger-100);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--danger-100) 72%, white);
  }
  border-color: var(--danger-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--danger-400) 55%, white);
  }
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='primary'] {
  background-color: var(--primary-100);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--primary-100) 72%, white);
  }
  border-color: var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--primary-400) 55%, white);
  }
}
.dark .fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='success'] {
  background-color: var(--success-600);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--success-600) 28%, var(--gray-900));
  }
  border-color: var(--success-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--success-400) 60%, var(--gray-700));
  }
}
.dark .fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='info'] {
  background-color: var(--info-600);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--info-600) 28%, var(--gray-900));
  }
  border-color: var(--info-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--info-400) 60%, var(--gray-700));
  }
}
.dark .fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='warning'] {
  background-color: var(--warning-600);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--warning-600) 28%, var(--gray-900));
  }
  border-color: var(--warning-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--warning-400) 60%, var(--gray-700));
  }
}
.dark .fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='danger'] {
  background-color: var(--danger-600);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--danger-600) 28%, var(--gray-900));
  }
  border-color: var(--danger-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--danger-400) 60%, var(--gray-700));
  }
}
.dark .fi-wi-stats-overview .fi-wi-stats-overview-stat[data-native-stat-color='primary'] {
  background-color: var(--primary-600);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--primary-600) 28%, var(--gray-900));
  }
  border-color: var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--primary-400) 60%, var(--gray-700));
  }
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat-label-ctn {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat-value {
  min-width: 0;
  max-width: 100%;
  justify-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat-description {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.fi-wi-stats-overview .fi-wi-stats-overview-stat-description > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col > .fi-sc-component {
  height: 100%;
}
.native-usage-progress {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.native-usage-progress__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--fi-color-gray-600);
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.native-usage-progress__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--fi-color-gray-500);
  font-size: 0.68rem;
  line-height: 1.1rem;
}
.native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: stretch;
  gap: 0.75rem;
  overflow: visible;
}
.native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col {
  width: auto;
  min-width: 0;
}
.native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col.native-usage-progress-entry, .native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col:has(.native-usage-progress) {
  grid-column: 1 / -1;
  min-width: 0;
}
.native-usage-card .native-usage-progress__details > span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col.native-usage-progress-entry, .native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col:has(.native-usage-progress) {
    min-width: 0;
  }
}
.dark .native-usage-progress__details {
  color: var(--fi-color-gray-400);
}
.dark .native-usage-progress__meta {
  color: var(--fi-color-gray-300);
}
.native-usage-progress__track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fi-color-gray-200);
}
.dark .native-usage-progress__track {
  background: var(--fi-color-gray-700);
}
.native-usage-progress__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fi-color-primary-600);
  transition: width 180ms ease;
}
.native-usage-progress__track--muted span {
  width: 35%;
  background: var(--fi-color-gray-400);
  opacity: 0.6;
}
.native-usage-progress-bar {
  display: grid;
  min-width: 9rem;
  gap: 0.35rem;
}
.native-usage-progress-bar__label {
  color: var(--fi-color-gray-600);
  font-size: 0.75rem;
  line-height: 1.2rem;
  white-space: nowrap;
}
.native-usage-progress-bar__track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fi-color-gray-200);
}
.native-usage-progress-bar__track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--fi-color-primary-600);
}
.native-usage-progress-bar__track--muted span {
  width: 35%;
  background: var(--fi-color-gray-400);
  opacity: 0.6;
}
.dark .native-usage-progress-bar__label {
  color: var(--fi-color-gray-300);
}
.dark .native-usage-progress-bar__track {
  background: var(--fi-color-gray-700);
}
.native-card-rail.fi-in-repeatable:not(.fi-in-table-repeatable) {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0.15rem 0.8rem;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
}
.native-card-rail.fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item {
  flex: 0 0 min(30rem, max(0px, calc(100vw - 3rem)));
  min-width: min(30rem, max(0px, calc(100vw - 3rem)));
  scroll-snap-align: start;
}
.native-ranking-policies.native-card-rail.fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item {
  flex-basis: min(21rem, max(0px, calc(100vw - 3rem)));
  min-width: min(21rem, max(0px, calc(100vw - 3rem)));
}
.native-card-rail.fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  white-space: normal;
}
.fi-in-repeatable:not(.fi-in-table-repeatable) {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  overflow: visible;
  padding: 0.25rem 0.15rem 0.75rem;
  overscroll-behavior-inline: auto;
}
.fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  white-space: normal;
  scroll-snap-align: none;
}
@media (max-width: 767px) {
  .native-card-rail > .fi-grid > .fi-grid-col {
    flex-basis: min(30rem, max(0px, calc(100vw - 5rem)));
    min-width: min(30rem, max(0px, calc(100vw - 5rem)));
  }
  .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item > .fi-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    overflow: visible;
  }
  .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item > .fi-grid > .fi-grid-col {
    width: auto;
    min-width: 0;
  }
  .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item .fi-in-entry-content, .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item .fi-in-text-item, .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item .fi-badge {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
.native-card-rail {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0.15rem 0.75rem;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--gray-500) transparent;
  scrollbar-width: thin;
}
.native-card-rail > .fi-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
  overflow: visible;
  padding: 0;
  scrollbar-width: auto;
}
.native-card-rail > .fi-grid > .fi-grid-col, .native-card-rail > .fi-grid > .fi-grid-col > .fi-sc-component {
  flex: 0 0 min(30rem, max(0px, calc(100vw - 3rem)));
  min-width: min(30rem, max(0px, calc(100vw - 3rem)));
  display: flex;
  align-items: stretch;
  scroll-snap-align: start;
}
.native-card-rail > .fi-grid > .fi-grid-col > .fi-sc-component {
  display: flex;
  width: 100%;
}
.native-card-rail .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content, .native-card-rail .native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior-inline: auto;
}
.native-card-rail .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col, .native-card-rail .native-usage-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col {
  width: auto;
  min-width: 0;
  flex: none;
}
.native-card-rail .fi-in-repeatable:not(.fi-in-table-repeatable), .native-card-rail .native-agent-collection-card.fi-in-repeatable {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior-inline: auto;
  padding: 0.25rem 0.15rem 0.75rem;
}
.native-card-rail .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item, .native-card-rail .native-agent-collection-card.fi-in-repeatable > .fi-in-repeatable-item {
  width: auto;
  min-width: 0;
  flex: none;
  scroll-snap-align: none;
}
.native-card-rail .fi-in-repeatable:not(.fi-in-table-repeatable) > .fi-in-repeatable-item > .fi-grid {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.native-card-rail > .fi-grid .fi-section {
  width: 100%;
  height: 100%;
}
.native-vertical-card-stack {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.native-vertical-card-stack > .fi-grid, .native-vertical-card-stack > .fi-grid > .fi-grid-col, .native-vertical-card-stack > .fi-grid > .fi-grid-col > .fi-sc-component {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.native-ticket-detail-flow, .native-vertical-card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.native-ticket-detail-flow > .fi-grid, .native-ticket-detail-flow > .fi-grid > .fi-grid-col, .native-ticket-detail-flow > .fi-grid > .fi-grid-col > .fi-sc-component {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.native-ranking-policy-actions .fi-ac {
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fi-ta-content-ctn .fi-ta-table:not(.fi-ta-table-stacked-on-mobile) {
  width: max-content;
  min-width: 100%;
}
.fi-ta-content-ctn .fi-ta-table .fi-ta-text-item {
  overflow-wrap: anywhere;
}
.native-mobile-footer {
  display: none;
}
@media (max-width: 767px) {
  :root {
    --native-mobile-footer-height: 7.75rem;
    --native-mobile-footer-gap: 0.75rem;
    --native-mobile-footer-reserve: calc(
            var(--native-mobile-footer-height)
            + var(--native-mobile-footer-gap)
            + env(safe-area-inset-bottom)
        );
    --native-mobile-menu-max-height: max(
            8rem,
            min(24rem, calc(var(--native-visual-viewport-height, 100dvh) - var(--native-mobile-footer-reserve) - 1rem))
        );
  }
  .fi-wi-stats-overview .fi-section-content > .fi-grid-col {
    width: 100%;
    min-width: 0;
  }
  .fi-wi-stats-overview .fi-wi-stats-overview-stat-content {
    gap: 0.5rem;
  }
  .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content > .fi-grid-col {
    flex-basis: min(14rem, calc(100vw - 2.5rem));
    min-width: min(14rem, calc(100vw - 2.5rem));
  }
  .fi-main-ctn {
    padding-bottom: var(--native-mobile-footer-reserve);
  }
  .fi-sidebar {
    z-index: 40;
  }
  .fi-sidebar-nav {
    padding-block-end: 0.75rem;
    scroll-padding-block-end: 0.75rem;
  }
  .fi-dropdown-panel {
    max-height: var(--native-mobile-menu-max-height);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block-end: var(--native-mobile-footer-reserve);
  }
  .fi-modal-window:has([data-native-order-wizard]) {
    min-width: 0;
    max-width: calc(100vw - 1rem);
  }
  .fi-modal-content:has([data-native-order-wizard]), [data-native-order-wizard], [data-native-order-wizard] :is(section, dl, dl > div, dd, fieldset) {
    min-width: 0;
    max-width: 100%;
  }
  [data-native-order-wizard] dd {
    overflow-wrap: anywhere;
  }
  .native-mobile-footer {
    display: block;
    position: fixed;
    inset-inline: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    z-index: 30;
    pointer-events: none;
  }
  body:has(.fi-modal-open) .native-mobile-footer {
    display: none;
  }
  .native-mobile-footer__inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    max-width: 34rem;
    margin-inline: auto;
    padding: 0.45rem;
    pointer-events: auto;
    background-color: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    color-scheme: light;
    border-radius: 0.9rem;
    box-shadow: none;
  }
  .native-mobile-footer__item {
    display: inline-flex;
    min-width: 0;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.2rem;
    color: var(--gray-700);
    border: 1px solid transparent;
    border-radius: 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  }
  .native-mobile-footer__item:hover, .native-mobile-footer__item:focus-visible {
    color: var(--gray-950);
    background-color: var(--gray-100);
    outline: none;
  }
  .native-mobile-footer__item:focus-visible {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 2px var(--primary-400);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary-400) 32%, transparent);
    }
  }
  .native-mobile-footer__item.is-active {
    color: var(--primary-700);
    background-color: var(--primary-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--primary-100) 78%, transparent);
    }
    border-color: var(--primary-500);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--primary-500) 55%, transparent);
    }
  }
  .native-mobile-footer__icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
  }
  :root.dark .native-mobile-footer__inner, [data-theme='dark'] .native-mobile-footer__inner, .dark .native-mobile-footer__inner {
    background-color: var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--gray-950) 94%, var(--primary-950));
    }
    border-color: var(--gray-700);
    color: var(--gray-300);
    color-scheme: dark;
    box-shadow: 0 0.75rem 2.5rem var(--gray-950);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.75rem 2.5rem color-mix(in oklab, var(--gray-950) 42%, transparent);
    }
  }
  :root.dark .native-mobile-footer__item, [data-theme='dark'] .native-mobile-footer__item, .dark .native-mobile-footer__item {
    color: var(--gray-300);
  }
  :root.dark .native-mobile-footer__item:hover, :root.dark .native-mobile-footer__item:focus-visible, [data-theme='dark'] .native-mobile-footer__item:hover, [data-theme='dark'] .native-mobile-footer__item:focus-visible, .dark .native-mobile-footer__item:hover, .dark .native-mobile-footer__item:focus-visible {
    color: var(--color-white);
    background-color: var(--gray-800);
  }
  :root.dark .native-mobile-footer__item.is-active, [data-theme='dark'] .native-mobile-footer__item.is-active, .dark .native-mobile-footer__item.is-active {
    color: var(--primary-300);
    background-color: var(--primary-600);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--primary-600) 22%, transparent);
    }
    border-color: var(--primary-400);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--primary-400) 60%, transparent);
    }
  }
}
@media (min-width: 768px) {
  .native-mobile-footer {
    display: none;
  }
}
.native-ticket-chat {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  touch-action: pan-y;
  padding: 0.35rem;
}
.native-ticket-chat__message {
  display: flex;
  width: 100%;
  min-width: 0;
}
.native-ticket-chat__message.is-manager {
  justify-content: flex-start;
}
.native-ticket-chat__message.is-user {
  justify-content: flex-end;
}
.native-ticket-chat__message.is-system {
  justify-content: center;
}
.native-ticket-chat__message.is-outgoing {
  justify-content: flex-start;
}
.native-ticket-chat__message.is-incoming {
  justify-content: flex-end;
}
.native-ticket-chat__bubble {
  position: relative;
  width: fit-content;
  max-width: min(82%, 48rem);
  min-width: min(14rem, 100%);
  cursor: pointer;
  touch-action: pan-y;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  background: var(--gray-50);
  padding: 0.8rem 0.95rem 0.7rem;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.native-ticket-chat__bubble:hover, .native-ticket-chat__bubble:focus-visible {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-400) 18%, transparent);
  }
}
.native-ticket-chat__message.is-manager .native-ticket-chat__bubble {
  border-color: var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--primary-500) 38%, var(--gray-200));
  }
  background: var(--primary-100);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--primary-100) 62%, var(--gray-50));
  }
  border-end-start-radius: 0.35rem;
}
.native-ticket-chat__message.is-user .native-ticket-chat__bubble {
  border-color: var(--success-500);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--success-500) 32%, var(--gray-200));
  }
  background: var(--success-100);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--success-100) 52%, var(--gray-50));
  }
  border-end-end-radius: 0.35rem;
}
.native-ticket-chat__message.is-system .native-ticket-chat__bubble {
  max-width: 92%;
  border-color: var(--warning-500);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--warning-500) 45%, var(--gray-200));
  }
  background: var(--warning-100);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--warning-100) 60%, var(--gray-50));
  }
}
.native-ticket-chat__bubble.is-deleted {
  opacity: 0.74;
  font-style: italic;
}
.native-ticket-chat__meta, .native-ticket-chat__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--gray-500);
  font-size: 0.72rem;
}
.native-ticket-chat__meta {
  margin-block-end: 0.45rem;
}
.native-ticket-chat__sender {
  color: var(--gray-900);
  font-weight: 700;
}
.native-ticket-chat__role {
  border-radius: 999px;
  background: var(--gray-200);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--gray-200) 72%, transparent);
  }
  padding: 0.14rem 0.45rem;
}
.native-ticket-chat__body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.85;
}
.native-ticket-chat__footer {
  justify-content: flex-start;
  margin-block-start: 0.55rem;
}
.native-ticket-chat__ticks {
  color: var(--gray-500);
  direction: ltr;
  font-weight: 700;
  letter-spacing: -0.12em;
}
.native-ticket-chat__ticks.is-read {
  color: var(--primary-600);
}
.native-ticket-chat__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}
.native-ticket-chat__attachments li {
  max-width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 0.55rem;
  padding: 0.25rem 0.5rem;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
}
.native-ticket-chat__attachments a {
  color: var(--primary-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.native-ticket-chat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: 0.7rem;
  padding-block-start: 0.55rem;
  border-block-start: 1px solid var(--gray-300);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-start: 1px solid color-mix(in oklab, var(--gray-300) 68%, transparent);
  }
}
.native-ticket-chat__action {
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  background: var(--gray-50);
  padding: 0.25rem 0.55rem;
  color: var(--gray-800);
  font-size: 0.75rem;
  font-weight: 600;
}
.native-ticket-chat__action:hover, .native-ticket-chat__action:focus-visible {
  border-color: var(--primary-500);
  color: var(--primary-700);
}
.native-ticket-chat__action.is-danger:hover, .native-ticket-chat__action.is-danger:focus-visible {
  border-color: var(--danger-500);
  color: var(--danger-700);
}
.native-ticket-chat__empty {
  border: 1px dashed var(--gray-300);
  border-radius: 0.8rem;
  padding: 1.2rem;
  color: var(--gray-500);
  text-align: center;
}
.native-ticket-chat__composer {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.9rem;
  background: var(--gray-50);
  padding: 0.75rem;
  color: var(--gray-600);
}
.native-ticket-chat__composer-label {
  color: var(--gray-900);
  font-weight: 700;
}
.native-ticket-chat__composer-message {
  width: 100%;
  min-height: 5.5rem;
  resize: vertical;
  border: 1px solid var(--gray-300);
  border-radius: 0.7rem;
  background: var(--gray-50);
  padding: 0.7rem;
  color: var(--gray-900);
  line-height: 1.75;
}
.native-ticket-chat__composer-message:focus {
  border-color: var(--primary-500);
  outline: 2px solid var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 2px solid color-mix(in oklab, var(--primary-400) 22%, transparent);
  }
}
.native-ticket-chat__composer-file {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  color: var(--gray-600);
  font-size: 0.82rem;
}
.native-ticket-chat__composer-file input {
  max-width: 100%;
  color: var(--gray-700);
}
.native-ticket-chat__composer-footer {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.native-ticket-chat__composer-hint {
  color: var(--gray-500);
  font-size: 0.8rem;
}
.native-ticket-chat__composer-error {
  color: var(--danger-600);
  font-size: 0.8rem;
}
.native-ticket-chat__composer-button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in oklab, var(--primary-500) 35%, var(--gray-200));
  }
  border-radius: 0.7rem;
  background: var(--primary-100);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--primary-100) 64%, white);
  }
  padding: 0.55rem 0.8rem;
  color: var(--primary-700);
  font-weight: 700;
}
.native-ticket-chat__composer-button:hover, .native-ticket-chat__composer-button:focus-visible {
  border-color: var(--primary-500);
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-400) 18%, transparent);
  }
}
.dark .native-ticket-chat__bubble {
  border-color: var(--gray-700);
  background: var(--gray-900);
}
.dark .native-ticket-chat__message.is-manager .native-ticket-chat__bubble {
  border-color: var(--primary-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--primary-400) 42%, var(--gray-700));
  }
  background: var(--primary-900);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--primary-900) 72%, var(--gray-900));
  }
}
.dark .native-ticket-chat__message.is-user .native-ticket-chat__bubble {
  border-color: var(--success-400);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--success-400) 36%, var(--gray-700));
  }
  background: var(--success-900);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in oklab, var(--success-900) 58%, var(--gray-900));
  }
}
.dark .native-ticket-chat__sender {
  color: var(--gray-100);
}
.dark .native-ticket-chat__action {
  border-color: var(--gray-700);
  background: var(--gray-900);
  color: var(--gray-200);
}
html[data-fastpanel-ui-palette='pastel'] {
  --native-ui-surface: linear-gradient(140deg, #fff1f2, #f5f3ff 52%, #ecfeff);
  --native-ui-border: #c4b5fd;
  --native-ui-shadow: 0 10px 26px rgb(139 92 246 / 12%);
  --native-ui-inset: linear-gradient(140deg, #fff, #f5f3ff);
}
html.dark[data-fastpanel-ui-palette='pastel'] {
  --native-ui-surface: linear-gradient(140deg, #382331, #292343 52%, #17343c);
  --native-ui-border: #a78bfa;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 25%);
  --native-ui-inset: linear-gradient(140deg, #352535, #282443);
}
html[data-fastpanel-ui-palette='mint'] {
  --native-ui-surface: linear-gradient(140deg, #ecfdf5, #ccfbf1 55%, #eff6ff);
  --native-ui-border: #34d399;
  --native-ui-shadow: 0 10px 26px rgb(16 185 129 / 13%);
  --native-ui-inset: #f0fdfa;
}
html.dark[data-fastpanel-ui-palette='mint'] {
  --native-ui-surface: linear-gradient(140deg, #12352c, #123b37 55%, #1d3045);
  --native-ui-border: #6ee7b7;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 25%);
  --native-ui-inset: #163c34;
}
html[data-fastpanel-ui-palette='coral'] {
  --native-ui-surface: linear-gradient(140deg, #fff1e9, #ffe4e6 55%, #fff7ed);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 10px 26px rgb(244 63 94 / 13%);
  --native-ui-inset: #fff7f2;
}
html.dark[data-fastpanel-ui-palette='coral'] {
  --native-ui-surface: linear-gradient(140deg, #40251d, #421e2d 55%, #3b2a1e);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 25%);
  --native-ui-inset: #3b2625;
}
html[data-fastpanel-ui-palette='lavender'] {
  --native-ui-surface: linear-gradient(140deg, #faf5ff, #ede9fe 55%, #fdf2f8);
  --native-ui-border: #a78bfa;
  --native-ui-shadow: 0 10px 26px rgb(124 58 237 / 12%);
  --native-ui-inset: #faf5ff;
}
html.dark[data-fastpanel-ui-palette='lavender'] {
  --native-ui-surface: linear-gradient(140deg, #302442, #34234d 55%, #3b243c);
  --native-ui-border: #c4b5fd;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 26%);
  --native-ui-inset: #302641;
}
html[data-fastpanel-ui-palette='midnight'] {
  --native-ui-surface: linear-gradient(140deg, #e0f2fe, #dbeafe 55%, #e0e7ff);
  --native-ui-border: #334155;
  --native-ui-shadow: 0 12px 28px rgb(15 23 42 / 16%);
  --native-ui-inset: #eff6ff;
}
html.dark[data-fastpanel-ui-palette='midnight'] {
  --native-ui-surface: linear-gradient(140deg, #0b1220, #111827 55%, #1e1b4b);
  --native-ui-border: #6366f1;
  --native-ui-shadow: 0 14px 32px rgb(0 0 0 / 34%);
  --native-ui-inset: #111827;
}
html[data-fastpanel-ui-palette='ice'] {
  --native-ui-surface: linear-gradient(140deg, #f0f9ff, #ecfeff 55%, #eff6ff);
  --native-ui-border: #7dd3fc;
  --native-ui-shadow: 0 10px 26px rgb(14 165 233 / 11%);
  --native-ui-inset: #f8fdff;
}
html.dark[data-fastpanel-ui-palette='ice'] {
  --native-ui-surface: linear-gradient(140deg, #152b3d, #12343c 55%, #1d2d49);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 25%);
  --native-ui-inset: #172f3b;
}
.native-ui-gallery__swatch--pastel {
  background: linear-gradient(135deg, #fda4af, #c4b5fd 52%, #a5f3fc);
}
.native-ui-gallery__swatch--mint {
  background: linear-gradient(135deg, #34d399, #99f6e4 55%, #bfdbfe);
}
.native-ui-gallery__swatch--coral {
  background: linear-gradient(135deg, #fb7185, #fb923c 55%, #fda4af);
}
.native-ui-gallery__swatch--lavender {
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd 55%, #f0abfc);
}
.native-ui-gallery__swatch--midnight {
  background: linear-gradient(135deg, #0f172a, #1e1b4b 55%, #6366f1);
}
.native-ui-gallery__swatch--ice {
  background: linear-gradient(135deg, #e0f2fe, #a5f3fc 55%, #bfdbfe);
}
html[data-fastpanel-ui-widget='counter'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-end: 4px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-widget='counter'] .fi-wi-stats-overview-stat {
  text-align: center;
}
html[data-fastpanel-ui-widget='counter'] .native-ui-preview-card__tiles strong {
  font-size: 1rem;
}
html[data-fastpanel-ui-widget='orbit'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-radius: 1.65rem;
  border-block-start: 4px solid var(--native-ui-border, #818cf8);
}
html[data-fastpanel-ui-widget='inset'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  box-shadow: inset 0 2px 12px rgb(15 23 42 / 8%), 0 3px 10px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-widget='split-metric'] .fi-wi-stats-overview-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
  border-inline-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-widget='split-metric'] .fi-wi-stats-overview-stat > :first-child {
  grid-column: 1;
}
html[data-fastpanel-ui-widget='split-metric'] .fi-wi-stats-overview-stat > :last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
}
html[data-fastpanel-ui-widget='signal'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-inline-start: 5px solid var(--native-ui-border, var(--primary-500));
  box-shadow: inset 5px 0 0 var(--native-ui-border, #64748b), var(--native-ui-shadow, 0 5px 16px rgb(15 23 42 / 7%));
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 5px 0 0 color-mix(in srgb, var(--native-ui-border, #64748b) 9%, transparent), var(--native-ui-shadow, 0 5px 16px rgb(15 23 42 / 7%));
  }
}
html[data-fastpanel-ui-widget='contrast'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #111827, #172554);
  border-color: #38bdf8;
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='contrast'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) :is(p, span, small, label) {
  color: #dbeafe;
}
html[data-fastpanel-ui-card='bento'] .native-detail-card :is(.fi-in-entry-wrp, .fi-in-repeatable-item), html[data-fastpanel-ui-card='bento'] .native-ui-preview-card__tiles--bento > div {
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 58%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, var(--gray-50));
  box-shadow: 0 6px 16px rgb(15 23 42 / 6%);
}
html[data-fastpanel-ui-card='bento'] .native-ui-preview-card__tiles--bento > div:first-child {
  grid-column: span 2;
}
html[data-fastpanel-ui-card='spotlight'] .native-detail-card .fi-in-entry-wrp:first-child, html[data-fastpanel-ui-card='spotlight'] .native-ui-preview-card__tiles > div:first-child {
  grid-column: span 2;
  border: 1px solid var(--native-ui-border, var(--primary-400));
  background: var(--native-ui-inset, var(--primary-100));
  @supports (color: color-mix(in lab, red, red)) {
    background: var(--native-ui-inset, color-mix(in srgb, var(--primary-100) 45%, white));
  }
  box-shadow: 0 8px 20px var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--native-ui-border, #64748b) 16%, transparent);
  }
}
html[data-fastpanel-ui-card='inset'] :is(.fi-section, .native-ui-preview-card) {
  box-shadow: inset 0 2px 14px rgb(15 23 42 / 8%), 0 4px 12px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-card='inset'] .native-detail-card :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border: 1px solid var(--gray-200);
  border-radius: 0.9rem;
  background: var(--native-ui-inset, var(--gray-50));
  box-shadow: inset 0 1px 5px rgb(15 23 42 / 6%);
}
html[data-fastpanel-ui-card='vertical'] :is(.fi-section, .native-ui-preview-card) {
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-card='borderless'] :is(.fi-section, .native-ui-preview-card) {
  border-color: transparent;
  box-shadow: none;
}
html[data-fastpanel-ui-card='layered'] :is(.fi-section, .native-ui-preview-card) {
  box-shadow: 0 2px 0 var(--native-ui-border, #64748b), 0 12px 26px rgb(15 23 42 / 10%);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 2px 0 color-mix(in srgb, var(--native-ui-border, #64748b) 28%, transparent), 0 12px 26px rgb(15 23 42 / 10%);
  }
}
html[data-fastpanel-ui-card='dashboard'] .fi-section-header {
  border-block-end: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 35%, transparent);
  }
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 8%, transparent);
  }
}
html[data-fastpanel-ui-card='dashboard'] .native-ui-preview-card > header {
  padding-block-end: 0.65rem;
  border-block-end: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 35%, transparent);
  }
}
html[data-fastpanel-ui-list='horizontal-peek'] :is(.fi-ta-content, .native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-peek'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 min(78%, 22rem);
  min-width: min(78%, 22rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-timeline'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail--timeline) {
  display: flex;
  grid-template-columns: none;
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-block: 0.35rem 0.8rem;
}
html[data-fastpanel-ui-list='horizontal-timeline'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail--timeline > div) {
  flex: 0 0 clamp(10rem, 28vw, 17rem);
  min-width: clamp(10rem, 28vw, 17rem);
  scroll-snap-align: start;
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='horizontal-timeline'] .fi-ta-tbody > tr {
  border-block-start: 2px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='horizontal-metrics'] .fi-ta-tbody > tr:nth-child(3n + 1), html[data-fastpanel-ui-list='horizontal-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 1) .fi-section {
  border-inline-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-list='horizontal-metrics'] .fi-ta-tbody > tr:nth-child(3n + 2), html[data-fastpanel-ui-list='horizontal-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n + 2) .fi-section {
  border-inline-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-list='horizontal-metrics'] .fi-ta-tbody > tr:nth-child(3n), html[data-fastpanel-ui-list='horizontal-metrics'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(3n) .fi-section {
  border-inline-start: 4px solid #f97316;
}
html[data-fastpanel-ui-list='horizontal-tiles'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-radius: 1rem;
  background: var(--native-ui-inset, var(--gray-50));
  box-shadow: 0 5px 16px rgb(15 23 42 / 7%);
}
html[data-fastpanel-ui-list='ranked'] .fi-ta-tbody {
  counter-reset: fastpanel-rank;
}
html[data-fastpanel-ui-list='ranked'] .fi-ta-tbody > tr {
  counter-increment: fastpanel-rank;
}
html[data-fastpanel-ui-list='ranked'] .fi-ta-tbody > tr > td:first-child::before {
  content: counter(fastpanel-rank, persian);
  display: inline-grid;
  min-width: 1.55rem;
  height: 1.55rem;
  margin-inline-end: 0.45rem;
  place-items: center;
  border-radius: 999px;
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 17%, white);
  }
  color: var(--primary-700);
  font-size: 0.7rem;
  font-weight: 750;
}
html[data-fastpanel-ui-list='marked'] .fi-ta-tbody > tr > td:first-child::before {
  content: '●';
  margin-inline-end: 0.5rem;
  color: var(--native-ui-border, var(--primary-500));
  font-size: 0.72rem;
}
html[data-fastpanel-ui-list='marked'] .native-ui-preview-card__rail > div::before {
  content: '●';
  color: var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='airy'] .fi-ta-tbody > tr > td {
  padding-block: 1.15rem;
}
html[data-fastpanel-ui-list='airy'] .native-ui-preview-card__rail > div {
  padding: 1rem;
}
html[data-fastpanel-ui-list='minimal'] .fi-ta-tbody > tr > td {
  border-block-end-color: transparent;
}
html[data-fastpanel-ui-list='minimal'] .native-ui-preview-card__rail > div {
  border-color: var(--native-ui-border, #94a3b8);
  background: var(--native-ui-surface, #fff);
  box-shadow: none;
}
html[data-fastpanel-ui-layout='bento'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(7rem, auto);
  align-items: stretch;
  gap: 0.85rem;
}
html[data-fastpanel-ui-layout='bento'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='bento'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(4n) {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(6rem, auto);
  align-items: stretch;
  gap: 0.8rem;
}
html[data-fastpanel-ui-layout='masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(3n + 1) {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(4n) {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='dashboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.85rem;
}
html[data-fastpanel-ui-layout='dashboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='carousel'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='scroll-peek'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='scroll-orbit'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  gap: 0.85rem;
  padding: 0.25rem 0.2rem 0.8rem;
}
html[data-fastpanel-ui-layout='carousel'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 min(25rem, calc(100vw - 4rem));
  min-width: min(25rem, calc(100vw - 4rem));
  scroll-snap-align: center;
}
html[data-fastpanel-ui-layout='scroll-peek'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 min(78%, 23rem);
  min-width: min(78%, 23rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='scroll-orbit'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 min(19rem, calc(100vw - 4rem));
  min-width: min(19rem, calc(100vw - 4rem));
  scroll-snap-align: center;
  border-radius: 1.8rem;
}
.native-ui-preview-card__tiles--bento {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.native-ui-preview-card__tiles--bento > div:nth-child(2) {
  grid-row: span 2;
}
.native-ui-preview-card__rail--timeline > div {
  min-width: 9rem;
}
.native-ui-preview-card__rail--timeline > div small {
  color: var(--native-ui-border, var(--primary-600));
  font-weight: 750;
}
@media (max-width: 40rem) {
  html[data-fastpanel-ui-card='bento'] .native-ui-preview-card__tiles--bento, html[data-fastpanel-ui-card='spotlight'] .native-ui-preview-card__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-card='bento'] .native-ui-preview-card__tiles--bento > div:first-child, html[data-fastpanel-ui-card='spotlight'] .native-ui-preview-card__tiles > div:first-child {
    grid-column: 1 / -1;
  }
  html[data-fastpanel-ui-layout='bento'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='dashboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='bento'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child, html[data-fastpanel-ui-layout='masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(3n + 1), html[data-fastpanel-ui-layout='masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(4n), html[data-fastpanel-ui-layout='dashboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 767px) {
  .native-ticket-chat {
    padding-inline: 0;
  }
  .native-ticket-chat__bubble {
    max-width: 92%;
    min-width: min(12rem, 100%);
  }
}
html[data-fastpanel-ui-palette='electric'] {
  --native-ui-surface: linear-gradient(135deg, #eef2ff, #fae8ff 52%, #cffafe);
  --native-ui-border: #7c3aed;
  --native-ui-shadow: 0 12px 30px rgb(124 58 237 / 16%);
  --native-ui-inset: linear-gradient(135deg, #fff, #f5f3ff);
}
html.dark[data-fastpanel-ui-palette='electric'] {
  --native-ui-surface: linear-gradient(135deg, #172554, #3b1748 52%, #123b4a);
  --native-ui-border: #c084fc;
  --native-ui-shadow: 0 14px 32px rgb(0 0 0 / 30%);
  --native-ui-inset: #20213c;
}
html[data-fastpanel-ui-palette='citrus'] {
  --native-ui-surface: linear-gradient(135deg, #f7fee7, #ecfccb 50%, #ffedd5);
  --native-ui-border: #65a30d;
  --native-ui-shadow: 0 12px 28px rgb(101 163 13 / 14%);
  --native-ui-inset: #f7fee7;
}
html.dark[data-fastpanel-ui-palette='citrus'] {
  --native-ui-surface: linear-gradient(135deg, #263512, #344214 50%, #422719);
  --native-ui-border: #bef264;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --native-ui-inset: #2c391d;
}
html[data-fastpanel-ui-palette='berry'] {
  --native-ui-surface: linear-gradient(135deg, #fdf2f8, #fce7f3 48%, #ede9fe);
  --native-ui-border: #c026d3;
  --native-ui-shadow: 0 12px 30px rgb(192 38 211 / 14%);
  --native-ui-inset: #fff7fb;
}
html.dark[data-fastpanel-ui-palette='berry'] {
  --native-ui-surface: linear-gradient(135deg, #3b1830, #4a1d43 48%, #292044);
  --native-ui-border: #e879f9;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --native-ui-inset: #341d36;
}
html[data-fastpanel-ui-palette='sapphire'] {
  --native-ui-surface: linear-gradient(135deg, #eff6ff, #dbeafe 52%, #e0e7ff);
  --native-ui-border: #2563eb;
  --native-ui-shadow: 0 12px 30px rgb(37 99 235 / 15%);
  --native-ui-inset: #f5f8ff;
}
html.dark[data-fastpanel-ui-palette='sapphire'] {
  --native-ui-surface: linear-gradient(135deg, #10244b, #152f56 52%, #28234f);
  --native-ui-border: #60a5fa;
  --native-ui-shadow: 0 13px 30px rgb(0 0 0 / 28%);
  --native-ui-inset: #182b49;
}
html[data-fastpanel-ui-palette='copper'] {
  --native-ui-surface: linear-gradient(135deg, #fff7ed, #ffedd5 52%, #fef3c7);
  --native-ui-border: #c2410c;
  --native-ui-shadow: 0 12px 28px rgb(194 65 12 / 13%);
  --native-ui-inset: #fffaf2;
}
html.dark[data-fastpanel-ui-palette='copper'] {
  --native-ui-surface: linear-gradient(135deg, #3c2418, #452817 52%, #3c3217);
  --native-ui-border: #fb923c;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 27%);
  --native-ui-inset: #34251d;
}
html[data-fastpanel-ui-palette='sandstone'] {
  --native-ui-surface: linear-gradient(135deg, #faf7f0, #f1eadc 52%, #f6f1e8);
  --native-ui-border: #a88962;
  --native-ui-shadow: 0 9px 24px rgb(120 93 61 / 11%);
  --native-ui-inset: #fffdf8;
}
html.dark[data-fastpanel-ui-palette='sandstone'] {
  --native-ui-surface: linear-gradient(135deg, #342e26, #3a342a 52%, #302f2b);
  --native-ui-border: #c4a77d;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 26%);
  --native-ui-inset: #302d27;
}
html[data-fastpanel-ui-palette='nord'] {
  --native-ui-surface: linear-gradient(135deg, #eceff4, #e5e9f0 52%, #d8dee9);
  --native-ui-border: #5e81ac;
  --native-ui-shadow: 0 10px 26px rgb(46 52 64 / 11%);
  --native-ui-inset: #f8fafc;
}
html.dark[data-fastpanel-ui-palette='nord'] {
  --native-ui-surface: linear-gradient(135deg, #2e3440, #3b4252 52%, #434c5e);
  --native-ui-border: #88c0d0;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --native-ui-inset: #353d4a;
}
html[data-fastpanel-ui-palette='terminal'] {
  --native-ui-surface: linear-gradient(135deg, #ecfdf5, #dcfce7 52%, #f0fdf4);
  --native-ui-border: #15803d;
  --native-ui-shadow: 0 10px 26px rgb(22 101 52 / 12%);
  --native-ui-inset: #f0fdf4;
}
html.dark[data-fastpanel-ui-palette='terminal'] {
  --native-ui-surface: linear-gradient(135deg, #071b15, #0b281c 52%, #102d22);
  --native-ui-border: #4ade80;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 32%);
  --native-ui-inset: #0e241b;
}
html[data-fastpanel-ui-palette='aurora'] {
  --native-ui-surface: linear-gradient(130deg, #ecfeff, #dcfce7 32%, #ede9fe 68%, #fce7f3);
  --native-ui-border: #0d9488;
  --native-ui-shadow: 0 12px 30px rgb(13 148 136 / 14%);
  --native-ui-inset: linear-gradient(135deg, #fff, #f0fdfa 52%, #f5f3ff);
}
html.dark[data-fastpanel-ui-palette='aurora'] {
  --native-ui-surface: linear-gradient(130deg, #12313b, #123529 32%, #292044 68%, #3a1d35);
  --native-ui-border: #5eead4;
  --native-ui-shadow: 0 14px 32px rgb(0 0 0 / 29%);
  --native-ui-inset: linear-gradient(135deg, #172b37, #19352e 52%, #29213e);
}
html[data-fastpanel-ui-palette='paper'] {
  --native-ui-surface: linear-gradient(145deg, #fffefa, #fffaf0 56%, #f8f5ed);
  --native-ui-border: #d6c8a8;
  --native-ui-shadow: 0 7px 20px rgb(120 99 61 / 9%);
  --native-ui-inset: #fffefa;
}
html.dark[data-fastpanel-ui-palette='paper'] {
  --native-ui-surface: linear-gradient(145deg, #36342e, #3d392e 56%, #34342f);
  --native-ui-border: #b7a784;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --native-ui-inset: #34332d;
}
.native-ui-gallery__swatch--electric {
  background: linear-gradient(135deg, #2563eb, #a855f7 50%, #06b6d4);
}
.native-ui-gallery__swatch--citrus {
  background: linear-gradient(135deg, #65a30d, #bef264 52%, #f97316);
}
.native-ui-gallery__swatch--berry {
  background: linear-gradient(135deg, #be185d, #d946ef 52%, #7c3aed);
}
.native-ui-gallery__swatch--sapphire {
  background: linear-gradient(135deg, #1e3a8a, #2563eb 52%, #818cf8);
}
.native-ui-gallery__swatch--copper {
  background: linear-gradient(135deg, #7c2d12, #c2410c 52%, #fbbf24);
}
.native-ui-gallery__swatch--sandstone {
  background: linear-gradient(135deg, #78603f, #c4a77d 52%, #f1eadc);
}
.native-ui-gallery__swatch--nord {
  background: linear-gradient(135deg, #3b4252, #5e81ac 52%, #88c0d0);
}
.native-ui-gallery__swatch--terminal {
  background: linear-gradient(135deg, #052e16, #15803d 52%, #4ade80);
}
.native-ui-gallery__swatch--aurora {
  background: linear-gradient(135deg, #06b6d4, #22c55e 34%, #8b5cf6 68%, #e879f9);
}
.native-ui-gallery__swatch--paper {
  background: linear-gradient(135deg, #fffefa, #e8dcc0 56%, #a88962);
}
html[data-fastpanel-ui-widget='metric-tiles'] .fi-wi-stats-overview-stat, html[data-fastpanel-ui-widget='metric-tiles'] .native-ui-preview-card__tiles--metric-board > div {
  border: 1px solid var(--native-ui-border, #94a3b8);
  border-radius: 1rem;
  background: var(--native-ui-inset, #f8fafc);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 5px 14px rgb(15 23 42 / 7%);
}
html[data-fastpanel-ui-widget='metric-tiles'] .fi-wi-stats-overview-stat :is(.fi-wi-stats-overview-stat-value, .fi-wi-stats-overview-stat-label) {
  position: relative;
  z-index: 1;
}
html[data-fastpanel-ui-widget='neon-edge'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border: 2px solid #6366f1;
  box-shadow: none;
}
html[data-fastpanel-ui-widget='neon-edge'] .fi-wi-stats-overview-stat {
  border-block-start: 3px solid #06b6d4;
}
html.dark[data-fastpanel-ui-widget='neon-edge'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #111827, #1e1b4b 58%, #123b43);
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='chromatic'] .fi-wi-stats-overview-stat:nth-child(4n + 1), html[data-fastpanel-ui-widget='chromatic'] .native-ui-preview-card--metric-board .native-ui-preview-card__tiles > div:nth-child(4n + 1) {
  --metric-accent: #06b6d4;
}
html[data-fastpanel-ui-widget='chromatic'] .fi-wi-stats-overview-stat:nth-child(4n + 2), html[data-fastpanel-ui-widget='chromatic'] .native-ui-preview-card--metric-board .native-ui-preview-card__tiles > div:nth-child(4n + 2) {
  --metric-accent: #22c55e;
}
html[data-fastpanel-ui-widget='chromatic'] .fi-wi-stats-overview-stat:nth-child(4n + 3), html[data-fastpanel-ui-widget='chromatic'] .native-ui-preview-card--metric-board .native-ui-preview-card__tiles > div:nth-child(4n + 3) {
  --metric-accent: #f97316;
}
html[data-fastpanel-ui-widget='chromatic'] .fi-wi-stats-overview-stat:nth-child(4n), html[data-fastpanel-ui-widget='chromatic'] .native-ui-preview-card--metric-board .native-ui-preview-card__tiles > div:nth-child(4n) {
  --metric-accent: #d946ef;
}
html[data-fastpanel-ui-widget='chromatic'] .fi-wi-stats-overview-stat {
  border-block-start: 4px solid var(--metric-accent);
  background: var(--metric-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--metric-accent) 7%, var(--native-ui-inset, white));
  }
}
html[data-fastpanel-ui-widget='ink'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #fff, #f1f5f9);
  border-color: #64748b;
  box-shadow: 0 3px 10px rgb(15 23 42 / 6%);
  color: #0f172a;
  filter: grayscale(1);
}
html.dark[data-fastpanel-ui-widget='ink'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #334155, #111827);
  border-color: #94a3b8;
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='executive'] .fi-wi-stats-overview-stat {
  min-height: 7.25rem;
  border-block-end: 3px solid var(--native-ui-border, var(--primary-500));
  box-shadow: 0 8px 22px rgb(15 23 42 / 9%);
}
html[data-fastpanel-ui-widget='executive'] .fi-wi-stats-overview-stat-value {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
html[data-fastpanel-ui-widget='slim-accent'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-start: 2px solid var(--native-ui-border, var(--primary-500));
  box-shadow: 0 3px 12px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-widget='spotlight'] .fi-wi-stats-overview-stat:first-child {
  background: linear-gradient(135deg, var(--primary-700), var(--native-ui-border, var(--primary-500)));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 24px var(--native-ui-border, var(--primary-500));
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--native-ui-border, var(--primary-500)) 24%, transparent);
  }
}
html[data-fastpanel-ui-widget='heat'] .fi-wi-stats-overview-stat:nth-child(3n + 1) {
  border-block-start: 4px solid #ef4444;
}
html[data-fastpanel-ui-widget='heat'] .fi-wi-stats-overview-stat:nth-child(3n + 2) {
  border-block-start: 4px solid #f97316;
}
html[data-fastpanel-ui-widget='heat'] .fi-wi-stats-overview-stat:nth-child(3n) {
  border-block-start: 4px solid #eab308;
}
html[data-fastpanel-ui-widget='badge-stack'] .fi-wi-stats-overview-stat .fi-badge {
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 55%, transparent);
  }
  box-shadow: 0 2px 7px rgb(15 23 42 / 10%);
}
html[data-fastpanel-ui-widget='dual-tone'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(140deg, var(--native-ui-inset, white) 0 68%, var(--native-ui-border, #94a3b8) 68%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(140deg, var(--native-ui-inset, white) 0 68%, color-mix(in srgb, var(--native-ui-border, #94a3b8) 22%, white) 68%);
  }
  border-color: var(--native-ui-border, #94a3b8);
}
html.dark[data-fastpanel-ui-widget='dual-tone'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(140deg, var(--native-ui-inset, #1e293b) 0 68%, var(--native-ui-border, #64748b) 68%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(140deg, var(--native-ui-inset, #1e293b) 0 68%, color-mix(in srgb, var(--native-ui-border, #64748b) 24%, #111827) 68%);
  }
}
html[data-fastpanel-ui-card='distributed'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  gap: 0.85rem;
}
html[data-fastpanel-ui-card='distributed'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 54%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, #f8fafc);
  box-shadow: 0 4px 12px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-card='column-elegant'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
html[data-fastpanel-ui-card='column-elegant'] .fi-section-header {
  border-inline-start: 4px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.35rem;
}
html[data-fastpanel-ui-card='column-elegant'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 28%, transparent);
  }
  border-radius: 0.9rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='tilefield'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: stretch;
  gap: 0.75rem;
}
html[data-fastpanel-ui-card='tilefield'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  padding: 0.8rem;
  border: 1px solid var(--native-ui-border, #94a3b8);
  border-radius: 1rem;
  background: var(--native-ui-inset, #f8fafc);
}
html[data-fastpanel-ui-card='numbered'] :is(.native-detail-card, .native-vertical-card-stack) .fi-in-entry-wrp {
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 5%, var(--native-ui-inset, white));
  }
}
html[data-fastpanel-ui-card='split-rail'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border-inline-start: 4px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.35rem 0.9rem 0.9rem 0.35rem;
  background: var(--native-ui-inset, #f8fafc);
}
html[data-fastpanel-ui-card='ledger'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  padding: 0.65rem 0.8rem;
  border: 0;
  border-block-end: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 32%, #fff);
  }
  border-radius: 0;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='ledger'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item):nth-child(even) {
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 7%, transparent);
  }
}
html[data-fastpanel-ui-card='stacked'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}
html[data-fastpanel-ui-card='stacked'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  width: 100%;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 44%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='metric-board'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.7rem;
}
html[data-fastpanel-ui-card='metric-board'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  padding: 0.75rem;
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 42%, transparent);
  }
  border-radius: 0.95rem;
  background: var(--native-ui-inset, #f8fafc);
}
html[data-fastpanel-ui-card='soft-grid'] :is(.fi-section, .native-ui-preview-card) {
  border-radius: 1.3rem;
  box-shadow: 0 7px 20px rgb(15 23 42 / 6%);
}
html[data-fastpanel-ui-card='soft-grid'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 30%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-list='horizontal-snap'] :is(.fi-ta-content, .native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-snap'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  scroll-snap-align: center;
}
html[data-fastpanel-ui-list='horizontal-peek-tight'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-peek-tight'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 min(82%, 17rem);
  min-width: min(82%, 17rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-showcase'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
  padding-block: 0.4rem 0.85rem;
}
html[data-fastpanel-ui-list='horizontal-showcase'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(17rem, 37vw, 26rem);
  min-width: clamp(17rem, 37vw, 26rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-pills'] .native-card-rail > .fi-grid > .fi-grid-col .fi-section, html[data-fastpanel-ui-list='horizontal-pills'] .native-ui-preview-card__rail > div {
  border-radius: 1.15rem;
  background: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #94a3b8) 9%, var(--native-ui-inset, white));
  }
}
html[data-fastpanel-ui-list='horizontal-color'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n + 1) .fi-section, html[data-fastpanel-ui-list='horizontal-color'] .fi-ta-tbody > tr:nth-child(4n + 1) {
  border-inline-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-list='horizontal-color'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n + 2) .fi-section, html[data-fastpanel-ui-list='horizontal-color'] .fi-ta-tbody > tr:nth-child(4n + 2) {
  border-inline-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-list='horizontal-color'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n + 3) .fi-section, html[data-fastpanel-ui-list='horizontal-color'] .fi-ta-tbody > tr:nth-child(4n + 3) {
  border-inline-start: 4px solid #f97316;
}
html[data-fastpanel-ui-list='horizontal-color'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n) .fi-section, html[data-fastpanel-ui-list='horizontal-color'] .fi-ta-tbody > tr:nth-child(4n) {
  border-inline-start: 4px solid #d946ef;
}
html[data-fastpanel-ui-list='horizontal-timeline-alt'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
}
html[data-fastpanel-ui-list='horizontal-timeline-alt'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(11rem, 29vw, 18rem);
  min-width: clamp(11rem, 29vw, 18rem);
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-minimal'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-color: var(--native-ui-border, #94a3b8);
  background: var(--native-ui-surface, #fff);
  box-shadow: none;
}
html[data-fastpanel-ui-list='horizontal-stack'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border: 1px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 48%, transparent);
  }
  box-shadow: 4px 5px 0 var(--native-ui-border, #64748b), 0 10px 20px rgb(15 23 42 / 7%);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 5px 0 color-mix(in srgb, var(--native-ui-border, #64748b) 18%, transparent), 0 10px 20px rgb(15 23 42 / 7%);
  }
}
html[data-fastpanel-ui-list='horizontal-wide-peek'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  overscroll-behavior-inline: contain;
}
html[data-fastpanel-ui-list='horizontal-wide-peek'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 min(86%, 30rem);
  min-width: min(86%, 30rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='vertical-rhythm'] .fi-ta-tbody > tr > td {
  padding-block: 0.9rem;
  border-block-end-color: var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end-color: color-mix(in srgb, var(--native-ui-border, #94a3b8) 28%, transparent);
  }
}
html[data-fastpanel-ui-list='vertical-rhythm'] .native-ui-preview-card__rail {
  flex-direction: column;
}
html[data-fastpanel-ui-list='vertical-rhythm'] .native-ui-preview-card__rail > div {
  width: 100%;
}
html[data-fastpanel-ui-layout='rail-snap'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='rail-peek'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='rail-compact'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='rail-feature'] .native-card-rail > .fi-grid, html[data-fastpanel-ui-layout='rail-deck'] .native-card-rail > .fi-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.35rem 0.2rem 0.85rem;
}
html[data-fastpanel-ui-layout='rail-snap'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(17rem, 34vw, 26rem);
  min-width: clamp(17rem, 34vw, 26rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-peek'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 min(82%, 24rem);
  min-width: min(82%, 24rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-compact'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(11rem, 23vw, 16rem);
  min-width: clamp(11rem, 23vw, 16rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-feature'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(15rem, 29vw, 22rem);
  min-width: clamp(15rem, 29vw, 22rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-feature'] .native-card-rail > .fi-grid > .fi-grid-col:first-child {
  flex-basis: clamp(22rem, 46vw, 34rem);
  min-width: clamp(22rem, 46vw, 34rem);
}
html[data-fastpanel-ui-layout='rail-deck'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(16rem, 30vw, 23rem);
  min-width: clamp(16rem, 30vw, 23rem);
  scroll-snap-align: center;
}
html[data-fastpanel-ui-layout='rail-deck'] .native-card-rail > .fi-grid .fi-section {
  box-shadow: 4px 5px 0 var(--native-ui-border, #64748b), var(--native-ui-shadow, 0 5px 16px rgb(15 23 42 / 7%));
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 5px 0 color-mix(in srgb, var(--native-ui-border, #64748b) 20%, transparent), var(--native-ui-shadow, 0 5px 16px rgb(15 23 42 / 7%));
  }
}
html[data-fastpanel-ui-layout='grid-3'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.85rem;
}
html[data-fastpanel-ui-layout='grid-4'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.7rem;
}
html[data-fastpanel-ui-layout='stacked-elegant'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid, .native-detail-card > .fi-section > .fi-section-content-ctn > .fi-section-content) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.85rem;
}
html[data-fastpanel-ui-layout='stacked-elegant'] .native-card-rail > .fi-grid > .fi-grid-col {
  width: 100%;
  min-width: 0;
}
html[data-fastpanel-ui-layout='stacked-elegant'] .native-card-rail .fi-section {
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-layout='mosaic-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(7rem, auto);
  align-items: stretch;
  gap: 0.8rem;
}
html[data-fastpanel-ui-layout='mosaic-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(3n + 1) {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='mosaic-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(4n) {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='catalog'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: stretch;
  gap: 0.85rem;
}
.native-ui-gallery__group--systems {
  border-color: var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--primary-500) 38%, var(--gray-200));
  }
}
.native-ui-system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.7rem;
}
.native-ui-system-choice {
  display: grid;
  grid-template-columns: 3.15rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  min-height: 7.25rem;
  padding: 0.85rem;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  background: var(--native-ui-surface, white);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-surface, white) 62%, var(--gray-50));
  }
  color: var(--gray-900);
  text-align: start;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.native-ui-system-choice:hover {
  border-color: var(--native-ui-border, var(--primary-400));
  box-shadow: 0 8px 20px var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--native-ui-border, #64748b) 15%, transparent);
  }
  transform: translateY(-1px);
}
.native-ui-system-choice.is-active {
  border: 2px solid var(--primary-500);
  box-shadow: none;
}
.native-ui-system-choice__preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 0.7rem);
  gap: 0.18rem;
  width: 3rem;
  height: 2.35rem;
  padding: 0.2rem;
  overflow: hidden;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 42%, transparent);
  }
  border-radius: 0.65rem;
  background: var(--system-surface, #f8fafc);
}
.native-ui-system-choice__preview i {
  display: block;
  border-radius: 0.2rem;
  background: var(--system-1, #64748b);
}
.native-ui-system-choice__preview i:nth-child(2) {
  background: var(--system-2, #94a3b8);
}
.native-ui-system-choice__preview i:nth-child(3) {
  background: var(--system-3, #cbd5e1);
}
.native-ui-system-choice__preview i:nth-child(4) {
  background: var(--system-4, #e2e8f0);
}
.native-ui-system-choice__preview i:nth-child(5) {
  grid-column: span 2;
  background: linear-gradient(90deg, var(--system-1), var(--system-2), var(--system-3));
}
.native-ui-system-choice__copy {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}
.native-ui-system-choice__copy strong {
  font-size: 0.82rem;
  font-weight: 800;
}
.native-ui-system-choice__copy small {
  color: var(--gray-600);
  font-size: 0.7rem;
  line-height: 1.65;
}
.native-ui-system-choice__copy em {
  color: var(--primary-700);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
}
.native-ui-system-choice--electric-control {
  --system-1: #2563eb;
  --system-2: #a855f7;
  --system-3: #06b6d4;
  --system-4: #172554;
  --system-surface: #eef2ff;
}
.native-ui-system-choice--bright-ledger {
  --system-1: #d6c8a8;
  --system-2: #f8f5ed;
  --system-3: #a88962;
  --system-4: #fffefa;
  --system-surface: #fffefa;
}
.native-ui-system-choice--mono-operator {
  --system-1: #0f172a;
  --system-2: #475569;
  --system-3: #94a3b8;
  --system-4: #e2e8f0;
  --system-surface: #f8fafc;
}
.native-ui-system-choice--spectrum-board {
  --system-1: #06b6d4;
  --system-2: #22c55e;
  --system-3: #f97316;
  --system-4: #d946ef;
  --system-surface: #ecfeff;
}
.native-ui-system-choice--ocean-analytics {
  --system-1: #1e3a8a;
  --system-2: #2563eb;
  --system-3: #60a5fa;
  --system-4: #dbeafe;
  --system-surface: #eff6ff;
}
.native-ui-system-choice--citrus-operations {
  --system-1: #365314;
  --system-2: #65a30d;
  --system-3: #bef264;
  --system-4: #f97316;
  --system-surface: #f7fee7;
}
.native-ui-system-choice--aurora-dashboard {
  --system-1: #06b6d4;
  --system-2: #22c55e;
  --system-3: #8b5cf6;
  --system-4: #e879f9;
  --system-surface: #ecfeff;
}
.native-ui-system-choice--terminal-console {
  --system-1: #052e16;
  --system-2: #15803d;
  --system-3: #4ade80;
  --system-4: #dcfce7;
  --system-surface: #ecfdf5;
}
.native-ui-system-choice--executive-columns {
  --system-1: #1e3a8a;
  --system-2: #4f46e5;
  --system-3: #818cf8;
  --system-4: #eff6ff;
  --system-surface: #eff6ff;
}
.native-ui-system-choice--berry-workspace {
  --system-1: #9d174d;
  --system-2: #c026d3;
  --system-3: #8b5cf6;
  --system-4: #fce7f3;
  --system-surface: #fdf2f8;
}
.native-ui-system-choice--sandstone-light {
  --system-1: #78603f;
  --system-2: #a88962;
  --system-3: #d6c8a8;
  --system-4: #f1eadc;
  --system-surface: #faf7f0;
}
.native-ui-system-choice--copper-studio {
  --system-1: #7c2d12;
  --system-2: #c2410c;
  --system-3: #f97316;
  --system-4: #fef3c7;
  --system-surface: #fff7ed;
}
.native-ui-preview-card__tiles--metric-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.native-ui-preview-card__tiles--metric-board > div {
  min-height: 5.2rem;
  align-content: center;
}
.native-ui-preview-card__column-items--distributed > div {
  min-height: 3.8rem;
}
.native-ui-preview-card__dot.is-amber {
  background: #f59e0b;
}
.native-ui-preview-card__rail--showcase > div {
  flex: 0 0 clamp(12rem, 34vw, 17rem);
  min-width: clamp(12rem, 34vw, 17rem);
  min-height: 6rem;
  scroll-snap-align: start;
}
.native-ui-preview-card__rail--showcase > div:nth-child(4n + 1) {
  border-block-start: 3px solid #06b6d4;
}
.native-ui-preview-card__rail--showcase > div:nth-child(4n + 2) {
  border-block-start: 3px solid #22c55e;
}
.native-ui-preview-card__rail--showcase > div:nth-child(4n + 3) {
  border-block-start: 3px solid #f97316;
}
.native-ui-preview-card__rail--showcase > div:nth-child(4n) {
  border-block-start: 3px solid #d946ef;
}
@media (max-width: 48rem) {
  html[data-fastpanel-ui-layout='grid-3'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='grid-4'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='mosaic-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-4'] .native-card-rail > .fi-grid > .fi-grid-col {
    min-width: 0;
  }
  html[data-fastpanel-ui-layout='rail-feature'] .native-card-rail > .fi-grid > .fi-grid-col:first-child {
    flex-basis: min(88vw, 25rem);
    min-width: min(88vw, 25rem);
  }
  .native-ui-system-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .native-ui-system-choice {
    min-height: 6.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .native-ui-system-choice {
    transition: none;
  }
  html[data-fastpanel-ui-list='horizontal-snap'] :is(.fi-ta-content, .native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
    scroll-behavior: auto;
  }
}
html[data-fastpanel-ui-palette='plum'] {
  --native-ui-surface: linear-gradient(145deg, #faf5ff, #f3e8ff 58%, #fce7f3);
  --native-ui-border: #a855f7;
  --native-ui-shadow: 0 12px 30px rgb(126 34 206 / 13%);
  --native-ui-inset: #fffaff;
}
html[data-fastpanel-ui-palette='forest'] {
  --native-ui-surface: linear-gradient(145deg, #f0fdf4, #dcfce7 58%, #ecfccb);
  --native-ui-border: #16a34a;
  --native-ui-shadow: 0 12px 28px rgb(22 101 52 / 12%);
  --native-ui-inset: #f7fee7;
}
html[data-fastpanel-ui-palette='lagoon'] {
  --native-ui-surface: linear-gradient(145deg, #ecfeff, #ccfbf1 58%, #dbeafe);
  --native-ui-border: #14b8a6;
  --native-ui-shadow: 0 12px 30px rgb(13 148 136 / 13%);
  --native-ui-inset: #f0fdfa;
}
html[data-fastpanel-ui-palette='candy'] {
  --native-ui-surface: linear-gradient(145deg, #fff1f2, #fdf2f8 48%, #fae8ff);
  --native-ui-border: #ec4899;
  --native-ui-shadow: 0 12px 30px rgb(219 39 119 / 13%);
  --native-ui-inset: #fff7fb;
}
html[data-fastpanel-ui-palette='oxide'] {
  --native-ui-surface: linear-gradient(145deg, #f5f5f4, #e7e5e4 55%, #f1f5f9);
  --native-ui-border: #a16207;
  --native-ui-shadow: 0 10px 26px rgb(68 64 60 / 12%);
  --native-ui-inset: #fafaf9;
}
html[data-fastpanel-ui-palette='cobalt'] {
  --native-ui-surface: linear-gradient(145deg, #eff6ff, #dbeafe 55%, #e0e7ff);
  --native-ui-border: #2563eb;
  --native-ui-shadow: 0 12px 30px rgb(37 99 235 / 14%);
  --native-ui-inset: #f8fbff;
}
html[data-fastpanel-ui-palette='marigold'] {
  --native-ui-surface: linear-gradient(145deg, #fffbeb, #fef3c7 55%, #ffedd5);
  --native-ui-border: #f59e0b;
  --native-ui-shadow: 0 12px 30px rgb(217 119 6 / 14%);
  --native-ui-inset: #fffdf5;
}
html[data-fastpanel-ui-palette='sky'] {
  --native-ui-surface: linear-gradient(145deg, #f0f9ff, #e0f2fe 55%, #eff6ff);
  --native-ui-border: #0ea5e9;
  --native-ui-shadow: 0 12px 30px rgb(2 132 199 / 12%);
  --native-ui-inset: #f8fcff;
}
html[data-fastpanel-ui-palette='ivory'] {
  --native-ui-surface: linear-gradient(145deg, #fffef7, #f8f5ed 55%, #fef3c7);
  --native-ui-border: #a8a29e;
  --native-ui-shadow: 0 8px 24px rgb(87 83 78 / 9%);
  --native-ui-inset: #fffefa;
}
html[data-fastpanel-ui-palette='orchid'] {
  --native-ui-surface: linear-gradient(145deg, #fdf4ff, #fae8ff 55%, #f5f3ff);
  --native-ui-border: #c026d3;
  --native-ui-shadow: 0 12px 30px rgb(162 28 175 / 13%);
  --native-ui-inset: #fffaff;
}
html.dark[data-fastpanel-ui-palette='plum'] {
  --native-ui-surface: linear-gradient(145deg, #2e1742, #3b1f50 58%, #401d38);
  --native-ui-border: #c084fc;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: #261a32;
}
html.dark[data-fastpanel-ui-palette='forest'] {
  --native-ui-surface: linear-gradient(145deg, #123329, #164333 58%, #2a3c1c);
  --native-ui-border: #4ade80;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 26%);
  --native-ui-inset: #142b22;
}
html.dark[data-fastpanel-ui-palette='lagoon'] {
  --native-ui-surface: linear-gradient(145deg, #10333b, #123c3c 58%, #1c3152);
  --native-ui-border: #2dd4bf;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 26%);
  --native-ui-inset: #142f35;
}
html.dark[data-fastpanel-ui-palette='candy'] {
  --native-ui-surface: linear-gradient(145deg, #3b1d2b, #3b2038 48%, #302044);
  --native-ui-border: #f472b6;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: #2b1c2a;
}
html.dark[data-fastpanel-ui-palette='oxide'] {
  --native-ui-surface: linear-gradient(145deg, #292524, #3b3532 55%, #1f2937);
  --native-ui-border: #d6a15d;
  --native-ui-shadow: 0 10px 26px rgb(0 0 0 / 28%);
  --native-ui-inset: #292524;
}
html.dark[data-fastpanel-ui-palette='cobalt'] {
  --native-ui-surface: linear-gradient(145deg, #17294a, #1e3760 55%, #272650);
  --native-ui-border: #60a5fa;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --native-ui-inset: #17243c;
}
html.dark[data-fastpanel-ui-palette='marigold'] {
  --native-ui-surface: linear-gradient(145deg, #382d13, #433317 55%, #422719);
  --native-ui-border: #fbbf24;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: #302713;
}
html.dark[data-fastpanel-ui-palette='sky'] {
  --native-ui-surface: linear-gradient(145deg, #142c40, #18374b 55%, #1e3150);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 26%);
  --native-ui-inset: #172a3b;
}
html.dark[data-fastpanel-ui-palette='ivory'] {
  --native-ui-surface: linear-gradient(145deg, #302e2a, #3b3732 55%, #403923);
  --native-ui-border: #c9b99d;
  --native-ui-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  --native-ui-inset: #292724;
}
html.dark[data-fastpanel-ui-palette='orchid'] {
  --native-ui-surface: linear-gradient(145deg, #351c3b, #412245 55%, #292343);
  --native-ui-border: #e879f9;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: #2b1e34;
}
html[data-fastpanel-ui-widget='pill'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-radius: 999px;
  padding-inline: 1.1rem;
}
html[data-fastpanel-ui-widget='dashboard'] .fi-wi-stats-overview .fi-wi-stats-overview-stat {
  background: var(--native-ui-inset, #f8fafc);
  box-shadow: inset 0 0 0 1px var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--native-ui-border, #64748b) 32%, transparent);
  }
}
html[data-fastpanel-ui-widget='vertical'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  display: grid;
  align-content: center;
  min-height: 7rem;
  text-align: center;
}
html[data-fastpanel-ui-widget='signal-line'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.45rem;
}
html[data-fastpanel-ui-widget='number-focus'] :is(.fi-wi-stats-overview-stat-value, .native-ui-preview-widget strong) {
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
}
html[data-fastpanel-ui-widget='duotone'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(135deg, var(--native-ui-surface, #fff) 0 62%, var(--native-ui-border, #64748b));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(135deg, var(--native-ui-surface, #fff) 0 62%, color-mix(in srgb, var(--native-ui-border, #64748b) 18%, white));
  }
}
html[data-fastpanel-ui-widget='progress'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-end: 4px solid var(--native-ui-border, #2563eb);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 4px solid color-mix(in srgb, var(--native-ui-border, #2563eb) 62%, white);
  }
}
html[data-fastpanel-ui-widget='icon-tile'] .fi-wi-stats-overview .fi-wi-stats-overview-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}
html[data-fastpanel-ui-widget='compact-row'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  padding: 0.65rem 0.8rem;
  border-radius: 0.65rem;
  box-shadow: none;
}
html[data-fastpanel-ui-card='bento-asymmetric'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='bento-asymmetric'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
html[data-fastpanel-ui-card='bento-asymmetric'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content > :first-child, html[data-fastpanel-ui-card='bento-asymmetric'] .native-ui-preview-card__tiles > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-card='vertical-elegant'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
html[data-fastpanel-ui-card='vertical-elegant'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  width: 100%;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 28%, transparent);
  }
  border-inline-start: 4px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.95rem;
  background: var(--native-ui-inset, white);
}
html[data-fastpanel-ui-card='distributed-panels'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: stretch;
  gap: 0.8rem;
}
html[data-fastpanel-ui-card='distributed-panels'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.9rem;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 38%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, #f8fafc);
  box-shadow: 0 5px 14px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-card='gradient-tiles'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 38%, transparent);
  }
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--native-ui-inset, white), var(--native-ui-border, #64748b));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg, var(--native-ui-inset, white), color-mix(in srgb, var(--native-ui-border, #64748b) 12%, white));
  }
}
html[data-fastpanel-ui-card='outlined-panels'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border: 2px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--native-ui-border, #64748b) 58%, #fff);
  }
  border-radius: 0.7rem;
  background: var(--native-ui-inset, #fff);
  box-shadow: none;
}
html[data-fastpanel-ui-card='double-frame'] :is(.fi-section, .native-ui-preview-card) {
  outline: 1px solid var(--native-ui-border, #64748b);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 1px var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--native-ui-border, #64748b) 24%, transparent);
  }
}
html[data-fastpanel-ui-card='compact-ledger'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  padding: 0.5rem 0.7rem;
  border: 0;
  border-block-end: 1px solid var(--native-ui-border, #64748b);
  border-radius: 0;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='surface-split'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  padding: 0.8rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 8%, var(--native-ui-inset, white));
  }
}
html[data-fastpanel-ui-card='spotlight-hero'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content > :first-child, html[data-fastpanel-ui-card='spotlight-hero'] .native-ui-preview-card__tiles > :first-child {
  grid-column: 1 / -1;
  min-height: 5rem;
  background: var(--native-ui-surface, #eff6ff);
  box-shadow: inset 4px 0 0 var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-card='storyboard'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border-inline-start: 3px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.25rem 0.8rem 0.8rem 0.25rem;
  background: var(--native-ui-inset, white);
}
html[data-fastpanel-ui-card='inset-grid'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  padding: 0.8rem;
  border-radius: 1rem;
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 7%, var(--native-ui-inset, white));
  }
}
html[data-fastpanel-ui-card='inset-grid'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  padding: 0.75rem;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 24%, transparent);
  }
  border-radius: 0.75rem;
  background: var(--native-ui-inset, white);
}
html[data-fastpanel-ui-card='ribbon'] :is(.fi-section-header, .native-ui-preview-card > header) {
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
  padding-block-start: 0.8rem;
}
html[data-fastpanel-ui-card='column-rail'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  border-inline-start: 5px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border-inline-start: 5px solid color-mix(in srgb, var(--native-ui-border, #64748b) 72%, white);
  }
  border-radius: 0.35rem 0.9rem 0.9rem 0.35rem;
  background: var(--native-ui-inset, white);
}
html[data-fastpanel-ui-card='profile-panels'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}
html[data-fastpanel-ui-card='profile-panels'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 30%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, white);
}
html[data-fastpanel-ui-list^='horizontal-'] :is(.fi-ta-content, .native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-coverflow'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: inline mandatory;
  padding: 0.5rem 0.25rem 0.9rem;
}
html[data-fastpanel-ui-list='horizontal-coverflow'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(14rem, 32vw, 21rem);
  min-width: clamp(14rem, 32vw, 21rem);
  scroll-snap-align: center;
  box-shadow: 0 10px 22px rgb(15 23 42 / 9%);
}
html[data-fastpanel-ui-list='horizontal-stepper'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.7rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  counter-reset: rail-step;
}
html[data-fastpanel-ui-list='horizontal-stepper'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(11rem, 27vw, 17rem);
  min-width: clamp(11rem, 27vw, 17rem);
  scroll-snap-align: start;
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='horizontal-segmented'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.35rem;
  border-radius: 1rem;
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 8%, transparent);
  }
}
html[data-fastpanel-ui-list='horizontal-segmented'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(10rem, 24vw, 15rem);
  min-width: clamp(10rem, 24vw, 15rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-deck'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  padding: 0.4rem 0.2rem 0.75rem;
}
html[data-fastpanel-ui-list='horizontal-deck'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(14rem, 30vw, 19rem);
  min-width: clamp(14rem, 30vw, 19rem);
  scroll-snap-align: start;
  box-shadow: 5px 6px 0 var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 5px 6px 0 color-mix(in srgb, var(--native-ui-border, #64748b) 18%, transparent);
  }
}
html[data-fastpanel-ui-list='horizontal-card-grid'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding-block: 0.4rem 0.8rem;
}
html[data-fastpanel-ui-list='horizontal-card-grid'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 28vw, 18rem);
  min-width: clamp(12rem, 28vw, 18rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-colorband'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
  background: linear-gradient(145deg, var(--native-ui-inset, white), var(--native-ui-border, #64748b));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg, var(--native-ui-inset, white), color-mix(in srgb, var(--native-ui-border, #64748b) 11%, white));
  }
}
html[data-fastpanel-ui-list='horizontal-colorband'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(even) .fi-section {
  border-block-start-color: var(--success-500, #22c55e);
}
html[data-fastpanel-ui-list='horizontal-spacious'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  padding: 0.5rem 0.25rem 1rem;
}
html[data-fastpanel-ui-list='horizontal-spacious'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(16rem, 36vw, 25rem);
  min-width: clamp(16rem, 36vw, 25rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-slim'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-slim'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(9rem, 20vw, 13rem);
  min-width: clamp(9rem, 20vw, 13rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-alternating'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(even) .fi-section, html[data-fastpanel-ui-list='horizontal-alternating'] .native-ui-preview-card__rail > div:nth-child(even) {
  transform: translateY(0.45rem);
  background: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #64748b) 10%, var(--native-ui-inset, white));
  }
}
html[data-fastpanel-ui-list='horizontal-ledger'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  border-block: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border-block: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 32%, transparent);
  }
}
html[data-fastpanel-ui-list='horizontal-ledger'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 26vw, 17rem);
  min-width: clamp(12rem, 26vw, 17rem);
  scroll-snap-align: start;
  border-radius: 0;
  box-shadow: none;
}
html[data-fastpanel-ui-list='horizontal-ledger'] .native-card-rail > .fi-grid > .fi-grid-col:not(:last-child) .fi-section {
  border-inline-end: 1px solid var(--native-ui-border, #94a3b8);
}
html[data-fastpanel-ui-list='horizontal-ribbon'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-ribbon'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.35rem 0.9rem 0.9rem 0.9rem;
}
html[data-fastpanel-ui-list='horizontal-compact-snap'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-compact-snap'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(9.5rem, 21vw, 14rem);
  min-width: clamp(9.5rem, 21vw, 14rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-story'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding-block: 0.55rem 0.85rem;
}
html[data-fastpanel-ui-list='horizontal-story'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 29vw, 18rem);
  min-width: clamp(12rem, 29vw, 18rem);
  scroll-snap-align: start;
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='horizontal-fullbleed'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  gap: 0.7rem;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding: 0.25rem 0 0.8rem;
}
html[data-fastpanel-ui-list='horizontal-fullbleed'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 min(88%, 26rem);
  min-width: min(88%, 26rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='grid-2-wide'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
html[data-fastpanel-ui-layout='grid-2-wide'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: 1 / -1;
}
html[data-fastpanel-ui-layout='grid-5'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.65rem;
}
html[data-fastpanel-ui-layout='grid-masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: block;
  columns: 3;
  column-gap: 0.8rem;
}
html[data-fastpanel-ui-layout='grid-masonry'] :is(.native-ui-preview-card, .native-card-rail > .fi-grid > .fi-grid-col) {
  display: inline-block;
  width: 100%;
  margin-block-end: 0.8rem;
  break-inside: avoid;
}
html[data-fastpanel-ui-layout='grid-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
html[data-fastpanel-ui-layout='grid-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='rail-shelf'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
html[data-fastpanel-ui-layout='rail-shelf'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 1 1 min(42%, 20rem);
  min-width: min(42%, 16rem);
}
html[data-fastpanel-ui-layout='rail-cards'] .native-card-rail > .fi-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
}
html[data-fastpanel-ui-layout='rail-cards'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(15rem, 31vw, 22rem);
  min-width: clamp(15rem, 31vw, 22rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-capsule'] .native-card-rail > .fi-grid {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
}
html[data-fastpanel-ui-layout='rail-capsule'] .native-card-rail > .fi-grid > .fi-grid-col .fi-section {
  border-radius: 999px;
}
html[data-fastpanel-ui-layout='rail-timeline'] .native-card-rail > .fi-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-layout='rail-timeline'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(13rem, 28vw, 19rem);
  min-width: clamp(13rem, 28vw, 19rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-timeline'] .native-card-rail > .fi-grid > .fi-grid-col .fi-section {
  border-block-start: 3px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-layout='rail-center'] .native-card-rail > .fi-grid {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-layout='rail-center'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 clamp(14rem, 28vw, 20rem);
  min-width: clamp(14rem, 28vw, 20rem);
  scroll-snap-align: center;
}
html[data-fastpanel-ui-layout='rail-wide'] .native-card-rail > .fi-grid {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
}
html[data-fastpanel-ui-layout='rail-wide'] .native-card-rail > .fi-grid > .fi-grid-col {
  flex: 0 0 min(82%, 32rem);
  min-width: min(82%, 32rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='stack-split'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 1fr);
  align-items: stretch;
}
html[data-fastpanel-ui-layout='stack-split'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='columns-asymmetric'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
html[data-fastpanel-ui-layout='columns-asymmetric'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(3n + 1) {
  grid-row: span 2;
}
.native-ui-system-choice--cobalt-console {
  --system-1: #1d4ed8;
  --system-2: #2563eb;
  --system-3: #60a5fa;
  --system-4: #dbeafe;
  --system-surface: #eff6ff;
}
.native-ui-system-choice--plum-gallery {
  --system-1: #581c87;
  --system-2: #7e22ce;
  --system-3: #c084fc;
  --system-4: #f3e8ff;
  --system-surface: #faf5ff;
}
.native-ui-system-choice--forest-ledger {
  --system-1: #14532d;
  --system-2: #15803d;
  --system-3: #4ade80;
  --system-4: #dcfce7;
  --system-surface: #f0fdf4;
}
.native-ui-system-choice--lagoon-workspace {
  --system-1: #115e59;
  --system-2: #0d9488;
  --system-3: #2dd4bf;
  --system-4: #ccfbf1;
  --system-surface: #ecfeff;
}
.native-ui-system-choice--candy-studio {
  --system-1: #be185d;
  --system-2: #db2777;
  --system-3: #c026d3;
  --system-4: #fce7f3;
  --system-surface: #fff1f2;
}
.native-ui-system-choice--oxide-minimal {
  --system-1: #44403c;
  --system-2: #78716c;
  --system-3: #a16207;
  --system-4: #e7e5e4;
  --system-surface: #fafaf9;
}
.native-ui-system-choice--marigold-mosaic {
  --system-1: #92400e;
  --system-2: #d97706;
  --system-3: #fbbf24;
  --system-4: #fef3c7;
  --system-surface: #fffbeb;
}
.native-ui-system-choice--skyline-light {
  --system-1: #075985;
  --system-2: #0284c7;
  --system-3: #38bdf8;
  --system-4: #e0f2fe;
  --system-surface: #f0f9ff;
}
@media (max-width: 48rem) {
  html[data-fastpanel-ui-layout='grid-5'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    columns: 2;
  }
  html[data-fastpanel-ui-layout='grid-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-2-wide'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-layout='grid-2-wide'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: auto;
  }
  html[data-fastpanel-ui-layout='grid-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child, html[data-fastpanel-ui-layout='stack-split'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child, html[data-fastpanel-ui-layout='columns-asymmetric'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(3n + 1) {
    grid-column: auto;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='stack-split'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='columns-asymmetric'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-layout='rail-shelf'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
    min-width: 100%;
  }
  html[data-fastpanel-ui-card='bento-asymmetric'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='bento-asymmetric'] .native-ui-preview-card__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-card='bento-asymmetric'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content > :first-child, html[data-fastpanel-ui-card='bento-asymmetric'] .native-ui-preview-card__tiles > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
.native-ui-gallery__toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) minmax(12rem, 1fr) auto;
  align-items: end;
  gap: 0.8rem;
  margin-block: 0.25rem 1.25rem;
  padding: 0.9rem;
  border: 1px solid var(--native-ui-border, var(--gray-200));
  border-radius: 1rem;
  background: var(--native-ui-surface, var(--gray-50));
}
.native-ui-gallery__search {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--gray-700);
  font-size: 0.75rem;
  font-weight: 750;
}
.native-ui-gallery__search input {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--native-ui-border, var(--gray-300));
  border-radius: 0.7rem;
  background: var(--native-ui-inset, white);
  color: var(--gray-950);
  font: inherit;
}
.native-ui-gallery__search-count {
  align-self: center;
  color: var(--gray-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.native-ui-gallery__reset {
  min-height: 2.65rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--native-ui-border, var(--gray-300));
  border-radius: 0.7rem;
  background: var(--native-ui-inset, white);
  color: var(--gray-700);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}
.native-ui-gallery__reset:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
}
.native-ui-gallery__group-reset {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--native-ui-border, var(--gray-300));
  border-radius: 0.7rem;
  background: var(--native-ui-inset, white);
  color: var(--gray-700);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
.native-ui-gallery__group-reset:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
}
.native-ui-gallery__group-reset:focus-visible {
  outline: 3px solid var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 3px solid color-mix(in srgb, var(--primary-500) 40%, transparent);
  }
  outline-offset: 2px;
}
@container native-ui-catalog (max-width: 32rem) {
  .native-ui-gallery__heading {
    flex-wrap: wrap;
  }
  .native-ui-gallery__group-reset {
    margin-inline-start: auto;
  }
}
.native-ui-gallery [hidden] {
  display: none !important;
}
@media (max-width: 48rem) {
  .native-ui-gallery__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .native-ui-gallery__search {
    grid-column: 1 / -1;
  }
  .native-ui-gallery__search-count {
    font-size: 0.7rem;
  }
}
@container native-ui-catalog (max-width: 46rem) {
  .native-ui-gallery__toolbar {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .native-ui-gallery__search {
    grid-column: 1 / -1;
  }
  .native-ui-gallery__search-count {
    min-width: 0;
  }
}
@container native-ui-catalog (max-width: 25rem) {
  .native-ui-gallery__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
  .native-ui-gallery__search-count, .native-ui-gallery__reset {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 25rem) {
  html[data-fastpanel-ui-layout='grid-masonry'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    columns: 1;
  }
}
html[data-fastpanel-ui-palette='ruby'] {
  --native-ui-surface: #fff1f2;
  --native-ui-border: #be123c;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='ruby'] {
  --native-ui-surface: #3f1017;
  --native-ui-border: #fb7185;
  --native-ui-shadow: none;
  --native-ui-inset: #2b1017;
}
html[data-fastpanel-ui-palette='tangerine'] {
  --native-ui-surface: #fff7ed;
  --native-ui-border: #c2410c;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='tangerine'] {
  --native-ui-surface: #40210b;
  --native-ui-border: #fb923c;
  --native-ui-shadow: none;
  --native-ui-inset: #2d1a0c;
}
html[data-fastpanel-ui-palette='lime'] {
  --native-ui-surface: #f7fee7;
  --native-ui-border: #4d7c0f;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='lime'] {
  --native-ui-surface: #1b330c;
  --native-ui-border: #a3e635;
  --native-ui-shadow: none;
  --native-ui-inset: #15270b;
}
html[data-fastpanel-ui-palette='ultraviolet'] {
  --native-ui-surface: #f5f3ff;
  --native-ui-border: #6d28d9;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='ultraviolet'] {
  --native-ui-surface: #2e1065;
  --native-ui-border: #c4b5fd;
  --native-ui-shadow: none;
  --native-ui-inset: #211047;
}
html[data-fastpanel-ui-palette='deep-sea'] {
  --native-ui-surface: #e0f2fe;
  --native-ui-border: #0369a1;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='deep-sea'] {
  --native-ui-surface: #0f2c40;
  --native-ui-border: #38bdf8;
  --native-ui-shadow: none;
  --native-ui-inset: #102638;
}
html[data-fastpanel-ui-palette='blueprint'] {
  --native-ui-surface: #eff6ff;
  --native-ui-border: #1d4ed8;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='blueprint'] {
  --native-ui-surface: #13243d;
  --native-ui-border: #60a5fa;
  --native-ui-shadow: none;
  --native-ui-inset: #17253a;
}
html[data-fastpanel-ui-palette='chalk'] {
  --native-ui-surface: #ffffff;
  --native-ui-border: #64748b;
  --native-ui-shadow: none;
  --native-ui-inset: #f8fafc;
}
html.dark[data-fastpanel-ui-palette='chalk'] {
  --native-ui-surface: #252a31;
  --native-ui-border: #cbd5e1;
  --native-ui-shadow: none;
  --native-ui-inset: #171a1f;
}
html[data-fastpanel-ui-palette='carbon'] {
  --native-ui-surface: #f1f5f9;
  --native-ui-border: #334155;
  --native-ui-shadow: none;
  --native-ui-inset: #ffffff;
}
html.dark[data-fastpanel-ui-palette='carbon'] {
  --native-ui-surface: #111827;
  --native-ui-border: #9ca3af;
  --native-ui-shadow: none;
  --native-ui-inset: #090d14;
}
.native-ui-gallery__swatch--ruby {
  background: linear-gradient(135deg, #881337, #e11d48, #fda4af);
}
.native-ui-gallery__swatch--tangerine {
  background: linear-gradient(135deg, #9a3412, #f97316, #fdba74);
}
.native-ui-gallery__swatch--lime {
  background: linear-gradient(135deg, #365314, #84cc16, #d9f99d);
}
.native-ui-gallery__swatch--ultraviolet {
  background: linear-gradient(135deg, #3b0764, #7c3aed, #c4b5fd);
}
.native-ui-gallery__swatch--deep-sea {
  background: linear-gradient(135deg, #082f49, #0284c7, #7dd3fc);
}
.native-ui-gallery__swatch--blueprint {
  background: linear-gradient(135deg, #172554, #2563eb, #bfdbfe);
}
.native-ui-gallery__swatch--chalk {
  background: linear-gradient(135deg, #fff, #e2e8f0, #94a3b8);
}
.native-ui-gallery__swatch--carbon {
  background: linear-gradient(135deg, #020617, #475569, #cbd5e1);
}
html[data-fastpanel-ui-widget='color-blocks'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div) {
  color: #fff;
  border-color: #0f172a;
}
html[data-fastpanel-ui-widget='color-blocks'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div) :is(small, span, label) {
  color: #fff;
}
html[data-fastpanel-ui-widget='color-blocks'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n + 1) {
  background: #1d4ed8;
}
html[data-fastpanel-ui-widget='color-blocks'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n + 2) {
  background: #15803d;
}
html[data-fastpanel-ui-widget='color-blocks'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n + 3) {
  background: #c2410c;
}
html[data-fastpanel-ui-widget='color-blocks'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n) {
  background: #a21caf;
}
html[data-fastpanel-ui-widget='monochrome-board'] .fi-wi-stats-overview-stat {
  border: 1px solid #475569;
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: none;
}
html.dark[data-fastpanel-ui-widget='monochrome-board'] .fi-wi-stats-overview-stat {
  border-color: #64748b;
  background: #111827;
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='status-ribbon'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.65rem;
}
html[data-fastpanel-ui-widget='status-ribbon'] .fi-wi-stats-overview-stat .fi-badge {
  border: 1px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-widget='focus-value'] :is(.fi-wi-stats-overview-stat-value, .native-ui-preview-card__tiles strong) {
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.25;
}
html[data-fastpanel-ui-widget='vertical-stat'] .fi-wi-stats-overview-stat {
  display: grid;
  align-content: center;
  min-height: 8rem;
  text-align: center;
}
html[data-fastpanel-ui-widget='dual-column'] .fi-wi-stats-overview-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.7rem;
}
html[data-fastpanel-ui-widget='dual-column'] .fi-wi-stats-overview-stat > :last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
}
html[data-fastpanel-ui-card='scatter'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='scatter'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.7rem;
}
html[data-fastpanel-ui-card='scatter'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content > :nth-child(4n + 1), html[data-fastpanel-ui-card='scatter'] .native-ui-preview-card__tiles > :nth-child(4n + 1) {
  grid-column: span 2;
}
html[data-fastpanel-ui-card='scatter'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item), html[data-fastpanel-ui-card='scatter'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--native-ui-border, #64748b);
  border-radius: 0.85rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='column-ledger'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}
html[data-fastpanel-ui-card='column-ledger'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 0;
  border-block-end: 1px solid var(--native-ui-border, #64748b);
  border-radius: 0;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='inset-board'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='inset-board'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.7rem;
  background: var(--native-ui-surface, #f8fafc);
}
html[data-fastpanel-ui-card='inset-board'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item), html[data-fastpanel-ui-card='inset-board'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.8rem;
  border: 1px solid var(--native-ui-border, #64748b);
  border-radius: 0.75rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='hero-strip'] .fi-section-header, html[data-fastpanel-ui-card='hero-strip'] .native-ui-preview-card > header {
  border-block-start: 5px solid var(--native-ui-border, var(--primary-500));
  padding-block: 0.8rem;
}
html[data-fastpanel-ui-card='hero-strip'] .native-detail-card .fi-in-entry-wrp:first-child, html[data-fastpanel-ui-card='hero-strip'] .native-ui-preview-card__tiles > :first-child {
  grid-column: 1 / -1;
  border-inline-start: 4px solid var(--native-ui-border, var(--primary-500));
  background: var(--native-ui-surface, #eff6ff);
}
html[data-fastpanel-ui-card='bordered-panels'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item), html[data-fastpanel-ui-card='bordered-panels'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  padding: 0.75rem;
  border: 2px solid var(--native-ui-border, #64748b);
  border-radius: 0.65rem;
  background: var(--native-ui-inset, #fff);
  box-shadow: none;
}
html[data-fastpanel-ui-card='vertical-profile'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
html[data-fastpanel-ui-card='vertical-profile'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  width: 100%;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--native-ui-border, #64748b);
  border-inline-start: 5px solid var(--native-ui-border, var(--primary-500));
  border-radius: 0.85rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-list='horizontal-short-rail'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-short-rail'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(9rem, 19vw, 13rem);
  min-width: clamp(9rem, 19vw, 13rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-featured'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-featured'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(13rem, 27vw, 18rem);
  min-width: clamp(13rem, 27vw, 18rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-featured'] :is(.native-card-rail > .fi-grid > .fi-grid-col:first-child, .native-ui-preview-card__rail > div:first-child) {
  flex-basis: clamp(20rem, 42vw, 29rem);
}
html[data-fastpanel-ui-list='horizontal-checkpoints'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-checkpoints'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-block-start: 4px solid var(--native-ui-border, var(--primary-500));
}
html[data-fastpanel-ui-list='horizontal-checkpoints'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 25vw, 17rem);
  min-width: clamp(12rem, 25vw, 17rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 25vw, 17rem);
  min-width: clamp(12rem, 25vw, 17rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n + 1) {
  background: color-mix(in srgb, #0ea5e9 14%, #fff);
}
html[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n + 2) {
  background: color-mix(in srgb, #22c55e 14%, #fff);
}
html[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n + 3) {
  background: color-mix(in srgb, #f97316 14%, #fff);
}
html[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n) {
  background: color-mix(in srgb, #d946ef 14%, #fff);
}
html.dark[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n + 1) {
  background: color-mix(in srgb, #0ea5e9 34%, #111827);
}
html.dark[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n + 2) {
  background: color-mix(in srgb, #22c55e 30%, #111827);
}
html.dark[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n + 3) {
  background: color-mix(in srgb, #f97316 34%, #111827);
}
html.dark[data-fastpanel-ui-list='horizontal-color-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(4n) {
  background: color-mix(in srgb, #d946ef 32%, #111827);
}
html[data-fastpanel-ui-list='horizontal-strip'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  border-block: 1px solid var(--native-ui-border, #64748b);
}
html[data-fastpanel-ui-list='horizontal-strip'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-radius: 0;
  box-shadow: none;
}
html[data-fastpanel-ui-list='horizontal-strip'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 26vw, 18rem);
  min-width: clamp(12rem, 26vw, 18rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-lanes'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, auto));
  grid-auto-columns: clamp(12rem, 26vw, 18rem);
  gap: 0.6rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-list='horizontal-lanes'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  min-width: 0;
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='vertical-cards'] .fi-ta-table {
  border-collapse: separate;
  border-spacing: 0 0.45rem;
}
html[data-fastpanel-ui-list='vertical-cards'] .fi-ta-tbody > tr {
  outline: 1px solid var(--native-ui-border, #64748b);
  background: var(--native-ui-surface, #fff);
}
html[data-fastpanel-ui-list='rows-accented'] .fi-ta-tbody > tr:nth-child(4n + 1), html[data-fastpanel-ui-list='rows-accented'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n + 1) .fi-section {
  border-inline-start: 4px solid #2563eb;
}
html[data-fastpanel-ui-list='rows-accented'] .fi-ta-tbody > tr:nth-child(4n + 2), html[data-fastpanel-ui-list='rows-accented'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n + 2) .fi-section {
  border-inline-start: 4px solid #16a34a;
}
html[data-fastpanel-ui-list='rows-accented'] .fi-ta-tbody > tr:nth-child(4n + 3), html[data-fastpanel-ui-list='rows-accented'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n + 3) .fi-section {
  border-inline-start: 4px solid #ea580c;
}
html[data-fastpanel-ui-list='rows-accented'] .fi-ta-tbody > tr:nth-child(4n), html[data-fastpanel-ui-list='rows-accented'] .native-card-rail > .fi-grid > .fi-grid-col:nth-child(4n) .fi-section {
  border-inline-start: 4px solid #a21caf;
}
html[data-fastpanel-ui-layout='rail-compact-3'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-layout='rail-compact-3'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(9rem, 20vw, 13rem);
  min-width: clamp(9rem, 20vw, 13rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}
html[data-fastpanel-ui-layout='rail-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(13rem, 27vw, 18rem);
  min-width: clamp(13rem, 27vw, 18rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  flex-basis: clamp(20rem, 42vw, 29rem);
}
html[data-fastpanel-ui-layout='rail-band'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  border-block: 1px solid var(--native-ui-border, #64748b);
}
html[data-fastpanel-ui-layout='rail-band'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(12rem, 26vw, 18rem);
  min-width: clamp(12rem, 26vw, 18rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='grid-bento-asym'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(7rem, auto);
  gap: 0.75rem;
  align-items: stretch;
}
html[data-fastpanel-ui-layout='grid-bento-asym'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='grid-2-plus'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.75rem;
}
html[data-fastpanel-ui-layout='grid-2-plus'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: 1 / -1;
}
html[data-fastpanel-ui-layout='stack-fullwidth'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  align-items: stretch;
}
html[data-fastpanel-ui-layout='stack-fullwidth'] .native-card-rail > .fi-grid > .fi-grid-col {
  min-width: 0;
  width: 100%;
}
.native-ui-system-choice--ruby-executive {
  --system-1: #881337;
  --system-2: #be123c;
  --system-3: #fb7185;
  --system-4: #ffe4e6;
  --system-surface: #fff1f2;
}
.native-ui-system-choice--tangerine-operations {
  --system-1: #7c2d12;
  --system-2: #c2410c;
  --system-3: #fb923c;
  --system-4: #ffedd5;
  --system-surface: #fff7ed;
}
.native-ui-system-choice--lime-metrics {
  --system-1: #365314;
  --system-2: #4d7c0f;
  --system-3: #a3e635;
  --system-4: #ecfccb;
  --system-surface: #f7fee7;
}
.native-ui-system-choice--ultraviolet-studio {
  --system-1: #3b0764;
  --system-2: #6d28d9;
  --system-3: #c4b5fd;
  --system-4: #ede9fe;
  --system-surface: #f5f3ff;
}
.native-ui-system-choice--carbon-minimal {
  --system-1: #020617;
  --system-2: #334155;
  --system-3: #94a3b8;
  --system-4: #e2e8f0;
  --system-surface: #f1f5f9;
}
.native-ui-system-choice--blueprint-grid {
  --system-1: #172554;
  --system-2: #1d4ed8;
  --system-3: #60a5fa;
  --system-4: #dbeafe;
  --system-surface: #eff6ff;
}
.native-ui-system-choice--chalk-light {
  --system-1: #475569;
  --system-2: #64748b;
  --system-3: #cbd5e1;
  --system-4: #f1f5f9;
  --system-surface: #ffffff;
}
.native-ui-system-choice--deep-sea-board {
  --system-1: #082f49;
  --system-2: #0369a1;
  --system-3: #38bdf8;
  --system-4: #bae6fd;
  --system-surface: #e0f2fe;
}
.native-ui-system-choice--carbon-ledger {
  --system-1: #0f172a;
  --system-2: #475569;
  --system-3: #94a3b8;
  --system-4: #e2e8f0;
  --system-surface: #f8fafc;
}
.native-ui-system-choice--spectrum-tiles {
  --system-1: #0ea5e9;
  --system-2: #22c55e;
  --system-3: #f97316;
  --system-4: #d946ef;
  --system-surface: #ecfeff;
}
.native-ui-system-choice--tangerine-story {
  --system-1: #7c2d12;
  --system-2: #ea580c;
  --system-3: #fdba74;
  --system-4: #ffedd5;
  --system-surface: #fff7ed;
}
.native-ui-system-choice--ultraviolet-columns {
  --system-1: #3b0764;
  --system-2: #6d28d9;
  --system-3: #a78bfa;
  --system-4: #ede9fe;
  --system-surface: #f5f3ff;
}
.native-ui-system-choice--lime-control {
  --system-1: #365314;
  --system-2: #4d7c0f;
  --system-3: #84cc16;
  --system-4: #d9f99d;
  --system-surface: #f7fee7;
}
@media (max-width: 48rem) {
  html[data-fastpanel-ui-card='scatter'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='scatter'] .native-ui-preview-card__tiles, html[data-fastpanel-ui-card='inset-board'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='inset-board'] .native-ui-preview-card__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-bento-asym'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-bento-asym'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='grid-2-plus'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-layout='grid-2-plus'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: auto;
  }
  html[data-fastpanel-ui-layout='rail-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    flex-basis: min(84vw, 26rem);
  }
  html[data-fastpanel-ui-list='horizontal-featured'] :is(.native-card-rail > .fi-grid > .fi-grid-col:first-child, .native-ui-preview-card__rail > div:first-child) {
    flex-basis: min(84vw, 26rem);
  }
}
html[data-fastpanel-ui-palette='signal'] {
  --native-ui-surface: linear-gradient(145deg, #fffef5 0%, #fef3c7 52%, #fef9c3 100%);
  --native-ui-border: #ca8a04;
  --native-ui-shadow: 0 10px 24px rgb(113 63 18 / 13%);
  --native-ui-inset: #fffef5;
  --native-ui-accent: #111827;
}
html[data-fastpanel-ui-palette='arctic'] {
  --native-ui-surface: linear-gradient(145deg, #fff 0%, #f0f9ff 50%, #e0f2fe 100%);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 10px 26px rgb(14 165 233 / 12%);
  --native-ui-inset: #f8fdff;
  --native-ui-accent: #075985;
}
html[data-fastpanel-ui-palette='prism'] {
  --native-ui-surface: linear-gradient(130deg, #ecfeff 0%, #f0fdf4 25%, #fff7ed 52%, #fdf2f8 76%, #f5f3ff 100%);
  --native-ui-border: #7c3aed;
  --native-ui-shadow: 0 12px 28px rgb(124 58 237 / 15%);
  --native-ui-inset: linear-gradient(135deg, #fff 0%, #f0f9ff 52%, #fdf4ff 100%);
  --native-ui-accent: #6d28d9;
}
html[data-fastpanel-ui-palette='noir'] {
  --native-ui-surface: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
  --native-ui-border: #475569;
  --native-ui-shadow: 0 5px 16px rgb(15 23 42 / 8%);
  --native-ui-inset: #fff;
  --native-ui-accent: #0f172a;
}
html.dark[data-fastpanel-ui-palette='signal'] {
  --native-ui-surface: linear-gradient(145deg, #292417 0%, #3b321b 52%, #373115 100%);
  --native-ui-border: #facc15;
  --native-ui-shadow: 0 12px 26px rgb(0 0 0 / 27%);
  --native-ui-inset: #1f2937;
  --native-ui-accent: #fde047;
}
html.dark[data-fastpanel-ui-palette='arctic'] {
  --native-ui-surface: linear-gradient(145deg, #172b3c 0%, #183348 50%, #1e3650 100%);
  --native-ui-border: #7dd3fc;
  --native-ui-shadow: 0 10px 26px rgb(0 0 0 / 25%);
  --native-ui-inset: #172b3c;
  --native-ui-accent: #bae6fd;
}
html.dark[data-fastpanel-ui-palette='prism'] {
  --native-ui-surface: linear-gradient(130deg, #10272e 0%, #163027 25%, #382817 52%, #381d2c 76%, #292143 100%);
  --native-ui-border: #c4b5fd;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --native-ui-inset: linear-gradient(135deg, #17212b 0%, #192b34 52%, #2c2035 100%);
  --native-ui-accent: #ddd6fe;
}
html.dark[data-fastpanel-ui-palette='noir'] {
  --native-ui-surface: linear-gradient(145deg, #1f2937 0%, #111827 100%);
  --native-ui-border: #94a3b8;
  --native-ui-shadow: 0 5px 16px rgb(0 0 0 / 22%);
  --native-ui-inset: #0f172a;
  --native-ui-accent: #f8fafc;
}
.native-ui-gallery__swatch--signal {
  background: linear-gradient(135deg, #111827 0 34%, #facc15 34% 67%, #fffef5 67%);
}
.native-ui-gallery__swatch--arctic {
  background: linear-gradient(135deg, #fff, #bae6fd, #0284c7);
}
.native-ui-gallery__swatch--prism {
  background: linear-gradient(120deg, #06b6d4, #22c55e, #f97316, #d946ef, #7c3aed);
}
.native-ui-gallery__swatch--noir {
  background: linear-gradient(135deg, #020617, #475569, #f8fafc);
}
html[data-fastpanel-ui-widget='glass'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, var(--native-ui-inset, #fff), var(--native-ui-border, #38bdf8));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--native-ui-inset, #fff) 86%, white), color-mix(in srgb, var(--native-ui-border, #38bdf8) 12%, var(--native-ui-inset, #fff)));
  }
  border-color: var(--native-ui-border, #38bdf8);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--native-ui-border, #38bdf8) 55%, white);
  }
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 10px 24px var(--native-ui-border, #38bdf8);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 82%), 0 10px 24px color-mix(in srgb, var(--native-ui-border, #38bdf8) 12%, transparent);
  }
}
html.dark[data-fastpanel-ui-widget='glass'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, var(--native-ui-inset, #172b3c), var(--native-ui-border, #7dd3fc));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(145deg, color-mix(in srgb, var(--native-ui-inset, #172b3c) 82%, #fff), color-mix(in srgb, var(--native-ui-border, #7dd3fc) 16%, #111827));
  }
  border-color: var(--native-ui-border, #7dd3fc);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--native-ui-border, #7dd3fc) 65%, #334155);
  }
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 10px 24px rgb(0 0 0 / 20%);
}
html[data-fastpanel-ui-widget='spectrum-bar'] .fi-wi-stats-overview-stat, html[data-fastpanel-ui-widget='spectrum-bar'] .native-ui-preview-card__tiles > div {
  border-block-start: 5px solid var(--spectrum-accent);
}
html[data-fastpanel-ui-widget='spectrum-bar'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n + 1) {
  --spectrum-accent: #0891b2;
  background: #06b6d4;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #06b6d4 11%, var(--native-ui-inset, #fff));
  }
}
html[data-fastpanel-ui-widget='spectrum-bar'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n + 2) {
  --spectrum-accent: #16a34a;
  background: #22c55e;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #22c55e 10%, var(--native-ui-inset, #fff));
  }
}
html[data-fastpanel-ui-widget='spectrum-bar'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n + 3) {
  --spectrum-accent: #ea580c;
  background: #f97316;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #f97316 10%, var(--native-ui-inset, #fff));
  }
}
html[data-fastpanel-ui-widget='spectrum-bar'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-card__tiles > div):nth-child(4n) {
  --spectrum-accent: #a21caf;
  background: #d946ef;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #d946ef 10%, var(--native-ui-inset, #fff));
  }
}
html[data-fastpanel-ui-widget='bold-contrast'] .fi-wi-stats-overview-stat, html[data-fastpanel-ui-widget='bold-contrast'] .native-ui-preview-card__tiles > div {
  border: 2px solid var(--native-ui-accent, #111827);
  border-block-end-width: 6px;
  border-radius: 0.7rem;
  box-shadow: none;
  font-weight: 800;
}
html[data-fastpanel-ui-widget='mono-slab'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border: 1px solid #475569;
  border-radius: 0.6rem;
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: 5px 5px 0 #cbd5e1;
  filter: grayscale(1);
}
html.dark[data-fastpanel-ui-widget='mono-slab'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-color: #94a3b8;
  background: #111827;
  color: #f8fafc;
  box-shadow: 5px 5px 0 #334155;
}
html[data-fastpanel-ui-card='full-mosaic'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='full-mosaic'] :is(.native-ui-preview-card__tiles--full-mosaic) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.7rem;
}
html[data-fastpanel-ui-card='full-mosaic'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content > :first-child, html[data-fastpanel-ui-card='full-mosaic'] .native-ui-preview-card__tiles--full-mosaic > :first-child {
  grid-column: span 2;
}
html[data-fastpanel-ui-card='full-mosaic'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item), html[data-fastpanel-ui-card='full-mosaic'] .native-ui-preview-card__tiles--full-mosaic > div {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 44%, transparent);
  }
  border-radius: 0.9rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='column-profile'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}
html[data-fastpanel-ui-card='column-profile'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 32%, transparent);
  }
  border-inline-start: 5px solid var(--native-ui-border, #0ea5e9);
  border-radius: 0.85rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='column-profile'] .native-ui-preview-card__column-items--profile > div {
  min-height: 4.2rem;
  border-inline-start: 5px solid var(--native-ui-border, #0ea5e9);
  border-radius: 0.85rem;
  background: var(--native-ui-inset, #fff);
}
html[data-fastpanel-ui-card='stat-ledger'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='stat-ledger'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.55rem;
}
html[data-fastpanel-ui-card='stat-ledger'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item), html[data-fastpanel-ui-card='stat-ledger'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-block-end: 2px solid var(--native-ui-border, #64748b);
  border-radius: 0.45rem;
  background: var(--native-ui-inset, #fff);
  box-shadow: inset 0 -1.5rem 2rem var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 -1.5rem 2rem color-mix(in srgb, var(--native-ui-border, #64748b) 6%, transparent);
  }
}
html[data-fastpanel-ui-card='narrative'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}
html[data-fastpanel-ui-card='narrative'] :is(.native-detail-card, .native-vertical-card-stack) :is(.fi-in-entry-wrp, .fi-in-repeatable-item) {
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-inline-start: 3px solid var(--native-ui-border, #64748b);
  border-radius: 0 0.8rem 0.8rem 0;
  background: linear-gradient(90deg, var(--native-ui-border, #64748b), var(--native-ui-inset, white) 52%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--native-ui-border, #64748b) 8%, var(--native-ui-inset, white)), var(--native-ui-inset, white) 52%);
  }
}
html[data-fastpanel-ui-list='horizontal-staggered'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  padding-block: 0.35rem 0.7rem;
}
html[data-fastpanel-ui-list='horizontal-staggered'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 24vw, 17rem);
  min-width: clamp(12rem, 24vw, 17rem);
  scroll-snap-align: start;
  border-block-start: 4px solid var(--native-ui-border, #64748b);
}
html[data-fastpanel-ui-list='horizontal-staggered'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(even) {
  border-block-start-color: var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-start-color: color-mix(in srgb, var(--native-ui-border, #64748b) 48%, #f97316);
  }
  border-radius: 1.2rem 0.65rem 1.2rem 0.65rem;
}
html[data-fastpanel-ui-list='horizontal-shelf'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.8rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.3rem 0.2rem 0.85rem;
}
html[data-fastpanel-ui-list='horizontal-shelf'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(13rem, 25vw, 18rem);
  min-width: clamp(13rem, 25vw, 18rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-shelf'] :is(.native-card-rail > .fi-grid > .fi-grid-col:first-child, .native-ui-preview-card__rail > div:first-child) {
  flex-basis: clamp(18rem, 36vw, 27rem);
}
html[data-fastpanel-ui-list='horizontal-shelf'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-block-start: 5px solid var(--native-ui-border, #64748b);
  border-radius: 1rem;
}
html[data-fastpanel-ui-list='horizontal-three-lanes'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(3.4rem, auto));
  grid-auto-columns: clamp(11rem, 23vw, 16rem);
  gap: 0.55rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-three-lanes'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  min-width: 0;
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-steps'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding-block: 0.35rem 0.7rem;
}
html[data-fastpanel-ui-list='horizontal-steps'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-block-start: 4px solid var(--native-ui-border, #64748b);
  border-radius: 0.45rem 0.45rem 1rem 1rem;
}
html[data-fastpanel-ui-list='horizontal-steps'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem, 25vw, 17rem);
  min-width: clamp(12rem, 25vw, 17rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-filmstrip'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.35rem 0.2rem 0.85rem;
}
html[data-fastpanel-ui-list='horizontal-filmstrip'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(16rem, 31vw, 23rem);
  min-width: clamp(16rem, 31vw, 23rem);
  min-height: 7rem;
  scroll-snap-align: center;
}
html[data-fastpanel-ui-list='horizontal-filmstrip'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-radius: 1.25rem;
  box-shadow: 0 9px 20px var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 9px 20px color-mix(in srgb, var(--native-ui-border, #64748b) 14%, transparent);
  }
}
html[data-fastpanel-ui-list='horizontal-ticker'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  border-block: 1px solid var(--native-ui-border, #64748b);
  padding-block: 0.35rem;
}
html[data-fastpanel-ui-list='horizontal-ticker'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(9rem, 18vw, 13rem);
  min-width: clamp(9rem, 18vw, 13rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-two-row'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(5rem, auto));
  grid-auto-columns: clamp(13rem, 27vw, 19rem);
  gap: 0.7rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-block: 0.35rem 0.75rem;
}
html[data-fastpanel-ui-layout='rail-two-row'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  min-width: 0;
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-hero-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-block: 0.35rem 0.8rem;
}
html[data-fastpanel-ui-layout='rail-hero-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(12rem, 24vw, 17rem);
  min-width: clamp(12rem, 24vw, 17rem);
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-hero-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  flex-basis: clamp(20rem, 39vw, 29rem);
}
html[data-fastpanel-ui-layout='grid-scoreboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.7rem;
}
html[data-fastpanel-ui-layout='grid-scoreboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  min-width: 0;
}
html[data-fastpanel-ui-layout='grid-scoreboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='stack-editorial'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.8rem;
}
html[data-fastpanel-ui-layout='stack-editorial'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  min-width: 0;
  width: 100%;
}
html[data-fastpanel-ui-layout='stack-editorial'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  border-block-start: 4px solid var(--native-ui-border, #64748b);
}
.native-ui-system-choice--signal-room, .native-ui-system-choice--signal-board {
  --system-1: #111827;
  --system-2: #a16207;
  --system-3: #facc15;
  --system-4: #fef3c7;
  --system-surface: #fffef5;
}
.native-ui-system-choice--arctic-workspace, .native-ui-system-choice--glass-analytics {
  --system-1: #075985;
  --system-2: #0284c7;
  --system-3: #7dd3fc;
  --system-4: #e0f2fe;
  --system-surface: #f0f9ff;
}
.native-ui-system-choice--prism-gallery, .native-ui-system-choice--color-field {
  --system-1: #6d28d9;
  --system-2: #0891b2;
  --system-3: #f97316;
  --system-4: #d946ef;
  --system-surface: #ecfeff;
}
.native-ui-system-choice--noir-ledger, .native-ui-system-choice--mono-observatory {
  --system-1: #0f172a;
  --system-2: #475569;
  --system-3: #94a3b8;
  --system-4: #e2e8f0;
  --system-surface: #f8fafc;
}
@media (max-width: 48rem) {
  html[data-fastpanel-ui-card='full-mosaic'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='full-mosaic'] .native-ui-preview-card__tiles--full-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-card='full-mosaic'] :is(.native-detail-card, .native-vertical-card-stack) .fi-section-content > :first-child, html[data-fastpanel-ui-card='full-mosaic'] .native-ui-preview-card__tiles--full-mosaic > :first-child {
    grid-column: 1 / -1;
  }
  html[data-fastpanel-ui-list='horizontal-three-lanes'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
    grid-template-rows: repeat(2, minmax(3rem, auto));
    grid-auto-columns: clamp(10rem, 66vw, 15rem);
  }
  html[data-fastpanel-ui-layout='grid-scoreboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-scoreboard'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='rail-hero-flow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    flex-basis: min(82vw, 25rem);
  }
}
html[data-fastpanel-ui-palette='acid-lime'] {
  --native-ui-surface: linear-gradient(140deg, #f7fee7, #ecfccb 55%, #fef9c3);
  --native-ui-border: #65a30d;
  --native-ui-shadow: 0 12px 28px rgb(77 124 15 / 18%);
  --native-ui-inset: #f0fdf4;
}
html.dark[data-fastpanel-ui-palette='acid-lime'] {
  --native-ui-surface: linear-gradient(140deg, #1a2e05, #26380b 55%, #3f2e06);
  --native-ui-border: #a3e635;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --native-ui-inset: #1c2b0c;
}
html[data-fastpanel-ui-palette='rose-gold'] {
  --native-ui-surface: linear-gradient(140deg, #fff7ed, #ffe4e6 56%, #fce7f3);
  --native-ui-border: #c08475;
  --native-ui-shadow: 0 12px 28px rgb(190 120 105 / 15%);
  --native-ui-inset: #fffaf5;
}
html.dark[data-fastpanel-ui-palette='rose-gold'] {
  --native-ui-surface: linear-gradient(140deg, #33211d, #42212c 56%, #351d37);
  --native-ui-border: #e6a895;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --native-ui-inset: #2d211f;
}
html[data-fastpanel-ui-palette='glacier'] {
  --native-ui-surface: linear-gradient(140deg, #f0f9ff, #e0f2fe 52%, #ecfeff);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 10px 26px rgb(14 116 144 / 11%);
  --native-ui-inset: #f8fdff;
}
html.dark[data-fastpanel-ui-palette='glacier'] {
  --native-ui-surface: linear-gradient(140deg, #132d3d, #15334b 52%, #12383d);
  --native-ui-border: #7dd3fc;
  --native-ui-shadow: 0 10px 26px rgb(0 0 0 / 25%);
  --native-ui-inset: #102a37;
}
html[data-fastpanel-ui-palette='ember'] {
  --native-ui-surface: linear-gradient(140deg, #fff7ed, #ffedd5 45%, #ffe4e6);
  --native-ui-border: #ea580c;
  --native-ui-shadow: 0 12px 28px rgb(234 88 12 / 17%);
  --native-ui-inset: #fffaf3;
}
html.dark[data-fastpanel-ui-palette='ember'] {
  --native-ui-surface: linear-gradient(140deg, #3b1e12, #44230f 45%, #3c1a24);
  --native-ui-border: #fb923c;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 27%);
  --native-ui-inset: #321d17;
}
html[data-fastpanel-ui-palette='sage'] {
  --native-ui-surface: linear-gradient(140deg, #f7fee7, #ecfdf5 58%, #f0fdf4);
  --native-ui-border: #65a30d;
  --native-ui-shadow: 0 9px 24px rgb(77 124 15 / 10%);
  --native-ui-inset: #fbfff9;
}
html.dark[data-fastpanel-ui-palette='sage'] {
  --native-ui-surface: linear-gradient(140deg, #1c2b20, #17352c 58%, #193522);
  --native-ui-border: #86a97b;
  --native-ui-shadow: 0 9px 24px rgb(0 0 0 / 24%);
  --native-ui-inset: #1b2c24;
}
html[data-fastpanel-ui-palette='skyline'] {
  --native-ui-surface: linear-gradient(140deg, #eff6ff, #dbeafe 52%, #e0f2fe);
  --native-ui-border: #3b82f6;
  --native-ui-shadow: 0 11px 27px rgb(37 99 235 / 12%);
  --native-ui-inset: #f7fbff;
}
html.dark[data-fastpanel-ui-palette='skyline'] {
  --native-ui-surface: linear-gradient(140deg, #172b49, #1d3154 52%, #14364b);
  --native-ui-border: #60a5fa;
  --native-ui-shadow: 0 11px 27px rgb(0 0 0 / 25%);
  --native-ui-inset: #192c44;
}
html[data-fastpanel-ui-palette='citadel'] {
  --native-ui-surface: linear-gradient(140deg, #eff6ff, #e0e7ff 55%, #fef3c7);
  --native-ui-border: #6366f1;
  --native-ui-shadow: 0 12px 28px rgb(30 41 59 / 14%);
  --native-ui-inset: #f8faff;
}
html.dark[data-fastpanel-ui-palette='citadel'] {
  --native-ui-surface: linear-gradient(140deg, #17243d, #24264b 55%, #3c3018);
  --native-ui-border: #a5b4fc;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 27%);
  --native-ui-inset: #1d2940;
}
html[data-fastpanel-ui-palette='cotton-candy'] {
  --native-ui-surface: linear-gradient(135deg, #fdf2f8, #f5f3ff 48%, #ecfeff);
  --native-ui-border: #d8a4d8;
  --native-ui-shadow: 0 10px 26px rgb(192 132 252 / 12%);
  --native-ui-inset: #fffafd;
}
html.dark[data-fastpanel-ui-palette='cotton-candy'] {
  --native-ui-surface: linear-gradient(135deg, #382137, #292345 48%, #14343b);
  --native-ui-border: #c084c7;
  --native-ui-shadow: 0 10px 26px rgb(0 0 0 / 25%);
  --native-ui-inset: #2c2133;
}
html[data-fastpanel-ui-palette='slate-ice'] {
  --native-ui-surface: linear-gradient(140deg, #f8fafc, #e2e8f0 54%, #eff6ff);
  --native-ui-border: #94a3b8;
  --native-ui-shadow: 0 8px 24px rgb(51 65 85 / 10%);
  --native-ui-inset: #fff;
}
html.dark[data-fastpanel-ui-palette='slate-ice'] {
  --native-ui-surface: linear-gradient(140deg, #273546, #1e293b 54%, #1e3150);
  --native-ui-border: #94a3b8;
  --native-ui-shadow: 0 8px 24px rgb(0 0 0 / 25%);
  --native-ui-inset: #1b2736;
}
html[data-fastpanel-ui-palette='heatwave'] {
  --native-ui-surface: linear-gradient(135deg, #fff7ed, #fef3c7 45%, #ffe4e6);
  --native-ui-border: #f97316;
  --native-ui-shadow: 0 12px 30px rgb(249 115 22 / 18%);
  --native-ui-inset: #fffaf4;
}
html.dark[data-fastpanel-ui-palette='heatwave'] {
  --native-ui-surface: linear-gradient(135deg, #3a2016, #3c2c12 45%, #3d1f2a);
  --native-ui-border: #fb923c;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 27%);
  --native-ui-inset: #302219;
}
html[data-fastpanel-ui-palette='forest-night'] {
  --native-ui-surface: linear-gradient(140deg, #ecfdf5, #dcfce7 50%, #e7f5e9);
  --native-ui-border: #15803d;
  --native-ui-shadow: 0 10px 26px rgb(20 83 45 / 13%);
  --native-ui-inset: #f7fff9;
}
html.dark[data-fastpanel-ui-palette='forest-night'] {
  --native-ui-surface: linear-gradient(140deg, #102d23, #123827 50%, #162f26);
  --native-ui-border: #4ade80;
  --native-ui-shadow: 0 10px 26px rgb(0 0 0 / 28%);
  --native-ui-inset: #142a22;
}
html[data-fastpanel-ui-palette='lavender-mist'] {
  --native-ui-surface: linear-gradient(140deg, #faf5ff, #ede9fe 54%, #fdf2f8);
  --native-ui-border: #a78bfa;
  --native-ui-shadow: 0 11px 26px rgb(124 58 237 / 12%);
  --native-ui-inset: #fdfaff;
}
html.dark[data-fastpanel-ui-palette='lavender-mist'] {
  --native-ui-surface: linear-gradient(140deg, #302443, #2c254b 54%, #3b223d);
  --native-ui-border: #c4b5fd;
  --native-ui-shadow: 0 11px 26px rgb(0 0 0 / 26%);
  --native-ui-inset: #29213c;
}
html[data-fastpanel-ui-palette='cobalt-pop'] {
  --native-ui-surface: linear-gradient(140deg, #eff6ff, #dbeafe 48%, #e0e7ff);
  --native-ui-border: #2563eb;
  --native-ui-shadow: 0 12px 30px rgb(37 99 235 / 18%);
  --native-ui-inset: #f8fbff;
}
html.dark[data-fastpanel-ui-palette='cobalt-pop'] {
  --native-ui-surface: linear-gradient(140deg, #152b50, #1b3563 48%, #272c5d);
  --native-ui-border: #60a5fa;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --native-ui-inset: #172a48;
}
html[data-fastpanel-ui-palette='marble'] {
  --native-ui-surface: linear-gradient(145deg, #fff, #f8fafc 54%, #f1f5f9);
  --native-ui-border: #cbd5e1;
  --native-ui-shadow: 0 6px 20px rgb(15 23 42 / 7%);
  --native-ui-inset: #fff;
}
html.dark[data-fastpanel-ui-palette='marble'] {
  --native-ui-surface: linear-gradient(145deg, #334155, #1e293b 54%, #172033);
  --native-ui-border: #64748b;
  --native-ui-shadow: 0 8px 22px rgb(0 0 0 / 23%);
  --native-ui-inset: #263345;
}
html[data-fastpanel-ui-palette='lime-ink'] {
  --native-ui-surface: linear-gradient(140deg, #f7fee7, #ecfccb 55%, #e2e8f0);
  --native-ui-border: #65a30d;
  --native-ui-shadow: 0 12px 30px rgb(15 23 42 / 15%);
  --native-ui-inset: #f8fafc;
}
html.dark[data-fastpanel-ui-palette='lime-ink'] {
  --native-ui-surface: linear-gradient(140deg, #111827, #1a2c13 55%, #1e293b);
  --native-ui-border: #a3e635;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 30%);
  --native-ui-inset: #17211a;
}
html[data-fastpanel-ui-palette='peach'] {
  --native-ui-surface: linear-gradient(140deg, #fff7ed, #ffedd5 55%, #fff1f2);
  --native-ui-border: #fb923c;
  --native-ui-shadow: 0 9px 24px rgb(234 88 12 / 11%);
  --native-ui-inset: #fffaf6;
}
html.dark[data-fastpanel-ui-palette='peach'] {
  --native-ui-surface: linear-gradient(140deg, #3a251d, #3b2a1d 55%, #3a222a);
  --native-ui-border: #fdba74;
  --native-ui-shadow: 0 9px 24px rgb(0 0 0 / 25%);
  --native-ui-inset: #30231e;
}
html[data-fastpanel-ui-widget='signal-tiles'] .fi-wi-stats-overview-stat:nth-child(3n + 1), html[data-fastpanel-ui-widget='signal-tiles'] .native-ui-preview-widget:nth-child(3n + 1) {
  border-block-start: 5px solid #f43f5e;
}
html[data-fastpanel-ui-widget='signal-tiles'] .fi-wi-stats-overview-stat:nth-child(3n + 2), html[data-fastpanel-ui-widget='signal-tiles'] .native-ui-preview-widget:nth-child(3n + 2) {
  border-block-start: 5px solid #f59e0b;
}
html[data-fastpanel-ui-widget='signal-tiles'] .fi-wi-stats-overview-stat:nth-child(3n), html[data-fastpanel-ui-widget='signal-tiles'] .native-ui-preview-widget:nth-child(3n) {
  border-block-start: 5px solid #22c55e;
}
html[data-fastpanel-ui-widget='neon-lime'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(145deg, #17210f, #24351a);
  border: 1px solid #84cc16;
  box-shadow: 0 0 0 2px rgb(132 204 22 / 13%), 0 12px 28px rgb(20 83 45 / 18%);
  color: #f7fee7;
}
html[data-fastpanel-ui-widget='neon-lime'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) :is(strong, .fi-wi-stats-overview-stat-value) {
  color: #bef264;
}
html[data-fastpanel-ui-widget='stat-dial'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-radius: 1.4rem 1.4rem 2.7rem 1.4rem;
  border-inline-start: 4px solid var(--native-ui-border, #0ea5e9);
}
html[data-fastpanel-ui-widget='stat-dial'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) :is(strong, .fi-wi-stats-overview-stat-value) {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-variant-numeric: tabular-nums;
}
html[data-fastpanel-ui-widget='color-ribbon'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-start: 5px solid transparent;
  border-image: linear-gradient(90deg, #06b6d4, #22c55e, #f59e0b, #d946ef) 1;
}
html[data-fastpanel-ui-widget='outline-metrics'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border: 2px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 2px solid color-mix(in srgb, var(--native-ui-border, #64748b) 68%, transparent);
  }
  box-shadow: inset 0 0 0 4px var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--native-ui-border, #64748b) 8%, transparent);
  }
}
html[data-fastpanel-ui-widget='large-number'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) :is(strong, .fi-wi-stats-overview-stat-value) {
  display: block;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
html[data-fastpanel-ui-widget='mono-typography'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-radius: 0.45rem;
  box-shadow: none;
}
html[data-fastpanel-ui-widget='mono-typography'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) :is(strong, .fi-wi-stats-overview-stat-value) {
  font-family: ui-monospace, 'Courier New', monospace;
  letter-spacing: 0.025em;
}
html[data-fastpanel-ui-widget='split-band'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(90deg, var(--native-ui-border, #38bdf8) 0 28%, var(--native-ui-surface, #fff) 28%);
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(90deg, color-mix(in srgb, var(--native-ui-border, #38bdf8) 18%, transparent) 0 28%, var(--native-ui-surface, #fff) 28%);
  }
}
html[data-fastpanel-ui-widget='progress-lane'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-block-end: 4px solid var(--native-ui-border, #38bdf8);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 4px solid color-mix(in srgb, var(--native-ui-border, #38bdf8) 55%, transparent);
  }
  border-radius: 0.75rem 0.75rem 0.35rem 0.35rem;
}
html[data-fastpanel-ui-widget='thermal-map'] .fi-wi-stats-overview-stat:nth-child(4n + 1), html[data-fastpanel-ui-widget='thermal-map'] .native-ui-preview-widget:nth-child(4n + 1) {
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  border-color: #fb7185;
}
html[data-fastpanel-ui-widget='thermal-map'] .fi-wi-stats-overview-stat:nth-child(4n + 2), html[data-fastpanel-ui-widget='thermal-map'] .native-ui-preview-widget:nth-child(4n + 2) {
  background: linear-gradient(145deg, #fff7ed, #ffedd5);
  border-color: #fb923c;
}
html[data-fastpanel-ui-widget='thermal-map'] .fi-wi-stats-overview-stat:nth-child(4n + 3), html[data-fastpanel-ui-widget='thermal-map'] .native-ui-preview-widget:nth-child(4n + 3) {
  background: linear-gradient(145deg, #fefce8, #fef9c3);
  border-color: #eab308;
}
html[data-fastpanel-ui-widget='thermal-map'] .fi-wi-stats-overview-stat:nth-child(4n), html[data-fastpanel-ui-widget='thermal-map'] .native-ui-preview-widget:nth-child(4n) {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  border-color: #22c55e;
}
html[data-fastpanel-ui-widget='double-stack'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  border-inline-start: 3px solid var(--native-ui-border, #64748b);
}
html[data-fastpanel-ui-widget='bright-panel'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: linear-gradient(150deg, #fff, #f8fafc 64%, #eff6ff);
  border-color: #cbd5e1;
  box-shadow: 0 8px 20px rgb(15 23 42 / 6%);
}
html[data-fastpanel-ui-widget='orbit-ring'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-radius: 1.4rem;
  outline: 1px solid var(--native-ui-border, #8b5cf6);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--native-ui-border, #8b5cf6) 35%, transparent);
  }
  outline-offset: 3px;
}
html[data-fastpanel-ui-widget='badge-grid'] .fi-wi-stats-overview-stat-label {
  display: inline-flex;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--native-ui-border, #d946ef);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #d946ef) 16%, transparent);
  }
}
html[data-fastpanel-ui-widget='ink-board'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: #f8fafc;
  border-color: #64748b;
  border-radius: 0.55rem;
  box-shadow: 0 2px 0 #64748b;
  color: #0f172a;
}
html.dark[data-fastpanel-ui-widget='ink-board'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  background: #1e293b;
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='status-pulse'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  border-inline-start: 4px solid #10b981;
  position: relative;
}
html[data-fastpanel-ui-widget='status-pulse'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget)::before {
  content: '';
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgb(16 185 129 / 15%);
}
html[data-fastpanel-ui-card='spread-grid'] :is(.native-detail-card .fi-in-entry-wrp, .native-detail-card .fi-in-repeatable-item, .native-ui-preview-card__tiles > div) {
  border: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 40%, transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset, #f8fafc);
  padding: 0.85rem;
  box-shadow: 0 4px 12px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-card='column-brief'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__column-items) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}
html[data-fastpanel-ui-card='column-brief'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__column-items > div) {
  border-inline-start: 4px solid var(--native-ui-border, #0ea5e9);
  border-radius: 0.6rem 1rem 1rem 0.6rem;
}
html[data-fastpanel-ui-card='column-stacked'] :is(.native-detail-card .fi-in-entry-wrp, .native-detail-card .fi-in-repeatable-item) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  margin-block: 0.45rem;
  border-block-end: 1px solid var(--native-ui-border, #cbd5e1);
}
html[data-fastpanel-ui-card='asymmetric-bento'] .native-ui-preview-card__tiles > div:nth-child(3n + 1), html[data-fastpanel-ui-card='asymmetric-bento'] .native-detail-card .fi-in-entry-wrp:nth-child(3n + 1) {
  grid-column: span 2;
}
html[data-fastpanel-ui-card='dual-hero'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.8rem;
}
html[data-fastpanel-ui-card='dual-hero'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) > :first-child {
  grid-row: span 2;
  border-block-start: 4px solid var(--native-ui-border, #0ea5e9);
}
html[data-fastpanel-ui-card='panel-scatter'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div) {
  border: 1px solid var(--native-ui-border, #94a3b8);
  border-radius: 0.75rem 1.2rem 0.7rem 1.2rem;
  box-shadow: 0 5px 15px rgb(15 23 42 / 7%);
}
html[data-fastpanel-ui-card='panel-scatter'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div):nth-child(even) {
  transform: translateY(0.25rem);
}
html[data-fastpanel-ui-card='metric-wall'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
html[data-fastpanel-ui-card='metric-wall'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div) {
  border-radius: 0.55rem;
  border-block-start: 4px solid var(--native-ui-border, #06b6d4);
}
html[data-fastpanel-ui-card='sidecar'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(9rem, 0.8fr);
  gap: 0.85rem;
}
html[data-fastpanel-ui-card='sidecar'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) > :last-child {
  background: var(--native-ui-inset, #f8fafc);
  border-radius: 1rem;
}
html[data-fastpanel-ui-card='timeline-stack'] :is(.native-detail-card .fi-in-entry-wrp, .native-detail-card .fi-in-repeatable-item) {
  border-inline-start: 3px solid var(--native-ui-border, #38bdf8);
  border-radius: 0 0.85rem 0.85rem 0;
  margin-inline-start: 0.4rem;
  padding-inline-start: 0.8rem;
}
html[data-fastpanel-ui-card='story-panels'] .fi-section-header {
  border-block-end: 2px solid var(--native-ui-border, #94a3b8);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 2px solid color-mix(in srgb, var(--native-ui-border, #94a3b8) 55%, transparent);
  }
}
html[data-fastpanel-ui-card='story-panels'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div) {
  border-radius: 0.4rem 1.1rem 1.1rem 1.1rem;
  background: var(--native-ui-inset, #f8fafc);
}
html[data-fastpanel-ui-card='frame-nested'] .fi-section {
  outline: 1px solid var(--native-ui-border, #64748b);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb, var(--native-ui-border, #64748b) 35%, transparent);
  }
  outline-offset: 3px;
}
html[data-fastpanel-ui-card='frame-nested'] :is(.native-detail-card .fi-in-entry-wrp, .native-detail-card .fi-in-repeatable-item) {
  border: 1px solid var(--native-ui-border, #94a3b8);
  border-radius: 0.75rem;
  background: var(--native-ui-inset, #f8fafc);
}
html[data-fastpanel-ui-card='top-hero'] .fi-section-header {
  background: var(--native-ui-border, #0ea5e9);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--native-ui-border, #0ea5e9) 12%, transparent);
  }
  border-radius: 0.9rem 0.9rem 0 0;
}
html[data-fastpanel-ui-card='top-hero'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div):first-child {
  grid-column: 1 / -1;
  font-size: 1.08rem;
}
html[data-fastpanel-ui-card='split-band'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
html[data-fastpanel-ui-card='split-band'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div) {
  border-inline-start: 4px solid var(--native-ui-border, #38bdf8);
}
html[data-fastpanel-ui-card='miniature-grid'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}
html[data-fastpanel-ui-card='miniature-grid'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div) {
  padding: 0.55rem;
  border-radius: 0.65rem;
  background: var(--native-ui-inset, #f8fafc);
}
html[data-fastpanel-ui-card='dashboard-columns'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}
html[data-fastpanel-ui-card='dashboard-columns'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div) {
  border-block-start: 3px solid var(--native-ui-border, #0ea5e9);
}
html[data-fastpanel-ui-card='ledger-cards'] :is(.native-detail-card .fi-in-entry-wrp, .native-detail-card .fi-in-repeatable-item) {
  border-block-end: 1px solid var(--native-ui-border, #cbd5e1);
  border-radius: 0;
  box-shadow: none;
  padding-block: 0.75rem;
}
html[data-fastpanel-ui-card='column-profile-wide'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__column-items) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
html[data-fastpanel-ui-card='column-profile-wide'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__column-items > div) {
  width: 100%;
  border-radius: 0.9rem;
  border-inline-start: 4px solid var(--native-ui-border, #64748b);
}
html[data-fastpanel-ui-card='stat-cascade'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div):nth-child(3n + 1) {
  border-block-start: 4px solid #06b6d4;
}
html[data-fastpanel-ui-card='stat-cascade'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div):nth-child(3n + 2) {
  border-block-start: 4px solid #22c55e;
  transform: translateY(0.3rem);
}
html[data-fastpanel-ui-card='stat-cascade'] :is(.native-detail-card .fi-in-entry-wrp, .native-ui-preview-card__tiles > div):nth-child(3n) {
  border-block-start: 4px solid #f97316;
}
html[data-fastpanel-ui-list='horizontal-flat-tiles'] {
  --native-ui-list-width: 14rem;
  --native-ui-list-gap: 0.5rem;
  --native-ui-list-radius: 0.55rem;
  --native-ui-list-accent: #0ea5e9;
}
html[data-fastpanel-ui-list='horizontal-compact-strip'] {
  --native-ui-list-width: 10.5rem;
  --native-ui-list-gap: 0.35rem;
  --native-ui-list-radius: 0.45rem;
  --native-ui-list-accent: #64748b;
}
html[data-fastpanel-ui-list='horizontal-polaroid'] {
  --native-ui-list-width: 16rem;
  --native-ui-list-gap: 0.85rem;
  --native-ui-list-radius: 0.35rem;
  --native-ui-list-accent: #a855f7;
}
html[data-fastpanel-ui-list='horizontal-metric-blocks'] {
  --native-ui-list-width: 15rem;
  --native-ui-list-gap: 0.65rem;
  --native-ui-list-radius: 0.9rem;
  --native-ui-list-accent: #06b6d4;
}
html[data-fastpanel-ui-list='horizontal-storyboard'] {
  --native-ui-list-width: 18rem;
  --native-ui-list-gap: 0.9rem;
  --native-ui-list-radius: 0.5rem 1rem 1rem;
  --native-ui-list-accent: #f97316;
}
html[data-fastpanel-ui-list='horizontal-soft-stack'] {
  --native-ui-list-width: 15rem;
  --native-ui-list-gap: 0.55rem;
  --native-ui-list-radius: 1.2rem;
  --native-ui-list-accent: #c084fc;
}
html[data-fastpanel-ui-list='horizontal-raised'] {
  --native-ui-list-width: 16rem;
  --native-ui-list-gap: 0.8rem;
  --native-ui-list-radius: 1.1rem;
  --native-ui-list-accent: #2563eb;
}
html[data-fastpanel-ui-list='horizontal-steps-wide'] {
  --native-ui-list-width: 19rem;
  --native-ui-list-gap: 0.7rem;
  --native-ui-list-radius: 0.45rem 0.45rem 1rem 1rem;
  --native-ui-list-accent: #0d9488;
}
html[data-fastpanel-ui-list='horizontal-triple-row'] {
  --native-ui-list-width: 13rem;
  --native-ui-list-gap: 0.5rem;
  --native-ui-list-radius: 0.7rem;
  --native-ui-list-accent: #0284c7;
}
html[data-fastpanel-ui-list='horizontal-quadrant'] {
  --native-ui-list-width: 14rem;
  --native-ui-list-gap: 0.6rem;
  --native-ui-list-radius: 0.65rem;
  --native-ui-list-accent: #7c3aed;
}
html[data-fastpanel-ui-list='horizontal-balanced'] {
  --native-ui-list-width: 16rem;
  --native-ui-list-gap: 0.7rem;
  --native-ui-list-radius: 0.8rem;
  --native-ui-list-accent: #475569;
}
html[data-fastpanel-ui-list='horizontal-slice'] {
  --native-ui-list-width: 12rem;
  --native-ui-list-gap: 0.45rem;
  --native-ui-list-radius: 0.25rem;
  --native-ui-list-accent: #f59e0b;
}
html[data-fastpanel-ui-list='horizontal-badge-row'] {
  --native-ui-list-width: 11rem;
  --native-ui-list-gap: 0.45rem;
  --native-ui-list-radius: 999px;
  --native-ui-list-accent: #d946ef;
}
html[data-fastpanel-ui-list='horizontal-snap-wide'] {
  --native-ui-list-width: 22rem;
  --native-ui-list-gap: 0.85rem;
  --native-ui-list-radius: 1.2rem;
  --native-ui-list-accent: #2563eb;
}
html[data-fastpanel-ui-list='horizontal-poster-strip'] {
  --native-ui-list-width: 20rem;
  --native-ui-list-gap: 0.9rem;
  --native-ui-list-radius: 1.25rem;
  --native-ui-list-accent: #f97316;
}
html[data-fastpanel-ui-list='horizontal-side-by-side'] {
  --native-ui-list-width: 18rem;
  --native-ui-list-gap: 0.65rem;
  --native-ui-list-radius: 0.85rem;
  --native-ui-list-accent: #14b8a6;
}
html[data-fastpanel-ui-list='horizontal-rail-first'] {
  --native-ui-list-width: 14rem;
  --native-ui-list-gap: 0.6rem;
  --native-ui-list-radius: 1rem;
  --native-ui-list-accent: #8b5cf6;
}
html[data-fastpanel-ui-list='horizontal-rail-lane'] {
  --native-ui-list-width: 13rem;
  --native-ui-list-gap: 0.5rem;
  --native-ui-list-radius: 0.75rem;
  --native-ui-list-accent: #0891b2;
}
html[data-fastpanel-ui-list='horizontal-color-tiles'] {
  --native-ui-list-width: 13rem;
  --native-ui-list-gap: 0.55rem;
  --native-ui-list-radius: 0.65rem;
  --native-ui-list-accent: #22c55e;
}
html[data-fastpanel-ui-list='horizontal-pills-wide'] {
  --native-ui-list-width: 16rem;
  --native-ui-list-gap: 0.55rem;
  --native-ui-list-radius: 999px;
  --native-ui-list-accent: #fb7185;
}
html[data-fastpanel-ui-list='horizontal-ledger-cells'] {
  --native-ui-list-width: 15rem;
  --native-ui-list-gap: 0.25rem;
  --native-ui-list-radius: 0.25rem;
  --native-ui-list-accent: #64748b;
}
html[data-fastpanel-ui-list='horizontal-flagged'] {
  --native-ui-list-width: 15rem;
  --native-ui-list-gap: 0.7rem;
  --native-ui-list-radius: 0.85rem;
  --native-ui-list-accent: #e11d48;
}
html[data-fastpanel-ui-list='horizontal-quiet'] {
  --native-ui-list-width: 15rem;
  --native-ui-list-gap: 0.4rem;
  --native-ui-list-radius: 0.55rem;
  --native-ui-list-accent: #94a3b8;
}
html[data-fastpanel-ui-list='horizontal-full-bleed'] {
  --native-ui-list-width: 19rem;
  --native-ui-list-gap: 0.75rem;
  --native-ui-list-radius: 0.2rem;
  --native-ui-list-accent: #0f766e;
}
:is(html[data-fastpanel-ui-list='horizontal-flat-tiles'], html[data-fastpanel-ui-list='horizontal-compact-strip'], html[data-fastpanel-ui-list='horizontal-polaroid'], html[data-fastpanel-ui-list='horizontal-metric-blocks'], html[data-fastpanel-ui-list='horizontal-storyboard'], html[data-fastpanel-ui-list='horizontal-soft-stack'], html[data-fastpanel-ui-list='horizontal-raised'], html[data-fastpanel-ui-list='horizontal-steps-wide'], html[data-fastpanel-ui-list='horizontal-triple-row'], html[data-fastpanel-ui-list='horizontal-quadrant'], html[data-fastpanel-ui-list='horizontal-balanced'], html[data-fastpanel-ui-list='horizontal-slice'], html[data-fastpanel-ui-list='horizontal-badge-row'], html[data-fastpanel-ui-list='horizontal-snap-wide'], html[data-fastpanel-ui-list='horizontal-poster-strip'], html[data-fastpanel-ui-list='horizontal-side-by-side'], html[data-fastpanel-ui-list='horizontal-rail-first'], html[data-fastpanel-ui-list='horizontal-rail-lane'], html[data-fastpanel-ui-list='horizontal-color-tiles'], html[data-fastpanel-ui-list='horizontal-pills-wide'], html[data-fastpanel-ui-list='horizontal-ledger-cells'], html[data-fastpanel-ui-list='horizontal-flagged'], html[data-fastpanel-ui-list='horizontal-quiet'], html[data-fastpanel-ui-list='horizontal-full-bleed']) :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--native-ui-list-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.4rem 0.2rem 0.8rem;
}
:is(html[data-fastpanel-ui-list='horizontal-flat-tiles'], html[data-fastpanel-ui-list='horizontal-compact-strip'], html[data-fastpanel-ui-list='horizontal-polaroid'], html[data-fastpanel-ui-list='horizontal-metric-blocks'], html[data-fastpanel-ui-list='horizontal-storyboard'], html[data-fastpanel-ui-list='horizontal-soft-stack'], html[data-fastpanel-ui-list='horizontal-raised'], html[data-fastpanel-ui-list='horizontal-steps-wide'], html[data-fastpanel-ui-list='horizontal-triple-row'], html[data-fastpanel-ui-list='horizontal-quadrant'], html[data-fastpanel-ui-list='horizontal-balanced'], html[data-fastpanel-ui-list='horizontal-slice'], html[data-fastpanel-ui-list='horizontal-badge-row'], html[data-fastpanel-ui-list='horizontal-snap-wide'], html[data-fastpanel-ui-list='horizontal-poster-strip'], html[data-fastpanel-ui-list='horizontal-side-by-side'], html[data-fastpanel-ui-list='horizontal-rail-first'], html[data-fastpanel-ui-list='horizontal-rail-lane'], html[data-fastpanel-ui-list='horizontal-color-tiles'], html[data-fastpanel-ui-list='horizontal-pills-wide'], html[data-fastpanel-ui-list='horizontal-ledger-cells'], html[data-fastpanel-ui-list='horizontal-flagged'], html[data-fastpanel-ui-list='horizontal-quiet'], html[data-fastpanel-ui-list='horizontal-full-bleed']) :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  flex: 0 0 var(--native-ui-list-width);
  min-width: 0;
  scroll-snap-align: start;
}
:is(html[data-fastpanel-ui-list='horizontal-flat-tiles'], html[data-fastpanel-ui-list='horizontal-compact-strip'], html[data-fastpanel-ui-list='horizontal-polaroid'], html[data-fastpanel-ui-list='horizontal-metric-blocks'], html[data-fastpanel-ui-list='horizontal-storyboard'], html[data-fastpanel-ui-list='horizontal-soft-stack'], html[data-fastpanel-ui-list='horizontal-raised'], html[data-fastpanel-ui-list='horizontal-steps-wide'], html[data-fastpanel-ui-list='horizontal-triple-row'], html[data-fastpanel-ui-list='horizontal-quadrant'], html[data-fastpanel-ui-list='horizontal-balanced'], html[data-fastpanel-ui-list='horizontal-slice'], html[data-fastpanel-ui-list='horizontal-badge-row'], html[data-fastpanel-ui-list='horizontal-snap-wide'], html[data-fastpanel-ui-list='horizontal-poster-strip'], html[data-fastpanel-ui-list='horizontal-side-by-side'], html[data-fastpanel-ui-list='horizontal-rail-first'], html[data-fastpanel-ui-list='horizontal-rail-lane'], html[data-fastpanel-ui-list='horizontal-color-tiles'], html[data-fastpanel-ui-list='horizontal-pills-wide'], html[data-fastpanel-ui-list='horizontal-ledger-cells'], html[data-fastpanel-ui-list='horizontal-flagged'], html[data-fastpanel-ui-list='horizontal-quiet'], html[data-fastpanel-ui-list='horizontal-full-bleed']) :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-radius: var(--native-ui-list-radius);
  border-inline-start: 3px solid var(--native-ui-list-accent);
}
html[data-fastpanel-ui-list='horizontal-triple-row'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail), html[data-fastpanel-ui-list='horizontal-rail-lane'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(3rem, auto));
  grid-auto-columns: var(--native-ui-list-width);
}
html[data-fastpanel-ui-list='horizontal-quadrant'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(3rem, auto));
  grid-auto-columns: var(--native-ui-list-width);
}
html[data-fastpanel-ui-list='horizontal-polaroid'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  padding: 0.8rem;
  background: #fff;
  box-shadow: 0 8px 20px rgb(15 23 42 / 12%);
}
html[data-fastpanel-ui-list='horizontal-raised'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  box-shadow: 0 9px 22px var(--native-ui-list-accent);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 9px 22px color-mix(in srgb, var(--native-ui-list-accent) 22%, transparent);
  }
}
html[data-fastpanel-ui-list='horizontal-soft-stack'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(even) {
  transform: translateY(0.28rem);
}
html[data-fastpanel-ui-list='horizontal-metric-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(3n + 2) {
  border-block-start: 4px solid #22c55e;
}
html[data-fastpanel-ui-list='horizontal-metric-blocks'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div):nth-child(3n) {
  border-block-start: 4px solid #f97316;
}
html[data-fastpanel-ui-list='horizontal-badge-row'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-radius: 999px;
}
html[data-fastpanel-ui-list='horizontal-pills-wide'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-radius: 999px;
  padding-inline: 1.2rem;
}
html[data-fastpanel-ui-list='horizontal-ledger-cells'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-block-end: 2px solid var(--native-ui-list-accent);
  box-shadow: none;
}
html[data-fastpanel-ui-list='horizontal-quiet'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section, .native-ui-preview-card__rail > div) {
  border-inline-start-width: 1px;
  box-shadow: none;
  background: transparent;
}
html[data-fastpanel-ui-list='horizontal-full-bleed'] :is(.native-card-rail > .fi-grid, .native-ui-preview-card__rail) {
  padding-inline: 0;
  scroll-padding-inline: 0.5rem;
}
html[data-fastpanel-ui-list='horizontal-full-bleed'] :is(.native-card-rail > .fi-grid > .fi-grid-col, .native-ui-preview-card__rail > div) {
  scroll-snap-align: start;
}
:is(html[data-fastpanel-ui-layout='grid-2x2'], html[data-fastpanel-ui-layout='grid-card-wall'], html[data-fastpanel-ui-layout='grid-3-featured'], html[data-fastpanel-ui-layout='grid-2x3'], html[data-fastpanel-ui-layout='grid-newsroom'], html[data-fastpanel-ui-layout='grid-profile-mosaic'], html[data-fastpanel-ui-layout='grid-wide-sidebar'], html[data-fastpanel-ui-layout='grid-bento-narrow'], html[data-fastpanel-ui-layout='grid-dashboard-hero'], html[data-fastpanel-ui-layout='grid-alternating'], html[data-fastpanel-ui-layout='grid-5-balanced']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  align-items: stretch;
  gap: 0.75rem;
}
html[data-fastpanel-ui-layout='grid-2x2'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-card-wall'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
html[data-fastpanel-ui-layout='grid-3-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-3-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='grid-2x3'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-newsroom'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-newsroom'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='grid-profile-mosaic'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-profile-mosaic'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='grid-wide-sidebar'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: minmax(0, 1.7fr) minmax(11rem, 0.8fr);
}
html[data-fastpanel-ui-layout='grid-wide-sidebar'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='grid-bento-narrow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
html[data-fastpanel-ui-layout='grid-bento-narrow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(5n + 1) {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='grid-dashboard-hero'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-dashboard-hero'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-column: span 3;
}
html[data-fastpanel-ui-layout='grid-alternating'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-fastpanel-ui-layout='grid-alternating'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(3n + 1) {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='grid-5-balanced'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
:is(html[data-fastpanel-ui-layout='stack-card-wall'], html[data-fastpanel-ui-layout='stack-left-rail'], html[data-fastpanel-ui-layout='stack-rich']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}
:is(html[data-fastpanel-ui-layout='stack-card-wall'], html[data-fastpanel-ui-layout='stack-rich']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  width: 100%;
  min-width: 0;
}
html[data-fastpanel-ui-layout='stack-card-wall'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  border-inline-start: 4px solid var(--native-ui-border, #64748b);
}
html[data-fastpanel-ui-layout='stack-left-rail'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  grid-template-columns: minmax(0, 1.8fr) minmax(10rem, 0.75fr);
}
html[data-fastpanel-ui-layout='stack-left-rail'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  grid-row: span 3;
}
html[data-fastpanel-ui-layout='stack-rich'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  box-shadow: 0 8px 20px rgb(15 23 42 / 7%);
  padding: 0.35rem;
}
:is(html[data-fastpanel-ui-layout='rail-two-row-wide'], html[data-fastpanel-ui-layout='rail-dual-deck']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(5rem, auto));
  grid-auto-columns: clamp(16rem, 33vw, 24rem);
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-block: 0.35rem 0.8rem;
}
html[data-fastpanel-ui-layout='rail-three-row'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(4.5rem, auto));
  grid-auto-columns: clamp(12rem, 25vw, 18rem);
  gap: 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-layout='rail-matrix'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(4rem, auto));
  grid-auto-columns: clamp(10rem, 22vw, 16rem);
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}
:is(html[data-fastpanel-ui-layout='rail-hero-asymmetric'], html[data-fastpanel-ui-layout='rail-dense']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding-block: 0.35rem 0.8rem;
}
html[data-fastpanel-ui-layout='rail-hero-asymmetric'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(11rem, 22vw, 16rem);
  min-width: 0;
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-hero-asymmetric'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
  flex-basis: clamp(20rem, 40vw, 29rem);
}
html[data-fastpanel-ui-layout='rail-dense'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(9rem, 18vw, 13rem);
  min-width: 0;
  scroll-snap-align: start;
}
.native-ui-preview-card--spread-grid .native-ui-preview-card__tiles--spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.native-ui-preview-card--spread-grid .native-ui-preview-card__tiles--spread > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.native-ui-preview-card--spread-grid .native-ui-preview-card__tiles--spread > div {
  min-width: 0;
  border: 1px solid var(--native-ui-border, #94a3b8);
  border-radius: 0.85rem;
  padding: 0.7rem;
  background: var(--native-ui-inset, #f8fafc);
}
.native-ui-preview-card--column-brief .native-ui-preview-card__column-items--brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
}
.native-ui-preview-card--column-brief .native-ui-preview-card__column-items--brief > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem;
  border-inline-start: 4px solid var(--native-ui-border, #0ea5e9);
  border-radius: 0.6rem 0.9rem 0.9rem 0.6rem;
  background: var(--native-ui-inset, #f8fafc);
}
.native-ui-preview-card--column-brief .native-ui-preview-card__column-items--brief > div > span:nth-child(2) {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.native-ui-preview-card--column-brief .native-ui-preview-card__column-items--brief > div > b {
  white-space: nowrap;
}
.native-ui-preview-card--signal-blocks .native-ui-preview-card__tiles--signal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.native-ui-preview-card--signal-blocks .native-ui-preview-card__tiles--signal > div {
  min-width: 0;
  border-radius: 0.8rem;
  border-block-start: 4px solid #f97316;
  padding: 0.75rem;
  background: linear-gradient(145deg, #fff7ed, #ffedd5);
}
.native-ui-preview-card--signal-blocks .native-ui-preview-card__tiles--signal > div:nth-child(2) {
  border-color: #16a34a;
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
}
.native-ui-preview-card--signal-blocks .native-ui-preview-card__tiles--signal > div:nth-child(3) {
  border-color: #7c3aed;
  background: linear-gradient(145deg, #faf5ff, #ede9fe);
}
.native-ui-preview-card--horizontal-quadrant .native-ui-preview-card__rail--quadrant {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(3.6rem, auto));
  grid-auto-columns: clamp(9rem, 22vw, 14rem);
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 0.35rem 0.2rem 0.65rem;
}
.native-ui-preview-card--horizontal-quadrant .native-ui-preview-card__rail--quadrant > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  border-inline-start: 3px solid var(--native-ui-border, #0891b2);
  border-radius: 0.65rem;
  padding: 0.65rem;
  background: var(--native-ui-inset, #f8fafc);
  scroll-snap-align: start;
}
@media (max-width: 48rem) {
  html[data-fastpanel-ui-card='dual-hero'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles), html[data-fastpanel-ui-card='sidecar'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-card='dual-hero'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) > :first-child {
    grid-row: auto;
  }
  html[data-fastpanel-ui-card='dashboard-columns'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles), html[data-fastpanel-ui-card='miniature-grid'] :is(.native-detail-card .fi-section-content, .native-ui-preview-card__tiles) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .native-ui-preview-card--spread-grid .native-ui-preview-card__tiles--spread, .native-ui-preview-card--signal-blocks .native-ui-preview-card__tiles--signal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .native-ui-preview-card--spread-grid .native-ui-preview-card__tiles--spread > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  :is(html[data-fastpanel-ui-layout='grid-newsroom'], html[data-fastpanel-ui-layout='grid-dashboard-hero'], html[data-fastpanel-ui-layout='grid-5-balanced']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(html[data-fastpanel-ui-layout='grid-newsroom'], html[data-fastpanel-ui-layout='grid-dashboard-hero'], html[data-fastpanel-ui-layout='grid-profile-mosaic']) :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='grid-3-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-3-featured'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='grid-2x3'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-wide-sidebar'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='stack-left-rail'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-fastpanel-ui-layout='grid-wide-sidebar'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child, html[data-fastpanel-ui-layout='stack-left-rail'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :first-child {
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='grid-alternating'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-bento-narrow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-fastpanel-ui-layout='grid-bento-narrow'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) > :nth-child(5n + 1) {
    grid-column: span 2;
  }
  html[data-fastpanel-ui-layout='rail-three-row'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid), html[data-fastpanel-ui-layout='rail-matrix'] :is(.native-ui-gallery__previews, .native-card-rail > .fi-grid) {
    grid-template-rows: repeat(2, minmax(3rem, auto));
    grid-auto-columns: clamp(10rem, 66vw, 15rem);
  }
}
html[data-fastpanel-ui-palette='voltage-blue'] {
  --native-ui-surface: linear-gradient(140deg,#e0f2fe 0%,#dbeafe 50%,#eef2ff 100%);
  --native-ui-border: #0284c7;
  --native-ui-shadow: 0 12px 28px rgb(2 132 199 / 17%);
  --native-ui-inset: #f8fdff;
  --native-ui-accent: #0c4a6e;
}
html[data-fastpanel-ui-palette='citrus-pop'] {
  --native-ui-surface: linear-gradient(140deg,#fef9c3 0%,#ffedd5 52%,#fff7ed 100%);
  --native-ui-border: #eab308;
  --native-ui-shadow: 0 12px 28px rgb(234 179 8 / 18%);
  --native-ui-inset: #fffef2;
  --native-ui-accent: #854d0e;
}
html[data-fastpanel-ui-palette='fuchsia-flare'] {
  --native-ui-surface: linear-gradient(140deg,#fdf2f8 0%,#fae8ff 48%,#ede9fe 100%);
  --native-ui-border: #d946ef;
  --native-ui-shadow: 0 12px 30px rgb(192 38 211 / 18%);
  --native-ui-inset: #fff8ff;
  --native-ui-accent: #86198f;
}
html[data-fastpanel-ui-palette='coral-signal'] {
  --native-ui-surface: linear-gradient(140deg,#fff1f2 0%,#ffe4e6 50%,#fff7ed 100%);
  --native-ui-border: #f43f5e;
  --native-ui-shadow: 0 11px 26px rgb(244 63 94 / 16%);
  --native-ui-inset: #fffafa;
  --native-ui-accent: #9f1239;
}
html[data-fastpanel-ui-palette='jungle-pop'] {
  --native-ui-surface: linear-gradient(140deg,#dcfce7 0%,#ccfbf1 55%,#ecfeff 100%);
  --native-ui-border: #059669;
  --native-ui-shadow: 0 11px 28px rgb(5 150 105 / 16%);
  --native-ui-inset: #f4fff9;
  --native-ui-accent: #065f46;
}
html[data-fastpanel-ui-palette='royal-copper'] {
  --native-ui-surface: linear-gradient(140deg,#eff6ff 0%,#e0e7ff 48%,#ffedd5 100%);
  --native-ui-border: #b45309;
  --native-ui-shadow: 0 11px 28px rgb(124 45 18 / 13%);
  --native-ui-inset: #fffdfa;
  --native-ui-accent: #1e3a8a;
}
html[data-fastpanel-ui-palette='mono-slate'] {
  --native-ui-surface: linear-gradient(145deg,#f8fafc 0%,#e2e8f0 100%);
  --native-ui-border: #64748b;
  --native-ui-shadow: 0 5px 16px rgb(15 23 42 / 8%);
  --native-ui-inset: #fff;
  --native-ui-accent: #334155;
}
html[data-fastpanel-ui-palette='mono-warm'] {
  --native-ui-surface: linear-gradient(145deg,#fffcf5 0%,#f5f0e6 100%);
  --native-ui-border: #a8a29e;
  --native-ui-shadow: 0 5px 16px rgb(68 64 60 / 8%);
  --native-ui-inset: #fffefa;
  --native-ui-accent: #57534e;
}
html[data-fastpanel-ui-palette='mono-ink'] {
  --native-ui-surface: linear-gradient(145deg,#fff 0%,#e2e8f0 100%);
  --native-ui-border: #334155;
  --native-ui-shadow: 0 4px 14px rgb(2 6 23 / 9%);
  --native-ui-inset: #fff;
  --native-ui-accent: #020617;
}
html[data-fastpanel-ui-palette='glow-lilac'] {
  --native-ui-surface: linear-gradient(140deg,#faf5ff 0%,#ede9fe 52%,#f5f3ff 100%);
  --native-ui-border: #8b5cf6;
  --native-ui-shadow: 0 10px 26px rgb(139 92 246 / 16%);
  --native-ui-inset: #fffaff;
  --native-ui-accent: #5b21b6;
}
html[data-fastpanel-ui-palette='tropical'] {
  --native-ui-surface: linear-gradient(130deg,#cffafe 0%,#d9f99d 45%,#ffedd5 100%);
  --native-ui-border: #0891b2;
  --native-ui-shadow: 0 12px 28px rgb(8 145 178 / 15%);
  --native-ui-inset: #f4fffe;
  --native-ui-accent: #155e75;
}
html[data-fastpanel-ui-palette='blue-red'] {
  --native-ui-surface: linear-gradient(135deg,#dbeafe 0%,#eff6ff 48%,#ffe4e6 100%);
  --native-ui-border: #dc2626;
  --native-ui-shadow: 0 12px 27px rgb(37 99 235 / 14%);
  --native-ui-inset: #fff;
  --native-ui-accent: #1d4ed8;
}
html[data-fastpanel-ui-palette='cobalt-sun'] {
  --native-ui-surface: linear-gradient(140deg,#dbeafe 0%,#eff6ff 55%,#fef3c7 100%);
  --native-ui-border: #2563eb;
  --native-ui-shadow: 0 11px 27px rgb(37 99 235 / 15%);
  --native-ui-inset: #fffefa;
  --native-ui-accent: #1e3a8a;
}
html[data-fastpanel-ui-palette='mint-charcoal'] {
  --native-ui-surface: linear-gradient(145deg,#ecfdf5 0%,#d1fae5 52%,#e2e8f0 100%);
  --native-ui-border: #059669;
  --native-ui-shadow: 0 10px 25px rgb(15 23 42 / 11%);
  --native-ui-inset: #f8fffb;
  --native-ui-accent: #064e3b;
}
html[data-fastpanel-ui-palette='peach-berry'] {
  --native-ui-surface: linear-gradient(140deg,#fff7ed 0%,#ffedd5 45%,#fce7f3 100%);
  --native-ui-border: #e11d48;
  --native-ui-shadow: 0 11px 27px rgb(225 29 72 / 14%);
  --native-ui-inset: #fffaf7;
  --native-ui-accent: #9d174d;
}
html[data-fastpanel-ui-palette='highlighter'] {
  --native-ui-surface: linear-gradient(135deg,#fef9c3 0%,#fef08a 50%,#f8fafc 100%);
  --native-ui-border: #a3e635;
  --native-ui-shadow: 0 10px 25px rgb(77 124 15 / 16%);
  --native-ui-inset: #fffef4;
  --native-ui-accent: #1f2937;
}
html.dark[data-fastpanel-ui-palette='voltage-blue'] {
  --native-ui-surface: linear-gradient(140deg,#102b3b,#172a4a 54%,#222647);
  --native-ui-border: #38bdf8;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 27%);
  --native-ui-inset: #132d3a;
  --native-ui-accent: #bae6fd;
}
html.dark[data-fastpanel-ui-palette='citrus-pop'] {
  --native-ui-surface: linear-gradient(140deg,#3c3516,#45301a 55%,#38271a);
  --native-ui-border: #facc15;
  --native-ui-shadow: 0 12px 26px rgb(0 0 0 / 27%);
  --native-ui-inset: #242417;
  --native-ui-accent: #fef08a;
}
html.dark[data-fastpanel-ui-palette='fuchsia-flare'] {
  --native-ui-surface: linear-gradient(140deg,#351b35,#3b1d3b 50%,#292143);
  --native-ui-border: #e879f9;
  --native-ui-shadow: 0 12px 30px rgb(0 0 0 / 28%);
  --native-ui-inset: #271b2d;
  --native-ui-accent: #f5d0fe;
}
html.dark[data-fastpanel-ui-palette='coral-signal'] {
  --native-ui-surface: linear-gradient(140deg,#3b2029,#3d202d 55%,#352318);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 11px 26px rgb(0 0 0 / 28%);
  --native-ui-inset: #2c1d27;
  --native-ui-accent: #fecdd3;
}
html.dark[data-fastpanel-ui-palette='jungle-pop'] {
  --native-ui-surface: linear-gradient(140deg,#103329,#123a37 55%,#173526);
  --native-ui-border: #34d399;
  --native-ui-shadow: 0 11px 28px rgb(0 0 0 / 26%);
  --native-ui-inset: #12382d;
  --native-ui-accent: #a7f3d0;
}
html.dark[data-fastpanel-ui-palette='royal-copper'] {
  --native-ui-surface: linear-gradient(140deg,#172554,#242b4b 55%,#3d291d);
  --native-ui-border: #fb923c;
  --native-ui-shadow: 0 11px 28px rgb(0 0 0 / 27%);
  --native-ui-inset: #20263a;
  --native-ui-accent: #bfdbfe;
}
html.dark[data-fastpanel-ui-palette='mono-slate'] {
  --native-ui-surface: linear-gradient(145deg,#1f2937,#111827);
  --native-ui-border: #64748b;
  --native-ui-shadow: 0 5px 16px rgb(0 0 0 / 22%);
  --native-ui-inset: #0f172a;
  --native-ui-accent: #e2e8f0;
}
html.dark[data-fastpanel-ui-palette='mono-warm'] {
  --native-ui-surface: linear-gradient(145deg,#292524,#1c1917);
  --native-ui-border: #78716c;
  --native-ui-shadow: 0 5px 16px rgb(0 0 0 / 24%);
  --native-ui-inset: #292524;
  --native-ui-accent: #e7e5e4;
}
html.dark[data-fastpanel-ui-palette='mono-ink'] {
  --native-ui-surface: linear-gradient(145deg,#1e293b,#020617);
  --native-ui-border: #94a3b8;
  --native-ui-shadow: 0 4px 14px rgb(0 0 0 / 24%);
  --native-ui-inset: #0f172a;
  --native-ui-accent: #f8fafc;
}
html.dark[data-fastpanel-ui-palette='glow-lilac'] {
  --native-ui-surface: linear-gradient(140deg,#2d2043,#2e2452 52%,#242040);
  --native-ui-border: #c4b5fd;
  --native-ui-shadow: 0 10px 26px rgb(0 0 0 / 28%);
  --native-ui-inset: #201b33;
  --native-ui-accent: #ddd6fe;
}
html.dark[data-fastpanel-ui-palette='tropical'] {
  --native-ui-surface: linear-gradient(130deg,#123a43,#294022 48%,#3c2b1c);
  --native-ui-border: #67e8f9;
  --native-ui-shadow: 0 12px 28px rgb(0 0 0 / 27%);
  --native-ui-inset: #172f32;
  --native-ui-accent: #d9f99d;
}
html.dark[data-fastpanel-ui-palette='blue-red'] {
  --native-ui-surface: linear-gradient(135deg,#172554,#1e293b 50%,#3f1d2e);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 12px 27px rgb(0 0 0 / 27%);
  --native-ui-inset: #17213a;
  --native-ui-accent: #93c5fd;
}
html.dark[data-fastpanel-ui-palette='cobalt-sun'] {
  --native-ui-surface: linear-gradient(140deg,#172554,#1e3a5f 55%,#3a3219);
  --native-ui-border: #60a5fa;
  --native-ui-shadow: 0 11px 27px rgb(0 0 0 / 27%);
  --native-ui-inset: #17213a;
  --native-ui-accent: #fde68a;
}
html.dark[data-fastpanel-ui-palette='mint-charcoal'] {
  --native-ui-surface: linear-gradient(145deg,#103329,#152c2b 52%,#1f2937);
  --native-ui-border: #34d399;
  --native-ui-shadow: 0 10px 25px rgb(0 0 0 / 25%);
  --native-ui-inset: #122a25;
  --native-ui-accent: #a7f3d0;
}
html.dark[data-fastpanel-ui-palette='peach-berry'] {
  --native-ui-surface: linear-gradient(140deg,#3a261e,#40252b 48%,#351d32);
  --native-ui-border: #fb7185;
  --native-ui-shadow: 0 11px 27px rgb(0 0 0 / 27%);
  --native-ui-inset: #30201f;
  --native-ui-accent: #fecdd3;
}
html.dark[data-fastpanel-ui-palette='highlighter'] {
  --native-ui-surface: linear-gradient(135deg,#34351a,#37331b 52%,#1f2937);
  --native-ui-border: #a3e635;
  --native-ui-shadow: 0 10px 25px rgb(0 0 0 / 28%);
  --native-ui-inset: #242817;
  --native-ui-accent: #d9f99d;
}
.native-ui-gallery__swatch--voltage-blue {
  background: linear-gradient(135deg,#0c4a6e,#0ea5e9,#bfdbfe);
}
.native-ui-gallery__swatch--citrus-pop {
  background: linear-gradient(135deg,#facc15,#f97316,#fff7ed);
}
.native-ui-gallery__swatch--fuchsia-flare {
  background: linear-gradient(135deg,#86198f,#d946ef,#c4b5fd);
}
.native-ui-gallery__swatch--coral-signal {
  background: linear-gradient(135deg,#9f1239,#fb7185,#ffedd5);
}
.native-ui-gallery__swatch--jungle-pop {
  background: linear-gradient(135deg,#065f46,#10b981,#67e8f9);
}
.native-ui-gallery__swatch--royal-copper {
  background: linear-gradient(135deg,#1e3a8a,#6478d0,#c2410c);
}
.native-ui-gallery__swatch--mono-slate {
  background: linear-gradient(135deg,#0f172a,#64748b,#e2e8f0);
}
.native-ui-gallery__swatch--mono-warm {
  background: linear-gradient(135deg,#57534e,#a8a29e,#fafaf9);
}
.native-ui-gallery__swatch--mono-ink {
  background: linear-gradient(135deg,#020617,#475569,#fff);
}
.native-ui-gallery__swatch--glow-lilac {
  background: linear-gradient(135deg,#5b21b6,#a78bfa,#f5f3ff);
}
.native-ui-gallery__swatch--tropical {
  background: linear-gradient(120deg,#0891b2,#84cc16,#f97316);
}
.native-ui-gallery__swatch--blue-red {
  background: linear-gradient(120deg,#1d4ed8,#dbeafe 50%,#dc2626);
}
.native-ui-gallery__swatch--cobalt-sun {
  background: linear-gradient(120deg,#1e3a8a,#3b82f6,#facc15);
}
.native-ui-gallery__swatch--mint-charcoal {
  background: linear-gradient(120deg,#111827,#059669,#a7f3d0);
}
.native-ui-gallery__swatch--peach-berry {
  background: linear-gradient(120deg,#fb923c,#fda4af,#9d174d);
}
.native-ui-gallery__swatch--highlighter {
  background: linear-gradient(120deg,#111827 0 38%,#d9f99d 38% 70%,#fef08a 70%);
}
html[data-fastpanel-ui-widget='value-stage'] :is(.fi-wi,.fi-wi-chart,.fi-wi-stats-overview-stat,.native-ui-preview-widget) {
  border-block-end: 5px solid var(--native-ui-border);
  background: linear-gradient(155deg,var(--native-ui-inset),var(--native-ui-surface));
}
html[data-fastpanel-ui-widget='ring-stat'] .fi-wi-stats-overview-stat-value {
  display: inline-block;
  min-width: 3.2rem;
  padding: .42rem .65rem;
  border: 2px solid var(--native-ui-border);
  border-radius: 999px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--native-ui-border) 16%,transparent);
  }
}
html[data-fastpanel-ui-widget='signal-board'] .fi-wi-stats-overview-stat {
  border: 1px solid var(--native-ui-border);
  border-block-start: 4px solid var(--native-ui-border);
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 9%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='metric-rail'] .fi-wi-stats-overview-stat {
  border-radius: .8rem;
  border-inline-start: 5px solid var(--native-ui-border);
  box-shadow: none;
}
html[data-fastpanel-ui-widget='color-mosaic'] .fi-wi-stats-overview-stat:nth-child(4n + 1) {
  background: linear-gradient(145deg,#e0f2fe,#f0f9ff);
  border-color: #0284c7;
}
html[data-fastpanel-ui-widget='color-mosaic'] .fi-wi-stats-overview-stat:nth-child(4n + 2) {
  background: linear-gradient(145deg,#dcfce7,#f0fdf4);
  border-color: #16a34a;
}
html[data-fastpanel-ui-widget='color-mosaic'] .fi-wi-stats-overview-stat:nth-child(4n + 3) {
  background: linear-gradient(145deg,#ffedd5,#fff7ed);
  border-color: #ea580c;
}
html[data-fastpanel-ui-widget='color-mosaic'] .fi-wi-stats-overview-stat:nth-child(4n) {
  background: linear-gradient(145deg,#fae8ff,#fdf4ff);
  border-color: #c026d3;
}
html.dark[data-fastpanel-ui-widget='color-mosaic'] .fi-wi-stats-overview-stat {
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='mono-console'] :is(.fi-wi,.fi-wi-chart,.fi-wi-stats-overview-stat,.native-ui-preview-widget) {
  filter: grayscale(1);
  border-radius: .35rem;
  box-shadow: none;
}
html[data-fastpanel-ui-widget='mono-console'] .fi-wi-stats-overview-stat-value {
  font-family: ui-monospace,SFMono-Regular,monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}
html[data-fastpanel-ui-widget='double-edge'] :is(.fi-wi,.fi-wi-chart,.fi-wi-stats-overview-stat,.native-ui-preview-widget) {
  border: 3px double var(--native-ui-border);
  box-shadow: none;
}
html[data-fastpanel-ui-widget='status-tiles'] .fi-wi-stats-overview-stat-label {
  display: inline-flex;
  width: fit-content;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 15%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='focus-number'] .fi-wi-stats-overview-stat-value {
  font-size: clamp(1.6rem,3vw,2.35rem);
  font-weight: 850;
  line-height: 1.05;
}
html[data-fastpanel-ui-widget='split-caption'] .fi-wi-stats-overview-stat {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .4rem .75rem;
}
html[data-fastpanel-ui-widget='split-caption'] .fi-wi-stats-overview-stat-value {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.35rem;
  font-weight: 800;
}
html[data-fastpanel-ui-widget='heat-strip'] .fi-wi-stats-overview-stat:nth-child(3n + 1) {
  border-block-start: 4px solid #ef4444;
  background: #ef4444;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#ef4444 8%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='heat-strip'] .fi-wi-stats-overview-stat:nth-child(3n + 2) {
  border-block-start: 4px solid #f97316;
  background: #f97316;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#f97316 8%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='heat-strip'] .fi-wi-stats-overview-stat:nth-child(3n) {
  border-block-start: 4px solid #eab308;
  background: #eab308;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#eab308 9%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='icon-panel'] .fi-wi-stats-overview-stat-icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: .8rem;
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 16%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='trend-line'] .fi-wi-stats-overview-stat {
  border-inline-end: 3px solid var(--native-ui-border);
  border-radius: .55rem;
}
html[data-fastpanel-ui-widget='compact-stat'] .fi-wi-stats-overview-stat {
  min-height: 0;
  padding: .65rem .8rem;
  border-radius: .65rem;
  box-shadow: none;
}
html[data-fastpanel-ui-widget='bright-kpi'] :is(.fi-wi,.fi-wi-chart,.fi-wi-stats-overview-stat,.native-ui-preview-widget) {
  background: var(--native-ui-inset);
  border-color: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb,var(--native-ui-border) 48%,white);
  }
  box-shadow: 0 5px 16px var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 5px 16px color-mix(in srgb,var(--native-ui-border) 12%,transparent);
  }
}
html.dark[data-fastpanel-ui-widget='bright-kpi'] :is(.fi-wi,.fi-wi-chart,.fi-wi-stats-overview-stat,.native-ui-preview-widget) {
  background: var(--native-ui-surface);
  border-color: var(--native-ui-border);
  color: #f8fafc;
}
html[data-fastpanel-ui-widget='bold-slab'] :is(.fi-wi,.fi-wi-chart,.fi-wi-stats-overview-stat,.native-ui-preview-widget) {
  border-radius: .4rem;
  box-shadow: none;
  border-block-start: 4px solid var(--native-ui-border);
}
html[data-fastpanel-ui-widget='bold-slab'] .fi-wi-stats-overview-stat-value {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
html[data-fastpanel-ui-widget='ring-stat'] .native-ui-preview-card__tiles strong {
  display: inline-grid;
  min-width: 2.4rem;
  min-height: 2.4rem;
  place-items: center;
  padding: .35rem;
  border: 2px solid var(--native-ui-border);
  border-radius: 999px;
}
html[data-fastpanel-ui-widget='signal-board'] .native-ui-preview-widget {
  border-block-start: 5px solid var(--native-ui-border);
}
html[data-fastpanel-ui-widget='metric-rail'] .native-ui-preview-widget .native-ui-preview-card__tiles > div {
  border-inline-start: 4px solid var(--native-ui-border);
  border-radius: .45rem;
}
html[data-fastpanel-ui-widget='color-mosaic'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(4n + 1) {
  border-block-start: 4px solid #0284c7;
  background: #0ea5e9;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#0ea5e9 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='color-mosaic'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(4n + 2) {
  border-block-start: 4px solid #16a34a;
  background: #22c55e;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#22c55e 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='color-mosaic'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(4n + 3) {
  border-block-start: 4px solid #ea580c;
  background: #f97316;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#f97316 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='color-mosaic'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(4n) {
  border-block-start: 4px solid #c026d3;
  background: #d946ef;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#d946ef 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='mono-console'] .native-ui-preview-widget .native-ui-preview-card__tiles strong {
  font-family: ui-monospace,SFMono-Regular,monospace;
  font-variant-numeric: tabular-nums;
}
html[data-fastpanel-ui-widget='status-tiles'] .native-ui-preview-widget .native-ui-preview-card__tiles strong {
  width: fit-content;
  padding: .14rem .5rem;
  border-radius: 999px;
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 18%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-widget='focus-number'] .native-ui-preview-widget .native-ui-preview-card__tiles strong {
  font-size: 1.25rem;
  font-weight: 900;
}
html[data-fastpanel-ui-widget='split-caption'] .native-ui-preview-widget .native-ui-preview-card__tiles > div {
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}
html[data-fastpanel-ui-widget='split-caption'] .native-ui-preview-widget .native-ui-preview-card__tiles strong {
  grid-column: 2;
  grid-row: 1 / span 2;
}
html[data-fastpanel-ui-widget='heat-strip'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(3n + 1) {
  border-block-start: 4px solid #ef4444;
}
html[data-fastpanel-ui-widget='heat-strip'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(3n + 2) {
  border-block-start: 4px solid #f97316;
}
html[data-fastpanel-ui-widget='heat-strip'] .native-ui-preview-widget .native-ui-preview-card__tiles > div:nth-child(3n) {
  border-block-start: 4px solid #eab308;
}
html[data-fastpanel-ui-widget='icon-panel'] .native-ui-preview-widget .native-ui-preview-card__icon {
  border-radius: .55rem;
  outline: 2px solid var(--native-ui-border);
  outline-offset: 2px;
}
html[data-fastpanel-ui-widget='trend-line'] .native-ui-preview-widget .native-ui-preview-card__tiles > div {
  border-inline-end: 3px solid var(--native-ui-border);
}
html[data-fastpanel-ui-widget='compact-stat'] .native-ui-preview-widget .native-ui-preview-card__tiles > div {
  gap: .15rem;
  padding: .45rem;
  border-radius: .5rem;
}
html[data-fastpanel-ui-widget='bold-slab'] .native-ui-preview-widget .native-ui-preview-card__tiles strong {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
html[data-fastpanel-ui-card='bento-showcase'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='bento-showcase'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .65rem;
}
html[data-fastpanel-ui-card='bento-showcase'] :is(.native-detail-card,.native-ui-preview-card__tiles) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-card='panel-mosaic'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item), html[data-fastpanel-ui-card='panel-mosaic'] .native-ui-preview-card__tiles > div {
  padding: .85rem;
  border: 1px solid var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb,var(--native-ui-border) 45%,transparent);
  }
  border-radius: 1rem;
  background: var(--native-ui-inset);
  box-shadow: 0 5px 14px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-card='column-story'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='column-story'] .native-ui-preview-card__column-items {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .6rem;
}
html[data-fastpanel-ui-card='split-ledger'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item), html[data-fastpanel-ui-card='split-ledger'] .native-ui-preview-card__tiles > div {
  border: 0;
  border-block-end: 1px solid var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-block-end: 1px solid color-mix(in srgb,var(--native-ui-border) 30%,transparent);
  }
  border-radius: 0;
  background: var(--native-ui-inset);
}
html[data-fastpanel-ui-card='edge-band'] :is(.fi-section,.native-ui-preview-card) {
  border-inline-start: 5px solid var(--native-ui-border);
  border-radius: .7rem 1rem 1rem .7rem;
}
html[data-fastpanel-ui-card='elegant-stack'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .75rem;
}
html[data-fastpanel-ui-card='elegant-stack'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item) {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb,var(--native-ui-border) 32%,transparent);
  }
  border-radius: .9rem;
  background: var(--native-ui-inset);
}
html[data-fastpanel-ui-card='metric-quilt'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='metric-quilt'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr));
  align-items: stretch;
  gap: .55rem;
}
html[data-fastpanel-ui-card='metric-quilt'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item), html[data-fastpanel-ui-card='metric-quilt'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--native-ui-border);
  border-radius: .75rem;
  background: var(--native-ui-surface);
}
html[data-fastpanel-ui-card='full-bleed'] .fi-section-header {
  border-block-start: 4px solid var(--native-ui-border);
  background: var(--native-ui-surface);
}
html[data-fastpanel-ui-card='full-bleed'] .native-ui-preview-card > header {
  margin: -1rem -1rem 0;
  padding: 1rem;
  border-radius: inherit;
  border-block-start: 4px solid var(--native-ui-border);
  background: var(--native-ui-surface);
}
html[data-fastpanel-ui-card='inset-panels'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='inset-panels'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  padding: .65rem;
  border-radius: .9rem;
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 8%,var(--native-ui-surface));
  }
  gap: .55rem;
}
html[data-fastpanel-ui-card='inset-panels'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item), html[data-fastpanel-ui-card='inset-panels'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb,var(--native-ui-border) 38%,transparent);
  }
  border-radius: .65rem;
  background: var(--native-ui-inset);
  box-shadow: inset 0 2px 7px rgb(15 23 42 / 5%);
}
html[data-fastpanel-ui-card='numbered-rail'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content {
  counter-reset: detail-step;
}
html[data-fastpanel-ui-card='numbered-rail'] :is(.native-detail-card,.native-vertical-card-stack) .fi-in-entry-wrp {
  counter-increment: detail-step;
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr);
  align-items: center;
  gap: .55rem;
}
html[data-fastpanel-ui-card='numbered-rail'] :is(.native-detail-card,.native-vertical-card-stack) .fi-in-entry-wrp::before {
  content: counter(detail-step,decimal-leading-zero);
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: 50%;
  background: var(--native-ui-border);
  color: white;
  font-size: .7rem;
  font-weight: 800;
}
html[data-fastpanel-ui-card='vertical-split'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='vertical-split'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(8rem,.8fr);
  gap: .65rem;
}
html[data-fastpanel-ui-card='vertical-split'] :is(.native-detail-card,.native-ui-preview-card__tiles) > :first-child {
  grid-row: span 2;
}
html[data-fastpanel-ui-card='grid-scatter'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='grid-scatter'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .55rem;
}
html[data-fastpanel-ui-card='grid-scatter'] :is(.native-detail-card,.native-ui-preview-card__tiles) > :nth-child(4n + 1) {
  grid-column: span 2;
}
html[data-fastpanel-ui-card='grid-scatter'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item), html[data-fastpanel-ui-card='grid-scatter'] .native-ui-preview-card__tiles > div {
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--native-ui-border);
  border-radius: .8rem;
  background: var(--native-ui-inset);
}
html[data-fastpanel-ui-card='flat-board'] :is(.fi-section,.native-ui-preview-card) {
  border-radius: .45rem;
  box-shadow: none;
}
html[data-fastpanel-ui-card='flat-board'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item), html[data-fastpanel-ui-card='flat-board'] .native-ui-preview-card__tiles > div {
  border-radius: .35rem;
  box-shadow: none;
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 8%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-card='frame-stack'] :is(.fi-section,.native-ui-preview-card) {
  outline: 1px solid var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 1px solid color-mix(in srgb,var(--native-ui-border) 48%,transparent);
  }
  outline-offset: 3px;
  box-shadow: inset 0 0 0 3px var(--native-ui-surface);
}
html[data-fastpanel-ui-card='hero-details'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content, html[data-fastpanel-ui-card='hero-details'] .native-ui-preview-card__tiles {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .65rem;
}
html[data-fastpanel-ui-card='hero-details'] :is(.native-detail-card,.native-ui-preview-card__tiles) > :first-child {
  grid-column: 1 / -1;
  padding: 1.1rem;
  border-inline-start: 5px solid var(--native-ui-border);
  background: var(--native-ui-surface);
}
html[data-fastpanel-ui-card='columns-soft'] :is(.native-detail-card,.native-vertical-card-stack) .fi-section-content {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .6rem;
}
html[data-fastpanel-ui-card='columns-soft'] :is(.native-detail-card,.native-vertical-card-stack) :is(.fi-in-entry-wrp,.fi-in-repeatable-item) {
  width: 100%;
  border: 1px solid var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb,var(--native-ui-border) 24%,transparent);
  }
  border-radius: 1.1rem;
  background: var(--native-ui-inset);
}
:is(html[data-fastpanel-ui-list='horizontal-spotlight'],html[data-fastpanel-ui-list='horizontal-ledger-strip'],html[data-fastpanel-ui-list='horizontal-cards-two'],html[data-fastpanel-ui-list='horizontal-steps-dense'],html[data-fastpanel-ui-list='horizontal-tiles-wide'],html[data-fastpanel-ui-list='horizontal-snap-bubbles'],html[data-fastpanel-ui-list='horizontal-metrics-board'],html[data-fastpanel-ui-list='horizontal-equal-deck'],html[data-fastpanel-ui-list='horizontal-icon-shelf'],html[data-fastpanel-ui-list='horizontal-card-stack'],html[data-fastpanel-ui-list='horizontal-gallery'],html[data-fastpanel-ui-list='horizontal-minimal-line'],html[data-fastpanel-ui-list='horizontal-carousel-wide'],html[data-fastpanel-ui-list='horizontal-color-cells'],html[data-fastpanel-ui-list='horizontal-progress-track'],html[data-fastpanel-ui-list='horizontal-profile-row'],html[data-fastpanel-ui-list='horizontal-pill-scroll']) :is(.native-card-rail > .fi-grid,.native-ui-preview-card__rail) {
  display: flex;
  flex-wrap: nowrap;
  gap: .7rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: .35rem .2rem .8rem;
}
:is(html[data-fastpanel-ui-list='horizontal-spotlight'],html[data-fastpanel-ui-list='horizontal-ledger-strip'],html[data-fastpanel-ui-list='horizontal-cards-two'],html[data-fastpanel-ui-list='horizontal-steps-dense'],html[data-fastpanel-ui-list='horizontal-tiles-wide'],html[data-fastpanel-ui-list='horizontal-snap-bubbles'],html[data-fastpanel-ui-list='horizontal-metrics-board'],html[data-fastpanel-ui-list='horizontal-equal-deck'],html[data-fastpanel-ui-list='horizontal-icon-shelf'],html[data-fastpanel-ui-list='horizontal-card-stack'],html[data-fastpanel-ui-list='horizontal-gallery'],html[data-fastpanel-ui-list='horizontal-minimal-line'],html[data-fastpanel-ui-list='horizontal-carousel-wide'],html[data-fastpanel-ui-list='horizontal-color-cells'],html[data-fastpanel-ui-list='horizontal-progress-track'],html[data-fastpanel-ui-list='horizontal-profile-row'],html[data-fastpanel-ui-list='horizontal-pill-scroll']) :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div) {
  flex: 0 0 clamp(12rem,26vw,18rem);
  min-width: 0;
  scroll-snap-align: start;
}
html[data-fastpanel-ui-list='horizontal-spotlight'] :is(.native-card-rail > .fi-grid > .fi-grid-col:first-child,.native-ui-preview-card__rail > div:first-child) {
  flex-basis: clamp(19rem,40vw,28rem);
}
html[data-fastpanel-ui-list='horizontal-neon-lanes'] :is(.native-card-rail > .fi-grid,.native-ui-preview-card__rail) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2,minmax(4rem,auto));
  grid-auto-columns: clamp(13rem,27vw,19rem);
  gap: .6rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list='horizontal-ledger-strip'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-radius: .35rem;
  border-block-end: 3px solid var(--native-ui-border);
  box-shadow: none;
}
html[data-fastpanel-ui-list='horizontal-cards-two'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div) {
  flex-basis: clamp(15rem,42vw,23rem);
}
html[data-fastpanel-ui-list='horizontal-steps-dense'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-block-start: 4px solid var(--native-ui-border);
  border-radius: .55rem;
}
html[data-fastpanel-ui-list='horizontal-tiles-wide'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  background: var(--native-ui-surface);
  border-color: var(--native-ui-border);
}
html[data-fastpanel-ui-list='horizontal-snap-bubbles'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-radius: 1.5rem;
  background: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,var(--native-ui-border) 9%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-list='horizontal-metrics-board'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(3n + 1) {
  border-block-start: 4px solid #0891b2;
}
html[data-fastpanel-ui-list='horizontal-metrics-board'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(3n + 2) {
  border-block-start: 4px solid #16a34a;
}
html[data-fastpanel-ui-list='horizontal-metrics-board'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(3n) {
  border-block-start: 4px solid #ea580c;
}
html[data-fastpanel-ui-list='horizontal-equal-deck'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div) {
  flex-basis: clamp(14rem,29vw,20rem);
}
html[data-fastpanel-ui-list='horizontal-icon-shelf'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-radius: 1rem;
  border-block-start: 3px solid var(--native-ui-border);
  text-align: center;
}
html[data-fastpanel-ui-list='horizontal-card-stack'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  box-shadow: 4px 5px 0 var(--native-ui-border),0 9px 18px rgb(15 23 42 / 7%);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 4px 5px 0 color-mix(in srgb,var(--native-ui-border) 22%,transparent),0 9px 18px rgb(15 23 42 / 7%);
  }
}
html[data-fastpanel-ui-list='horizontal-gallery'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div) {
  flex-basis: clamp(16rem,34vw,24rem);
}
html[data-fastpanel-ui-list='horizontal-minimal-line'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-radius: .35rem;
  border-inline-width: 0;
  border-block-end: 1px solid var(--native-ui-border);
  background: transparent;
  box-shadow: none;
}
html[data-fastpanel-ui-list='horizontal-carousel-wide'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div) {
  flex-basis: clamp(20rem,45vw,32rem);
  scroll-snap-align: center;
}
html[data-fastpanel-ui-list='horizontal-color-cells'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(4n + 1) {
  background: #0ea5e9;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#0ea5e9 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-list='horizontal-color-cells'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(4n + 2) {
  background: #22c55e;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#22c55e 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-list='horizontal-color-cells'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(4n + 3) {
  background: #f97316;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#f97316 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-list='horizontal-color-cells'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div):nth-child(4n) {
  background: #d946ef;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb,#d946ef 12%,var(--native-ui-inset));
  }
}
html[data-fastpanel-ui-list='horizontal-progress-track'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-block-start: 4px solid var(--native-ui-border);
}
html[data-fastpanel-ui-list='horizontal-profile-row'] :is(.native-card-rail > .fi-grid > .fi-grid-col,.native-ui-preview-card__rail > div) {
  flex-basis: clamp(17rem,38vw,27rem);
}
html[data-fastpanel-ui-list='horizontal-pill-scroll'] :is(.native-card-rail > .fi-grid > .fi-grid-col .fi-section,.native-ui-preview-card__rail > div) {
  border-radius: 999px;
  padding-inline: 1.1rem;
}
html[data-fastpanel-ui-list='horizontal-grid-rail'] :is(.native-card-rail > .fi-grid,.native-ui-preview-card__rail) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2,minmax(4rem,auto));
  grid-auto-columns: clamp(11rem,23vw,16rem);
  gap: .55rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-list^='horizontal-'] :is(.fi-ta-content,.fi-ta-table-container) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
:is(html[data-fastpanel-ui-layout='grid-2x4'],html[data-fastpanel-ui-layout='grid-4-balanced'],html[data-fastpanel-ui-layout='grid-featured-rail'],html[data-fastpanel-ui-layout='grid-hero-sidebar'],html[data-fastpanel-ui-layout='masonry-alternating'],html[data-fastpanel-ui-layout='bento-hero'],html[data-fastpanel-ui-layout='bento-balanced'],html[data-fastpanel-ui-layout='grid-compact-6']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  display: grid;
  align-items: stretch;
  gap: .7rem;
  min-width: 0;
}
html[data-fastpanel-ui-layout='grid-2x4'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
html[data-fastpanel-ui-layout='grid-4-balanced'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .6rem;
}
html[data-fastpanel-ui-layout='grid-featured-rail'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
html[data-fastpanel-ui-layout='grid-featured-rail'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
}
html[data-fastpanel-ui-layout='grid-hero-sidebar'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: minmax(0,1.8fr) minmax(10rem,.8fr);
}
html[data-fastpanel-ui-layout='grid-hero-sidebar'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :first-child {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='masonry-alternating'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-rows: minmax(6rem,auto);
}
html[data-fastpanel-ui-layout='masonry-alternating'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :nth-child(3n + 1) {
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='bento-hero'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-rows: minmax(6rem,auto);
}
html[data-fastpanel-ui-layout='bento-hero'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}
html[data-fastpanel-ui-layout='bento-balanced'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .75rem;
}
html[data-fastpanel-ui-layout='grid-compact-6'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr));
  gap: .5rem;
}
:is(html[data-fastpanel-ui-layout='stack-clean'],html[data-fastpanel-ui-layout='stack-separated']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: .8rem;
}
html[data-fastpanel-ui-layout='stack-clean'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > * {
  width: 100%;
  min-width: 0;
  box-shadow: none;
}
html[data-fastpanel-ui-layout='stack-separated'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > * {
  width: 100%;
  min-width: 0;
  border-inline-start: 4px solid var(--native-ui-border);
}
:is(html[data-fastpanel-ui-layout='rail-single-wide'],html[data-fastpanel-ui-layout='rail-peek-wide'],html[data-fastpanel-ui-layout='rail-feature-strip'],html[data-fastpanel-ui-layout='rail-center-cards']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  display: flex;
  flex-wrap: nowrap;
  gap: .75rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: .3rem .2rem .8rem;
}
:is(html[data-fastpanel-ui-layout='rail-single-wide'],html[data-fastpanel-ui-layout='rail-peek-wide'],html[data-fastpanel-ui-layout='rail-feature-strip'],html[data-fastpanel-ui-layout='rail-center-cards']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > * {
  flex: 0 0 clamp(16rem,34vw,24rem);
  min-width: 0;
  scroll-snap-align: start;
}
html[data-fastpanel-ui-layout='rail-single-wide'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > * {
  flex-basis: clamp(22rem,48vw,34rem);
}
html[data-fastpanel-ui-layout='rail-peek-wide'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > * {
  flex-basis: min(82%,29rem);
}
html[data-fastpanel-ui-layout='rail-feature-strip'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :first-child {
  flex-basis: clamp(21rem,43vw,31rem);
}
html[data-fastpanel-ui-layout='rail-center-cards'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  justify-content: center;
  scroll-padding-inline: 1rem;
}
html[data-fastpanel-ui-layout='rail-double-row'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2,minmax(5rem,auto));
  grid-auto-columns: clamp(14rem,29vw,21rem);
  gap: .7rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
html[data-fastpanel-ui-layout='rail-three-column'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3,minmax(4rem,auto));
  grid-auto-columns: clamp(11rem,23vw,17rem);
  gap: .6rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
@media (max-width: 48rem) {
  :is(html[data-fastpanel-ui-card='bento-showcase'],html[data-fastpanel-ui-card='grid-scatter'],html[data-fastpanel-ui-card='inset-panels'],html[data-fastpanel-ui-card='metric-quilt']) :is(.native-detail-card .fi-section-content,.native-ui-preview-card__tiles) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  :is(html[data-fastpanel-ui-card='bento-showcase'],html[data-fastpanel-ui-card='hero-details']) :is(.native-detail-card .fi-section-content,.native-ui-preview-card__tiles) > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html[data-fastpanel-ui-card='vertical-split'] :is(.native-detail-card .fi-section-content,.native-ui-preview-card__tiles) {
    grid-template-columns: minmax(0,1fr);
  }
  html[data-fastpanel-ui-card='vertical-split'] :is(.native-detail-card .fi-section-content,.native-ui-preview-card__tiles) > :first-child {
    grid-row: auto;
  }
  :is(html[data-fastpanel-ui-layout='grid-2x4'],html[data-fastpanel-ui-layout='grid-4-balanced'],html[data-fastpanel-ui-layout='grid-featured-rail'],html[data-fastpanel-ui-layout='bento-hero'],html[data-fastpanel-ui-layout='grid-compact-6'],html[data-fastpanel-ui-layout='masonry-alternating']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  :is(html[data-fastpanel-ui-layout='grid-featured-rail'],html[data-fastpanel-ui-layout='bento-hero']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html[data-fastpanel-ui-layout='grid-hero-sidebar'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
    grid-template-columns: minmax(0,1fr);
  }
  html[data-fastpanel-ui-layout='grid-hero-sidebar'] :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) > :first-child {
    grid-row: auto;
  }
  :is(html[data-fastpanel-ui-layout='rail-double-row'],html[data-fastpanel-ui-layout='rail-three-column']) :is(.native-ui-gallery__previews,.native-card-rail > .fi-grid) {
    grid-template-rows: repeat(2,minmax(3.5rem,auto));
    grid-auto-columns: clamp(10rem,68vw,15rem);
  }
}
:is(.native-ui-system-choice--voltage-ops,.native-ui-system-choice--cobalt-sun-ledger,.native-ui-system-choice--royal-cobalt-workspace) {
  --system-1: #0c4a6e;
  --system-2: #0284c7;
  --system-3: #38bdf8;
  --system-4: #dbeafe;
  --system-surface: #eff6ff;
}
:is(.native-ui-system-choice--citrus-wall,.native-ui-system-choice--sunny-bento-room,.native-ui-system-choice--citrus-profile-wall) {
  --system-1: #854d0e;
  --system-2: #eab308;
  --system-3: #f97316;
  --system-4: #fef3c7;
  --system-surface: #fffbeb;
}
:is(.native-ui-system-choice--fuchsia-lab,.native-ui-system-choice--fuchsia-metrics-board) {
  --system-1: #86198f;
  --system-2: #d946ef;
  --system-3: #c4b5fd;
  --system-4: #f5d0fe;
  --system-surface: #fdf4ff;
}
:is(.native-ui-system-choice--coral-monitor,.native-ui-system-choice--coral-storyboard) {
  --system-1: #9f1239;
  --system-2: #f43f5e;
  --system-3: #fb7185;
  --system-4: #ffe4e6;
  --system-surface: #fff1f2;
}
:is(.native-ui-system-choice--jungle-ledger,.native-ui-system-choice--tropical-control,.native-ui-system-choice--tropical-rail-workspace,.native-ui-system-choice--mint-ledger-studio) {
  --system-1: #064e3b;
  --system-2: #059669;
  --system-3: #34d399;
  --system-4: #ccfbf1;
  --system-surface: #ecfdf5;
}
:is(.native-ui-system-choice--copper-executive,.native-ui-system-choice--glacier-copper-studio) {
  --system-1: #1e3a8a;
  --system-2: #b45309;
  --system-3: #fb923c;
  --system-4: #ffedd5;
  --system-surface: #eff6ff;
}
:is(.native-ui-system-choice--slate-mono-board,.native-ui-system-choice--monochrome-profile-ledger) {
  --system-1: #0f172a;
  --system-2: #475569;
  --system-3: #94a3b8;
  --system-4: #e2e8f0;
  --system-surface: #f8fafc;
}
.native-ui-system-choice--paper-mono-office {
  --system-1: #57534e;
  --system-2: #78716c;
  --system-3: #a8a29e;
  --system-4: #e7e5e4;
  --system-surface: #fffcf5;
}
:is(.native-ui-system-choice--ink-mono-console,.native-ui-system-choice--night-ink-control) {
  --system-1: #020617;
  --system-2: #334155;
  --system-3: #94a3b8;
  --system-4: #e2e8f0;
  --system-surface: #f8fafc;
}
.native-ui-system-choice--lilac-glow-dashboard {
  --system-1: #5b21b6;
  --system-2: #8b5cf6;
  --system-3: #c4b5fd;
  --system-4: #ede9fe;
  --system-surface: #faf5ff;
}
.native-ui-system-choice--blue-red-command {
  --system-1: #1d4ed8;
  --system-2: #dc2626;
  --system-3: #fb7185;
  --system-4: #dbeafe;
  --system-surface: #eff6ff;
}
.native-ui-system-choice--mint-charcoal-ops {
  --system-1: #064e3b;
  --system-2: #059669;
  --system-3: #34d399;
  --system-4: #d1fae5;
  --system-surface: #ecfdf5;
}
.native-ui-system-choice--peach-berry-gallery {
  --system-1: #9d174d;
  --system-2: #e11d48;
  --system-3: #fb923c;
  --system-4: #ffedd5;
  --system-surface: #fff7ed;
}
.native-ui-system-choice--highlighter-signal-room {
  --system-1: #1f2937;
  --system-2: #65a30d;
  --system-3: #a3e635;
  --system-4: #fef08a;
  --system-surface: #f7fee7;
}
.native-ui-gallery__choice.is-pending {
  border-color: var(--primary-600);
  border-style: dashed;
  box-shadow: 0 0 0 3px var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 18%, transparent);
  }
}
.native-ui-gallery__card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--native-ui-border, var(--gray-200));
  border-radius: 0.9rem;
  background: var(--native-ui-surface, var(--gray-50));
}
.native-ui-gallery__card-actions > span {
  color: var(--gray-600);
  font-size: 0.75rem;
  line-height: 1.6;
}
.native-ui-gallery__card-actions > div {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.native-ui-gallery__card-actions button {
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--native-ui-border, var(--gray-300));
  border-radius: 0.7rem;
  background: var(--native-ui-inset, white);
  color: var(--gray-800);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}
.native-ui-gallery__card-actions .native-ui-gallery__card-apply {
  border-color: var(--primary-600);
  background: var(--primary-600);
  color: white;
}
.native-ui-gallery__card-actions button:hover {
  filter: brightness(0.97);
}
.native-ui-gallery__card-actions button:focus-visible {
  outline: 3px solid var(--primary-500);
  @supports (color: color-mix(in lab, red, red)) {
    outline: 3px solid color-mix(in srgb, var(--primary-500) 40%, transparent);
  }
  outline-offset: 2px;
}
.dark .native-ui-gallery__card-actions > span {
  color: var(--gray-300);
}
.dark .native-ui-gallery__card-actions button:not(.native-ui-gallery__card-apply) {
  background: var(--gray-800);
  color: var(--gray-100);
}
@media (max-width: 48rem) {
  .native-ui-gallery__choices, .native-ui-system-grid, .native-ui-gallery__previews {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    padding: 0.25rem 0.15rem 0.8rem;
  }
  .native-ui-gallery[data-fastpanel-ui-gallery] .native-ui-gallery__previews {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .native-ui-gallery__choice {
    flex: 0 0 clamp(16rem, 78vw, 21rem);
    width: clamp(16rem, 78vw, 21rem);
    max-width: 84vw;
    scroll-snap-align: start;
  }
  .native-ui-system-choice, .native-ui-gallery[data-fastpanel-ui-gallery] .native-ui-gallery__previews > .native-ui-preview-card {
    flex: 0 0 min(88%, 25rem);
    min-width: min(88%, 25rem);
    scroll-snap-align: start;
  }
  .native-ui-gallery__card-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .native-ui-gallery__card-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .native-ui-gallery__card-actions button {
    min-width: 0;
  }
}
@container native-ui-catalog (max-width: 25rem) {
  .native-ui-gallery__card-actions > div {
    grid-template-columns: minmax(0, 1fr);
  }
}
:root {
  --fastpanel-card-elevation: 0 2px 9px rgb(15 23 42 / 7%), 0 1px 2px rgb(15 23 42 / 4%);
  --fastpanel-chat-bubble-elevation: 0 1px 4px rgb(15 23 42 / 6%);
}
html.dark {
  --fastpanel-card-elevation: 0 3px 11px rgb(0 0 0 / 28%), 0 1px 3px rgb(0 0 0 / 19%);
  --fastpanel-chat-bubble-elevation: 0 2px 6px rgb(0 0 0 / 20%);
}
html :is( .fi-section, .fi-ta-ctn:not(.fi-section .fi-ta-ctn):not(.fi-wi-widget .fi-ta-ctn), .fi-wi-stats-overview-stat, .fi-modal-window, .native-ui-preview-card ) {
  box-shadow: var(--native-ui-shadow, var(--fastpanel-card-elevation));
}
.fi-body .native-store-product-type-badge {
  color: #3730a3;
  background-color: #eef2ff;
  border-color: #a5b4fc;
  font-weight: 600;
}
html.dark .fi-body .native-store-product-type-badge, .dark .fi-body .native-store-product-type-badge {
  color: #eef2ff;
  background-color: #312e81;
  border-color: #818cf8;
}
.fi-body .fi-sidebar {
  color: #f8fafc;
  color-scheme: dark;
  background-color: #111827 !important;
}
.fi-sidebar-header img[src*="fastpanel-logo-panel-black.svg"] {
  filter: brightness(0) invert(1);
}
.fi-sidebar-header .native-sidebar-brand-name {
  color: #fff !important;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-group-btn, .fi-sidebar-item-label, .fi-sidebar-group-label) {
  color: #9ca3af;
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-group-btn):is(:hover, :focus-visible) {
  color: #fff;
  background-color: rgb(255 255 255 / 9%);
}
.fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-group-btn):focus-visible {
  outline: 2px solid #e5e7eb;
  outline-offset: 2px;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  content: none;
  display: none;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn :is(.fi-icon, .fi-sidebar-item-label) {
  color: #fff !important;
  font-weight: 700;
}
.fi-sidebar .fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn, .fi-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn, .fi-sidebar .fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn .fi-sidebar-item-label, .fi-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn .fi-sidebar-group-label {
  color: #fff !important;
  font-weight: 700;
}
.fi-sidebar .fi-sidebar-item-btn > .fi-icon, .fi-sidebar .fi-sidebar-group-btn > .fi-icon {
  color: #9ca3af;
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar .fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon {
  color: #fff !important;
}
@media (max-width: 40rem) {
  .fi-body {
    --sidebar-width: min(15.5rem, 86vw);
  }
  .fi-sidebar :is(.fi-sidebar-item-btn, .fi-sidebar-group-btn) {
    min-height: 2.35rem;
    padding-block: 0.45rem;
    font-size: 0.8rem;
  }
  .fi-sidebar :is(.fi-sidebar-item-label, .fi-sidebar-group-label) {
    font-size: 0.8rem;
    line-height: 1.35;
  }
  .fi-sidebar-header .native-sidebar-brand-name {
    font-size: 0.78rem;
  }
}
.fi-layout {
  height: auto;
  min-height: 100dvh;
}
@media (min-width: 64rem) {
  .fi-body:not(.fi-body-has-top-navigation):not(.fi-body-has-topbar):not(.fi-body-has-sidebar-collapsible-on-desktop):not(.fi-body-has-sidebar-fully-collapsible-on-desktop) > .fi-layout > #fi-main-sidebar {
    position: fixed !important;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: 20;
    height: 100dvh;
    max-height: 100dvh;
  }
  .fi-body.fi-body-has-topbar:not(.fi-body-has-top-navigation):not(.fi-body-has-sidebar-collapsible-on-desktop):not(.fi-body-has-sidebar-fully-collapsible-on-desktop) > .fi-layout > #fi-main-sidebar {
    position: fixed !important;
    inset-block-start: var(--topbar-height);
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: 20;
    height: calc(100dvh - var(--topbar-height));
    max-height: calc(100dvh - var(--topbar-height));
  }
  .fi-body-has-navigation:not(.fi-body-has-top-navigation):not(.fi-body-has-sidebar-collapsible-on-desktop):not(.fi-body-has-sidebar-fully-collapsible-on-desktop) .fi-layout > .fi-main-ctn {
    margin-inline-start: var(--sidebar-width);
  }
}
.fi-sidebar-nav {
  box-sizing: border-box;
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
@media (min-width: 64rem) {
  .fi-sidebar-nav {
    row-gap: 1rem;
    padding-block: 1.25rem;
  }
  .fi-sidebar-nav-groups {
    row-gap: 1rem;
  }
}
.fi-sidebar-group-items {
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
.fi-sidebar-group-collapse-btn {
  transition: transform 200ms ease, color 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .fi-sidebar-group-items, .fi-sidebar-group-collapse-btn, .fi-sidebar-item-btn {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
html[data-fastpanel-ui-card='outline'] :is(.fi-section, .native-ui-preview-card), html[data-fastpanel-ui-card='borderless'] :is(.fi-section, .native-ui-preview-card), html[data-fastpanel-ui-card='flat-board'] :is(.fi-section, .native-ui-preview-card) {
  box-shadow: var(--native-ui-shadow, var(--fastpanel-card-elevation));
}
html[data-fastpanel-ui-widget='neon'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget), html[data-fastpanel-ui-widget='outline'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget), html[data-fastpanel-ui-widget='neon-edge'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget), html[data-fastpanel-ui-widget='compact-row'] :is(.fi-wi-stats-overview-stat, .native-ui-preview-widget), html[data-fastpanel-ui-widget='monochrome-board'] .fi-wi-stats-overview-stat, html[data-fastpanel-ui-widget='mono-typography'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget), html[data-fastpanel-ui-widget='metric-rail'] .fi-wi-stats-overview-stat, html[data-fastpanel-ui-widget='double-edge'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget), html[data-fastpanel-ui-widget='bold-slab'] :is(.fi-wi, .fi-wi-chart, .fi-wi-stats-overview-stat, .native-ui-preview-widget) {
  box-shadow: var(--native-ui-shadow, var(--fastpanel-card-elevation));
}
.native-profile-activity-details__item {
  box-shadow: var(--native-ui-shadow, var(--fastpanel-card-elevation));
}
.native-ticket-chat__bubble:not(:hover):not(:focus-visible) {
  box-shadow: var(--fastpanel-chat-bubble-elevation);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 7.5rem;
  align-items: stretch;
  overflow: hidden;
  padding: 0.75rem 1.5rem 0.65rem 4rem;
  border: 0;
  border-radius: 1rem;
  color: #fff;
  filter: none;
  box-shadow: 0 0.65rem 1.45rem rgb(15 23 42 / 18%);
  isolation: isolate;
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat::before, :is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat::after {
  content: none;
  display: none;
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-section-content-ctn > .fi-sc > :nth-child(4n + 1) > .fi-sc-component > .fi-wi-stats-overview-stat {
  background: linear-gradient(135deg, #ff4b2e 0%, #df177e 100%);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-section-content-ctn > .fi-sc > :nth-child(4n + 2) > .fi-sc-component > .fi-wi-stats-overview-stat {
  background: linear-gradient(135deg, #647ce8 0%, #744fa6 100%);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-section-content-ctn > .fi-sc > :nth-child(4n + 3) > .fi-sc-component > .fi-wi-stats-overview-stat {
  background: linear-gradient(135deg, #139b92 0%, #22e56b 100%);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-section-content-ctn > .fi-sc > :nth-child(4n) > .fi-sc-component > .fi-wi-stats-overview-stat {
  background: linear-gradient(135deg, #ffcd28 0%, #f7762d 100%);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-content {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 0.12rem;
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-label-ctn {
  display: contents;
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-label {
  display: block;
  grid-row: 2;
  min-width: 0;
  width: auto;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-value, :is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-placeholder {
  display: block;
  grid-row: 1;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: clamp(1.15rem, 1.35vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-align: right;
  text-shadow: 0 1px 2px rgb(15 23 42 / 12%);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
  position: absolute;
  left: 1.35rem;
  right: auto;
  inset-inline-start: auto;
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  color: #fff;
  transform: translateY(-50%);
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-description {
  grid-row: 3;
  min-width: 0;
  color: rgb(255 255 255 / 88%);
  font-size: 0.76rem;
  text-align: right;
}
:is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-description .fi-icon {
  color: #fff;
}
@media (max-width: 40rem) {
  :is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat {
    min-height: 6.25rem;
    padding-left: 4rem;
    padding-right: 1.5rem;
    border-radius: 1.1rem;
  }
  :is(html:not([data-fastpanel-ui-widget]) .fi-wi-stats-overview, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    left: 1.1rem;
    right: auto;
    width: 1.65rem;
    height: 1.65rem;
  }
}
:is(html:not([data-fastpanel-ui-widget]) .native-dashboard-reference-stats, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-content {
  grid-template-rows: minmax(0, 1fr) auto;
}
:is(html:not([data-fastpanel-ui-widget]) .native-dashboard-reference-stats, html[data-fastpanel-ui-widget] .native-dashboard-reference-stats) .fi-wi-stats-overview-stat-description {
  display: none;
}
html .fi-wi-stats-overview .fi-wi-stats-overview-stat.native-dashboard-version-stat {
  min-height: 7.5rem;
  padding: 0.75rem 1rem;
}
html .fi-wi-stats-overview .native-dashboard-version-stat .fi-wi-stats-overview-stat-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
}
html .fi-wi-stats-overview .native-dashboard-version-stat .fi-wi-stats-overview-stat-label-ctn {
  display: none;
}
html .fi-wi-stats-overview .native-dashboard-version-stat .fi-wi-stats-overview-stat-value {
  align-self: center;
  width: 100%;
  margin: 0;
}
html .fi-wi-stats-overview .native-dashboard-version-stat .native-dashboard-version-summary {
  display: grid;
  align-content: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}
html .fi-wi-stats-overview .native-dashboard-version-stat .native-dashboard-version-summary__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 0.65rem;
  background: rgb(255 255 255 / 11%);
}
html .fi-wi-stats-overview .native-dashboard-version-stat .native-dashboard-version-summary__label {
  min-width: 0;
  color: rgb(255 255 255 / 88%);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}
html .fi-wi-stats-overview .native-dashboard-version-stat .native-dashboard-version-summary__value {
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 40rem) {
  html .fi-wi-stats-overview .native-dashboard-version-stat .native-dashboard-version-summary__label {
    font-size: 0.9rem;
  }
  html .fi-wi-stats-overview .native-dashboard-version-stat .native-dashboard-version-summary__value {
    font-size: 1.15rem;
  }
}
html .fi-wi-stats-overview .fi-wi-stats-overview-stat.native-dashboard-single-stat {
  position: relative;
  display: grid;
  direction: rtl;
  grid-template-areas: "label icon" "value chart";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(1.4rem, auto) minmax(1.4rem, 1fr);
  align-items: start;
  gap: 0.65rem 0.75rem;
  min-width: 0;
  min-height: 7.25rem;
  overflow: hidden;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #647ce8 0%, #744fa6 100%);
  filter: none;
  box-shadow: 0 0.55rem 1.2rem rgb(15 23 42 / 17%);
  isolation: isolate;
}
html.dark .fi-wi-stats-overview .fi-wi-stats-overview-stat.native-dashboard-single-stat {
  background: linear-gradient(135deg, #647ce8 0%, #744fa6 100%);
}
html .fi-wi-stats-overview .fi-wi-stats-overview-stat.native-dashboard-single-stat::before, html .fi-wi-stats-overview .fi-wi-stats-overview-stat.native-dashboard-single-stat::after {
  content: none;
  display: none;
}
html .fi-wi-stats-overview .fi-section-content-ctn > .fi-sc > :nth-child(4n + 1) > .fi-sc-component > .native-dashboard-single-stat {
  background: linear-gradient(135deg, #ff4b2e 0%, #df177e 100%);
}
html .fi-wi-stats-overview .fi-section-content-ctn > .fi-sc > :nth-child(4n + 2) > .fi-sc-component > .native-dashboard-single-stat {
  background: linear-gradient(135deg, #647ce8 0%, #744fa6 100%);
}
html .fi-wi-stats-overview .fi-section-content-ctn > .fi-sc > :nth-child(4n + 3) > .fi-sc-component > .native-dashboard-single-stat {
  background: linear-gradient(135deg, #139b92 0%, #22e56b 100%);
}
html .fi-wi-stats-overview .fi-section-content-ctn > .fi-sc > :nth-child(4n) > .fi-sc-component > .native-dashboard-single-stat {
  background: linear-gradient(135deg, #ffcd28 0%, #f7762d 100%);
}
html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-content, html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-label-ctn {
  display: contents;
}
html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-label {
  display: block;
  grid-area: label;
  justify-self: start;
  align-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html .fi-wi-stats-overview .native-dashboard-single-stat :is(.fi-wi-stats-overview-stat-value, .fi-wi-stats-overview-stat-placeholder) {
  display: block;
  grid-area: value;
  justify-self: start;
  align-self: end;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-align: start;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgb(15 23 42 / 12%);
  white-space: nowrap;
}
html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
  display: block;
  grid-area: icon;
  position: static;
  inset: auto;
  transform: none;
  justify-self: end;
  align-self: start;
  width: 1.65rem;
  height: 1.65rem;
  color: #fff;
}
html .fi-wi-stats-overview .native-dashboard-single-stat .native-dashboard-single-stat-chart-slot {
  grid-area: chart;
  justify-self: end;
  align-self: end;
  width: 100%;
  max-width: 7rem;
  height: 2rem;
  min-width: 0;
}
html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-chart {
  width: 100%;
  height: 100%;
}
@media (max-width: 40rem) {
  html .fi-wi-stats-overview .fi-wi-stats-overview-stat.native-dashboard-single-stat {
    min-height: 6.75rem;
    gap: 0.45rem 0.6rem;
    padding: 0.8rem 0.85rem;
    border-radius: 0.9rem;
  }
  html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-label {
    font-size: 0.86rem;
  }
  html .fi-wi-stats-overview .native-dashboard-single-stat :is(.fi-wi-stats-overview-stat-value, .fi-wi-stats-overview-stat-placeholder) {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
  }
  html .fi-wi-stats-overview .native-dashboard-single-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    width: 1.45rem;
    height: 1.45rem;
  }
}
textarea.native-manual-credential-input {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid #94a3b8;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 7%), 0 2px 5px rgb(15 23 42 / 8%);
  color: #0f172a;
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.75;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea.native-manual-credential-input::placeholder {
  color: #64748b;
  opacity: 1;
}
textarea.native-manual-credential-input--username::placeholder {
  direction: ltr;
  text-align: left;
}
textarea.native-manual-credential-input--password:placeholder-shown {
  direction: ltr;
  text-align: left;
}
textarea.native-manual-credential-input:focus-visible {
  border-color: #2563eb;
  outline: 0;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 18%), 0 3px 9px rgb(15 23 42 / 13%);
}
html.dark textarea.native-manual-credential-input {
  border-color: #64748b;
  background: linear-gradient(180deg, #1e293b 0%, #111827 100%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 28%), 0 2px 7px rgb(0 0 0 / 28%);
  color: #f8fafc;
}
html.dark textarea.native-manual-credential-input::placeholder {
  color: #cbd5e1;
}
html.dark textarea.native-manual-credential-input:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgb(96 165 250 / 22%), 0 3px 10px rgb(0 0 0 / 32%);
}
.native-switch {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .25rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.native-switch:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 3px;
}
.native-switch:disabled {
  cursor: wait;
  opacity: .65;
}
.native-switch__rail {
  position: relative;
  display: block;
  flex: none;
  width: 58px;
  height: 32px;
  border-radius: 999px;
  background: #9ca3af;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 18%);
  transition: background-color 180ms ease;
}
.native-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
  transform: translateX(0);
  transition: transform 180ms ease;
}
.native-switch[aria-checked="true"] .native-switch__rail {
  background: #16a34a;
}
.native-switch[aria-checked="true"] .native-switch__thumb {
  transform: translateX(26px);
}
.native-switch[aria-checked="true"] .native-switch__state {
  color: #15803d;
}
.dark .native-switch[aria-checked="true"] .native-switch__state {
  color: #4ade80;
}
@media (prefers-reduced-motion:reduce) {
  .native-switch__rail,.native-switch__thumb {
    transition: none;
  }
}
.native-order-result-progress {
  width: 100%;
  min-width: 0;
}
.native-order-result-progress-track {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: 2.75rem;
  overflow: hidden;
  border: 1px solid #86efac;
  border-radius: .85rem;
  background: #dcfce7;
  box-shadow: inset 0 1px 3px rgb(20 83 45 / 8%);
}
.native-order-result-progress-fill {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 0;
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(110deg, #86efac, #4ade80);
  transition: width 650ms ease;
}
.native-order-result-progress-fill::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 35%) 50%, transparent 80%);
  content: '';
  transform: translateX(-100%);
  animation: native-order-progress-shine 2.1s linear infinite;
}
.native-order-result-progress-fill.is-indeterminate {
  animation: native-order-progress-wait 2.2s ease-in-out infinite alternate;
}
.native-order-result-progress-label {
  padding: .6rem .85rem;
  color: #14532d;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.65;
  text-align: center;
  overflow-wrap: anywhere;
}
.native-order-result-progress.is-complete .native-order-result-progress-fill {
  background: linear-gradient(110deg, #15803d, #16a34a);
}
.native-order-result-progress.is-complete .native-order-result-progress-label {
  color: #fff;
}
.native-order-result-progress.is-failed .native-order-result-progress-track {
  border-color: #fda4af;
  background: #fff1f2;
}
.native-order-result-progress.is-failed .native-order-result-progress-label {
  color: #9f1239;
}
.native-order-result-progress-fill.is-failed {
  background: #fda4af;
}
.dark .native-order-result-progress-track {
  border-color: #166534;
  background: #052e16;
}
.dark .native-order-result-progress-fill {
  background: linear-gradient(110deg, #166534, #15803d);
}
.dark .native-order-result-progress-label {
  color: #dcfce7;
}
.dark .native-order-result-progress.is-failed .native-order-result-progress-track {
  border-color: #9f1239;
  background: #4c0519;
}
.dark .native-order-result-progress.is-failed .native-order-result-progress-label {
  color: #ffe4e6;
}
@keyframes native-order-progress-shine {
  to {
    transform: translateX(100%);
  }
}
@keyframes native-order-progress-wait {
  from {
    inset-inline-start: 0;
  }
  to {
    inset-inline-start: 66%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .native-order-result-progress-fill, .native-order-result-progress-fill::after {
    animation: none;
    transition: none;
  }
}
.native-dashboard-summary-card > .fi-section {
  border: 1px solid #cbd5e1;
  border-radius: 1.1rem;
  background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 14px 30px rgb(15 23 42 / 13%), 0 3px 7px rgb(15 23 42 / 7%);
}
html.dark .native-dashboard-summary-card > .fi-section {
  border-color: #475569;
  background: linear-gradient(145deg, #1e293b 0%, #111827 100%);
  box-shadow: 0 16px 34px rgb(0 0 0 / 36%), 0 3px 8px rgb(0 0 0 / 24%);
}
html[data-fastpanel-ui-palette] .native-dashboard-summary-card > .fi-section {
  border-color: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--native-ui-border) 68%, transparent);
  }
  background: var(--native-ui-surface);
  box-shadow: 0 14px 30px var(--native-ui-border), var(--native-ui-shadow);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--native-ui-border) 17%, transparent), var(--native-ui-shadow);
  }
}
html.dark[data-fastpanel-ui-palette] .native-dashboard-summary-card > .fi-section {
  border-color: var(--native-ui-border);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--native-ui-border) 78%, #0f172a);
  }
  box-shadow: 0 16px 34px rgb(0 0 0 / 35%), var(--native-ui-shadow);
}
:is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat {
  min-height: 6.25rem;
  border-radius: 0.95rem;
}
@media (max-width: 40rem) {
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section > .fi-section-header {
    padding: 0.8rem 1rem 0.1rem;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-section-content-ctn > .fi-sc {
    gap: 0.65rem;
    padding: 0.8rem 0.85rem 1rem;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat {
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
    overflow: visible;
    padding: 0.66rem 0.7rem;
    border-radius: 0.8rem;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    align-items: start;
    gap: 0.22rem;
    min-width: 0;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    font-size: 0.78rem;
    line-height: 1.42;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-value, html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-placeholder {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    font-size: 0.88rem;
    line-height: 1.32;
    letter-spacing: 0;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-description {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.1rem;
    overflow: visible;
    font-size: 0.68rem;
    line-height: 1.48;
    text-align: right;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-description > span {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  html body :is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    display: none;
  }
}
.fi-modal.fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window {
  margin-inline: 0;
}
:is(.native-director-consumption-summary, .native-director-income-summary) > .fi-section .fi-wi-stats-overview-stat-description {
  display: none !important;
}
.fi-sc-tabs [role="tab"][data-native-tab-pending] {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.fi-sc-tabs[aria-busy="true"] {
  cursor: progress;
}
.fi-sc-tabs [role="tab"], .native-mobile-footer__item {
  touch-action: manipulation;
}
.fi-ta.native-nearest-expirations .fi-ta-content-ctn .fi-ta-table {
  width: max-content;
  min-width: 0;
}
.fi-ta.native-nearest-expirations .fi-ta-table th, .fi-ta.native-nearest-expirations .fi-ta-table td {
  width: auto;
  white-space: nowrap;
}
.native-nearest-expirations .native-expiry-identity .fi-ta-col {
  max-width: 12rem;
  white-space: normal;
}
.native-nearest-expirations .native-expiry-identity .fi-ta-text {
  white-space: normal;
  overflow-wrap: anywhere;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-divide-x-reverse: 0;
      --tw-content: "";
      --tw-space-x-reverse: 0;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}