/*
 * najm-kit v4 theme entry. Consumers use:
 *
 *   @import "tailwindcss";
 *   @import "najm-kit/theme.css";
 *
 * This file is the source of truth; the build copies it to dist/theme.css and
 * appends the third-party (overlayscrollbars, phone) CSS so consumers get a
 * single self-contained import. The `@source` below resolves relative to this
 * file's location, so the consumer's Tailwind v4 build scans najm-kit's
 * compiled components in dist (or the source dir when aliased in dev) for the
 * utility classes they use.
 *
 * Token names follow the standard shadcn convention (no package prefix) so
 * apps can theme najm-kit by pasting a shadcn / tweakcn theme block on top.
 */
@import "tw-animate-css";

@source "./";

@custom-variant dark (&:where(.dark, .dark *));

/* Classes built dynamically at runtime (borders.ts, BaseInput.tsx, responsive
   helpers) never appear as literals the scanner can find, so safelist them. */
@source inline("{sm,md,lg}:{hidden,flex}");
@source inline("{sm,md,lg,xl,2xl}:table-cell");
@source inline("border-{black,white}");
@source inline("border-{gray,slate,zinc,neutral,stone,red,orange,amber,yellow,green,teal,blue,indigo,purple}{,-600}");
@source inline("najm-border najm-border-t najm-border-r najm-border-b najm-border-l najm-border-s najm-border-e");

