/* Optional hooks for V2Input (e.g. .v2-input-suggestions is styled in JSX via Tailwind). */

/*
 * @tailwindcss/forms applies a default focus ring (box-shadow, often reads as a blue inner edge).
 * V2Input uses the outer shell’s focus-within border (#5500FF) only — strip inner ring/outline on inputs and textareas.
 */
.v2-input-host input:focus,
.v2-input-host input:focus-visible,
.v2-input-host textarea:focus,
.v2-input-host textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

/* Chrome/Safari autofill - override default tint with inset shadow matching the white field */
.v2-input-host input:-webkit-autofill,
.v2-input-host input:-webkit-autofill:hover,
.v2-input-host input:-webkit-autofill:focus,
.v2-input-host input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: rgb(17 24 39) !important;
  caret-color: rgb(17 24 39);
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* Softer selection than default browser blue inside the field */
.v2-input-host input::selection,
.v2-input-host textarea::selection {
  background-color: rgb(229 231 235);
  color: inherit;
}
/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}/* v2 phone field: wrap library styles to match V2Input (border, hover, focus, error). */
.v2-phone-field {
  --PhoneInput-color--focus: #5500ff;
  --PhoneInputCountrySelectArrow-color--focus: #5500ff;
  --PhoneInputCountryFlag-borderColor--focus: #5500ff;
}

.v2-phone-field .PhoneInput {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0.25rem 0.75rem;
}

.v2-phone-field--sm .PhoneInput {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}


.v2-phone-field .PhoneInput:not(.PhoneInput--disabled):not(
    .PhoneInput--readOnly
  ):not(:focus-within):hover {
  border-color: rgba(85, 0, 255, 0.5);
}

.v2-phone-field .PhoneInput:focus-within,
.v2-phone-field .PhoneInput.PhoneInput--focus {
  border-color: #5500ff;
}

.v2-phone-field.v2-phone-field--error .PhoneInput {
  border-color: #fca5a5;
}

.v2-phone-field.v2-phone-field--error .PhoneInput:focus-within,
.v2-phone-field.v2-phone-field--error .PhoneInput.PhoneInput--focus {
  border-color: #ef4444;
}

.v2-phone-field .PhoneInput--disabled {
  cursor: not-allowed;
  background-color: #f9fafb;
  opacity: 0.7;
}

.v2-phone-field .PhoneInputInput {
  border: 0;
  margin: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
}

/*
 * @tailwindcss/forms adds a default focus ring on inputs; shell uses focus-within border only.
 */
.v2-phone-field .PhoneInputInput:focus,
.v2-phone-field .PhoneInputInput:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

/* Country search is portaled; strip plugin ring — keep focus border from Tailwind on the field. */
.v2-phone-country-menu .v2-phone-country-search:focus,
.v2-phone-country-menu .v2-phone-country-search:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}

.v2-phone-field .PhoneInputInput::placeholder {
  color: #9ca3af;
}

.v2-phone-field .PhoneInputInput:disabled {
  cursor: not-allowed;
}

@keyframes v2PhoneMenuIn {
  from {
    transform: translateY(-4px) scale(0.98);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

.v2-phone-country-menu {
  transform-origin: top left;
  background-color: #ffffff;
  animation: v2PhoneMenuIn 0.15s ease-out;
}

/* react-phone-number-input country menu uses native ul/li.
 * Browser default `ul` padding + `list-style` can cause visible bullets.
 * Remove bullets/indent but keep our Tailwind-driven spacing on buttons/dividers.
 */
.v2-phone-country-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.v2-phone-country-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .v2-phone-country-menu {
    animation: none;
  }
}

/* Native search clear (“x”) — dark gray (Tailwind gray-600) */
.v2-phone-country-menu .v2-phone-country-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%234b5563' stroke-width='2' stroke-linecap='round' d='M18%206L6%2018M6%206l12%2012'/%3E%3C/svg%3E")
    center / 0.75rem 0.75rem no-repeat;
}

.v2-phone-country-menu .v2-phone-country-search::-moz-search-clear {
  appearance: none;
  -moz-appearance: none;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='%234b5563' stroke-width='2' stroke-linecap='round' d='M18%206L6%2018M6%206l12%2012'/%3E%3C/svg%3E")
    center / 0.75rem 0.75rem no-repeat;
}

/* Scroll hint: white fade at bottom of country list (paired with JS visibility). */
.v2-phone-country-scroll {
  position: relative;
  isolation: isolate;
}

.v2-phone-country-list-fade {
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.25rem;
  height: 2.75rem;
  pointer-events: none;
  z-index: 3;
  border-radius: 0 0 0.375rem 0.375rem;
  background: linear-gradient(
    to top,
    #ffffff 0%,
    rgba(255, 255, 255, 0.88) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}
/* Scoped craft.js builder styles. All node rules live under `.creation-builder`
   so they never collide with the app's global/Tailwind styles. The drag handle
   (`.node-drag-handle`) is portaled to document.body, so it stays global. */

.creation-builder {
  --cb-border: #e3e5e8;
  --cb-text: #1f2329;
  --cb-muted: #8a8f98;
  --cb-accent: #5500ff;
  --cb-accent-soft: rgba(85, 0, 255, 0.12);
  /* A card's inner content padding. Exposed as variables because more than one
     rule has to agree on them: .card-content-area applies them, and
     .assess-fullbleed negates them to break the assessment start/results
     screens out to the card's edges. Overridden per device frame and for
     preview/Document below — deriving both rules from the same value keeps the
     breakout exact instead of relying on the two being hand-mirrored. */
  --cb-card-pad-x: 56px;
  --cb-card-pad-y: 32px;
  /* Assessment surfaces — the editor block (Assessment.jsx), the preview
     deck (CardAssessmentDeck.jsx: start screen, question slider, feedback
     screen), and their shared nav-pill classes below. Kept as variables
     because these style largely inline (~40 style objects) or via the
     .assess-* classes further down, and Tailwind's `dark:` variant can't
     reach either — the Dark theme flips these instead (see
     .creation-builder.dark below). The light values here are the exact
     hexes the components hard-coded before, so light mode is unchanged.
     The accent (#5500FF) and the semantic green/red/amber aren't themed:
     they read correctly on both. */
  --cb-as-surface: #fff;
  --cb-as-surface-2: #f9fafb;
  --cb-as-divider: #f3f4f6;
  --cb-as-line: #e5e7eb;
  --cb-as-line-strong: #d1d5db;
  --cb-as-heading: #0a0a0a;
  --cb-as-text: #374151;
  --cb-as-muted: #6b7280;
  --cb-as-faint: #9ca3af;
  --cb-as-accent-tint: #f5f3ff;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--cb-text);
}

.creation-builder * {
  box-sizing: border-box;
}

/* ---------- Nodes ---------- */
/* Dark theme — scoped to the canvas element itself (CreationEditorCanvas adds
   `dark` when the LoonaLabs Dark preset is picked), never <body>: the theme
   belongs to the creation, so the editor chrome around it stays light.
   Surfaces/lines are translucent white rather than fixed hexes so they layer
   correctly over *any* card colour the user sets, not just this preset's.
   Selected choices read as a purple border alone (no tint), per the Figma. */
.creation-builder.dark {
  --cb-as-surface: transparent;
  --cb-as-surface-2: rgba(255, 255, 255, 0.06);
  --cb-as-divider: rgba(255, 255, 255, 0.08);
  --cb-as-line: rgba(255, 255, 255, 0.14);
  --cb-as-line-strong: rgba(255, 255, 255, 0.28);
  --cb-as-heading: #f5f5f5;
  --cb-as-text: #e5e5e7;
  --cb-as-muted: #9ca3af;
  --cb-as-faint: #6b7280;
  --cb-as-accent-tint: transparent;
}

.creation-builder .node {
  position: relative;
  transition: outline-color 0.1s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.creation-builder .node.is-hovered {
  outline-color: rgba(85, 0, 255, 0.4);
}

.creation-builder .node.is-selected {
  outline-color: var(--cb-accent);
}

/* Preview mode: no editing affordances (hover/selection outlines).
   The extra `.cb-preview` class outranks the rules above. */
.creation-builder.cb-preview .node.is-hovered,
.creation-builder.cb-preview .node.is-selected {
  outline-color: transparent;
}

.creation-builder .node-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Trailing space so the last card clears the scroll viewport's bottom edge,
     and so a newly-added last card has room to scroll toward center. Lives on
     node-page (which grows with content) rather than the wrapper, which gets
     flex-shrunk to the viewport and would clip the padding. */
  padding-bottom: 30vh;
}

.creation-builder .card-section {
  width: 100%;
  padding: 25px 0;
}

/* Gap between sections: a real margin (not padding) so the backdrop shows
   through between adjacent sections even when each one has its own colour or
   image — otherwise same-coloured sections would merge into one continuous
   band. Full-bleed sections are excluded: they're meant to stack edge-to-edge
   with no seam (and already get their own spacing while editing, see Card.jsx). */
.creation-builder .card-section:not(.card-section--full-bleed) {
  margin-bottom: 24px;
}

/* Full-bleed section: break out of the canvas wrapper's horizontal padding
   (px-5 on the scroll container in CreationPage) so the band — and the card
   that fills it edge-to-edge — spans the entire editor column. With the card
   covering the whole band, the section background is no longer visible. */
.creation-builder .card-section--full-bleed {
  width: calc(100% + 2.5rem);
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.creation-builder .node-card {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  min-height: 240px;
  padding: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

/* Save-as-template / Template preview peeks — hug content so short cards can
   be vertically centered without a 240px empty belly. */
.template-card-canvas-peek .creation-builder .node-card {
  min-height: 0;
}
.template-card-canvas-peek .creation-builder .node-page {
  min-height: 0;
  padding-bottom: 0;
}
/* One-card preview mode normally fills the viewport and centers the card in a
   tall section — that fights our own stage centering. Collapse to content. */
.template-card-canvas-peek .creation-builder.cb-one-card {
  min-height: 0;
}
.template-card-canvas-peek .creation-builder.cb-one-card .node-page {
  min-height: 0;
  flex: 0 0 auto;
}
.template-card-canvas-peek .creation-builder.cb-one-card .card-section {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 8px 0;
}

/* Templates hub covers (`fill`): flush the craft card to the thumbnail slot so
   the outer rounded-xl clips cleanly — no side gutters from section pad /
   card radius / max-width. Short peeks re-add radius (see `.is-short`). */
.template-card-canvas-peek--fill .creation-builder.cb-one-card .card-section {
  padding: 0;
}
.template-card-canvas-peek--fill .creation-builder .node-card {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  box-shadow: none;
}
.template-card-canvas-peek--fill.is-short .creation-builder .node-card {
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* ── Popup content panel (nested single-card canvas) ──────────────────────────
   The popup modal hosts one card; strip the page's trailing scroll padding, the
   section gutters, and the card shadow/min-height so the panel fits the card. */
.creation-builder.cb-popup .node-page {
  min-height: 0;
  padding-bottom: 0;
}

.creation-builder.cb-popup .card-section {
  padding: 0;
  margin-bottom: 0;
}

.creation-builder.cb-popup .node-card {
  min-height: 0;
  box-shadow: none;
  border-radius: 0;
  /* The base rule's auto margins center a narrower-than-container card (e.g.
     preview's 70% width) — inside the popup panel that reads as an odd gap
     on both sides, so keep it flush left like the card looks everywhere else. */
  margin-left: 0;
}

/* ── Document creation type (single card) ──────────────────────────────────
   A Document is a single card, but — unlike the earlier Google-Docs-style
   full-bleed design — it now renders like any other card: normal max-width
   (from cardLayout, "wide" by default — see CreationPage's styleDefaults),
   shadow, rounded corners, centred on the page. Only the multi-card chrome
   (add/duplicate/delete/move, the style-panel trigger) is hidden, via
   canvasConfig's `singleCard`; no card-specific CSS override is needed for
   that since Card.jsx already reads `singleCard` directly. */

/* Card padding now lives on the content area so accent images go edge-to-edge */
.creation-builder .card-content-area {
  flex: 1;
  /* Extra horizontal padding keeps the content's row edges clear of the
     left/right accent drop zones, so an Image can be dropped beside a node to
     form a side column without the accent zone intercepting it. */
  padding: var(--cb-card-pad-y) var(--cb-card-pad-x);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  min-height: 0;
}

/* Full-bleed: only the card stretches edge-to-edge — its background bleeds the
   full width while the content (including any accent grid) stays at the normal
   column width (960px), centred via side padding. The card background fills the
   padding too, so the content lays out exactly like a normal-width card.
   In preview the centering is removed so content fills the full card width. */
.creation-builder:not(.cb-preview) .node-card--full-bleed {
  padding-left: max(0px, calc((100% - 960px) / 2));
  padding-right: max(0px, calc((100% - 960px) / 2));
}

/* A full-bleed card in preview is as tall as the screen, so a short card's
   content would otherwise sit in a band at the top with a lake of empty space
   under it. Centre it vertically instead.

   This has to go on .card-content-area, not the card: the content area is
   `flex: 1`, so it swallows all the free space and leaves the card's own
   justify-content nothing to distribute (which is why the equivalent rule on
   .cb-one-card .node-card--full-bleed never did anything).

   `safe` keeps content that's taller than the screen top-aligned — plain
   `center` would push its head off the top edge, out of reach of scrolling. */
.creation-builder.cb-preview .node-card--full-bleed .card-content-area {
  justify-content: safe center;
}

/* ── Preview device frames (tablet / mobile) ─────────────────────────────────
   The .cb-stage wrapper is layout-transparent until a device is selected. In
   device mode it becomes the column that stacks the (optional) simulated
   chrome and the scrollable preview.

   `.cb-stage--chrome` is the dark bezel + fixed device pixel size + shadow —
   author-only (CreationEditorCanvas's deviceChromeActive): it's what makes a
   desktop browser read like a real phone/tablet with a browser open. A
   learner on their actual phone gets `.cb-stage--device` without `--chrome`
   instead, filling the real viewport at its own natural size — there's no
   "screen" to simulate, the real one already is one. */
.cb-stage {
  display: contents;
}

.cb-stage.cb-stage--device {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}

.cb-stage.cb-stage--device.cb-stage--chrome {
  flex: none;
  box-sizing: content-box; /* width/height = screen (browser) viewport size */
  align-self: center; /* centre horizontally; flows from the top of the scroll area */
  width: var(--device-w);
  height: var(--device-h);
  max-width: 100%;
  background: #fff;
  border: 12px solid #0b0b0f;
  border-radius: 52px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
}

.cb-stage.cb-stage--mobile.cb-stage--chrome {
  --device-w: 375px;
  --device-h: 812px;
}

.cb-stage.cb-stage--tablet.cb-stage--chrome {
  --device-w: 768px;
  --device-h: 1074px;
  border-width: 14px;
  border-radius: 40px;
}

/* Stable wrapper around the preview canvas inside the device frame. Transparent
   off-device (so desktop layout is unchanged); on-device it's the positioning
   context for the in-frame lessons sidebar/drawer and the flex row that holds
   the scrollable canvas. Always wraps `.creation-builder` so the craft <Frame>
   is never reparented across device/preview switches. */
.cb-screen {
  display: contents;
}
.cb-screen.cb-screen--device {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* An embedded video/embed iframe (Embed.jsx, Video.jsx) can get promoted to
   its own GPU compositing layer — YouTube's especially — and some browsers
   then paint that layer above the mobile lessons drawer regardless of its
   z-index, since the iframe isn't really competing in the page's normal
   stacking order anymore. Hiding canvas iframes for the drawer's duration
   sidesteps the bug entirely; `visibility: hidden` (not `display: none`)
   keeps the iframe's own state (video position, player instance) intact
   rather than reloading it once the drawer closes. */
.cb-screen--drawer-open .creation-builder iframe {
  visibility: hidden;
}

/* The preview canvas becomes the scrollable screen content between the chrome. */
.creation-builder.cb-device {
  flex: 1 1 auto;
  min-height: 0; /* override base min-height:100% so flex sizing wins */
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Mobile frame: one card width, one gutter ────────────────────────────────
   A phone screen is too narrow to spend on a card-width setting (70% of 375px
   leaves a ~260px column), so in the mobile frame the card always spans the
   screen whatever Card Layout says — held off the bezel by the same 12px the
   mobile top bar indents its own content (PreviewMobileTopBar's `px-3`), so the
   card's edge lines up with the title above it.

   The gutter goes on the section rather than the card so the section's own
   background still reaches the bezel behind it. Full-bleed is excluded from
   it (and from the card's own shadow, below) — it's meant to run flush to the
   bezel exactly like it runs flush to the desktop viewport, not get boxed in
   the same gutter every other layout gets on this narrow a screen.

   Both need !important, for the same reason: Card.jsx sets `maxWidth` and (on
   full-bleed sections) `padding: 0` as *inline* styles, which beat any plain
   rule here — the same trap as .assess-fullbleed's background and the old
   Document card rules. The max-width line replaced a
   `.cb-device .node-card { max-width: 100% }` that had been silently losing to
   that inline style, so tablet/mobile never actually filled their frames.
   Tablet is deliberately left alone: 768px is wide enough that a narrow/wide
   card still reads the way it was authored. */
.creation-builder.cb-device--mobile .node-card {
  max-width: none !important;
}

.creation-builder.cb-device--mobile .card-section:not(.card-section--full-bleed) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* No shadow "frame" around a card that's supposed to bleed off the screen
   edge with nothing separating it from the bezel. Border-radius is already 0
   here (Card.jsx sets it inline whenever isFullBleed, unconditionally). */
.creation-builder.cb-device--mobile .node-card--full-bleed {
  box-shadow: none;
}

/* Resource/Audio blocks: same "always full width on a phone" treatment as
   the card itself above — a 60%-width row (the authored default) leaves a
   cramped, easy-to-mistap sliver on a narrow screen. Covered both ways per
   the file's usual split: a real breakpoint for the published page on an
   actual phone, and the `cb-device--mobile` class for the simulated frame
   here (whose viewport stays desktop-sized). !important for the same reason
   as .node-card above — Resources.jsx/Audio.jsx set width inline. */
@media (max-width: 480px) {
  .creation-builder .node-resource-inner,
  .creation-builder .node-audio-inner {
    width: 100% !important;
  }
}

.creation-builder.cb-device--mobile .node-resource-inner,
.creation-builder.cb-device--mobile .node-audio-inner {
  width: 100% !important;
}

/* Image/Video/Embed: same "always full width on a phone" treatment, but
   these three DO have an author-facing Align (left/center/right) + Full
   width toggle (Image.jsx/Video.jsx/Embed.jsx's own `innerStyle`, "60%" vs
   "100%") — on mobile this wins over whatever the author picked, same as
   Resource/Audio above have no choice to begin with. Covered both ways for
   the same reason as everything else in this split. */
@media (max-width: 480px) {
  .creation-builder .node-image-inner,
  .creation-builder .node-video-inner,
  .creation-builder .node-embed-inner {
    width: 100% !important;
  }
}

.creation-builder.cb-device--mobile .node-image-inner,
.creation-builder.cb-device--mobile .node-video-inner,
.creation-builder.cb-device--mobile .node-embed-inner {
  width: 100% !important;
}

.creation-builder.cb-device .node-page {
  padding-bottom: 48px;
}

/* Tighter content padding so text isn't cramped inside the narrow frames. */
.creation-builder.cb-device--tablet {
  --cb-card-pad-x: 32px;
  --cb-card-pad-y: 28px;
}

.creation-builder.cb-device--mobile {
  --cb-card-pad-x: 18px;
  --cb-card-pad-y: 20px;
}

/* Side gutter that keeps the floating PreviewLessonsSidebar off a preview
   card's content while it's expanded — an overlay pinned to the canvas's
   left edge with a footprint of width + gutter (240px = SIDEBAR_WIDTH_EXPANDED
   in cardsSidebar.constants.js + ml-3's 12px = 252px). Applied on the x axis
   (not just the left) so content stays centred in the card rather than
   looking pushed over. A normal centred card already starts well right of
   the sidebar, so 150px clears it comfortably (a full-bleed card, starting at
   x=0, is the tight case — raise this toward ~264px if it still clips there).

   Scoped away from the device frames: those simulate real 375/768px screens,
   render their sidebar *inside* the frame, and keep the tighter padding above
   — a desktop-sized gutter would swallow a phone's width. Document's own
   CreationCardsSidebar (create mode) doesn't need this: the card it floats
   over is now a normal centred card like any other, not full-bleed. */
.creation-builder.cb-preview:not(.cb-device) {
  --cb-card-pad-x: 150px;
}

/* Real breakpoint counterpart, same split as the rest of this file: a
   learner's actual phone never gets the simulated device frame (that's an
   authoring-only tool — see CreationPage's previewDevice), so without this
   the 150px desktop gutter above would eat almost the entire width of an
   actual narrow screen instead of just clearing a sidebar that isn't even
   floating over the content there. */
@media (max-width: 480px) {
  .creation-builder.cb-preview:not(.cb-device) {
    --cb-card-pad-x: 18px;
  }
}

/* Creations-hub preview modal — keep the page preview's card width, but use
   tighter inner gutters than the full-viewport 150px so content isn't sparse
   inside the dialog. */
.creation-builder.cb-hub-modal.cb-preview:not(.cb-device) {
  --cb-card-pad-x: 32px;
  --cb-card-pad-y: 24px;
}

/* Popup content panel — same reasoning as the hub-modal override above: its
   own dialog (PopupContentPanel's max-w-[880px]) is the container to fit, not
   the full viewport, so the 150px full-viewport gutter (sized for a page
   spanning nearly the whole screen) reads as a huge, mostly-empty margin in
   here. Restores the base gutters so create/preview don't visibly disagree on
   the one panel whose size never actually changes between the two. */
.creation-builder.cb-popup.cb-preview:not(.cb-device) {
  --cb-card-pad-x: 56px;
  --cb-card-pad-y: 32px;
}

/* CardCover author row: author info + "Last updated" sit inline on desktop/
   tablet. On narrow screens they stack — author info on top, last-updated
   below, both left-aligned — and the "·" separator (meaningless once split
   across two lines) is hidden. Covered two ways: a real breakpoint for the
   published page on an actual mobile browser, and the `cb-device--mobile`
   class for the simulated phone frame in this editor (whose viewport stays
   desktop-sized, so the media query alone wouldn't trigger there). */
.cardcover-author-row {
  align-items: center;
}

@media (max-width: 480px) {
  .cardcover-author-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .cardcover-author-row .cardcover-author-sep {
    display: none;
  }
}

.creation-builder.cb-device--mobile .cardcover-author-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.creation-builder.cb-device--mobile .cardcover-author-row .cardcover-author-sep {
  display: none;
}

/* Full-bleed sections break out of the editor wrapper's horizontal padding,
   which doesn't exist inside the device frame — pin them back to the frame. */
.creation-builder.cb-device .card-section--full-bleed {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* One-card-at-a-time preview (button nav or a deck creation): others are hidden
   via JS. The visible card fills at least the viewport/screen height and centres
   its content, so a short card sits mid-screen instead of hugging the top. */
/* Responsive preview typography. Text is larger on the wide desktop card; the
   tablet/mobile device frames keep base sizing (the frame is then scaled to fit,
   so it reads proportionally). Editing uses base sizing via the var fallback. */
.creation-builder.cb-preview:not(.cb-device) {
  --cb-type-scale: 1.25;
}

.creation-builder.cb-one-card:not(.cb-device) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.creation-builder.cb-one-card .node-page {
  flex: 1 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
/* The section band fills the whole viewport/screen (its background too); the card
   sizes to its content and is centred vertically, with breathing room top/bottom.
   `safe` keeps a taller-than-viewport card top-aligned (no clipping). */
.creation-builder.cb-one-card .card-section {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  padding: 40px 0;
  /* Only one section is ever visible here (others are display:none), so the
     inter-section gap would just add unwanted trailing space. */
  margin-bottom: 0;
}
/* Full-bleed fills the whole screen edge-to-edge (width + height, no padding). */
.creation-builder.cb-one-card .card-section--full-bleed {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
.creation-builder.cb-one-card .node-card--full-bleed {
  flex: 1 0 auto;
}

/* The desktop button bar is a bottom overlay (position: absolute), exactly
   like scroll nav's own progress bar (CreationPage's showScrollProgress) —
   neither reserves layout space, so a card's content runs flush to the card's
   own bottom edge in both modes alike. This used to carve out clearance here
   (120px, then 72px) that scroll nav never had, leaving button-nav cards with
   a dead band above the bar that scroll-nav cards never showed. */

/* ── Accent image layout ─────────────────────────────────────────────────── */

/* The card's own hover/selected ring (.node.is-hovered/.is-selected's
   `outline`) loses to the accent slot's `position: relative` — a positioned
   descendant paints in a later step than its ancestor's own outline, a
   well-known CSS quirk — so on a card with an accent image the ring rendered
   invisible behind it. `outline` itself has no z-index to fix that with, so
   cards with an accent get a real (stacking-context-participating) ::after
   ring instead, explicitly above the accent slot. Plain cards keep the
   ordinary outline — this only kicks in where it was actually broken. */
.creation-builder .node-card--accent {
  outline: none;
}
.creation-builder .node-card--accent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius, 16px);
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 5;
}
.creation-builder .node-card--accent.is-hovered::after {
  border-color: rgba(85, 0, 255, 0.4);
}
.creation-builder .node-card--accent.is-selected::after {
  border-color: var(--cb-accent);
}

/* Switch card to grid when an accent image is present */
.creation-builder .node-card--accent-left {
  display: grid;
  grid-template-columns: var(--accent-w, 30%) 1fr;
}

.creation-builder .node-card--accent-right {
  display: grid;
  grid-template-columns: 1fr var(--accent-w, 30%);
}

.creation-builder .node-card--accent-top {
  display: flex;
  flex-direction: column;
}

.creation-builder .card-accent-slot--top {
  width: 100%;
  height: 220px;
  border-radius: var(--card-radius, 12px) var(--card-radius, 12px) 0 0;
}

/* Accent image cell */
.creation-builder .card-accent-slot {
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.creation-builder .card-accent-slot--left {
  border-radius: var(--card-radius, 12px) 0 0 var(--card-radius, 12px);
}

.creation-builder .card-accent-slot--right {
  border-radius: 0 var(--card-radius, 12px) var(--card-radius, 12px) 0;
}

.creation-builder .node-card--full-bleed .card-accent-slot {
  border-radius: 0;
}

.creation-builder .card-accent-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Resize handle — sits on the inner edge between accent and content */
.creation-builder .card-accent-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 15;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creation-builder .card-accent-resize-handle--left {
  right: -5px;
}

.creation-builder .card-accent-resize-handle--right {
  left: -5px;
}

.creation-builder .card-accent-resize-handle::after {
  content: "";
  width: 10px;
  height: 100%;
  background: #6366f1;
  opacity: 0;
  transition: opacity 0.15s;
}

.creation-builder .card-accent-resize-handle:hover::after {
  opacity: 1;
}

/* Show zones when accent is being dragged from this card */
.creation-builder .card-accent-drag-active .card-accent-zone {
  opacity: 1;
  pointer-events: all;
}

/* Content area highlight when accent image is dragged over it */
.creation-builder .card-content-accent-target {
  outline: 2px dashed rgba(85, 0, 255, 0.4);
  outline-offset: -2px;
  border-radius: 6px;
  background: rgba(85, 0, 255, 0.04);
}

/* Slight dark tint across the whole image on hover — its own layer, separate
   from the controls panel below, so the panel can stay a plain white pill
   instead of needing a dark backing of its own. */
.creation-builder .card-accent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.creation-builder .card-accent-slot:hover .card-accent-overlay {
  opacity: 1;
}

/* Controls (replace / remove) — full-coverage wrapper just to centre the
   panel; the panel itself is the visible pill. */
.creation-builder .card-accent-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.creation-builder .card-accent-slot:hover .card-accent-controls {
  opacity: 1;
}

.creation-builder .card-accent-panel {
  /* Same radii as .node-barchart-toolbar — the other floating icon-button
     panel a node attaches to itself (charts/timeline's top-border control) —
     so a panel reads the same regardless of which node it's hovering. */
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.08);
}

.creation-builder .card-accent-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #1f2329;
  cursor: pointer;
  transition: background 0.12s;
}

.creation-builder .card-accent-btn:hover {
  background: #f3f4f6;
}

/* Full-coverage form overlay for replacing the URL while image is showing */
.creation-builder .card-accent-overlay-form {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── Drop zones (shown before accent is set) ─────────────────────────────── */

.creation-builder .card-accent-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, width 0.18s, background 0.15s, border-color 0.15s;
  border-radius: 12px;
}

.creation-builder .card-accent-zone--left {
  left: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(to right, rgba(85, 0, 255, 0.06), transparent);
  border: 2px rgba(99, 102, 241, 0.5);
  border-right: none;
}

.creation-builder .card-accent-zone--right {
  right: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(to left, rgba(85, 0, 255, 0.06), transparent);
  border: 2px rgba(99, 102, 241, 0.5);
  border-left: none;
}

.creation-builder .card-accent-zone--top {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 72px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to bottom, rgba(85, 0, 255, 0.06), transparent);
  border: 2px rgba(99, 102, 241, 0.5);
  border-bottom: none;
}

/* Show only while dragging a file over the card */
.creation-builder .card-file-drag-over .card-accent-zone {
  opacity: 1;
  pointer-events: all;
}

/* Drag-over highlight */
.creation-builder .card-accent-zone--active {
  background: rgba(85, 0, 255, 0.1);
  border-color: rgba(85, 0, 255, 0.45);
}

/* Expanded state when URL input is open */
.creation-builder .card-accent-zone--input {
  width: 220px;
  opacity: 1;
  pointer-events: all;
  background: #fff;
  border: 2px solid rgba(85, 0, 255, 0.4);
  box-shadow: 0 4px 20px rgba(85, 0, 255, 0.12);
  border-radius: 12px;
}

/* Add-image trigger button */
.creation-builder .card-accent-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: rgba(85, 0, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  transition: color 0.12s;
}

.creation-builder .card-accent-add-btn:hover {
  color: rgba(85, 0, 255, 0.85);
}

/* URL input form */
.creation-builder .card-accent-url-form {
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creation-builder .card-accent-url-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid #e3e5e8;
  border-radius: 6px;
  font-size: 12px;
  color: #1f2329;
  background: #fff;
  outline: none;
}

.creation-builder .card-accent-url-input:focus {
  border-color: rgba(85, 0, 255, 0.45);
}

.creation-builder .card-accent-url-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.creation-builder .card-accent-url-confirm,
.creation-builder .card-accent-url-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e3e5e8;
  cursor: pointer;
  transition: background 0.12s;
}

.creation-builder .card-accent-url-confirm {
  background: rgba(85, 0, 255, 0.08);
  color: rgba(85, 0, 255, 0.8);
  border-color: rgba(85, 0, 255, 0.2);
}

.creation-builder .card-accent-url-confirm:hover {
  background: rgba(85, 0, 255, 0.14);
}

.creation-builder .card-accent-url-cancel {
  background: #fff;
  color: #6b7280;
}

.creation-builder .card-accent-url-cancel:hover {
  background: #f3f4f6;
}

/* Preview mode: no editing affordances */
.creation-builder.cb-preview .card-accent-zone,
.creation-builder.cb-preview .card-accent-controls,
.creation-builder.cb-preview .card-accent-overlay,
.creation-builder.cb-preview .card-accent-overlay-form {
  display: none !important;
}

/* No min-height here, same reasoning as .node-column/.node-row-l2 above: the
   empty-state .drop-hint (RowL1.jsx) already sets its own min-height (80px)
   for when a row has no columns yet, so a populated row sizes to fit its
   actual content instead of being force-padded out to 60px regardless. */
.creation-builder .node-row-l1 {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  width: 100%;
  border-radius: 8px;
  overflow: visible;
}

/* Only multi-column rows get the dashed outline — a single column shows no
   border. Scoped to direct-child columns so nested columns (timeline/callout)
   don't trigger it, and hidden in preview mode. */
.creation-builder:not(.cb-preview)
  .node-row-l1:has(> .node-column ~ .node-column) {
  border: 1px dashed var(--cb-border);
}

/* every direct child of a first-level row is an equal-width column */
.creation-builder .node-row-l1 > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Row → column stack on a phone: 2-3 equal-width columns each getting a
   sliver of a ~375px frame reads badly. Covered both ways per the file's
   usual split: a real breakpoint for the published page on an actual phone,
   and the `cb-device--mobile` class for the simulated frame here (whose
   viewport stays desktop-sized). The multi-column dashed border and the
   column divider are both already scoped to editor/non-preview state above
   (and the add-column button only renders in Create mode), so none of them
   ever coexist with this stacked layout — no matching mobile override
   needed for those. */
@media (max-width: 480px) {
  .creation-builder .node-row-l1 {
    flex-direction: column;
  }
}

.creation-builder.cb-device--mobile .node-row-l1 {
  flex-direction: column;
}

/* No min-height here: the empty-state .drop-hint below already sets its own
   min-height (80px), so a column with actual content sizes to fit it instead
   of being force-padded out to that same 80px — which, stacked with the
   card-content-area row gap, was making back-to-back single-line rows (e.g.
   from Enter-splitting a text block) look like an oversized gap. */
.creation-builder .node-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

/* Single-column rows: the column's own top/bottom padding stacks with the
   card-content-area row gap (8px), so two back-to-back single-column rows
   (e.g. from Enter-splitting a text block into a new row) end up ~24px apart
   instead of a normal ~8px. Multi-column rows keep the full padding — it
   reads fine inside their dashed border and isn't compounding against a
   neighbouring row's padding the same way. */
.creation-builder .node-row-l1:not(:has(> .node-column ~ .node-column)) > .node-column {
  padding-top: 0;
  padding-bottom: 0;
}

/* Divider between adjacent columns */
.creation-builder .node-column + .node-column {
  border-left: 1px dashed var(--cb-border);
}

/* Hide dividers in preview mode */
.creation-builder.cb-preview .node-column + .node-column {
  border-left-color: transparent;
}

/* Add-column button — floats to the right of the row */
.creation-builder .node-row-l1-add-col {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
  z-index: 10;
  flex-shrink: 0;
}

.creation-builder .node-row-l1-add-col:hover {
  border-color: var(--cb-accent);
  color: var(--cb-accent);
  box-shadow: 0 0 0 3px var(--cb-accent-soft);
}

/* No min-height here, same reasoning as .node-column above: the empty-state
   .drop-hint (RowL2.jsx) already sets its own min-height (80px) for when a
   row has no content yet, so a populated row sizes to fit its actual content
   instead of being force-padded out to 48px regardless — which, stacked with
   the card-content-area row gap, was making single-line rows look like they
   had an oversized gap between them. */
.creation-builder .node-row-l2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.creation-builder .node-row-l2 > * {
  flex: 1 1 160px;
  min-width: 0;
}

.creation-builder .node-text {
  margin: 0;
  line-height: 1.5;
  cursor: text;
}

/* Suppress the wrapper outline — it goes on the inner img/placeholder instead */
.creation-builder .node-image.is-selected,
.creation-builder .node-image.is-hovered {
  outline-color: transparent;
}

.creation-builder .node-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Suppress wrapper outline — outline goes on inner content instead */
.creation-builder .node-video.is-selected,
.creation-builder .node-video.is-hovered {
  outline-color: transparent;
}

.creation-builder .node-audio.is-selected,
.creation-builder .node-audio.is-hovered {
  outline-color: transparent;
}

.creation-builder .node-embed.is-selected,
.creation-builder .node-embed.is-hovered {
  outline-color: transparent;
}

/* ---------- Embed URL input ---------- */
.node-embed-input {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #f1f5f9;
  border: none;
  border-radius: 8px;
  cursor: text;
}

.node-embed-input-field {
  flex: 1;
  border: none;
  background: #f1f5f9;
  font-size: 14px;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: #374151;
  outline: none;
}

.node-embed-input-field:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.node-embed-input-field::placeholder {
  color: #9ca3af;
}

/* ---------- Audio player ---------- */
.node-audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  -webkit-user-select: none;
          user-select: none;
}

.node-audio-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #1f2329;
  padding: 0;
  border-radius: 6px;
  transition: background 0.12s;
}

.node-audio-play-btn:hover {
  background: #f3f4f6;
}

.node-audio-time {
  font-size: 13px;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  color: #1f2329;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.node-audio-track {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.node-audio-fill {
  height: 100%;
  background: #1f2329;
  border-radius: 2px;
  pointer-events: none;
}

.node-audio-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

.node-audio-icon-btn:hover {
  background: #f3f4f6;
  color: #1f2329;
}

/* ---------- Placeholders ---------- */
.creation-builder .drop-hint,
.creation-builder .media-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 16px;
  border: 2px dashed var(--cb-border);
  border-radius: 8px;
  color: var(--cb-muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- Image alignment toolbar ---------- */
.node-image-toolbar {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.node-image-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.node-image-toolbar-btn:hover {
  background: #f3f4f6;
  color: #1f2329;
}

.node-image-toolbar-btn.active {
  background: #f3f4f6;
  color: #1f2329;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.node-image-toolbar-sep {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
  margin: 0 2px;
  flex-shrink: 0;
}

/* ---------- Bar chart top-border control (data + orientation) ---------- */
.node-barchart-toolbar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.node-barchart-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.node-barchart-toolbar-btn:hover {
  background: #f3f4f6;
  color: #1f2329;
}

.node-barchart-toolbar-sep {
  width: 1px;
  height: 18px;
  background: #e5e7eb;
  margin: 0 2px;
  flex-shrink: 0;
}

/* ---------- Horizontal / vertical timeline ---------- */
.node-timeline {
  position: relative;
}

.tl-card {
  position: relative;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px 24px 24px;
}

/* Track (the numbered nodes + connecting line) */
.tl-track {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.tl-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}

.tl-cell-add {
  flex: 0 0 auto;
}

.tl-line {
  flex: 1 1 0;
  min-width: 0;
  height: 3px;
  align-self: center;
}

.tl-badge-wrap {
  position: relative;
  flex-shrink: 0;
}

.tl-badge {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  -webkit-user-select: none;
          user-select: none;
}

.tl-badge-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}

.tl-cell:hover .tl-badge-remove,
.tl-vrow:hover .tl-badge-remove {
  opacity: 1;
}

.tl-add {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.tl-add:hover {
  border-color: #5500ff;
  color: #5500ff;
}

/* Section content row — children are craft Columns rendered directly */
.tl-sections {
  display: flex;
  align-items: flex-start;
}

.tl-sections > .node-column {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 16px 4px 0;
}

/* No dividers between timeline section columns */
.creation-builder .tl-sections > .node-column + .node-column,
.creation-builder .tl-vertical > .node-column + .node-column {
  border-left: none;
}

.tl-section-spacer {
  flex: 0 0 34px;
}

/* Vertical orientation — badges/line are CSS-counter pseudo-elements per
   section, exactly as before. `position: relative` also lets the remove-button
   overlay (a separate absolutely-positioned layer, not part of this structure —
   see .tl-vremove-layer below) anchor against this container. */
.tl-vertical {
  display: flex;
  flex-direction: column;
  position: relative;
  counter-reset: tlsection;
  --tl-accent: #4d4d4d;
  --tl-accent-ink: #fff;
}

.tl-vertical > .node-column {
  counter-increment: tlsection;
  position: relative;
  padding-left: 52px;
  min-height: 60px;
}

/* Vertical connecting line (runs behind the badges). Anchored to each badge's
   own centre (top: 8px padding + half its 34px height) rather than the row's
   box edges: starting at 0 left an 8px stub poking out above the first badge,
   and ending at the row's bottom edge fell 8px short of the next badge's top,
   leaving a visible gap instead of connecting to it. Centre-to-centre keeps
   both ends tucked behind their badge regardless of row height. None trails
   past the last badge — there's nothing below it to connect to. */
.tl-vertical > .node-column::before {
  content: "";
  position: absolute;
  left: 15.5px;
  top: 25px;
  bottom: -25px;
  width: 3px;
  background: var(--tl-accent);
}

.tl-vertical > .node-column:last-of-type::before {
  content: none;
}

/* Numbered badge. `top` matches .node-column's own 8px top padding (see the
   base .node-column rule) so the badge starts flush with the row's actual
   content instead of the column's unpadded border-box edge — without this it
   sits visibly higher than the section's first line of text. */
.tl-vertical > .node-column::after {
  content: counter(tlsection);
  position: absolute;
  left: 0;
  top: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tl-accent);
  color: var(--tl-accent-ink);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  -webkit-user-select: none;
          user-select: none;
}

.tl-vertical.shape-square > .node-column::after {
  border-radius: 8px;
}

/* clip-path references a per-instance SVG id (--tl-clip-path, set inline —
   see HorizontalTimeline.jsx's shapeClipId) rather than a hardcoded url():
   with multiple Timeline nodes on a page, a hardcoded id resolves to
   whichever instance's defs come first in the document — including a
   currently hidden (display:none) card's, whose clip-path has no computed
   geometry and so silently fails, leaving an unclipped square badge. */
.tl-vertical.shape-star > .node-column::after,
.tl-vertical.shape-bookmark > .node-column::after,
.tl-vertical.shape-droplet > .node-column::after {
  border-radius: 0;
  -webkit-clip-path: var(--tl-clip-path);
          clip-path: var(--tl-clip-path);
}

/* Remove-button overlay — a separate absolutely-positioned layer over the
   vertical timeline, one button per row, top-aligned to that row's own
   offsetTop (measured in JS). Kept out of the .node-column tree entirely so
   the counter/line/badge structure above is untouched. */
.tl-vremove-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The layer itself is pointer-events:none (see above) so it never receives
   :hover — each button opts back in individually and dims when not hovered. */
.tl-vremove {
  position: absolute;
  left: 24px;
  pointer-events: auto;
  opacity: 0.55;
  transition: opacity 0.12s;
}

.tl-vremove:hover {
  opacity: 1;
}

/* Shape picker popover */
.tl-shape-popover {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.tl-shape-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.tl-shape-btn:hover {
  background: #f3f4f6;
  color: #1f2329;
}

.tl-shape-btn.active {
  color: #5500ff;
}

/* Add-section button at the bottom of the rail */
.tl-vadd {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #d1d5db;
  border-radius: 50%;
  background: #fff;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.tl-vadd:hover {
  border-color: #5500ff;
  color: #5500ff;
}

/* ---------- Tabs ---------- */
/* One line always — wrapping wastes vertical space and pushes the panel
   below down every time a tab is added/renamed long. Overflow scrolls
   horizontally instead; the tabs and the "+" button stay their natural
   width (flex-shrink: 0) rather than getting squeezed to fit. */
.tabs-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Breathing room above the horizontal scrollbar so it doesn't sit flush
     against the tabs when they overflow. */
  padding-bottom: 6px;
}

.tabs-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tabs-tab:hover {
  border-color: #d1d5db;
}

.tabs-tab.is-active {
  color: #111827;
  font-weight: 600;
}

.tabs-tab-label {
  white-space: nowrap;
}

.tabs-tab-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  width: 72px;
  min-width: 40px;
}

.tabs-tab-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: currentColor;
  opacity: 0.55;
  border-radius: 50%;
  cursor: pointer;
}

.tabs-tab-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.tabs-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}

.tabs-add:hover {
  border-color: #5500ff;
  color: #5500ff;
}

.tabs-content {
  min-height: 40px;
}

/* System colours popover */
.tl-colours-popover {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-20%);
  z-index: 200;
  width: 252px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  padding: 14px;
}

.tl-colours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tl-colours-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
}

