@layer theme, base, components, utilities;

@layer theme {
  @theme default {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;

    --color-red-50: oklch(97.1% 0.013 17.38);

    --color-red-100: oklch(93.6% 0.032 17.717);

    --color-red-200: oklch(88.5% 0.062 18.334);

    --color-red-300: oklch(80.8% 0.114 19.571);

    --color-red-400: oklch(70.4% 0.191 22.216);

    --color-red-500: oklch(63.7% 0.237 25.331);

    --color-red-600: oklch(57.7% 0.245 27.325);

    --color-red-700: oklch(50.5% 0.213 27.518);

    --color-red-800: oklch(44.4% 0.177 26.899);

    --color-red-900: oklch(39.6% 0.141 25.723);

    --color-red-950: oklch(25.8% 0.092 26.042);

    --color-orange-50: oklch(98% 0.016 73.684);

    --color-orange-100: oklch(95.4% 0.038 75.164);

    --color-orange-200: oklch(90.1% 0.076 70.697);

    --color-orange-300: oklch(83.7% 0.128 66.29);

    --color-orange-400: oklch(75% 0.183 55.934);

    --color-orange-500: oklch(70.5% 0.213 47.604);

    --color-orange-600: oklch(64.6% 0.222 41.116);

    --color-orange-700: oklch(55.3% 0.195 38.402);

    --color-orange-800: oklch(47% 0.157 37.304);

    --color-orange-900: oklch(40.8% 0.123 38.172);

    --color-orange-950: oklch(26.6% 0.079 36.259);

    --color-amber-50: oklch(98.7% 0.022 95.277);

    --color-amber-100: oklch(96.2% 0.059 95.617);

    --color-amber-200: oklch(92.4% 0.12 95.746);

    --color-amber-300: oklch(87.9% 0.169 91.605);

    --color-amber-400: oklch(82.8% 0.189 84.429);

    --color-amber-500: oklch(76.9% 0.188 70.08);

    --color-amber-600: oklch(66.6% 0.179 58.318);

    --color-amber-700: oklch(55.5% 0.163 48.998);

    --color-amber-800: oklch(47.3% 0.137 46.201);

    --color-amber-900: oklch(41.4% 0.112 45.904);

    --color-amber-950: oklch(27.9% 0.077 45.635);

    --color-yellow-50: oklch(98.7% 0.026 102.212);

    --color-yellow-100: oklch(97.3% 0.071 103.193);

    --color-yellow-200: oklch(94.5% 0.129 101.54);

    --color-yellow-300: oklch(90.5% 0.182 98.111);

    --color-yellow-400: oklch(85.2% 0.199 91.936);

    --color-yellow-500: oklch(79.5% 0.184 86.047);

    --color-yellow-600: oklch(68.1% 0.162 75.834);

    --color-yellow-700: oklch(55.4% 0.135 66.442);

    --color-yellow-800: oklch(47.6% 0.114 61.907);

    --color-yellow-900: oklch(42.1% 0.095 57.708);

    --color-yellow-950: oklch(28.6% 0.066 53.813);

    --color-lime-50: oklch(98.6% 0.031 120.757);

    --color-lime-100: oklch(96.7% 0.067 122.328);

    --color-lime-200: oklch(93.8% 0.127 124.321);

    --color-lime-300: oklch(89.7% 0.196 126.665);

    --color-lime-400: oklch(84.1% 0.238 128.85);

    --color-lime-500: oklch(76.8% 0.233 130.85);

    --color-lime-600: oklch(64.8% 0.2 131.684);

    --color-lime-700: oklch(53.2% 0.157 131.589);

    --color-lime-800: oklch(45.3% 0.124 130.933);

    --color-lime-900: oklch(40.5% 0.101 131.063);

    --color-lime-950: oklch(27.4% 0.072 132.109);

    --color-green-50: oklch(98.2% 0.018 155.826);

    --color-green-100: oklch(96.2% 0.044 156.743);

    --color-green-200: oklch(92.5% 0.084 155.995);

    --color-green-300: oklch(87.1% 0.15 154.449);

    --color-green-400: oklch(79.2% 0.209 151.711);

    --color-green-500: oklch(72.3% 0.219 149.579);

    --color-green-600: oklch(62.7% 0.194 149.214);

    --color-green-700: oklch(52.7% 0.154 150.069);

    --color-green-800: oklch(44.8% 0.119 151.328);

    --color-green-900: oklch(39.3% 0.095 152.535);

    --color-green-950: oklch(26.6% 0.065 152.934);

    --color-emerald-50: oklch(97.9% 0.021 166.113);

    --color-emerald-100: oklch(95% 0.052 163.051);

    --color-emerald-200: oklch(90.5% 0.093 164.15);

    --color-emerald-300: oklch(84.5% 0.143 164.978);

    --color-emerald-400: oklch(76.5% 0.177 163.223);

    --color-emerald-500: oklch(69.6% 0.17 162.48);

    --color-emerald-600: oklch(59.6% 0.145 163.225);

    --color-emerald-700: oklch(50.8% 0.118 165.612);

    --color-emerald-800: oklch(43.2% 0.095 166.913);

    --color-emerald-900: oklch(37.8% 0.077 168.94);

    --color-emerald-950: oklch(26.2% 0.051 172.552);

    --color-teal-50: oklch(98.4% 0.014 180.72);

    --color-teal-100: oklch(95.3% 0.051 180.801);

    --color-teal-200: oklch(91% 0.096 180.426);

    --color-teal-300: oklch(85.5% 0.138 181.071);

    --color-teal-400: oklch(77.7% 0.152 181.912);

    --color-teal-500: oklch(70.4% 0.14 182.503);

    --color-teal-600: oklch(60% 0.118 184.704);

    --color-teal-700: oklch(51.1% 0.096 186.391);

    --color-teal-800: oklch(43.7% 0.078 188.216);

    --color-teal-900: oklch(38.6% 0.063 188.416);

    --color-teal-950: oklch(27.7% 0.046 192.524);

    --color-cyan-50: oklch(98.4% 0.019 200.873);

    --color-cyan-100: oklch(95.6% 0.045 203.388);

    --color-cyan-200: oklch(91.7% 0.08 205.041);

    --color-cyan-300: oklch(86.5% 0.127 207.078);

    --color-cyan-400: oklch(78.9% 0.154 211.53);

    --color-cyan-500: oklch(71.5% 0.143 215.221);

    --color-cyan-600: oklch(60.9% 0.126 221.723);

    --color-cyan-700: oklch(52% 0.105 223.128);

    --color-cyan-800: oklch(45% 0.085 224.283);

    --color-cyan-900: oklch(39.8% 0.07 227.392);

    --color-cyan-950: oklch(30.2% 0.056 229.695);

    --color-sky-50: oklch(97.7% 0.013 236.62);

    --color-sky-100: oklch(95.1% 0.026 236.824);

    --color-sky-200: oklch(90.1% 0.058 230.902);

    --color-sky-300: oklch(82.8% 0.111 230.318);

    --color-sky-400: oklch(74.6% 0.16 232.661);

    --color-sky-500: oklch(68.5% 0.169 237.323);

    --color-sky-600: oklch(58.8% 0.158 241.966);

    --color-sky-700: oklch(50% 0.134 242.749);

    --color-sky-800: oklch(44.3% 0.11 240.79);

    --color-sky-900: oklch(39.1% 0.09 240.876);

    --color-sky-950: oklch(29.3% 0.066 243.157);

    --color-blue-50: oklch(97% 0.014 254.604);

    --color-blue-100: oklch(93.2% 0.032 255.585);

    --color-blue-200: oklch(88.2% 0.059 254.128);

    --color-blue-300: oklch(80.9% 0.105 251.813);

    --color-blue-400: oklch(70.7% 0.165 254.624);

    --color-blue-500: oklch(62.3% 0.214 259.815);

    --color-blue-600: oklch(54.6% 0.245 262.881);

    --color-blue-700: oklch(48.8% 0.243 264.376);

    --color-blue-800: oklch(42.4% 0.199 265.638);

    --color-blue-900: oklch(37.9% 0.146 265.522);

    --color-blue-950: oklch(28.2% 0.091 267.935);

    --color-indigo-50: oklch(96.2% 0.018 272.314);

    --color-indigo-100: oklch(93% 0.034 272.788);

    --color-indigo-200: oklch(87% 0.065 274.039);

    --color-indigo-300: oklch(78.5% 0.115 274.713);

    --color-indigo-400: oklch(67.3% 0.182 276.935);

    --color-indigo-500: oklch(58.5% 0.233 277.117);

    --color-indigo-600: oklch(51.1% 0.262 276.966);

    --color-indigo-700: oklch(45.7% 0.24 277.023);

    --color-indigo-800: oklch(39.8% 0.195 277.366);

    --color-indigo-900: oklch(35.9% 0.144 278.697);

    --color-indigo-950: oklch(25.7% 0.09 281.288);

    --color-violet-50: oklch(96.9% 0.016 293.756);

    --color-violet-100: oklch(94.3% 0.029 294.588);

    --color-violet-200: oklch(89.4% 0.057 293.283);

    --color-violet-300: oklch(81.1% 0.111 293.571);

    --color-violet-400: oklch(70.2% 0.183 293.541);

    --color-violet-500: oklch(60.6% 0.25 292.717);

    --color-violet-600: oklch(54.1% 0.281 293.009);

    --color-violet-700: oklch(49.1% 0.27 292.581);

    --color-violet-800: oklch(43.2% 0.232 292.759);

    --color-violet-900: oklch(38% 0.189 293.745);

    --color-violet-950: oklch(28.3% 0.141 291.089);

    --color-purple-50: oklch(97.7% 0.014 308.299);

    --color-purple-100: oklch(94.6% 0.033 307.174);

    --color-purple-200: oklch(90.2% 0.063 306.703);

    --color-purple-300: oklch(82.7% 0.119 306.383);

    --color-purple-400: oklch(71.4% 0.203 305.504);

    --color-purple-500: oklch(62.7% 0.265 303.9);

    --color-purple-600: oklch(55.8% 0.288 302.321);

    --color-purple-700: oklch(49.6% 0.265 301.924);

    --color-purple-800: oklch(43.8% 0.218 303.724);

    --color-purple-900: oklch(38.1% 0.176 304.987);

    --color-purple-950: oklch(29.1% 0.149 302.717);

    --color-fuchsia-50: oklch(97.7% 0.017 320.058);

    --color-fuchsia-100: oklch(95.2% 0.037 318.852);

    --color-fuchsia-200: oklch(90.3% 0.076 319.62);

    --color-fuchsia-300: oklch(83.3% 0.145 321.434);

    --color-fuchsia-400: oklch(74% 0.238 322.16);

    --color-fuchsia-500: oklch(66.7% 0.295 322.15);

    --color-fuchsia-600: oklch(59.1% 0.293 322.896);

    --color-fuchsia-700: oklch(51.8% 0.253 323.949);

    --color-fuchsia-800: oklch(45.2% 0.211 324.591);

    --color-fuchsia-900: oklch(40.1% 0.17 325.612);

    --color-fuchsia-950: oklch(29.3% 0.136 325.661);

    --color-pink-50: oklch(97.1% 0.014 343.198);

    --color-pink-100: oklch(94.8% 0.028 342.258);

    --color-pink-200: oklch(89.9% 0.061 343.231);

    --color-pink-300: oklch(82.3% 0.12 346.018);

    --color-pink-400: oklch(71.8% 0.202 349.761);

    --color-pink-500: oklch(65.6% 0.241 354.308);

    --color-pink-600: oklch(59.2% 0.249 0.584);

    --color-pink-700: oklch(52.5% 0.223 3.958);

    --color-pink-800: oklch(45.9% 0.187 3.815);

    --color-pink-900: oklch(40.8% 0.153 2.432);

    --color-pink-950: oklch(28.4% 0.109 3.907);

    --color-rose-50: oklch(96.9% 0.015 12.422);

    --color-rose-100: oklch(94.1% 0.03 12.58);

    --color-rose-200: oklch(89.2% 0.058 10.001);

    --color-rose-300: oklch(81% 0.117 11.638);

    --color-rose-400: oklch(71.2% 0.194 13.428);

    --color-rose-500: oklch(64.5% 0.246 16.439);

    --color-rose-600: oklch(58.6% 0.253 17.585);

    --color-rose-700: oklch(51.4% 0.222 16.935);

    --color-rose-800: oklch(45.5% 0.188 13.697);

    --color-rose-900: oklch(41% 0.159 10.272);

    --color-rose-950: oklch(27.1% 0.105 12.094);

    --color-slate-50: oklch(98.4% 0.003 247.858);

    --color-slate-100: oklch(96.8% 0.007 247.896);

    --color-slate-200: oklch(92.9% 0.013 255.508);

    --color-slate-300: oklch(86.9% 0.022 252.894);

    --color-slate-400: oklch(70.4% 0.04 256.788);

    --color-slate-500: oklch(55.4% 0.046 257.417);

    --color-slate-600: oklch(44.6% 0.043 257.281);

    --color-slate-700: oklch(37.2% 0.044 257.287);

    --color-slate-800: oklch(27.9% 0.041 260.031);

    --color-slate-900: oklch(20.8% 0.042 265.755);

    --color-slate-950: oklch(12.9% 0.042 264.695);

    --color-gray-50: oklch(98.5% 0.002 247.839);

    --color-gray-100: oklch(96.7% 0.003 264.542);

    --color-gray-200: oklch(92.8% 0.006 264.531);

    --color-gray-300: oklch(87.2% 0.01 258.338);

    --color-gray-400: oklch(70.7% 0.022 261.325);

    --color-gray-500: oklch(55.1% 0.027 264.364);

    --color-gray-600: oklch(44.6% 0.03 256.802);

    --color-gray-700: oklch(37.3% 0.034 259.733);

    --color-gray-800: oklch(27.8% 0.033 256.848);

    --color-gray-900: oklch(21% 0.034 264.665);

    --color-gray-950: oklch(13% 0.028 261.692);

    --color-zinc-50: oklch(98.5% 0 0);

    --color-zinc-100: oklch(96.7% 0.001 286.375);

    --color-zinc-200: oklch(92% 0.004 286.32);

    --color-zinc-300: oklch(87.1% 0.006 286.286);

    --color-zinc-400: oklch(70.5% 0.015 286.067);

    --color-zinc-500: oklch(55.2% 0.016 285.938);

    --color-zinc-600: oklch(44.2% 0.017 285.786);

    --color-zinc-700: oklch(37% 0.013 285.805);

    --color-zinc-800: oklch(27.4% 0.006 286.033);

    --color-zinc-900: oklch(21% 0.006 285.885);

    --color-zinc-950: oklch(14.1% 0.005 285.823);

    --color-neutral-50: oklch(98.5% 0 0);

    --color-neutral-100: oklch(97% 0 0);

    --color-neutral-200: oklch(92.2% 0 0);

    --color-neutral-300: oklch(87% 0 0);

    --color-neutral-400: oklch(70.8% 0 0);

    --color-neutral-500: oklch(55.6% 0 0);

    --color-neutral-600: oklch(43.9% 0 0);

    --color-neutral-700: oklch(37.1% 0 0);

    --color-neutral-800: oklch(26.9% 0 0);

    --color-neutral-900: oklch(20.5% 0 0);

    --color-neutral-950: oklch(14.5% 0 0);

    --color-stone-50: oklch(98.5% 0.001 106.423);

    --color-stone-100: oklch(97% 0.001 106.424);

    --color-stone-200: oklch(92.3% 0.003 48.717);

    --color-stone-300: oklch(86.9% 0.005 56.366);

    --color-stone-400: oklch(70.9% 0.01 56.259);

    --color-stone-500: oklch(55.3% 0.013 58.071);

    --color-stone-600: oklch(44.4% 0.011 73.639);

    --color-stone-700: oklch(37.4% 0.01 67.558);

    --color-stone-800: oklch(26.8% 0.007 34.298);

    --color-stone-900: oklch(21.6% 0.006 56.043);

    --color-stone-950: oklch(14.7% 0.004 49.25);

    --color-black: #000;

    --color-white: #fff;

    --spacing: 0.25rem;

    --breakpoint-sm: 40rem;

    --breakpoint-md: 48rem;

    --breakpoint-lg: 64rem;

    --breakpoint-xl: 80rem;

    --breakpoint-2xl: 96rem;

    --container-3xs: 16rem;

    --container-2xs: 18rem;

    --container-xs: 20rem;

    --container-sm: 24rem;

    --container-md: 28rem;

    --container-lg: 32rem;

    --container-xl: 36rem;

    --container-2xl: 42rem;

    --container-3xl: 48rem;

    --container-4xl: 56rem;

    --container-5xl: 64rem;

    --container-6xl: 72rem;

    --container-7xl: 80rem;

    --text-xs: 0.75rem;

    --text-xs--line-height: calc(1 / 0.75);

    --text-sm: 0.875rem;

    --text-sm--line-height: calc(1.25 / 0.875);

    --text-base: 1rem;

    --text-base--line-height: calc(1.5 / 1);

    --text-lg: 1.125rem;

    --text-lg--line-height: calc(1.75 / 1.125);

    --text-xl: 1.25rem;

    --text-xl--line-height: calc(1.75 / 1.25);

    --text-2xl: 1.5rem;

    --text-2xl--line-height: calc(2 / 1.5);

    --text-3xl: 1.875rem;

    --text-3xl--line-height: calc(2.25 / 1.875);

    --text-4xl: 2.25rem;

    --text-4xl--line-height: calc(2.5 / 2.25);

    --text-5xl: 3rem;

    --text-5xl--line-height: 1;

    --text-6xl: 3.75rem;

    --text-6xl--line-height: 1;

    --text-7xl: 4.5rem;

    --text-7xl--line-height: 1;

    --text-8xl: 6rem;

    --text-8xl--line-height: 1;

    --text-9xl: 8rem;

    --text-9xl--line-height: 1;

    --font-weight-thin: 100;

    --font-weight-extralight: 200;

    --font-weight-light: 300;

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --font-weight-extrabold: 800;

    --font-weight-black: 900;

    --tracking-tighter: -0.05em;

    --tracking-tight: -0.025em;

    --tracking-normal: 0em;

    --tracking-wide: 0.025em;

    --tracking-wider: 0.05em;

    --tracking-widest: 0.1em;

    --leading-tight: 1.25;

    --leading-snug: 1.375;

    --leading-normal: 1.5;

    --leading-relaxed: 1.625;

    --leading-loose: 2;

    --radius-xs: 0.125rem;

    --radius-sm: 0.25rem;

    --radius-md: 0.375rem;

    --radius-lg: 0.5rem;

    --radius-xl: 0.75rem;

    --radius-2xl: 1rem;

    --radius-3xl: 1.5rem;

    --radius-4xl: 2rem;

    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    --shadow-lg:
      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --shadow-xl:
      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);

    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);

    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);

    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);

    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);

    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);

    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);

    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);

    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);

    --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);

    --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);

    --text-shadow-sm:
      0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),
      0px 2px 2px rgb(0 0 0 / 0.075);

    --text-shadow-md:
      0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),
      0px 2px 4px rgb(0 0 0 / 0.1);

    --text-shadow-lg:
      0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),
      0px 4px 8px rgb(0 0 0 / 0.1);

    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --animate-spin: spin 1s linear infinite;

    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    --animate-bounce: bounce 1s infinite;

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

    @keyframes ping {
      75%,
      100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    @keyframes pulse {
      50% {
        opacity: 0.5;
      }
    }

    @keyframes bounce {
      0%,
      100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }

      50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    --blur-xs: 4px;

    --blur-sm: 8px;

    --blur-md: 12px;

    --blur-lg: 16px;

    --blur-xl: 24px;

    --blur-2xl: 40px;

    --blur-3xl: 64px;

    --perspective-dramatic: 100px;

    --perspective-near: 300px;

    --perspective-normal: 500px;

    --perspective-midrange: 800px;

    --perspective-distant: 1200px;

    --aspect-video: 16 / 9;

    --default-transition-duration: 150ms;

    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    --default-font-family: --theme(--font-sans, initial);

    --default-font-feature-settings: --theme(
      --font-sans--font-feature-settings,
      initial
    );

    --default-font-variation-settings: --theme(
      --font-sans--font-variation-settings,
      initial
    );

    --default-mono-font-family: --theme(--font-mono, initial);

    --default-mono-font-feature-settings: --theme(
      --font-mono--font-feature-settings,
      initial
    );

    --default-mono-font-variation-settings: --theme(
      --font-mono--font-variation-settings,
      initial
    );
  }

  /* Deprecated */

  @theme default inline reference {
    --blur: 8px;

    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);

    --radius: 0.25rem;

    --max-width-prose: 65ch;
  }
}