/* NGrid / NGridItem build column and span classes dynamically. */
@source inline("grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
@source inline("{sm,md,lg,xl}:grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
@source inline("col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
@source inline("{sm,md,lg,xl}:col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");

/* Map Tailwind's color theme to the runtime --* tokens. `inline` lets color
   utilities resolve the semantic token at the themed element. Radius tokens
   intentionally live in the non-inline block below so rounded-* utilities
   keep referencing --radius-* and can be changed at runtime by
   NajmThemeProvider's radius setting. */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-tertiary: var(--tertiary);
  --color-tertiary-foreground: var(--tertiary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-neutral: var(--neutral);
  --color-neutral-foreground: var(--neutral-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --animate-indeterminate-progress: indeterminate-progress 2s ease-in-out infinite;
}

@theme {
  --radius-xs: calc(var(--radius) - 4px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
}

@keyframes indeterminate-progress {
  0% { transform: translateX(-100%); width: 40%; }
  50% { transform: translateX(100%); width: 60%; }
  100% { transform: translateX(200%); width: 40%; }
}

/* Typography variables emitted by NajmDesignProvider. */
[data-najm-design-vars] {
  font-family: var(--font-sans, ui-sans-serif), ui-sans-serif, system-ui, sans-serif;
  font-size: var(--font-size-base, 14px);
  line-height: var(--line-height-base, 1.5);
  letter-spacing: var(--letter-spacing-base, 0);
  --text-xs: calc(var(--font-size-base, 14px) * 0.857142857 * var(--font-scale, 1));
  --text-xs--line-height: var(--line-height-base, 1.5);
  --text-sm: calc(var(--font-size-base, 14px) * var(--font-scale, 1));
  --text-sm--line-height: var(--line-height-base, 1.5);
  --text-base: calc(var(--font-size-base, 14px) * 1.142857143 * var(--font-scale, 1));
  --text-base--line-height: var(--line-height-base, 1.5);
  --text-lg: calc(var(--font-size-base, 14px) * 1.285714286 * var(--font-scale, 1));
  --text-lg--line-height: var(--line-height-base, 1.5);
  --text-xl: calc(var(--font-size-base, 14px) * 1.428571429 * var(--font-scale, 1));
  --text-xl--line-height: var(--line-height-base, 1.5);
}

[data-najm-design-vars] :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  [data-slot="card-title"],
  [data-slot="dialog-title"],
  [data-slot="sheet-title"]
) {
  font-family: var(--font-heading, var(--font-sans, ui-sans-serif)), var(--font-sans, ui-sans-serif), ui-sans-serif, system-ui, sans-serif;
}

[data-najm-design-vars] :where(code, kbd, pre, samp) {
  font-family: var(--font-mono, ui-monospace), ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Default token values (oklch). Override globally via :root / .dark, or per
   subtree via <NajmThemeProvider>. */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1445 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1445 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.1445 0 0);
  --primary: oklch(0.2228 0.0043 286.044);
  --primary-foreground: oklch(0.9848 0 0);
  --secondary: oklch(0.9703 0 0);
  --secondary-foreground: oklch(0.2044 0 0);
  --tertiary: oklch(0.9676 0.007 247.897);
  --tertiary-foreground: oklch(0.3138 0.0453 249.447);
  --muted: oklch(0.9703 0 0);
  --muted-foreground: oklch(0.5555 0 0);
  --accent: oklch(0.2747 0.006 286.001);
  --accent-foreground: oklch(0.9848 0 0);
  --neutral: oklch(0.556 0 0);
  --neutral-foreground: oklch(0.9848 0 0);
  --info: oklch(0.6231 0.1679 254.149);
  --info-foreground: oklch(0.9848 0 0);
  --success: oklch(0.696 0.17 162.48);
  --success-foreground: oklch(0.1445 0 0);
  --warning: oklch(0.769 0.188 70.08);
  --warning-foreground: oklch(0.1445 0 0);
  --destructive: oklch(0.6368 0.2078 25.326);
  --destructive-foreground: oklch(0.9848 0 0);
  --border: oklch(0.9219 0 0);
  --input: oklch(0.9219 0 0);
  --ring: oklch(0.2228 0.0043 286.044);

  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.1445 0 0);
  --sidebar-primary: oklch(0.2228 0.0043 286.044);
  --sidebar-primary-foreground: oklch(0.9848 0 0);
  --sidebar-accent: oklch(0.9703 0 0);
  --sidebar-accent-foreground: oklch(0.2044 0 0);
  --sidebar-border: oklch(0.9219 0 0);
  --sidebar-ring: oklch(0.2228 0.0043 286.044);

  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  --radius: 0.5rem;
  --border-width: 1px;
}

.dark {
  --background: oklch(0.1417 0.0044 285.819);
  --foreground: oklch(0.9683 0.0014 286.375);
  --card: oklch(0.1872 0.0066 285.748);
  --card-foreground: oklch(0.9683 0.0014 286.375);
  --popover: oklch(0.1872 0.0066 285.748);
  --popover-foreground: oklch(0.9683 0.0014 286.375);
  --primary: oklch(0.2228 0.0043 286.044);
  --primary-foreground: oklch(0.9848 0 0);
  --secondary: oklch(0.2313 0.007 285.839);
  --secondary-foreground: oklch(0.9203 0.0034 286.332);
  --tertiary: oklch(0.3138 0.0453 249.447);
  --tertiary-foreground: oklch(0.8529 0.0324 248.208);
  --muted: oklch(0.2313 0.007 285.839);
  --muted-foreground: oklch(0.6255 0.0171 285.896);
  --accent: oklch(0.2313 0.007 285.839);
  --accent-foreground: oklch(0.9683 0.0014 286.375);
  --neutral: oklch(0.7155 0 0);
  --neutral-foreground: oklch(0.1445 0 0);
  --info: oklch(0.6231 0.1679 254.149);
  --info-foreground: oklch(0.9683 0.0014 286.375);
  --success: oklch(0.696 0.17 162.48);
  --success-foreground: oklch(0.1445 0 0);
  --warning: oklch(0.769 0.188 70.08);
  --warning-foreground: oklch(0.1445 0 0);
  --destructive: oklch(0.6356 0.2082 25.378);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.262 0.0085 285.799);
  --input: oklch(0.262 0.0085 285.799);
  --ring: oklch(0.2228 0.0043 286.044);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.9683 0.0014 286.375);
  --sidebar-primary: oklch(0.4865 0.2423 291.866);
  --sidebar-primary-foreground: oklch(0.9848 0 0);
  --sidebar-accent: oklch(0.2313 0.007 285.839);
  --sidebar-accent-foreground: oklch(0.9683 0.0014 286.375);
  --sidebar-border: oklch(0.262 0.0085 285.799);
  --sidebar-ring: oklch(0.4865 0.2423 291.866);

  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);

  --radius: 0.5rem;
}