.tl-colours-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #9ca3af;
  border-radius: 6px;
  cursor: pointer;
}

.tl-colours-close:hover {
  background: #f3f4f6;
  color: #4b5563;
}

.tl-colours-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.tl-colours-swatch {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.tl-colours-hex {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 12px;
}

.tl-colours-hex-swatch {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tl-colours-hex-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f2329;
}

.tl-colours-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: #1f2329;
  cursor: pointer;
}

.tl-colours-reset:hover {
  background: #f9fafb;
}

/* ---------- Notion-style six-dot drag handle (portaled to body) ---------- */
.node-drag-handle {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  border-radius: 4px;
  color: #8a8f98;
  background: transparent;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}

.node-drag-handle:hover {
  color: #1f2329;
  background: rgba(0, 0, 0, 0.06);
}

.node-drag-handle:active {
  cursor: grabbing;
}

/* Popup node's nested canvas: above the Popup modal's own z-[1010] wrapper
   (PopupContentPanel.jsx), so its own handles don't get buried behind the
   modal they belong to. The base 1000 tier stays reserved for the main
   canvas, which needs to stay *below* that same modal instead. */
.node-drag-handle--elevated {
  z-index: 1020;
}

/* ---------- Callout ---------- */
.node-callout {
  width: 100%;
}

.node-callout-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  min-height: 52px;
}

.node-callout-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.node-callout-content {
  flex: 1;
  min-width: 0;
}

/* Strip the Column's own padding/min-height so the Callout's box controls spacing */
.node-callout .node-callout-content > .node-column {
  padding: 0;
  min-height: 0;
  gap: 8px;
}

/* Hide the dashed column divider inside the Callout */
.node-callout .node-callout-content > .node-column + .node-column {
  border-left: none;
}

/* Icon picker popover */
.callout-icon-popover {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.callout-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.callout-icon-btn:hover {
  background: #f3f4f6;
  color: #1f2329;
}

.callout-icon-btn.active {
  color: #5500ff;
  background: rgba(85, 0, 255, 0.06);
}

/* ── Assessment inline rich-text fields (question title + answer options) ──── */
/* These reuse the canvas bubble menu but render inline; font size/weight/color
   come from the field's wrapper inline style and are inherited below. */
.assessment-field {
  display: block;
}
.assessment-field .ProseMirror {
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  font: inherit;
  color: inherit;
}
/* Text caret on the editable surface, overriding the assessment node's
   `cursor: pointer` which would otherwise cascade in. */
.assessment-field .ProseMirror[contenteditable="true"] {
  cursor: text;
}
.assessment-field .ProseMirror p {
  margin: 0;
  font: inherit;
  color: inherit;
}
.assessment-field .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: #9ca3af;
}
/* Authored links, in every surface that renders creation content: text blocks
   (create + preview), the assessment block's inline fields, and the preview
   start screen's intro copy. Colour comes from the theme's Link picker (see
   themeAccentCssVars); the fallback keeps the historical purple when no theme
   sets one. Scoped to content — the editor's own chrome never reads this. */