@reference "tailwindcss/utilities";

@keyframes bob-up-down {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes bob-left-right {
  0%, 100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(6px);
  }
}

.thin-scrollbar::-webkit-scrollbar {
  height: 6px;
  /* controls horizontal thickness */
}

/* Firefox */

.thin-scrollbar {
  scrollbar-width: thin;
}

.dnd-icon-up-down::after {
  content: "";
  /* MUST HAVE */
  position: absolute;
  z-index: 69;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  mask: url("/static/images/arrowsUpDown.svg") center/contain no-repeat;
  -webkit-mask: url("/static/images/arrowsUpDown.svg") center/contain no-repeat;
  background-color: #a75de3;
  /* your icon color */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: bob-up-down 1.5s ease-in-out infinite;
}

.dnd-icon-left-right::after {
  content: "";
  /* MUST HAVE */
  position: absolute;
  z-index: 69;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  mask: url("/static/images/arrowsLeftRight.svg") center/contain no-repeat;
  -webkit-mask: url("/static/images/arrowsLeftRight.svg") center/contain no-repeat;
  background-color: #a75de3;
  /* your icon color */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  /* optional, doesn’t block clicks */
  animation: bob-left-right 1.5s ease-in-out infinite;
}

*[draggable="true"] {
  cursor: grab;
}

