/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
:root, :host {
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --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-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-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-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --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-100: oklch(93% 0.034 272.788);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-800: oklch(43.8% 0.218 303.724);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --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-500: oklch(65.6% 0.241 354.308);
  --color-pink-800: oklch(45.9% 0.187 3.815);
  --color-pink-900: oklch(40.8% 0.153 2.432);
  --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-white: #fff;
  --spacing: 0.25rem;
  --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-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --tracking-tight: -0.025em;
  --radius-xs: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-3xl: 1.5rem;
  --font-quicksand: 'Quicksand', sans-serif;
  --radius-base: 12px;
  --color-marketdata-darkblue: #003286;
  --color-neutral-primary-soft: var(--color-white);
  --color-neutral-primary-medium: var(--color-white);
  --color-neutral-secondary-medium: var(--color-gray-50);
  --color-neutral-secondary-strong: var(--color-gray-50);
  --color-neutral-tertiary: var(--color-gray-100);
  --color-neutral-tertiary-medium: var(--color-gray-100);
  --color-gray: var(--color-gray-300);
  --color-heading: var(--color-gray-900);
  --color-body: var(--color-gray-600);
  --color-body-subtle: var(--color-gray-500);
  --color-fg-disabled: var(--color-gray-400);
  --color-fg-danger: var(--color-red-600);
  --color-fg-danger-strong: var(--color-red-900);
  --color-default-medium: var(--color-gray-200);
  --color-danger-soft: var(--color-red-50);
  --color-danger: var(--color-red-500);
  --color-brand-medium: var(--color-blue-200);
  --color-brand: var(--color-blue-600);
}
.user-profile-wrapper {
  position: relative;
  display: inline-block;
}
.absolute {
  position: absolute;
}
.grid-content-container {
  grid-column: span 12 / span 12;
  margin-inline: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
  border-radius: var(--radius-lg);
  background-color: var(--color-neutral-primary-medium);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 40rem) {
    padding: calc(var(--spacing) * 6);
  }
  @media (width >= 48rem) {
    margin-inline: calc(var(--spacing) * 6);
  }
  @media (width >= 64rem) {
    margin-block: calc(var(--spacing) * 6);
  }
  @media (width >= 80rem) {
    grid-column: span 10 / span 10;
  }
  @media (width >= 80rem) {
    grid-column-start: 2;
  }
  @media (width >= 80rem) {
    padding: calc(var(--spacing) * 8);
  }
  @media (width >= 96rem) {
    grid-column: span 8 / span 8;
  }
  @media (width >= 96rem) {
    grid-column-start: 3;
  }
}
.grid-content-position {
  grid-column: span 12 / span 12;
  @media (width >= 80rem) {
    grid-column: span 10 / span 10;
  }
  @media (width >= 80rem) {
    grid-column-start: 2;
  }
  @media (width >= 96rem) {
    grid-column: span 8 / span 8;
  }
  @media (width >= 96rem) {
    grid-column-start: 3;
  }
}
.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}
.badge-pill-blue {
  margin-inline-end: calc(var(--spacing) * 2);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-blue-400);
  background-color: var(--color-blue-100);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue-800);
  text-transform: capitalize;
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-blue-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-blue-300);
  }
}
.badge-pill-red {
  margin-inline-end: calc(var(--spacing) * 2);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-red-400);
  background-color: var(--color-red-100);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-red-800);
  text-transform: capitalize;
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-red-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-red-300);
  }
}
.badge-pill-green {
  margin-inline-end: calc(var(--spacing) * 2);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-400);
  background-color: var(--color-green-100);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-green-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-green-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-green-300);
  }
}
.badge-pill {
  margin-inline-end: calc(var(--spacing) * 2);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.form-helper-text {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-body-subtle);
  &::first-letter {
    text-transform: uppercase;
  }
}
.form-helper-text-error {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-fg-danger);
}
.radio-button-input {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
  appearance: none;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray);
  background-color: var(--color-neutral-tertiary-medium);
  color: var(--color-brand);
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-brand-medium);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-offset-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:focus {
      --tw-ring-offset-color: var(--color-gray-700);
    }
  }
  margin-right: calc(var(--spacing) * 2);
  background-position: center;
  background-repeat: no-repeat;
  &:checked {
    background-color: var(--color-brand);
    border-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-size: 100% 100%;
  }
}
.form-label {
  margin-bottom: calc(var(--spacing) * 2);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}