/* Browsers paint saved credentials with their own light autofill surface.
   Keep it aligned with Najm's card-backed inputs; BaseInput owns the visible
   radius, so flatten the nested native input to avoid a second inner outline. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:autofill {
  -webkit-text-fill-color: var(--foreground);
  caret-color: var(--foreground);
  border-radius: 0;
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset;
  box-shadow: 0 0 0 1000px var(--card) inset;
}

.najm-border {
  border-style: solid;
  border-width: var(--border-width);
}

.najm-border-t {
  border-top-style: solid;
  border-top-width: var(--border-width);
}

.najm-border-r {
  border-right-style: solid;
  border-right-width: var(--border-width);
}

.najm-border-b {
  border-bottom-style: solid;
  border-bottom-width: var(--border-width);
}

.najm-border-l {
  border-left-style: solid;
  border-left-width: var(--border-width);
}

.najm-border-s {
  border-inline-start-style: solid;
  border-inline-start-width: var(--border-width);
}

.najm-border-e {
  border-inline-end-style: solid;
  border-inline-end-width: var(--border-width);
}

[data-radix-popper-content-wrapper] {
  z-index: 10000 !important;
}

/* Scrollable, but the scrollbar reserves no layout space (hidden in all
   browsers). `overflow: overlay` was removed from Chrome (~v121) and now
   behaves like `auto`, so hiding the bar is the only pure-CSS way to avoid
   the reserved gutter. Scroll via wheel / trackpad / keyboard. */
.najm-overlay-scroll {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}
.najm-overlay-scroll::-webkit-scrollbar {
  display: none; /* Chromium / Safari */
}
.najm-overlay-scroll-y {
  overflow-y: auto;
  scrollbar-width: none;
}
.najm-overlay-scroll-y::-webkit-scrollbar {
  display: none;
}
.najm-overlay-scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
}
.najm-overlay-scroll-x::-webkit-scrollbar {
  display: none;
}

/* Responsive table actions stay discoverable on touch and tablet layouts.
   Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
.ntable-card-action {
  opacity: 1;
}

@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .ntable-card-action {
    opacity: 0;
  }

  .group:hover > .ntable-card-action,
  .group:focus-within > .ntable-card-action,
  .ntable-card-action:focus,
  .ntable-card-action:focus-within {
    opacity: 1;
  }
}

/* ImageInput controls (clear button and replace overlay) stay visible on touch
   and coarse-pointer devices. Only on fine-pointer desktops do they fall back to
   a hover/focus reveal. Keyboard focus always restores visibility. The rule
   below ships in dist/theme.css via scripts/build-css.mjs so the JSX only needs
   to reference the static class names. */
.nimage-input-control {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .nimage-input-control {
    opacity: 0;
  }

  .group\/image:hover .nimage-input-control,
  .group\/image:focus-within .nimage-input-control,
  .nimage-input-control:focus,
  .nimage-input-control:focus-visible {
    opacity: 1;
  }
}

.nimage-input-compact-overlay {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .nimage-input-compact-overlay {
    opacity: 0;
  }

  .group\/image:hover .nimage-input-compact-overlay,
  .group\/image:focus-within .nimage-input-compact-overlay,
  .nimage-input-compact-overlay:focus,
  .nimage-input-compact-overlay:focus-visible {
    opacity: 1;
  }
}

/* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
   translucent slate bar that floats over content with no reserved space.
   Keep this selector more specific than OverlayScrollbars' appended
   `.os-scrollbar` variable reset in dist/theme.css. */
.os-scrollbar.os-theme-najm {
  z-index: 20;
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-track-bg: transparent;
  --os-track-border-radius: 9999px;
  --os-handle-border-radius: 9999px;
  --os-handle-bg: rgba(100, 116, 139, 0.22);
  --os-handle-bg-hover: rgba(100, 116, 139, 0.5);
  --os-handle-bg-active: rgba(71, 85, 105, 0.62);
  --os-handle-min-size: 33px;
  --os-handle-perpendicular-size: 4px;
  --os-handle-perpendicular-size-hover: 6px;
  --os-handle-perpendicular-size-active: 6px;
}

.os-scrollbar.os-theme-najm:hover .os-scrollbar-handle {
  background: var(--os-handle-bg-hover);
}