/* Hover effect for potential draggable components - show dashed border */

#component-container:not(body) *[component-id]:not(.drop-target-hover):not(.deepest-hover-child):not([data-preview-mode="true"]):hover {
  outline: 2px dashed #a75de3 !important;
  outline-offset: -2px;
  border-radius: 4px;
  transition: outline 0.2s ease;
}

.insert-form-btn:hover, .reusable-component-btn:hover, .insert-product-btn:hover, .insert-service-btn:hover, .component-item:hover {
  background-color: rgba(167, 93, 227, 0.1) !important;
  outline: 3px solid #a75de3 !important;
}

/* Deepest child in hover hierarchy - solid border to distinguish it */

.deepest-hover-child {
  outline: 3px solid #a75de3 !important;
  outline-offset: -3px;
  border-radius: 4px;
  transition: outline 0.2s ease;
}

/* Highlight drop target during drag - solid border and background */

.drop-target-hover {
  background-color: rgba(167, 93, 227, 0.1) !important;
  outline: 3px solid #a75de3 !important;
  outline-offset: -3px;
  border-radius: 4px;
}

/* Sibling-swap ("insert between") drag indicator — nudges the hovered
   sibling away from the edge the dragged component will land on (via
   margin, so surrounding siblings actually reflow to open a small gap)
   and draws an accent bar in that gap via a pseudo-element, so it doesn't
   affect the element's own border/padding box. */

.insert-indicator-top,
.insert-indicator-bottom,
.insert-indicator-left,
.insert-indicator-right {
  transition: margin 0.12s ease-out;
}

.insert-indicator-top {
  margin-top: 8px !important;
}

.insert-indicator-bottom {
  margin-bottom: 8px !important;
}

.insert-indicator-left {
  margin-left: 8px !important;
}

.insert-indicator-right {
  margin-right: 8px !important;
}

.insert-indicator-top::before,
.insert-indicator-bottom::after,
.insert-indicator-left::before,
.insert-indicator-right::after {
  content: "";
  position: absolute;
  background-color: #a75de3;
  border-radius: 2px;
  pointer-events: none;
  z-index: 70;
}

.insert-indicator-top::before {
  top: -5px;
  left: 0;
  right: 0;
  height: 3px;
}

.insert-indicator-bottom::after {
  bottom: -5px;
  left: 0;
  right: 0;
  height: 3px;
}

.insert-indicator-left::before {
  left: -5px;
  top: 0;
  bottom: 0;
  width: 3px;
}