.form-heading {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--color-heading);
}
.user-profile-container {
  display: inline-flex;
  min-height: calc(var(--spacing) * 10);
  align-items: center;
  min-width: 7.375rem;
}
.form-input-disabled {
  display: block;
  width: 100%;
  cursor: not-allowed;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray);
  background-color: var(--color-neutral-tertiary-medium);
  padding: calc(var(--spacing) * 2.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-gray-900);
  &:focus {
    border-color: var(--color-brand);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-brand);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-gray-400);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
}
.form-dropdown-input {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray);
  background-color: var(--color-neutral-secondary-strong);
  padding-block: calc(var(--spacing) * 2.5);
  padding-inline-start: calc(var(--spacing) * 3);
  padding-inline-end: calc(var(--spacing) * 10);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-heading);
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:focus {
    border-color: var(--color-brand);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-brand);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  &:where(.dark, .dark *, [data-theme='dark'], [data-theme='dark'] *) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3e%3c/svg%3e");
  }
}
.form-input {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-border-style: solid;
  border-style: solid;
  border-color: var(--color-gray);
  background-color: var(--color-neutral-secondary-strong);
  padding: calc(var(--spacing) * 2.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-heading);
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:focus {
    border-color: var(--color-brand);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-brand);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }
}
.btn-orange-to-blue {
  display: inline-flex;
  max-width: max-content;
  border-radius: var(--radius-3xl);
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 2.5);
  text-align: center;
  text-decoration-line: none;
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 10);
  }
  @media (width >= 64rem) {
    padding-block: calc(var(--spacing) * 3.5);
  }
  font-family: var(--font-quicksand);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 64rem) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  @media (width >= 64rem) {
    --tw-leading: 1;
    line-height: 1;
  }
  --tw-border-style: none;
  border-style: none;
  background-image: linear-gradient(103deg, #e83155 0%, #ffdfb9 100%);
  color: var(--color-white);
  --tw-shadow: 0 20px 40px 0 var(--tw-shadow-color, rgba(232, 49, 85, 0.2));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-image: linear-gradient(103deg, #003286 0%, #0085f2 100%);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-pink-200);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:focus {
      --tw-ring-color: var(--color-pink-800);
    }
  }
  cursor: pointer;
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-image: linear-gradient(103deg, #e83155 0%, #ffdfb9 100%);
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 20px 40px 0 var(--tw-shadow-color, rgba(232, 49, 85, 0.2));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      text-decoration-line: none !important;
    }
  }
}
.btn-blue-to-orange {
  display: inline-flex;
  max-width: max-content;
  border-radius: var(--radius-3xl);
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 2.5);
  text-align: center;
  text-decoration-line: none;
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 10);
  }
  @media (width >= 64rem) {
    padding-block: calc(var(--spacing) * 3.5);
  }
  font-family: var(--font-quicksand);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 64rem) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  @media (width >= 64rem) {
    --tw-leading: 1;
    line-height: 1;
  }
  --tw-border-style: none;
  border-style: none;
  background-image: linear-gradient(103deg, #003286 0%, #0085f2 100%);
  color: var(--color-white);
  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0, 26, 108, 0.2)) inset;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:hover {
    @media (hover: hover) {
      background-image: linear-gradient(103deg, #e83155 0%, #ffdfb9 100%);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 20px 40px 0 var(--tw-shadow-color, rgba(232, 49, 85, 0.2));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-brand-medium);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  cursor: pointer;
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-image: linear-gradient(103deg, #003286 0%, #0085f2 100%);
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0, 26, 108, 0.2)) inset;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      text-decoration-line: none !important;
    }
  }
}
.btn-hover-orange {
  display: inline-flex;
  max-width: max-content;
  border-radius: var(--radius-3xl);
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 2.5);
  text-align: center;
  text-decoration-line: none;
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 10);
  }
  @media (width >= 64rem) {
    padding-block: calc(var(--spacing) * 3.5);
  }
  font-family: var(--font-quicksand);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 64rem) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  @media (width >= 64rem) {
    --tw-leading: 1;
    line-height: 1;
  }
  background-color: transparent;
  color: var(--color-marketdata-darkblue);
  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0, 26, 108, 0.2)) inset;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-white);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.4)) inset;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:hover {
    @media (hover: hover) {
      background-image: linear-gradient(103deg, #e83155 0%, #ffdfb9 100%);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 20px 40px 0 var(--tw-shadow-color, rgba(232, 49, 85, 0.2));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-pink-200);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:focus {
      --tw-ring-color: var(--color-pink-800);
    }
  }
  cursor: pointer;
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-color: transparent;
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-image: none;
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        color: var(--color-marketdata-darkblue);
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0, 26, 108, 0.2)) inset;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.4)) inset;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      text-decoration-line: none !important;
    }
  }
}
.btn-hover-blue {
  display: inline-flex;
  max-width: max-content;
  border-radius: var(--radius-3xl);
  padding-inline: calc(var(--spacing) * 7);
  padding-block: calc(var(--spacing) * 2.5);
  text-align: center;
  text-decoration-line: none;
  @media (width >= 64rem) {
    padding-inline: calc(var(--spacing) * 10);
  }
  @media (width >= 64rem) {
    padding-block: calc(var(--spacing) * 3.5);
  }
  font-family: var(--font-quicksand);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  @media (width >= 64rem) {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  @media (width >= 64rem) {
    --tw-leading: 1;
    line-height: 1;
  }
  background-color: transparent;
  color: var(--color-marketdata-darkblue);
  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0, 26, 108, 0.2)) inset;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-white);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.4)) inset;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:hover {
    @media (hover: hover) {
      background-image: linear-gradient(103deg, #003286 0%, #0085f2 100%);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-white);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-brand-medium);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
  cursor: pointer;
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-color: transparent;
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        background-image: none;
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        color: var(--color-marketdata-darkblue);
      }
    }
  }
  &:disabled {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0, 26, 108, 0.2)) inset;
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          color: var(--color-white);
        }
      }
    }
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(255, 255, 255, 0.4)) inset;
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
    }
  }
  &:hover {
    @media (hover: hover) {
      text-decoration-line: none !important;
    }
  }
}
.grid-layout-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.theme-toggle-icon-dark {
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
}
.theme-toggle-icon-light {
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
}
.form-container {
  border-radius: var(--radius-lg);
  border-color: var(--color-default-medium);
  background-color: var(--color-neutral-primary-medium);
  padding: calc(var(--spacing) * 4);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 64rem) {
    padding: calc(var(--spacing) * 8);
  }
}
.badge {
  border-radius: var(--radius-xs);
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.form-input-error {
  border-color: var(--color-danger);
  color: var(--color-fg-danger-strong);
  &::placeholder {
    color: var(--color-fg-danger-strong);
  }
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:focus {
    border-color: var(--color-danger);
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-danger);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
    @media (forced-colors: active) {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
  }
}
.default {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  color: var(--color-heading);
  background-color: var(--color-neutral-primary-soft);
}
.badge-blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-blue-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-blue-300);
  }
}
.badge-gray {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-gray-700);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-gray-300);
  }
}
.badge-green {
  background-color: var(--color-green-100);
  color: var(--color-green-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-green-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-green-300);
  }
}
.badge-indigo {
  background-color: var(--color-indigo-100);
  color: var(--color-indigo-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-indigo-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-indigo-300);
  }
}
.badge-pink {
  background-color: var(--color-pink-100);
  color: var(--color-pink-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-pink-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-pink-300);
  }
}
.badge-purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-purple-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-purple-300);
  }
}
.badge-red {
  background-color: var(--color-red-100);
  color: var(--color-red-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-red-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-red-300);
  }
}
.badge-yellow {
  background-color: var(--color-yellow-100);
  color: var(--color-yellow-800);
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-yellow-900);
  }
  &:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-yellow-300);
  }
}
.bg-gradient-blue {
  background-image: linear-gradient(103deg, #003286 0%, #0085f2 100%);
}
.bg-gradient-orange {
  background-image: linear-gradient(103deg, #e83155 0%, #ffdfb9 100%);
}
.radio-button-helper {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-body-subtle);
}
.dark, [data-theme='dark'] {
  --color-neutral-primary-soft: var(--color-gray-900);
  --color-neutral-primary: var(--color-gray-950);
  --color-neutral-primary-medium: var(--color-gray-800);
  --color-neutral-primary-strong: var(--color-gray-700);
  --color-neutral-secondary-soft: var(--color-gray-900);
  --color-neutral-secondary: var(--color-gray-950);
  --color-neutral-secondary-medium: var(--color-gray-800);
  --color-neutral-secondary-strong: var(--color-gray-700);
  --color-neutral-secondary-strongest: var(--color-gray-600);
  --color-neutral-tertiary-soft: var(--color-gray-900);
  --color-neutral-tertiary: var(--color-gray-800);
  --color-neutral-tertiary-medium: var(--color-gray-700);
  --color-neutral-quaternary: var(--color-gray-700);
  --color-neutral-quaternary-medium: var(--color-gray-600);
  --color-gray: var(--color-gray-600);
  --color-heading: var(--color-white);
  --color-body: var(--color-gray-400);
  --color-body-subtle: var(--color-gray-400);
  --color-fg-disabled: var(--color-gray-600);
  --color-fg-success: var(--color-emerald-600);
  --color-fg-success-strong: var(--color-emerald-300);
  --color-fg-danger: var(--color-red-500);
  --color-fg-danger-strong: var(--color-red-500);
  --color-fg-warning-subtle: var(--color-orange-500);
  --color-fg-warning: var(--color-orange-300);
  --color-fg-yellow: var(--color-yellow-400);
  --color-fg-purple: var(--color-purple-500);
  --color-fg-cyan: var(--color-cyan-500);
  --color-fg-indigo: var(--color-indigo-500);
  --color-fg-pink: var(--color-pink-500);
  --color-fg-lime: var(--color-lime-500);
  --color-buffer: var(--color-gray-950);
  --color-buffer-medium: var(--color-gray-900);
  --color-buffer-strong: var(--color-gray-800);
  --color-muted: var(--color-gray-900);
  --color-light-subtle: var(--color-gray-900);
  --color-light: var(--color-gray-800);
  --color-light-medium: var(--color-gray-700);
  --color-default-subtle: var(--color-gray-900);
  --color-default: var(--color-gray-800);
  --color-default-medium: var(--color-gray-700);
  --color-default-strong: var(--color-gray-600);
  --color-dark-subtle: var(--color-gray-700);
  --color-dark-backdrop: var(--color-gray-950);
  --color-success-soft: var(--color-emerald-950);
  --color-success: var(--color-emerald-600);
  --color-success-medium: var(--color-emerald-900);
  --color-success-strong: var(--color-emerald-700);
  --color-success-subtle: var(--color-emerald-900);
  --color-danger-soft: var(--color-red-950);
  --color-danger: var(--color-red-500);
  --color-danger-medium: var(--color-red-900);
  --color-danger-strong: var(--color-red-800);
  --color-danger-subtle: var(--color-red-900);
  --color-warning-soft: var(--color-orange-950);
  --color-warning: var(--color-orange-600);
  --color-warning-medium: var(--color-orange-900);
  --color-warning-strong: var(--color-orange-700);
  --color-warning-subtle: var(--color-orange-900);
  --color-dark-soft: var(--color-gray-700);
  --color-dark: var(--color-gray-800);
  --color-dark-strong: var(--color-gray-700);
  --color-disabled: var(--color-gray-800);
  --color-purple: var(--color-purple-500);
  --color-sky: var(--color-sky-500);
  --color-teal: var(--color-teal-500);
  --color-pink: var(--color-pink-500);
  --color-cyan: var(--color-cyan-500);
  --color-fuchsia: var(--color-fuchsia-500);
  --color-indigo: var(--color-indigo-500);
  --color-orange: var(--color-orange-400);
  --color-brand-softer: var(--color-blue-950);
  --color-brand-soft: var(--color-blue-900);
  --color-brand-medium: var(--color-blue-900);
  --color-brand: var(--color-blue-500);
  --color-brand-strong: var(--color-blue-700);
  --color-brand-subtle: var(--color-blue-900);
  --color-brand-light: var(--color-blue-600);
  --color-fg-brand-subtle: var(--color-blue-200);
  --color-fg-brand: var(--color-blue-500);
  --color-fg-brand-strong: var(--color-blue-400);
}
.user-profile-wrapper .user-profile-avatar {
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
}
.user-profile-wrapper .user-profile-avatar--img {
  object-fit: cover;
}
.user-profile-wrapper .user-profile-avatar--placeholder {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: var(--color-gray);
}
.user-profile-wrapper .user-profile-dropdown {
  position: absolute;
  right: calc(var(--spacing) * 0);
  z-index: 10;
  width: calc(var(--spacing) * 44);
  border-radius: var(--radius-base);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-default-medium);
  background-color: var(--color-neutral-primary-medium);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  top: calc(100% + 0.5rem);
  max-width: calc(100vw - 1rem);
}
.user-profile-wrapper .user-profile-dropdown-menu {
  margin: calc(var(--spacing) * 0);
  list-style-type: none;
  padding: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-body);
}
.user-profile-wrapper .user-profile-dropdown-header {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-default-medium);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-heading);
}
.user-profile-wrapper .user-profile-dropdown-name {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.user-profile-wrapper .user-profile-dropdown-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-profile-wrapper .user-profile-dropdown-link {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 2);
  color: inherit;
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-neutral-tertiary-medium);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-heading);
    }
  }
  transition: background 0.15s, color 0.15s;
}
.user-profile-wrapper .user-profile-dropdown-divider-above {
  padding-bottom: calc(var(--spacing) * 1.5);
}
.user-profile-wrapper .user-profile-dropdown-divider-below {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--color-default-medium);
  padding-top: calc(var(--spacing) * 1.5);
}
.user-profile-wrapper .user-profile-dropdown-signout {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 2);
  color: var(--color-fg-danger);
  text-decoration-line: none;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-danger-soft);
    }
  }
  transition: background 0.15s, color 0.15s;
}
.user-profile-wrapper .user-profile-login-pill {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-default-medium);
  background-color: var(--color-neutral-secondary-medium);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-body);
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-neutral-tertiary-medium);
    }
  }
  &:hover {
    @media (hover: hover) {
      color: var(--color-heading);
    }
  }
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:focus {
    --tw-ring-color: var(--color-neutral-tertiary);
  }
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.user-profile-wrapper .user-profile-login-pill svg {
  height: calc(var(--spacing) * 4);
  width: calc(var(--spacing) * 4);
}
.user-profile-wrapper .user-profile-dropdown-subtext {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-body-subtle);
}
.user-profile-wrapper .user-profile-avatar--placeholder svg {
  position: absolute;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  color: var(--color-fg-disabled);
  left: -0.25rem;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}

  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-leading: initial;
      --tw-tracking: initial;
    }
  }