/* Darker, more subtle handle in dark mode */
.dark .os-scrollbar.os-theme-najm {
  --os-handle-bg: rgba(113, 113, 122, 0.36);
  --os-handle-bg-hover: rgba(161, 161, 170, 0.62);
  --os-handle-bg-active: rgba(212, 212, 216, 0.72);
}

/* Leaflet's structural CSS is imported by the optional adapter entrypoint.
   These rules only connect its visual treatment to Najm theme tokens. */
.nlocation-leaflet.leaflet-container {
  background: var(--muted);
  font: inherit;
}
.nlocation-leaflet .leaflet-control-attribution {
  margin: 0;
  padding: 2px 5px;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  color: var(--muted-foreground);
  font-size: 10px;
  line-height: 1.3;
}
.nlocation-leaflet .leaflet-control-attribution a { color: var(--foreground); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .nlocation-dialog *,
  .nlocation-leaflet * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* overlayscrollbars */
/*! 
 * OverlayScrollbars
 * Version: 2.16.0
 * 
 * Copyright (c) Rene Haas | KingSora.
 * https://github.com/KingSora
 * 
 * Released under the MIT license.
 */
.os-size-observer,
.os-size-observer-listener {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}

.os-size-observer,
.os-size-observer-listener,
.os-size-observer-listener-item,
.os-size-observer-listener-item-final {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}

.os-size-observer {
  z-index: -1;
  contain: strict;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: inherit;
  border: inherit;
  box-sizing: inherit;
  margin: -133px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0.1);
}
.os-size-observer::before {
  content: "";
  flex: none;
  box-sizing: inherit;
  padding: 10px;
  width: 10px;
  height: 10px;
}

.os-size-observer-appear {
  animation: os-size-observer-appear-animation 1ms forwards;
}

.os-size-observer-listener {
  box-sizing: border-box;
  position: relative;
  flex: auto;
  padding: inherit;
  border: inherit;
  margin: -133px;
  transform: scale(calc(1 / 0.1));
}
.os-size-observer-listener.ltr {
  margin-right: -266px;
  margin-left: 0;
}
.os-size-observer-listener.rtl {
  margin-left: -266px;
  margin-right: 0;
}
.os-size-observer-listener:empty::before {
  content: "";
  width: 100%;
  height: 100%;
}
.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
  display: block;
  position: relative;
  padding: inherit;
  border: inherit;
  box-sizing: content-box;
  flex: auto;
}

.os-size-observer-listener-scroll {
  box-sizing: border-box;
  display: flex;
}

.os-size-observer-listener-item {
  right: 0;
  bottom: 0;
  overflow: hidden;
  direction: ltr;
  flex: none;
}

.os-size-observer-listener-item-final {
  transition: none;
}

@keyframes os-size-observer-appear-animation {
  from {
    cursor: auto;
  }
  to {
    cursor: none;
  }
}
.os-trinsic-observer {
  flex: none;
  box-sizing: border-box;
  position: relative;
  max-width: 0px;
  max-height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
  height: 0;
  top: calc(100% + 1px);
  contain: strict;
}
.os-trinsic-observer:not(:empty) {
  height: calc(100% + 1px);
  top: -1px;
}
.os-trinsic-observer:not(:empty) > .os-size-observer {
  width: 1000%;
  height: 1000%;
  min-height: 1px;
  min-width: 1px;
}

/**
 * hide native scrollbars
 * changes to this styles need to be reflected in the environment styles to correctly detect scrollbar hiding
 */
/**
 * body element
 */
html[data-overlayscrollbars-body] {
  overflow: hidden;
}

html[data-overlayscrollbars-body],
html[data-overlayscrollbars-body] > body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html[data-overlayscrollbars-body] > body {
  overflow: visible;
  margin: 0;
}

/**
 * structure setup 
 */
[data-overlayscrollbars] {
  position: relative;
}

[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  display: flex;
  align-items: stretch !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  scroll-behavior: auto !important;
}

[data-overlayscrollbars-padding],
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  box-sizing: inherit;
  position: relative;
  flex: auto;
  height: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 0;
}

[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  --os-vaw: 0;
  --os-vah: 0;
  outline: none;
}
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus {
  outline: none;
}
[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  min-width: 1px;
  min-height: 1px;
  width: var(--os-vaw);
  height: var(--os-vah);
}

/**
 * wrapper elements overflow:
 */
[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  overflow: hidden !important;
}