.insert-indicator-right::after {
  right: -5px;
  top: 0;
  bottom: 0;
  width: 3px;
}

/* ---------------------------------------------------------------------------
   Drag-and-drop editor feedback animations (driven by dragAnimations.js)
   - dnd-reorder-flip: applied while a FLIP-captured transform is being
     transitioned back to identity, so a swapped/shifted sibling visibly
     slides from its old spot to its new one instead of jumping.
   - dnd-rehome-settle: a brief "landed" pop played on a component right
     after it's dropped as a new child into a different container.
--------------------------------------------------------------------------- */

.dnd-reorder-flip {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dnd-rehome-pop {
  0% {
    transform: scale(0.92);
    opacity: 0.55;
  }

  60% {
    transform: scale(1.015);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.dnd-rehome-settle {
  animation: dnd-rehome-pop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

div[component-id].ql-snow {
  height: unset;
}

.ql-container > .ql-editor {
  height: unset;
}

.ql-snow > .ql-editor {
  height: unset;
}

/* Hide default Quill font picker */

#custom-toolbar .ql-font {
  display: none;
}

/* Custom font picker button */

#custom-font-picker-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid white;
  border-radius: 6px;
  background: transparent;
  color: white;
  cursor: pointer;
  font-family: 'WorkSans-Medium', sans-serif;
  font-size: 13px;
  margin-right: 6px;
  transition: color 0.2s;
}

#custom-font-picker-btn:hover {
  color: #a75de3;
}

/* Custom font picker modal */

#custom-font-picker-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-height: 600px;
  background: rgb(39 39 42);
  border: 1px solid white;
  border-radius: 8px;
  padding: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

#custom-font-picker-modal.hidden {
  display: none;
}

/* Modal overlay */

#font-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

#font-picker-overlay.hidden {
  display: none;
}

/* Font picker search */

#font-picker-search {
  width: 100%;
  padding: 8px 12px;
  background: rgb(24 24 27);
  border: 1px solid rgb(82 82 91);
  border-radius: 6px;
  color: white;
  font-family: 'WorkSans-Medium', sans-serif;
  font-size: 14px;
  margin-bottom: 12px;
}

#font-picker-search:focus {
  outline: none;
  border-color: #a75de3;
}

/* Font list container */

#font-picker-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* Individual font items */

.font-picker-item {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 4px;
  transition: background 0.2s;
  color: white;
  font-size: 16px;
}

.font-picker-item:hover {
  background: rgb(63 63 70);
}

.font-picker-item.selected {
  background: #a75de3;
}

/* Close button */

#font-picker-close {
  padding: 8px 16px;
  background: rgb(63 63 70);
  border: 1px solid rgb(82 82 91);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-family: 'WorkSans-Medium', sans-serif;
  transition: background 0.2s;
}

#font-picker-close:hover {
  background: rgb(82 82 91);
}

@theme {
  --color-primary: #ffd3fe;

  --color-secondary: #a75de3;

  --color-textPrimary: #000080;
}

.ql-container {
  font-family: unset !important;
}

.ql-container.ql-snow {
  border-width: 0px !important;
}

.resize-handle {
  position: fixed;
  width: 14px;
  height: 14px;
  background: white;
  border: 2px solid #a75de3;
  border-radius: 50%;
  z-index: 9999;
}

.resize-handle.tl {
  cursor: nwse-resize;
}

.resize-handle.tr {
  cursor: nesw-resize;
}

.resize-handle.bl {
  cursor: nesw-resize;
}

.resize-handle.br {
  cursor: nwse-resize;
}

.resize-handle.t {
  cursor: ns-resize;
}

.resize-handle.b {
  cursor: ns-resize;
}

.resize-handle.l {
  cursor: ew-resize;
}

.resize-handle.r {
  cursor: ew-resize;
}

#custom-toolbar.ql-toolbar.ql-snow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#custom-toolbar.ql-snow.ql-toolbar button {
  height: 30px;
  width: 24px;
}

#custom-font-picker-btn {
  width: 60px !important;
}

#custom-toolbar.ql-toolbar.ql-snow span,
#custom-toolbar.ql-toolbar.ql-snow button {
  margin-right: 6px;
}

#custom-toolbar.ql-toolbar.ql-snow .ql-picker {
  height: 30px;
}

#custom-toolbar.ql-toolbar.ql-snow .ql-color-picker {
  width: 30px;
}

#custom-toolbar.ql-toolbar.ql-snow .ql-picker-label {
  padding: 0px !important;
}

#custom-toolbar.ql-toolbar.ql-snow .ql-font .ql-picker-label,
#custom-toolbar.ql-toolbar.ql-snow .ql-size .ql-picker-label {
  border: 1px solid white;
  border-radius: 6px;
}

.property-group-editor .ql-toolbar.ql-snow {
  border: 0px;
  font-family: 'WorkSans-Medium', sans-serif;
}

/* Hover style for the whole select control */

#custom-toolbar.ql-toolbar.ql-snow .ql-font .ql-picker-label:hover,
#custom-toolbar.ql-toolbar.ql-snow .ql-size .ql-picker-label:hover {
  color: #a75de3;
  cursor: pointer;
}

.overlaid-property-editor-styles {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  padding: .5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.glass-container {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: .5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.glass-breadcrumbs {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.glass-sidebar {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.glass-input {
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  color: white;
  padding: 0.5rem;
  transition: all 0.2s;
}

.glass-input:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.97), rgba(24, 24, 27, 0.95));
}

.glass-input:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.8);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.98), rgba(24, 24, 27, 0.97));
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.glass-select-container {
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.95), rgba(24, 24, 27, 0.9));
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.glass-select {
  /* Without this, Safari keeps its native menulist chrome and ignores the
     background-color/border below entirely — Chrome and Firefox apply
     custom select styling without it, so this only shows up in Safari. */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: rgba(24, 24, 27, 0.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1em;
  padding-right: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  color: white;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
}

.glass-select option {
  background-color: rgba(24, 24, 27, 0.9) !important;
  color: white !important;
  padding: 0.5rem;
}

.glass-select option:checked,
.glass-select option:hover {
  background: linear-gradient(to right, rgb(168, 85, 247), rgb(147, 51, 234)) !important;
  color: white !important;
}

#add-new-child-button {
  transition: opacity 0.2s ease-in-out;
}

.glass-modal {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.97), rgba(24, 24, 27, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  height: 90vh;
  overflow: auto;
}

/* Property group editors (margins, background, border, etc.) are laid out as
   single flex rows sized for desktop. On phone-width viewports the sidebar
   properties panel itself shrinks (see properties-container), so force these
   rows to wrap instead of clipping/overflowing. */

@media (max-width: 767px) {
  .property-group-editor.flex-row,
  .property-group-editor .flex-row {
    flex-wrap: wrap;
  }
}