.creation-builder .node-text a,
.creation-builder .assessment-field .ProseMirror a,
.creation-builder .assess-start-desc a {
  color: var(--cb-link, #5500ff);
  text-decoration: underline;
  cursor: pointer;
}
.assessment-field .ProseMirror mark {
  border-radius: 2px;
  padding: 0 1px;
}

/* In preview every Assessment block on a card is aggregated into a single
   card-level slider (CardAssessmentDeck), pinned to the top of the content
   area. The original in-flow blocks are hidden — but stay in the tree so the
   deck can read their questions via the craft query.

   Not for Document: there, each Assessment block renders inline right where
   it's authored (Assessment.jsx's own documentMode branch) — only the
   feedback summary is pulled out to the bottom (CardAssessmentDeck). */
.creation-builder.cb-preview:not(.cb-document) .node-assessment {
  display: none;
}

/* ── Assessment deck nav pill (n/total · Back · Continue) ──────────────────────
   Class-based (not inline) so the bar can shrink on the mobile frame / narrow
   viewports — inline styles would override the media query. */
.assess-nav {
  display: flex;
  justify-content: center;
}
.assess-nav-pill {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--cb-as-line, #e5e7eb);
  background: var(--cb-as-surface, #fff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.assess-nav-count {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-as-heading, #111827);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.assess-nav-sep {
  width: 1px;
  flex: none;
  background: var(--cb-as-line, #e5e7eb);
}
.assess-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  color: var(--cb-as-text, #374151);
  white-space: nowrap;
  cursor: pointer;
}
.assess-nav-btn:disabled {
  color: var(--cb-as-line-strong, #d1d5db);
  cursor: default;
}

/* Mobile: the pill spans the card width and its Back/Continue split the space
   evenly around the counter, with tighter padding/type. Covered twice — a real
   narrow viewport (published page) and the simulated `cb-device--mobile` frame
   (whose DOM stays desktop-sized, so the media query alone wouldn't fire). */
@media (max-width: 480px) {
  .assess-nav-pill {
    width: 100%;
  }
  .assess-nav-count {
    padding: 0 14px;
    font-size: 13px;
  }
  .assess-nav-btn {
    flex: 1;
    justify-content: center;
    padding: 11px 8px;
    font-size: 13px;
    gap: 4px;
  }
}
.creation-builder.cb-device--mobile .assess-nav-pill {
  width: 100%;
}
.creation-builder.cb-device--mobile .assess-nav-count {
  padding: 0 14px;
  font-size: 13px;
}
.creation-builder.cb-device--mobile .assess-nav-btn {
  flex: 1;
  justify-content: center;
  padding: 11px 8px;
  font-size: 13px;
  gap: 4px;
}

/* Solid "Continue"/"Submit" pill segment — the primary action gets a filled
   button treatment instead of the plain-text nav buttons either side of it. */
.assess-nav-btn--solid {
  background: var(--cb-content-accent, #5500ff);
  color: #fff;
  font-weight: 600;
}
/* Darkened via filter rather than a second hard-coded hex, so the hover still
   tracks whatever --cb-content-accent the theme set. */
.assess-nav-btn--solid:hover:not(:disabled) {
  filter: brightness(0.88);
}
.assess-nav-btn--solid:disabled {
  background: var(--cb-as-line, #e5e7eb);
  color: var(--cb-as-faint, #9ca3af);
}

/* Start/results screens break out of .card-content-area's own padding to go
   fully edge-to-edge, then re-apply their own padding so the content isn't
   flush against the card border — "full height and width" instead of sitting
   inset like the question phase. The negative margins are derived from the
   same --cb-card-pad-* variables .card-content-area uses, so the breakout stays
   exact at every device size (and survives the padding being retuned) rather
   than needing the two sets of numbers hand-mirrored. Only the vertical
   re-padding differs per breakpoint. */
.assess-fullbleed {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: calc(-1 * var(--cb-card-pad-y)) calc(-1 * var(--cb-card-pad-x));
  padding: 40px var(--cb-card-pad-x);
}
.creation-builder.cb-device--tablet .assess-fullbleed {
  padding: 32px var(--cb-card-pad-x);
}
.creation-builder.cb-device--mobile .assess-fullbleed {
  padding: 24px var(--cb-card-pad-x);
}

/* Document mode: the assessment deck appends after the card's own content
   instead of taking it over, so it stays inside the card's normal padding
   (no negative-margin breakout, no forced min-height) and just gets a
   divider to read as its own section. */
.assess-doc-section {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--cb-as-line, #e5e7eb);
}

/* The card's own white background + shadow (.node-card, further up this file)
   reads as a boxed card floating on the page — wrong once the start/results
   screen already bleeds to the card's edges. Drop them only while one of
   those screens is showing (i.e. a .assess-fullbleed child is present); the
   question phase in between has no such child and keeps the normal card look.
   !important: Card.jsx paints a custom card color/image as an *inline* style
   (cardBgStyle), which this needs to override unconditionally, not just the
   plain #fff default further up this file. */
.creation-builder .node-card:has(.assess-fullbleed) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ── Assessment start screen ────────────────────────────────────────────────── */
.assess-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 36px;
  border: none;
  border-radius: 999px;
  background: var(--cb-content-accent, #5500ff);
  color: #fff;
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s;
}
.assess-start-btn:hover {
  filter: brightness(0.88);
}

/* Creations-hub browse assessment — questions + choices, no grading. */
.hub-assessment-browse {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding: 28px 8px 20px;
  box-sizing: border-box;
}
.hub-assessment-browse__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* Authored rich text (from the card's intro Text block) — reset paragraph
   margins so it reads as one flowing block, not stacked paragraphs with gaps. */
.assess-start-desc p {
  margin: 0;
}
.assess-start-desc p + p {
  margin-top: 0.75em;
}

/* ── Assessment results screen ──────────────────────────────────────────────── */
.assess-stat-row {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 640px;
}
/* Slightly stronger than a bare-white-page-safe #F8FAFC, plus a border as a
   second, background-independent cue — since the results screen now sits on
   the section/backdrop (the card itself is transparent there, see
   .node-card:has(.assess-fullbleed) above), not a plain white card, a very
   faint fill alone could match the backdrop closely enough to disappear. */
.assess-stat-card {
  flex: 1;
  min-width: 0;
  background: var(--cb-as-surface-2, #f1f5f9);
  border: 1px solid var(--cb-as-line, #e7ebf0);
  border-radius: 16px;
  padding: 20px 22px;
  text-align: left;
}
.assess-review-item {
  border: 1px solid var(--cb-as-line, #e5e7eb);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

@media (max-width: 480px) {
  .assess-start h1 {
    font-size: 28px !important;
  }
  .assess-start-desc {
    font-size: 15px !important;
  }
  .assess-start-btn {
    padding: 13px 24px;
    font-size: 15px;
  }
  .assess-stat-row {
    flex-direction: column;
  }
}
.creation-builder.cb-device--mobile .assess-start h1 {
  font-size: 28px !important;
}
.creation-builder.cb-device--mobile .assess-start-desc {
  font-size: 15px !important;
}
.creation-builder.cb-device--mobile .assess-start-btn {
  padding: 13px 24px;
  font-size: 15px;
}
.creation-builder.cb-device--mobile .assess-stat-row {
  flex-direction: column;
}

/* Headings applied via the bubble menu's block-type control. Kept modest so a
   heading stays inline with the field's row rather than using the browser's
   oversized UA defaults. */
.assessment-field .ProseMirror h1,
.assessment-field .ProseMirror h2,
.assessment-field .ProseMirror h3,
.assessment-field .ProseMirror h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
.assessment-field .ProseMirror h1 {
  font-size: 1.5em;
}
.assessment-field .ProseMirror h2 {
  font-size: 1.3em;
}
.assessment-field .ProseMirror h3 {
  font-size: 1.15em;
}
.assessment-field .ProseMirror h4 {
  font-size: 1.05em;
}
/* TipTap / ProseMirror styles for the canvas rich-text node. Scoped under
   `.creation-builder` so they never leak into the rest of the app. */

.creation-builder .node-text .ProseMirror {
  outline: none;
  min-height: 1.5em;
  cursor: text;
  line-height: 1.6;
  color: #1f2329;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Placeholder (from @tiptap/extension-placeholder) — shows on the empty node.
   Headings are included so an empty H1 card title prompts with "Untitled". */
.creation-builder .node-text .ProseMirror p.is-editor-empty:first-child::before,
.creation-builder .node-text .ProseMirror h1.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: #a3a3a3;
}

.creation-builder .node-text .ProseMirror p {
  margin: 0;
  font-family: var(--typo-body-font, inherit);
  font-size: calc(var(--typo-body-size, 16px) * var(--cb-type-scale, 1));
  font-weight: var(--typo-body-weight, 400);
  line-height: var(--typo-body-lh, 1.6);
  letter-spacing: var(--typo-body-ls, normal);
  color: var(--typo-body-color, #1f2329);
  text-align: var(--typo-body-align, left);
}

.creation-builder .node-text .ProseMirror > * + * {
  margin-top: 0.5em;
}

.creation-builder .node-text .ProseMirror h1 {
  font-family: var(--typo-h1-font, inherit);
  font-size: calc(var(--typo-h1-size, 32px) * var(--cb-type-scale, 1));
  font-weight: var(--typo-h1-weight, 700);
  line-height: var(--typo-h1-lh, 1.25);
  letter-spacing: var(--typo-h1-ls, normal);
  color: var(--typo-h1-color, #1f2329);
  text-align: var(--typo-h1-align, left);
}

.creation-builder .node-text .ProseMirror h2 {
  font-family: var(--typo-h2-font, inherit);
  font-size: calc(var(--typo-h2-size, 24px) * var(--cb-type-scale, 1));
  font-weight: var(--typo-h2-weight, 700);
  line-height: var(--typo-h2-lh, 1.3);
  letter-spacing: var(--typo-h2-ls, normal);
  color: var(--typo-h2-color, #1f2329);
  text-align: var(--typo-h2-align, left);
}

.creation-builder .node-text .ProseMirror h3 {
  font-family: var(--typo-h3-font, inherit);
  font-size: calc(var(--typo-h3-size, 20px) * var(--cb-type-scale, 1));
  font-weight: var(--typo-h3-weight, 600);
  line-height: var(--typo-h3-lh, 1.35);
  letter-spacing: var(--typo-h3-ls, normal);
  color: var(--typo-h3-color, #1f2329);
  text-align: var(--typo-h3-align, left);
}

/* Highlight background on the inner span so it only covers the text,
   not the full block width. box-decoration-break:clone ensures each
   wrapped line gets its own highlight rectangle. */
.creation-builder .node-text .ProseMirror .typo-text-content {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 8px;
}

.creation-builder .node-text .ProseMirror p .typo-text-content {
  background: var(--typo-body-highlight, transparent);
}

.creation-builder .node-text .ProseMirror h1 .typo-text-content {
  background: var(--typo-h1-highlight, transparent);
}

.creation-builder .node-text .ProseMirror h2 .typo-text-content {
  background: var(--typo-h2-highlight, transparent);
}

.creation-builder .node-text .ProseMirror h3 .typo-text-content {
  background: var(--typo-h3-highlight, transparent);
}

.creation-builder .node-text .ProseMirror ul,
.creation-builder .node-text .ProseMirror ol {
  padding-left: 1.25rem;
  margin: 0;
}

.creation-builder .node-text .ProseMirror ul {
  list-style: disc;
}

.creation-builder .node-text .ProseMirror ol {
  list-style: decimal;
}

.creation-builder .node-text .ProseMirror li {
  margin: 0.15em 0;
}

.creation-builder .node-text .ProseMirror li > p {
  margin: 0;
}

.creation-builder .node-text .ProseMirror blockquote {
  border-left: 3px solid #e3e5e8;
  padding-left: 0.9rem;
  color: #4b5563;
}

.creation-builder .node-text .ProseMirror hr {
  border: none;
  border-top: 1px solid #e3e5e8;
  margin: 0.75em 0;
}

.creation-builder .node-text .ProseMirror a {
  color: #5500ff;
  text-decoration: underline;
  cursor: pointer;
}

.creation-builder .node-text .ProseMirror mark {
  /* Matches .typo-text-content's radius above (the right sidebar's Typography
     panel highlight) so a bubble-menu highlight looks the same. */
  border-radius: 8px;
  padding: 0 1px;
}

/* The editable surface: text cursor (overrides builder.css) + breathing room. */
.creation-builder .node-text {
  cursor: text;
  padding: 6px 10px;
  border-radius: 6px;
}

.creation-builder .node-text.is-selected,
.creation-builder .node-text.is-hovered {
  outline-color: transparent;
}

/* ---------- Bundle page description editor ---------- */
.bundle-description-editor .ProseMirror {
  outline: none;
  min-height: 1.5em;
  cursor: text;
  line-height: 1.6;
  font-size: 0.875rem;
  color: #0a0a0a;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bundle-description-editor .ProseMirror p.is-empty:first-child::before,
.bundle-description-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: #dcddde;
  opacity: 1;
}

.bundle-description-editor .ProseMirror p {
  margin: 0;
}

.bundle-description-editor .ProseMirror h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0a0a0a;
}

.bundle-description-editor .ProseMirror h2 {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: #0a0a0a;
}

@media (min-width: 768px) {
  .bundle-description-editor .ProseMirror h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
}

.bundle-description-editor .ProseMirror h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #0a0a0a;
}

.bundle-description-editor .ProseMirror > * + * {
  margin-top: 0.5em;
}

.bundle-description-editor--readonly .ProseMirror {
  cursor: default;
}

.bundle-description-editor--readonly
  .ProseMirror
  p.is-empty:first-child::before,
.bundle-description-editor--readonly
  .ProseMirror
  p.is-editor-empty:first-child::before {
  content: none;
}

/* ---------- Editor colour picker (react-colorful) ---------- */
.editor-color-picker .react-colorful {
  width: 100%;
  height: auto;
}
.editor-color-picker .react-colorful__saturation {
  height: 120px;
  flex-grow: 0;
  border-bottom: none;
  border-radius: 12px;
}
.editor-color-picker .react-colorful__hue {
  height: 14px;
  margin-top: 14px;
  border-radius: 9999px;
}
.editor-color-picker .react-colorful__alpha {
  height: 14px;
  margin-top: 12px;
  border-radius: 9999px;
}
.editor-color-picker .react-colorful__last-control {
  border-radius: 9999px;
}
.editor-color-picker .react-colorful__pointer {
  width: 18px;
  height: 18px;
}
.editor-color-picker .card-color-picker-gradient-spectrum {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 12px;
}
.editor-color-picker .card-color-picker-gradient-spectrum > .react-colorful {
  display: contents;
}
.editor-color-picker
  .card-color-picker-gradient-spectrum
  .react-colorful__saturation {
  grid-column: 1 / -1;
  grid-row: 1;
}
.editor-color-picker .card-color-picker-gradient-eyedropper {
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: center;
}
.editor-color-picker
  .card-color-picker-gradient-spectrum
  .react-colorful__hue {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}
.editor-color-picker
  .card-color-picker-gradient-spectrum
  .react-colorful__alpha {
  grid-column: 2;
  grid-row: 3;
  margin-top: 0;
}

/* @tailwindcss/forms focus ring — parent field owns focus styling */
.editor-color-picker .gradient-stop-pos-field input:focus,
.editor-color-picker .gradient-stop-pos-field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}
/*
 * @tailwindcss/forms focus ring on inner inputs — cells use focus-within border only.
 */
.v2-otp-host input:focus,
.v2-otp-host input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #c8c6ca; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #938f99;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::placeholder,textarea::placeholder {
  color: #938f99;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23938f99' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
}

[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #938f99;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px auto -webkit-focus-ring-color;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-bottom-1\.5 {
  bottom: -0.375rem;
}
.-bottom-3 {
  bottom: -0.75rem;
}
.-left-\[18px\] {
  left: -18px;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-right-\[2px\] {
  right: -2px;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-2 {
  top: -0.5rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-1\.5 {
  bottom: 0.375rem;
}
.bottom-10 {
  bottom: 2.5rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-8 {
  bottom: 2rem;
}
.bottom-\[-2px\] {
  bottom: -2px;
}
.bottom-\[10px\] {
  bottom: 10px;
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-1\.5 {
  left: 0.375rem;
}
.left-1\/2 {
  left: 50%;
}
.left-16 {
  left: 4rem;
}
.left-2 {
  left: 0.5rem;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[-6px\] {
  left: -6px;
}
.left-\[0\.5px\] {
  left: 0.5px;
}
.left-\[1\.5px\] {
  left: 1.5px;
}
.left-\[10px\] {
  left: 10px;
}
.left-\[11px\] {
  left: 11px;
}
.left-\[16px\] {
  left: 16px;
}
.left-\[1px\] {
  left: 1px;
}
.left-\[22px\] {
  left: 22px;
}
.left-\[23px\] {
  left: 23px;
}
.left-\[2px\] {
  left: 2px;
}
.left-full {
  left: 100%;
}
.left-px {
  left: 1px;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-3\.5 {
  right: 0.875rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-6 {
  right: 1.5rem;
}
.right-\[-2px\] {
  right: -2px;
}
.right-\[130px\] {
  right: 130px;
}
.right-\[23px\] {
  right: 23px;
}
.right-full {
  right: 100%;
}
.top-0 {
  top: 0px;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-14 {
  top: 3.5rem;
}
.top-2 {
  top: 0.5rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-\[1\.5px\] {
  top: 1.5px;
}
.top-\[11px\] {
  top: 11px;
}
.top-\[29px\] {
  top: 29px;
}
.top-\[33px\] {
  top: 33px;
}
.top-\[48px\] {
  top: 48px;
}
.top-\[65px\] {
  top: 65px;
}
.top-\[6px\] {
  top: 6px;
}
.top-full {
  top: 100%;
}
.top-px {
  top: 1px;
}
.isolate {
  isolation: isolate;
}
.\!z-20 {
  z-index: 20 !important;
}
.\!z-\[10200\] {
  z-index: 10200 !important;
}
.\!z-\[10250\] {
  z-index: 10250 !important;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100000\] {
  z-index: 100000;
}
.z-\[1000\] {
  z-index: 1000;
}
.z-\[10050\] {
  z-index: 10050;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[10100\] {
  z-index: 10100;
}
.z-\[101\] {
  z-index: 101;
}
.z-\[10200\] {
  z-index: 10200;
}
.z-\[1100\] {
  z-index: 1100;
}
.z-\[1200\] {
  z-index: 1200;
}
.z-\[1300\] {
  z-index: 1300;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[3\] {
  z-index: 3;
}
.z-\[5000\] {
  z-index: 5000;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[999999\] {
  z-index: 999999;
}
.z-\[9999\] {
  z-index: 9999;
}
.z-\[999\] {
  z-index: 999;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.row-start-3 {
  grid-row-start: 3;
}
.row-start-4 {
  grid-row-start: 4;
}
.\!m-0 {
  margin: 0px !important;
}
.-m-0\.5 {
  margin: -0.125rem;
}
.-m-2 {
  margin: -0.5rem;
}
.m-0 {
  margin: 0px;
}
.m-auto {
  margin: auto;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-8 {
  margin-left: 2rem;
  margin-right: 2rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.\!mb-0 {
  margin-bottom: 0px !important;
}
.\!mb-1\.5 {
  margin-bottom: 0.375rem !important;
}
.-mb-1 {
  margin-bottom: -0.25rem;
}
.-mb-12 {
  margin-bottom: -3rem;
}
.-mb-3 {
  margin-bottom: -0.75rem;
}
.-ml-1 {
  margin-left: -0.25rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-ml-2\.5 {
  margin-left: -0.625rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-ml-5 {
  margin-left: -1.25rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mr-11 {
  margin-right: -2.75rem;
}
.-mr-\[17px\] {
  margin-right: -17px;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-8 {
  margin-top: -2rem;
}
.-mt-px {
  margin-top: -1px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-\[-1px\] {
  margin-bottom: -1px;
}
.ml-0 {
  margin-left: 0px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-10 {
  margin-left: 2.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-2\.5 {
  margin-left: 0.625rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-\[13px\] {
  margin-left: 13px;
}
.ml-auto {
  margin-left: auto;
}
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-\[-1px\] {
  margin-top: -1px;
}
.mt-\[11px\] {
  margin-top: 11px;
}
.mt-\[15px\] {
  margin-top: 15px;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-auto {
  margin-top: auto;
}
.mt-px {
  margin-top: 1px;
}
.box-border {
  box-sizing: border-box;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.\!flex {
  display: flex !important;
}
.flex {
  display: flex;
}
.\!inline-flex {
  display: inline-flex !important;
}
.inline-flex {
  display: inline-flex;
}
.\!table {
  display: table !important;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.list-item {
  display: list-item;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.\!size-3\.5 {
  width: 0.875rem !important;
  height: 0.875rem !important;
}
.\!size-4 {
  width: 1rem !important;
  height: 1rem !important;
}
.\!size-7 {
  width: 1.75rem !important;
  height: 1.75rem !important;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-\[10px\] {
  width: 10px;
  height: 10px;
}
.size-\[14px\] {
  width: 14px;
  height: 14px;
}
.size-\[18px\] {
  width: 18px;
  height: 18px;
}
.size-\[37px\] {
  width: 37px;
  height: 37px;
}
.size-\[72px\] {
  width: 72px;
  height: 72px;
}
.size-\[88px\] {
  width: 88px;
  height: 88px;
}
.size-\[9px\] {
  width: 9px;
  height: 9px;
}
.size-full {
  width: 100%;
  height: 100%;
}
.\!h-10 {
  height: 2.5rem !important;
}
.\!h-6 {
  height: 1.5rem !important;
}
.\!h-7 {
  height: 1.75rem !important;
}
.\!h-8 {
  height: 2rem !important;
}
.\!h-9 {
  height: 2.25rem !important;
}
.\!h-\[30px\] {
  height: 30px !important;
}
.\!h-\[36px\] {
  height: 36px !important;
}
.\!h-auto {
  height: auto !important;
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[12px\] {
  height: 12px;
}
.h-\[13px\] {
  height: 13px;
}
.h-\[14px\] {
  height: 14px;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[160px\] {
  height: 160px;
}
.h-\[169px\] {
  height: 169px;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[170px\] {
  height: 170px;
}
.h-\[179px\] {
  height: 179px;
}
.h-\[17px\] {
  height: 17px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[2\.5px\] {
  height: 2.5px;
}
.h-\[22\%\] {
  height: 22%;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[24px\] {
  height: 24px;
}
.h-\[253px\] {
  height: 253px;
}
.h-\[25px\] {
  height: 25px;
}
.h-\[260px\] {
  height: 260px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[27px\] {
  height: 27px;
}
.h-\[280px\] {
  height: 280px;
}
.h-\[28px\] {
  height: 28px;
}
.h-\[30\%\] {
  height: 30%;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[36px\] {
  height: 36px;
}
.h-\[38\.5px\] {
  height: 38.5px;
}
.h-\[40\%\] {
  height: 40%;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[40px\] {
  height: 40px;
}
.h-\[42px\] {
  height: 42px;
}
.h-\[43px\] {
  height: 43px;
}
.h-\[48px\] {
  height: 48px;
}
.h-\[4px\] {
  height: 4px;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[56px\] {
  height: 56px;
}
.h-\[57\.75px\] {
  height: 57.75px;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[60px\] {
  height: 60px;
}
.h-\[74px\] {
  height: 74px;
}
.h-\[76px\] {
  height: 76px;
}
.h-\[7px\] {
  height: 7px;
}
.h-\[80vh\] {
  height: 80vh;
}
.h-\[88px\] {
  height: 88px;
}
.h-\[9px\] {
  height: 9px;
}
.h-\[calc\(100\%\+3rem\)\] {
  height: calc(100% + 3rem);
}
.h-\[min\(420px\2c 80vh\)\] {
  height: min(420px,80vh);
}
.h-\[min\(560px\2c 85dvh\)\] {
  height: min(560px,85dvh);
}
.h-\[min\(586px\2c calc\(92vh-10rem\)\)\] {
  height: min(586px,calc(92vh - 10rem));
}
.h-\[min\(700px\2c 85dvh\)\] {
  height: min(700px,85dvh);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.\!max-h-10 {
  max-height: 2.5rem !important;
}
.\!max-h-8 {
  max-height: 2rem !important;
}
.\!max-h-\[36px\] {
  max-height: 36px !important;
}
.\!max-h-\[calc\(100\%-1rem\)\] {
  max-height: calc(100% - 1rem) !important;
}
.max-h-10 {
  max-height: 2.5rem;
}
.max-h-4 {
  max-height: 1rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-\[100px\] {
  max-height: 100px;
}
.max-h-\[11rem\] {
  max-height: 11rem;
}
.max-h-\[156px\] {
  max-height: 156px;
}
.max-h-\[180px\] {
  max-height: 180px;
}
.max-h-\[200px\] {
  max-height: 200px;
}
.max-h-\[220px\] {
  max-height: 220px;
}
.max-h-\[250px\] {
  max-height: 250px;
}
.max-h-\[260px\] {
  max-height: 260px;
}
.max-h-\[280px\] {
  max-height: 280px;
}
.max-h-\[320px\] {
  max-height: 320px;
}
.max-h-\[348px\] {
  max-height: 348px;
}
.max-h-\[36px\] {
  max-height: 36px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-\[8\.5rem\] {
  max-height: 8.5rem;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-\[calc\(26px\*5\+0\.125rem\*4\)\] {
  max-height: calc(26px * 5 + 0.125rem * 4);
}
.max-h-\[inherit\] {
  max-height: inherit;
}
.max-h-\[min\(120px\2c 16vh\)\] {
  max-height: min(120px,16vh);
}
.max-h-\[min\(250px\2c 38vh\)\] {
  max-height: min(250px,38vh);
}
.max-h-\[min\(260px\2c 38vh\)\] {
  max-height: min(260px,38vh);
}
.max-h-\[min\(420px\2c 55vh\)\] {
  max-height: min(420px,55vh);
}
.max-h-\[min\(680px\2c 90vh\)\] {
  max-height: min(680px,90vh);
}
.max-h-\[min\(70vh\2c 28rem\)\] {
  max-height: min(70vh,28rem);
}
.max-h-\[min\(80px\2c 38vh\)\] {
  max-height: min(80px,38vh);
}
.max-h-full {
  max-height: 100%;
}
.max-h-screen {
  max-height: 100vh;
}
.\!min-h-0 {
  min-height: 0px !important;
}
.\!min-h-10 {
  min-height: 2.5rem !important;
}
.\!min-h-6 {
  min-height: 1.5rem !important;
}
.\!min-h-7 {
  min-height: 1.75rem !important;
}
.\!min-h-8 {
  min-height: 2rem !important;
}
.\!min-h-9 {
  min-height: 2.25rem !important;
}
.\!min-h-\[26px\] {
  min-height: 26px !important;
}
.\!min-h-\[36px\] {
  min-height: 36px !important;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-10 {
  min-height: 2.5rem;
}
.min-h-8 {
  min-height: 2rem;
}
.min-h-9 {
  min-height: 2.25rem;
}
.min-h-\[174px\] {
  min-height: 174px;
}
.min-h-\[2\.2rem\] {
  min-height: 2.2rem;
}
.min-h-\[200px\] {
  min-height: 200px;
}
.min-h-\[240px\] {
  min-height: 240px;
}
.min-h-\[26px\] {
  min-height: 26px;
}
.min-h-\[28px\] {
  min-height: 28px;
}
.min-h-\[29px\] {
  min-height: 29px;
}
.min-h-\[300px\] {
  min-height: 300px;
}
.min-h-\[35px\] {
  min-height: 35px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[381px\] {
  min-height: 381px;
}
.min-h-\[38px\] {
  min-height: 38px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[40vh\] {
  min-height: 40vh;
}
.min-h-\[417px\] {
  min-height: 417px;
}
.min-h-\[420px\] {
  min-height: 420px;
}
.min-h-\[42px\] {
  min-height: 42px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[5\.5rem\] {
  min-height: 5.5rem;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[min\(520px\2c calc\(100dvh-12rem\)\)\] {
  min-height: min(520px,calc(100dvh - 12rem));
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-20 {
  width: 5rem !important;
}
.\!w-8 {
  width: 2rem !important;
}
.\!w-\[117px\] {
  width: 117px !important;
}
.\!w-\[60\%\] {
  width: 60% !important;
}
.\!w-\[6rem\] {
  width: 6rem !important;
}
.\!w-\[96px\] {
  width: 96px !important;
}
.\!w-auto {
  width: auto !important;
}
.\!w-full {
  width: 100% !important;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/4 {
  width: 25%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-11\/12 {
  width: 91.666667%;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-2\/5 {
  width: 40%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-3\/5 {
  width: 60%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100vw\] {
  width: 100vw;
}
.w-\[101px\] {
  width: 101px;
}
.w-\[104px\] {
  width: 104px;
}
.w-\[108px\] {
  width: 108px;
}
.w-\[109px\] {
  width: 109px;
}
.w-\[10px\] {
  width: 10px;
}
.w-\[11\%\] {
  width: 11%;
}
.w-\[120px\] {
  width: 120px;
}
.w-\[125px\] {
  width: 125px;
}
.w-\[12px\] {
  width: 12px;
}
.w-\[13\%\] {
  width: 13%;
}
.w-\[136px\] {
  width: 136px;
}
.w-\[13px\] {
  width: 13px;
}
.w-\[145\%\] {
  width: 145%;
}
.w-\[148px\] {
  width: 148px;
}
.w-\[14px\] {
  width: 14px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[152px\] {
  width: 152px;
}
.w-\[15px\] {
  width: 15px;
}
.w-\[16\%\] {
  width: 16%;
}
.w-\[160px\] {
  width: 160px;
}
.w-\[16px\] {
  width: 16px;
}
.w-\[170px\] {
  width: 170px;
}
.w-\[17px\] {
  width: 17px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[184px\] {
  width: 184px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[190px\] {
  width: 190px;
}
.w-\[195px\] {
  width: 195px;
}
.w-\[197px\] {
  width: 197px;
}
.w-\[20\%\] {
  width: 20%;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[207px\] {
  width: 207px;
}
.w-\[210px\] {
  width: 210px;
}
.w-\[219px\] {
  width: 219px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[224px\] {
  width: 224px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[232px\] {
  width: 232px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[24px\] {
  width: 24px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[252px\] {
  width: 252px;
}
.w-\[254px\] {
  width: 254px;
}
.w-\[25px\] {
  width: 25px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[262px\] {
  width: 262px;
}
.w-\[265px\] {
  width: 265px;
}
.w-\[27px\] {
  width: 27px;
}
.w-\[28\%\] {
  width: 28%;
}
.w-\[280px\] {
  width: 280px;
}
.w-\[284px\] {
  width: 284px;
}
.w-\[2px\] {
  width: 2px;
}
.w-\[30\%\] {
  width: 30%;
}
.w-\[30px\] {
  width: 30px;
}
.w-\[32\%\] {
  width: 32%;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[350px\] {
  width: 350px;
}
.w-\[360px\] {
  width: 360px;
}
.w-\[38px\] {
  width: 38px;
}
.w-\[4\%\] {
  width: 4%;
}
.w-\[4\.5rem\] {
  width: 4.5rem;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[43px\] {
  width: 43px;
}
.w-\[52px\] {
  width: 52px;
}
.w-\[56px\] {
  width: 56px;
}
.w-\[58px\] {
  width: 58px;
}
.w-\[5px\] {
  width: 5px;
}
.w-\[60\%\] {
  width: 60%;
}
.w-\[60px\] {
  width: 60px;
}
.w-\[61px\] {
  width: 61px;
}
.w-\[64px\] {
  width: 64px;
}
.w-\[68px\] {
  width: 68px;
}
.w-\[6px\] {
  width: 6px;
}
.w-\[70px\] {
  width: 70px;
}
.w-\[72px\] {
  width: 72px;
}
.w-\[75px\] {
  width: 75px;
}
.w-\[76px\] {
  width: 76px;
}
.w-\[7px\] {
  width: 7px;
}
.w-\[8\%\] {
  width: 8%;
}
.w-\[8\.5rem\] {
  width: 8.5rem;
}
.w-\[82\%\] {
  width: 82%;
}
.w-\[86px\] {
  width: 86px;
}
.w-\[88px\] {
  width: 88px;
}
.w-\[92\%\] {
  width: 92%;
}
.w-\[96px\] {
  width: 96px;
}
.w-\[99px\] {
  width: 99px;
}
.w-\[9px\] {
  width: 9px;
}
.w-\[calc\(\(100\%-1rem\)\/3\)\] {
  width: calc((100% - 1rem) / 3);
}
.w-\[calc\(100\%\+14px\)\] {
  width: calc(100% + 14px);
}
.w-\[calc\(100\%-1\.5rem\)\] {
  width: calc(100% - 1.5rem);
}
.w-\[calc\(100\%-2rem\)\] {
  width: calc(100% - 2rem);
}
.w-\[min\(22rem\2c calc\(100vw-2rem\)\)\] {
  width: min(22rem,calc(100vw - 2rem));
}
.w-\[min\(240px\2c 45\%\)\] {
  width: min(240px,45%);
}
.w-\[min\(250px\2c calc\(100vw-2\.5rem\)\)\] {
  width: min(250px,calc(100vw - 2.5rem));
}
.w-\[min\(280px\2c calc\(100vw-2\.5rem\)\)\] {
  width: min(280px,calc(100vw - 2.5rem));
}
.w-\[min\(520px\2c calc\(100vw-2rem\)\)\] {
  width: min(520px,calc(100vw - 2rem));
}
.w-\[min\(600px\2c calc\(100vw-5rem\)\)\] {
  width: min(600px,calc(100vw - 5rem));
}
.w-\[min\(calc\(100vw-2rem\)\2c 22rem\)\] {
  width: min(calc(100vw - 2rem),22rem);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -webkit-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -webkit-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.\!min-w-0 {
  min-width: 0px !important;
}
.\!min-w-\[117px\] {
  min-width: 117px !important;
}
.\!min-w-\[3\.25rem\] {
  min-width: 3.25rem !important;
}
.\!min-w-\[8\.5rem\] {
  min-width: 8.5rem !important;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-24 {
  min-width: 6rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[1\.125rem\] {
  min-width: 1.125rem;
}
.min-w-\[1\.25rem\] {
  min-width: 1.25rem;
}
.min-w-\[1\.5rem\] {
  min-width: 1.5rem;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.min-w-\[11\.5rem\] {
  min-width: 11.5rem;
}
.min-w-\[1100px\] {
  min-width: 1100px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[112px\] {
  min-width: 112px;
}
.min-w-\[11rem\] {
  min-width: 11rem;
}
.min-w-\[12\.5rem\] {
  min-width: 12.5rem;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[13\.5rem\] {
  min-width: 13.5rem;
}
.min-w-\[130px\] {
  min-width: 130px;
}
.min-w-\[132px\] {
  min-width: 132px;
}
.min-w-\[14\.5rem\] {
  min-width: 14.5rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[148px\] {
  min-width: 148px;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[168px\] {
  min-width: 168px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[18px\] {
  min-width: 18px;
}
.min-w-\[190px\] {
  min-width: 190px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[260px\] {
  min-width: 260px;
}
.min-w-\[29px\] {
  min-width: 29px;
}
.min-w-\[2rem\] {
  min-width: 2rem;
}
.min-w-\[3rem\] {
  min-width: 3rem;
}
.min-w-\[4\.5rem\] {
  min-width: 4.5rem;
}
.min-w-\[52px\] {
  min-width: 52px;
}
.min-w-\[56px\] {
  min-width: 56px;
}
.min-w-\[5rem\] {
  min-width: 5rem;
}
.min-w-\[60px\] {
  min-width: 60px;
}
.min-w-\[620px\] {
  min-width: 620px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[8\.5rem\] {
  min-width: 8.5rem;
}
.min-w-\[80px\] {
  min-width: 80px;
}
.min-w-\[96px\] {
  min-width: 96px;
}
.min-w-\[9rem\] {
  min-width: 9rem;
}
.min-w-full {
  min-width: 100%;
}
.\!max-w-\[117px\] {
  max-width: 117px !important;
}
.\!max-w-\[128px\] {
  max-width: 128px !important;
}
.\!max-w-\[228px\] {
  max-width: 228px !important;
}
.\!max-w-\[240px\] {
  max-width: 240px !important;
}
.\!max-w-\[286px\] {
  max-width: 286px !important;
}
.\!max-w-none {
  max-width: none !important;
}
.max-w-0 {
  max-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4 {
  max-width: 1rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[100vw\] {
  max-width: 100vw;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[128px\] {
  max-width: 128px;
}
.max-w-\[140px\] {
  max-width: 140px;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[168px\] {
  max-width: 168px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[184px\] {
  max-width: 184px;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[204px\] {
  max-width: 204px;
}
.max-w-\[20px\] {
  max-width: 20px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-\[228px\] {
  max-width: 228px;
}
.max-w-\[238px\] {
  max-width: 238px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[280px\] {
  max-width: 280px;
}
.max-w-\[285px\] {
  max-width: 285px;
}
.max-w-\[286px\] {
  max-width: 286px;
}
.max-w-\[300px\] {
  max-width: 300px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[340px\] {
  max-width: 340px;
}
.max-w-\[350px\] {
  max-width: 350px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-\[36px\] {
  max-width: 36px;
}
.max-w-\[40\%\] {
  max-width: 40%;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[448px\] {
  max-width: 448px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[500px\] {
  max-width: 500px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[52px\] {
  max-width: 52px;
}
.max-w-\[55\%\] {
  max-width: 55%;
}
.max-w-\[5rem\] {
  max-width: 5rem;
}
.max-w-\[600px\] {
  max-width: 600px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[650px\] {
  max-width: 650px;
}
.max-w-\[7\.5rem\] {
  max-width: 7.5rem;
}
.max-w-\[80px\] {
  max-width: 80px;
}
.max-w-\[880px\] {
  max-width: 880px;
}
.max-w-\[90\%\] {
  max-width: 90%;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-\[95vw\] {
  max-width: 95vw;
}
.max-w-\[960px\] {
  max-width: 960px;
}
.max-w-\[970px\] {
  max-width: 970px;
}
.max-w-\[calc\(100vw-1rem\)\] {
  max-width: calc(100vw - 1rem);
}
.max-w-\[min\(200px\2c 55vw\)\] {
  max-width: min(200px,55vw);
}
.max-w-\[min\(320px\2c calc\(100vw-2rem\)\)\] {
  max-width: min(320px,calc(100vw - 2rem));
}
.max-w-\[min\(42rem\2c calc\(100vw-2rem\)\)\] {
  max-width: min(42rem,calc(100vw - 2rem));
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.\!flex-none {
  flex: none !important;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-\[1_1_100\%\] {
  flex: 1 1 100%;
}
.flex-\[1_1_8rem\] {
  flex: 1 1 8rem;
}
.flex-none {
  flex: none;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.\!shrink-0 {
  flex-shrink: 0 !important;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.grow {
  flex-grow: 1;
}
.basis-0 {
  flex-basis: 0px;
}
.basis-\[min\(100\%\2c 280px\)\] {
  flex-basis: min(100%,280px);
}
.basis-full {
  flex-basis: 100%;
}
.table-fixed {
  table-layout: fixed;
}
.border-collapse {
  border-collapse: collapse;
}
.border-separate {
  border-collapse: separate;
}
.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.origin-bottom-left {
  transform-origin: bottom left;
}
.origin-center {
  transform-origin: center;
}
.origin-left {
  transform-origin: left;
}
.origin-top {
  transform-origin: top;
}
.origin-top-left {
  transform-origin: top left;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[120\%\] {
  --tw-translate-x: -120%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[2px\] {
  --tw-translate-x: -2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-2 {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-3 {
  --tw-translate-y: -0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-\[1px\] {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-4px\] {
  --tw-translate-x: -4px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[120\%\] {
  --tw-translate-x: 120%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-5 {
  --tw-translate-y: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\!rotate-90 {
  --tw-rotate: 90deg !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.-rotate-45 {
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
  --tw-rotate: 0deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[0\.95\] {
  --tw-scale-x: 0.95;
  --tw-scale-y: 0.95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-scale-x-100 {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse var(--tw-animate-duration, 2s) var(--tw-animate-easing, cubic-bezier(0.4, 0, 0.6, 1)) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin var(--tw-animate-duration, 1s) var(--tw-animate-easing, linear) var(--tw-animate-delay, 0s) var(--tw-animate-iteration, infinite) var(--tw-animate-fill, none);
}
.\!cursor-default {
  cursor: default !important;
}
.\!cursor-not-allowed {
  cursor: not-allowed !important;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
          user-select: all;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.scroll-mt-28 {
  scroll-margin-top: 7rem;
}
.scroll-mt-6 {
  scroll-margin-top: 1.5rem;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_1\.25fr_56px_120px\] {
  grid-template-columns: 1fr 1.25fr 56px 120px;
}
.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}
.grid-cols-\[25px_minmax\(0\2c 1fr\)\] {
  grid-template-columns: 25px minmax(0,1fr);
}
.grid-cols-\[3fr_3fr\] {
  grid-template-columns: 3fr 3fr;
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)\] {
  grid-template-columns: auto minmax(0,1fr);
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)_auto\] {
  grid-template-columns: auto minmax(0,1fr) auto;
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)_auto_auto\] {
  grid-template-columns: auto minmax(0,1fr) auto auto;
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(200px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}
.grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.content-start {
  align-content: flex-start;
}
.\!items-start {
  align-items: flex-start !important;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.\!items-center {
  align-items: center !important;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.\!justify-start {
  justify-content: flex-start !important;
}
.justify-start {
  justify-content: flex-start;
}
.\!justify-end {
  justify-content: flex-end !important;
}
.justify-end {
  justify-content: flex-end;
}
.\!justify-center {
  justify-content: center !important;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.\!gap-0 {
  gap: 0px !important;
}
.\!gap-1 {
  gap: 0.25rem !important;
}
.\!gap-1\.5 {
  gap: 0.375rem !important;
}
.\!gap-2 {
  gap: 0.5rem !important;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[1\.3px\] {
  gap: 1.3px;
}
.gap-\[13px\] {
  gap: 13px;
}
.gap-\[15px\] {
  gap: 15px;
}
.gap-\[1px\] {
  gap: 1px;
}
.gap-\[20px\] {
  gap: 20px;
}
.gap-\[22px\] {
  gap: 22px;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-\[30px\] {
  gap: 30px;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-\[53px\] {
  gap: 53px;
}
.gap-\[5px\] {
  gap: 5px;
}
.gap-\[7px\] {
  gap: 7px;
}
.gap-px {
  gap: 1px;
}
.gap-x-0\.5 {
  column-gap: 0.125rem;
}
.gap-x-1 {
  column-gap: 0.25rem;
}
.gap-x-1\.5 {
  column-gap: 0.375rem;
}
.gap-x-12 {
  column-gap: 3rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-0 {
  row-gap: 0px;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.gap-y-8 {
  row-gap: 2rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.justify-self-end {
  justify-self: end;
}
.overflow-auto {
  overflow: auto;
}
.\!overflow-hidden {
  overflow: hidden !important;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.\!whitespace-nowrap {
  white-space: nowrap !important;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.\!rounded-2xl {
  border-radius: 1rem !important;
}
.\!rounded-full {
  border-radius: 9999px !important;
}
.\!rounded-lg {
  border-radius: 0.5rem !important;
}
.\!rounded-md {
  border-radius: 0.375rem !important;
}
.\!rounded-none {
  border-radius: 0px !important;
}
.\!rounded-xl {
  border-radius: 0.75rem !important;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[11px\] {
  border-radius: 11px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[2\.6px\] {
  border-radius: 2.6px;
}
.rounded-\[2\.824px\] {
  border-radius: 2.824px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[3\.294px\] {
  border-radius: 3.294px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[4\.6px\] {
  border-radius: 4.6px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[7\.5px\] {
  border-radius: 7.5px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-bl-md {
  border-bottom-left-radius: 0.375rem;
}
.\!border {
  border-width: 1px !important;
}
.\!border-0 {
  border-width: 0px !important;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[0\.4px\] {
  border-width: 0.4px;
}
.border-\[0\.8px\] {
  border-width: 0.8px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-\[36px\] {
  border-width: 36px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-x-\[7px\] {
  border-left-width: 7px;
  border-right-width: 7px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-\[1\.5px\] {
  border-bottom-width: 1.5px;
}
.border-b-\[7px\] {
  border-bottom-width: 7px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-t-\[7px\] {
  border-top-width: 7px;
}
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.\!border-\[\#1F89F9\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(31 137 249 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#5500FF\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(85 0 255 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#DCDDDE\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(220 221 222 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[\#dcddde\] {
  --tw-border-opacity: 1 !important;
  border-color: rgb(220 221 222 / var(--tw-border-opacity, 1)) !important;
}
.\!border-\[var\(--cb-as-line\)\] {
  border-color: var(--cb-as-line) !important;
}
.\!border-gray-200 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}
.\!border-gray-300 {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}
.\!border-transparent {
  border-color: transparent !important;
}
.border-\[\#1F89F9\] {
  --tw-border-opacity: 1;
  border-color: rgb(31 137 249 / var(--tw-border-opacity, 1));
}
.border-\[\#3D12FA\] {
  --tw-border-opacity: 1;
  border-color: rgb(61 18 250 / var(--tw-border-opacity, 1));
}
.border-\[\#3d12FA\] {
  --tw-border-opacity: 1;
  border-color: rgb(61 18 250 / var(--tw-border-opacity, 1));
}
.border-\[\#3d12FA\]\/45 {
  border-color: rgb(61 18 250 / 0.45);
}
.border-\[\#5500FF\] {
  --tw-border-opacity: 1;
  border-color: rgb(85 0 255 / var(--tw-border-opacity, 1));
}
.border-\[\#5500FF\]\/20 {
  border-color: rgb(85 0 255 / 0.2);
}
.border-\[\#5500FF\]\/30 {
  border-color: rgb(85 0 255 / 0.3);
}
.border-\[\#5500FF\]\/50 {
  border-color: rgb(85 0 255 / 0.5);
}
.border-\[\#9EA5AD\] {
  --tw-border-opacity: 1;
  border-color: rgb(158 165 173 / var(--tw-border-opacity, 1));
}
.border-\[\#9ea5ad\] {
  --tw-border-opacity: 1;
  border-color: rgb(158 165 173 / var(--tw-border-opacity, 1));
}
.border-\[\#A3A3A3\] {
  --tw-border-opacity: 1;
  border-color: rgb(163 163 163 / var(--tw-border-opacity, 1));
}
.border-\[\#DCDDDE\] {
  --tw-border-opacity: 1;
  border-color: rgb(220 221 222 / var(--tw-border-opacity, 1));
}
.border-\[\#E5E5E5\] {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}
.border-\[\#ECEDEF\] {
  --tw-border-opacity: 1;
  border-color: rgb(236 237 239 / var(--tw-border-opacity, 1));
}
.border-\[\#EDEFF2\] {
  --tw-border-opacity: 1;
  border-color: rgb(237 239 242 / var(--tw-border-opacity, 1));
}
.border-\[\#F0F0F0\] {
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
}
.border-\[\#a4e9bc\] {
  --tw-border-opacity: 1;
  border-color: rgb(164 233 188 / var(--tw-border-opacity, 1));
}
.border-\[\#dcddde\] {
  --tw-border-opacity: 1;
  border-color: rgb(220 221 222 / var(--tw-border-opacity, 1));
}
.border-\[\#e1d2ff\] {
  --tw-border-opacity: 1;
  border-color: rgb(225 210 255 / var(--tw-border-opacity, 1));
}
.border-\[\#f5f0ff\] {
  --tw-border-opacity: 1;
  border-color: rgb(245 240 255 / var(--tw-border-opacity, 1));
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-black-900_26 {
  border-color: #00000026;
}
.border-current {
  border-color: currentColor;
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}
.border-gray-100\/80 {
  border-color: rgb(245 245 245 / 0.8);
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-200\/10 {
  border-color: rgb(229 231 235 / 0.1);
}
.border-gray-200\/60 {
  border-color: rgb(229 231 235 / 0.6);
}
.border-gray-200\/80 {
  border-color: rgb(229 231 235 / 0.8);
}
.border-gray-200\/90 {
  border-color: rgb(229 231 235 / 0.9);
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(200 198 202 / var(--tw-border-opacity, 1));
}
.border-gray-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 251 252 / var(--tw-border-opacity, 1));
}
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(147 143 153 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(235 67 53 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-white-A700 {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-x-transparent {
  border-left-color: transparent;
  border-right-color: transparent;
}
.border-b-\[\#282828\] {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(40 40 40 / var(--tw-border-opacity, 1));
}
.border-t-\[\#282828\] {
  --tw-border-opacity: 1;
  border-top-color: rgb(40 40 40 / var(--tw-border-opacity, 1));
}
.border-t-\[\#5500FF\] {
  --tw-border-opacity: 1;
  border-top-color: rgb(85 0 255 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.\!bg-\[\#1a1a1a\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(26 26 26 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[\#5500FF\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(85 0 255 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[\#f0f0f0\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[\#fee2e2\] {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-\[var\(--cb-as-surface\)\] {
  background-color: var(--cb-as-surface) !important;
}
.\!bg-gray-100 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-red-600 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)) !important;
}
.\!bg-transparent {
  background-color: transparent !important;
}
.\!bg-white-A700 {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[\#00D68F\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 214 143 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0A0A0A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0D9488\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0D9F5F\] {
  --tw-bg-opacity: 1;
  background-color: rgb(13 159 95 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0b0b0f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 11 15 / var(--tw-bg-opacity, 1));
}
.bg-\[\#111827\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-\[\#282828\] {
  --tw-bg-opacity: 1;
  background-color: rgb(40 40 40 / var(--tw-bg-opacity, 1));
}
.bg-\[\#34D399\] {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3d12FA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(61 18 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4338CA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.bg-\[\#464647\] {
  --tw-bg-opacity: 1;
  background-color: rgb(70 70 71 / var(--tw-bg-opacity, 1));
}
.bg-\[\#4A90D9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(74 144 217 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5500FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(85 0 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5500FF\]\/10 {
  background-color: rgb(85 0 255 / 0.1);
}
.bg-\[\#5500FF\]\/5 {
  background-color: rgb(85 0 255 / 0.05);
}
.bg-\[\#5500FF\]\/\[0\.06\] {
  background-color: rgb(85 0 255 / 0.06);
}
.bg-\[\#6EE7B7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity, 1));
}
.bg-\[\#704EFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(112 78 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7C3AED\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7DD3FC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(125 211 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#86EFAC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(134 239 172 / var(--tw-bg-opacity, 1));
}
.bg-\[\#93C5FD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#94A3B8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-\[\#9CA3AF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A3A3A3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A3AAB4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(163 170 180 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A5B4FC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#A78BFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#B8C933\] {
  --tw-bg-opacity: 1;
  background-color: rgb(184 201 51 / var(--tw-bg-opacity, 1));
}
.bg-\[\#B996FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(185 150 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#BEBFBF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(190 191 191 / var(--tw-bg-opacity, 1));
}
.bg-\[\#BFDBFE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#C4B5FD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(196 181 253 / var(--tw-bg-opacity, 1));
}
.bg-\[\#C7D2FE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D1F4E0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(209 244 224 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D1FAE5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D2E3FC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(210 227 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D8B4FE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(216 180 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#D97706\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DB2777\] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 39 119 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DBEAFE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DC2626\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DC2626\]\/80 {
  background-color: rgb(220 38 38 / 0.8);
}
.bg-\[\#DCDDDE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 221 222 / var(--tw-bg-opacity, 1));
}
.bg-\[\#DCFCE7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E0D4FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 212 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E0E7FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E0F2FE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E1D2FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(225 210 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E2E8F0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E4E4E7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E57373\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 115 115 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E5E5E5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E5E7EB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8667D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 102 125 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8E0F4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 224 244 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8E0FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 224 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8EEFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 238 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8F1FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 241 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EA580C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EDE9FE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EDE9FE\]\/10 {
  background-color: rgb(237 233 254 / 0.1);
}
.bg-\[\#EDEFF2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 239 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EEE6FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 230 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EF4444\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EFEFEF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(239 239 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0473E\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 71 62 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0DFF6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 223 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0EBFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 235 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0F0F0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F0F5FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 245 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F1ECFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(241 236 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F2F2F2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F3E8FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F3EDFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 237 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F3F4F6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F44444\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 68 68 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F472B6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 114 182 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F59E0B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F5F0FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 240 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F7F7F7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F7F8FA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F8F9FA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F97316\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F9F9F9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 249 249 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F9FAFB\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAFAFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FAFBFC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FB923C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCA5A5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCD34D\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 211 77 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCE8E8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(252 232 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FDE2E1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 226 225 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEE2E2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEF3C7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FEF9C3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF0E3\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 240 227 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF0E8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 240 232 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFFFFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#b996ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(185 150 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#dcddde\] {
  --tw-bg-opacity: 1;
  background-color: rgb(220 221 222 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e1d2ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(225 210 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e7f8f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(231 248 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ececec\] {
  --tw-bg-opacity: 1;
  background-color: rgb(236 236 236 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0f0f0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f0f5ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 245 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2f2f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 242 242 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f2fef5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 254 245 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f3f4f6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f4f0ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 240 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f5f0ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 240 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#f9f8ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(249 248 255 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafafa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fafbfc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.bg-\[\#fee2e2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-\[\#ffffff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-\[var\(--brand-primary-color\)\] {
  background-color: var(--brand-primary-color);
}
.bg-\[var\(--cb-content-accent\2c \#5500FF\)\] {
  background-color: var(--cb-content-accent,#5500FF);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-100\/80 {
  background-color: rgb(254 243 199 / 0.8);
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 188 5 / var(--tw-bg-opacity, 1));
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-black-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(1 1 4 / var(--tw-bg-opacity, 1));
}
.bg-black-900\/10 {
  background-color: rgb(1 1 4 / 0.1);
}
.bg-black-900\/20 {
  background-color: rgb(1 1 4 / 0.2);
}
.bg-black-900\/30 {
  background-color: rgb(1 1 4 / 0.3);
}
.bg-black-900\/5 {
  background-color: rgb(1 1 4 / 0.05);
}
.bg-black-900\/70 {
  background-color: rgb(1 1 4 / 0.7);
}
.bg-black-900_26 {
  background-color: #00000026;
}
.bg-black-900_26\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}
.bg-dirty-white {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-fuchsia-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 232 255 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-gray-100\/50 {
  background-color: rgb(245 245 245 / 0.5);
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-200\/70 {
  background-color: rgb(229 231 235 / 0.7);
}
.bg-gray-200\/90 {
  background-color: rgb(229 231 235 / 0.9);
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(200 198 202 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/50 {
  background-color: rgb(250 251 252 / 0.5);
}
.bg-gray-50\/60 {
  background-color: rgb(250 251 252 / 0.6);
}
.bg-gray-50\/80 {
  background-color: rgb(250 251 252 / 0.8);
}
.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 143 153 / var(--tw-bg-opacity, 1));
}
.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(121 117 127 / var(--tw-bg-opacity, 1));
}
.bg-gray-800\/40 {
  background-color: rgb(64 64 64 / 0.4);
}
.bg-gray-900\/30 {
  background-color: rgb(17 24 39 / 0.3);
}
.bg-gray-900\/80 {
  background-color: rgb(17 24 39 / 0.8);
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-lime-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 252 203 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50\/40 {
  background-color: rgb(250 245 255 / 0.4);
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/70 {
  background-color: rgb(254 242 242 / 0.7);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 67 53 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}
.bg-teal-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.bg-teal-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-violet-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1));
}
.bg-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-white-A700 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white-A700\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white-A700\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-opacity-5 {
  --tw-bg-opacity: 0.05;
}
.bg-opacity-70 {
  --tw-bg-opacity: 0.7;
}
.bg-opacity-\[0\.03\] {
  --tw-bg-opacity: 0.03;
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#F2FDF7\] {
  --tw-gradient-from: #F2FDF7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(242 253 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#F3F4F6\] {
  --tw-gradient-from: #F3F4F6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FDF2F2\] {
  --tw-gradient-from: #FDF2F2 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 242 242 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#FFFFFF\] {
  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#c4b5fd\] {
  --tw-gradient-from: #c4b5fd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(196 181 253 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ffffff\] {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-200 {
  --tw-gradient-from: #ddd6fe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 214 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-10\% {
  --tw-gradient-from-position: 10%;
}
.from-15\% {
  --tw-gradient-from-position: 15%;
}
.via-\[\#F3F4F6\]\/80 {
  --tw-gradient-to: rgb(243 244 246 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(243 244 246 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#F3F4F6\]\/90 {
  --tw-gradient-to: rgb(243 244 246 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(243 244 246 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[rgba\(255\2c 255\2c 255\2c 0\.82\)\] {
  --tw-gradient-to: rgba(255, 255, 255, 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgba(255,255,255,0.82) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-100 {
  --tw-gradient-to: rgb(243 232 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f3e8ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-purple-200 {
  --tw-gradient-to: rgb(233 213 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#7c3aed\] {
  --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
}
.to-\[\#FDFCFC\] {
  --tw-gradient-to: #FDFCFC var(--tw-gradient-to-position);
}
.to-\[\#FDFEFD\] {
  --tw-gradient-to: #FDFEFD var(--tw-gradient-to-position);
}
.to-\[\#FFFFFF\] {
  --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position);
}
.to-\[\#f5f0ff\] {
  --tw-gradient-to: #f5f0ff var(--tw-gradient-to-position);
}
.to-indigo-100 {
  --tw-gradient-to: #e0e7ff var(--tw-gradient-to-position);
}
.to-indigo-200 {
  --tw-gradient-to: #c7d2fe var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white-A700 {
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}
.to-\[220\%\] {
  --tw-gradient-to-position: 220%;
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-center {
  object-position: center;
}
.\!p-0 {
  padding: 0px !important;
}
.\!p-4 {
  padding: 1rem !important;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1\.3px\] {
  padding: 1.3px;
}
.p-\[10px\] {
  padding: 10px;
}
.p-\[15px\] {
  padding: 15px;
}
.p-\[3px\] {
  padding: 3px;
}
.p-\[8px\] {
  padding: 8px;
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.\!px-1\.5 {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}
.\!px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.\!px-2\.5 {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.\!px-6 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.\!py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.\!py-0\.5 {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}
.\!py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.\!py-1\.5 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.\!py-2\.5 {
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}
.\!py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.\!py-\[3px\] {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-11 {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}
.px-14 {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[15px\] {
  padding-left: 15px;
  padding-right: 15px;
}
.px-\[20px\] {
  padding-left: 20px;
  padding-right: 20px;
}
.px-\[25px\] {
  padding-left: 25px;
  padding-right: 25px;
}
.px-\[27px\] {
  padding-left: 27px;
  padding-right: 27px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[10px\] {
  padding-top: 10px;
  padding-bottom: 10px;
}
.py-\[12px\] {
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-\[16px\] {
  padding-top: 16px;
  padding-bottom: 16px;
}
.py-\[25px\] {
  padding-top: 25px;
  padding-bottom: 25px;
}
.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[5\.5px\] {
  padding-top: 5.5px;
  padding-bottom: 5.5px;
}
.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}
.py-\[7\.5px\] {
  padding-top: 7.5px;
  padding-bottom: 7.5px;
}
.py-\[80px\] {
  padding-top: 80px;
  padding-bottom: 80px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.\!pl-2\.5 {
  padding-left: 0.625rem !important;
}
.\!pl-4 {
  padding-left: 1rem !important;
}
.\!pl-\[84px\] {
  padding-left: 84px !important;
}
.\!pr-0 {
  padding-right: 0px !important;
}
.\!pr-2\.5 {
  padding-right: 0.625rem !important;
}
.\!pr-4 {
  padding-right: 1rem !important;
}
.\!pr-6 {
  padding-right: 1.5rem !important;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[15px\] {
  padding-bottom: 15px;
}
.pb-\[16px\] {
  padding-bottom: 16px;
}
.pb-\[21px\] {
  padding-bottom: 21px;
}
.pl-0 {
  padding-left: 0px;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-1\.5 {
  padding-left: 0.375rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-14 {
  padding-left: 3.5rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pl-\[12px\] {
  padding-left: 12px;
}
.pl-\[13px\] {
  padding-left: 13px;
}
.pl-\[15px\] {
  padding-left: 15px;
}
.pl-\[17px\] {
  padding-left: 17px;
}
.pl-\[37px\] {
  padding-left: 37px;
}
.pl-\[42px\] {
  padding-left: 42px;
}
.pr-0 {
  padding-right: 0px;
}
.pr-0\.5 {
  padding-right: 0.125rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-5 {
  padding-right: 1.25rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-7 {
  padding-right: 1.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-\[14px\] {
  padding-right: 14px;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-\[15px\] {
  padding-top: 15px;
}
.\!text-left {
  text-align: left !important;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-\[\'Roboto\'\2c sans-serif\] {
  font-family: 'Roboto',sans-serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-roboto {
  font-family: Roboto, sans-serif;
}
.font-rubik {
  font-family: Rubik, sans-serif;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.\!text-\[10px\] {
  font-size: 10px !important;
}
.\!text-\[11px\] {
  font-size: 11px !important;
}
.\!text-\[12px\] {
  font-size: 12px !important;
}
.\!text-\[13px\] {
  font-size: 13px !important;
}
.\!text-\[14px\] {
  font-size: 14px !important;
}
.\!text-\[16px\] {
  font-size: 16px !important;
}
.\!text-\[18px\] {
  font-size: 18px !important;
}
.\!text-\[20px\] {
  font-size: 20px !important;
}
.\!text-\[9px\] {
  font-size: 9px !important;
}
.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.\!text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.375px\] {
  font-size: 11.375px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19\.5px\] {
  font-size: 19.5px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[3\.4px\] {
  font-size: 3.4px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[3px\] {
  font-size: 3px;
}
.text-\[48px\] {
  font-size: 48px;
}
.text-\[5\.7px\] {
  font-size: 5.7px;
}
.text-\[6px\] {
  font-size: 6px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\!font-medium {
  font-weight: 500 !important;
}
.\!font-normal {
  font-weight: 400 !important;
}
.\!font-semibold {
  font-weight: 600 !important;
}
.font-\[500\] {
  font-weight: 500;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.\!normal-case {
  text-transform: none !important;
}
.italic {
  font-style: italic;
}
.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);
}
.\!leading-4 {
  line-height: 1rem !important;
}
.\!leading-9 {
  line-height: 2.25rem !important;
}
.\!leading-none {
  line-height: 1 !important;
}
.\!leading-normal {
  line-height: 1.5 !important;
}
.\!leading-snug {
  line-height: 1.375 !important;
}
.\!leading-tight {
  line-height: 1.25 !important;
}
.leading-10 {
  line-height: 2.5rem;
}
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-9 {
  line-height: 2.25rem;
}
.leading-\[1\.25\] {
  line-height: 1.25;
}
.leading-\[14px\] {
  line-height: 14px;
}
.leading-\[16\.25px\] {
  line-height: 16.25px;
}
.leading-\[1\] {
  line-height: 1;
}
.leading-\[23\.4px\] {
  line-height: 23.4px;
}
.leading-\[4\.5px\] {
  line-height: 4.5px;
}
.leading-\[5\.1px\] {
  line-height: 5.1px;
}
.leading-\[5\.7px\] {
  line-height: 5.7px;
}
.leading-\[9px\] {
  line-height: 9px;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.19px\] {
  letter-spacing: -0.19px;
}
.tracking-\[-0\.28px\] {
  letter-spacing: -0.28px;
}
.tracking-\[0\.1px\] {
  letter-spacing: 0.1px;
}
.tracking-\[0\.25px\] {
  letter-spacing: 0.25px;
}
.tracking-\[0px\] {
  letter-spacing: 0px;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.\!text-\[\#0052CC\] {
  --tw-text-opacity: 1 !important;
  color: rgb(0 82 204 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#008A3D\] {
  --tw-text-opacity: 1 !important;
  color: rgb(0 138 61 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#0a0a0a\] {
  --tw-text-opacity: 1 !important;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#1F89F9\] {
  --tw-text-opacity: 1 !important;
  color: rgb(31 137 249 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#5500FF\] {
  --tw-text-opacity: 1 !important;
  color: rgb(85 0 255 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#737373\] {
  --tw-text-opacity: 1 !important;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#828283\] {
  --tw-text-opacity: 1 !important;
  color: rgb(130 130 131 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#A3A3A3\] {
  --tw-text-opacity: 1 !important;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#D93025\] {
  --tw-text-opacity: 1 !important;
  color: rgb(217 48 37 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#DC2626\] {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#a3a3a3\] {
  --tw-text-opacity: 1 !important;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[\#dc2626\] {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}
.\!text-\[var\(--cb-as-text\)\] {
  color: var(--cb-as-text) !important;
}
.\!text-gray-400 {
  --tw-text-opacity: 1 !important;
  color: rgb(200 198 202 / var(--tw-text-opacity, 1)) !important;
}
.\!text-gray-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1)) !important;
}
.\!text-gray-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(121 117 127 / var(--tw-text-opacity, 1)) !important;
}
.\!text-gray-700 {
  --tw-text-opacity: 1 !important;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important;
}
.\!text-gray-900 {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}
.\!text-red-600 {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}
.text-\[\#000000\] {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-\[\#0052CC\] {
  --tw-text-opacity: 1;
  color: rgb(0 82 204 / var(--tw-text-opacity, 1));
}
.text-\[\#007AFF\] {
  --tw-text-opacity: 1;
  color: rgb(0 122 255 / var(--tw-text-opacity, 1));
}
.text-\[\#0369A1\] {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-\[\#065F46\] {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-\[\#0A0A0A\] {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.text-\[\#0a0a0a\] {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.text-\[\#197e3f\] {
  --tw-text-opacity: 1;
  color: rgb(25 126 63 / var(--tw-text-opacity, 1));
}
.text-\[\#1B9047\] {
  --tw-text-opacity: 1;
  color: rgb(27 144 71 / var(--tw-text-opacity, 1));
}
.text-\[\#1D4ED8\] {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-\[\#1E3A8A\] {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-\[\#1F89F9\] {
  --tw-text-opacity: 1;
  color: rgb(31 137 249 / var(--tw-text-opacity, 1));
}
.text-\[\#1F89F9\]\/50 {
  color: rgb(31 137 249 / 0.5);
}
.text-\[\#1ea14f\] {
  --tw-text-opacity: 1;
  color: rgb(30 161 79 / var(--tw-text-opacity, 1));
}
.text-\[\#2563EB\] {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-\[\#2E7DFF\] {
  --tw-text-opacity: 1;
  color: rgb(46 125 255 / var(--tw-text-opacity, 1));
}
.text-\[\#2e7dff\] {
  --tw-text-opacity: 1;
  color: rgb(46 125 255 / var(--tw-text-opacity, 1));
}
.text-\[\#343438\] {
  --tw-text-opacity: 1;
  color: rgb(52 52 56 / var(--tw-text-opacity, 1));
}
.text-\[\#374151\] {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-\[\#464647\] {
  --tw-text-opacity: 1;
  color: rgb(70 70 71 / var(--tw-text-opacity, 1));
}
.text-\[\#4900AE\] {
  --tw-text-opacity: 1;
  color: rgb(73 0 174 / var(--tw-text-opacity, 1));
}
.text-\[\#4F46E5\] {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-\[\#525252\] {
  --tw-text-opacity: 1;
  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
}
.text-\[\#5500FF\] {
  --tw-text-opacity: 1;
  color: rgb(85 0 255 / var(--tw-text-opacity, 1));
}
.text-\[\#5B21B6\] {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-\[\#5B5B5B\] {
  --tw-text-opacity: 1;
  color: rgb(91 91 91 / var(--tw-text-opacity, 1));
}
.text-\[\#5b21b6\] {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-\[\#5b5b5b\] {
  --tw-text-opacity: 1;
  color: rgb(91 91 91 / var(--tw-text-opacity, 1));
}
.text-\[\#6041D8\] {
  --tw-text-opacity: 1;
  color: rgb(96 65 216 / var(--tw-text-opacity, 1));
}
.text-\[\#6366F1\] {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-\[\#646465\] {
  --tw-text-opacity: 1;
  color: rgb(100 100 101 / var(--tw-text-opacity, 1));
}
.text-\[\#6B6B6C\] {
  --tw-text-opacity: 1;
  color: rgb(107 107 108 / var(--tw-text-opacity, 1));
}
.text-\[\#6B7280\] {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-\[\#6D28D9\] {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-\[\#737373\] {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-\[\#79757F\] {
  --tw-text-opacity: 1;
  color: rgb(121 117 127 / var(--tw-text-opacity, 1));
}
.text-\[\#7D3CFF\] {
  --tw-text-opacity: 1;
  color: rgb(125 60 255 / var(--tw-text-opacity, 1));
}
.text-\[\#828283\] {
  --tw-text-opacity: 1;
  color: rgb(130 130 131 / var(--tw-text-opacity, 1));
}
.text-\[\#8b8894\] {
  --tw-text-opacity: 1;
  color: rgb(139 136 148 / var(--tw-text-opacity, 1));
}
.text-\[\#919292\] {
  --tw-text-opacity: 1;
  color: rgb(145 146 146 / var(--tw-text-opacity, 1));
}
.text-\[\#92400E\] {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-\[\#92400E\]\/70 {
  color: rgb(146 64 14 / 0.7);
}
.text-\[\#9A3412\] {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-\[\#9CA3AF\] {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-\[\#9D174D\] {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}
.text-\[\#9ea5ad\] {
  --tw-text-opacity: 1;
  color: rgb(158 165 173 / var(--tw-text-opacity, 1));
}
.text-\[\#A16207\] {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-\[\#A3A3A3\] {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-\[\#AEA9B4\] {
  --tw-text-opacity: 1;
  color: rgb(174 169 180 / var(--tw-text-opacity, 1));
}
.text-\[\#B42318\] {
  --tw-text-opacity: 1;
  color: rgb(180 35 24 / var(--tw-text-opacity, 1));
}
.text-\[\#BEBFBF\] {
  --tw-text-opacity: 1;
  color: rgb(190 191 191 / var(--tw-text-opacity, 1));
}
.text-\[\#D1D5DB\] {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-\[\#DC2626\] {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-\[\#EF8044\] {
  --tw-text-opacity: 1;
  color: rgb(239 128 68 / var(--tw-text-opacity, 1));
}
.text-\[\#F0473E\] {
  --tw-text-opacity: 1;
  color: rgb(240 71 62 / var(--tw-text-opacity, 1));
}
.text-\[\#FFB73D\] {
  --tw-text-opacity: 1;
  color: rgb(255 183 61 / var(--tw-text-opacity, 1));
}
.text-\[\#FFFFFF\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-\[\#a0a1a1\] {
  --tw-text-opacity: 1;
  color: rgb(160 161 161 / var(--tw-text-opacity, 1));
}
.text-\[\#a3a3a3\] {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-\[\#dc2626\] {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-\[\#dcddde\] {
  --tw-text-opacity: 1;
  color: rgb(220 221 222 / var(--tw-text-opacity, 1));
}
.text-\[var\(--cb-as-muted\2c \#6b7280\)\] {
  color: var(--cb-as-muted,#6b7280);
}
.text-\[var\(--cb-content-accent\2c \#5500FF\)\] {
  color: var(--cb-content-accent,#5500FF);
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(251 188 5 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-black-900 {
  --tw-text-opacity: 1;
  color: rgb(1 1 4 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue_gray-900 {
  --tw-text-opacity: 1;
  color: rgb(52 52 56 / var(--tw-text-opacity, 1));
}
.text-current {
  color: currentColor;
}
.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-fuchsia-800 {
  --tw-text-opacity: 1;
  color: rgb(134 25 143 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(200 198 202 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(121 117 127 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(52 168 83 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-inherit {
  color: inherit;
}
.text-lime-800 {
  --tw-text-opacity: 1;
  color: rgb(63 98 18 / var(--tw-text-opacity, 1));
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(235 67 53 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-700\/90 {
  color: rgb(185 28 28 / 0.9);
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}
.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-white-A700 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white-A700\/70 {
  color: rgb(255 255 255 / 0.7);
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.no-underline {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}
.decoration-current {
  -webkit-text-decoration-color: currentColor;
          text-decoration-color: currentColor;
}
.decoration-gray-400 {
  -webkit-text-decoration-color: #c8c6ca;
          text-decoration-color: #c8c6ca;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(200 198 202 / var(--tw-placeholder-opacity, 1));
}
.caret-\[\#191919\] {
  caret-color: #191919;
}
.accent-\[\#5500FF\] {
  accent-color: #5500FF;
}
.\!opacity-100 {
  opacity: 1 !important;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-95 {
  opacity: 0.95;
}
.\!shadow-none {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[-8px_0_16px_-4px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: -8px 0 16px -4px rgba(0,0,0,0.1);
  --tw-shadow-colored: -8px 0 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[-8px_0_24px_-4px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: -8px 0 24px -4px rgba(0,0,0,0.08);
  --tw-shadow-colored: -8px 0 24px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-8px_30px_rgba\(15\2c 23\2c 42\2c 0\.08\)\] {
  --tw-shadow: 0 -8px 30px rgba(15,23,42,0.08);
  --tw-shadow-colored: 0 -8px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_2px_rgb\(255\2c 255\2c 255\)\] {
  --tw-shadow: 0 0 0 2px rgb(255,255,255);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1\.6px_3\.3px_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
  --tw-shadow: 0 1.6px 3.3px rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 1.6px 3.3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_10px_40px_-10px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 10px 40px -10px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 10px 40px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_12px_40px_-8px_rgba\(15\2c 23\2c 42\2c 0\.18\)\2c 0_4px_12px_-4px_rgba\(15\2c 23\2c 42\2c 0\.08\)\] {
  --tw-shadow: 0 12px 40px -8px rgba(15,23,42,0.18),0 4px 12px -4px rgba(15,23,42,0.08);
  --tw-shadow-colored: 0 12px 40px -8px var(--tw-shadow-color), 0 4px 12px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] {
  --tw-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(15\2c 23\2c 42\2c 0\.04\)\] {
  --tw-shadow: 0 4px 16px rgba(15,23,42,0.04);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_24px_rgba\(0\2c 0\2c 0\2c 0\.08\)\] {
  --tw-shadow: 0 6px 24px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 6px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_24px_rgba\(15\2c 23\2c 42\2c 0\.18\)\] {
  --tw-shadow: 0 8px 24px rgba(15,23,42,0.18);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_30px_rgba\(15\2c 23\2c 42\2c 0\.12\)\] {
  --tw-shadow: 0 8px 30px rgba(15,23,42,0.12);
  --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_1px_1\.5px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c 0px_1px_1px_0px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 1px 1.5px 0px rgba(0,0,0,0.10),0px 1px 1px 0px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 1px 1.5px 0px var(--tw-shadow-color), 0px 1px 1px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_1px_2px_-1px_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c 0px_1px_3px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 1px 2px -1px rgba(0,0,0,0.10),0px 1px 3px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 1px 2px -1px var(--tw-shadow-color), 0px 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_1px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\)\] {
  --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,0);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_1px_2px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_4px_16px_rgba\(15\2c 23\2c 42\2c 0\.06\)\] {
  --tw-shadow: 0px 4px 16px rgba(15,23,42,0.06);
  --tw-shadow-colored: 0px 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_4px_16px_rgba\(15\2c 23\2c 42\2c 0\.08\)\] {
  --tw-shadow: 0px 4px 16px rgba(15,23,42,0.08);
  --tw-shadow-colored: 0px 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_4px_6px_-1px_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c 0px_2px_4px_-2px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
  --tw-shadow: 0px 4px 6px -1px rgba(0,0,0,0.10),0px 2px 4px -2px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 4px 6px -1px var(--tw-shadow-color), 0px 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0px_4px_8px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0px_0px_4px_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: 0px 4px 8px rgba(0,0,0,0.06),0px 0px 4px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0px 4px 8px var(--tw-shadow-color), 0px 0px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[8px_0_16px_-4px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: 8px 0 16px -4px rgba(0,0,0,0.1);
  --tw-shadow-colored: 8px 0 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_1px_0_0_rgba\(0\2c 0\2c 0\2c 0\.04\)\] {
  --tw-shadow: inset 1px 0 0 rgba(0,0,0,0.04);
  --tw-shadow-colored: inset 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-gray-900\/10 {
  --tw-shadow-color: rgb(17 24 39 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.outline-2 {
  outline-width: 2px;
}
.-outline-offset-2 {
  outline-offset: -2px;
}
.outline-\[\#5500ff\] {
  outline-color: #5500ff;
}
.\!ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-\[\#5500FF\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(85 0 255 / var(--tw-ring-opacity, 1));
}
.ring-\[\#5500FF\]\/20 {
  --tw-ring-color: rgb(85 0 255 / 0.2);
}
.ring-\[\#6366F1\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}
.ring-\[\#EDEFF2\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(237 239 242 / var(--tw-ring-opacity, 1));
}
.ring-gray-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity, 1));
}
.ring-gray-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}
.ring-gray-200\/80 {
  --tw-ring-color: rgb(229 231 235 / 0.8);
}
.ring-gray-300\/60 {
  --tw-ring-color: rgb(209 213 219 / 0.6);
}
.ring-transparent {
  --tw-ring-color: transparent;
}
.\!ring-offset-0 {
  --tw-ring-offset-width: 0px !important;
}
.ring-offset-0 {
  --tw-ring-offset-width: 0px;
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.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);
}
.brightness-0 {
  --tw-brightness: brightness(0);
  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);
}
.drop-shadow-\[0_2px_10px_rgba\(15\2c 23\2c 42\2c 0\.12\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 10px rgba(15,23,42,0.12));
  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);
}
.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  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);
}
.grayscale-\[0\.15\] {
  --tw-grayscale: grayscale(0.15);
  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);
}
.grayscale-\[0\.2\] {
  --tw-grayscale: grayscale(0.2);
  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);
}
.invert {
  --tw-invert: invert(100%);
  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) !important;
}
.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);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -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);
}
.backdrop-blur-\[2\.5px\] {
  --tw-backdrop-blur: blur(2.5px);
  -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);
}
.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  -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);
}
.transition {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c opacity\] {
  transition-property: background-color,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[filter\2c opacity\] {
  transition-property: filter,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\] {
  transition-property: left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[max-width\2c opacity\2c margin-left\] {
  transition-property: max-width,opacity,margin-left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[max-width\2c opacity\2c margin\] {
  transition-property: max-width,opacity,margin;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[max-width\2c opacity\] {
  transition-property: max-width,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[transform\2c opacity\] {
  transition-property: transform,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-\[cubic-bezier\(0\.22\2c 1\2c 0\.36\2c 1\)\] {
  transition-timing-function: cubic-bezier(0.22,1,0.36,1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[--tw-ring-offset-shadow\:0_0_\#0000\] {
  --tw-ring-offset-shadow: 0 0 #0000;
}
.\[--tw-ring-shadow\:0_0_\#0000\] {
  --tw-ring-shadow: 0 0 #0000;
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
          appearance: textfield;
}
.\[filter\:drop-shadow\(0_0_0_2px_rgb\(255_255_255\)\)_drop-shadow\(0_0_0_1px_rgb\(255_255_255\)\)\] {
  filter: drop-shadow(0 0 0 2px rgb(255 255 255)) drop-shadow(0 0 0 1px rgb(255 255 255));
}
.\[grid-template-columns\:var\(--cols-mobile\)\] {
  grid-template-columns: var(--cols-mobile);
}
.\[grid-template-columns\:var\(--grid-cols-mobile\)\] {
  grid-template-columns: var(--grid-cols-mobile);
}
.\[overscroll-behavior-y\:contain\] {
  overscroll-behavior-y: contain;
}
.\[scrollbar-gutter\:stable\] {
  scrollbar-gutter: stable;
}
.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

* {
  box-sizing: border-box;
  line-height: normal;
  /* scrollbar-gutter: stable; */
}

html,
body {
  height: 100%;
  margin: 0;
}

@keyframes parallax {
  from {
    /* The initial position of the background */
    background-position: center 0;
  }
  to {
    /* The final position, calculated using the scroll distance and speed */
    background-position: center calc(100vh * var(--parallax-speed));
  }
}

body {
  font-family: "Roboto", sans-serif !important;
  margin: 0;
  padding: 0;
}

.dhiwise-code {
  min-height: 100%;
}

.common-pointer {
  cursor: pointer;
}

table {
  border-spacing: 0;
  width: 100%;
}

.common-select {
  z-index: 10000;
}

.react-datepicker-popper {
  z-index: 100000 !important;
}

.drawable-icon {
  position: absolute;
  margin: auto;
  z-index: 1000;
}

.input-wrap {
  position: relative;
}

option {
  color: #000;
}

.table-wrap {
  overflow: auto;
}

input:focus {
  outline: none;
}

/* react-mentions' internal <textarea> isn't covered by the input:focus rule
   above (it's a textarea, not an input) — the app relies on the outer field
   wrapper's own border for focus styling, not the browser's native ring. */
.mentions-input textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

.ReactModal__Body--open {
  overflow: hidden;
}

.slider-indicator:first-child {
  margin-left: 0;
}

.slider-indicator:last-child {
  margin-right: 0;
}

.rc-drawer-content-wrapper {
  width: 100% !important;
}

.rc-drawer-right .rc-drawer-content-wrapper {
  display: flex;
  justify-content: flex-end;
}

.rc-drawer-left .rc-drawer-content-wrapper {
  display: flex;
  justify-content: flex-start;
}

.ReactModal__Overlay {
  z-index: 1051;
}

ul li a {
  display: block;
}

.mobile-menu div {
  height: 1.5px;
  width: 20px;
  background-color: #000;
  margin: 4px 0;
}

.mobile-menu {
  display: none;
  cursor: pointer;
}

.header-row {
  align-items: center;
  justify-content: space-between;
  display: flex;
}

@media only screen and (min-width: 200px) and (max-width: 550px) {
  .mobile-menu {
    display: block;
  }

  .header-row {
    width: 100% !important;
  }

  .display-block {
    display: block;
  }

  .display-none {
    display: none;
  }

  .common-row-list > ul {
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: wrap;
  }
}

.menu-close-icon {
  position: absolute;
  right: 16px;
  top: 16px;
}

.menu-overlay {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  position: fixed;
  left: 0px;
  top: 0px;
}

.close-line1 {
  transform: translate(0, 6px) rotate(-45deg) skewX(0) skewY(0) scaleX(1)
    scaleY(1);
}

.close-line2 {
  transform: translate(0, 0) rotate(45deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
}

.common-row-list > ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  flex-grow: 1;
}

.common-column-list > ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
}

.common-column-list li {
  width: 100%;
}

/* scroll */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: transparent;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #21005d14;
  border-radius: 10px;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 0, 0, 0.23) !important;
}

.MuiTableCell-head {
  border-bottom: none !important;
}

.MuiTableHead-root {
  background-color: #fafbfc;
}

/* .highlight-menu {
  background-color: var(--brand-primary-light-color) !important;
  color: var(--brand-primary-color) !important;
  border-radius: 10px;
}
 */
.highlight-menu-text {
  color: var(--brand-primary-color) !important;
  font-size: 15px;
  font-weight: 500 !important;
}

.Mui-checked {
  /* color: var(--brand-primary-color) !important; */
  color: #5500ff;
}

.ps-menuitem-root.highlight-menu .ps-menu-button {
  color: white;
}

.css-honxw6 {
  width: 10px !important;
  height: 10px !important;
}

.css-jn69v9 {
  width: 10px !important;
  height: 10px !important;
}

.transition-div {
  /* transition: all 0.9s ease; */
}

.flag-dropdown {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  background-color: transparent !important;
  border: none !important;
  border-radius: 3px 0 0 3px;
}

.react-tel-input .form-control {
  width: 40px !important;
  border: transparent !important;
}

.react-tel-input {
  /* width: 100px !important; */
}

.sub-menu-right > .pro-inner-list {
  /* right: calc(100% + 20px);
  left: auto !important; */
}

.react-calendar {
  width: 260px !important;
}

.custom-menu-item:hover {
  /* background-color: var(--brand-secondary-color) !important; */
  stroke: var(--brand-primary-color) !important;
  stroke-width: 0px !important;
  border-radius: 5px;
  color: var(--brand-primary-color) !important;
  font-weight: 500;
  cursor: pointer;
}

.custom-folder:hover {
  background-color: var(--brand-neutral-color) !important;
  stroke: var(--brand-primary-color) !important;
  stroke-width: 0px !important;
  color: var(--brand-primary-color) !important;
  font-weight: 400;
  cursor: pointer;
}

.custom-menu-item.sidebar:hover {
  background-color: var(--brand-neutral-color) !important;
}

.MuiButtonBase-root.MuiIconButton-root {
  /* display: none; */
}

[data-testid="ArrowDropDownIcon"] {
  display: none !important;
}

.custom-menu-item {
  /* color: #79757F !important; */
}

.bg-red-custom {
  background-color: #ffffff !important;
}

/* .MuiStack-root{
  padding-top: 0px !important;
} */
.MuiInputBase-input {
  font-family: Roboto !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 18.75px !important;
  letter-spacing: 0.5px !important;
}

.custome-dropdown .MuiFormControl-root .MuiSelect-outlined {
  padding: 0px !important;
  padding-top: 10px !important;
  padding-left: 10px !important;
  color: #79757f !important;
}

.custome-dropdown .MuiFormControl-root .MuiSvgIcon-root {
  margin-top: 2px !important;
}

/* dropdown css */

.Mui-selected.MuiMenuItem-root {
  color: #6041d8 !important;
  /* border-radius: 8px !important;s */
  background-color: #fafbfc !important;
  /* padding: 10px !important; */
  /* margin-bottom: 23px !important; */
  margin-left: 10px !important;
  margin-right: 10px !important;
  /* border-top: 1px solid #C8C6CA !important; */
}

.Mui-selected.MuiMenuItem-root-dark {
  color: #6041d8 !important;
  /* border-radius: 8px !important;s */
  background-color: #fafbfc !important;
  /* padding: 10px !important; */
  /* margin-bottom: 23px !important; */
  margin-left: 10px !important;
  margin-right: 10px !important;
  /* border-top: 1px solid #C8C6CA !important; */
}

.MuiMenuItem-root:hover {
  color: var(--brand-primary-color) !important;
  background-color: var(--brand-neutral-color) !important;
  /* padding: 10px !important; */
  /* margin-bottom: 23px !important; */
  /* margin-left: 10px !important;
  margin-right: 10px !important; */
}

.MuiMenuItem-root {
  color: #79757f !important;
  background-color: #ffffff !important;
  /* padding: 10px !important; */
  /* margin-bottom: 23px !important; */
  margin-left: 10px !important;
  margin-right: 10px !important;
  /* border-top: 1px solid #C8C6CA !important; */
  font-family: Roboto;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0.5px !important;
  text-align: justified !important;
}

.MuiMenuItem-root:first-child {
  border-top: none !important;
}

.MuiMenu-list {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.cal-cust .MuiStack-root {
  position: absolute;
  width: 100%;
  top: -8px;
}

.side-bar-box-shadow {
  box-shadow: 0px 0px 0px -1.65px #0000000d;

  box-shadow: 0px 8.26px 12.39px -2.48px #0000001a;

  box-shadow: 0px 3.3px 5px 0.83px #0000000d;
}

.login-sidebar {
  background: linear-gradient(90deg, #ffffff 47.68%, #b2b2b2 93.39%);
}

.MuiTooltip-tooltip {
  background-color: #ffff !important;
  border: none !important;
  padding: 0px !important;
}

:root {
  --hover-bg-color-start: #795beb;
  --custom-color: #3f0fb7;
  --primary-light-color: #f7f1ff;
  --secondary-color: #ca7af0;
  --custom-color-hover: #7654ee;
  --custom-color-greadent-hover: #ca7af0;

  --default-primary-color: #5500ff;
  --default-secondary-color: #f4eeff;
  --default-primary-bg-color: #6042d8;

  --brand-primary-color: #5500ff;
  --brand-primary-light-color: #f7f1ff;
  --brand-secondary-color: #86bde9;
  --brand-secondary-text-color: #000000;
  --brand-neutral-color: #fafbfc;

  --brand-primary2-dark-color: #101012;
  --brand-secondary-dark-color: #2e2e31;
  --brand-neutral-dark-color: #000;
  --brand-editor-background: #141416;
  --parallax-speed: 0.2;

  --h1-font: "Roboto";
  --h1-align: "left";
  --h1-color: "#000000";

  --h2-font: "Roboto";
  --h2-align: "left";
  --h2-color: "#000000";

  --h3-font: "Roboto";
  --h3-align: "left";
  --h3-color: "#000000";

  --para-font: "Roboto";
  --para-align: "left";
  --para-color: "#000000";
}

.secondart-bg-color {
  background-color: var(--secondary-color) !important;
}

.stroke-custom-color {
  color: var(--brand-primary-color) !important;
}

.fill-custom-color {
  color: var(--brand-primary-color) !important;
}

.text-custom-color {
  stroke: var(--brand-primary-color) !important;
  stroke-width: 0px !important;
  color: var(--brand-primary-color) !important;
}

.onhover-text-custom-color:hover {
  color: var(----brand-primary-color) !important;
}

.hover-Bg-color {
  background: linear-gradient(
      180deg,
      var(--hover-bg-color-start) 40.79%,
      var(--custom-color-greadent-hover) 115.79%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 88.79%,
      rgba(64, 30, 149, 0.46) 153.95%
    );
}

.hover-Bg-color:hover {
  background: linear-gradient(
    180deg,
    var(--brand-primary-color) -161.84%,
    var(--custom-color-hover) -52.78%,
    var(--custom-color-greadent-hover) 190.94%
  );
}

.w-notification-msg {
  width: calc(100% - 36px);
}

.h-screen-minus-200 {
  height: calc(100vh - 125px);
}

.h-screen-minus-228 {
  height: calc(100vh - 228px);
}

.h-screen-minus-222 {
  height: calc(100vh - 222px);
}

.h-screen-minus-188 {
  height: calc(100vh - 188px);
}

.h-screen-minus-60 {
  height: calc(100vh - 62px);
}

.w-screen-minus-194 {
  width: calc(100% - 194px) !important;
  overflow-x: hidden;
  /* Hide horizontal scrollbar */
}

.cal-to-create {
  height: calc(100vh - 228px) !important;
  overflow: auto;
}

.cal-to-create-dontHave {
  height: calc(100vh - 140px) !important;
  overflow: auto;
}

.cal-to-folder {
  height: calc(100vh - 240px) !important;
  overflow: auto;
}

.cal-to-del {
  height: calc(100vh - 140px) !important;
  overflow: auto;
}

@media (max-width: 767px) {
  .cal-to-create {
    height: 100vh !important;
    overflow: auto;
  }

  .cal-to-del {
    height: 100vh !important;
    overflow: auto;
  }
}

.cal-to-library {
  height: calc(100vh - 140px) !important;
  overflow: auto;
}

#outlined-basic-pass {
  height: 14px;
}

#demo-simple-select-lan {
  height: 14px;
  padding-bottom: 10px;
}

@media only screen and (max-width: 1360px) {
  .scrollerToBill {
    width: 70%;
  }
}

@media only screen and (max-width: 855px) {
  .scrollerToBill {
    width: 65%;
  }
}

@media only screen and (max-width: 615px) {
  .scrollerToBill {
    width: 55%;
  }
}

.CustomeCss
  .MuiAutocomplete-root.MuiAutocomplete-hasClearIcon
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
  padding-right: 70px !important;
  padding-left: 40px !important;
  padding-top: 13px !important;
}

/* .CustomeCss .MuiAutocomplete-root.MuiAutocomplete-hasClearIcon .MuiFormControl-root.MuiFormControl-fullWidth .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
  height: 40px !important;
} */

/* .CustomeCss .MuiAutocomplete-root.MuiAutocomplete-hasClearIcon .MuiFormControl-root.MuiFormControl-fullWidth .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary .MuiInputBase-input{
  height: 40px !important;
} */

.CustomeCss
  .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiInputBase-root.MuiOutlinedInput-root
  .MuiInputBase-input {
  padding-right: 70px !important;
  padding-left: 40px !important;
  padding-top: 13px !important;
}

/* .CustomeCss .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon .MuiFormControl-root.MuiFormControl-fullWidth .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
  height: 40px !important;
} */

/* .CustomeCss .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon .MuiFormControl-root.MuiFormControl-fullWidth .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary .MuiInputBase-input{
 height: 10px !important;
} */

/* GrapesJS */

/* .gjs-blocks-cs.gjs-one-bg.gjs-two-color {
  width: 200px;
  height: 100vh;
  overflow: auto;
}

.editor-clm {
  display: flex;
  flex-direction: column;
}

.gjs-blocks-c {
  justify-content: center;
}

.gjs-block {
  width: 100% !important;
}

.gjs-blocks-cs {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top: none;
}

.gjs-pn-views-container {
  display: none;
}

.gjs-pn-views {
  border-bottom: 0px solid var(--gjs-main-dark-color);
  right: 0;
  width: var(--gjs-left-width);
  z-index: 3;
}

.gjs-one-bg {
  background-color: #242A3B;
}

.gjs-three-bg {
}

.gjs-four-color,
.gjs-four-color-h:hover {
  color: #1E8FE1;
}

.gjs-pn-panel.gjs-pn-views-container.gjs-one-bg.gjs-two-color {
  display: none !important;
}

.gjs-pn-panel.gjs-pn-views.gjs-one-bg.gjs-two-color {
  display: none !important;
}

.gjs-pn-panel.gjs-pn-commands.gjs-one-bg.gjs-two-color {
  width: 100% !important;
}

.gjs-pn-panel.gjs-pn-options.gjs-one-bg.gjs-two-color {
  right: 0 !important;
}

.gjs-cv-canvas {
  width: 100% !important;
}

.input-search {
  padding-left: 8px;
  border-radius: 7px;
  width: 90%;
  height: 42px;
  background: #444444;
  color: white;
  border: 2px solid #3d3d3d;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #1f1f1f;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1a1a1a;
}
.tooltip-component__body,[data-tooltip]::after {
  background-color: red !important;
}

.gjs-editor-cont{
  height: 100vh !important;
} */

.gjs-frame {
  /* border: 2px solid #6041d8 !important; */
  overflow: hidden !important;
  padding-inline: 15px;
  position: relative !important;
  z-index: 0 !important;
}

iframe {
  position: relative !important;
  z-index: 9999 !important;
  /* Make the iframe appear above */
}

/* CuStomeCss */
.CuStomeCss .MuiStack-root .MuiTextField-root {
  width: 165px;
  min-width: 165px;
}

.filter-sidebar {
  max-height: calc(100vh - 175px);
  overflow: auto;
}

.gjs-off-prv.fa.fa-eye-slash {
  display: none !important;
}

.cal-to-layersList {
  /* height: calc(100vh - 155px) !important;
  overflow: auto; */
}

.create-cal {
  width: calc(100% - 232px);
  max-width: none !important;
}

.gradient-text {
  background: linear-gradient(90.71deg, #8870e9 46.29%, #8d34e7 102.37%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.gradient-top-to-bottom-text {
  background: linear-gradient(180deg, #8870e9 0%, #8d34e7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.create-build-cal {
  height: calc(100vh - 100px);
}

.greapesjs_img-build-cal {
  height: calc(100vh - 330px);
}

.draggable-item-container {
  position: relative;
  cursor: move;
}

.hover-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 148px;
  height: 100%;
  background-color: rgba(6, 3, 35, 0.3);
  border-radius: 3.56px;
  justify-content: center;
  align-items: center;
}

.draggable-item-container:hover .hover-overlay {
  display: flex;
}

.hover-text {
  width: 100px;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  color: #f0edf1;
}

.g.relative
  .MuiTypography-root.MuiTypography-body1.MuiMultiInputDateRangeField-separator {
  display: none !important;
}

.g.relative .MuiFormControl-root.MuiFormControl-fullWidth.MuiTextField-root {
  margin: 0 !important;
}

.center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.MuiStack-root.MuiMultiInputDateRangeField-root
  > div:first-child
  .MuiOutlinedInput-notchedOutline {
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.MuiStack-root.MuiMultiInputDateRangeField-root
  > div:last-child
  .MuiOutlinedInput-notchedOutline {
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-shrink {
  color: #79757f;
}

.custom-autocomplete .MuiAutocomplete-endAdornment {
  display: none;
}

.MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-fullWidth.MuiInputBase-formControl {
  padding-right: 7px !important;
}

.Mui-error .MuiOutlinedInput-notchedOutline {
  /* border-color: #d32f2f !important; */
}

.MuiAutocomplete-endAdornment.css-p1olib-MuiAutocomplete-endAdornment {
  display: none !important;
}

.logo-save-btn {
  height: calc(100vh - 160px);
}

.img-save-btn {
  height: calc(100vh - 430px);
}

.custome-small-input
  .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon
  .MuiFormControl-root.MuiFormControl-fullWidth {
  height: 32px !important;
}

.custome-small-input
  .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiInputBase-root {
  height: 32px !important;
}

.custome-small-input
  .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiInputBase-root
  .MuiInputBase-input {
  font-size: 12px !important;
}

.custome-for-color
  .custome-for-color
  .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon
  .MuiFormControl-root.MuiFormControl-fullWidth {
  height: 38px !important;
}

.custome-for-color
  .MuiAutocomplete-root.MuiAutocomplete-hasPopupIcon
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiInputBase-root {
  height: 38px !important;
}

.library-save-btn {
  height: calc(100vh - 390px);
}

.colors-save-btn {
  height: calc(100vh - 150px);
}

.img-cal-full {
  height: calc(100vh - 140px);
}

.MuiList-root.MuiList-padding.MuiMenu-list {
  background-color: #ffffff;
}

.settinges
  .w-full.relative
  .MuiAutocomplete-hasPopupIcon
  .MuiFormControl-fullWidth
  .MuiInputBase-root.MuiOutlinedInput-root
  .MuiOutlinedInput-notchedOutline {
  border: 0px !important;
}

.MuiBackdrop-root.MuiModal-backdrop {
  background-color: transparent !important;
}

.imgUstomeTitle.MuiBox-root {
  top: 0;
  right: 0;
  left: unset;
  height: 100vh;
  max-height: 100vh;
  position: fixed;
  width: 424px;
  transform: none;
  z-index: 99999;
  border: unset;
}

.imgUstome.MuiBox-root {
  top: 0;
  right: 0;
  left: unset;
  height: 100vh;
  max-height: 100vh;
  width: 424px;
  transform: none;
  border: unset;
}

.cusome_img_search {
  height: 37px !important;
}

.cusome_img_search
  .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
  height: 37px !important;
}

.cusome_img_search
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiInputBase-root.MuiOutlinedInput-root
  .MuiSelect-nativeInput {
  bottom: 7px;
}

.cusome_img_search
  .MuiFormControl-root.MuiFormControl-fullWidth
  .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl {
  top: -7px;
}

.cusome_img_search .MuiFormControl-root {
  margin: 0px !important;
}

.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.ProseMirror h1.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.ProseMirror h2.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.ProseMirror h3.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.ProseMirror h4.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.ProseMirror h5.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.ProseMirror h6.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #848688;
  pointer-events: none;
  height: 0;
}

.customTiptapInput {
  height: -webkit-fit-content;
  height: fit-content;
  padding-inline: 0.5rem;
  padding-block: 0.2rem;
  background-color: rgb(253, 248, 249);
}

.customTiptapInput:focus {
  outline: none;
}

.MuiAutocomplete-listbox {
  background-color: #ffff;
}

.gjs-one-bg {
  background-color: white !important;
}

/* preview default icon */
/* .gjs-badge {
  display: none !important;
} */

/* div.gjs-selected{
  outline: 0px !important;
}
.gjs-cv-canvas .gjs-highlighter {
  outline-width: 0px !important;
}

/* Hide the toolbar container */
.gjs-toolbar {
  display: none !important;
}

/* Fade Effect */
.fade-effect {
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}

.fade-effect.animate {
  opacity: 0;
}

/* Slide Effect */
.slide-effect {
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

.slide-effect.animate {
  transform: translateX(-100%);
}

/* Focus Effect */
.focus-effect {
  filter: blur(0);
  transition: filter 0.6s ease-in-out;
}

.focus-effect.animate {
  filter: blur(10px);
}

.gjs-toolbar {
  width: 50px;
  gap: 8px !important;
  border-radius: 5.84px !important;
  display: flex;
  background-color: #ffffff !important;
  /* border: 0.5px solid !important; */
  color: #79757f !important;
  top: 0px !important;
  z-index: 9999 !important;
  /* right: 0px; */
  left: 92% !important;
}

.gjs-right-sidebar {
  position: relative !important;
  z-index: 1 !important;
  /* border: 1px solid cyan; */
}

.gjs-column-m {
  width: 100%;
  position: relative;
  padding-inline: 10px;
  /* border: 1px solid red; */
}

.gjs-toolbar-items {
  border: 0.5px solid !important;
  border-radius: 5.84px !important;
}

.gjs-highlighter {
  outline: unset !important;
}

.gjs-toolbar .gjs-toolbar-items {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.gjs-toolbar .gjs-toolbar-items .gjs-toolbar-item {
  height: 40px !important;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.gjs-toolbar .gjs-toolbar-items .gjs-toolbar-item svg {
  width: 18px;
}

/* TableMUIs.css */

.animation-container {
  opacity: 0;
  transform: translateX(100%);
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}

.slide-in-left {
  animation-name: slideInLeft;
}

.slide-in-right {
  animation-name: slideInRight;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#attempts-exceeded-dialog-title {
  padding: 0px;
  padding-bottom: 20px;
}

.MuiFormControl-root .MuiFormGroup-root .MuiFormControlLabel-root .Mui-checked {
  color: var(--brand-primary-color) !important;
}

.MuiFormControl-root
  .MuiFormGroup-root
  .MuiFormControlLabel-root
  .MuiTypography-root {
  color: #79757f !important;
}

.input-Retries {
  border: 1px solid #f0edf1;
  border-radius: 10px;
  padding: 0 10px;
}

.dragable-hide {
  display: none;
}

.selected_component .dragable-hide {
  display: block;
}

.icon-custom-color
  .MuiStack-root
  .MuiTypography-root
  .MuiBreadcrumbs-ol
  .MuiBreadcrumbs-separator {
  color: #eaeaea !important;
}

.gjs-placeholder.horizontal,
.gjs-com-placeholder.horizontal,
.gjs-placeholder.horizontal {
  border-color: rgba(0, 0, 0, 0) var(--brand-primary-color) !important;
}

.gjs-placeholder.vertical,
.gjs-com-placeholder.vertical,
.gjs-placeholder.vertical {
  border-color: var(--brand-primary-color) rgba(0, 0, 0, 0) !important;
}

.gjs-placeholder-int,
.gjs-com-placeholder-int,
.gjs-nv-placeholder-int {
  background-color: var(--brand-primary-color) !important;
}

.gjs-selected-parent {
  outline: 2px solid var(--brand-primary-color) !important;
}

.custom_lable {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
}

.MuiCard-root {
  box-shadow: none !important;
  border: 1px solid #eeeeee !important;
  border-radius: 6px !important;
}

.creation_iframe {
  height: calc(100% - 120px);
}

.dashbord_hight {
  /* padding-top: 10px; */
  overflow: auto;
  height: calc(100vh - 72px) !important;
}

.preview_page {
  overflow: auto;
  height: calc(100vh - 79px) !important;
}

.custom-down-chart .MuiInputBase-root .MuiSelect-select {
  z-index: 9;
  min-height: 10px;
  padding: 9px 9px 5px 15px;
}

.custom-down-chart .MuiInputBase-root .MuiSelect-icon {
  z-index: 9;
  padding-top: 4px;
}

.custom-down-chart.bg .MuiInputBase-root .MuiOutlinedInput-notchedOutline {
  background-color: #f4f7fe;
}

.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8 {
  box-shadow: 0px 8.26px 12.39px -2.48px #0000001a;
}

div.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
  /* box-shadow: 0px 8.26px 12.39px -2.48px #0000001A; */
}

.shadow-md {
  box-shadow: 0px 8.26px 12.39px -2.48px #0000001a !important;
}

.shadow-lg {
  box-shadow: 0px 8.26px 12.39px -2.48px #0000001a !important;
}

.custome-multi-dropdown .MuiMenuItem-root {
  margin: 0px !important;
}

.custome-nav {
  margin: 0px !important;
}

[data-testid="CloseIcon"] {
  display: none;
}

.expandable-content {
  /* max-height: 0; */
  /* opacity: 0; */
  /* overflow: hidden; */
  transform-origin: top;
  transform: rotateX(-2deg);
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out;
}

.expandable-content.expanded {
  max-height: 200px;
  /* Adjust this to fit your content */
  opacity: 1;
  transform: rotateX(0deg);
}

.MuiDateRangeCalendar-root > div:first-of-type {
  display: none !important;
}

.foter-shadow-t-md {
  box-shadow: 0px -2px 7px 0px rgba(0, 0, 0, 0.05);
}

button[aria-label="Clear"][title="Clear"] {
  display: none;
}

/* Below styles for CraftJS */
ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  /* margin-top: 0.5rem; */
  /* margin-bottom: 0.5rem; */
}

ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  /* margin-top: 0.5rem;
  margin-bottom: 0.5rem; */
}

li {
  /* margin-bottom: 0.25rem; */
}

.tiptapInput:focus {
  outline: none;
}

.prosemirror-dropcursor-inline {
  background-color: purple !important;
  height: 4px;
  border-radius: 2px;
  position: absolute;
}

/* Base card style */
.card {
  position: relative;
  border: 1px solid #c9c4d0;
  border-radius: 0.375rem;
  transition: border-color 0.2s ease;
}

/* On hover, hide the default border */
.card.hovered {
  border-color: transparent;
}

/* Pseudo-element overlay for the custom dashed border */
.card.hovered::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9' stroke='%23C9C4D0FF' stroke-width='1' stroke-dasharray='10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  pointer-events: none;
}

.AI-Dec-h {
  height: calc(100% - 160px);
}

.chart-scroll {
  height: calc(100vh - 400px);
  overflow: auto;
}

.rotate-90 {
  display: inline-block;
  transform: rotate(180deg);
}

.h-show-as-fill {
  height: calc(100vh - 264px);
  overflow: auto;
}

.h-show-AI-fill {
  height: calc(100vh - 190px);
  overflow: auto;
}
/* Below styles for CraftJS */
.tiptapInput ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  /* margin-top: 0.5rem;
  margin-bottom: 0.5rem; */
  cursor: text !important;
}

.tiptapInput ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  /* margin-top: 0.5rem;
  margin-bottom: 0.5rem; */
  cursor: text !important;
}

.tiptapInput li {
  /* margin-bottom: 0.25rem; */
  cursor: text !important;
}

.tiptapInput {
  white-space: pre-wrap;
  outline: none !important;
  border: none !important;
}

.tiptapInput:focus {
  outline: none !important;
  border: none !important;
}

.ProseMirror-focused {
  outline: none !important;
}

.bubble-select select {
  padding-right: 10px !important;
  /* Adjust as needed */
  text-indent: 0 !important;
  /* Reset indentation */
}

.code-bubble-class {
  padding-block: 4px;
  padding-inline: 10px;
  border-radius: 5px;
  border: 1px solid #7654ee;
  background-color: #e0d9f8;
}

.drawer-transition {
  transition: transform 0.3s ease-in-out;
}

/* AI preview screen */

/* step 4 AI font change */
.aipreview p,
.aipreview span,
.aipreview li {
  font-family: var(--body-font) !important;
  /* color: var(--secondary-color); */
}
.aipreview h1,
.aipreview h2,
.aipreview h3,
.aipreview h4,
.aipreview h5,
.aipreview h6 {
  font-family: var(--heading-font) !important;

  /* color: var(--primary-color); */
}

/* global design */
.craft-container .craft-row {
  margin-bottom: 0.25em !important;
}

.craft-container .craft-row .craft-text h3 {
  font-family: var(--heading-font);
  color: var(--h3-color);
  text-align: var(--h3-align);
}

.craft-container .craft-row .craft-text h2 {
  font-family: var(--heading-font);
  color: var(--h2-color);
  text-align: var(--h2-align);
}

.craft-container .craft-row .craft-text h3,
.craft-container .craft-row .craft-text h4,
.craft-container .craft-row .craft-text h5,
.craft-container .craft-row .craft-text h6 {
  font-family: var(--heading-font);
  color: var(--primary-color-text);
}

.craft-container .craft-row .craft-text p {
  font-family: var(--para-font);
  color: var(--para-color);
  text-align: var(--para-align);
}

.craft-text p {
  font-family: var(--para-font);
  color: var(--para-color);
  text-align: var(--para-align);
}

.craft-container .craft-row .craft-text div,
.craft-container .craft-row .craft-text li {
  font-family: var(--body-font);
  color: var(--secondary-color-text);
  font-size: clamp(1rem, 0.5rem + 1.2vw, 1.125rem) !important;
  /* margin-bottom: 0.5em !important; */
}

.craft-container .craft-row .craft-text span {
  font-size: inherit;
}

.craft-text h3,
.craft-text h4,
.craft-text h5,
.craft-text h6 {
  font-family: var(--heading-font);
  color: var(--primary-color-text);
}

.craft-text div,
.craft-text li {
  font-family: var(--body-font);
  color: var(--secondary-color-text);
  font-size: clamp(1rem, 0.5rem + 1.2vw, 1.125rem) !important;
  /* margin-bottom: 0.5em !important; */
}

.craft-text span {
  font-size: inherit;
}

.craft-container .craft-row .craft-text .tiptapInput h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 4.5rem) !important;
  font-weight: bold !important;
  font-family: var(--h1-font) !important;
  color: var(--h1-color);
  text-align: var(--h1-align);
  /* margin-bottom: 1em !important; */
}

.craft-container h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 4.5rem) !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--primary-color-text) !important;
}

.craft-container h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--h2-color);
}

.craft-container h3 {
  font-size: clamp(1rem, 1rem + 1vw, 2rem) !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--primary-color-text) !important;
}

.craft-container p {
  margin: 0;
  color: var(--para-color);
}

.craft-container .craft-row .craft-text .tiptapInput h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem) !important;
  font-weight: bold !important;
  font-family: var(--h2-font) !important;
  color: var(--h2-color);
  text-align: var(--h2-align);
}

.craft-container .craft-row .craft-text .tiptapInput h3 {
  font-size: clamp(1rem, 1rem + 1vw, 2rem) !important;
  font-weight: bold !important;
  font-family: var(--h3-font) !important;
  color: var(--h3-color);
  text-align: var(--h3-align);
}

.craft-container .craft-row .craft-text .tiptapInput p {
  margin: 0;
}

.craft-container .craft-row .craft-text .tiptapInput a {
  color: #0000ee;
  /* Default browser link color (blue) */
  text-decoration: underline;
  /* Underline by default */
  cursor: pointer;
  /* Ensure pointer cursor for links */
}

.craft-container .craft-row .craft-text .tiptapInput a:visited {
  color: #551a8b;
  /* Default visited link color (purple) */
}

.craft-container .craft-row .craft-text .tiptapInput a:hover {
  color: #0000ee;
  /* Default hover color */
  text-decoration: underline;
  /* Underline on hover */
}

.craft-container .craft-row .craft-text .tiptapInput a:active {
  color: #ff0000;
  /* Default active link color (red) */
}

::selection {
  background-color: #b4d5fe; /* Background color for the selection */
  /* Text color for the selection */
}

.muipaper-dark {
  background-color: var(--brand-primary2-dark-color);
}

/* .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded {
  max-height: fit-content !important;
}

.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded {
  max-height: fit-content !important;
} */

.greadent_text {
  background: linear-gradient(93.12deg, #8870e9 50.23%, #8d34e7 101.78%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.AI_Chat {
  width: calc(100% - 300px);
  padding-bottom: 10px;
  background-color: #ffff;
}

.AI_Dec_Chat {
  width: calc(100% - 300px);
  padding-bottom: 10px;
  background-color: #ffff;
}

.w-cal-cration {
  width: calc(100% - 54px);
}

.dualDate
  .MuiStack-root
  .MuiStack-root
  .MuiStack-root
  .MuiFormControl-root
  .MuiFormLabel-root {
  padding-left: 10px;
  padding-right: 5px;
  background-color: #fafbfc;
}

/* Below styles for Tooltip drawer */
.craft-row .craft-text .tiptapInput h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 4.5rem) !important;
  font-weight: bold !important;
  font-family: var(--h1-font) !important;
  color: var(--h1-color) !important;
  /* margin-bottom: 1em !important; */
}

/* h1 {
  font-size: 2em !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--primary-color-text) !important;
}

h2 {
  font-size: 1.5em !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--primary-color-text) !important;
}

h3 {
  font-size: 1.25em !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--primary-color-text) !important;
}

p {
  margin: 0;
  color: var(--secondary-color-text) !important;
} */

.craft-row .craft-text .tiptapInput h2 {
  font-size: 2.5em !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--h2-color) !important;
}

.craft-row .craft-text .tiptapInput h3 {
  font-size: 1.25em !important;
  font-weight: bold !important;
  font-family: var(--heading-font) !important;
  color: var(--h3-color) !important;
}

.craft-row .craft-text .tiptapInput p {
  margin: 0;
}

.craft-row .craft-text .tiptapInput a {
  color: #0000ee;
  /* Default browser link color (blue) */
  text-decoration: underline;
  /* Underline by default */
  cursor: pointer;
  /* Ensure pointer cursor for links */
}

.craft-row .craft-text .tiptapInput a:visited {
  color: #551a8b;
  /* Default visited link color (purple) */
}

.craft-row .craft-text .tiptapInput a:hover {
  color: #0000ee;
  /* Default hover color */
  text-decoration: underline;
  /* Underline on hover */
}

.craft-row .craft-text .tiptapInput a:active {
  color: #ff0000;
  /* Default active link color (red) */
}

/* make sure you can absolutely position inside the editor */
.ProseMirror {
  position: relative;
}

/* only in editors with the `center-placeholder` class */
/* target the empty block node (heading, p, etc.) which has both the data-placeholder attribute AND the is-editor-empty class */
.ProseMirror.center-placeholder .is-editor-empty[data-placeholder]::before {
  content: attr(data-placeholder);
  position: absolute;
  inset: 50% 0 50% 0; /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  pointer-events: none;
  color: #aaa; /* your placeholder color */
}

/* Default hidden */
.is-editor-empty::before {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Show on hover, selection, or focus */
.ProseMirror .is-editor-empty:hover::before,
.ProseMirror .is-editor-empty.ProseMirror-selectednode::before,
.ProseMirror-focused .is-editor-empty::before {
  opacity: 0.4; /* Adjust to your taste */
}

.bundleinput input:focus::placeholder {
  color: transparent; /* hides placeholder on focus */
}

.confirmbox h1 {
  font-size: revert !important;
  font-weight: revert !important;
  font-family: revert !important;
  color: revert !important;
}

.confirmbox p {
  font-size: revert !important;
  font-weight: revert !important;
  font-family: revert !important;
  color: revert !important;
}

.recharts-sector:focus,
.recharts-sector:focus-visible,
.recharts-pie-sector:focus,
.recharts-pie-sector:focus-visible {
  outline: none !important;
}

/* Realtime collaboration — remote user carets + name labels (CollaborationCursor).
   Colors arrive inline from each user's awareness state; this only positions them. */
.collaboration-cursor__caret {
  border-left: 1px solid #0d0d0d;
  border-right: 1px solid #0d0d0d;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

.collaboration-cursor__label {
  border-radius: 3px 3px 3px 0;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.selection\:bg-\[\#5500FF\]\/20 *::selection {
  background-color: rgb(85 0 255 / 0.2);
}

.selection\:text-\[\#0A0A0A\] *::selection {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}

.selection\:bg-\[\#5500FF\]\/20::selection {
  background-color: rgb(85 0 255 / 0.2);
}

.selection\:text-\[\#0A0A0A\]::selection {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}

.placeholder\:font-semibold::placeholder {
  font-weight: 600;
}

.placeholder\:text-\[\#9ca3af\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.placeholder\:text-\[\#a0a1a1\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(160 161 161 / var(--tw-text-opacity, 1));
}

.placeholder\:text-\[\#dcddde\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(220 221 222 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-300::placeholder {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(200 198 202 / var(--tw-text-opacity, 1));
}

.first\:rounded-l-xl:first-child {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.last\:mb-0:last-child {
  margin-bottom: 0px;
}

.last\:rounded-b-lg:last-child {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.last\:rounded-r-xl:last-child {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.last\:border-none:last-child {
  border-style: none;
}

.odd\:bg-gray-50\/60:nth-child(odd) {
  background-color: rgb(250 251 252 / 0.6);
}

.focus-within\:pointer-events-auto:focus-within {
  pointer-events: auto;
}

.focus-within\:border-\[\#5500FF\]:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(85 0 255 / var(--tw-border-opacity, 1));
}

.focus-within\:border-red-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(235 67 53 / var(--tw-border-opacity, 1));
}

.focus-within\:opacity-100:focus-within {
  opacity: 1;
}

.focus-within\:outline-none:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-within\:ring-0:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-\[\#5500FF\]\/35:focus-within {
  --tw-ring-color: rgb(85 0 255 / 0.35);
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:cursor-pointer:hover {
  cursor: pointer;
}

.hover\:\!border-\[var\(--cb-as-line-strong\)\]:hover {
  border-color: var(--cb-as-line-strong) !important;
}

.hover\:\!border-gray-200:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)) !important;
}

.hover\:\!border-gray-300:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
}

.hover\:\!border-transparent:hover {
  border-color: transparent !important;
}

.hover\:border-\[\#5500FF\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(85 0 255 / var(--tw-border-opacity, 1));
}

.hover\:border-\[\#5500FF\]\/30:hover {
  border-color: rgb(85 0 255 / 0.3);
}

.hover\:border-\[\#5500FF\]\/40:hover {
  border-color: rgb(85 0 255 / 0.4);
}

.hover\:border-\[\#5500FF\]\/50:hover {
  border-color: rgb(85 0 255 / 0.5);
}

.hover\:border-black-900:hover {
  --tw-border-opacity: 1;
  border-color: rgb(1 1 4 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-900:hover {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.hover\:border-transparent:hover {
  border-color: transparent;
}

.hover\:\!bg-\[var\(--cb-as-surface-2\)\]:hover {
  background-color: var(--cb-as-surface-2) !important;
}

.hover\:\!bg-gray-100:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:\!bg-gray-200\/80:hover {
  background-color: rgb(229 231 235 / 0.8) !important;
}

.hover\:\!bg-gray-50:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:\!bg-red-700:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:\!bg-transparent:hover {
  background-color: transparent !important;
}

.hover\:\!bg-white-A700:hover {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.hover\:bg-\[\#4400cc\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(68 0 204 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#4400d6\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(68 0 214 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#5500FF\]\/10:hover {
  background-color: rgb(85 0 255 / 0.1);
}

.hover\:bg-\[\#5500FF\]\/5:hover {
  background-color: rgb(85 0 255 / 0.05);
}

.hover\:bg-\[\#5500FF\]\/\[0\.08\]:hover {
  background-color: rgb(85 0 255 / 0.08);
}

.hover\:bg-\[\#575758\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(87 87 88 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#5B42FF\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(91 66 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#92400E\]\/10:hover {
  background-color: rgb(146 64 14 / 0.1);
}

.hover\:bg-\[\#F7F7F7\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#F7F8FA\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 250 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#FFFFFF\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#e8e8e8\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 232 232 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#ebe4ff\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 228 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[\#ececec\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(236 236 236 / var(--tw-bg-opacity, 1));
}

.hover\:bg-\[var\(--brand-neutral-color\)\]:hover {
  background-color: var(--brand-neutral-color);
}

.hover\:bg-\[var\(--brand-secondary-color\)\]:hover {
  background-color: var(--brand-secondary-color);
}

.hover\:bg-black-900\/10:hover {
  background-color: rgb(1 1 4 / 0.1);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100\/60:hover {
  background-color: rgb(245 245 245 / 0.6);
}

.hover\:bg-gray-100\/80:hover {
  background-color: rgb(245 245 245 / 0.8);
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200\/80:hover {
  background-color: rgb(229 231 235 / 0.8);
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50\/60:hover {
  background-color: rgb(250 251 252 / 0.6);
}

.hover\:bg-gray-50\/80:hover {
  background-color: rgb(250 251 252 / 0.8);
}

.hover\:bg-gray-50\/90:hover {
  background-color: rgb(250 251 252 / 0.9);
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-transparent:hover {
  background-color: transparent;
}

.hover\:bg-white-A700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

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

.hover\:\!text-\[\#0a0a0a\]:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-\[\#4400cc\]:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(68 0 204 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-\[\#DC2626\]:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-gray-900:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-red-600:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-red-700:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-\[\#0A0A0A\]:hover {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#0a0a0a\]:hover {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#1F89F9\]:hover {
  --tw-text-opacity: 1;
  color: rgb(31 137 249 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#343438\]:hover {
  --tw-text-opacity: 1;
  color: rgb(52 52 56 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#4400cc\]:hover {
  --tw-text-opacity: 1;
  color: rgb(68 0 204 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#5500FF\]:hover {
  --tw-text-opacity: 1;
  color: rgb(85 0 255 / var(--tw-text-opacity, 1));
}

.hover\:text-\[\#5500FF\]\/70:hover {
  color: rgb(85 0 255 / 0.7);
}

.hover\:text-\[\#5500FF\]\/80:hover {
  color: rgb(85 0 255 / 0.8);
}

.hover\:text-\[\#92400E\]:hover {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(121 117 127 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(235 67 53 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.hover\:no-underline:hover {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.hover\:\!opacity-100:hover {
  opacity: 1 !important;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-\[0px_2px_4px_-2px_rgba\(0\2c 0\2c 0\2c 0\.10\)\2c 0px_4px_6px_-1px_rgba\(0\2c 0\2c 0\2c 0\.10\)\]:hover {
  --tw-shadow: 0px 2px 4px -2px rgba(0,0,0,0.10),0px 4px 6px -1px rgba(0,0,0,0.10);
  --tw-shadow-colored: 0px 2px 4px -2px var(--tw-shadow-color), 0px 4px 6px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:ring-2:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.hover\:ring-\[\#5500FF\]:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(85 0 255 / var(--tw-ring-opacity, 1));
}

.hover\:ring-gray-300:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.hover\:brightness-90:hover {
  --tw-brightness: brightness(.9);
  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);
}

.focus\:\!border-0:focus {
  border-width: 0px !important;
}

.focus\:border-0:focus {
  border-width: 0px;
}

.focus\:border-none:focus {
  border-style: none;
}

.focus\:border-\[\#5500FF\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(85 0 255 / var(--tw-border-opacity, 1));
}

.focus\:border-\[\#5500FF\]\/40:focus {
  border-color: rgb(85 0 255 / 0.4);
}

.focus\:border-\[\#dcddde\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(220 221 222 / var(--tw-border-opacity, 1));
}

.focus\:border-gray-300:focus {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.focus\:border-purple-600:focus {
  --tw-border-opacity: 1;
  border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(235 67 53 / var(--tw-border-opacity, 1));
}

.focus\:bg-white-A700:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.focus\:opacity-100:focus {
  opacity: 1;
}

.focus\:shadow-none:focus {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:\!ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[\#5500FF\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(85 0 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-\[\#5500FF\]\/20:focus {
  --tw-ring-color: rgb(85 0 255 / 0.2);
}

.focus\:ring-\[\#5500FF\]\/30:focus {
  --tw-ring-color: rgb(85 0 255 / 0.3);
}

.focus\:ring-gray-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(235 67 53 / var(--tw-ring-opacity, 1));
}

.focus\:\!ring-offset-0:focus {
  --tw-ring-offset-width: 0px !important;
}

.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}

.focus\:\[--tw-ring-offset-shadow\:0_0_\#0000\]:focus {
  --tw-ring-offset-shadow: 0 0 #0000;
}

.focus\:\[--tw-ring-shadow\:0_0_\#0000\]:focus {
  --tw-ring-shadow: 0 0 #0000;
}

.focus-visible\:\!border-0:focus-visible {
  border-width: 0px !important;
}

.focus-visible\:border-none:focus-visible {
  border-style: none;
}

.focus-visible\:bg-gray-50:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}

.focus-visible\:underline:focus-visible {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}

.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}

.focus-visible\:shadow-none:focus-visible {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-1:focus-visible {
  outline-offset: 1px;
}

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

.focus-visible\:outline-offset-\[-2px\]:focus-visible {
  outline-offset: -2px;
}

.focus-visible\:\!outline-red-600:focus-visible {
  outline-color: #dc2626 !important;
}

.focus-visible\:outline-\[\#5500FF\]:focus-visible {
  outline-color: #5500FF;
}

.focus-visible\:outline-gray-400:focus-visible {
  outline-color: #c8c6ca;
}

.focus-visible\:\!ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}

.focus-visible\:\!ring-\[\#1F89F9\]\/30:focus-visible {
  --tw-ring-color: rgb(31 137 249 / 0.3) !important;
}

.focus-visible\:\!ring-gray-300\/40:focus-visible {
  --tw-ring-color: rgb(209 213 219 / 0.4) !important;
}

.focus-visible\:ring-\[\#5500FF\]:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(85 0 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-\[\#5500FF\]\/30:focus-visible {
  --tw-ring-color: rgb(85 0 255 / 0.3);
}

.focus-visible\:ring-\[\#5500FF\]\/35:focus-visible {
  --tw-ring-color: rgb(85 0 255 / 0.35);
}

.focus-visible\:ring-\[\#5500FF\]\/40:focus-visible {
  --tw-ring-color: rgb(85 0 255 / 0.4);
}

.focus-visible\:ring-gray-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-white-A700\/30:focus-visible {
  --tw-ring-color: rgb(255 255 255 / 0.3);
}

.focus-visible\:\!ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px !important;
}

.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.active\:\!scale-100:active {
  --tw-scale-x: 1 !important;
  --tw-scale-y: 1 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.active\:scale-100:active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.95\]:active {
  --tw-scale-x: 0.95;
  --tw-scale-y: 0.95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.active\:bg-gray-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

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

.disabled\:\!cursor-not-allowed:disabled {
  cursor: not-allowed !important;
}

.disabled\:\!cursor-wait:disabled {
  cursor: wait !important;
}

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:cursor-wait:disabled {
  cursor: wait;
}

.disabled\:\!border-0:disabled {
  border-width: 0px !important;
}

.disabled\:\!bg-\[\#5500FF\]:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(85 0 255 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:\!bg-gray-100:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:\!bg-gray-400:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(200 198 202 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:bg-gray-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-gray-50:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 251 252 / var(--tw-bg-opacity, 1));
}

.disabled\:bg-transparent:disabled {
  background-color: transparent;
}

.disabled\:\!text-gray-400:disabled {
  --tw-text-opacity: 1 !important;
  color: rgb(200 198 202 / var(--tw-text-opacity, 1)) !important;
}

.disabled\:text-gray-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(200 198 202 / var(--tw-text-opacity, 1));
}

.disabled\:no-underline:disabled {
  -webkit-text-decoration-line: none;
          text-decoration-line: none;
}

.disabled\:\!opacity-100:disabled {
  opacity: 1 !important;
}

.disabled\:\!opacity-40:disabled {
  opacity: 0.4 !important;
}

.disabled\:\!opacity-70:disabled {
  opacity: 0.7 !important;
}

.disabled\:\!opacity-90:disabled {
  opacity: 0.9 !important;
}

.disabled\:opacity-100:disabled {
  opacity: 1;
}

.disabled\:opacity-25:disabled {
  opacity: 0.25;
}

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.disabled\:opacity-70:disabled {
  opacity: 0.7;
}

.disabled\:\!shadow-none:disabled {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.disabled\:hover\:\!border-0:hover:disabled {
  border-width: 0px !important;
}

.disabled\:hover\:border-gray-200:hover:disabled {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.disabled\:hover\:\!bg-\[\#f0f0f0\]:hover:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:hover\:\!bg-gray-100:hover:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:hover\:\!bg-gray-400:hover:disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(200 198 202 / var(--tw-bg-opacity, 1)) !important;
}

.disabled\:hover\:bg-transparent:hover:disabled {
  background-color: transparent;
}

.disabled\:hover\:bg-white-A700:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.disabled\:hover\:text-\[\#828283\]:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(130 130 131 / var(--tw-text-opacity, 1));
}

.disabled\:hover\:text-gray-600:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(121 117 127 / var(--tw-text-opacity, 1));
}

.disabled\:hover\:\!opacity-70:hover:disabled {
  opacity: 0.7 !important;
}

.disabled\:hover\:opacity-100:hover:disabled {
  opacity: 1;
}

.disabled\:focus-visible\:\!outline-gray-400:focus-visible:disabled {
  outline-color: #c8c6ca !important;
}

.disabled\:focus-visible\:outline-gray-300:focus-visible:disabled {
  outline-color: #d1d5db;
}

.disabled\:active\:\!scale-100:active:disabled {
  --tw-scale-x: 1 !important;
  --tw-scale-y: 1 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.disabled\:active\:scale-100:active:disabled {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within\:bg-\[\#5500FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(85 0 255 / var(--tw-bg-opacity, 1));
}

.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}

.group\/denied:hover .group-hover\/denied\:block {
  display: block;
}

.group\/denied:hover .group-hover\/denied\:inline {
  display: inline;
}

.group:hover .group-hover\:flex {
  display: flex;
}

.group\/denied:hover .group-hover\/denied\:hidden {
  display: none;
}

.group:hover .group-hover\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:bg-\[\#ede9fe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-white-A700 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.group\/row:hover .group-hover\/row\:text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(121 117 127 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-\[\#5500FF\] {
  --tw-text-opacity: 1;
  color: rgb(85 0 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity, 1));
}

.group\/restore:hover .group-hover\/restore\:opacity-100 {
  opacity: 1;
}

.group\/row:hover .group-hover\/row\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-0 {
  opacity: 0;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.group:hover .group-hover\:hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.group:focus .group-focus\:text-\[\#5500FF\] {
  --tw-text-opacity: 1;
  color: rgb(85 0 255 / var(--tw-text-opacity, 1));
}

.group\/denied:focus-visible .group-focus-visible\/denied\:block {
  display: block;
}

.group\/denied:focus-visible .group-focus-visible\/denied\:inline {
  display: inline;
}

.group\/denied:focus-visible .group-focus-visible\/denied\:hidden {
  display: none;
}

.group:focus-visible .group-focus-visible\:translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-visible .group-focus-visible\:opacity-100 {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

  .group:hover .motion-safe\:group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (prefers-reduced-motion: reduce) {

  .motion-reduce\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .motion-reduce\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

.dark\:border-\[\#2A2A2A\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(42 42 42 / var(--tw-border-opacity, 1));
}

.dark\:bg-\[\#262626\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
}

.dark\:bg-\[\#5500FF\]\/20:is(.dark *) {
  background-color: rgb(85 0 255 / 0.2);
}

.dark\:text-\[\#4B5563\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#6B7280\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#9CA3AF\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#B0B0B0\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(176 176 176 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#B8A6FF\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(184 166 255 / var(--tw-text-opacity, 1));
}

.dark\:text-\[\#E5E5E7\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(229 229 231 / var(--tw-text-opacity, 1));
}

.dark\:hover\:border-\[\#2A2A2A\]:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(42 42 42 / var(--tw-border-opacity, 1));
}

.dark\:hover\:text-\[\#B0B0B0\]:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(176 176 176 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 1024px) {

  .max-lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .max-lg\:gap-2 {
    gap: 0.5rem;
  }
}

@media not all and (min-width: 768px) {

  .max-md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .max-md\:hidden {
    display: none;
  }

  .max-md\:gap-2 {
    gap: 0.5rem;
  }

  .max-md\:gap-2\.5 {
    gap: 0.625rem;
  }

  .max-md\:gap-3 {
    gap: 0.75rem;
  }

  .max-md\:self-start {
    align-self: flex-start;
  }

  .max-md\:pl-\[13px\] {
    padding-left: 13px;
  }

  .max-md\:pl-\[15px\] {
    padding-left: 15px;
  }

  .max-md\:pl-\[35px\] {
    padding-left: 35px;
  }

  .max-md\:pl-\[37px\] {
    padding-left: 37px;
  }

  .max-md\:pr-3 {
    padding-right: 0.75rem;
  }
}

@media not all and (min-width: 640px) {

  .max-sm\:left-1 {
    left: 0.25rem;
  }

  .max-sm\:top-1 {
    top: 0.25rem;
  }

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

  .max-sm\:mt-1\.5 {
    margin-top: 0.375rem;
  }

  .max-sm\:hidden {
    display: none;
  }

  .max-sm\:aspect-square {
    aspect-ratio: 1 / 1;
  }

  .max-sm\:w-\[96px\] {
    width: 96px;
  }

  .max-sm\:flex-row {
    flex-direction: row;
  }

  .max-sm\:gap-0 {
    gap: 0px;
  }

  .max-sm\:gap-2 {
    gap: 0.5rem;
  }

  .max-sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .max-sm\:p-2 {
    padding: 0.5rem;
  }

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

  .max-sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .max-sm\:pr-0 {
    padding-right: 0px;
  }

  .max-sm\:pt-2 {
    padding-top: 0.5rem;
  }

  .max-sm\:text-\[11px\] {
    font-size: 11px;
  }

  .max-sm\:text-\[14px\] {
    font-size: 14px;
  }

  .max-sm\:font-semibold {
    font-weight: 600;
  }
}

@media (min-width: 640px) {

  .sm\:static {
    position: static;
  }

  .sm\:-top-1 {
    top: -0.25rem;
  }

  .sm\:bottom-10 {
    bottom: 2.5rem;
  }

  .sm\:bottom-6 {
    bottom: 1.5rem;
  }

  .sm\:bottom-8 {
    bottom: 2rem;
  }

  .sm\:left-full {
    left: 100%;
  }

  .sm\:right-6 {
    right: 1.5rem;
  }

  .sm\:right-auto {
    right: auto;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:order-2 {
    order: 2;
  }

  .sm\:order-3 {
    order: 3;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:-ml-3 {
    margin-left: -0.75rem;
  }

  .sm\:ml-0 {
    margin-left: 0px;
  }

  .sm\:ml-4 {
    margin-left: 1rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

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

  .sm\:mt-5 {
    margin-top: 1.25rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:mt-\[120px\] {
    margin-top: 120px;
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }

  .sm\:size-14 {
    width: 3.5rem;
    height: 3.5rem;
  }

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-80 {
    height: 20rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-\[120px\] {
    height: 120px;
  }

  .sm\:h-\[280px\] {
    height: 280px;
  }

  .sm\:h-\[300px\] {
    height: 300px;
  }

  .sm\:h-\[90vh\] {
    height: 90vh;
  }

  .sm\:max-h-\[95vh\] {
    max-height: 95vh;
  }

  .sm\:min-h-\[52px\] {
    min-height: 52px;
  }

  .sm\:\!w-\[160px\] {
    width: 160px !important;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-4 {
    width: 1rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-52 {
    width: 13rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-\[1200px\] {
    width: 1200px;
  }

  .sm\:w-\[120px\] {
    width: 120px;
  }

  .sm\:w-\[132px\] {
    width: 132px;
  }

  .sm\:w-\[148px\] {
    width: 148px;
  }

  .sm\:w-\[160px\] {
    width: 160px;
  }

  .sm\:w-\[164px\] {
    width: 164px;
  }

  .sm\:w-\[200px\] {
    width: 200px;
  }

  .sm\:w-\[220px\] {
    width: 220px;
  }

  .sm\:w-\[240px\] {
    width: 240px;
  }

  .sm\:w-\[600px\] {
    width: 600px;
  }

  .sm\:w-\[777px\] {
    width: 777px;
  }

  .sm\:w-\[800px\] {
    width: 800px;
  }

  .sm\:w-\[820px\] {
    width: 820px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:min-w-\[168px\] {
    min-width: 168px;
  }

  .sm\:max-w-\[360px\] {
    max-width: 360px;
  }

  .sm\:max-w-\[60\%\] {
    max-width: 60%;
  }

  .sm\:max-w-\[8rem\] {
    max-width: 8rem;
  }

  .sm\:max-w-\[95vw\] {
    max-width: 95vw;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-none {
    max-width: none;
  }

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

  .sm\:flex-none {
    flex: none;
  }

  .sm\:shrink {
    flex-shrink: 1;
  }

  .sm\:shrink-0 {
    flex-shrink: 0;
  }

  .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\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[auto_auto_minmax\(0\2c 1fr\)\] {
    grid-template-columns: auto auto minmax(0,1fr);
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: minmax(0,1fr) auto;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

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

  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

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

  .sm\:items-stretch {
    align-items: stretch;
  }

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

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

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

  .sm\:\!gap-2 {
    gap: 0.5rem !important;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-3\.5 {
    gap: 0.875rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-7 {
    gap: 1.75rem;
  }

  .sm\:gap-x-4 {
    column-gap: 1rem;
  }

  .sm\:gap-x-6 {
    column-gap: 1.5rem;
  }

  .sm\:gap-y-0 {
    row-gap: 0px;
  }

  .sm\:gap-y-4 {
    row-gap: 1rem;
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:self-center {
    align-self: center;
  }

  .sm\:overflow-visible {
    overflow: visible;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .sm\:border {
    border-width: 1px;
  }

  .sm\:border-0 {
    border-width: 0px;
  }

  .sm\:border-b-0 {
    border-bottom-width: 0px;
  }

  .sm\:border-\[\#DCDDDE\] {
    --tw-border-opacity: 1;
    border-color: rgb(220 221 222 / var(--tw-border-opacity, 1));
  }

  .sm\:bg-transparent {
    background-color: transparent;
  }

  .sm\:bg-white-A700 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:\!px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .sm\:\!px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .sm\:\!py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

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

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

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

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

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .sm\:pb-4 {
    padding-bottom: 1rem;
  }

  .sm\:pl-4 {
    padding-left: 1rem;
  }

  .sm\:pr-0 {
    padding-right: 0px;
  }

  .sm\:pr-2 {
    padding-right: 0.5rem;
  }

  .sm\:pr-4 {
    padding-right: 1rem;
  }

  .sm\:pt-0 {
    padding-top: 0px;
  }

  .sm\:pt-5 {
    padding-top: 1.25rem;
  }

  .sm\:\!text-\[14px\] {
    font-size: 14px !important;
  }

  .sm\:\!text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .sm\:\!text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-\[11px\] {
    font-size: 11px;
  }

  .sm\:text-\[14px\] {
    font-size: 14px;
  }

  .sm\:text-\[15px\] {
    font-size: 15px;
  }

  .sm\:text-\[16px\] {
    font-size: 16px;
  }

  .sm\:text-\[17px\] {
    font-size: 17px;
  }

  .sm\:text-\[18px\] {
    font-size: 18px;
  }

  .sm\:text-\[26px\] {
    font-size: 26px;
  }

  .sm\:text-\[28px\] {
    font-size: 28px;
  }

  .sm\:text-\[40px\] {
    font-size: 40px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:font-semibold {
    font-weight: 600;
  }

  .sm\:leading-5 {
    line-height: 1.25rem;
  }

  .sm\:\[grid-template-columns\:var\(--cols-tablet\)\] {
    grid-template-columns: var(--cols-tablet);
  }

  .sm\:\[grid-template-columns\:var\(--grid-cols-desktop\)\] {
    grid-template-columns: var(--grid-cols-desktop);
  }
}

@media (min-width: 768px) {

  .md\:col-start-1 {
    grid-column-start: 1;
  }

  .md\:col-start-2 {
    grid-column-start: 2;
  }

  .md\:col-start-3 {
    grid-column-start: 3;
  }

  .md\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .md\:mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .md\:ml-8 {
    margin-left: 2rem;
  }

  .md\:mt-20 {
    margin-top: 5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:contents {
    display: contents;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-14 {
    height: 3.5rem;
  }

  .md\:h-6 {
    height: 1.5rem;
  }

  .md\:h-96 {
    height: 24rem;
  }

  .md\:h-\[276px\] {
    height: 276px;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-\[420px\] {
    width: 420px;
  }

  .md\:w-\[calc\(100\%-2\.5rem\)\] {
    width: calc(100% - 2.5rem);
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .md\:grid-cols-\[auto_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: auto minmax(0,1fr) auto;
  }

  .md\:flex-row {
    flex-direction: row;
  }

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

  .md\:items-start {
    align-items: flex-start;
  }

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

  .md\:items-stretch {
    align-items: stretch;
  }

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

  .md\:gap-1 {
    gap: 0.25rem;
  }

  .md\:gap-2 {
    gap: 0.5rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-5 {
    gap: 1.25rem;
  }

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

  .md\:gap-x-4 {
    column-gap: 1rem;
  }

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

  .md\:justify-self-end {
    justify-self: end;
  }

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

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

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:px-\[50px\] {
    padding-left: 50px;
    padding-right: 50px;
  }

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

  .md\:pl-8 {
    padding-left: 2rem;
  }

  .md\:pl-\[13px\] {
    padding-left: 13px;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-\[15px\] {
    font-size: 15px;
  }

  .md\:text-\[26px\] {
    font-size: 26px;
  }

  .md\:text-\[32px\] {
    font-size: 32px;
  }

  .md\:text-\[34px\] {
    font-size: 34px;
  }

  .md\:text-\[48px\] {
    font-size: 48px;
  }

  .md\:leading-\[1\.25\] {
    line-height: 1.25;
  }

  .md\:tracking-\[-1\.5px\] {
    letter-spacing: -1.5px;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:col-start-3 {
    grid-column-start: 3;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mx-6 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-\[250px\] {
    height: 250px;
  }

  .lg\:h-\[324px\] {
    height: 324px;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-\[280px\] {
    min-height: 280px;
  }

  .lg\:w-\[180px\] {
    width: 180px;
  }

  .lg\:w-\[220px\] {
    width: 220px;
  }

  .lg\:w-\[280px\] {
    width: 280px;
  }

  .lg\:w-\[420px\] {
    width: 420px;
  }

  .lg\:w-\[450px\] {
    width: 450px;
  }

  .lg\:w-\[calc\(100\%-3rem\)\] {
    width: calc(100% - 3rem);
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:w-full {
    width: 100%;
  }

  .lg\:max-w-xl {
    max-width: 36rem;
  }

  .lg\:max-w-xs {
    max-width: 20rem;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[auto_minmax\(0\2c 1fr\)_auto\] {
    grid-template-columns: auto minmax(0,1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

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

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

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

  .lg\:items-stretch {
    align-items: stretch;
  }

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

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

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-x-4 {
    column-gap: 1rem;
  }

  .lg\:gap-y-3 {
    row-gap: 0.75rem;
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:justify-self-center {
    justify-self: center;
  }

  .lg\:rounded-none {
    border-radius: 0px;
  }

  .lg\:border-0 {
    border-width: 0px;
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {

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

  .xl\:static {
    position: static;
  }

  .xl\:inset-auto {
    inset: auto;
  }

  .xl\:z-\[60\] {
    z-index: 60;
  }

  .xl\:block {
    display: block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:size-6 {
    width: 1.5rem;
    height: 1.5rem;
  }

  .xl\:\!w-full {
    width: 100% !important;
  }

  .xl\:w-24 {
    width: 6rem;
  }

  .xl\:w-\[240px\] {
    width: 240px;
  }

  .xl\:w-\[300px\] {
    width: 300px;
  }

  .xl\:w-\[61px\] {
    width: 61px;
  }

  .xl\:w-max {
    width: -webkit-max-content;
    width: max-content;
  }

  .xl\:max-w-\[300px\] {
    max-width: 300px;
  }

  .xl\:\!shrink {
    flex-shrink: 1 !important;
  }

  .xl\:shrink-0 {
    flex-shrink: 0;
  }

  .xl\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .xl\:snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness);
  }

  .xl\:snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .xl\:snap-start {
    scroll-snap-align: start;
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:flex-col {
    flex-direction: column;
  }

  .xl\:gap-4 {
    gap: 1rem;
  }

  .xl\:gap-6 {
    gap: 1.5rem;
  }

  .xl\:self-stretch {
    align-self: stretch;
  }

  .xl\:overflow-x-auto {
    overflow-x: auto;
  }

  .xl\:overflow-y-hidden {
    overflow-y: hidden;
  }

  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

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

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

  .xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xl\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .xl\:opacity-0 {
    opacity: 0;
  }

  .xl\:transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .xl\:\[-ms-overflow-style\:none\] {
    -ms-overflow-style: none;
  }

  .xl\:\[grid-template-columns\:none\] {
    grid-template-columns: none;
  }

  .xl\:\[scrollbar-width\:none\] {
    scrollbar-width: none;
  }

  .group:hover .xl\:group-hover\:pointer-events-auto {
    pointer-events: auto;
  }

  .group:hover .xl\:group-hover\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 1440px) {

  .min-\[1440px\]\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .min-\[1440px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {

  .\32xl\:grid-cols-\[repeat\(auto-fill\2c minmax\(280px\2c 1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  }
}

@media not all and (min-width: 768px) {

  @media (orientation: portrait) {

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

@media (min-width: 768px) {

  @media not all and (min-width: 1024px) {

    @media (orientation: portrait) {

      .md\:max-lg\:portrait\:w-auto {
        width: auto;
      }

      .md\:max-lg\:portrait\:shrink {
        flex-shrink: 1;
      }

      .md\:max-lg\:portrait\:shrink-0 {
        flex-shrink: 0;
      }

      .md\:max-lg\:portrait\:flex-row {
        flex-direction: row;
      }

      .md\:max-lg\:portrait\:items-center {
        align-items: center;
      }

      .md\:max-lg\:portrait\:justify-start {
        justify-content: flex-start;
      }
    }
  }
}

@media not all and (min-width: 1024px) {

  @media (orientation: landscape) {

    .max-lg\:landscape\:gap-2 {
      gap: 0.5rem;
    }
  }
}

.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1280px) {

  .xl\:\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }
}

.\[\&\:has\(\[aria-haspopup\=\'menu\'\]\:active\)\]\:scale-100:has([aria-haspopup='menu']:active) {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\:hover\:not\(\:focus-within\)\]\:border-\[\#5500FF\]\/30:hover:not(:focus-within) {
  border-color: rgb(85 0 255 / 0.3);
}

.\[\&\:not\(\:focus-within\)\]\:hover\:border-\[\#5500FF\]\/50:hover:not(:focus-within) {
  border-color: rgb(85 0 255 / 0.5);
}

.\[\&\>\*\]\:\!px-0>* {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.\[\&\>\:first-child\]\:\!hidden>:first-child {
  display: none !important;
}

.\[\&\>article\]\:h-full>article {
  height: 100%;
}

.\[\&\>div\:first-child\]\:shadow-\[0_0_0_1px_rgb\(255\2c 255\2c 255\)\]>div:first-child {
  --tw-shadow: 0 0 0 1px rgb(255,255,255);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.\[\&\>div\:first-child\]\:shadow-\[0_0_0_2px_rgb\(255\2c 255\2c 255\)\]>div:first-child {
  --tw-shadow: 0 0 0 2px rgb(255,255,255);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.\[\&\>div\:last-child\]\:\!h-1>div:last-child {
  height: 0.25rem !important;
}

.\[\&\>div\:last-child\]\:\!rounded-full>div:last-child {
  border-radius: 9999px !important;
}

.\[\&\>div\:last-child\]\:\!bg-\[\#CECECE\]>div:last-child {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(206 206 206 / var(--tw-bg-opacity, 1)) !important;
}

.\[\&\>div\>button\]\:\!h-7>div>button {
  height: 1.75rem !important;
}

.\[\&\>div\>button\]\:\!w-7>div>button {
  width: 1.75rem !important;
}

.\[\&\>div\>svg\:first-child\]\:\!h-4>div>svg:first-child {
  height: 1rem !important;
}

.\[\&\>div\>svg\:first-child\]\:\!h-5>div>svg:first-child {
  height: 1.25rem !important;
}

.\[\&\>div\>svg\:first-child\]\:\!w-4>div>svg:first-child {
  width: 1rem !important;
}

.\[\&\>div\>svg\:first-child\]\:\!w-5>div>svg:first-child {
  width: 1.25rem !important;
}

.\[\&\>div\]\:\!h-1>div {
  height: 0.25rem !important;
}

.\[\&\>div\]\:\!h-9>div {
  height: 2.25rem !important;
}

.\[\&\>div\]\:\!h-\[32px\]>div {
  height: 32px !important;
}

.\[\&\>div\]\:\!h-\[36px\]>div {
  height: 36px !important;
}

.\[\&\>div\]\:\!min-h-9>div {
  min-height: 2.25rem !important;
}

.\[\&\>div\]\:\!min-h-\[26px\]>div {
  min-height: 26px !important;
}

.\[\&\>div\]\:\!min-h-\[36px\]>div {
  min-height: 36px !important;
}

.\[\&\>div\]\:gap-2>div {
  gap: 0.5rem;
}

.\[\&\>div\]\:\!rounded-\[11px\]>div {
  border-radius: 11px !important;
}

.\[\&\>div\]\:rounded-lg>div {
  border-radius: 0.5rem;
}

.\[\&\>div\]\:border-\[\#DCDDDE\]>div {
  --tw-border-opacity: 1;
  border-color: rgb(220 221 222 / var(--tw-border-opacity, 1));
}

.\[\&\>div\]\:\!bg-\[\#EDEFF2\]>div {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(237 239 242 / var(--tw-bg-opacity, 1)) !important;
}

.\[\&\>div\]\:\!bg-\[\#F9FAFB\]>div {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}

.\[\&\>div\]\:px-3>div {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.\[\&\>div\]\:\!shadow-none>div {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.\[\&\>div\]\:shadow-none>div {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.\[\&\>label\]\:min-h-\[29px\]>label {
  min-height: 29px;
}

.\[\&\>label\]\:min-w-0>label {
  min-width: 0px;
}

.\[\&\>label\]\:flex-1>label {
  flex: 1 1 0%;
}

.\[\&\>label\]\:\!px-2\.5>label {
  padding-left: 0.625rem !important;
  padding-right: 0.625rem !important;
}

.\[\&\>label\]\:px-2>label {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.\[\&\>label\]\:py-1>label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.\[\&\>label\]\:py-2>label {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.\[\&\>label\]\:text-\[12px\]>label {
  font-size: 12px;
}

.\[\&\>label\]\:font-semibold>label {
  font-weight: 600;
}

.\[\&\>label\]\:leading-4>label {
  line-height: 1rem;
}

@media (min-width: 640px) {

  .sm\:\[\&\>label\]\:flex-none>label {
    flex: none;
  }

  .sm\:\[\&\>label\]\:\!px-4>label {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 1024px) {

  .lg\:\[\&\>label\]\:flex-none>label {
    flex: none;
  }
}

@media (min-width: 768px) {

  @media not all and (min-width: 1024px) {

    @media (orientation: portrait) {

      .md\:max-lg\:portrait\:\[\&\>label\]\:flex-none>label {
        flex: none;
      }
    }
  }
}

.\[\&\>span\.min-w-0\]\:\!hidden>span.min-w-0 {
  display: none !important;
}

.\[\&\>span\:first-child\]\:\!ml-0>span:first-child {
  margin-left: 0px !important;
}

.\[\&\>span\:first-child\]\:\!bg-transparent>span:first-child {
  background-color: transparent !important;
}

.\[\&\>span\:last-child\]\:font-medium>span:last-child {
  font-weight: 500;
}

.\[\&\>span\]\:min-w-0>span {
  min-width: 0px;
}

.\[\&\>span\]\:truncate>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.\[\&\>span\]\:\!text-\[11px\]>span {
  font-size: 11px !important;
}

.\[\&\>span\]\:text-sm>span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.\[\&\>span\]\:\!font-medium>span {
  font-weight: 500 !important;
}

.\[\&\>span\]\:\!font-normal>span {
  font-weight: 400 !important;
}

.\[\&\>span\]\:\!leading-tight>span {
  line-height: 1.25 !important;
}

.\[\&\>span\]\:\!text-\[\#1F89F9\]>span {
  --tw-text-opacity: 1 !important;
  color: rgb(31 137 249 / var(--tw-text-opacity, 1)) !important;
}

.\[\&\>span\]\:\!text-gray-500>span {
  --tw-text-opacity: 1 !important;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1)) !important;
}

.\[\&\>svg\:last-child\]\:\!hidden>svg:last-child {
  display: none !important;
}

.\[\&\>svg\:last-child\]\:hidden>svg:last-child {
  display: none;
}

.\[\&\>svg\]\:block>svg {
  display: block;
}

.\[\&\>svg\]\:h-full>svg {
  height: 100%;
}

.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}

.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}

.disabled\:\[\&_\.MuiSvgIcon-root\]\:text-current .MuiSvgIcon-root:disabled {
  color: currentColor;
}

.\[\&_\.PhoneInputCountryIcon\]\:h-3\.5 .PhoneInputCountryIcon {
  height: 0.875rem;
}

.\[\&_\.PhoneInputCountryIcon\]\:w-5 .PhoneInputCountryIcon {
  width: 1.25rem;
}

.\[\&_\.PhoneInputCountryIcon\]\:border-0 .PhoneInputCountryIcon {
  border-width: 0px;
}

.\[\&_\.PhoneInputCountryIcon\]\:shadow-none .PhoneInputCountryIcon {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.\[\&_\[data-v2-toast-id\]\]\:mb-0 [data-v2-toast-id] {
  margin-bottom: 0px;
}

@media not all and (min-width: 640px) {

  .max-sm\:\[\&_button\]\:size-6 button {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.\[\&_input\]\:\!text-\[12px\] input {
  font-size: 12px !important;
}

.\[\&_input\]\:\!text-\[13px\] input {
  font-size: 13px !important;
}

.\[\&_input\]\:\!text-\[14px\] input {
  font-size: 14px !important;
}

.\[\&_input\]\:\!text-xs input {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.\[\&_input\]\:\!leading-4 input {
  line-height: 1rem !important;
}

.\[\&_input\]\:\!leading-normal input {
  line-height: 1.5 !important;
}

.\[\&_input\]\:placeholder\:\!text-xs input::placeholder {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.\[\&_input\]\:placeholder\:\!text-\[\#BEBFBF\] input::placeholder {
  --tw-text-opacity: 1 !important;
  color: rgb(190 191 191 / var(--tw-text-opacity, 1)) !important;
}

.\[\&_li\>\*\]\:w-full li>* {
  width: 100%;
}

.\[\&_li\]\:w-full li {
  width: 100%;
}

.\[\&_path\]\:fill-current path {
  fill: currentColor;
}

.\[\&_span\>span\:first-child\]\:\!text-\[\#828283\] span>span:first-child {
  --tw-text-opacity: 1 !important;
  color: rgb(130 130 131 / var(--tw-text-opacity, 1)) !important;
}

.\[\&_span\>span\:last-child\]\:\!text-xs span>span:last-child {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.\[\&_span\>span\:last-child\]\:\!font-medium span>span:last-child {
  font-weight: 500 !important;
}

.\[\&_span\>span\:last-child\]\:\!text-\[\#0A0A0A\] span>span:last-child {
  --tw-text-opacity: 1 !important;
  color: rgb(10 10 10 / var(--tw-text-opacity, 1)) !important;
}

.\[\&_svg\]\:block svg {
  display: block;
}

.\[\&_svg\]\:size-full svg {
  width: 100%;
  height: 100%;
}

.\[\&_svg\]\:\!h-3\.5 svg {
  height: 0.875rem !important;
}

.\[\&_svg\]\:h-3\.5 svg {
  height: 0.875rem;
}

.\[\&_svg\]\:h-\[17px\] svg {
  height: 17px;
}

.\[\&_svg\]\:h-full svg {
  height: 100%;
}

.\[\&_svg\]\:\!w-3\.5 svg {
  width: 0.875rem !important;
}

.\[\&_svg\]\:w-3\.5 svg {
  width: 0.875rem;
}

.\[\&_svg\]\:w-\[17px\] svg {
  width: 17px;
}

.\[\&_svg\]\:w-full svg {
  width: 100%;
}

.\[\&_svg\]\:\!shrink-0 svg {
  flex-shrink: 0 !important;
}

.\[\&_svg\]\:\!text-\[\#1F89F9\] svg {
  --tw-text-opacity: 1 !important;
  color: rgb(31 137 249 / var(--tw-text-opacity, 1)) !important;
}

.\[\&_svg\]\:\!text-gray-500 svg {
  --tw-text-opacity: 1 !important;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1)) !important;
}

.\[\&_svg\]\:text-gray-500 svg {
  --tw-text-opacity: 1;
  color: rgb(147 143 153 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 640px) {

  .max-sm\:\[\&_svg\]\:h-2\.5 svg {
    height: 0.625rem;
  }

  .max-sm\:\[\&_svg\]\:w-2\.5 svg {
    width: 0.625rem;
  }
}

.\[\&_tr\:last-child_td\]\:border-b-0 tr:last-child td {
  border-bottom-width: 0px;
}

.\[\&_ul\]\:w-full ul {
  width: 100%;
}