[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],
[data-overlayscrollbars-padding~=noClipping] {
  overflow: visible !important;
}

/**
 * viewport overflow:
 */
[data-overlayscrollbars-viewport] {
  --os-viewport-overflow-x: hidden;
  --os-viewport-overflow-y: hidden;
  overflow-x: var(--os-viewport-overflow-x);
  overflow-y: var(--os-viewport-overflow-y);
}

[data-overlayscrollbars-viewport~=overflowXVisible] {
  --os-viewport-overflow-x: visible;
}

[data-overlayscrollbars-viewport~=overflowXHidden] {
  --os-viewport-overflow-x: hidden;
}

[data-overlayscrollbars-viewport~=overflowXScroll] {
  --os-viewport-overflow-x: scroll;
}

[data-overlayscrollbars-viewport~=overflowYVisible] {
  --os-viewport-overflow-y: visible;
}

[data-overlayscrollbars-viewport~=overflowYHidden] {
  --os-viewport-overflow-y: hidden;
}

[data-overlayscrollbars-viewport~=overflowYScroll] {
  --os-viewport-overflow-y: scroll;
}

[data-overlayscrollbars-viewport~=overflowImportant] {
  overflow-x: var(--os-viewport-overflow-x) !important;
  overflow-y: var(--os-viewport-overflow-y) !important;
}

/**
 * viewport state modifiers:
 */
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) {
  font-size: 0 !important;
  line-height: 0 !important;
}