.glass-context-menu {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(to bottom right, rgba(39, 39, 42, 0.97), rgba(24, 24, 27, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.context-menu-item {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  transition: background 0.2s;
}

.context-menu-item:hover {
  background: rgba(168, 85, 247, 0.2);
}

.cart-link-button {
  position: relative;
  display: inline-block;
}

.cart-link-button::after {
  content: attr(data-count);
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  background: white;
  color: black;
  border-radius: 50%;
  font-size: 0.7rem;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cart-link-button[data-count]:not([data-count="0"])::after {
  opacity: 1;
}

@font-face {
  font-family: 'MontserrateBold';

  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}

.main-header {
  font-size: 40px;
  font-family: 'MontserrateBold';
  line-height: 3rem;
}

@keyframes throb {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.5);
  }

  /* Expand quickly */

  100% {
    transform: scale(1.1);
  }

  /* Shrink slightly slower */
}

.throbbing {
  animation: throb 0.5s ease-in-out;
}

.overlay {
  transform: translate(-50%, -50%);
}

.carousel-slide-exit-active {
  transform: translateX(-100%);
}

.carousel-slide-current {
  transform: translateX(0%);
}

.carousel-slide-next {
  transform: translateX(100%);
  z-index: -1;
}

.carousel-slide {
  position: absolute;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  transition-duration: 1000ms;
  /* Example: Adjust as needed */
  top: 0;
}

body {
  margin: 0;
  font-family: 'WorkSans-Medium', sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #333333;
}

.bg {
  background-color: #333333;
}

@font-face {
  font-family: 'WorkSans-Medium';

  src: url('../fonts/WorkSans-Medium.ttf') format('truetype')
}

@font-face {
  font-family: 'WorkSans';

  src: url('../fonts/WorkSans-Regular.ttf') format('truetype')
}

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

.primary-btn > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:
      0;
  margin-right:
      calc(0.5rem * var(--tw-space-x-reverse));
  margin-left:
      calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.primary-btn{
  border-radius:
      0.5rem;
  background-image:
      linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from:
      #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to:
      #7e22ce var(--tw-gradient-to-position);
  padding-left:
      1.5rem;
  padding-right:
      1.5rem;
  padding-top:
      0.75rem;
  padding-bottom:
      0.75rem;
  font-weight:
      500;
  --tw-text-opacity:
      1;
  color:
      rgb(255 255 255 / var(--tw-text-opacity, 1));
  --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);
  --tw-shadow-color:
      rgb(147 51 234 / 0.3);
  --tw-shadow:
      var(--tw-shadow-colored);
  transition-property:
      all;
  transition-timing-function:
      cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:
      200ms;
}

.primary-btn:hover{
  --tw-gradient-from:
      #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to:
      #6b21a8 var(--tw-gradient-to-position);
}

.insert-new-component-btn{
  border-radius:
      0.5rem;
  background-image:
      linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from:
      #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to:
      #7e22ce var(--tw-gradient-to-position);
  padding:
      0.5rem;
  font-weight:
      500;
  --tw-text-opacity:
      1;
  color:
      rgb(255 255 255 / var(--tw-text-opacity, 1));
  --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);
  --tw-shadow-color:
      rgb(147 51 234 / 0.3);
  --tw-shadow:
      var(--tw-shadow-colored);
  transition-property:
      all;
  transition-timing-function:
      cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:
      200ms;
}

.insert-new-component-btn:hover{
  --tw-gradient-from:
      #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to:
      #6b21a8 var(--tw-gradient-to-position);
}

.accent-btn{
  border-radius:
      0.25rem;
  border-width:
      2px;
  --tw-border-opacity:
      1;
  border-color:
      rgb(6 182 212 / var(--tw-border-opacity, 1));
  --tw-bg-opacity:
      1;
  background-color:
      rgb(6 182 212 / var(--tw-bg-opacity, 1));
  padding-left:
      1rem;
  padding-right:
      1rem;
  padding-top:
      0.5rem;
  padding-bottom:
      0.5rem;
  --tw-text-opacity:
      1;
  color:
      rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.accent-btn:hover{
  background-color:
      transparent;
}

/* quill editor styling */

.ql-stroke {
  stroke: white !important;
}

.ql-snow .ql-picker {
  color: white !important;
}

/* Set droplist names - -item is the currently selected font, -label is the font's appearance in the droplist*/

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before
{
  content: 'Default';
}

.ql-picker-options {
  height: 200px;
  overflow-y: scroll;
}

.ql-picker-item {
  color: #3f3f46;
}

.ql-picker-item .ql-stroke {
  stroke: #3f3f46 !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.5rem"]::before {
  content: "XS";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75rem"]::before {
  content: "S";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1rem"]::before {
  content: "M";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.25rem"]::before {
  content: "M+";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.5rem"]::before {
  content: "L";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="2rem"]::before {
  content: "XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="2.5rem"]::before {
  content: "XL+";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="3rem"]::before {
  content: "2XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="4rem"]::before {
  content: "3XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="5rem"]::before {
  content: "4XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="6rem"]::before {
  content: "5XL";
}

/* render the selected value */

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.5rem"]::before {
  content: "XS";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75rem"]::before {
  content: "S";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1rem"]::before {
  content: "M";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.25rem"]::before {
  content: "M+";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.5rem"]::before {
  content: "L";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="2rem"]::before {
  content: "XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="2.5rem"]::before {
  content: "XL+";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="3rem"]::before {
  content: "2XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="4rem"]::before {
  content: "3XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="5rem"]::before {
  content: "4XL";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="6rem"]::before {
  content: "5XL";
}

/* Dropdown component styles */

.component-dropdown {
  position: relative;
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 100%;
  margin-top: 0.25rem;
}

/* Pickr color picker button */

.pcr-button {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.375rem !important;
}

.ql-editor {
  padding: 0px !important;
}

/* A button's rich-text editor renders even when empty (no richText/text set
   yet) so it's always there for Quill to attach to. With no content, an empty
   div collapses to zero size and the click needed to place a cursor and start
   typing has nothing to land on — floor its size so it stays clickable.
   Browsers also apply user-select: none to <button> by default (Chrome/Safari's
   UA stylesheet), which is inherited by descendants — without overriding it
   here, clicking inside the editor never starts a text caret at all, so the
   size fix alone wouldn't be enough. */

button .ql-editor,
a .ql-editor {
  min-width: 20px;
  min-height: 1.2em;
  height: -moz-max-content;
  height: max-content;
  overflow: visible;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* Quill toolbar text/background color triggers — smaller than the default
   Pickr button so they sit proportionately with the rest of the toolbar.
   Pickr replaces the original button element wholesale (it doesn't keep the
   id we gave it), so this has to be scoped via the wrapper div we control
   rather than an id selector on the button itself. */

.quill-text-color-control .pcr-button,
.quill-background-color-control .pcr-button {
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0.25rem !important;
  border-radius: 0.25rem !important;
}

*, ::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.17 | 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 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     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::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 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;
}

/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
  box-sizing: border-box;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 2 */
  border: 0 solid;
  /* 3 */
}

/*
  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 */
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  /* 3 */
  font-family: --theme(
      --default-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: --theme(
      --default-font-feature-settings,
      normal
    );
  /* 5 */
  font-variation-settings: --theme(
      --default-font-variation-settings,
      normal
    );
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
  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. Reset the default border style to a 1px solid border.
*/

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;
  -webkit-text-decoration: 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: --theme(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
  /* 1 */
  font-feature-settings: --theme(
      --default-mono-font-feature-settings,
      normal
    );
  /* 2 */
  font-variation-settings: --theme(
      --default-mono-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 */
}

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

:-moz-focusring {
  outline: auto;
}

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

progress {
  vertical-align: baseline;
}

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

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

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

/*
  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;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
  font: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  border-radius: 0;
  /* 2 */
  background-color: transparent;
  /* 3 */
  opacity: 1;
  /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::-moz-placeholder {
  opacity: 1;
}

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
    (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::-moz-placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh;
  /* 1 */
  text-align: inherit;
  /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

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

::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  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;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

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

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

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

.\!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:
      sticky;
}

.inset-0{
  inset:
      0px;
}

.inset-x-0{
  left:
      0px;
  right:
      0px;
}

.inset-x-12{
  left:
      3rem;
  right:
      3rem;
}

.inset-y-0{
  top:
      0px;
  bottom:
      0px;
}

.inset-y-6{
  top:
      1.5rem;
  bottom:
      1.5rem;
}

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

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

.bottom-0{
  bottom:
      0px;
}

.bottom-1\.5{
  bottom:
      0.375rem;
}

.bottom-6{
  bottom:
      1.5rem;
}

.bottom-full{
  bottom:
      100%;
}

.left-0{
  left:
      0px;
}

.left-1\.5{
  left:
      0.375rem;
}

.left-1\/2{
  left:
      50%;
}

.left-12{
  left:
      3rem;
}

.left-6{
  left:
      1.5rem;
}

.left-full{
  left:
      100%;
}

.right-0{
  right:
      0px;
}

.right-1\.5{
  right:
      0.375rem;
}

.right-12{
  right:
      3rem;
}

.right-2{
  right:
      0.5rem;
}

.right-4{
  right:
      1rem;
}

.right-6{
  right:
      1.5rem;
}

.top-0{
  top:
      0px;
}

.top-1\.5{
  top:
      0.375rem;
}

.top-1\/2{
  top:
      50%;
}

.top-16{
  top:
      4rem;
}

.top-2{
  top:
      0.5rem;
}

.top-4{
  top:
      1rem;
}

.top-6{
  top:
      1.5rem;
}

.top-full{
  top:
      100%;
}

.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-\[100\]{
  z-index:
      100;
}

.z-\[200\]{
  z-index:
      200;
}

.z-\[9999\]{
  z-index:
      9999;
}

.col-span-3{
  grid-column:
      span 3 / span 3;
}

.my-20{
  margin-top:
      5rem;
  margin-bottom:
      5rem;
}

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

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

.mb-1\.5{
  margin-bottom:
      0.375rem;
}

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

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

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

.mb-6{
  margin-bottom:
      1.5rem;
}

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

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

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

.ml-auto{
  margin-left:
      auto;
}

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

.mr-2{
  margin-right:
      0.5rem;
}

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

.mr-6{
  margin-right:
      1.5rem;
}

.mr-auto{
  margin-right:
      auto;
}

.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-2{
  margin-top:
      0.5rem;
}

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

.mt-6{
  margin-top:
      1.5rem;
}

.block{
  display:
      block;
}

.inline{
  display:
      inline;
}

.flex{
  display:
      flex;
}

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

.\!table{
  display:
      table !important;
}

.table{
  display:
      table;
}

.flow-root{
  display:
      flow-root;
}

.grid{
  display:
      grid;
}

.contents{
  display:
      contents;
}

.hidden{
  display:
      none;
}

.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;
}

.h-10{
  height:
      2.5rem;
}

.h-12{
  height:
      3rem;
}

.h-16{
  height:
      4rem;
}

.h-20{
  height:
      5rem;
}

.h-24{
  height:
      6rem;
}

.h-3{
  height:
      0.75rem;
}

.h-3\.5{
  height:
      0.875rem;
}

.h-4{
  height:
      1rem;
}

.h-40{
  height:
      10rem;
}

.h-5{
  height:
      1.25rem;
}

.h-6{
  height:
      1.5rem;
}

.h-7{
  height:
      1.75rem;
}

.h-8{
  height:
      2rem;
}

.h-\[500px\]{
  height:
      500px;
}

.h-fit{
  height:
      -moz-fit-content;
  height:
      fit-content;
}

.h-full{
  height:
      100%;
}

.h-screen{
  height:
      100vh;
}

.max-h-32{
  max-height:
      8rem;
}

.max-h-36{
  max-height:
      9rem;
}

.max-h-80{
  max-height:
      20rem;
}

.max-h-96{
  max-height:
      24rem;
}

.max-h-\[70vh\]{
  max-height:
      70vh;
}

.max-h-\[calc\(100vh-4rem\)\]{
  max-height:
      calc(100vh - 4rem);
}

.min-h-32{
  min-height:
      8rem;
}

.w-10{
  width:
      2.5rem;
}

.w-12{
  width:
      3rem;
}

.w-14{
  width:
      3.5rem;
}

.w-16{
  width:
      4rem;
}

.w-20{
  width:
      5rem;
}

.w-24{
  width:
      6rem;
}

.w-28{
  width:
      7rem;
}

.w-3{
  width:
      0.75rem;
}

.w-3\.5{
  width:
      0.875rem;
}

.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-52{
  width:
      13rem;
}

.w-56{
  width:
      14rem;
}

.w-6{
  width:
      1.5rem;
}

.w-64{
  width:
      16rem;
}

.w-7{
  width:
      1.75rem;
}

.w-72{
  width:
      18rem;
}

.w-8{
  width:
      2rem;
}

.w-80{
  width:
      20rem;
}

.w-9{
  width:
      2.25rem;
}

.w-\[300px\]{
  width:
      300px;
}

.w-\[95vw\]{
  width:
      95vw;
}

.w-fit{
  width:
      -moz-fit-content;
  width:
      fit-content;
}

.w-full{
  width:
      100%;
}

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

.min-w-80{
  min-width:
      20rem;
}

.max-w-2xl{
  max-width:
      42rem;
}

.max-w-36{
  max-width:
      9rem;
}

.max-w-5xl{
  max-width:
      64rem;
}

.max-w-\[100vw\]{
  max-width:
      100vw;
}

.max-w-\[12rem\]{
  max-width:
      12rem;
}

.max-w-\[50vw\]{
  max-width:
      50vw;
}

.max-w-\[70vw\]{
  max-width:
      70vw;
}

.max-w-\[85\%\]{
  max-width:
      85%;
}

.max-w-\[calc\(100vw-6rem\)\]{
  max-width:
      calc(100vw - 6rem);
}

.max-w-lg{
  max-width:
      32rem;
}

.max-w-md{
  max-width:
      28rem;
}

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

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

.flex-shrink-0{
  flex-shrink:
      0;
}

.shrink{
  flex-shrink:
      1;
}

.shrink-0{
  flex-shrink:
      0;
}

.grow{
  flex-grow:
      1;
}

.basis-10\/12{
  flex-basis:
      83.333333%;
}

.border-collapse{
  border-collapse:
      collapse;
}

.-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-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-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-5{
  --tw-translate-x:
      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;
  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));
}

.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));
}

.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 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

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

.cursor-default{
  cursor:
      default;
}

.cursor-grab{
  cursor:
      grab;
}

.cursor-help{
  cursor:
      help;
}

.cursor-not-allowed{
  cursor:
      not-allowed;
}

.cursor-pointer{
  cursor:
      pointer;
}

.touch-none{
  touch-action:
      none;
}

.select-none{
  -webkit-user-select:
      none;
     -moz-user-select:
      none;
          user-select:
      none;
}

.resize-none{
  resize:
      none;
}

.resize{
  resize:
      both;
}

.grid-cols-1{
  grid-template-columns:
      repeat(1, minmax(0, 1fr));
}