[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) > *:not(#osFakeId) {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

[data-overlayscrollbars-viewport~=measuring],
[data-overlayscrollbars-viewport~=scrolling] {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible] {
  overflow-x: hidden !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible] {
  overflow-y: hidden !important;
}

/**
 * content element:
 */
[data-overlayscrollbars-content] {
  box-sizing: inherit;
}

/**
 * Display contents to bridge any flickering during deferred initialization.
 */
[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
  display: contents;
}

/**
 * optional & experimental grid mode
 */
[data-overlayscrollbars-grid],
[data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
  display: grid;
  grid-template: 1fr/1fr;
}

[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
  height: auto !important;
  width: auto !important;
}

@property --os-scroll-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --os-viewport-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.os-scrollbar {
  --os-viewport-percent: 0;
  --os-scroll-percent: 0;
  --os-scroll-direction: 0;
  --os-scroll-percent-directional: calc(
    var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *
      var(--os-scroll-direction)
  );
}

.os-scrollbar {
  contain: size layout;
  contain: size layout style;
  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

body > .os-scrollbar {
  position: fixed;
  z-index: 99999;
}

.os-scrollbar-transitionless {
  transition: none !important;
}

.os-scrollbar-track {
  position: relative;
  padding: 0 !important;
  border: none !important;
}

.os-scrollbar-handle {
  position: absolute;
}

.os-scrollbar-track,
.os-scrollbar-handle {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
  pointer-events: auto;
  touch-action: none;
}

.os-scrollbar-horizontal {
  bottom: 0;
  left: 0;
}

.os-scrollbar-vertical {
  top: 0;
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-horizontal {
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-vertical {
  right: auto;
  left: 0;
}

.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden {
  opacity: 0;
  visibility: hidden;
}

.os-scrollbar-interaction.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-unusable,
.os-scrollbar-unusable *,
.os-scrollbar-wheel,
.os-scrollbar-wheel * {
  pointer-events: none !important;
}

.os-scrollbar-unusable .os-scrollbar-handle {
  opacity: 0 !important;
  transition: none !important;
}

.os-scrollbar-horizontal .os-scrollbar-handle {
  bottom: 0;
  left: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateX(calc(var(--os-scroll-percent-directional) * -100%));
  width: calc(var(--os-viewport-percent) * 100%);
}

.os-scrollbar-vertical .os-scrollbar-handle {
  right: 0;
  top: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateY(calc(var(--os-scroll-percent-directional) * -100%));
  height: calc(var(--os-viewport-percent) * 100%);
}

@supports (container-type: size) {
  .os-scrollbar-track {
    container-type: size;
  }
  .os-scrollbar-horizontal .os-scrollbar-handle {
    left: auto;
    transform: translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-vertical .os-scrollbar-handle {
    top: auto;
    transform: translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle {
    right: auto;
    left: 0;
  }
}
.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
  right: auto;
  left: 0;
}

.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
  left: 0;
  right: 0;
}

.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
  top: 0;
  bottom: 0;
}

@media print {
  .os-scrollbar {
    display: none;
  }
}
.os-scrollbar {
  --os-size: 0;
  --os-padding-perpendicular: 0;
  --os-padding-axis: 0;
  --os-track-border-radius: 0;
  --os-track-bg: none;
  --os-track-bg-hover: none;
  --os-track-bg-active: none;
  --os-track-border: none;
  --os-track-border-hover: none;
  --os-track-border-active: none;
  --os-handle-border-radius: 0;
  --os-handle-bg: none;
  --os-handle-bg-hover: none;
  --os-handle-bg-active: none;
  --os-handle-border: none;
  --os-handle-border-hover: none;
  --os-handle-border-active: none;
  --os-handle-min-size: 33px;
  --os-handle-max-size: none;
  --os-handle-perpendicular-size: 100%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  --os-handle-interactive-area-offset: 0;
}

.os-scrollbar-track {
  border: var(--os-track-border);
  border-radius: var(--os-track-border-radius);
  background: var(--os-track-bg);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}
.os-scrollbar-track:hover {
  border: var(--os-track-border-hover);
  background: var(--os-track-bg-hover);
}
.os-scrollbar-track:active {
  border: var(--os-track-border-active);
  background: var(--os-track-bg-active);
}

.os-scrollbar-handle {
  border: var(--os-handle-border);
  border-radius: var(--os-handle-border-radius);
  background: var(--os-handle-bg);
}
.os-scrollbar-handle:hover {
  border: var(--os-handle-border-hover);
  background: var(--os-handle-bg-hover);
}
.os-scrollbar-handle:active {
  border: var(--os-handle-border-active);
  background: var(--os-handle-bg-active);
}

.os-scrollbar-track:before,
.os-scrollbar-handle:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
}

.os-scrollbar-horizontal {
  padding: var(--os-padding-perpendicular) var(--os-padding-axis);
  right: var(--os-size);
  height: var(--os-size);
}
.os-scrollbar-horizontal.os-scrollbar-rtl {
  left: var(--os-size);
  right: 0;
}
.os-scrollbar-horizontal .os-scrollbar-track:before {
  top: calc(var(--os-padding-perpendicular) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal .os-scrollbar-handle {
  min-width: var(--os-handle-min-size);
  max-width: var(--os-handle-max-size);
  height: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
}
.os-scrollbar-horizontal .os-scrollbar-handle:before {
  top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal:hover .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-horizontal:active .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-active);
}

.os-scrollbar-vertical {
  padding: var(--os-padding-axis) var(--os-padding-perpendicular);
  bottom: var(--os-size);
  width: var(--os-size);
}
.os-scrollbar-vertical .os-scrollbar-track:before {
  left: calc(var(--os-padding-perpendicular) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical .os-scrollbar-handle {
  min-height: var(--os-handle-min-size);
  max-height: var(--os-handle-max-size);
  width: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
}
.os-scrollbar-vertical .os-scrollbar-handle:before {
  left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
  right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  left: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical:hover .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-vertical:active .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-active);
}

/* NONE THEME: */
[data-overlayscrollbars-viewport~=measuring] > .os-scrollbar,
.os-theme-none.os-scrollbar {
  display: none !important;
}

/* DARK & LIGHT THEME: */
.os-theme-dark,
.os-theme-light {
  box-sizing: border-box;
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-track-border-radius: 10px;
  --os-handle-interactive-area-offset: 4px;
  --os-handle-border-radius: 10px;
}

.os-theme-dark {
  --os-handle-bg: rgba(0, 0, 0, 0.44);
  --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
  --os-handle-bg-active: rgba(0, 0, 0, 0.66);
}

.os-theme-light {
  --os-handle-bg: rgba(255, 255, 255, 0.44);
  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),
[data-overlayscrollbars-viewport~=scrollbarHidden],
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body {
  scrollbar-width: none !important;
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,
[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar,
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar-corner {
  -webkit-appearance: none !important;
          appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) {
  overflow: auto;
}

/* react-international-phone */
.react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}