.grid-cols-2{
  grid-template-columns:
      repeat(2, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns:
      repeat(4, minmax(0, 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-center{
  align-content:
      center;
}

.items-start{
  align-items:
      flex-start;
}

.items-end{
  align-items:
      flex-end;
}

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

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

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

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

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

.gap-0\.5{
  gap:
      0.125rem;
}

.gap-1{
  gap:
      0.25rem;
}

.gap-1\.5{
  gap:
      0.375rem;
}

.gap-2{
  gap:
      0.5rem;
}

.gap-3{
  gap:
      0.75rem;
}

.gap-4{
  gap:
      1rem;
}

.gap-5{
  gap:
      1.25rem;
}

.gap-6{
  gap:
      1.5rem;
}

.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:
      0;
  margin-right:
      calc(0.25rem * var(--tw-space-x-reverse));
  margin-left:
      calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:
      0;
  margin-right:
      calc(0.5rem * var(--tw-space-x-reverse));
  margin-left:
      calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:
      0;
  margin-right:
      calc(1rem * var(--tw-space-x-reverse));
  margin-left:
      calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:
      0;
  margin-right:
      calc(2rem * var(--tw-space-x-reverse));
  margin-left:
      calc(2rem * calc(1 - var(--tw-space-x-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));
}

.self-start{
  align-self:
      flex-start;
}

.self-end{
  align-self:
      flex-end;
}

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

.overflow-auto{
  overflow:
      auto;
}

.overflow-hidden{
  overflow:
      hidden;
}

.overflow-scroll{
  overflow:
      scroll;
}

.overflow-x-auto{
  overflow-x:
      auto;
}

.overflow-y-auto{
  overflow-y:
      auto;
}

.truncate{
  overflow:
      hidden;
  text-overflow:
      ellipsis;
  white-space:
      nowrap;
}

.text-ellipsis{
  text-overflow:
      ellipsis;
}

.whitespace-normal{
  white-space:
      normal;
}

.whitespace-nowrap{
  white-space:
      nowrap;
}

.whitespace-pre-wrap{
  white-space:
      pre-wrap;
}

.break-words{
  overflow-wrap:
      break-word;
}

.rounded{
  border-radius:
      0.25rem;
}

.rounded-2xl{
  border-radius:
      1rem;
}

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

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

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

.rounded-none{
  border-radius:
      0px;
}

.rounded-xl{
  border-radius:
      0.75rem;
}

.rounded-l-md{
  border-top-left-radius:
      0.375rem;
  border-bottom-left-radius:
      0.375rem;
}

.rounded-l-none{
  border-top-left-radius:
      0px;
  border-bottom-left-radius:
      0px;
}

.rounded-r-lg{
  border-top-right-radius:
      0.5rem;
  border-bottom-right-radius:
      0.5rem;
}

.rounded-r-md{
  border-top-right-radius:
      0.375rem;
  border-bottom-right-radius:
      0.375rem;
}

.rounded-r-none{
  border-top-right-radius:
      0px;
  border-bottom-right-radius:
      0px;
}

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

.border{
  border-width:
      1px;
}

.border-0{
  border-width:
      0px;
}

.border-2{
  border-width:
      2px;
}

.border-b{
  border-bottom-width:
      1px;
}

.border-b-2{
  border-bottom-width:
      2px;
}

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

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

.border-r{
  border-right-width:
      1px;
}

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

.border-t{
  border-top-width:
      1px;
}

.border-black\/10{
  border-color:
      rgb(0 0 0 / 0.1);
}

.border-black\/20{
  border-color:
      rgb(0 0 0 / 0.2);
}

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

.border-gray-600{
  --tw-border-opacity:
      1;
  border-color:
      rgb(75 85 99 / var(--tw-border-opacity, 1));
}

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

.border-green-500{
  --tw-border-opacity:
      1;
  border-color:
      rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-purple-400{
  --tw-border-opacity:
      1;
  border-color:
      rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.border-purple-500{
  --tw-border-opacity:
      1;
  border-color:
      rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-purple-600{
  --tw-border-opacity:
      1;
  border-color:
      rgb(147 51 234 / var(--tw-border-opacity, 1));
}

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

.border-white{
  --tw-border-opacity:
      1;
  border-color:
      rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/10{
  border-color:
      rgb(255 255 255 / 0.1);
}

.border-white\/15{
  border-color:
      rgb(255 255 255 / 0.15);
}

.border-white\/20{
  border-color:
      rgb(255 255 255 / 0.2);
}

.border-white\/30{
  border-color:
      rgb(255 255 255 / 0.3);
}

.border-white\/50{
  border-color:
      rgb(255 255 255 / 0.5);
}

.border-white\/70{
  border-color:
      rgb(255 255 255 / 0.7);
}

.border-zinc-300{
  --tw-border-opacity:
      1;
  border-color:
      rgb(212 212 216 / var(--tw-border-opacity, 1));
}

.border-zinc-400{
  --tw-border-opacity:
      1;
  border-color:
      rgb(161 161 170 / var(--tw-border-opacity, 1));
}

.border-zinc-700{
  --tw-border-opacity:
      1;
  border-color:
      rgb(63 63 70 / var(--tw-border-opacity, 1));
}

.border-zinc-700\/50{
  border-color:
      rgb(63 63 70 / 0.5);
}

.border-t-transparent{
  border-top-color:
      transparent;
}

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

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

.bg-\[\#ADC698\]{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(173 198 152 / var(--tw-bg-opacity, 1));
}

.bg-black{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/10{
  background-color:
      rgb(0 0 0 / 0.1);
}

.bg-black\/5{
  background-color:
      rgb(0 0 0 / 0.05);
}

.bg-black\/60{
  background-color:
      rgb(0 0 0 / 0.6);
}

.bg-blue-600{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-600\/10{
  background-color:
      rgb(37 99 235 / 0.1);
}

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

.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(156 163 175 / var(--tw-bg-opacity, 1));
}

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

.bg-gray-800{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900\/90{
  background-color:
      rgb(17 24 39 / 0.9);
}

.bg-green-500{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600\/10{
  background-color:
      rgb(22 163 74 / 0.1);
}

.bg-orange-400{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(251 146 60 / 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-500{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-purple-600{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-purple-600\/0{
  background-color:
      rgb(147 51 234 / 0);
}

.bg-purple-700{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.bg-red-600{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-red-600\/10{
  background-color:
      rgb(220 38 38 / 0.1);
}

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

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

.bg-white\/10{
  background-color:
      rgb(255 255 255 / 0.1);
}

.bg-white\/20{
  background-color:
      rgb(255 255 255 / 0.2);
}

.bg-white\/5{
  background-color:
      rgb(255 255 255 / 0.05);
}

.bg-zinc-600{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(82 82 91 / var(--tw-bg-opacity, 1));
}

.bg-zinc-700\/50{
  background-color:
      rgb(63 63 70 / 0.5);
}

.bg-zinc-800{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(39 39 42 / var(--tw-bg-opacity, 1));
}

.bg-zinc-800\/50{
  background-color:
      rgb(39 39 42 / 0.5);
}

.bg-zinc-900\/70{
  background-color:
      rgb(24 24 27 / 0.7);
}

.bg-opacity-50{
  --tw-bg-opacity:
      0.5;
}

.bg-opacity-60{
  --tw-bg-opacity:
      0.6;
}

.bg-gradient-to-br{
  background-image:
      linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r{
  background-image:
      linear-gradient(to right, var(--tw-gradient-stops));
}

.from-amber-500{
  --tw-gradient-from:
      #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-600{
  --tw-gradient-from:
      #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-900\/95{
  --tw-gradient-from:
      rgb(17 24 39 / 0.95) var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-600{
  --tw-gradient-from:
      #9333ea var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(147 51 234 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-700{
  --tw-gradient-to:
      #1d4ed8 var(--tw-gradient-to-position);
}

.to-gray-800\/95{
  --tw-gradient-to:
      rgb(31 41 55 / 0.95) var(--tw-gradient-to-position);
}

.to-purple-700{
  --tw-gradient-to:
      #7e22ce var(--tw-gradient-to-position);
}

.to-rose-600{
  --tw-gradient-to:
      #e11d48 var(--tw-gradient-to-position);
}

.bg-cover{
  background-size:
      cover;
}

.bg-center{
  background-position:
      center;
}

.object-cover{
  -o-object-fit:
      cover;
     object-fit:
      cover;
}

.\!p-3{
  padding:
      0.75rem !important;
}

.p-0{
  padding:
      0px;
}

.p-1{
  padding:
      0.25rem;
}

.p-1\.5{
  padding:
      0.375rem;
}

.p-2{
  padding:
      0.5rem;
}

.p-3{
  padding:
      0.75rem;
}

.p-4{
  padding:
      1rem;
}

.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-12{
  padding-left:
      3rem;
  padding-right:
      3rem;
}

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

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

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

.px-5{
  padding-left:
      1.25rem;
  padding-right:
      1.25rem;
}

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

.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-12{
  padding-top:
      3rem;
  padding-bottom:
      3rem;
}

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

.py-2\.5{
  padding-top:
      0.625rem;
  padding-bottom:
      0.625rem;
}

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

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

.pb-3{
  padding-bottom:
      0.75rem;
}

.pb-8{
  padding-bottom:
      2rem;
}

.pl-1{
  padding-left:
      0.25rem;
}

.pl-2{
  padding-left:
      0.5rem;
}

.pl-5{
  padding-left:
      1.25rem;
}

.pl-8{
  padding-left:
      2rem;
}

.pr-1{
  padding-right:
      0.25rem;
}

.pr-2{
  padding-right:
      0.5rem;
}

.pr-5{
  padding-right:
      1.25rem;
}

.pt-1{
  padding-top:
      0.25rem;
}

.pt-6{
  padding-top:
      1.5rem;
}

.pt-8{
  padding-top:
      2rem;
}

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

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

.align-top{
  vertical-align:
      top;
}

.font-mono{
  font-family:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl{
  font-size:
      1.5rem;
  line-height:
      2rem;
}

.text-6xl{
  font-size:
      3.75rem;
  line-height:
      1;
}

.text-\[11px\]{
  font-size:
      11px;
}

.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-bold{
  font-weight:
      700;
}

.font-medium{
  font-weight:
      500;
}

.font-normal{
  font-weight:
      400;
}

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

.italic{
  font-style:
      italic;
}

.text-amber-300{
  --tw-text-opacity:
      1;
  color:
      rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-black{
  --tw-text-opacity:
      1;
  color:
      rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-400{
  --tw-text-opacity:
      1;
  color:
      rgb(96 165 250 / var(--tw-text-opacity, 1));
}

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

.text-green-400{
  --tw-text-opacity:
      1;
  color:
      rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-purple-300{
  --tw-text-opacity:
      1;
  color:
      rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-400{
  --tw-text-opacity:
      1;
  color:
      rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.text-purple-500{
  --tw-text-opacity:
      1;
  color:
      rgb(168 85 247 / 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(239 68 68 / var(--tw-text-opacity, 1));
}

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

.text-transparent{
  color:
      transparent;
}

.text-white{
  --tw-text-opacity:
      1;
  color:
      rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/40{
  color:
      rgb(255 255 255 / 0.4);
}

.text-white\/50{
  color:
      rgb(255 255 255 / 0.5);
}

.text-white\/60{
  color:
      rgb(255 255 255 / 0.6);
}

.text-white\/70{
  color:
      rgb(255 255 255 / 0.7);
}

.text-white\/80{
  color:
      rgb(255 255 255 / 0.8);
}

.text-white\/90{
  color:
      rgb(255 255 255 / 0.9);
}

.text-zinc-300{
  --tw-text-opacity:
      1;
  color:
      rgb(212 212 216 / var(--tw-text-opacity, 1));
}

.text-zinc-400{
  --tw-text-opacity:
      1;
  color:
      rgb(161 161 170 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line:
      underline;
}

.decoration-purple-500{
  text-decoration-color:
      #a855f7;
}

.decoration-2{
  text-decoration-thickness:
      2px;
}

.placeholder-white\/30::-moz-placeholder{
  color:
      rgb(255 255 255 / 0.3);
}

.placeholder-white\/30::placeholder{
  color:
      rgb(255 255 255 / 0.3);
}

.accent-purple-500{
  accent-color:
      #a855f7;
}

.opacity-0{
  opacity:
      0;
}

.opacity-25{
  opacity:
      0.25;
}

.opacity-30{
  opacity:
      0.3;
}

.opacity-40{
  opacity:
      0.4;
}

.opacity-70{
  opacity:
      0.7;
}

.opacity-75{
  opacity:
      0.75;
}

.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-inner{
  --tw-shadow:
      inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:
      inset 0 2px 4px 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-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-blue-600\/30{
  --tw-shadow-color:
      rgb(37 99 235 / 0.3);
  --tw-shadow:
      var(--tw-shadow-colored);
}

.shadow-purple-600\/30{
  --tw-shadow-color:
      rgb(147 51 234 / 0.3);
  --tw-shadow:
      var(--tw-shadow-colored);
}

.shadow-rose-600\/30{
  --tw-shadow-color:
      rgb(225 29 72 / 0.3);
  --tw-shadow:
      var(--tw-shadow-colored);
}

.outline{
  outline-style:
      solid;
}

.outline-\[4px\]{
  outline-width:
      4px;
}

.outline-offset-0{
  outline-offset:
      0px;
}

.outline-purple-500{
  outline-color:
      #a855f7;
}

.outline-transparent{
  outline-color:
      transparent;
}

.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-\[\#333333\]{
  --tw-ring-opacity:
      1;
  --tw-ring-color:
      rgb(51 51 51 / var(--tw-ring-opacity, 1));
}

.ring-purple-500{
  --tw-ring-opacity:
      1;
  --tw-ring-color:
      rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.blur{
  --tw-blur:
      blur(8px);
  filter:
      var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter:
      var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md{
  --tw-backdrop-blur:
      blur(12px);
  -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-sm{
  --tw-backdrop-blur:
      blur(4px);
  -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-filter{
  -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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -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-backdrop-filter;
  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, text-decoration-color, fill, stroke;
  transition-timing-function:
      cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:
      150ms;
}

.transition-opacity{
  transition-property:
      opacity;
  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;
}

@tailwind utilities;

.ql-editor[contenteditable="false"],
.ql-editor[contenteditable="false"] > * {
  cursor: inherit;
}

/* Safelist: flex-wrap classes stored in DB won't be picked up by Tailwind's scanner */

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

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

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

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

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .md\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 1024px) {
  .lg\:flex-wrap {
    flex-wrap: wrap;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
}

/* Editor: "scroll to block" links whose target block was deleted (see brokenBlockLinks.js).
   :where() keeps specificity at zero so selection/hover outlines still win. */

:where(#component-container a.broken-block-link) {
  outline: 2px dashed #f59e0b;
  outline-offset: 2px;
}

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

.hover\:border-2:hover{
  border-width:
      2px;
}

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

.hover\:border-white\/30:hover{
  border-color:
      rgb(255 255 255 / 0.3);
}

.hover\:bg-blue-500\/20:hover{
  background-color:
      rgb(59 130 246 / 0.2);
}

.hover\:bg-blue-600\/20:hover{
  background-color:
      rgb(37 99 235 / 0.2);
}

.hover\:bg-blue-700:hover{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-green-600\/20:hover{
  background-color:
      rgb(22 163 74 / 0.2);
}

.hover\:bg-purple-500\/20:hover{
  background-color:
      rgb(168 85 247 / 0.2);
}

.hover\:bg-purple-600:hover{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600\/20:hover{
  background-color:
      rgb(220 38 38 / 0.2);
}

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

.hover\:bg-white\/10:hover{
  background-color:
      rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/20:hover{
  background-color:
      rgb(255 255 255 / 0.2);
}

.hover\:bg-white\/5:hover{
  background-color:
      rgb(255 255 255 / 0.05);
}

.hover\:bg-zinc-700:hover{
  --tw-bg-opacity:
      1;
  background-color:
      rgb(63 63 70 / var(--tw-bg-opacity, 1));
}

.hover\:bg-zinc-800\/50:hover{
  background-color:
      rgb(39 39 42 / 0.5);
}

.hover\:from-amber-400:hover{
  --tw-gradient-from:
      #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-blue-700:hover{
  --tw-gradient-from:
      #1d4ed8 var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(29 78 216 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-purple-700:hover{
  --tw-gradient-from:
      #7e22ce var(--tw-gradient-from-position);
  --tw-gradient-to:
      rgb(126 34 206 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
      var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-blue-800:hover{
  --tw-gradient-to:
      #1e40af var(--tw-gradient-to-position);
}

.hover\:to-purple-800:hover{
  --tw-gradient-to:
      #6b21a8 var(--tw-gradient-to-position);
}

.hover\:to-rose-500:hover{
  --tw-gradient-to:
      #f43f5e var(--tw-gradient-to-position);
}

.hover\:pl-10:hover{
  padding-left:
      2.5rem;
}

.hover\:text-black\/60:hover{
  color:
      rgb(0 0 0 / 0.6);
}

.hover\:text-blue-300:hover{
  --tw-text-opacity:
      1;
  color:
      rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.hover\:text-green-300:hover{
  --tw-text-opacity:
      1;
  color:
      rgb(134 239 172 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-white\/80:hover{
  color:
      rgb(255 255 255 / 0.8);
}

.hover\:text-zinc-200:hover{
  --tw-text-opacity:
      1;
  color:
      rgb(228 228 231 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line:
      underline;
}

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

.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-blue-500:focus{
  --tw-ring-opacity:
      1;
  --tw-ring-color:
      rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-purple-500:focus{
  --tw-ring-opacity:
      1;
  --tw-ring-color:
      rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

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

.active\:cursor-grabbing:active{
  cursor:
      grabbing;
}

.disabled\:cursor-not-allowed:disabled{
  cursor:
      not-allowed;
}

.disabled\:opacity-40:disabled{
  opacity:
      0.4;
}

.group:hover .group-hover\:border-purple-400{
  --tw-border-opacity:
      1;
  border-color:
      rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:bg-purple-600\/20{
  background-color:
      rgb(147 51 234 / 0.2);
}

.group:hover .group-hover\:opacity-100{
  opacity:
      1;
}

@media (min-width: 640px){
  .sm\:max-h-\[400px\]{
    max-height:
      400px;
  }

  .sm\:w-5\/6{
    width:
      83.333333%;
  }

  .sm\:w-64{
    width:
      16rem;
  }

  .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\:px-8{
    padding-left:
      2rem;
    padding-right:
      2rem;
  }

  .sm\:pt-8{
    padding-top:
      2rem;
  }

  .sm\:text-lg{
    font-size:
      1.125rem;
    line-height:
      1.75rem;
  }
}

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

  .md\:hidden{
    display:
      none;
  }

  .md\:w-\[50\%\]{
    width:
      50%;
  }

  .md\:grid-cols-4{
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }

  .md\:px-12{
    padding-left:
      3rem;
    padding-right:
      3rem;
  }

  .md\:px-8{
    padding-left:
      2rem;
    padding-right:
      2rem;
  }
}