/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-spacing-x: 0;
      --tw-border-spacing-y: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-white: #fff;
    --spacing: .25rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-5xl: 64rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .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-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@layer base {
  :root, :root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #3a3a3a;
    --secondary: #9e1b32;
    --background: #2b2b2b;
    --success: #579c52;
    --warning: #fc0;
    --danger: #b83d43;
    --green: #3cb371;
    --red: tomato;
    --yellow: gold;
    --blue: #4682b4;
    --orange: #e67e22;
    --purple: #9b59b6;
    --pink: #ff69b4;
    --teal: #20b2aa;
    --surface-0: #2b2b2b;
    --surface-1: #343434;
    --surface-2: #303030;
    --surface-3: #363636;
    --border-muted: #464646;
    --border-strong: #555;
    --accent: #9e1b32;
    --accent-strong: #91192e;
    --color-primary: #9e1b32;
    --color-secondary: #9e1b32;
    --color-success: #579c52;
    --color-warning: #fc0;
    --color-danger: #b83d43;
    --color-action-delete: #c0392b;
    --color-action-edit: #1a6b8a;
    --color-action-approve: #1e7b52;
    --theme-icon: #d8d8d8;
    --theme-border: #555;
    --theme-bg: linear-gradient(135deg, #363636 0%, #4a4a4a 100%);
    --gradient-icon: #f2f2f2;
    --toggle-bg: linear-gradient(135deg, #323232 0%, #5c5c5c 100%);
    --avatar-bg: linear-gradient(135deg, #353535 0%, #4a4a4a 100%);
    --avatar-border: #4a4a4a;
    --header-bg: #2b2b2b;
    --header-border: #4a4a4a;
    --gray: #3a3a3a;
    --gray-dark: #242424;
    --gray-light: #444;
    --gray-lightest: #626262;
    --card-border: #464646;
    --card-bg: #343434;
    --card-bg-secondary: #303030;
    --card-text: #f2f2f2;
    --card-subtext: #c7c7c7;
    --text-primary: #f2f2f2;
    --text-secondary: #c7c7c7;
    --text-primary-reverse: #fff;
    --text-primary-outlined: #f2f2f2;
    --text-primary-w: #f2f2f2;
    --text-secondary-w: #c7c7c7;
    --modal-header-bg: #333;
    --modal-body-bg: #2b2b2b;
    --login-bg: #2b2b2b;
    --table-header-bg: #343434;
    --list-color: #303030;
    --list-header-bg: #343434;
    --list-border: #464646;
    --list-cell-border: #3f3f3f;
    --list-even: #303030;
    --list-odd: #363636;
    --btn-primary: #9e1b32;
    --btn-secondary: #3a3a3a;
    --badge-active-bg: #d3eec9;
    --badge-active-border: #94c985;
    --badge-active-text: #3a7f37;
    --badge-inactive-bg: #ffbfbf;
    --badge-inactive-border: #d97878;
    --badge-inactive-text: #a33030;
    --confirm-modal-bg: #303030;
    --confirm-modal-header-bg: #343434;
    --confirm-modal-border: #464646;
    --overlay-bg: #121212c7;
    --summary-bg: #363636;
    --summary-text: #f2f2f2;
    --summary-border: #464646;
    --input-bg: #343434;
    --input-border: #444;
    --input-text: #f2f2f2;
    --button-bg: #363636;
    --button-border: #454545;
    --button-text: #f2f2f2;
    --button-disabled-text: #919191;
    --button-disabled-bg: #333;
    --body-bg-image: url("/assets/bg-dark-BuNT-nXn.png");
    --scrollbar-track: var(--button-bg);
    --scrollbar-thumb: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --scrollbar-thumb: color-mix(in srgb, var(--button-border), white 18%);
    }
  }

  :root, :root[data-theme="dark"] {
    --scrollbar-thumb-hover: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --scrollbar-thumb-hover: color-mix(in srgb,
      var(--button-border),
      white 30%);
    }
  }

  :root, :root[data-theme="dark"] {
    --hover-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --hover-bg: color-mix(in srgb, var(--card-bg), white 10%);
    }
  }

  :root, :root[data-theme="dark"] {
    --raised-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --raised-bg: color-mix(in srgb, var(--card-bg), white 10%);
    }
  }

  :root, :root[data-theme="dark"] {
    --tooltip-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --tooltip-bg: color-mix(in srgb, var(--card-bg), black 20%);
    }
  }

  :root, :root[data-theme="dark"] {
    --danger-soft-bg: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --danger-soft-bg: color-mix(in srgb, var(--danger), transparent 50%);
    }
  }

  :root, :root[data-theme="dark"] {
    --tree-header-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --tree-header-bg: color-mix(in srgb, var(--card-bg), black 20%);
    }
  }

  :root, :root[data-theme="dark"] {
    --tree-title-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --tree-title-bg: color-mix(in srgb, var(--card-bg), black 10%);
    }
  }

  :root, :root[data-theme="dark"] {
    --sapField_Background: var(--button-bg);
    --sapField_BackgroundStyle: var(--button-bg);
    --sapField_TextColor: var(--button-text);
    --sapField_PlaceholderTextColor: var(--text-secondary);
    --sapField_BorderColor: var(--button-border);
    --sapField_Hover_Background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --sapField_Hover_Background: color-mix(in srgb,
      var(--button-bg),
      white 10%);
    }
  }

  :root, :root[data-theme="dark"] {
    --sapField_Hover_BorderColor: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --sapField_Hover_BorderColor: color-mix(in srgb,
      var(--button-border),
      white 10%);
    }
  }

  :root, :root[data-theme="dark"] {
    --sapField_Focus_Background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, :root[data-theme="dark"] {
      --sapField_Focus_Background: color-mix(in srgb,
      var(--button-bg),
      white 10%);
    }
  }

  :root, :root[data-theme="dark"] {
    --sapField_ReadOnly_Background: var(--button-disabled-bg);
    --sapField_Disabled_Background: var(--button-disabled-bg);
    --sapContent_DisabledTextColor: var(--button-disabled-text);
    --sapSelectedColor: var(--secondary);
    --sapContent_Selected_ForegroundColor: var(--secondary);
    --sapContent_Selected_Hover_Background: transparent;
    --sapContent_ContrastTextColor: var(--text-primary-reverse);
    --toastify-z-index: 1200;
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --primary: #5a5652;
    --secondary: #d90025;
    --background: #e8e6e3;
    --success: #3ec46b;
    --warning: #fc0;
    --danger: #d9534f;
    --green: #3cb371;
    --red: tomato;
    --yellow: gold;
    --blue: #4682b4;
    --orange: #e67e22;
    --purple: #9b59b6;
    --pink: #ff69b4;
    --teal: #20b2aa;
    --surface-0: #e8e6e3;
    --surface-1: #e2dfdb;
    --surface-2: #dad6d1;
    --surface-3: #d8d4cf;
    --border-muted: #c5c1bc;
    --border-strong: #c5c1bc;
    --accent: #d90025;
    --accent-strong: #c80022;
    --color-primary: #d90025;
    --color-secondary: #d90025;
    --color-success: #3ec46b;
    --color-warning: #fc0;
    --color-danger: #d9534f;
    --color-action-delete: #c0392b;
    --color-action-edit: #1a6b8a;
    --color-action-approve: #1e7b52;
    --theme-icon: #5a5652;
    --theme-border: #c5c1bc;
    --theme-bg: linear-gradient(135deg, #e2dfdb 0%, #c9c4be 100%);
    --gradient-icon: #3b3835;
    --toggle-bg: linear-gradient(135deg, #d8d4cf 0%, #afa9a2 100%);
    --avatar-bg: linear-gradient(135deg, #e2dfdb 0%, #c9c4be 100%);
    --avatar-border: #beb9b3;
    --header-bg: #5a5652;
    --header-border: #beb9b3;
    --gray: #d8d4cf;
    --gray-dark: #c5c1bc;
    --gray-light: #e8e6e3;
    --gray-lightest: #efede9;
    --card-border: #c5c1bc;
    --card-bg: #e2dfdb;
    --card-bg-secondary: #dad6d1;
    --card-text: #2f2f2f;
    --card-subtext: #66615d;
    --text-primary: #2f2f2f;
    --text-secondary: #66615d;
    --text-primary-reverse: #fff;
    --text-primary-outlined: #3b3835;
    --text-primary-w: #2f2f2f;
    --text-secondary-w: #efede9;
    --modal-header-bg: #5a5652;
    --modal-body-bg: #e8e6e3;
    --login-bg: #e8e6e3;
    --table-header-bg: #5a5652;
    --list-color: #dddad6;
    --list-header-bg: #5a5652;
    --list-border: #c5c1bc;
    --list-cell-border: #d0ccc6;
    --list-even: #dddad6;
    --list-odd: #e2dfdb;
    --btn-primary: #d90025;
    --btn-secondary: #5a5652;
    --badge-active-bg: #d3eec9;
    --badge-active-border: #94c985;
    --badge-active-text: #3a7f37;
    --badge-inactive-bg: #ffbfbf;
    --badge-inactive-border: #d97878;
    --badge-inactive-text: #a33030;
    --confirm-modal-bg: #e2dfdb;
    --confirm-modal-header-bg: #5a5652;
    --confirm-modal-border: #c5c1bc;
    --overlay-bg: #2f2f2f6b;
    --summary-bg: #d8d4cf;
    --summary-text: #2f2f2f;
    --summary-border: #c5c1bc;
    --input-bg: #dddad6;
    --input-border: #c5c1bc;
    --input-text: #2f2f2f;
    --button-bg: #d8d4cf;
    --button-border: #beb9b3;
    --button-text: #2f2f2f;
    --button-disabled-text: #1c1c1c;
    --button-disabled-bg: #cdc9c5;
    --body-bg-image: url("/assets/bg-light-CtUcrYhY.png");
    --scrollbar-track: var(--button-bg);
    --scrollbar-thumb: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --scrollbar-thumb: color-mix(in srgb, var(--button-border), black 12%);
    }
  }

  :root[data-theme="light"] {
    --scrollbar-thumb-hover: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --scrollbar-thumb-hover: color-mix(in srgb,
      var(--button-border),
      black 24%);
    }
  }

  :root[data-theme="light"] {
    --hover-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --hover-bg: color-mix(in srgb, var(--card-bg), white 10%);
    }
  }

  :root[data-theme="light"] {
    --raised-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --raised-bg: color-mix(in srgb, var(--card-bg), white 10%);
    }
  }

  :root[data-theme="light"] {
    --tooltip-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --tooltip-bg: color-mix(in srgb, var(--card-bg), black 20%);
    }
  }

  :root[data-theme="light"] {
    --danger-soft-bg: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --danger-soft-bg: color-mix(in srgb, var(--danger), transparent 50%);
    }
  }

  :root[data-theme="light"] {
    --tree-header-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --tree-header-bg: color-mix(in srgb, var(--card-bg), black 20%);
    }
  }

  :root[data-theme="light"] {
    --tree-title-bg: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --tree-title-bg: color-mix(in srgb, var(--card-bg), black 10%);
    }
  }

  :root[data-theme="light"] {
    --sapField_Background: var(--button-bg);
    --sapField_BackgroundStyle: var(--button-bg);
    --sapField_TextColor: var(--button-text);
    --sapField_PlaceholderTextColor: var(--text-secondary);
    --sapField_BorderColor: var(--button-border);
    --sapField_Hover_Background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --sapField_Hover_Background: color-mix(in srgb,
      var(--button-bg),
      white 10%);
    }
  }

  :root[data-theme="light"] {
    --sapField_Hover_BorderColor: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --sapField_Hover_BorderColor: color-mix(in srgb,
      var(--button-border),
      black 10%);
    }
  }

  :root[data-theme="light"] {
    --sapField_Focus_Background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="light"] {
      --sapField_Focus_Background: color-mix(in srgb,
      var(--button-bg),
      white 10%);
    }
  }

  :root[data-theme="light"] {
    --sapField_ReadOnly_Background: var(--button-disabled-bg);
    --sapField_Disabled_Background: var(--button-disabled-bg);
    --sapContent_DisabledTextColor: var(--button-disabled-text);
    --sapSelectedColor: var(--secondary);
    --sapContent_Selected_ForegroundColor: var(--secondary);
    --sapContent_Selected_Hover_Background: transparent;
    --sapContent_ContrastTextColor: var(--text-primary-reverse);
  }

  * {
    box-sizing: border-box;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
    outline: 0;
    margin: 0;
    padding: 0;
  }

  html, body, #root {
    width: 100%;
    min-height: 100%;
  }

  body {
    background-color: var(--background);
    background-image: var(--body-bg-image);
    width: 100%;
    min-height: 100%;
    color: var(--text-primary);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-origin: border-box;
    font-family: Inter, sans-serif;
  }

  main {
    margin-top: 4.375rem;
  }

  h1, h2, h3, h4, h5, h6, strong {
    color: var(--text-primary);
    font-weight: 700;
  }

  p, span, pre, sub, sup {
    color: var(--text-primary);
  }

  hr {
    background-color: var(--button-border);
    border: 0;
    height: 1px;
  }

  input, select, textarea {
    min-height: 40px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .fd-input, .fd-form-select, .fd-input-group, .fd-input-group__input, .fd-input-group--control, .fd-input-group .fd-input {
    -webkit-text-fill-color: var(--button-text);
    border-color: var(--button-border) !important;
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    background-image: none !important;
  }

  input::placeholder, textarea::placeholder, .fd-input::placeholder, .fd-form-select::placeholder {
    opacity: 1;
    -webkit-text-fill-color: var(--text-secondary);
    color: var(--text-secondary) !important;
  }

  input:disabled, input:read-only, select:disabled, select:read-only, textarea:disabled, textarea:read-only, .fd-input:disabled, .fd-input:read-only, .fd-form-select:disabled, .fd-form-select:read-only {
    -webkit-text-fill-color: var(--button-disabled-text);
    background-color: var(--button-disabled-bg) !important;
    color: var(--button-disabled-text) !important;
  }

  input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] {
    color-scheme: inherit;
    border-color: var(--button-border) !important;
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
  }

  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
  }

  input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
  }

  input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
  }

  input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
  }

  :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert();
  }

  :root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert();
  }

  :root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert();
  }

  :root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert();
  }

  :root[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert();
  }

  input:read-only, .fd-input:read-only {
    color: var(--text-secondary);
    filter: brightness(.95);
  }

  input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    appearance: textfield;
  }

  input:-webkit-autofill {
    caret-color: var(--button-text);
    -webkit-box-shadow: 0 0 0 1000px var(--button-bg) inset;
    -webkit-text-fill-color: var(--button-text);
  }

  input:-webkit-autofill:hover {
    caret-color: var(--button-text);
    -webkit-box-shadow: 0 0 0 1000px var(--button-bg) inset;
    -webkit-text-fill-color: var(--button-text);
  }

  input:-webkit-autofill:focus {
    caret-color: var(--button-text);
    -webkit-box-shadow: 0 0 0 1000px var(--button-bg) inset;
    -webkit-text-fill-color: var(--button-text);
  }

  input:-webkit-autofill:active {
    caret-color: var(--button-text);
    -webkit-box-shadow: 0 0 0 1000px var(--button-bg) inset;
    -webkit-text-fill-color: var(--button-text);
  }

  ::-webkit-scrollbar {
    background-color: var(--scrollbar-track);
    border-radius: 4px;
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    border: 2px solid var(--scrollbar-track);
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
  }

  ::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-track);
  }
}

@layer components {
  .bg-gradient {
    background: var(--theme-bg);
  }

  .content-bg {
    background: var(--card-bg-secondary);
    border-radius: 4px;
    padding: 1rem;
    box-shadow: 2px 2px 6px #00000026;
  }

  .pointer {
    cursor: pointer;
  }

  .opacity-hover:hover {
    filter: brightness(1.2);
  }

  .gap-025 {
    gap: .25rem;
  }

  .gap-05 {
    gap: .5rem;
  }

  .gap-1 {
    gap: 1rem;
  }

  .gap-15 {
    gap: 1.5rem;
  }

  .no-hover {
    pointer-events: none;
  }

  .content {
    padding: 1.5rem;
  }

  @media screen and (max-width: 768px) {
    .content {
      padding: 1rem .5rem;
    }
  }

  .modal-content {
    min-height: 100%;
    max-height: 100%;
    color: var(--text-primary);
    background: none;
    border: 0;
    padding: 1rem 1.5rem;
  }

  .no-label-input {
    justify-content: flex-end;
  }

  .no-label-button {
    margin-top: 26px;
  }

  .input-upper {
    text-transform: uppercase;
  }

  .action {
    float: right;
    text-align: right;
  }

  .react-tagsinput {
    border: 1px solid var(--button-border);
    border-radius: var(--sapField_BorderCornerRadius, .125rem);
    border-color: var(--button-border);
    border-style: solid;
    border-width: var(--sapField_BorderWidth, .0625rem);
    background-color: var(--button-bg);
    color: var(--button-text);
    cursor: text;
    font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
    font-size: var(--sapFontSize, .875rem);
    padding-top: 5px;
    padding-left: 5px;
    font-weight: 400;
    overflow: hidden;
  }

  .react-tagsinput-tag {
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: var(--text-primary-reverse);
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 0 5px;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 400;
    display: inline-block;
  }

  .react-tagsinput-remove {
    cursor: pointer;
    color: var(--text-primary-reverse);
    font-weight: 700;
  }

  .react-tagsinput-tag a:before {
    content: " x";
  }

  .react-tagsinput-input {
    color: var(--button-text);
    background: none;
    border: 0;
    outline: none;
    margin-bottom: 6px;
    padding: 5px;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 2;
  }

  .no-style-border-input {
    border: 0;
    border-bottom: 1px solid var(--button-border);
    width: 50%;
    color: var(--button-text);
    background: none;
    padding: 6px 2px;
  }

  .no-style-border-input:focus {
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    width: 50%;
    color: var(--button-text);
    border-radius: 4px;
  }

  .no-style-border-input:hover {
    background: var(--button-bg);
  }

  .react-modal-overlay {
    z-index: 9999;
    background: var(--overlay-bg);
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .react-modal-content {
    background: var(--card-bg);
    border-radius: 4px;
    outline: none;
    width: 100%;
    max-width: 400px;
  }

  .custom-modal-content {
    width: 50rem;
  }

  .react-modal-close {
    background: none;
    border: 0;
  }

  .react-modal-close:hover {
    filter: brightness(.8);
  }

  .scroll-disabled {
    overflow: hidden;
  }

  .Toastify, .Toastify__toast-container, .custom-react-toastify {
    z-index: var(--toastify-z-index) !important;
    position: fixed !important;
  }

  [data-ui5-cal-special-date] {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
  }

  [data-ui5-cal-special-date].highlight-green {
    background-color: var(--green);
  }

  [data-ui5-cal-special-date].highlight-yellow {
    background-color: var(--yellow);
  }

  [data-ui5-cal-special-date].highlight-red {
    background-color: var(--red);
  }

  .sketch-picker {
    background-color: var(--card-bg-secondary);
  }

  .fd-tree {
    background: none;
  }

  .fd-tree .fd-tree__row--header {
    background: var(--tree-header-bg);
    color: var(--text-secondary);
    font-family: Inter, sans-serif;
  }

  .fd-tree .fd-tree__item {
    background-color: var(--card-bg-secondary);
  }

  .fd-tree .fd-tree__item:nth-child(odd) {
    background-color: var(--card-bg);
  }

  .fd-tree .fd-tree__item .fd-tree__row#row-title {
    background: var(--tree-title-bg);
  }

  .fd-tree .fd-tree__item .fd-tree__row:hover {
    background: var(--tree-header-bg);
  }

  .fd-tree .fd-tree__item .fd-tree__row .fd-tree__col, .fd-tree--header .fd-tree__col--control {
    color: var(--text-secondary);
    font-family: Inter, sans-serif;
  }

  .fd-tree--header .fd-tree__col--control {
    color: var(--text-primary);
  }

  .fd-layout-panel {
    border: 1px solid var(--button-border);
    background-color: var(--card-bg-secondary);
    box-shadow: none;
  }

  .fd-layout-panel__body {
    padding: 0 !important;
  }

  .fd-tabs, .fd-tabs__content, .fd-tabs__panel, .fd-tabs__list {
    border-color: var(--card-border) !important;
    color: var(--text-primary) !important;
    background-color: #0000 !important;
  }

  .fd-layout-panel .fd-tabs {
    background-color: #0000;
    border-radius: 4px;
  }

  .fd-tabs__item, .fd-tabs__link, .fd-tabs__tag, .fd-layout-panel .fd-tabs .fd-tabs__item a span {
    font-family: Inter, sans-serif;
    color: var(--text-secondary) !important;
  }

  .fd-tabs__link {
    background-color: #0000 !important;
    border-color: #0000 !important;
  }

  .fd-tabs__link.is-selected .fd-tabs__tag, .fd-tabs__link[aria-selected="true"] .fd-tabs__tag {
    font-weight: 700;
    color: var(--text-primary) !important;
  }

  .fd-tabs__tag:after {
    border-radius: 999px 999px 0 0;
    background: var(--secondary) !important;
    height: 3px !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-tabs__tag:after {
      background: color-mix(in srgb, var(--secondary), transparent 75%) !important;
    }
  }

  .fd-tabs__link.is-selected .fd-tabs__tag:after, .fd-tabs__link[aria-selected="true"] .fd-tabs__tag:after {
    opacity: 1;
    background: var(--secondary) !important;
  }

  .fd-input {
    margin-top: 0;
  }

  .fd-form-label {
    color: var(--text-primary);
    font-weight: 700;
  }

  .fd-input, .fd-form-select {
    z-index: 0;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    color: var(--text-primary);
    background-image: none;
    border-radius: 4px;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
  }

  .fd-input::placeholder, .fd-form-select::placeholder {
    color: var(--text-secondary);
  }

  .fd-input:hover, .fd-form-select:hover, .fd-input:focus, .fd-form-select:focus {
    border: 1px solid var(--primary);
    outline: 0;
  }

  .fd-input:disabled, .fd-input:read-only, .fd-form-select:disabled, .fd-form-select:read-only {
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
  }

  .fd-input:disabled, .fd-form-select:disabled {
    cursor: not-allowed;
  }

  .fd-action-bar {
    box-shadow: none;
    margin-bottom: 1rem;
  }

  .fd-dialog--active {
    z-index: 999;
  }

  .fd-tabs--l, .fd-tabs--m {
    padding: 0;
  }

  .fd-dialog__header {
    background: var(--modal-header-bg);
  }

  .fd-dialog__header .fd-bar__element {
    color: var(--text-primary-reverse);
    font-weight: 700;
  }

  .fd-segmented-button button:only-child {
    border-radius: 4px;
  }

  .fd-dialog__body, .fd-dialog__footer {
    border-top: 1px solid var(--button-border);
    background: var(--modal-body-bg);
  }

  .fd-bar--footer {
    height: 3rem;
  }

  .fd-calendar, .fd-calendar__content, .fd-calendar__table, .fd-calendar__group, .fd-calendar__row, .fd-calendar__months, .fd-calendar__years, .fd-calendar__dates {
    background-color: var(--card-bg-secondary) !important;
    color: var(--text-secondary) !important;
  }

  .fd-calendar {
    border: 1px solid var(--card-border);
    border-radius: 4px;
    overflow: hidden;
  }

  .fd-calendar .fd-calendar__header, .fd-calendar .fd-calendar__navigation {
    border-color: var(--card-border) !important;
    background-color: var(--list-header-bg) !important;
    color: var(--text-primary) !important;
  }

  .fd-calendar .fd-calendar__action, .fd-calendar .fd-calendar__action .fd-button, .fd-calendar .fd-calendar__close-button {
    color: var(--text-primary) !important;
    background: none !important;
  }

  .fd-calendar .fd-calendar__item {
    background-color: var(--card-bg-secondary) !important;
    color: var(--text-secondary) !important;
  }

  .fd-calendar .fd-calendar__item:hover, .fd-calendar .fd-calendar__item:hover .fd-calendar__text {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
  }

  .fd-calendar .fd-calendar__item.fd-calendar__item--current {
    border: 1px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-calendar .fd-calendar__item.fd-calendar__item--current {
      border: 1px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .fd-calendar .fd-calendar__item.fd-calendar__item--range, .fd-calendar .fd-calendar__item.is-focus {
    border: 1px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-calendar .fd-calendar__item.fd-calendar__item--range, .fd-calendar .fd-calendar__item.is-focus {
      border: 1px solid color-mix(in srgb, var(--secondary), black 12%) !important;
    }
  }

  .fd-calendar .fd-calendar__item.fd-calendar__item--range, .fd-calendar .fd-calendar__item.is-focus {
    background-color: var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-calendar .fd-calendar__item.fd-calendar__item--range, .fd-calendar .fd-calendar__item.is-focus {
      background-color: color-mix(in srgb, var(--secondary), transparent 56%) !important;
    }
  }

  .fd-calendar .fd-calendar__item.is-active {
    border: 1px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-calendar .fd-calendar__item.is-active {
      border: 1px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .fd-calendar .fd-calendar__item.is-active {
    background-color: var(--secondary) !important;
  }

  .fd-calendar .fd-calendar__item .fd-calendar__text {
    color: var(--text-secondary) !important;
  }

  .fd-calendar .fd-calendar__item.fd-calendar__item--range .fd-calendar__text, .fd-calendar .fd-calendar__item.is-focus .fd-calendar__text {
    color: var(--text-primary-reverse) !important;
  }

  .fd-calendar .fd-calendar__item.is-active .fd-calendar__text {
    font-weight: 700;
    color: var(--text-primary-reverse) !important;
  }

  .fd-calendar .fd-calendar__item.fd-calendar__item--other-month .fd-calendar__text, .fd-calendar .fd-calendar__item.is-disabled .fd-calendar__text {
    color: var(--text-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-calendar .fd-calendar__item.fd-calendar__item--other-month .fd-calendar__text, .fd-calendar .fd-calendar__item.is-disabled .fd-calendar__text {
      color: color-mix(in srgb, var(--text-primary), transparent 55%) !important;
    }
  }

  .AccordionRoot {
    background-color: var(--card-bg);
    border-radius: 4px;
    width: 100%;
    box-shadow: 0 2px 10px #0000001a;
  }

  .AccordionItem {
    margin-top: 1px;
    overflow: hidden;
  }

  .AccordionItem:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-top: 0;
  }

  .AccordionItem:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  .AccordionItem:focus-within {
    z-index: 1;
    position: relative;
    box-shadow: 0 0 0 2px #0000001a;
  }

  .AccordionHeader {
    display: flex;
  }

  .AccordionTrigger {
    all: unset;
    box-sizing: border-box;
    border-bottom: 1px solid var(--button-border);
    background-color: var(--card-bg);
    width: 100%;
    height: 45px;
    color: var(--text-primary);
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    display: flex;
  }

  .AccordionTrigger:hover {
    background-color: var(--card-bg-secondary);
  }

  .AccordionContent {
    background-color: var(--card-bg);
    max-height: 0;
    color: var(--text-primary);
    opacity: 0;
    will-change: max-height, opacity;
    padding: 0 8px;
    font-size: 15px;
    transition: max-height .3s cubic-bezier(.22, 1, .36, 1), opacity .2s;
    overflow: hidden;
  }

  .AccordionContent[data-state="open"] {
    opacity: 1;
    max-height: 9999px;
  }

  .AccordionContent[data-state="closed"] {
    animation: .3s cubic-bezier(.87, 0, .13, 1) slideUp;
  }

  .AccordionContentInner {
    max-height: min(60vh, 560px);
    padding: 12px 20px;
    transition: padding .2s;
    overflow: auto;
  }

  .AccordionContentText {
    padding: 15px 20px;
  }

  .AccordionChevron {
    color: var(--text-primary);
    transition: transform .3s cubic-bezier(.87, 0, .13, 1);
  }

  .AccordionTrigger[data-state="open"] > .AccordionChevron {
    transform: rotate(180deg);
  }

  @keyframes slideDown {
    from {
      height: 0;
    }

    to {
      height: 400px;
    }
  }

  @keyframes slideUp {
    from {
      height: 400px;
    }

    to {
      height: 0;
    }
  }

  .ContextMenuContent, .ContextMenuSubContent {
    border: 1px solid var(--button-border);
    background-color: var(--card-bg);
    border-radius: 4px;
    min-width: 220px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 10px 38px -10px #16171859, 0 10px 20px -15px #16171833;
  }

  .ContextMenuItem, .ContextMenuCheckboxItem, .ContextMenuRadioItem, .ContextMenuSubTrigger {
    -webkit-user-select: none;
    user-select: none;
    height: 25px;
    color: var(--text-primary);
    border-radius: 4px;
    outline: none;
    align-items: center;
    padding: 0 5px 0 25px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    position: relative;
  }

  .ContextMenuSubTrigger[data-state="open"], .ContextMenuItem[data-highlighted], .ContextMenuCheckboxItem[data-highlighted], .ContextMenuRadioItem[data-highlighted], .ContextMenuSubTrigger[data-highlighted] {
    background-color: var(--raised-bg);
    color: var(--text-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ContextMenuSubTrigger[data-state="open"], .ContextMenuItem[data-highlighted], .ContextMenuCheckboxItem[data-highlighted], .ContextMenuRadioItem[data-highlighted], .ContextMenuSubTrigger[data-highlighted] {
      color: color-mix(in srgb, var(--text-primary), white 10%);
    }
  }

  .ContextMenuItem[data-disabled], .ContextMenuCheckboxItem[data-disabled], .ContextMenuRadioItem[data-disabled], .ContextMenuSubTrigger[data-disabled] {
    color: var(--card-bg-secondary);
    pointer-events: none;
  }

  .ContextMenuLabel {
    color: var(--card-bg-secondary);
    padding-left: 25px;
    font-size: 12px;
    line-height: 25px;
  }

  .ContextMenuSeparator {
    background-color: var(--button-border);
    height: 1px;
    margin: 5px;
  }

  .ContextMenuItem--danger[data-highlighted] {
    background-color: var(--danger-soft-bg);
    color: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ContextMenuItem--danger[data-highlighted] {
      color: color-mix(in srgb, var(--danger), white 10%);
    }
  }

  .ContextMenuItemIndicator {
    justify-content: center;
    align-items: center;
    width: 25px;
    display: inline-flex;
    position: absolute;
    left: 0;
  }

  .RightSlot {
    color: var(--card-bg);
    margin-left: auto;
    padding-left: 20px;
  }

  .ContextMenuSubTrigger[data-state="open"] > .RightSlot, [data-highlighted] > .RightSlot {
    color: var(--text-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ContextMenuSubTrigger[data-state="open"] > .RightSlot, [data-highlighted] > .RightSlot {
      color: color-mix(in srgb, var(--text-primary), white 10%);
    }
  }

  .ContextMenuItem--danger[data-highlighted] > .RightSlot {
    color: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ContextMenuItem--danger[data-highlighted] > .RightSlot {
      color: color-mix(in srgb, var(--danger), white 10%);
    }
  }

  [data-disabled] .RightSlot {
    color: var(--card-bg-secondary);
  }

  .react-datepicker-wrapper {
    width: 100%;
  }

  .react-datepicker-popper {
    z-index: 1050;
  }

  .weekly-planning-datepicker-popper {
    z-index: 2000;
    inset: auto;
    position: fixed !important;
  }

  .react-datepicker__day-name:first-letter, .react-datepicker__current-month:first-letter {
    text-transform: uppercase;
  }

  .react-datepicker__month {
    margin: .35rem;
  }

  .react-datepicker__day-name, .react-datepicker__day {
    width: 2rem;
    margin: .08rem;
    line-height: 2rem;
  }

  .react-datepicker {
    border-radius: 4px;
    font-family: inherit;
    overflow: hidden;
    box-shadow: 0 12px 28px #00000047;
    border: 1px solid var(--card-border) !important;
    background-color: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .react-datepicker__header {
    border-bottom: 1px solid var(--card-border) !important;
    background-color: var(--list-header-bg) !important;
    color: var(--text-primary) !important;
  }

  .react-datepicker__month, .react-datepicker__month-container, .react-datepicker__day-names, .react-datepicker__week {
    background-color: var(--card-bg-secondary) !important;
  }

  .react-datepicker__current-month, .react-datepicker__day-name {
    font-weight: 700;
    color: var(--text-primary) !important;
  }

  .react-datepicker__year-text, .react-datepicker__day {
    border-radius: 4px;
    position: relative;
    color: var(--text-primary) !important;
  }

  .react-datepicker__day:hover {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
  }

  .react-datepicker__day--selected, .react-datepicker__day--range-start, .react-datepicker__day--range-end {
    border: 2px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--selected, .react-datepicker__day--range-start, .react-datepicker__day--range-end {
      border: 2px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .react-datepicker__day--selected, .react-datepicker__day--range-start, .react-datepicker__day--range-end {
    font-weight: 700;
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--selected:hover, .react-datepicker__day--range-start:hover, .react-datepicker__day--range-end:hover {
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--keyboard-selected {
    border: 2px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--keyboard-selected {
      border: 2px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .react-datepicker__day--keyboard-selected {
    font-weight: 700;
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
    border: 1px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
      border: 1px solid color-mix(in srgb, var(--secondary), black 12%) !important;
    }
  }

  .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
    background-color: var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
      background-color: color-mix(in srgb, var(--secondary), transparent 56%) !important;
    }
  }

  .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
    font-weight: 600;
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--in-range:hover, .react-datepicker__day--in-selecting-range:hover {
    background-color: var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--in-range:hover, .react-datepicker__day--in-selecting-range:hover {
      background-color: color-mix(in srgb, var(--secondary), transparent 56%) !important;
    }
  }

  .react-datepicker__day--in-range:hover, .react-datepicker__day--in-selecting-range:hover {
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--selected:not([aria-disabled="true"]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__day--in-range:not([aria-disabled="true"]):hover, .react-datepicker__day--range-start:not([aria-disabled="true"]):hover, .react-datepicker__day--range-end:not([aria-disabled="true"]):hover {
    background-color: var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--selected:not([aria-disabled="true"]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__day--in-range:not([aria-disabled="true"]):hover, .react-datepicker__day--range-start:not([aria-disabled="true"]):hover, .react-datepicker__day--range-end:not([aria-disabled="true"]):hover {
      background-color: color-mix(in srgb, var(--secondary), transparent 56%) !important;
    }
  }

  .react-datepicker__day--selected:not([aria-disabled="true"]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover, .react-datepicker__day--in-range:not([aria-disabled="true"]):hover, .react-datepicker__day--range-start:not([aria-disabled="true"]):hover, .react-datepicker__day--range-end:not([aria-disabled="true"]):hover {
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--range-start:not([aria-disabled="true"]):hover, .react-datepicker__day--range-end:not([aria-disabled="true"]):hover {
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .react-datepicker__day--today {
    border: 2px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--today {
      border: 2px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .react-datepicker__day--today {
    font-weight: 700;
    color: var(--text-primary) !important;
  }

  .react-datepicker__navigation {
    line-height: 1.5rem;
    top: 10px;
  }

  .react-datepicker__navigation-icon:before, .react-datepicker__navigation:hover .react-datepicker__navigation-icon:before {
    border-color: var(--text-primary) !important;
  }

  .react-datepicker__day--outside-month, .react-datepicker__day--disabled {
    color: var(--text-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--outside-month, .react-datepicker__day--disabled {
      color: color-mix(in srgb, var(--text-primary), transparent 55%) !important;
    }
  }

  .react-datepicker__day--outside-month:hover, .react-datepicker__day--disabled:hover {
    color: var(--text-primary) !important;
    background-color: #0000 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .react-datepicker__day--outside-month:hover, .react-datepicker__day--disabled:hover {
      color: color-mix(in srgb, var(--text-primary), transparent 55%) !important;
    }
  }

  .react-datepicker__triangle {
    fill: var(--list-header-bg);
    color: var(--list-header-bg);
    stroke: var(--card-border);
  }

  .TooltipContent {
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--tooltip-bg);
    color: var(--text-primary);
    will-change: transform, opacity;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 1;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    box-shadow: 0 10px 38px -10px #0e121659, 0 10px 20px -15px #0e121633;
  }

  .TooltipContent[data-state="delayed-open"][data-side="top"] {
    animation-name: slideDownAndFade;
  }

  .TooltipContent[data-state="delayed-open"][data-side="right"] {
    animation-name: slideLeftAndFade;
  }

  .TooltipContent[data-state="delayed-open"][data-side="bottom"] {
    animation-name: slideUpAndFade;
  }

  .TooltipContent[data-state="delayed-open"][data-side="left"] {
    animation-name: slideRightAndFade;
  }

  .TooltipArrow {
    fill: var(--card-bg);
  }

  .TooltipTrigger {
    all: unset;
  }

  @keyframes slideUpAndFade {
    from {
      opacity: 0;
      transform: translateY(2px);
    }

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

  @keyframes slideRightAndFade {
    from {
      opacity: 0;
      transform: translateX(-2px);
    }

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

  @keyframes slideDownAndFade {
    from {
      opacity: 0;
      transform: translateY(-2px);
    }

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

  @keyframes slideLeftAndFade {
    from {
      opacity: 0;
      transform: translateX(2px);
    }

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

  .cs-main-container, .cs-chat-container {
    background-color: var(--card-bg-secondary);
    border-radius: 4px;
  }

  .cs-conversation-header, .cs-message-list {
    background-color: var(--card-bg);
  }

  .cs-conversation-header {
    border-bottom: 1px solid var(--button-border);
    border-radius: 4px 4px 0 0;
  }

  .cs-message__header, .cs-message__footer {
    color: var(--text-primary);
  }

  .cs-message-list {
    padding: 1rem 0;
  }

  .cs-message--incoming {
    border-radius: 4px;
    margin: 8px 0;
  }

  .cs-message--incoming .cs-message__content, .cs-message__content {
    border: 1px solid var(--button-border);
    background-color: var(--card-bg-secondary);
    color: var(--text-primary);
  }

  .cs-message__html-content {
    color: var(--text-primary);
  }

  .cs-message-input {
    border-top: 1px solid var(--button-border);
    background-color: #0000;
  }

  .cs-message-input__content-editor-wrapper, .cs-message-input__content-editor, .cs-message-input__content-editor-container {
    background-color: var(--button-bg);
    color: var(--text-primary);
  }

  .cs-message-input__content-editor-wrapper {
    border: 1px solid var(--button-border);
  }

  .cs-message-input__content-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--text-primary);
    opacity: .8;
  }

  .cs-message-input__tools path {
    fill: var(--text-primary);
  }

  .fd-tabs__link {
    padding: .875rem .75rem;
  }

  .fs-15 {
    font-size: 24px;
  }

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

  .date-picker-container .fd-popover {
    width: 100%;
  }

  .date-picker-container .fd-popover__body, .date-picker-container .fd-popover__popper, .date-picker-container .fd-popover__wrapper {
    border-color: var(--card-border) !important;
    background: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 12px 28px #00000047 !important;
  }

  .date-picker-container .fd-popover__body:before, .date-picker-container .fd-popover__body:after, .date-picker-container .fd-popover__popper:before, .date-picker-container .fd-popover__popper:after {
    border-color: var(--card-border) !important;
    background: var(--card-bg-secondary) !important;
  }

  .date-picker-container .fd-input-group--control {
    height: 40px;
    min-height: 40px;
    overflow: hidden;
    border: 1px solid var(--button-border) !important;
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-radius: 4px !important;
  }

  .date-picker-container[data-error="true"] .fd-input-group--control {
    border-color: var(--danger);
  }

  .date-picker-container .fd-input-group--control .fd-input {
    -webkit-text-fill-color: var(--button-text);
    outline: 0;
    height: 38px;
    min-height: 38px;
    color: var(--button-text) !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .date-picker-container .fd-input-group--control .fd-input:disabled, .date-picker-container .fd-input-group--control .fd-input:read-only {
    -webkit-text-fill-color: var(--button-disabled-text);
    color: var(--button-disabled-text) !important;
    background: none !important;
  }

  .date-picker-container .fd-button.fd-input-group__button {
    width: 40px;
    min-width: 40px;
    height: 38px;
    min-height: 38px;
    border-width: 0 0 0 1px !important;
    border-color: var(--button-border) !important;
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-radius: 0 !important;
  }

  .date-picker-container .fd-button.fd-input-group__button:hover {
    background-color: var(--card-bg-secondary) !important;
  }

  .date-picker-container .fd-button.fd-input-group__button svg, .date-picker-container .fd-button.fd-input-group__button i, .date-picker-container .fd-button.fd-input-group__button span {
    color: var(--button-text) !important;
  }

  .ticks {
    justify-content: space-between;
    padding: 0;
    display: flex;
  }

  .title-action-bar {
    background-color: #0000;
    margin: 0;
    padding: 0;
  }

  .title-action-bar div {
    margin: 0;
    padding: 0;
  }

  .title-action-bar h1, .title-action-bar h2, .title-action-bar h3, .title-action-bar h4, .title-action-bar h5, .title-action-bar h6 {
    color: var(--text-primary);
    text-overflow: initial;
    word-break: break-word;
    margin: 0;
    padding: 0;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: normal;
  }

  .title-action-bar p {
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
    font-family: Inter, Helvetica, Arial, sans-serif;
  }

  .table-container table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .table-container thead {
    z-index: 1;
    border-radius: 4px;
    width: 100%;
    position: sticky;
    top: 0;
  }

  .table-container thead tr {
    background: var(--table-header-bg);
    height: 45px;
    color: var(--text-primary-reverse);
    border-bottom: 2px solid #0000;
  }

  .table-container thead th {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
  }

  .table-container thead th:first-child {
    border-top-left-radius: 8px;
  }

  .table-container thead th:last-child {
    border-top-right-radius: 8px;
  }

  .table-container tbody tr {
    background-color: var(--card-bg);
    color: var(--text-primary);
  }

  .table-container tbody tr:nth-child(odd) {
    background-color: var(--card-bg-secondary);
  }

  .table-container tbody tr:hover {
    filter: brightness(.95);
  }

  .table-container tbody td {
    overflow-wrap: break-word;
    white-space: normal;
    word-break: break-word;
  }

  .table-container th, .table-container td {
    text-align: left;
    padding: 0;
  }

  .table-container[data-compact="true"] th, .table-container[data-compact="true"] td {
    padding: 0;
  }

  .table-container tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
  }

  .table-container tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
  }

  .table-container tfoot {
    z-index: 1;
    border-radius: 4px;
    width: 100%;
    position: sticky;
    top: 0;
  }

  .table-container tfoot tr {
    background: var(--primary);
    height: 45px;
    color: var(--text-primary-reverse);
    border-bottom: 2px solid #0000;
  }

  .table-container tfoot th:first-child {
    border-bottom-left-radius: 8px;
  }

  .table-container tfoot th:last-child {
    border-bottom-right-radius: 8px;
  }

  @media (max-width: 768px) {
    .table-container table {
      border: 0;
      width: 100%;
    }

    .table-container thead {
      display: none;
    }

    .table-container tbody, .table-container tr, .table-container td {
      width: 100%;
      display: block;
    }

    .table-container tr {
      border: 1px solid var(--button-border);
      border-radius: 4px;
      margin: 0;
      padding: 0;
    }

    .table-container td {
      border: none;
      border-bottom: 1px solid var(--button-border);
      text-align: left;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      display: flex;
      position: relative;
    }

    .table-container td:last-child {
      border-color: #0000;
    }

    .table-container table tbody tr:last-child td:first-child, .table-container table tbody tr:last-child td:last-child {
      border-radius: 0;
    }

    .table-container td:before {
      content: attr(data-label);
      text-align: left;
      flex: 1;
      min-width: 70px;
      margin: 0;
      font-weight: 700;
    }

    .table-container td span, .table-container td div, .table-container td strong, .table-container td a {
      flex: 1;
    }
  }

  .multi-language-dialog .fd-dialog__content {
    width: 50%;
  }

  @media (max-width: 1024px) {
    .multi-language-dialog .fd-dialog__content {
      width: 75%;
    }
  }

  @media (max-width: 640px) {
    .multi-language-dialog .fd-dialog__content {
      width: calc(100vw - 1rem);
      max-width: calc(100vw - 1rem);
    }
  }

  .table-config-dialog .fd-dialog__content {
    width: 80%;
    max-height: 85vh;
  }

  @media (max-width: 768px) {
    .table-config-dialog .fd-dialog__content {
      width: calc(100vw - 1rem);
      max-width: calc(100vw - 1rem);
    }
  }

  .table-config-settings thead {
    z-index: 1;
    border-radius: 4px;
    width: 100%;
    position: sticky;
    top: 0;
  }

  .table-config-settings thead tr {
    background: var(--primary);
    height: 50px;
    color: var(--text-primary);
    border-bottom: 2px solid #0000;
  }

  .table-config-settings thead th:first-child {
    border-top-left-radius: 8px;
  }

  .table-config-settings thead th:last-child {
    border-top-right-radius: 8px;
  }

  .table-config-settings tbody tr {
    background-color: var(--card-bg);
    color: var(--text-primary);
  }

  .table-config-settings tbody tr:nth-child(odd) {
    background-color: var(--card-bg-secondary);
  }

  .table-config-settings tbody tr:hover {
    filter: brightness(.95);
  }

  .table-config-settings th, .table-config-settings td {
    text-align: left;
    padding: 0;
  }

  .table-config-settings .dragging {
    display: table;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .drawer-content[data-vaul-drawer-direction="top"] {
    inset-inline: 0;
    border-bottom-width: 1px;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    max-height: 80vh;
    margin: 0;
    top: 0;
  }

  .drawer-content[data-vaul-drawer-direction="bottom"] {
    inset-inline: 0;
    border-top-width: 1px;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    max-height: 80vh;
    margin: 0;
    bottom: 0;
  }

  .drawer-content[data-vaul-drawer-direction="right"] {
    inset-block: 0;
    border-left-width: 1px;
    width: 75%;
    right: 0;
  }

  .drawer-content[data-vaul-drawer-direction="left"] {
    inset-block: 0;
    border-right-width: 1px;
    width: 75%;
    left: 0;
  }

  @media (min-width: 640px) {
    .drawer-content[data-vaul-drawer-direction="right"], .drawer-content[data-vaul-drawer-direction="left"] {
      max-width: 384px;
    }
  }

  .drawer-content[data-vaul-drawer-direction="bottom"] > .drawer-handle {
    display: block;
  }

  .drawer-content[data-vaul-drawer-direction="bottom"] .drawer-header, .drawer-content[data-vaul-drawer-direction="top"] .drawer-header {
    text-align: center;
  }

  .searchable-select, .idiom-select {
    width: 100%;
    display: inline-block;
    position: relative;
  }

  .searchable__input-container, .idiom__input-container, .searchable__single-value, .idiom__single-value, .searchable__multi-value__label, .idiom__multi-value__label, .searchable__placeholder, .idiom__placeholder {
    color: var(--button-text);
    min-width: 0;
    font-family: Inter, sans-serif;
    font-size: 1rem;
  }

  .searchable__input, .idiom__input {
    color: var(--button-text);
  }

  .searchable__input input, .idiom__input input {
    min-height: 0;
    color: var(--button-text) !important;
    font-family: Inter, sans-serif !important;
    font-size: 1rem !important;
  }

  .searchable__placeholder, .idiom__placeholder {
    color: var(--text-secondary);
  }

  .searchable__control, .idiom__control {
    cursor: pointer;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    height: 40px;
    min-height: 40px;
    color: var(--button-text);
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    box-shadow: none !important;
  }

  .searchable-select.is-multi .searchable__control, .idiom-select.is-multi .idiom__control {
    height: 40px;
    min-height: 40px;
  }

  .searchable-select.is-multi:has(.searchable__multi-value) .searchable__control, .idiom-select.is-multi:has(.idiom__multi-value) .idiom__control {
    height: auto;
    min-height: 40px;
  }

  .native-select--with-icon .searchable__control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .searchable__value-container, .idiom__value-container {
    flex: auto;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    padding: 0 .75rem;
    display: flex;
    overflow: hidden;
  }

  .searchable-select.is-multi .searchable__value-container, .idiom-select.is-multi .idiom__value-container {
    height: 38px;
    min-height: 38px;
  }

  .searchable-select.is-multi:has(.searchable__multi-value) .searchable__value-container, .idiom-select.is-multi:has(.idiom__multi-value) .idiom__value-container {
    height: auto;
    min-height: 38px;
  }

  .searchable__input-container, .idiom__input-container {
    flex: auto;
    grid-template-columns: 0 min-content;
    min-height: 0;
    margin: 0 0 0 4px;
    padding: 0;
    display: grid;
    background: none !important;
  }

  .searchable__input, .idiom__input {
    background: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .searchable__input-container:after, .idiom__input-container:after {
    visibility: hidden;
    min-width: 2px;
    content: attr(data-value) " " !important;
    box-shadow: none !important;
    color: var(--button-text) !important;
    white-space: pre !important;
    background: none !important;
    border: 0 !important;
    grid-area: 1 / 2 !important;
    font-family: Inter, sans-serif !important;
    font-size: 1rem !important;
    display: block !important;
  }

  input.searchable__input, input.idiom__input, .searchable__input-container input, .idiom__input-container input {
    -webkit-text-fill-color: var(--button-text);
    appearance: none !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    box-sizing: content-box !important;
    color: var(--button-text) !important;
    caret-color: var(--button-text) !important;
    text-indent: 0 !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    grid-area: 1 / 2 !important;
    width: 100% !important;
    min-width: 2px !important;
    margin: 0 0 0 2px !important;
    padding: 0 !important;
  }

  .searchable-select input.searchable__input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .idiom-select input.idiom__input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: 0 !important;
    box-shadow: none !important;
    color: var(--button-text) !important;
    -webkit-text-fill-color: var(--button-text) !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
  }

  .searchable__single-value, .idiom__single-value {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 4px;
    overflow: hidden;
  }

  .searchable__placeholder, .idiom__placeholder {
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 4px;
    overflow: hidden;
  }

  .searchable__multi-value, .idiom__multi-value {
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    border-radius: 4px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__multi-value, .idiom__multi-value {
      background: color-mix(in srgb, var(--button-bg), white 7%);
    }
  }

  .searchable__multi-value__remove, .idiom__multi-value__remove {
    color: var(--button-text);
  }

  .searchable__multi-value__remove:hover, .idiom__multi-value__remove:hover {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__multi-value__remove:hover, .idiom__multi-value__remove:hover {
      background: color-mix(in srgb, var(--button-bg), white 12%);
    }
  }

  .searchable__multi-value__remove:hover, .idiom__multi-value__remove:hover {
    color: var(--danger);
  }

  .searchable__indicators, .idiom__indicators {
    flex-shrink: 0;
    align-items: center;
    height: 38px;
    min-height: 38px;
    display: flex;
  }

  .searchable__dropdown-indicator, .searchable__clear-indicator, .idiom__dropdown-indicator, .idiom__clear-indicator {
    color: var(--text-secondary);
    padding: 0 .5rem;
  }

  .searchable__dropdown-indicator:hover, .searchable__clear-indicator:hover, .idiom__dropdown-indicator:hover, .idiom__clear-indicator:hover {
    color: var(--button-text);
  }

  .searchable__menu {
    z-index: 40;
  }

  .searchable-select.has-error .searchable__control, .idiom-select.has-error .idiom__control {
    border-color: var(--danger);
  }

  .idiom-select.no-background .idiom__control {
    background: none;
    border-color: #0000;
  }

  .searchable-select.is-disabled .searchable__control, .idiom-select.is-disabled .idiom__control, .searchable__control--is-disabled, .idiom__control--is-disabled {
    cursor: not-allowed;
    opacity: .7;
    color: var(--button-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable-select.is-disabled .searchable__control, .idiom-select.is-disabled .idiom__control, .searchable__control--is-disabled, .idiom__control--is-disabled {
      color: color-mix(in srgb, var(--button-text), black 40%);
    }
  }

  .searchable-select.is-disabled .searchable__control, .idiom-select.is-disabled .idiom__control, .searchable__control--is-disabled, .idiom__control--is-disabled {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable-select.is-disabled .searchable__control, .idiom-select.is-disabled .idiom__control, .searchable__control--is-disabled, .idiom__control--is-disabled {
      background: color-mix(in srgb, var(--button-bg), black 5%);
    }
  }

  .searchable-select.is-disabled .searchable__control, .idiom-select.is-disabled .idiom__control, .searchable__control--is-disabled, .idiom__control--is-disabled {
    pointer-events: auto;
  }

  .searchable-select.is-disabled .searchable__single-value, .searchable-select.is-disabled .searchable__placeholder, .idiom-select.is-disabled .idiom__single-value, .idiom-select.is-disabled .idiom__placeholder {
    color: var(--button-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable-select.is-disabled .searchable__single-value, .searchable-select.is-disabled .searchable__placeholder, .idiom-select.is-disabled .idiom__single-value, .idiom-select.is-disabled .idiom__placeholder {
      color: color-mix(in srgb, var(--button-text), black 40%);
    }
  }

  .searchable-select.is-disabled .searchable__single-value, .searchable-select.is-disabled .searchable__placeholder, .idiom-select.is-disabled .idiom__single-value, .idiom-select.is-disabled .idiom__placeholder {
    opacity: .7;
  }

  .app-select__control {
    cursor: pointer;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    height: 40px;
    min-height: 40px;
    color: var(--button-text);
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    box-shadow: none !important;
  }

  .app-select__control:hover, .app-select__control--is-focused {
    border-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .app-select__control:hover, .app-select__control--is-focused {
      border-color: color-mix(in srgb, var(--button-border), white 10%);
    }
  }

  .app-select__control:hover, .app-select__control--is-focused {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .app-select__control:hover, .app-select__control--is-focused {
      background: color-mix(in srgb, var(--button-bg), white 10%);
    }
  }

  .app-select__control--is-focused {
    outline: 1px solid var(--primary);
  }

  .app-select__value-container {
    flex: auto;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    padding: 0 .75rem;
    display: flex;
    overflow: hidden;
  }

  .app-select__input-container {
    min-width: 2px;
    min-height: 0;
    color: var(--button-text);
    flex: auto;
    grid-template-columns: 0 min-content;
    margin: 0 0 0 4px;
    padding: 0;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    display: grid;
  }

  .app-select__input-container:after {
    content: attr(data-value) " ";
    min-width: 2px;
    color: var(--button-text);
    visibility: hidden;
    white-space: pre;
    grid-area: 1 / 2;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    display: block;
  }

  input.app-select__input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    appearance: none !important;
    width: 100% !important;
    min-width: 2px !important;
    min-height: 0 !important;
    box-shadow: none !important;
    color: var(--button-text) !important;
    caret-color: var(--button-text) !important;
    font: inherit !important;
    text-indent: 0 !important;
    -webkit-text-fill-color: var(--button-text) !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    grid-area: 1 / 2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-select__single-value, .app-select__placeholder, .app-select__multi-value__label {
    min-width: 0;
    max-width: 100%;
    color: var(--button-text);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    padding: 0 0 0 4px;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    overflow: hidden;
  }

  .app-select__placeholder {
    color: var(--text-secondary);
  }

  .app-select__indicators {
    flex-shrink: 0;
    align-items: center;
    height: 38px;
    min-height: 38px;
    display: flex;
  }

  .app-select__dropdown-indicator, .app-select__clear-indicator {
    color: var(--text-secondary);
    padding: 0 .5rem;
  }

  .app-select__dropdown-indicator:hover, .app-select__clear-indicator:hover {
    color: var(--button-text);
  }

  .app-select__menu {
    z-index: 40;
  }

  .searchable-select.has-error .app-select__control {
    border-color: var(--danger);
  }

  .searchable-select.is-disabled .app-select__control, .app-select__control--is-disabled {
    cursor: not-allowed;
    opacity: .7;
    color: var(--button-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable-select.is-disabled .app-select__control, .app-select__control--is-disabled {
      color: color-mix(in srgb, var(--button-text), black 40%);
    }
  }

  .searchable-select.is-disabled .app-select__control, .app-select__control--is-disabled {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable-select.is-disabled .app-select__control, .app-select__control--is-disabled {
      background: color-mix(in srgb, var(--button-bg), black 5%);
    }
  }

  .searchable-select.is-disabled .app-select__control, .app-select__control--is-disabled {
    pointer-events: auto;
  }

  .searchable-select.is-disabled .app-select__single-value, .searchable-select.is-disabled .app-select__placeholder {
    color: var(--button-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable-select.is-disabled .app-select__single-value, .searchable-select.is-disabled .app-select__placeholder {
      color: color-mix(in srgb, var(--button-text), black 40%);
    }
  }

  .searchable-select.is-disabled .app-select__single-value, .searchable-select.is-disabled .app-select__placeholder {
    opacity: .7;
  }

  .tp-select {
    width: 100%;
    min-width: 0;
    position: relative;
  }

  .tp-select__control {
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    height: 40px;
    min-height: 40px;
    color: var(--button-text);
    cursor: text;
    border-radius: 4px;
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .tp-select:not(.is-disabled) .tp-select__control:hover, .tp-select:focus-within .tp-select__control {
    border-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tp-select:not(.is-disabled) .tp-select__control:hover, .tp-select:focus-within .tp-select__control {
      border-color: color-mix(in srgb, var(--button-border), white 10%);
    }
  }

  .tp-select:not(.is-disabled) .tp-select__control:hover, .tp-select:focus-within .tp-select__control {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tp-select:not(.is-disabled) .tp-select__control:hover, .tp-select:focus-within .tp-select__control {
      background: color-mix(in srgb, var(--button-bg), white 10%);
    }
  }

  .tp-select:focus-within .tp-select__control {
    outline: 1px solid var(--primary);
  }

  input.tp-select__input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-width: 0;
    height: 100%;
    min-height: 0;
    caret-color: var(--button-text);
    flex: auto;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    box-shadow: none !important;
    color: var(--button-text) !important;
    -webkit-text-fill-color: var(--button-text) !important;
    background: none !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 .75rem !important;
  }

  input.tp-select__input::placeholder {
    opacity: 1;
    -webkit-text-fill-color: var(--text-secondary);
    color: var(--text-secondary) !important;
  }

  .tp-select__icon-button, .tp-select__indicator {
    width: 32px;
    height: 100%;
    color: var(--text-secondary);
    background: none;
    border: 0;
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
  }

  .tp-select__icon-button {
    cursor: pointer;
  }

  .tp-select__icon-button:hover, .tp-select__indicator:hover {
    color: var(--button-text);
  }

  .tp-select__menu {
    z-index: 100000;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    border-radius: 4px;
    width: max-content;
    min-width: 100%;
    max-width: min(720px, 100vw - 2rem);
    position: fixed;
    overflow: auto;
    box-shadow: 0 8px 16px #0000002e;
  }

  .tp-select__option, .tp-select__empty {
    width: 100%;
    min-height: 1.75rem;
    color: var(--button-text);
    text-align: left;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: .3rem .45rem;
    font-family: Inter, sans-serif;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.25;
    display: block;
  }

  .tp-select__option {
    cursor: pointer;
  }

  .tp-select__option:hover, .tp-select__option.is-selected {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tp-select__option:hover, .tp-select__option.is-selected {
      background: color-mix(in srgb, var(--button-bg), white 12%);
    }
  }

  .tp-select__empty {
    color: var(--text-secondary);
    text-align: center;
  }

  .tp-select.has-error .tp-select__control {
    border-color: var(--danger);
  }

  .tp-select.is-disabled .tp-select__control {
    cursor: not-allowed;
    opacity: .7;
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .tp-select.is-disabled .tp-select__control {
      background: color-mix(in srgb, var(--button-bg), black 5%);
    }
  }

  .searchable__control:hover, .idiom__control:hover {
    border-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__control:hover, .idiom__control:hover {
      border-color: color-mix(in srgb, var(--button-border), white 10%);
    }
  }

  .searchable__control:hover, .idiom__control:hover {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__control:hover, .idiom__control:hover {
      background: color-mix(in srgb, var(--button-bg), white 10%);
    }
  }

  .searchable__control--is-focused, .idiom__control--is-focused {
    border-color: var(--button-border);
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__control--is-focused, .idiom__control--is-focused {
      background: color-mix(in srgb, var(--button-bg), white 10%);
    }
  }

  .searchable__control--is-focused, .idiom__control--is-focused {
    outline: 1px solid var(--primary);
    box-shadow: none;
  }

  .idiom-select.no-background .idiom__control:hover {
    border-color: var(--button-border);
    background: none;
  }

  .searchable__menu, .idiom__menu {
    z-index: 99999;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    border-radius: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    overflow: hidden;
    box-shadow: 0 8px 20px #0000002e;
  }

  .searchable__menu-list, .idiom__menu-list {
    padding: .25rem;
  }

  .searchable__option, .idiom__option {
    cursor: pointer;
    background: var(--button-bg);
    min-height: 1.75rem;
    color: var(--button-text);
    text-overflow: clip;
    white-space: nowrap;
    border-radius: 4px;
    align-items: center;
    padding: .3rem .45rem;
    font-family: Inter, sans-serif;
    font-size: .75rem;
    line-height: 1.25;
    display: flex;
    overflow: visible;
    font-weight: 400 !important;
  }

  .searchable__option *, .idiom__option * {
    text-overflow: clip;
    white-space: nowrap;
    min-width: 0;
    overflow: visible;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
  }

  .searchable__option:hover, .idiom__option:hover, .searchable__option--is-focused, .idiom__option--is-focused {
    background: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__option:hover, .idiom__option:hover, .searchable__option--is-focused, .idiom__option--is-focused {
      background: color-mix(in srgb, var(--button-bg), white 8%);
    }
  }

  .searchable__option:hover, .idiom__option:hover, .searchable__option--is-focused, .idiom__option--is-focused {
    color: var(--button-text);
  }

  .searchable__option--is-selected, .idiom__option--is-selected {
    background: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .searchable__option--is-selected, .idiom__option--is-selected {
      background: color-mix(in srgb, var(--secondary), transparent 58%);
    }
  }

  .searchable__option--is-selected, .idiom__option--is-selected {
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--secondary);
    font-weight: 400 !important;
  }

  .searchable__menu-notice, .idiom__menu-notice {
    color: var(--button-text);
    font-family: Inter, sans-serif;
    font-size: .875rem;
  }

  .searchable__indicator-separator, .idiom__indicator-separator {
    display: none;
  }

  @media (min-width: 1200px) {
    .searchable__menu {
      box-sizing: border-box;
      width: max-content;
      min-width: 100%;
    }

    .searchable__option {
      white-space: nowrap;
    }

    .searchable__menu-list {
      max-height: 200px;
      overflow-y: auto;
    }
  }

  .header-menu-item + .header-menu-item {
    border-style: solid;
    border-width: 1px 0 0;
    border-image: linear-gradient(90deg, transparent, var(--gray-lightest), transparent) 1;
  }

  .header-popover[data-state="open"][data-side="top"] {
    animation: .3s cubic-bezier(.16, 1, .3, 1) slideDownAndFade;
  }

  .header-popover[data-state="open"][data-side="right"] {
    animation: .3s cubic-bezier(.16, 1, .3, 1) slideLeftAndFade;
  }

  .header-popover[data-state="open"][data-side="bottom"] {
    animation: .3s cubic-bezier(.16, 1, .3, 1) slideUpAndFade;
  }

  .header-popover[data-state="open"][data-side="left"] {
    animation: .3s cubic-bezier(.16, 1, .3, 1) slideRightAndFade;
  }

  @media (max-width: 900px) {
    .header-center-logo {
      justify-content: flex-start;
      margin: 0;
      position: static;
      transform: none;
    }
  }

  @media (max-width: 600px) {
    .header-center-logo img {
      display: none;
    }
  }

  .log-report-page .react-tagsinput-input {
    height: 24px;
  }

  .log-report-page .filter-container {
    background-color: var(--card-bg);
    width: 100%;
    max-height: 250px;
    color: var(--text-primary);
    border-radius: 4px;
    padding: 0;
    overflow: hidden auto;
    box-shadow: 1px 1px 6px #0000002d;
  }

  .log-report-page .filter-item-content, .log-report-page .filter-link-content {
    border: 1px solid #0003;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    min-height: 50px;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .log-report-page .filter-item-content {
    background-color: var(--card-bg-secondary);
  }

  .log-report-page .filter-link-content {
    background-color: #ffa5001a;
    max-width: 30%;
  }

  .log-report-page .delete-filter-btn {
    color: #ca0b00;
    background: #ca0b0033;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 16px;
    display: flex;
  }

  .log-report-page .delete-filter-btn:hover {
    filter: brightness(.8);
  }

  .report-dialog .fd-dialog__content {
    width: min(75%, 100vw - 2rem);
  }

  .project-planning-dialog .fd-dialog__content {
    width: min(50%, 100vw - 2rem);
    max-height: min(70dvh, 100dvh - 2rem);
  }

  .project-resource-planning-dialog .fd-dialog__content {
    width: min(920px, 100vw - 2rem);
    max-height: min(82dvh, 100dvh - 2rem);
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .project-resource-planning-dialog .fd-dialog__header, .project-resource-planning-dialog .fd-dialog__body, .project-resource-planning-dialog .fd-dialog__footer {
    border-color: var(--card-border) !important;
    background: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .project-resource-planning-dialog .fd-dialog__body {
    overflow: auto;
    padding: 1rem 1.25rem !important;
  }

  .project-resource-history-dialog .fd-dialog__content {
    width: min(920px, 100vw - 2rem);
    max-height: min(82dvh, 100dvh - 2rem);
  }

  .project-resource-history-dialog .fd-dialog__body {
    overflow: auto;
  }

  .project-resource-history-dialog__body {
    flex-direction: column;
    gap: 1rem;
    display: flex;
    padding: 1rem !important;
  }

  .project-resource-history-form {
    grid-template-columns: minmax(150px, .9fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: .75rem;
    display: grid;
  }

  .project-resource-history-form__field, .project-resource-history-form__action {
    min-width: 0;
  }

  .project-resource-history-form__action button {
    min-height: 40px;
  }

  .project-resource-history-table {
    min-width: 0;
  }

  @media (max-width: 900px) {
    .project-planning-dialog .fd-dialog__content, .project-resource-planning-dialog .fd-dialog__content, .project-resource-history-dialog .fd-dialog__content {
      width: calc(100vw - 2rem);
    }

    .project-resource-history-form {
      grid-template-columns: 1fr 1fr;
    }

    .project-resource-history-form__action {
      grid-column: 1 / -1;
    }
  }

  .project-summary-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
    display: grid;
  }

  .project-summary-card-info {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    text-align: center;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 4.25rem;
    padding: .75rem;
    display: flex;
  }

  .project-summary-card-info span {
    color: var(--text-secondary);
    padding: 0;
  }

  .project-summary-card-info strong {
    color: var(--text-primary);
    overflow-wrap: anywhere;
    max-width: 100%;
    font-size: 1.45rem;
    line-height: 1.1;
  }

  .project-resource-planning-form {
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    display: flex;
    overflow: visible;
  }

  .project-resource-planning-header {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    align-items: end;
    gap: 1rem;
    display: grid;
  }

  .project-resource-planning-meta {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    padding: .9rem;
    display: flex;
  }

  .project-resource-planning-resource {
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 800;
    overflow: hidden;
  }

  .project-resource-planning-rates {
    color: var(--text-secondary);
    flex-wrap: wrap;
    gap: .5rem 1rem;
    font-size: .85rem;
    display: flex;
  }

  .project-resource-planning-rates span, .project-resource-planning-rates strong {
    color: inherit;
  }

  .project-resource-planning-rates strong {
    color: var(--text-primary);
  }

  .project-resource-planning-action {
    min-width: 0;
  }

  .project-resource-planning-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    display: grid;
  }

  .project-resource-planning-action-row .fd-button, .project-resource-planning-action-row button {
    min-width: 9rem;
    min-height: 40px;
  }

  .project-resource-planning-table {
    min-width: 0;
    overflow: visible;
  }

  .project-resource-planning-table .responsive-table-frame {
    max-height: 320px;
    overflow: hidden !important;
  }

  .project-resource-planning-table .responsive-table-frame > div {
    max-height: 320px;
    overflow-x: auto;
    overflow-y: auto !important;
  }

  .project-resource-planning-table .responsive-table-header {
    z-index: 2;
    position: sticky;
    top: 0;
  }

  .project-resource-week-hours {
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    display: grid;
  }

  .project-resource-week-hours input {
    min-width: 0;
  }

  .project-resource-week-hours .fd-button, .project-resource-week-hours button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  @media (max-width: 900px) {
    .project-summary-card {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-details-profile-grid {
      grid-template-columns: 1fr;
    }

    .user-details-photo-panel {
      align-items: flex-start;
    }

    .user-details-photo-panel .form-item, .user-details-photo-panel .fd-form-item {
      width: auto;
    }

    .user-details-grid--identity, .user-details-grid--access, .user-details-grid--personal {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .project-resource-planning-header, .project-resource-history-form, .project-resource-planning-action-row {
      grid-template-columns: 1fr;
    }

    .project-resource-planning-action-row .fd-button, .project-resource-planning-action-row button {
      width: 100%;
    }
  }

  @media (max-width: 560px) {
    .project-summary-card {
      grid-template-columns: 1fr;
    }

    .user-details-card, .content-bg.user-details-card {
      padding: 1rem;
    }

    .user-details-grid--identity, .user-details-grid--access, .user-details-grid--personal {
      grid-template-columns: 1fr;
    }

    .user-details-photo-panel {
      align-items: center;
    }
  }

  .report-section {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
  }

  .project-follow-up-filter {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .project-follow-up-filter {
      background: color-mix(in srgb, var(--card-bg), transparent 10%);
    }
  }

  .project-follow-up-filter {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    display: flex;
  }

  .project-follow-up-filter__hint {
    color: var(--text-secondary);
    font-size: .92rem;
  }

  .project-follow-up-filter sup {
    color: var(--danger);
    font-size: 1em;
  }

  .project-follow-up-filter__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    display: grid;
  }

  .project-follow-up-filter .date-picker-container .fd-input-group--control {
    height: 40px;
    min-height: 40px;
  }

  .detachment-report-filter-grid {
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    align-items: start;
    gap: 1rem 1.5rem;
    display: grid;
  }

  .detachment-report-filter-grid > * {
    min-width: 0;
  }

  .detachment-report-filter-grid .tp-select, .detachment-report-filter-grid .tp-select__control, .detachment-report-filter-grid .input-container, .detachment-report-filter-grid input[type="date"], .detachment-report-filter-grid select {
    width: 100%;
  }

  .project-follow-up-results {
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    display: flex;
  }

  .report-section strong {
    color: var(--text-primary);
    text-shadow: 1px 1px 1px #00000080;
  }

  .report-title {
    width: 100%;
    height: 100%;
    color: var(--text-primary-reverse);
    text-align: center;
    text-shadow: 1px 1px 1px #00000080;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 1.2em;
  }

  .report-card {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    align-items: center;
    width: 100%;
    padding: 0;
    overflow: hidden;
    box-shadow: 1px 1px 8px #00000080;
  }

  .report-card__header {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr) auto;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    display: grid;
  }

  .report-card__details, .report-card__dates {
    gap: .45rem;
    min-width: 0;
    display: grid;
  }

  .report-card__details p, .report-card__dates p {
    color: var(--text-primary);
    overflow-wrap: anywhere;
    margin: 0;
    line-height: 1.35;
  }

  .report-card__actions {
    justify-content: flex-end;
    display: flex;
  }

  .report-card__separator {
    border-color: var(--card-border);
    margin: 0;
  }

  .payroll-details-header {
    grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
    align-items: stretch;
  }

  .payroll-details-grid {
    border: 1px solid var(--summary-border);
    background: var(--summary-bg);
    border-radius: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    padding: 1rem;
  }

  .payroll-details-grid__wide {
    grid-column: 1 / -1;
  }

  .payroll-contract-summary {
    min-width: 0;
  }

  .payroll-contract-summary .responsive-table-frame {
    height: 100%;
  }

  .payroll-users-table {
    padding: 1rem;
  }

  .project-follow-up-tabs, .project-follow-up-inner-tabs, .project-follow-up-summary-tabs {
    border-radius: 4px;
    min-width: 0;
  }

  .project-follow-up-tabs__body, .project-follow-up-inner-tabs__body, .project-follow-up-summary-tabs__body {
    min-width: 0;
    padding: 0;
  }

  .project-follow-up-tabs__actions {
    justify-content: flex-end;
    display: flex;
  }

  .project-follow-up-tabs__content, .project-follow-up-tab-panel {
    min-width: 0;
  }

  .project-follow-up-tab-panel {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    display: flex;
  }

  .project-follow-up-hour-extract {
    padding: 16px;
  }

  .project-follow-up-tab-panel table th, .project-follow-up-tab-panel table td {
    border-bottom: 1px solid var(--list-cell-border);
    vertical-align: middle;
    text-align: left;
    padding: .45rem .75rem;
    line-height: 1.35;
  }

  .project-follow-up-tab-panel table th {
    color: var(--text-secondary-w);
    white-space: nowrap;
    font-weight: 700;
  }

  .project-follow-up-tab-panel table td {
    color: var(--text-primary-w);
  }

  .project-follow-up-tab-panel table tbody tr:hover {
    background: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .project-follow-up-tab-panel table tbody tr:hover {
      background: color-mix(in srgb, var(--secondary), transparent 92%);
    }
  }

  .project-follow-up-tab-panel table tfoot td {
    border-top: 1px solid var(--list-border);
    background: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .project-follow-up-tab-panel table tfoot td {
      background: color-mix(in srgb, var(--card-bg), black 8%);
    }
  }

  .project-follow-up-tab-panel table tfoot td {
    font-weight: 700;
  }

  .project-follow-up-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    display: grid;
  }

  .project-follow-up-card-grid__item {
    min-width: 0;
  }

  .project-follow-up-chart {
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
    display: flex;
  }

  .project-follow-up-chart__canvas {
    width: 100%;
    min-height: 320px;
  }

  .project-follow-up-chart__button {
    align-self: flex-start;
  }

  .report-dropdown-button:not(.inline-flex) {
    cursor: pointer;
    background: var(--primary);
    height: 2.55rem;
    color: var(--text-primary-reverse);
    border: 1px solid #0000;
    border-radius: 4px;
    outline: 0;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    padding: 0 .8rem;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
  }

  .report-dropdown-button:not(.inline-flex):not(:disabled):hover {
    filter: brightness(1.2);
  }

  .report-dropdown-button:not(.inline-flex):disabled {
    cursor: not-allowed;
    opacity: .7;
  }

  .report-dropdown-content {
    z-index: 30;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    min-width: 220px;
    padding: .25rem;
    overflow: hidden;
    box-shadow: 0 12px 30px #00000038;
  }

  .report-dropdown-item {
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--card-bg);
    min-height: 36px;
    color: var(--text-primary);
    border-radius: 4px;
    outline: none;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem .65rem;
    font-size: 14px;
    line-height: 1.2;
    display: flex;
  }

  .report-dropdown-item:hover {
    background-color: var(--gray);
  }

  .report-dropdown-item .RightSlot {
    margin: 0;
    display: inline-flex;
  }

  .dashboard-profile-card {
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    min-width: 216px;
    height: 100%;
    min-height: 200px;
    color: var(--text-primary);
    border-radius: 4px;
    flex-direction: column;
    padding: .9rem;
    display: flex;
    overflow: hidden;
    box-shadow: 0 2px 16px #0000001a;
  }

  .dashboard-profile-card-content {
    flex-direction: row;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
    min-height: 0;
    display: flex;
  }

  .dashboard-profile-card-icon {
    aspect-ratio: 1;
    width: 72px;
    color: var(--text-primary);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .dashboard-profile-card-title {
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 0 .75rem;
    display: flex;
  }

  .dashboard-profile-card-title h6 {
    color: var(--text-secondary);
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .dashboard-profile-card-value {
    justify-content: center;
    align-items: center;
    min-width: 0;
    display: flex;
  }

  .dashboard-profile-card-value h1 {
    color: var(--text-primary);
    text-align: center;
    overflow-wrap: anywhere;
    margin: 0;
    font-size: clamp(1.9rem, 2.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
  }

  .dashboard-profile-chart-card, .dashboard-profile-table-card {
    justify-content: stretch;
    align-items: stretch;
    padding-top: 0;
  }

  .dashboard-profile-chart {
    width: 100%;
    height: 100%;
    min-height: 250px;
  }

  .dashboard-profile-table {
    width: 100%;
    min-width: 0;
    overflow: auto;
  }

  .dashboard-profile-gender {
    grid-template-columns: minmax(52px, .75fr) minmax(150px, 1.5fr) minmax(52px, .75fr);
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-width: 0;
    display: grid;
  }

  .dashboard-profile-gender-icons {
    justify-content: center;
    align-items: end;
    gap: 1rem;
    min-width: 0;
    display: flex;
  }

  .dashboard-profile-gender-icon {
    color: var(--text-primary);
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }

  .dashboard-profile-gender-icon span {
    display: inline-flex;
    position: absolute;
    inset: 0 auto auto 0;
    overflow: hidden;
  }

  .dashboard-profile-gender-metric {
    min-width: 0;
    color: var(--text-primary);
    flex-direction: column;
    gap: .25rem;
    display: flex;
  }

  .dashboard-profile-gender-metric strong {
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    line-height: 1;
  }

  .dashboard-profile-gender-metric span {
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 600;
  }

  @media (max-width: 640px) {
    .dashboard-profile-card {
      min-width: 0;
      min-height: 180px;
      padding: .75rem;
    }

    .dashboard-profile-gender {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .dashboard-profile-gender-metric {
      text-align: center;
    }
  }

  .budget-summary-legend {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-legend {
      background: color-mix(in srgb, var(--card-bg), white 2%);
    }
  }

  .budget-summary-legend {
    color: var(--text-primary-reverse);
    padding: .9rem 1rem;
  }

  .budget-summary-legend__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: .65rem;
    display: grid;
  }

  .budget-summary-legend__header h5 {
    min-width: 0;
    color: var(--text-primary);
    text-align: left;
    margin: 0;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .budget-summary-legend__header strong {
    color: var(--text-primary);
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
  }

  .budget-summary-legend__progress {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    border-radius: 999px;
    width: 100%;
    height: 8px;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-legend__progress {
      background: color-mix(in srgb, var(--card-bg-secondary), black 8%);
    }
  }

  .budget-summary-legend__progress-value {
    border-radius: inherit;
    background: var(--secondary);
    height: 100%;
    box-shadow: 0 0 16px var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-legend__progress-value {
      box-shadow: 0 0 16px color-mix(in srgb, var(--secondary), transparent 45%);
    }
  }

  .budget-summary-legend > div {
    align-items: center;
    font-size: 14px;
  }

  .budget-summary-progress {
    border: 1px solid var(--card-border);
    justify-content: flex-start;
    align-items: center;
    width: 110px;
    height: 24px;
    display: flex;
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-progress {
      border: 1px solid color-mix(in srgb, var(--card-border), black 30%);
    }
  }

  .budget-summary-progress {
    background: var(--card-bg);
    border-radius: 4px;
  }

  .budget-summary-progress-value {
    background: var(--secondary);
    text-align: center;
    border-radius: 4px;
    width: 0;
    height: 100%;
    animation: 3s forwards budgetProgressLoad;
    box-shadow: 0 10px 32px -16px #00000073;
  }

  .budget-summary-progress-value:after {
    content: attr(data-percentage);
    width: 100%;
    color: var(--text-primary-reverse);
    text-align: center;
    font-size: .8em;
    font-weight: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @keyframes budgetProgressLoad {
    0% {
      width: 0;
    }

    100% {
      width: var(--budget-progress-width);
    }
  }

  .budget-summary-badge {
    border: 1px solid var(--budget-badge-border);
    background-color: var(--budget-badge-bg);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 110px;
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-badge {
      background-color: color-mix(in srgb, var(--budget-badge-bg), var(--card-bg) 58%);
    }
  }

  .budget-summary-badge {
    color: var(--text-primary);
    padding: .2rem .4rem;
    font-size: .82em;
    font-weight: 600;
  }

  .budget-summary-badge > span {
    width: 100%;
    min-width: 0;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
  }

  .budget-summary-badge svg {
    stroke: currentColor;
    width: 16px;
    height: 16px;
    position: absolute;
    right: .4rem;
  }

  .budget-summary-indicator-body .green {
    background-color: var(--green);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-indicator-body .green {
      background-color: color-mix(in srgb, var(--green), transparent 78%);
    }
  }

  .budget-summary-indicator-body .green {
    color: var(--text-primary-w);
  }

  .budget-summary-indicator-body .yellow {
    background-color: var(--yellow);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-indicator-body .yellow {
      background-color: color-mix(in srgb, var(--yellow), transparent 82%);
    }
  }

  .budget-summary-indicator-body .yellow {
    color: var(--text-primary-w);
  }

  .budget-summary-indicator-body .red {
    background-color: var(--red);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-indicator-body .red {
      background-color: color-mix(in srgb, var(--red), transparent 82%);
    }
  }

  .budget-summary-indicator-body .red {
    color: var(--text-primary-w);
  }

  .budget-summary-indicator-body .blue {
    background-color: var(--blue);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .budget-summary-indicator-body .blue {
      background-color: color-mix(in srgb, var(--blue), transparent 78%);
    }
  }

  .budget-summary-indicator-body .blue {
    color: var(--text-primary-w);
  }

  .budget-summary-indicator-body .progress.has-label {
    position: relative;
  }

  .budget-summary-indicator-body .progress-label {
    z-index: 2;
    color: var(--text-primary);
    pointer-events: none;
    place-items: center;
    font-size: 1.4em;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .budget-summary-indicator-body .progress-bar {
    z-index: 1;
    overflow: hidden;
  }

  .progress-bar__value {
    background-color: var(--text-primary);
    box-shadow: 0 10px 40px -10px var(--text-primary);
  }

  .progress-bar--over-limit .progress-bar__value {
    background-color: var(--color-danger);
    box-shadow: 0 10px 40px -10px var(--color-danger);
  }

  .progress-bar__label {
    color: var(--text-primary);
  }

  .progress-bar__label--fill {
    z-index: 2;
    color: var(--card-bg);
  }

  .progress-bar--over-limit .progress-bar__label--fill {
    color: var(--text-primary-reverse);
    text-shadow: 0 1px 2px #000000bf;
  }

  .progress-bar__label--track {
    z-index: 1;
  }

  .weekly-planning-filters-nav {
    gap: .5rem;
    display: flex;
  }

  .weekly-planning-filters-nav .filter-link {
    border: 1px solid var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .weekly-planning-filters-nav .filter-link {
      border: 1px solid color-mix(in srgb, var(--button-border), transparent 50%);
    }
  }

  .weekly-planning-filters-nav .filter-link {
    color: var(--text-primary);
    border-radius: 4px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .weekly-planning-filters-nav .filter-link {
      color: color-mix(in srgb, var(--text-primary), transparent 50%);
    }
  }

  .weekly-planning-filters-nav .filter-link {
    padding: .25rem .45rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }

  .weekly-planning-filters-nav .filter-link:hover {
    border-color: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .weekly-planning-filters-nav .filter-link:hover {
      border-color: color-mix(in srgb, var(--button-bg), white 10%);
    }
  }

  .weekly-planning-filters-nav .filter-link:hover {
    background-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .weekly-planning-filters-nav .filter-link:hover {
      background-color: color-mix(in srgb, var(--button-border), white 10%);
    }
  }

  .weekly-planning-filters-nav .filter-link.active {
    border-color: var(--button-border);
    background-color: var(--button-bg);
    color: var(--text-primary);
  }

  .weekly-planning-form__actions {
    align-self: start;
    padding-top: 26px;
  }

  .weekly-planning-form__actions button {
    width: 100%;
  }

  @media (min-width: 1280px) {
    .weekly-planning-form__actions button {
      width: auto;
    }
  }

  .weekly-planning-grid {
    align-items: stretch;
    gap: 16px;
    padding-bottom: .5rem;
    display: grid;
    overflow-x: auto;
  }

  .weekly-planning-list {
    border: 1px solid var(--list-border);
    background-color: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 0;
    display: flex;
    overflow: hidden;
    box-shadow: 0 2px 4px #0000001a;
  }

  .weekly-planning-list--holiday {
    background-color: var(--list-color);
  }

  .weekly-planning-list .list-header {
    border-bottom: 1px solid var(--button-border);
    width: 100%;
    color: var(--text-primary);
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: .45rem .6rem;
    font-weight: 700;
  }

  .weekly-planning-list .list-header h6 {
    white-space: normal;
    margin: 0;
    font-size: .78rem;
    line-height: 1.25;
  }

  .weekly-planning-list .list-body {
    flex-direction: column;
    flex: 1;
    gap: .75rem;
    width: 100%;
    min-width: 200px;
    padding: .75rem;
    display: flex;
    overflow: auto;
  }

  .weekly-planning-list .list-body > p {
    color: var(--text-primary);
    border-radius: 4px;
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .weekly-planning-list .list-footer {
    width: 100%;
    padding: 0 .75rem .75rem;
  }

  .planning-card {
    border: 1px solid var(--button-border);
    flex-direction: column;
    min-height: 138px;
    display: flex;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .planning-card {
      border: 1px solid color-mix(in srgb, var(--button-border), transparent 55%);
    }
  }

  .planning-card {
    border-left: 6px solid var(--planning-card-accent, var(--button-border));
    background-color: var(--planning-card-bg, var(--card-bg-secondary));
    border-radius: 4px;
    padding: .75rem;
    transition: box-shadow .3s, transform .3s;
    box-shadow: 0 2px 8px #0000001a;
  }

  .planning-card:hover {
    border-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .planning-card:hover {
      border-color: color-mix(in srgb, var(--button-border), white 8%);
    }
  }

  .planning-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #00000026;
  }

  .planning-card__header {
    border-bottom: 1px solid var(--button-border);
    padding-bottom: .5rem;
  }

  .planning-card__title {
    color: var(--planning-card-text, var(--text-primary));
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
  }

  .planning-card__subtitle {
    color: var(--planning-card-subtext, var(--text-secondary));
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
  }

  .planning-card__content {
    flex: 1;
    padding: .65rem 0;
    overflow-y: auto;
  }

  .planning-card__text {
    color: var(--planning-card-text, var(--text-primary));
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .planning-card__footer {
    border-top: 1px solid var(--button-border);
    gap: 8px;
    padding-top: .5rem;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .planning-card__footer {
      border-top: 1px solid color-mix(in srgb, var(--button-border), transparent 40%);
    }
  }

  .weekly-planning-list .progress-bar {
    background-color: var(--card-bg-secondary);
    border-color: #6b7280;
    min-height: 1.45rem;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .weekly-planning-list .progress-bar {
      background-color: color-mix(in srgb, var(--card-bg-secondary), black 8%);
    }
  }

  .weekly-planning-list .progress-bar__value {
    border-radius: 4px;
    height: 100%;
    background-color: var(--text-primary) !important;
    box-shadow: none !important;
  }

  .weekly-planning-list .progress-bar--over-limit .progress-bar__value {
    background-color: var(--color-danger) !important;
  }

  .weekly-planning-list .progress-bar__label {
    text-shadow: none;
    font-weight: 800;
    color: var(--text-primary) !important;
  }

  .weekly-planning-list .progress-bar__label--fill {
    color: var(--card-bg) !important;
  }

  .weekly-planning-list .progress-bar--over-limit .progress-bar__label--fill {
    text-shadow: 0 1px 2px #000000bf;
    color: var(--text-primary-reverse) !important;
  }

  .planning-card__criticality-badge .TooltipTrigger {
    all: unset;
  }

  .planning-card__criticality-badge svg {
    width: 16px;
    height: 16px;
    color: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .planning-card__criticality-badge svg {
      color: color-mix(in srgb, var(--danger), black 20%);
    }
  }

  .weekly-planning-avatar-card {
    border: 1px solid var(--list-border);
    background-color: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 0;
    padding: .75rem;
    display: flex;
    overflow: hidden;
    box-shadow: 0 2px 4px #0000001a;
  }

  .weekly-planning-avatar-card__content {
    text-align: center;
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-width: 0;
    display: flex;
  }

  .weekly-planning-avatar-card__avatar {
    margin-bottom: .25rem;
  }

  .weekly-planning-avatar-card .consultant-name, .weekly-planning-avatar-card .consultant-role {
    overflow-wrap: anywhere;
    width: 100%;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
  }

  .weekly-planning-avatar-card .consultant-name {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .weekly-planning-avatar-card .consultant-role {
    color: var(--text-secondary);
    font-size: .85rem;
    line-height: 1.25;
  }

  .weekly-planning-avatar-card dl {
    border-top: 1px solid var(--button-border);
    width: 100%;
    color: var(--text-primary);
    text-align: left;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .5rem;
    margin: .35rem 0 0;
    padding-top: .65rem;
    display: grid;
  }

  .weekly-planning-avatar-card dt {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .weekly-planning-avatar-card dd {
    text-align: right;
    flex: none;
    margin: 0;
    font-size: .82rem;
    line-height: 1.2;
  }

  .weekly-planning-avatar-card__footer {
    width: 100%;
    padding-top: .75rem;
  }

  .weekly-planning-avatar-card .progress-bar {
    background-color: var(--card-bg-secondary);
    border-color: #6b7280;
    min-height: 1.45rem;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .weekly-planning-avatar-card .progress-bar {
      background-color: color-mix(in srgb, var(--card-bg-secondary), black 8%);
    }
  }

  .weekly-planning-avatar-card .progress-bar__value {
    border-radius: 4px;
    height: 100%;
    background-color: var(--text-primary) !important;
    box-shadow: none !important;
  }

  .weekly-planning-avatar-card .progress-bar--over-limit .progress-bar__value {
    background-color: var(--color-danger) !important;
  }

  .weekly-planning-avatar-card .progress-bar__label {
    text-shadow: none;
    font-weight: 800;
    color: var(--text-primary) !important;
  }

  .weekly-planning-avatar-card .progress-bar__label--fill {
    color: var(--card-bg) !important;
  }

  .weekly-planning-avatar-card .progress-bar--over-limit .progress-bar__label--fill {
    text-shadow: 0 1px 2px #000000bf;
    color: var(--text-primary-reverse) !important;
  }

  .weekly-planning-dialog .fd-dialog__content {
    width: min(720px, 100vw - 2rem);
    overflow: visible;
  }

  .weekly-planning-update-form {
    gap: 1rem;
    display: grid;
  }

  .weekly-planning-update-form .react-datepicker-wrapper {
    width: 100%;
  }

  .login-page {
    background-color: var(--login-bg);
    grid-template-columns: 1.8fr 1fr;
    width: 100vw;
    height: 100vh;
    padding: 24px;
    display: grid;
  }

  .login-page .custom-select-language {
    width: auto;
    min-width: 8rem;
  }

  .login-page .custom-select-language .idiom__control {
    height: auto;
    min-height: auto;
    box-shadow: none;
    background: none;
    border: none;
    padding: 0;
  }

  .login-page .custom-select-language .idiom__single-value {
    color: inherit;
  }

  .login-page .custom-select-language .idiom__indicator-separator {
    display: none;
  }

  .login-page .custom-select-language .idiom__dropdown-indicator {
    padding: 0;
  }

  .login-image-content {
    background-blend-mode: overlay;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .login-image-content .tech, .login-image-content .pro {
    color: var(--text-primary-reverse);
    font-size: 60px;
  }

  .login-form-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
    display: flex;
    position: relative;
  }

  .login-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 700;
  }

  .login-forgot-password {
    cursor: pointer;
    font-size: .85rem;
    text-decoration: underline;
  }

  .login-forgot-password:hover {
    color: var(--primary);
  }

  .login-divider {
    background-color: var(--button-border);
    width: 75%;
    height: 1px;
    margin: 0;
  }

  .login-copyright {
    color: var(--text-secondary);
    font-size: .85rem;
  }

  .login-theme-switch {
    position: absolute;
    top: 0;
    right: 0;
  }

  .login-show-password-button {
    background: none;
    border: 0;
    outline: 0;
    font-size: 0;
  }

  .login-recover-dialog .fd-dialog__content {
    width: min(500px, 100vw - 2rem);
  }

  .user-dashboard-header {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    display: flex;
  }

  .user-dashboard-page {
    width: 100%;
    padding: 1rem;
  }

  .user-dashboard-title {
    color: var(--text-primary);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
  }

  .user-dashboard-actions {
    flex-shrink: 0;
    align-items: center;
    gap: .5rem;
    display: flex;
  }

  .user-dashboard-grid {
    grid-template-columns: minmax(280px, .32fr) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    display: grid;
  }

  .user-dashboard-sidebar, .user-dashboard-main {
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    display: flex;
  }

  .user-dashboard-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    display: grid;
  }

  .user-dashboard-card-info {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    align-items: stretch;
    height: fit-content;
    padding: 1rem;
    display: flex;
    box-shadow: 0 2px 12px #00000014;
  }

  .user-dashboard-card-title {
    color: var(--text-primary);
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .user-dashboard-user {
    text-align: center;
    margin: .75rem 0 1rem;
  }

  .user-dashboard-user-name {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .user-dashboard-user-department {
    color: var(--text-secondary);
    margin: .2rem 0 0;
    font-size: .9rem;
  }

  .user-dashboard-user-infos {
    width: 100%;
    color: var(--text-secondary);
    flex-direction: column;
    gap: .45rem;
    margin: 0;
    font-size: .9rem;
    display: flex;
  }

  .user-dashboard-user-infos span {
    overflow-wrap: anywhere;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    display: flex;
  }

  .user-dashboard-user-icon {
    color: var(--text-primary);
    flex: none;
    margin: 0;
    font-size: .95em;
  }

  .user-dashboard-feed-dialog .fd-dialog__content {
    border: 1px solid var(--card-border);
    background: var(--modal-body-bg);
    border-radius: 4px;
    flex-direction: column;
    gap: 1.15rem;
    width: min(720px, 100vw - 2rem);
    padding: 1.35rem;
    display: flex;
  }

  .user-dashboard-feed-dialog .fd-dialog__content > header {
    font-size: 1rem;
    font-weight: 700;
  }

  .user-dashboard-feed-dialog .fd-dialog__content > div {
    width: 100%;
  }

  .user-dashboard-feed-dialog .fd-dialog__content > footer {
    border-top: 1px solid var(--card-border);
    width: 100%;
    padding-top: .95rem;
  }

  .user-dashboard-feed-dialog .fd-dialog__content > footer > div {
    justify-content: flex-end;
    gap: .55rem;
  }

  .user-dashboard-feedback-panel .fd-panel, .user-dashboard-layout-panel {
    box-shadow: none;
    background: none;
    border: 0;
  }

  .user-dashboard-layout-panel .fd-panel__body {
    max-height: 520px;
    overflow-y: auto;
  }

  .user-dashboard-feedback-panel .user-dashboard-card-info {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
  }

  .user-dashboard-tabs {
    border: 1px solid var(--card-border);
    border-radius: 4px;
    min-width: 0;
    padding: .65rem;
  }

  .user-dashboard-tabs .fd-tabs, .user-dashboard-tabs .fd-tabs__content, .user-dashboard-tabs .fd-tabs__panel, .user-dashboard-tabs .fd-tabs__list {
    min-width: 0;
    background: none !important;
  }

  .user-dashboard-tabs .fd-tabs__list {
    border-bottom: 1px solid var(--card-border);
    gap: .7rem;
    margin-bottom: .65rem;
    padding: 0;
    display: flex;
  }

  .user-dashboard-tabs .fd-tabs__item, .user-dashboard-tabs .fd-tabs__link, .user-dashboard-tabs .fd-tabs__tag {
    min-height: 34px !important;
    color: var(--text-secondary) !important;
    background: none !important;
    border: 0 !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  .user-dashboard-tabs .fd-tabs__link {
    border-bottom: 2px solid #0000 !important;
    padding: 0 .45rem !important;
  }

  .user-dashboard-tabs .fd-tabs__link:hover, .user-dashboard-tabs .fd-tabs__link:focus {
    color: var(--text-primary) !important;
    box-shadow: none !important;
    background: none !important;
    outline: none !important;
  }

  .user-dashboard-tabs .fd-tabs__tag:after {
    display: none !important;
  }

  .user-dashboard-tabs .fd-tabs__link.is-selected, .user-dashboard-tabs .fd-tabs__link[aria-selected="true"] {
    border-bottom-color: var(--secondary) !important;
    color: var(--text-primary) !important;
  }

  .user-dashboard-tabs .fd-tabs__link.is-selected .fd-tabs__tag, .user-dashboard-tabs .fd-tabs__link[aria-selected="true"] .fd-tabs__tag {
    color: var(--text-primary) !important;
  }

  .user-dashboard-scroll-area {
    width: 100%;
    max-height: 370px;
    padding-right: .25rem;
    overflow-y: auto;
  }

  .absence-card-item {
    border-bottom: 1px solid var(--card-border);
    width: 100%;
    padding: .75rem 0;
  }

  .absence-card-item:first-child {
    padding-top: 0;
  }

  .absence-card-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .absence-card-period {
    color: var(--text-primary);
    border-bottom: 1px solid var(--card-border);
    margin: 0 0 .65rem;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .absence-card-period {
      border-bottom: 1px solid color-mix(in srgb, var(--card-border), white 12%);
    }
  }

  .absence-card-period {
    padding-bottom: .5rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .absence-card-row {
    grid-template-columns: minmax(112px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .82rem;
    display: grid;
  }

  .absence-card-label {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .absence-card-tag {
    background: var(--secondary);
    border-radius: 4px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .absence-card-tag {
      background: color-mix(in srgb, var(--secondary), white 82%);
    }
  }

  .absence-card-tag {
    color: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .absence-card-tag {
      color: color-mix(in srgb, var(--secondary), black 12%);
    }
  }

  .absence-card-tag {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .22rem .5rem;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .absence-card-value {
    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 500;
  }

  .absence-card-observation {
    flex-direction: column;
    gap: .4rem;
    margin-top: .65rem;
    display: flex;
  }

  .absence-card-note {
    color: var(--text-secondary);
    border-left: 2px solid var(--card-border);
    background: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .absence-card-note {
      background: color-mix(in srgb, var(--card-bg), var(--card-bg-secondary) 45%);
    }
  }

  .absence-card-note {
    padding: .6rem .75rem;
    font-size: .82rem;
    font-style: italic;
    line-height: 1.4;
  }

  .user-dashboard-progress-cell {
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-width: 150px;
    display: flex;
  }

  .user-dashboard-page .progress-bar__value {
    background-color: var(--secondary);
    box-shadow: none;
  }

  .user-dashboard-page .progress-bar__label {
    color: var(--text-primary);
    text-shadow: 0 1px 1px #00000073;
  }

  .feedback-chat-container {
    border-radius: 4px;
    flex-direction: column;
    gap: .75rem;
    padding: 0;
    display: flex;
  }

  .feedback-empty-state {
    color: var(--text-secondary);
    margin: 0;
    padding: .75rem 0;
    font-size: .9rem;
  }

  .feedback-message-row {
    border: 1px solid var(--feedback-feed-accent);
    justify-content: flex-start;
    width: 100%;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .feedback-message-row {
      border: 1px solid color-mix(in srgb, var(--feedback-feed-accent), transparent 55%);
    }
  }

  .feedback-message-row {
    border-left: 4px solid var(--feedback-feed-accent);
    background-color: var(--feedback-feed-bg);
    border-radius: 4px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .feedback-message-row {
      background-color: color-mix(in srgb, var(--feedback-feed-bg), var(--card-bg) 32%);
    }
  }

  .feedback-message-bubble {
    border-radius: 4px;
    width: 100%;
    padding: .85rem;
  }

  .feedback-message-header {
    border-bottom: 1px solid var(--feedback-feed-accent);
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .feedback-message-header {
      border-bottom: 1px solid color-mix(in srgb, var(--feedback-feed-accent), transparent 70%);
    }
  }

  .feedback-message-header {
    padding-bottom: .65rem;
  }

  .feedback-message-meta {
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    display: flex;
  }

  .feedback-message-author {
    color: var(--text-primary);
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .feedback-message-author {
      color: color-mix(in srgb, var(--text-primary), var(--feedback-feed-text) 18%);
    }
  }

  .feedback-message-author {
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: .75rem;
    font-weight: 500;
  }

  .feedback-message-author span {
    display: block;
  }

  .feedback-message-classification {
    flex: none;
    justify-content: center;
    display: flex;
  }

  .feedback-message-text {
    color: var(--text-primary);
    white-space: pre-wrap;
    margin: .75rem 0 0;
    font-size: .9rem;
    line-height: 1.45;
  }

  .feedback-message-actions {
    border-top: 1px solid var(--feedback-feed-accent);
    justify-content: flex-end;
    margin-top: .75rem;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .feedback-message-actions {
      border-top: 1px solid color-mix(in srgb, var(--feedback-feed-accent), transparent 76%);
    }
  }

  .feedback-message-actions {
    padding-top: .65rem;
  }

  .user-dashboard-feedback-form {
    flex-direction: column;
    gap: 1.1rem;
    padding: 0;
    display: flex;
  }

  .user-dashboard-feedback-form-grid {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    display: grid;
  }

  .user-dashboard-feedback-form-grid > div:first-child {
    max-width: 240px;
  }

  .user-dashboard-feedback-form .form-item, .user-dashboard-feedback-form .fd-form-item {
    margin-bottom: 0;
  }

  .user-dashboard-feedback-description textarea {
    min-height: 88px;
  }

  .user-dashboard-character-count {
    color: var(--text-secondary);
    text-align: right;
    margin-top: .35rem;
    font-size: .8rem;
  }

  .user-dashboard-feed-drawer-body {
    padding: 0 1rem 1rem;
    overflow-y: auto;
  }

  .pill-badges-button {
    min-height: 34px;
    color: var(--text-primary);
    background: none;
    border: 1px solid #0000;
    border-radius: 999px;
    padding: .45rem .8rem;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    transition: border-color .2s, background-color .2s;
  }

  .pill-badges-button[data-selected="true"] {
    border-color: var(--text-primary);
    background: var(--button-bg);
    color: var(--text-primary);
  }

  .user-dashboard-segmented {
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
    display: flex;
  }

  .total-hours-container {
    background: var(--primary);
    color: var(--text-primary-reverse);
    border-radius: 4px;
    padding: 0;
    font-weight: 700;
  }

  .user-dashboard-filter-card {
    gap: 1.25rem !important;
  }

  .user-dashboard-filter-card .container-search-box {
    gap: 1rem;
    margin-bottom: 0;
  }

  .user-dashboard-filter-card .container-search-box > div:first-child {
    align-items: center;
    gap: .75rem;
  }

  .user-dashboard-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    display: grid;
  }

  .user-dashboard-filter-grid--top {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-top: 0;
  }

  .financial-analysis-page {
    min-width: 0;
  }

  .financial-analysis-card {
    gap: 1.5rem !important;
  }

  .financial-analysis-card .container-search-box {
    margin-bottom: 0;
  }

  .financial-analysis-filter-grid {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 1.5rem;
    align-items: start !important;
  }

  .financial-analysis-filter-grid > * {
    min-width: 0;
    min-height: 76px;
  }

  .financial-analysis-filter-grid > * > span:last-child, .financial-analysis-filter-grid .date-picker-container > span:last-child {
    min-height: 16px;
    margin-top: .25rem;
    line-height: 1.2;
    display: block;
  }

  .required-field-marker {
    color: var(--danger);
    margin-left: .25rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
  }

  .financial-analysis-results {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    padding: 1rem;
    display: flex;
    box-shadow: 0 2px 12px #00000014;
  }

  .financial-analysis-results-header {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  .financial-analysis-results-header h2 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .financial-analysis-results-header span {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 500;
  }

  .financial-analysis-table .responsive-table-row {
    min-height: 2.5rem;
  }

  .financial-analysis-table .responsive-table-frame {
    border-color: var(--card-border);
    background: var(--card-bg-secondary);
    border-radius: 4px;
  }

  .financial-analysis-table .responsive-table-header {
    border-bottom: 1px solid var(--card-border);
    min-height: 42px;
    background: var(--card-bg-secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .financial-analysis-table .responsive-table-header {
      background: color-mix(in srgb, var(--card-bg-secondary), black 6%) !important;
    }
  }

  .financial-analysis-table .responsive-table-header {
    color: var(--text-primary);
    font-size: .85rem;
    font-weight: 700;
  }

  .financial-analysis-table .responsive-table-header > div, .financial-analysis-table .responsive-table-header > button {
    padding: .65rem .85rem !important;
  }

  .financial-analysis-table .responsive-table-body {
    gap: 0;
  }

  .financial-analysis-table .responsive-table-row {
    font-size: .86rem;
    font-weight: 500;
    border-color: var(--card-border) !important;
    background: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .financial-analysis-table .responsive-table-row:nth-child(2n) {
    background: var(--card-bg-secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .financial-analysis-table .responsive-table-row:nth-child(2n) {
      background: color-mix(in srgb, var(--card-bg-secondary), var(--card-bg) 45%) !important;
    }
  }

  .financial-analysis-table .responsive-table-cell {
    line-height: 1.35;
    border-color: var(--card-border) !important;
    padding: .65rem .85rem !important;
  }

  .financial-analysis-table .responsive-table-cell > div {
    font-weight: 500;
  }

  .registry-form {
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    display: flex;
  }

  .registry-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 1rem;
    min-width: 0;
    display: grid;
  }

  .registry-form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    min-width: 0;
    display: grid;
  }

  .registry-form-grid--with-action {
    grid-template-columns: minmax(160px, .9fr) minmax(220px, 1fr) minmax(280px, 1.35fr) minmax(150px, .55fr);
  }

  .registry-form-action {
    align-items: flex-end;
    min-width: 0;
    margin-top: 26px;
    display: flex;
  }

  .registry-form-span-2 {
    grid-column: span 2;
  }

  .no-label-button {
    justify-content: flex-start;
    align-items: flex-end;
    min-width: 0;
    display: flex;
  }

  .no-label-button > button, .no-label-button .fd-button, .no-label-button a {
    min-height: 40px;
  }

  .no-label-button.w-full > button, .no-label-button.w-full .fd-button, .no-label-button > .w-full, .no-label-button > .w-full {
    width: 100%;
  }

  .appointment-content {
    --sapSelectedColor: var(--secondary);
    --sapContent_Selected_ForegroundColor: var(--secondary);
    --sapContent_Selected_Hover_Background: transparent;
    min-width: 0;
  }

  .appointment-content .fd-layout-panel {
    border-radius: 4px;
    min-width: 0;
  }

  .appointment-content .fd-layout-panel__body {
    min-width: 0;
    padding: 0;
  }

  .appointment-content .fd-tabs, .appointment-content .fd-tabs__content {
    min-width: 0;
  }

  .appointment-card {
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 4px;
    margin: 0;
    padding: 0;
  }

  .appointment-card h4, .appointment-card p {
    margin: 0;
  }

  .appointment-dialog .fd-dialog__content, .appointment-planning-dialog .fd-dialog__content {
    width: min(50vw, 100vw - 2rem);
  }

  .appoint-calendar-container .fd-calendar__item {
    height: 30px;
  }

  .appoint-total-hours {
    width: 100%;
    color: var(--text-primary);
    text-align: center;
    border-radius: 4px;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
  }

  .appoint-toggle-button {
    width: 100%;
    margin: 0;
  }

  .appoint-grid-container {
    grid-template: "calendar form"
                   "chart appoint" minmax(260px, auto)
                   / minmax(320px, .9fr) minmax(0, 1.6fr);
    align-items: stretch;
    gap: 1rem;
    min-width: 0;
    display: grid;
  }

  .appoint-grid-container .calendar {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    min-width: 0;
    color: var(--text-primary);
    border-radius: 4px;
    grid-area: calendar;
    padding: 0;
    overflow: visible;
  }

  .appoint-grid-container .calendar .inline .react-datepicker, .appoint-grid-container .calendar .inline .react-datepicker__month-container {
    width: 100%;
    height: auto;
  }

  .appoint-grid-container .calendar .inline .react-datepicker {
    display: block;
  }

  .appoint-grid-container .calendar .inline .react-datepicker__week, .appoint-grid-container .calendar .inline .react-datepicker__day-names {
    justify-content: space-between;
    width: 100%;
    height: auto;
    display: flex;
  }

  .appoint-grid-container .calendar .inline .react-datepicker__day-names {
    justify-content: space-around;
    margin: 0;
  }

  .appoint-grid-container .calendar .inline .react-datepicker__day-name:first-letter, .appoint-grid-container .calendar .inline .react-datepicker__current-month:first-letter {
    text-transform: uppercase;
  }

  .appoint-grid-container .calendar .inline .react-datepicker__day {
    flex: 1 1 0;
    width: clamp(2rem, 6vw, 2.5rem);
    height: 2.5rem;
    line-height: 2.35rem;
  }

  .appoint-grid-container .form {
    z-index: 30;
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    min-width: 0;
    color: var(--text-primary);
    border-radius: 4px;
    grid-area: form;
    padding: 0;
    position: relative;
    overflow: visible;
  }

  .appoint-grid-container .appoint {
    z-index: 1;
    position: relative;
  }

  .appointment-content .searchable__menu {
    z-index: 100000;
  }

  .appoint-grid-container .form form {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    display: flex;
  }

  .appointment-form-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr)) minmax(40px, .35fr);
    align-items: start;
    gap: 8px;
    display: grid;
  }

  .appointment-form-grid[data-admin="false"] {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) minmax(40px, .35fr);
  }

  .appointment-form-field, .appointment-form-action, .appointment-notes-field {
    min-width: 0;
  }

  .appointment-notes-field {
    grid-column: 1 / -1;
  }

  .appointment-notes-textarea {
    resize: vertical;
    min-height: 5.5rem;
  }

  .appointment-table {
    z-index: 10;
    position: relative;
  }

  .appointment-table .appointment-edit-field {
    width: 100%;
  }

  .appointment-table .appointment-edit-notes {
    resize: vertical;
    height: 40px;
    min-height: 40px;
    max-height: 8rem;
    margin-bottom: 0;
  }

  .appointment-submit-spacer {
    height: calc(1rem + 8px);
  }

  .appointment-submit-item {
    justify-content: flex-end;
    min-height: 100%;
  }

  .appointment-submit-button {
    width: 100%;
    min-width: 40px;
    height: 40px;
  }

  .appointment-consult-panel {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    border-radius: 4px;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    display: flex;
  }

  .appointment-consult-form {
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    display: flex;
  }

  .appointment-consult-grid {
    grid-template-columns: repeat(16, minmax(0, 1fr));
    align-items: end;
    gap: .75rem;
    display: grid;
  }

  .appointment-consult-grid > * {
    min-width: 0;
  }

  .appointment-consult-user {
    grid-column: span 4;
  }

  .appointment-consult-project {
    grid-column: span 6;
  }

  .appointment-consult-date {
    grid-column: span 3;
  }

  .appointment-consult-grid[data-admin="false"] .appointment-consult-project {
    grid-column: span 8;
  }

  .appointment-consult-grid[data-admin="false"] .appointment-consult-date {
    grid-column: span 4;
  }

  .appointment-consult-actions {
    grid-column: 11 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: .75rem;
    display: grid;
  }

  .appointment-consult-grid[data-admin="false"] .appointment-consult-actions {
    grid-column: 9 / -1;
  }

  .appointment-checkbox-item {
    justify-content: flex-end;
    min-height: 100%;
  }

  .appointment-checkbox-item .fd-checkbox {
    align-items: center;
    min-height: 40px;
  }

  .appointment-checkbox-item .fd-checkbox__label {
    min-width: 1.35rem !important;
    min-height: 1.35rem !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .appointment-checkbox-item .fd-checkbox__label:before {
    border: 1px solid var(--input-border) !important;
    background-color: var(--input-bg) !important;
    width: 1.35rem !important;
    height: 1.35rem !important;
    box-shadow: none !important;
    border-radius: 4px !important;
  }

  .appointment-checkbox-item .fd-checkbox:checked + .fd-checkbox__label:before {
    border-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .appointment-checkbox-item .fd-checkbox + .fd-checkbox__label:after, .appointment-checkbox-item .fd-checkbox:focus + .fd-checkbox__label:after, .appointment-checkbox-item .fd-checkbox:focus-visible + .fd-checkbox__label:after {
    content: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .appointment-checkbox-item .fd-checkbox:focus + .fd-checkbox__label, .appointment-checkbox-item .fd-checkbox:focus-visible + .fd-checkbox__label, .appointment-checkbox-item .fd-checkbox:focus + .fd-checkbox__label:before, .appointment-checkbox-item .fd-checkbox:focus-visible + .fd-checkbox__label:before {
    box-shadow: none !important;
    outline: none !important;
  }

  .appointment-search-item {
    justify-content: flex-end;
    min-height: 100%;
  }

  .appointment-search-item .fd-button, .appointment-search-item button {
    min-height: 40px;
  }

  .appointment-consult-summary {
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    display: flex;
  }

  .appointment-period-actions {
    flex-wrap: wrap;
    gap: .5rem;
    display: flex;
  }

  .appointment-consult-panel .pill-badges-button {
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    min-height: 2.25rem;
    color: var(--text-primary);
    border-radius: 999px;
    padding: 0 .85rem;
    font-size: .8rem;
    font-weight: 700;
  }

  .appointment-consult-panel .pill-badges-button[data-selected="true"] {
    border-color: var(--secondary);
    background: var(--secondary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appointment-consult-panel .pill-badges-button[data-selected="true"] {
      background: color-mix(in srgb, var(--secondary), transparent 82%);
    }
  }

  .appointment-consult-panel .pill-badges-button[data-selected="true"] {
    color: var(--text-primary);
  }

  .appointment-consult-panel .total-hours-container {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    min-height: 2.25rem;
    color: var(--text-primary);
    border-radius: 4px;
    align-items: center;
    padding: 0 .75rem;
    font-weight: 700;
    display: flex;
  }

  .appoint-grid-container .period {
    border: 1px solid var(--card-border);
    flex-direction: column;
    grid-area: period;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .appoint-grid-container .chart {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    min-width: 0;
    color: var(--text-primary);
    border-radius: 4px;
    grid-area: chart;
    padding: 0;
  }

  .appoint-grid-container .appoint {
    grid-area: appoint;
    min-width: 0;
    overflow: visible;
  }

  .appoint-grid-appoint-container {
    gap: 1rem;
    transition: grid-template-columns .3s;
  }

  .appoint-grid-appoint-container .chart {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    border-radius: 4px;
    min-width: 400px;
    padding: 0;
  }

  .appoint-grid-appoint-container .chart form {
    opacity: 1;
    transition: opacity .2s;
  }

  .appoint-grid-appoint-container .appoint-table {
    grid-area: appoint-table;
    min-width: 0;
  }

  .appoint-grid-appoint-container .appoint-table table thead {
    font-size: .975em;
    font-weight: 600;
    line-height: 1.4;
  }

  .appoint-grid-appoint-container .appoint-table table tbody {
    font-size: .9em;
    line-height: 1.4;
  }

  .appoint-grid-appoint-container .appoint-table table tbody tr td {
    padding: 0;
  }

  .appoint-calendar {
    width: 100%;
    padding: 0;
  }

  .appoint-calendar .react-datepicker-wrapper {
    width: 100%;
  }

  .appoint-calendar .react-datepicker-popper {
    z-index: 1050;
    filter: none;
  }

  .appoint-calendar .react-datepicker {
    border-radius: 4px;
    font-family: inherit;
    overflow: hidden;
    box-shadow: 0 12px 28px #00000047;
    border: 1px solid var(--card-border) !important;
    background-color: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .appoint-calendar .react-datepicker__header {
    border-bottom: 1px solid var(--card-border) !important;
    background-color: var(--list-header-bg) !important;
    color: var(--text-primary) !important;
  }

  .appoint-calendar .react-datepicker__day-names, .appoint-calendar .react-datepicker__week {
    background-color: var(--card-bg-secondary) !important;
  }

  .appoint-calendar .react-datepicker__current-month, .appoint-calendar .react-datepicker__day-name {
    color: var(--text-primary) !important;
  }

  .appoint-calendar .react-datepicker__month, .appoint-calendar .react-datepicker__month-container {
    background-color: var(--card-bg-secondary) !important;
  }

  .appoint-calendar .react-datepicker__triangle {
    fill: var(--list-header-bg);
    color: var(--list-header-bg);
    stroke: var(--card-border);
  }

  .appoint-calendar .react-datepicker__year-text, .appoint-calendar .react-datepicker__day {
    border-radius: 4px;
    position: relative;
    color: var(--text-primary) !important;
  }

  .appoint-calendar .react-datepicker__day:hover {
    background-color: var(--button-bg) !important;
    color: var(--button-text) !important;
  }

  .appoint-calendar .react-datepicker__day--selected, .appoint-calendar .react-datepicker__day--range-start, .appoint-calendar .react-datepicker__day--range-end {
    border: 2px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appoint-calendar .react-datepicker__day--selected, .appoint-calendar .react-datepicker__day--range-start, .appoint-calendar .react-datepicker__day--range-end {
      border: 2px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .appoint-calendar .react-datepicker__day--selected, .appoint-calendar .react-datepicker__day--range-start, .appoint-calendar .react-datepicker__day--range-end {
    font-weight: 700;
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .appoint-calendar .react-datepicker__day--keyboard-selected {
    border: 2px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appoint-calendar .react-datepicker__day--keyboard-selected {
      border: 2px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .appoint-calendar .react-datepicker__day--keyboard-selected {
    font-weight: 700;
    background-color: var(--secondary) !important;
    color: var(--text-primary-reverse) !important;
  }

  .appoint-calendar .react-datepicker__day--in-range {
    border: 1px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appoint-calendar .react-datepicker__day--in-range {
      border: 1px solid color-mix(in srgb, var(--secondary), black 12%) !important;
    }
  }

  .appoint-calendar .react-datepicker__day--in-range {
    background-color: var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appoint-calendar .react-datepicker__day--in-range {
      background-color: color-mix(in srgb, var(--secondary), transparent 56%) !important;
    }
  }

  .appoint-calendar .react-datepicker__day--in-range {
    color: var(--text-primary-reverse) !important;
  }

  .appoint-calendar .react-datepicker__day--today {
    border: 2px solid var(--secondary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appoint-calendar .react-datepicker__day--today {
      border: 2px solid color-mix(in srgb, var(--secondary), white 18%) !important;
    }
  }

  .appoint-calendar .react-datepicker__day--today {
    color: var(--text-primary) !important;
  }

  .appoint-calendar .react-datepicker__day-name:first-letter, .appoint-calendar .react-datepicker__current-month:first-letter {
    text-transform: uppercase;
  }

  .appoint-calendar .react-datepicker__navigation {
    line-height: 1.5rem;
    top: 10px;
  }

  .appoint-calendar .react-datepicker__navigation-icon:before {
    border-color: var(--text-primary) !important;
  }

  .appoint-calendar .react-datepicker__navigation:hover {
    filter: brightness(1.15);
  }

  .appoint-calendar .react-datepicker__day--outside-month, .appoint-calendar .react-datepicker__day--disabled {
    color: var(--text-primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appoint-calendar .react-datepicker__day--outside-month, .appoint-calendar .react-datepicker__day--disabled {
      color: color-mix(in srgb, var(--text-primary), transparent 55%) !important;
    }
  }

  .appoint-calendar .green-dot:before, .appoint-calendar .red-dot:before, .appoint-calendar .yellow-dot:before {
    content: "";
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .appoint-calendar .green-dot:before {
    background-color: var(--green);
  }

  .appoint-calendar .red-dot:before {
    background-color: var(--red);
  }

  .appoint-calendar .yellow-dot:before {
    background-color: var(--yellow);
  }

  .appoint-calendar-legend {
    border: 1px solid var(--card-border);
    background: var(--button-bg);
    color: var(--text-primary);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1rem;
  }

  .appoint-calendar-legend div {
    align-items: center;
    font-size: 14px;
    display: flex;
  }

  .appoint-calendar-legend span {
    color: var(--text-primary);
  }

  .appoint-calendar-legend .highlight-green, .appoint-calendar-legend .highlight-yellow, .appoint-calendar-legend .highlight-red {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin: 0;
    display: inline-block;
  }

  .appoint-calendar-legend .highlight-green {
    background-color: var(--green);
  }

  .appoint-calendar-legend .highlight-yellow {
    background-color: var(--yellow);
  }

  .appoint-calendar-legend .highlight-red {
    background-color: var(--red);
  }

  .contact-phone-dialog .fd-dialog__content, .contact-phone-dialog [role="dialog"], .contact-email-dialog .fd-dialog__content, .contact-email-dialog [role="dialog"] {
    width: min(48rem, 100vw - 2rem);
  }

  .contact-phone-dialog .fd-dialog__body, .contact-email-dialog .fd-dialog__body, .contact-phone-dialog [role="dialog"] > div:nth-child(2), .contact-email-dialog [role="dialog"] > div:nth-child(2) {
    max-height: min(72dvh, 100dvh - 9rem);
    padding: 1rem 1.25rem;
    overflow: auto;
  }

  .contact-phone-dialog .fd-dialog__footer, .contact-email-dialog .fd-dialog__footer, .contact-phone-dialog [role="dialog"] > div:last-child, .contact-email-dialog [role="dialog"] > div:last-child {
    padding: .75rem 1rem;
    gap: .5rem !important;
  }

  .contact-phone-dialog .fd-dialog__footer button, .contact-email-dialog .fd-dialog__footer button, .contact-phone-dialog [role="dialog"] > div:last-child button, .contact-email-dialog [role="dialog"] > div:last-child button {
    min-width: 7rem;
    margin: 0 !important;
  }

  .contact-phone-dialog form > div.flex, .contact-email-dialog form > div.flex.flex-col > .flex.flex-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
    align-items: end;
    gap: 1rem 1.25rem;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
  }

  .contact-email-dialog form > div.flex.flex-col {
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }

  .contact-phone-dialog form > div.flex > div, .contact-email-dialog form > div.flex.flex-col > .flex.flex-wrap > div {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .contact-phone-dialog .form-item, .contact-phone-dialog .fd-form-item, .contact-email-dialog .form-item, .contact-email-dialog .fd-form-item {
    width: 100%;
    min-width: 0;
  }

  @media (max-width: 900px) {
    .contact-phone-dialog form > div.flex, .contact-email-dialog form > div.flex.flex-col > .flex.flex-wrap {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-phone-dialog form > div.flex > div:nth-child(2), .contact-email-dialog form > div.flex.flex-col > .flex.flex-wrap > div:nth-child(2) {
      grid-column: span 2;
    }
  }

  @media (max-width: 640px) {
    .contact-phone-dialog .fd-dialog__body, .contact-email-dialog .fd-dialog__body, .contact-phone-dialog [role="dialog"] > div:nth-child(2), .contact-email-dialog [role="dialog"] > div:nth-child(2) {
      padding: 1rem;
    }

    .contact-phone-dialog .fd-dialog__footer, .contact-email-dialog .fd-dialog__footer, .contact-phone-dialog [role="dialog"] > div:last-child, .contact-email-dialog [role="dialog"] > div:last-child {
      flex-direction: column-reverse;
      align-items: stretch;
      padding: .75rem;
    }

    .contact-phone-dialog .fd-dialog__footer button, .contact-email-dialog .fd-dialog__footer button, .contact-phone-dialog [role="dialog"] > div:last-child button, .contact-email-dialog [role="dialog"] > div:last-child button {
      width: 100%;
    }

    .contact-phone-dialog form > div.flex, .contact-email-dialog form > div.flex.flex-col > .flex.flex-wrap {
      grid-template-columns: 1fr;
      gap: .875rem;
    }

    .contact-phone-dialog form > div.flex > div:nth-child(2), .contact-email-dialog form > div.flex.flex-col > .flex.flex-wrap > div:nth-child(2) {
      grid-column: auto;
    }
  }

  .contact-address-dialog .fd-dialog__content, .contact-address-dialog [role="dialog"] {
    width: min(64rem, 100vw - 2rem);
  }

  .contact-address-dialog .fd-dialog__body {
    max-height: min(72dvh, 100dvh - 9rem);
    padding: 1rem 1.25rem;
    overflow: auto;
  }

  .contact-address-dialog .fd-dialog__footer {
    gap: .5rem;
    padding: .75rem 1rem;
  }

  .contact-address-dialog .fd-dialog__footer button {
    min-width: 7rem;
    margin: 0 !important;
  }

  .contact-address-dialog form > div.flex.flex-col {
    gap: 1rem;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    width: 100%;
    display: grid !important;
  }

  .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:first-child {
    grid-template-columns: 1fr;
  }

  .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap > div {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap > .w-full {
    width: 100% !important;
  }

  .contact-address-dialog .form-item, .contact-address-dialog .fd-form-item {
    width: 100%;
    min-width: 0;
  }

  .contact-address-dialog .flex.items-end {
    grid-template-columns: minmax(180px, 260px) auto minmax(180px, 1fr);
    align-items: end;
    gap: .75rem;
    display: grid !important;
  }

  .contact-address-dialog .flex.items-end > div, .contact-address-dialog .flex.items-end > .ml-3 {
    min-width: 0;
    margin: 0 !important;
  }

  .contact-address-dialog .flex.items-end button {
    min-width: 40px;
    height: 40px;
    margin: 0 !important;
  }

  .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(3), .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(4), .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(8) {
    grid-column: span 2;
  }

  .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(9) {
    align-self: end;
  }

  @media (max-width: 900px) {
    .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(3), .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(4), .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div:nth-child(8) {
      grid-column: 1 / -1;
    }

    .contact-address-dialog .flex.items-end {
      grid-template-columns: minmax(180px, 1fr) auto;
    }

    .contact-address-dialog .flex.items-end > div:last-child {
      grid-column: 1 / -1;
      min-height: auto !important;
    }
  }

  @media (max-width: 640px) {
    .contact-address-dialog .fd-dialog__body {
      padding: 1rem;
    }

    .contact-address-dialog .fd-dialog__footer {
      flex-direction: column-reverse;
      align-items: stretch;
      padding: .75rem;
    }

    .contact-address-dialog .fd-dialog__footer button {
      width: 100%;
    }

    .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap, .contact-address-dialog .flex.items-end {
      grid-template-columns: 1fr;
    }

    .contact-address-dialog form > div.flex.flex-col > .flex.flex-wrap:not(:first-child) > div {
      grid-column: 1 / -1;
    }

    .contact-address-dialog .flex.items-end button {
      width: 100%;
    }
  }

  .bank-data-dialog .fd-dialog__content, .bank-data-dialog [role="dialog"] {
    width: min(64rem, 100vw - 2rem);
  }

  .bank-data-dialog .fd-dialog__body, .bank-data-dialog [role="dialog"] > div:nth-child(2) {
    max-height: min(72dvh, 100dvh - 9rem);
    padding: 1rem 1.25rem;
    overflow: auto;
  }

  .bank-data-dialog .fd-dialog__footer, .bank-data-dialog [role="dialog"] > div:last-child {
    padding: .75rem 1rem;
    gap: .5rem !important;
  }

  .bank-data-dialog .fd-dialog__footer button, .bank-data-dialog [role="dialog"] > div:last-child button {
    min-width: 7rem;
    margin: 0 !important;
  }

  .bank-data-dialog form {
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    display: flex;
  }

  .bank-data-dialog form > .flex.flex-wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
  }

  .bank-data-dialog form > .flex.flex-wrap > div {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .bank-data-dialog form > .flex.flex-wrap:first-child > div:first-child {
    grid-column: span 3;
  }

  .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(2) {
    grid-column: span 4;
  }

  .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(3) {
    grid-column: span 2;
  }

  .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(4) {
    grid-column: span 3;
  }

  .bank-data-dialog form > .flex.flex-wrap:nth-child(2) > div:first-child {
    grid-column: span 6;
  }

  .bank-data-dialog form > .flex.flex-wrap:nth-child(2) > div:not(:first-child) {
    grid-column: span 3;
  }

  .bank-data-dialog .form-item, .bank-data-dialog .fd-form-item {
    width: 100%;
    min-width: 0;
  }

  @media (max-width: 900px) {
    .bank-data-dialog form > .flex.flex-wrap {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bank-data-dialog form > .flex.flex-wrap:first-child > div:first-child, .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(3), .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(4), .bank-data-dialog form > .flex.flex-wrap:nth-child(2) > div:not(:first-child) {
      grid-column: span 1;
    }

    .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(2), .bank-data-dialog form > .flex.flex-wrap:nth-child(2) > div:first-child {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 640px) {
    .bank-data-dialog .fd-dialog__body, .bank-data-dialog [role="dialog"] > div:nth-child(2) {
      padding: 1rem;
    }

    .bank-data-dialog .fd-dialog__footer, .bank-data-dialog [role="dialog"] > div:last-child {
      flex-direction: column-reverse;
      align-items: stretch;
      padding: .75rem;
    }

    .bank-data-dialog .fd-dialog__footer button, .bank-data-dialog [role="dialog"] > div:last-child button {
      width: 100%;
    }

    .bank-data-dialog form > .flex.flex-wrap {
      grid-template-columns: 1fr;
      gap: .875rem;
    }

    .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(2), .bank-data-dialog form > .flex.flex-wrap:nth-child(2) > div:first-child, .bank-data-dialog form > .flex.flex-wrap:first-child > div:first-child, .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(3), .bank-data-dialog form > .flex.flex-wrap:first-child > div:nth-child(4), .bank-data-dialog form > .flex.flex-wrap:nth-child(2) > div:not(:first-child) {
      grid-column: auto;
    }
  }

  .user-contract-dialog__content {
    width: min(64rem, 100vw - 2rem);
  }

  .user-contract-dialog__body {
    padding: 1rem 1.25rem;
  }

  .user-contract-dialog__actions {
    padding: .75rem 1rem;
    gap: .5rem !important;
  }

  .user-contract-dialog__actions button {
    min-width: 7rem;
  }

  .user-contract-form {
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .user-contract-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    min-width: 0;
    display: grid;
  }

  .user-contract-form__grid .form-item, .user-contract-form__grid .fd-form-item {
    width: 100%;
    min-width: 0;
  }

  .user-contract-form__full {
    grid-column: 1 / -1;
  }

  @media (max-width: 640px) {
    .user-contract-dialog__body {
      padding: 1rem;
    }

    .user-contract-dialog__actions {
      flex-direction: column-reverse;
      align-items: stretch;
      padding: .75rem;
    }

    .user-contract-dialog__actions button {
      width: 100%;
    }

    .user-contract-form__grid {
      grid-template-columns: 1fr;
      gap: .875rem;
    }
  }

  .user-details-page, .user-details-stack {
    flex-direction: column;
    gap: 1.25rem;
    display: flex;
  }

  .user-details-card, .content-bg.user-details-card {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    border-radius: 4px;
    padding: 1.5rem;
  }

  .user-details-form {
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    display: flex;
  }

  .user-details-divider {
    background: var(--card-border);
    height: 1px;
  }

  .user-details-section-header {
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    display: flex;
  }

  .user-details-section-header h5 {
    color: var(--text-primary);
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
  }

  .user-details-profile-grid {
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: start;
    gap: 1.5rem;
    display: grid;
  }

  .user-details-main-fields {
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    display: flex;
  }

  .user-details-grid {
    gap: 1rem 1.5rem;
    min-width: 0;
    display: grid;
  }

  .user-details-grid--identity {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(280px, 2fr);
  }

  .user-details-grid--identity .user-details-grid__wide {
    grid-column: span 1;
  }

  .user-details-grid--access, .user-details-grid--personal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .user-details-checkbox {
    align-self: end;
    min-height: 40px;
  }

  .user-details-photo-panel {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: 1rem;
    display: flex;
  }

  .user-details-photo-panel .form-item, .user-details-photo-panel .fd-form-item {
    width: 100%;
  }

  .user-details-photo-frame {
    border: 1px solid var(--card-border);
    background: var(--card-bg-secondary);
    width: 136px;
    height: 136px;
    color: var(--text-secondary);
    text-align: center;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    display: flex;
    overflow: hidden;
  }

  .user-details-photo-frame img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .user-details-status {
    justify-content: center;
    display: flex;
  }

  .user-details-tabs-card {
    padding: 1rem 1.25rem;
  }

  .user-details-tabs-panel, .user-details-tabs-panel .fd-panel, .user-details-tabs-panel__body {
    background: none;
    border: 0;
    padding: 0 !important;
  }

  @media (max-width: 1200px) {
    .user-details-profile-grid {
      grid-template-columns: 1fr;
    }

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

    .user-details-grid--identity .user-details-grid__wide {
      grid-column: 1 / -1;
    }

    .user-details-photo-panel {
      grid-template-columns: 160px minmax(0, 1fr);
      align-items: center;
      display: grid;
    }

    .user-details-photo-panel .form-item, .user-details-photo-panel .fd-form-item {
      width: auto;
    }

    .user-details-status {
      justify-content: flex-start;
    }
  }

  @media (max-width: 900px) {
    .user-details-grid--access, .user-details-grid--personal {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .user-details-card, .content-bg.user-details-card {
      padding: 1rem;
    }

    .user-details-grid--identity, .user-details-grid--access, .user-details-grid--personal {
      grid-template-columns: 1fr;
    }

    .user-details-photo-panel {
      align-items: center;
      display: flex;
    }

    .user-details-status {
      justify-content: center;
    }

    .user-details-section-header {
      flex-direction: column;
      align-items: stretch;
    }

    .user-details-section-header button {
      width: 100%;
    }
  }

  .refund-dialog .fd-dialog__content {
    width: min(50%, 100vw - 2rem);
  }

  .refund-select-project-dialog .fd-dialog__content {
    width: min(20vw, 100vw - 2rem);
  }

  .refund-select-project-dialog .fd-dialog__body {
    overflow: visible;
  }

  .payroll-dialog .fd-dialog__content {
    width: min(85%, 100vw - 2rem);
  }

  .menu-svg-preview {
    background: var(--card-bg);
    border: 1px solid #0003;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .menu-svg-preview img, .menu-svg-preview svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  .user-profile-page {
    flex-direction: column;
    display: flex;
  }

  .user-profile-shell {
    gap: 2rem;
  }

  .user-profile-layout {
    grid-template-columns: minmax(280px, 400px) minmax(320px, 1fr);
    align-items: start;
    gap: 2rem;
    display: grid;
  }

  .user-profile-card, .user-profile-password-card {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 4px;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    display: flex;
  }

  .user-profile-avatar-strip {
    background: var(--card-bg-secondary);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    min-height: 144px;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .user-profile-avatar-strip {
      background: color-mix(in srgb, var(--card-bg-secondary), transparent 25%);
    }
  }

  .user-profile-avatar-strip {
    padding: 1rem;
  }

  .user-profile-upload {
    cursor: pointer;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    min-height: 40px;
    color: var(--text-primary);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: 0 1rem;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
  }

  .user-profile-upload:hover {
    filter: brightness(1.15);
  }

  .user-profile-upload input[type="file"] {
    display: none;
  }

  .user-profile-status {
    justify-content: center;
    align-self: center;
    min-width: 8rem;
  }

  .user-profile-info-grid {
    gap: 1rem;
    display: grid;
  }

  .user-profile-info-grid > *, .user-profile-password-card > * {
    width: 100%;
  }

  .user-profile-password-card {
    padding: 1.25rem;
  }

  @media (max-width: 1000px) {
    .user-profile-layout {
      grid-template-columns: 1fr;
    }

    .user-profile-card {
      grid-template-columns: minmax(260px, .85fr) minmax(260px, 1fr);
      align-items: start;
      display: grid;
    }

    .user-profile-avatar-strip, .user-profile-upload, .user-profile-status {
      grid-column: 1;
    }

    .user-profile-info-grid {
      grid-area: 1 / 2 / span 3;
    }

    .user-profile-avatar-strip {
      justify-content: center;
      overflow: hidden;
    }

    .user-profile-avatar-strip > :first-child {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .user-profile-shell {
      gap: 1.25rem;
      padding: 1rem;
    }

    .user-profile-card {
      align-items: stretch;
      padding: .875rem;
      display: flex;
    }

    .user-profile-info-grid {
      grid-area: auto;
    }

    .user-profile-avatar-strip {
      min-height: 120px;
      padding: .75rem;
    }

    .user-profile-avatar-strip > :not(:last-child) {
      display: none;
    }

    .user-profile-upload {
      text-align: center;
      width: 100%;
      padding: 0 .75rem;
    }

    .user-profile-status {
      align-self: center;
      width: min(100%, 12rem);
    }

    .user-profile-password-card {
      padding: .875rem;
    }
  }

  @media (max-width: 420px) {
    .user-profile-shell, .user-profile-card, .user-profile-password-card {
      padding: .75rem;
    }
  }

  .show-password-button {
    background: none;
    border: 0;
    outline: 0;
    font-size: 0;
  }

  .config-email-valid-icon {
    color: var(--success);
    font-size: 12px;
  }

  .config-email-invalid-icon {
    color: var(--danger);
    font-size: 12px;
  }

  .message-body-container {
    height: 230px;
    padding: 0;
  }

  .responsive-table-copy-button {
    z-index: 30;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    width: 2rem;
    height: 2rem;
    color: var(--text-primary-w);
    opacity: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: opacity .15s, filter .15s;
    display: inline-flex;
    position: absolute;
    top: .45rem;
    right: .45rem;
  }

  .responsive-table-frame:hover .responsive-table-copy-button, .responsive-table-copy-button:focus-visible {
    opacity: .9;
  }

  .responsive-table-copy-button:hover:not(:disabled) {
    filter: brightness(1.15);
    opacity: 1;
  }

  .responsive-table-copy-button:disabled {
    cursor: not-allowed;
    opacity: 0;
  }

  @media (hover: none) {
    .responsive-table-copy-button:not(:disabled) {
      opacity: .65;
    }
  }

  .config-email-message-body {
    border: 1px solid var(--button-border);
    width: 99%;
    height: 130px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    padding: 0;
    overflow: auto;
  }

  .config-email-message-body:focus {
    border: 1px solid var(--primary);
    color: var(--text-primary);
  }

  .config-email-message-body .valid-variable {
    color: var(--success);
  }

  .config-email-message-body .invalid-variable {
    color: var(--danger);
  }

  @media (min-width: 769px) {
    .weekly-planning-grid--registration {
      grid-template-columns: repeat(7, minmax(200px, 1fr));
    }

    .weekly-planning-grid--report {
      grid-template-columns: minmax(200px, 1fr) repeat(7, minmax(200px, 1fr));
    }
  }

  @media (min-width: 1366px) {
    .appoint-grid-container {
      grid-template-columns: minmax(360px, .8fr) minmax(0, 1.8fr);
    }
  }

  @media (max-width: 768px) {
    .weekly-planning-filters-nav {
      flex-wrap: wrap;
    }

    .weekly-planning-grid {
      grid-template-columns: 1fr;
    }

    .weekly-planning-dialog .fd-dialog__content, .appointment-dialog .fd-dialog__content, .appointment-planning-dialog .fd-dialog__content, .contact-phone-dialog .fd-dialog__content, .contact-email-dialog .fd-dialog__content, .contact-address-dialog .fd-dialog__content, .bank-data-dialog .fd-dialog__content, .user-contract-dialog .fd-dialog__content, .refund-dialog .fd-dialog__content, .refund-select-project-dialog .fd-dialog__content {
      width: calc(100vw - 2rem);
    }
  }

  @media (max-width: 900px) {
    .user-dashboard-header {
      flex-direction: column;
      align-items: stretch;
      margin-bottom: .75rem;
    }

    .user-dashboard-title {
      font-size: 1.15rem;
      font-weight: 700;
    }

    .user-dashboard-page {
      padding: .75rem;
    }

    .user-dashboard-actions {
      justify-content: flex-end;
    }

    .user-dashboard-grid, .user-dashboard-two-columns, .user-dashboard-feedback-form-grid, .user-dashboard-filter-grid {
      grid-template-columns: 1fr;
    }

    .user-dashboard-filter-grid--top {
      max-width: none;
    }

    .user-dashboard-card-info, .financial-analysis-results {
      padding: .85rem;
    }

    .financial-analysis-results-header {
      flex-direction: column;
      align-items: flex-start;
      gap: .25rem;
    }

    .feedback-message-header {
      align-items: center;
    }

    .feedback-message-author {
      white-space: normal;
    }

    .user-dashboard-feed-dialog .fd-dialog__content {
      width: calc(100vw - 2rem);
    }
  }

  @media (max-width: 1300px) {
    .budget-summary-legend, .appoint-calendar-legend {
      margin: 0;
    }
  }

  @media (max-width: 1200px) {
    .detachment-report-filter-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-follow-up-filter__grid, .project-follow-up-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-card__header {
      grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    }

    .report-card__actions {
      grid-column: 1 / -1;
    }

    .registry-form-grid, .registry-form-grid--with-action {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .registry-form-span-2 {
      grid-column: span 2;
    }

    .appoint-grid-container {
      grid-template-rows: auto minmax(260px, auto);
      grid-template-columns: minmax(300px, .85fr) minmax(0, 1.4fr);
    }

    .appointment-form-grid {
      grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .appointment-submit-item {
      padding-top: 0 !important;
    }

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

    .appointment-consult-user, .appointment-consult-project {
      grid-column: span 3;
    }

    .appointment-consult-date {
      grid-column: span 2;
    }

    .appointment-consult-actions {
      grid-column: 3 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 990px) {
    .detachment-report-filter-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-follow-up-card-grid, .report-card__header {
      grid-template-columns: 1fr;
    }

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

    .appoint-grid-container {
      grid-template: "form"
                     "calendar"
                     "chart"
                     "appoint"
                     / 1fr;
    }

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

    .appointment-submit-item {
      padding-top: 0 !important;
    }

    .appoint-grid-container .calendar {
      overflow: hidden;
    }
  }

  @media (max-width: 550px) {
    .detachment-report-filter-grid {
      grid-template-columns: 1fr;
      gap: .8rem;
    }

    .project-follow-up-filter {
      padding: .85rem;
    }

    .project-follow-up-filter__grid, .project-follow-up-card-grid {
      grid-template-columns: 1fr;
    }

    .project-follow-up-tabs__actions {
      padding: .75rem .75rem 0;
    }

    .project-follow-up-tabs__actions .report-dropdown-button, .report-card__actions button, .project-follow-up-chart__button {
      width: 100%;
    }

    .project-follow-up-tab-panel, .project-follow-up-card-grid, .report-card__header {
      padding: .85rem;
    }

    .payroll-details-grid {
      grid-template-columns: 1fr;
    }

    .budget-summary-legend {
      margin: 0;
    }

    .registry-form {
      gap: 1.25rem;
    }

    .registry-form-grid, .registry-form-grid--with-action {
      grid-template-columns: 1fr;
      gap: .8rem;
    }

    .registry-form-span-2 {
      grid-column: auto;
    }

    .registry-form-action {
      margin-top: 0;
    }

    .no-label-button, .no-label-button > button, .no-label-button .fd-button, .no-label-button a {
      width: 100%;
    }

    .appoint-grid-container {
      grid-template: "form"
                     "calendar"
                     "chart"
                     "appoint"
                     / minmax(0, 1fr);
    }

    .appointment-content .fd-layout-panel__body {
      padding: 0;
    }

    .appointment-form-grid {
      grid-template-columns: 1fr;
      gap: .65rem;
    }

    .appointment-consult-grid {
      grid-template-columns: 1fr;
    }

    .appointment-consult-user, .appointment-consult-project, .appointment-consult-date, .appointment-consult-actions {
      grid-column: auto;
    }

    .appointment-consult-actions {
      grid-template-columns: 1fr;
    }

    .appointment-consult-panel {
      padding: .75rem;
    }

    .appointment-consult-summary {
      flex-direction: column;
      align-items: stretch;
    }

    .appointment-consult-panel .total-hours-container, .appointment-submit-button {
      width: 100%;
    }

    .appoint-calendar-legend {
      margin: 0;
    }
  }

  .hours-deviation-table {
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-radius: 4px;
    overflow: hidden;
  }

  .hours-deviation-summary {
    border-bottom: 1px solid var(--card-border);
    background-color: var(--card-bg-secondary);
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    display: flex;
  }

  .hours-deviation-summary__text {
    min-width: 0;
  }

  .hours-deviation-summary__text h3 {
    color: var(--text-primary);
    margin: 0;
    font-size: .95rem;
    line-height: 1.35;
  }

  .hours-deviation-summary__text p {
    color: var(--text-secondary);
    margin-top: .35rem;
    font-size: .9rem;
  }

  .hours-deviation-summary__action {
    flex-shrink: 0;
  }

  .hours-deviation-scroll {
    border-top: 0;
    max-height: min(62vh, 680px);
  }

  .hours-deviation-grid thead {
    z-index: 4;
    width: 100%;
    position: sticky;
    top: 0;
  }

  .hours-deviation-grid thead tr, .hours-deviation-grid thead tr th {
    border-radius: 0;
  }

  .hours-deviation-grid th, .hours-deviation-grid td {
    border-right: 1px solid var(--list-cell-border);
    border-bottom: 1px solid var(--list-cell-border);
    min-width: 3.25rem;
    height: 2rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    padding: .35rem .5rem;
    line-height: 1.2;
  }

  .hours-deviation-grid thead th {
    border-color: var(--list-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid thead th {
      border-color: color-mix(in srgb, var(--list-border), black 10%);
    }
  }

  .hours-deviation-grid thead th {
    background-color: var(--list-header-bg);
    color: var(--text-primary-reverse);
    font-size: .78rem;
    font-weight: 700;
  }

  .hours-deviation-grid thead tr:first-child th {
    border-bottom-color: var(--secondary);
    height: 2.25rem;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid thead tr:first-child th {
      border-bottom-color: color-mix(in srgb, var(--secondary), transparent 35%);
    }
  }

  .hours-deviation-grid thead tr:nth-child(2) th {
    background-color: var(--list-header-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid thead tr:nth-child(2) th {
      background-color: color-mix(in srgb, var(--list-header-bg), black 8%);
    }
  }

  .hours-deviation-grid thead tr:nth-child(2) th {
    color: var(--text-primary-reverse);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid thead tr:nth-child(2) th {
      color: color-mix(in srgb, var(--text-primary-reverse), transparent 8%);
    }
  }

  .hours-deviation-grid thead tr:nth-child(3) th {
    background-color: var(--list-header-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid thead tr:nth-child(3) th {
      background-color: color-mix(in srgb, var(--list-header-bg), white 6%);
    }
  }

  .hours-deviation-grid thead tr:nth-child(3) th {
    color: var(--text-primary-reverse);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid thead tr:nth-child(3) th {
      color: color-mix(in srgb, var(--text-primary-reverse), transparent 14%);
    }
  }

  .hours-deviation-grid thead tr:nth-child(3) th {
    font-size: .72rem;
  }

  .hours-deviation-grid thead th:first-child, .hours-deviation-grid tbody th {
    z-index: 3;
    text-align: left;
    white-space: normal;
    width: 13rem;
    min-width: 13rem;
    max-width: 13rem;
    position: sticky;
    left: 0;
  }

  .hours-deviation-grid thead th:first-child {
    z-index: 5;
    background-color: var(--primary);
  }

  .hours-deviation-grid tbody th {
    background-color: var(--card-bg-secondary);
    color: var(--text-primary);
    font-weight: 700;
  }

  .hours-deviation-grid tbody tr:nth-child(2n) th {
    background-color: var(--card-bg);
  }

  .hours-deviation-grid tbody tr:nth-child(odd) td {
    background-color: var(--card-bg-secondary);
  }

  .hours-deviation-grid tbody tr:nth-child(2n) td, .hours-deviation-grid tbody tr:hover th, .hours-deviation-grid tbody tr:hover td {
    background-color: var(--card-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr:hover th, .hours-deviation-grid tbody tr:hover td {
      background-color: color-mix(in srgb, var(--card-bg), white 10%);
    }
  }

  .hours-deviation-grid tbody tr td.green {
    background-color: #579c5247;
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr td.green {
      background-color: color-mix(in srgb, var(--success), transparent 72%);
    }
  }

  .hours-deviation-grid tbody tr td.green {
    color: var(--text-primary);
    font-weight: 700;
  }

  .hours-deviation-grid tbody tr td.yellow {
    background-color: #ffcc0075;
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr td.yellow {
      background-color: color-mix(in srgb, var(--warning), transparent 54%);
    }
  }

  .hours-deviation-grid tbody tr td.yellow {
    color: #1f1f1f;
    font-weight: 700;
  }

  .hours-deviation-grid tbody tr td.red {
    background-color: #b83d438c;
    background-color: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr td.red {
      background-color: color-mix(in srgb, var(--danger), transparent 45%);
    }
  }

  .hours-deviation-grid tbody tr td.red {
    color: var(--text-primary-reverse);
    font-weight: 700;
  }

  .hours-deviation-grid tbody tr:hover td.green {
    background-color: #579c526b;
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr:hover td.green {
      background-color: color-mix(in srgb, var(--success), transparent 58%);
    }
  }

  .hours-deviation-grid tbody tr:hover td.yellow {
    background-color: #fc09;
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr:hover td.yellow {
      background-color: color-mix(in srgb, var(--warning), transparent 40%);
    }
  }

  .hours-deviation-grid tbody tr:hover td.red {
    background-color: #b83d43ad;
    background-color: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-grid tbody tr:hover td.red {
      background-color: color-mix(in srgb, var(--danger), transparent 32%);
    }
  }

  .hours-deviation-status {
    min-height: 1.45rem;
    color: var(--text-primary-reverse);
    border-radius: 999px;
    align-items: center;
    margin-left: .25rem;
    padding: .15rem .55rem;
    font-size: .82rem;
    font-weight: 700;
    display: inline-flex;
  }

  .hours-deviation-status.green {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hours-deviation-status.green {
      background-color: color-mix(in srgb, var(--success), black 8%);
    }
  }

  .hours-deviation-status.yellow {
    background-color: var(--warning);
    color: #1f1f1f;
  }

  .hours-deviation-status.red {
    background-color: var(--danger);
  }

  @media (max-width: 768px) {
    .hours-deviation-summary {
      flex-direction: column;
      align-items: stretch;
      padding: .875rem;
    }

    .hours-deviation-summary__action, .hours-deviation-summary__action .report-dropdown-button {
      width: 100%;
    }

    .hours-deviation-scroll {
      max-height: 65vh;
    }

    .hours-deviation-grid thead th:first-child, .hours-deviation-grid tbody th {
      width: 10rem;
      min-width: 10rem;
      max-width: 10rem;
    }

    .log-report-page .filter-item-content, .log-report-page .filter-link-content {
      flex-direction: column;
      align-items: stretch;
      max-width: 100%;
      height: auto;
    }

    .log-report-page .delete-filter-btn {
      align-self: flex-end;
    }

    .report-section, .report-card {
      padding: 0;
    }
  }

  .fd-layout-panel, .fd-layout-panel__body, .fd-layout-panel__content, .fd-layout-panel__footer, .fd-tabs, .fd-tabs__content, .fd-tabs__panel, .fd-tabs__list, .fd-tab-content, .fd-page, .fd-page__content, .fd-card, .fd-card__content {
    background-color: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .fd-tabs__item, .fd-tabs__link, .fd-tabs__tag {
    color: var(--text-secondary) !important;
    background-color: #0000 !important;
  }

  .fd-tabs__link:hover, .fd-tabs__link:focus, .fd-tabs__link.is-selected, .fd-tabs__link[aria-selected="true"] {
    color: var(--text-primary) !important;
  }

  .fd-layout-panel, .fd-card, .fd-tabs, .fd-tabs__content {
    border-color: var(--card-border) !important;
    box-shadow: none !important;
  }

  .fd-tabs__tag:after {
    background-color: var(--secondary) !important;
    border-radius: 999px 999px 0 0 !important;
    height: 3px !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .fd-tabs__tag:after {
      background-color: color-mix(in srgb, var(--secondary), transparent 74%) !important;
    }
  }

  .fd-tabs__tag:after {
    opacity: 1 !important;
  }

  .fd-tabs__link.is-selected .fd-tabs__tag:after, .fd-tabs__link[aria-selected="true"] .fd-tabs__tag:after {
    background-color: var(--secondary) !important;
    opacity: 1 !important;
  }

  .fd-tabs__link.is-selected .fd-tabs__tag, .fd-tabs__link[aria-selected="true"] .fd-tabs__tag {
    color: var(--text-primary) !important;
  }

  .appointment-content .fd-layout-panel, .appointment-content .fd-layout-panel__body, .appointment-content .fd-layout-panel__content, .appointment-content .fd-tabs, .appointment-content .fd-tabs__content, .appointment-content .fd-tabs__panel, .appointment-content .fd-tab-content {
    box-shadow: none !important;
    filter: none !important;
  }

  .appointment-content .fd-tabs, .appointment-content .fd-tabs__list, .appointment-content .fd-tabs__content {
    background-color: #0000 !important;
  }

  .appointment-content .fd-tabs {
    min-height: auto !important;
    padding: 0 !important;
  }

  .appointment-content .fd-tabs__list {
    gap: .75rem;
    border-color: var(--card-border) !important;
    align-items: flex-end !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }

  .appointment-content .fd-tabs__item, .appointment-content .fd-tabs__link, .appointment-content .fd-tabs__tag {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--text-secondary) !important;
    background-color: #0000 !important;
    border-color: #0000 !important;
  }

  .appointment-content .fd-tabs__item {
    min-width: 5rem;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }

  .appointment-content .fd-tabs__link {
    width: 100%;
    border-bottom: 2px solid #0000 !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 2.75rem !important;
    margin: 0 !important;
    padding: 0 .75rem !important;
    display: flex !important;
  }

  .appointment-content .fd-tabs__tag {
    justify-content: center !important;
    align-items: center !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
  }

  .appointment-content .fd-tabs *, .appointment-content .fd-tabs :focus, .appointment-content .fd-tabs :focus-visible, .appointment-content .fd-tabs :active {
    box-shadow: none !important;
    outline: 0 !important;
  }

  .appointment-content .fd-tabs ::selection {
    color: inherit;
    background: none;
  }

  .appointment-content .fd-tabs__link:hover, .appointment-content .fd-tabs__link:focus {
    background-color: var(--button-bg) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .appointment-content .fd-tabs__link:hover, .appointment-content .fd-tabs__link:focus {
      background-color: color-mix(in srgb, var(--button-bg), transparent 35%) !important;
    }
  }

  .appointment-content .fd-tabs__link:hover, .appointment-content .fd-tabs__link:focus {
    color: var(--text-primary) !important;
    outline: none !important;
  }

  .appointment-content .fd-tabs__item:focus, .appointment-content .fd-tabs__item:focus-visible, .appointment-content .fd-tabs__link:focus, .appointment-content .fd-tabs__link:focus-visible, .appointment-content .fd-tabs__tag:focus, .appointment-content .fd-tabs__tag:focus-visible, .appointment-content .fd-tabs a:focus, .appointment-content .fd-tabs a:focus-visible, .appointment-content .fd-tabs button:focus, .appointment-content .fd-tabs button:focus-visible {
    box-shadow: none !important;
    outline: none !important;
  }

  .appointment-content .fd-tabs__link:focus-visible, .appointment-content .fd-tabs__tag:focus-visible {
    box-shadow: none !important;
  }

  .appointment-content .fd-tabs__link.is-selected, .appointment-content .fd-tabs__link[aria-selected="true"], .appointment-content .fd-tabs__item.is-selected, .appointment-content .fd-tabs__item[aria-selected="true"] {
    color: var(--text-primary) !important;
    background-color: #0000 !important;
  }

  .appointment-content .fd-tabs__link.is-selected .fd-tabs__tag, .appointment-content .fd-tabs__link[aria-selected="true"] .fd-tabs__tag {
    color: var(--text-primary) !important;
  }

  .appointment-content .fd-tabs__tag:after, .appointment-content .fd-tabs__link.is-selected .fd-tabs__tag:after, .appointment-content .fd-tabs__link[aria-selected="true"] .fd-tabs__tag:after {
    opacity: 0 !important;
    background-color: #0000 !important;
    display: none !important;
  }

  .appointment-content .fd-tabs__link.is-selected, .appointment-content .fd-tabs__link[aria-selected="true"], .appointment-content .fd-tabs__link.is-selected .fd-tabs__tag, .appointment-content .fd-tabs__link[aria-selected="true"] .fd-tabs__tag {
    border-color: #0000 !important;
    border-bottom-color: var(--secondary) !important;
    box-shadow: none !important;
  }

  .appointment-content select, .appointment-content select option {
    background-color: var(--button-bg);
    color: var(--button-text);
    font-family: Inter, sans-serif;
  }

  .appointment-content select option {
    min-height: 2.25rem;
    padding: .45rem .6rem;
  }

  @media (min-width: 1024px) {
    .appointment-table .responsive-table-row {
      min-height: 48px;
    }

    .appointment-table .responsive-table-row:has(.appointment-edit-field) {
      align-items: center;
      position: relative;
    }

    .appointment-table .responsive-table-row:has(.appointment-edit-field) .responsive-table-cell, .appointment-table .responsive-table-row:has(.appointment-edit-field) .responsive-table-action-cell {
      align-items: center;
    }

    .responsive-table--no-actions .responsive-table-row, .appointment-consult-table .responsive-table-row {
      min-height: 3rem;
    }

    .responsive-table--no-actions .responsive-table-cell, .appointment-consult-table .responsive-table-cell {
      padding-top: .45rem !important;
      padding-bottom: .45rem !important;
    }

    .responsive-table-action-cell {
      min-height: inherit;
      align-self: stretch;
      align-items: center;
    }
  }

  @media (max-width: 1023px) {
    .appointment-table .responsive-table-row {
      padding-right: .5rem;
    }
  }

  .fd-table, .fd-table tbody, .fd-table tr, .fd-table td, .fd-table__body, .fd-table__row, .fd-table__cell, .fd-table__footer, .fd-table__header {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--list-border) !important;
  }

  .fd-table thead, .fd-table th, .fd-table__head, .fd-table__header, .fd-table__header-cell {
    background-color: var(--list-header-bg) !important;
    color: var(--text-primary-reverse) !important;
  }

  .fd-table tbody tr:nth-child(odd), .fd-table__body .fd-table__row:nth-child(odd) {
    background-color: var(--list-odd) !important;
  }

  .fd-table tbody tr:nth-child(2n), .fd-table__body .fd-table__row:nth-child(2n) {
    background-color: var(--list-even) !important;
  }

  .echarts-for-react, .echarts-for-react > div, .appoint-grid-container .chart, .appoint-grid-appoint-container .chart {
    background-color: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
  }

  .empty-state, .empty-state *, .fd-illustrated-message, .fd-illustrated-message *, .fd-message-strip, .fd-message-strip * {
    color: var(--text-secondary) !important;
    background-color: #0000 !important;
  }
}

@layer utilities;

.pointer-events-none {
  pointer-events: none;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: calc(var(--spacing) * 0);
}

.top-0 {
  top: calc(var(--spacing) * 0);
}

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

.top-\[calc\(100\%\+16px\)\] {
  top: calc(100% + 16px);
}

.right-0 {
  right: calc(var(--spacing) * 0);
}

.left-0 {
  left: calc(var(--spacing) * 0);
}

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

.left-2 {
  left: calc(var(--spacing) * 2);
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

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

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

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

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

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

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

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

.container {
  width: 100%;
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.\!m-0 {
  margin: calc(var(--spacing) * 0) !important;
}

.m-0 {
  margin: calc(var(--spacing) * 0);
}

.mx-0 {
  margin-inline: calc(var(--spacing) * 0);
}

.mx-4 {
  margin-inline: calc(var(--spacing) * 4);
}

.mx-auto {
  margin-inline: auto;
}

.\!my-2 {
  margin-block: calc(var(--spacing) * 2) !important;
}

.my-1 {
  margin-block: calc(var(--spacing) * 1);
}

.my-2 {
  margin-block: calc(var(--spacing) * 2);
}

.my-auto {
  margin-block: auto;
}

.\!mt-0 {
  margin-top: calc(var(--spacing) * 0) !important;
}

.-mt-2 {
  margin-top: calc(var(--spacing) * -2);
}

.mt-0 {
  margin-top: calc(var(--spacing) * 0);
}

.mt-0\.5 {
  margin-top: calc(var(--spacing) * .5);
}

.mt-1\.5 {
  margin-top: calc(var(--spacing) * 1.5);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}

.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.mt-auto {
  margin-top: auto;
}

.mr-0 {
  margin-right: calc(var(--spacing) * 0);
}

.mr-1 {
  margin-right: calc(var(--spacing) * 1);
}

.mr-2 {
  margin-right: calc(var(--spacing) * 2);
}

.\!mb-2\.5 {
  margin-bottom: calc(var(--spacing) * 2.5) !important;
}

.\!mb-4 {
  margin-bottom: calc(var(--spacing) * 4) !important;
}

.mb-0 {
  margin-bottom: calc(var(--spacing) * 0);
}

.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}

.\!ml-0 {
  margin-left: calc(var(--spacing) * 0) !important;
}

.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}

.ml-3 {
  margin-left: calc(var(--spacing) * 3);
}

.ml-4 {
  margin-left: calc(var(--spacing) * 4);
}

.box-border {
  box-sizing: border-box;
}

.box-content {
  box-sizing: content-box;
}

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

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

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

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

.table {
  display: table;
}

.\!h-7 {
  height: calc(var(--spacing) * 7) !important;
}

.\!h-8 {
  height: calc(var(--spacing) * 8) !important;
}

.\!h-10 {
  height: calc(var(--spacing) * 10) !important;
}

.\!h-auto {
  height: auto !important;
}

.h-2 {
  height: calc(var(--spacing) * 2);
}

.h-3 {
  height: calc(var(--spacing) * 3);
}

.h-4 {
  height: calc(var(--spacing) * 4);
}

.h-5 {
  height: calc(var(--spacing) * 5);
}

.h-6 {
  height: calc(var(--spacing) * 6);
}

.h-8 {
  height: calc(var(--spacing) * 8);
}

.h-9 {
  height: calc(var(--spacing) * 9);
}

.h-10 {
  height: calc(var(--spacing) * 10);
}

.h-12 {
  height: calc(var(--spacing) * 12);
}

.h-24 {
  height: calc(var(--spacing) * 24);
}

.h-36 {
  height: calc(var(--spacing) * 36);
}

.h-\[2\.55rem\] {
  height: 2.55rem;
}

.h-\[3\.8rem\] {
  height: 3.8rem;
}

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

.h-\[calc\(1rem\+4px\)\] {
  height: calc(1rem + 4px);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

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

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

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

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

.\!min-h-7 {
  min-height: calc(var(--spacing) * 7) !important;
}

.min-h-0 {
  min-height: calc(var(--spacing) * 0);
}

.min-h-6 {
  min-height: calc(var(--spacing) * 6);
}

.min-h-10 {
  min-height: calc(var(--spacing) * 10);
}

.min-h-25 {
  min-height: calc(var(--spacing) * 25);
}

.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}

.min-h-\[5rem\] {
  min-height: 5rem;
}

.min-h-\[18rem\] {
  min-height: 18rem;
}

.min-h-\[20rem\] {
  min-height: 20rem;
}

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

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

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

.\!w-7 {
  width: calc(var(--spacing) * 7) !important;
}

.\!w-8 {
  width: calc(var(--spacing) * 8) !important;
}

.\!w-10 {
  width: calc(var(--spacing) * 10) !important;
}

.\!w-full {
  width: 100% !important;
}

.w-0\.5 {
  width: calc(var(--spacing) * .5);
}

.w-1\/3 {
  width: 33.3333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/6 {
  width: 16.6667%;
}

.w-3 {
  width: calc(var(--spacing) * 3);
}

.w-3\/4 {
  width: 75%;
}

.w-5 {
  width: calc(var(--spacing) * 5);
}

.w-5\/6 {
  width: 83.3333%;
}

.w-6 {
  width: calc(var(--spacing) * 6);
}

.w-8 {
  width: calc(var(--spacing) * 8);
}

.w-9 {
  width: calc(var(--spacing) * 9);
}

.w-10 {
  width: calc(var(--spacing) * 10);
}

.w-12 {
  width: calc(var(--spacing) * 12);
}

.w-24 {
  width: calc(var(--spacing) * 24);
}

.w-32 {
  width: calc(var(--spacing) * 32);
}

.w-36 {
  width: calc(var(--spacing) * 36);
}

.w-48 {
  width: calc(var(--spacing) * 48);
}

.w-\[1\.3rem\] {
  width: 1.3rem;
}

.w-\[2\.6rem\] {
  width: 2.6rem;
}

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

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

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

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

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

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.max-w-2xl {
  max-width: var(--container-2xl);
}

.max-w-5xl {
  max-width: var(--container-5xl);
}

.max-w-60 {
  max-width: calc(var(--spacing) * 60);
}

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

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

.max-w-\[min\(48rem\,calc\(100vw-2rem\)\)\] {
  max-width: min(48rem, 100vw - 2rem);
}

.max-w-\[min\(64rem\,calc\(100vw-2rem\)\)\] {
  max-width: min(64rem, 100vw - 2rem);
}

.max-w-\[min\(72rem\,calc\(100vw-2rem\)\)\] {
  max-width: min(72rem, 100vw - 2rem);
}

.max-w-\[min\(92vw\,520px\)\] {
  max-width: min(92vw, 520px);
}

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

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: var(--container-md);
}

.max-w-xl {
  max-width: var(--container-xl);
}

.\!min-w-0 {
  min-width: calc(var(--spacing) * 0) !important;
}

.\!min-w-7 {
  min-width: calc(var(--spacing) * 7) !important;
}

.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}

.min-w-3 {
  min-width: calc(var(--spacing) * 3);
}

.min-w-10 {
  min-width: calc(var(--spacing) * 10);
}

.min-w-\[4\.5rem\] {
  min-width: 4.5rem;
}

.min-w-\[7rem\] {
  min-width: 7rem;
}

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

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

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

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

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

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

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

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

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

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

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

.\!flex-1 {
  flex: 1 !important;
}

.flex-1 {
  flex: 1;
}

.flex-3 {
  flex: 3;
}

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

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

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

.border-spacing-0 {
  --tw-border-spacing-x: calc(var(--spacing) * 0);
  --tw-border-spacing-y: calc(var(--spacing) * 0);
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.-translate-y-\[5\%\] {
  --tw-translate-y: calc(5% * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.scale-105 {
  --tw-scale-x: 105%;
  --tw-scale-y: 105%;
  --tw-scale-z: 105%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}

.rotate-45 {
  rotate: 45deg;
}

.animate-spin {
  animation: var(--animate-spin);
}

.cursor-default {
  cursor: default;
}

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

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.resize {
  resize: both;
}

.resize-y {
  resize: vertical;
}

.scroll-mt-52 {
  scroll-margin-top: calc(var(--spacing) * 52);
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  appearance: none;
}

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

.grid-flow-row {
  grid-auto-flow: row;
}

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

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

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

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

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

.grid-cols-\[repeat\(auto-fill\,minmax\(300px\,1fr\)\)\] {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.\!flex-col {
  flex-direction: column !important;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

.content-stretch {
  align-content: stretch;
}

.\!items-start {
  align-items: flex-start !important;
}

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

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

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

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

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

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

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

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

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

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

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

.justify-items-start {
  justify-items: start;
}

.\!gap-1 {
  gap: calc(var(--spacing) * 1) !important;
}

.\!gap-6 {
  gap: calc(var(--spacing) * 6) !important;
}

.gap-0 {
  gap: calc(var(--spacing) * 0);
}

.gap-0\.5 {
  gap: calc(var(--spacing) * .5);
}

.gap-1 {
  gap: calc(var(--spacing) * 1);
}

.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-3 {
  gap: calc(var(--spacing) * 3);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

.gap-8 {
  gap: calc(var(--spacing) * 8);
}

.gap-\[4px\] {
  gap: 4px;
}

:where(.space-y-4 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}

:where(.space-y-8 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}

.gap-y-4 {
  row-gap: calc(var(--spacing) * 4);
}

:where(.divide-y > :not(:last-child)) {
  --tw-divide-y-reverse: 0;
  border-bottom-style: var(--tw-border-style);
  border-top-style: var(--tw-border-style);
  border-top-width: calc(1px * var(--tw-divide-y-reverse));
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}

:where(.divide-\[var\(--list-border\)\] > :not(:last-child)) {
  border-color: var(--list-border);
}

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

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

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

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

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

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

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

.overscroll-contain {
  overscroll-behavior: contain;
}

.rounded {
  border-radius: .25rem;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-\[25px\] {
  border-radius: 25px;
}

.rounded-\[inherit\] {
  border-radius: inherit;
}

.rounded-full {
  border-radius: 3.40282e38px;
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-t-lg {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

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

.rounded-r-lg {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.rounded-b {
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.\!border-0 {
  border-style: var(--tw-border-style) !important;
  border-width: 0 !important;
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0;
}

.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}

.border-4 {
  border-style: var(--tw-border-style);
  border-width: 4px;
}

.border-\[1px\] {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-b, .border-b-\[1px\] {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}

.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}

.border-solid {
  --tw-border-style: solid;
  border-style: solid;
}

.\!border-\[var\(--badge-border\)\] {
  border-color: var(--badge-border) !important;
}

.\!border-\[var\(--button-border\)\] {
  border-color: var(--button-border) !important;
}

.\!border-\[var\(--summary-border\)\] {
  border-color: var(--summary-border) !important;
}

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

.border-\[var\(--avatar-border\)\] {
  border-color: var(--avatar-border);
}

.border-\[var\(--button-border\)\!important\] {
  border-color: var(--button-border) !important;
}

.border-\[var\(--button-border\)\] {
  border-color: var(--button-border);
}

.border-\[var\(--card-border\)\] {
  border-color: var(--card-border);
}

.border-\[var\(--confirm-modal-border\)\] {
  border-color: var(--confirm-modal-border);
}

.border-\[var\(--danger\)\!important\] {
  border-color: var(--danger) !important;
}

.border-\[var\(--danger\)\] {
  border-color: var(--danger);
}

.border-\[var\(--header-border\)\] {
  border-color: var(--header-border);
}

.border-\[var\(--list-border\)\] {
  border-color: var(--list-border);
}

.border-\[var\(--summary-border\)\!important\] {
  border-color: var(--summary-border) !important;
}

.border-\[var\(--summary-border\)\] {
  border-color: var(--summary-border);
}

.border-\[var\(--theme-border\)\] {
  border-color: var(--theme-border);
}

.border-current {
  border-color: currentColor;
}

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

.border-r-transparent {
  border-right-color: #0000;
}

.\!bg-\[var\(--badge-bg\)\] {
  background-color: var(--badge-bg) !important;
}

.\!bg-\[var\(--badge-text\)\] {
  background-color: var(--badge-text) !important;
}

.\!bg-\[var\(--button-bg\)\] {
  background-color: var(--button-bg) !important;
}

.\!bg-\[var\(--card-bg-secondary\)\] {
  background-color: var(--card-bg-secondary) !important;
}

.bg-\(--summary-bg\) {
  background-color: var(--summary-bg);
}

.bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,black_5\%\)\] {
  background-color: var(--button-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,black_5\%\)\] {
    background-color: color-mix(in srgb,var(--button-bg),black 5%);
  }
}

.bg-\[color-mix\(in_srgb\,var\(--card-bg-secondary\)\,black_5\%\)\] {
  background-color: var(--card-bg-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-\[color-mix\(in_srgb\,var\(--card-bg-secondary\)\,black_5\%\)\] {
    background-color: color-mix(in srgb,var(--card-bg-secondary),black 5%);
  }
}

.bg-\[color-mix\(in_srgb\,var\(--custom-status-color\)\,white_70\%\)\] {
  background-color: var(--custom-status-color);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-\[color-mix\(in_srgb\,var\(--custom-status-color\)\,white_70\%\)\] {
    background-color: color-mix(in srgb,var(--custom-status-color),white 70%);
  }
}

.bg-\[color-mix\(in_srgb\,var\(--status-bg\)\,white_70\%\)\] {
  background-color: var(--status-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-\[color-mix\(in_srgb\,var\(--status-bg\)\,white_70\%\)\] {
    background-color: color-mix(in srgb,var(--status-bg),white 70%);
  }
}

.bg-\[var\(--avatar-bg\)\] {
  background-color: var(--avatar-bg);
}

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

.bg-\[var\(--button-bg\)\] {
  background-color: var(--button-bg);
}

.bg-\[var\(--button-border\)\] {
  background-color: var(--button-border);
}

.bg-\[var\(--button-variant\)\] {
  background-color: var(--button-variant);
}

.bg-\[var\(--card-bg\)\] {
  background-color: var(--card-bg);
}

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

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

.bg-\[var\(--confirm-modal-bg\)\] {
  background-color: var(--confirm-modal-bg);
}

.bg-\[var\(--confirm-modal-header-bg\)\] {
  background-color: var(--confirm-modal-header-bg);
}

.bg-\[var\(--gray-dark\)\] {
  background-color: var(--gray-dark);
}

.bg-\[var\(--header-bg\)\] {
  background-color: var(--header-bg);
}

.bg-\[var\(--header-border\)\] {
  background-color: var(--header-border);
}

.bg-\[var\(--list-header-bg\)\] {
  background-color: var(--list-header-bg);
}

.bg-\[var\(--login-bg\)\] {
  background-color: var(--login-bg);
}

.bg-\[var\(--overlay-bg\)\] {
  background-color: var(--overlay-bg);
}

.bg-\[var\(--primary\)\] {
  background-color: var(--primary);
}

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

.bg-\[var\(--summary-bg\)\] {
  background-color: var(--summary-bg);
}

.bg-\[var\(--text-primary\)\] {
  background-color: var(--text-primary);
}

.bg-\[var\(--theme-bg\)\] {
  background-color: var(--theme-bg);
}

.bg-\[var\(--toggle-bg\)\] {
  background-color: var(--toggle-bg);
}

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

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

.bg-white\/20 {
  background-color: #fff3;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-white\/20 {
    background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
  }
}

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

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

.fill-\[var\(--card-bg\)\] {
  fill: var(--card-bg);
}

.object-contain {
  object-fit: contain;
}

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

.\!p-0 {
  padding: calc(var(--spacing) * 0) !important;
}

.\!p-6 {
  padding: calc(var(--spacing) * 6) !important;
}

.p-0 {
  padding: calc(var(--spacing) * 0);
}

.p-1 {
  padding: calc(var(--spacing) * 1);
}

.p-2 {
  padding: calc(var(--spacing) * 2);
}

.p-3 {
  padding: calc(var(--spacing) * 3);
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-5 {
  padding: calc(var(--spacing) * 5);
}

.p-6 {
  padding: calc(var(--spacing) * 6);
}

.\!px-0 {
  padding-inline: calc(var(--spacing) * 0) !important;
}

.\!px-3 {
  padding-inline: calc(var(--spacing) * 3) !important;
}

.px-0 {
  padding-inline: calc(var(--spacing) * 0);
}

.px-1 {
  padding-inline: calc(var(--spacing) * 1);
}

.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}

.px-2\.5 {
  padding-inline: calc(var(--spacing) * 2.5);
}

.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}

.px-\[18px\] {
  padding-inline: 18px;
}

.\!py-2 {
  padding-block: calc(var(--spacing) * 2) !important;
}

.py-0 {
  padding-block: calc(var(--spacing) * 0);
}

.py-1 {
  padding-block: calc(var(--spacing) * 1);
}

.py-2 {
  padding-block: calc(var(--spacing) * 2);
}

.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.py-4 {
  padding-block: calc(var(--spacing) * 4);
}

.pt-1 {
  padding-top: calc(var(--spacing) * 1);
}

.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}

.pt-3 {
  padding-top: calc(var(--spacing) * 3);
}

.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}

.pt-\[5px\] {
  padding-top: 5px;
}

.pt-\[22px\] {
  padding-top: 22px;
}

.pr-1 {
  padding-right: calc(var(--spacing) * 1);
}

.pr-2 {
  padding-right: calc(var(--spacing) * 2);
}

.pr-3 {
  padding-right: calc(var(--spacing) * 3);
}

.pr-5 {
  padding-right: calc(var(--spacing) * 5);
}

.pb-1 {
  padding-bottom: calc(var(--spacing) * 1);
}

.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}

.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}

.pb-5 {
  padding-bottom: calc(var(--spacing) * 5);
}

.pb-\[5px\] {
  padding-bottom: 5px;
}

.\!pl-2 {
  padding-left: calc(var(--spacing) * 2) !important;
}

.pl-0 {
  padding-left: calc(var(--spacing) * 0);
}

.pl-3 {
  padding-left: calc(var(--spacing) * 3);
}

.pl-4 {
  padding-left: calc(var(--spacing) * 4);
}

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

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

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

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

.align-\[-0\.125em\] {
  vertical-align: -.125em;
}

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

.\!font-\[\'Inter\'\] {
  font-family: Inter !important;
}

.font-mono {
  font-family: var(--font-mono);
}

.font-sans {
  font-family: var(--font-sans);
}

.\!text-2xl {
  font-size: var(--text-2xl) !important;
  line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
}

.\!text-base {
  font-size: var(--text-base) !important;
  line-height: var(--tw-leading, var(--text-base--line-height)) !important;
}

.\!text-lg {
  font-size: var(--text-lg) !important;
  line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
}

.\!text-sm {
  font-size: var(--text-sm) !important;
  line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
}

.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--tw-leading, var(--text-5xl--line-height));
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}

.text-\[0\.5rem\] {
  font-size: .5rem;
}

.text-\[0\.9rem\] {
  font-size: .9rem;
}

.text-\[1\.1rem\] {
  font-size: 1.1rem;
}

.text-\[2rem\] {
  font-size: 2rem;
}

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

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

.leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}

.leading-none {
  --tw-leading: 1;
  line-height: 1;
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}

.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}

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

.break-all {
  word-break: break-all;
}

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

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

.\!text-\[var\(--badge-text\)\] {
  color: var(--badge-text) !important;
}

.\!text-\[var\(--danger\)\] {
  color: var(--danger) !important;
}

.\!text-\[var\(--text-primary\)\] {
  color: var(--text-primary) !important;
}

.\!text-\[var\(--text-primary-w\)\] {
  color: var(--text-primary-w) !important;
}

.\!text-\[var\(--text-secondary\)\] {
  color: var(--text-secondary) !important;
}

.\!text-\[var\(--text-secondary-w\)\] {
  color: var(--text-secondary-w) !important;
}

.text-\(--summary-text\) {
  color: var(--summary-text);
}

.text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_30\%\)\] {
  color: var(--button-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_30\%\)\] {
    color: color-mix(in srgb,var(--button-text),black 30%);
  }
}

.text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_40\%\)\] {
  color: var(--button-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_40\%\)\] {
    color: color-mix(in srgb,var(--button-text),black 40%);
  }
}

.text-\[color-mix\(in_srgb\,var\(--custom-status-color\)\,black_30\%\)\] {
  color: var(--custom-status-color);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-\[color-mix\(in_srgb\,var\(--custom-status-color\)\,black_30\%\)\] {
    color: color-mix(in srgb,var(--custom-status-color),black 30%);
  }
}

.text-\[color-mix\(in_srgb\,var\(--status-bg\)\,black_45\%\)\] {
  color: var(--status-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .text-\[color-mix\(in_srgb\,var\(--status-bg\)\,black_45\%\)\] {
    color: color-mix(in srgb,var(--status-bg),black 45%);
  }
}

.text-\[var\(--button-text\)\] {
  color: var(--button-text);
}

.text-\[var\(--danger\)\] {
  color: var(--danger);
}

.text-\[var\(--gradient-icon\)\] {
  color: var(--gradient-icon);
}

.text-\[var\(--input-text-dark\)\] {
  color: var(--input-text-dark);
}

.text-\[var\(--input-text-light\)\] {
  color: var(--input-text-light);
}

.text-\[var\(--status-circle\)\] {
  color: var(--status-circle);
}

.text-\[var\(--summary-text\)\] {
  color: var(--summary-text);
}

.text-\[var\(--text-primary\)\] {
  color: var(--text-primary);
}

.text-\[var\(--text-primary-outlined\)\] {
  color: var(--text-primary-outlined);
}

.text-\[var\(--text-primary-reverse\)\] {
  color: var(--text-primary-reverse);
}

.text-\[var\(--text-primary-w\)\] {
  color: var(--text-primary-w);
}

.text-\[var\(--text-secondary\)\] {
  color: var(--text-secondary);
}

.text-\[var\(--text-secondary-w\)\] {
  color: var(--text-secondary-w);
}

.text-\[var\(--theme-icon\)\] {
  color: var(--theme-icon);
}

.text-\[var\(--warning\)\] {
  color: var(--warning);
}

.text-gray-100 {
  color: var(--color-gray-100);
}

.text-white {
  color: var(--color-white);
}

.uppercase {
  text-transform: uppercase;
}

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

.underline-offset-2 {
  text-underline-offset: 2px;
}

.opacity-25 {
  opacity: .25;
}

.opacity-50 {
  opacity: .5;
}

.opacity-70 {
  opacity: .7;
}

.opacity-90 {
  opacity: .9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--primary\)\,transparent_55\%\)\] {
  --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--primary));
}

@supports (color: color-mix(in lab, red, red)) {
  .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--primary\)\,transparent_55\%\)\] {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--primary),transparent 55%));
  }
}

.shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--primary\)\,transparent_55\%\)\] {
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_2px_16px_rgba\(0\,0\,0\,0\.1\)\] {
  --tw-shadow: 0 2px 16px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_2px_16px_rgba\(0\,0\,0\,0\.16\)\] {
  --tw-shadow: 0 2px 16px var(--tw-shadow-color, #00000029);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_5px_4px_0_rgba\(0\,0\,0\,0\.2\)\] {
  --tw-shadow: 0 5px 4px 0 var(--tw-shadow-color, #0003);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_5px_10px_-2px_rgba\(0\,0\,0\,0\.2\)\] {
  --tw-shadow: 0 5px 10px -2px var(--tw-shadow-color, #0003);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.3\)\] {
  --tw-shadow: 0 8px 24px var(--tw-shadow-color, #0000004d);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-\[0_10px_30px_rgba\(0\,0\,0\,0\.2\)\] {
  --tw-shadow: 0 10px 30px var(--tw-shadow-color, #0003);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-2 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-\[var\(--button-bg\)\] {
  --tw-ring-color: var(--button-bg);
}

.outline-0 {
  outline-style: var(--tw-outline-style);
  outline-width: 0;
}

.brightness-\[1\.1\] {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

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

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-\[width\] {
  transition-property: width;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.transition-none {
  transition-property: none;
}

.duration-100 {
  --tw-duration: .1s;
  transition-duration: .1s;
}

.duration-150 {
  --tw-duration: .15s;
  transition-duration: .15s;
}

.duration-\[300ms\] {
  --tw-duration: .3s;
  transition-duration: .3s;
}

.will-change-\[transform\,opacity\] {
  will-change: transform,opacity;
}

.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}

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

.not-last\:mb-2:not(:last-child) {
  margin-bottom: calc(var(--spacing) * 2);
}

.placeholder\:text-sm::placeholder {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.placeholder\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,white_30\%\)\]::placeholder {
  color: var(--button-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .placeholder\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,white_30\%\)\]::placeholder {
    color: color-mix(in srgb,var(--button-text),white 30%);
  }
}

.placeholder\:text-\[var\(--text-secondary\)\]::placeholder {
  color: var(--text-secondary);
}

.before\:pointer-events-none:before {
  content: var(--tw-content);
  pointer-events: none;
}

.before\:absolute:before {
  content: var(--tw-content);
  position: absolute;
}

.before\:inset-y-0:before {
  content: var(--tw-content);
  inset-block: calc(var(--spacing) * 0);
}

.before\:bottom-\[3px\]:before {
  content: var(--tw-content);
  bottom: 3px;
}

.before\:-left-2:before {
  content: var(--tw-content);
  left: calc(var(--spacing) * -2);
}

.before\:left-\[3px\]:before {
  content: var(--tw-content);
  left: 3px;
}

.before\:h-3\.5:before {
  content: var(--tw-content);
  height: calc(var(--spacing) * 3.5);
}

.before\:w-2:before {
  content: var(--tw-content);
  width: calc(var(--spacing) * 2);
}

.before\:w-3\.5:before {
  content: var(--tw-content);
  width: calc(var(--spacing) * 3.5);
}

.before\:rounded-full:before {
  content: var(--tw-content);
  border-radius: 3.40282e38px;
}

.before\:bg-\[var\(--button-text\)\]:before {
  content: var(--tw-content);
  background-color: var(--button-text);
}

.before\:bg-\[var\(--list-header-bg\)\]:before {
  content: var(--tw-content);
  background-color: var(--list-header-bg);
}

.before\:bg-inherit:before {
  content: var(--tw-content);
  background-color: inherit;
}

.peer-checked\:before\:translate-x-5:is(:where(.peer):checked ~ *):before {
  content: var(--tw-content);
  --tw-translate-x: calc(var(--spacing) * 5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.last\:border-b-\[0px\]:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0;
}

.odd\:bg-\[var\(--list-odd\)\]:nth-child(odd) {
  background-color: var(--list-odd);
}

.even\:bg-\[var\(--list-even\)\]:nth-child(2n) {
  background-color: var(--list-even);
}

.read-only\:cursor-not-allowed:read-only {
  cursor: not-allowed;
}

.read-only\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,black_5\%\)\]:read-only {
  background-color: var(--button-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .read-only\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,black_5\%\)\]:read-only {
    background-color: color-mix(in srgb,var(--button-bg),black 5%);
  }
}

.read-only\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_30\%\)\]:read-only {
  color: var(--button-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .read-only\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_30\%\)\]:read-only {
    color: color-mix(in srgb,var(--button-text),black 30%);
  }
}

.read-only\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_40\%\)\]:read-only {
  color: var(--button-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .read-only\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_40\%\)\]:read-only {
    color: color-mix(in srgb,var(--button-text),black 40%);
  }
}

.read-only\:opacity-70:read-only {
  opacity: .7;
}

.focus-within\:border-\[var\(--button-border\)\]:focus-within {
  border-color: var(--button-border);
}

.focus-within\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_7\%\)\]:focus-within {
  background-color: var(--button-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .focus-within\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_7\%\)\]:focus-within {
    background-color: color-mix(in srgb,var(--button-bg),white 7%);
  }
}

.focus-within\:outline:focus-within, .focus-within\:outline-1:focus-within {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.focus-within\:outline-\[var\(--primary\)\]:focus-within {
  outline-color: var(--primary);
}

.focus-within\:brightness-100:focus-within {
  --tw-brightness: brightness(100%);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.focus-within\:brightness-110:focus-within {
  --tw-brightness: brightness(110%);
  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, );
}

@media (hover: hover) {
  .hover\:scale-110:hover {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .hover\:border-\[color-mix\(in_srgb\,var\(--button-border\)\,white_7\%\)\]:hover {
    border-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:border-\[color-mix\(in_srgb\,var\(--button-border\)\,white_7\%\)\]:hover {
      border-color: color-mix(in srgb,var(--button-border),white 7%);
    }
  }

  .hover\:border-\[color-mix\(in_srgb\,var\(--button-border\)\,white_10\%\)\]:hover {
    border-color: var(--button-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:border-\[color-mix\(in_srgb\,var\(--button-border\)\,white_10\%\)\]:hover {
      border-color: color-mix(in srgb,var(--button-border),white 10%);
    }
  }

  .hover\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_7\%\)\]:hover {
    background-color: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_7\%\)\]:hover {
      background-color: color-mix(in srgb,var(--button-bg),white 7%);
    }
  }

  .hover\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_10\%\)\]:hover {
    background-color: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_10\%\)\]:hover {
      background-color: color-mix(in srgb,var(--button-bg),white 10%);
    }
  }

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

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

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

  .hover\:bg-gray-200:hover {
    background-color: var(--color-gray-200);
  }

  .hover\:text-\[var\(--text-primary-reverse\)\]:hover {
    color: var(--text-primary-reverse);
  }

  .hover\:text-\[var\(--text-primary-w\)\]:hover {
    color: var(--text-primary-w);
  }

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

  .hover\:shadow-md:hover {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .hover\:brightness-75:hover {
    --tw-brightness: brightness(75%);
    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, );
  }

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

  .hover\:brightness-110:hover {
    --tw-brightness: brightness(110%);
    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, );
  }

  .hover\:brightness-120:hover {
    --tw-brightness: brightness(120%);
    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, );
  }

  .hover\:brightness-125:hover {
    --tw-brightness: brightness(125%);
    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, );
  }

  .hover\:brightness-150:hover {
    --tw-brightness: brightness(150%);
    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, );
  }

  .hover\:brightness-\[0\.9\]:hover {
    --tw-brightness: brightness(.9);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .hover\:brightness-\[1\.1\]:hover {
    --tw-brightness: brightness(1.1);
    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, );
  }

  .hover\:brightness-\[1\.2\]:hover {
    --tw-brightness: brightness(1.2);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .hover\:brightness-\[1\.4\]:hover {
    --tw-brightness: brightness(1.4);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
}

.focus\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_10\%\)\]:focus {
  background-color: var(--button-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .focus\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_10\%\)\]:focus {
    background-color: color-mix(in srgb,var(--button-bg),white 10%);
  }
}

.focus\:outline:focus {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.focus\:outline-\[var\(--primary\)\]:focus {
  outline-color: var(--primary);
}

@media (hover: hover) {
  .hover\:enabled\:border-\[var\(--button-border\)\!important\]:hover:enabled {
    border-color: var(--button-border) !important;
  }

  .hover\:enabled\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_10\%\)\]:hover:enabled {
    background-color: var(--button-bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:enabled\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,white_10\%\)\]:hover:enabled {
      background-color: color-mix(in srgb,var(--button-bg),white 10%);
    }
  }
}

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

.disabled\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,black_5\%\)\]:disabled {
  background-color: var(--button-bg);
}

@supports (color: color-mix(in lab, red, red)) {
  .disabled\:bg-\[color-mix\(in_srgb\,var\(--button-bg\)\,black_5\%\)\]:disabled {
    background-color: color-mix(in srgb,var(--button-bg),black 5%);
  }
}

.disabled\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_40\%\)\]:disabled {
  color: var(--button-text);
}

@supports (color: color-mix(in lab, red, red)) {
  .disabled\:text-\[color-mix\(in_srgb\,var\(--button-text\)\,black_40\%\)\]:disabled {
    color: color-mix(in srgb,var(--button-text),black 40%);
  }
}

.disabled\:opacity-40:disabled {
  opacity: .4;
}

.disabled\:opacity-70:disabled {
  opacity: .7;
}

.data-\[show\=true\]\:visible[data-show="true"] {
  visibility: visible;
}

.data-\[state\=closed\]\:animate-\[fadeOut_0\.2s_ease-in\][data-state="closed"] {
  animation: .2s ease-in fadeOut;
}

.data-\[state\=open\]\:animate-\[fadeIn_0\.2s_ease-out\][data-state="open"] {
  animation: .2s ease-out fadeIn;
}

@media not all and (min-width: 900px) {
  .max-\[900px\]\:mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .max-\[900px\]\:mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .max-\[900px\]\:w-full {
    width: 100%;
  }

  .max-\[900px\]\:min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .max-\[900px\]\:px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .max-\[900px\]\:px-\[7px\] {
    padding-inline: 7px;
  }

  .max-\[900px\]\:pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .max-\[900px\]\:pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
}

@media not all and (min-width: 64rem) {
  .max-lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media not all and (min-width: 48rem) {
  .max-md\:mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .max-md\:mr-0 {
    margin-right: calc(var(--spacing) * 0);
  }

  .max-md\:max-h-full {
    max-height: 100%;
  }

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

  .max-md\:flex-row {
    flex-direction: row;
  }

  .max-md\:justify-start {
    justify-content: flex-start;
  }

  .max-md\:border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .max-md\:border-\(--summary-border\), .max-md\:border-\[var\(--summary-border\)\] {
    border-color: var(--summary-border);
  }

  .max-md\:p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .max-md\:p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .max-md\:\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }

  .max-md\:\!py-4 {
    padding-block: calc(var(--spacing) * 4) !important;
  }

  .max-md\:py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .max-md\:text-center {
    text-align: center;
  }

  .first\:max-md\:border-t-0:first-child, .max-md\:first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }
}

@media not all and (min-width: 40rem) {
  .max-sm\:col-auto {
    grid-column: auto;
  }

  .max-sm\:mx-0 {
    margin-inline: calc(var(--spacing) * 0);
  }

  .max-sm\:h-16 {
    height: calc(var(--spacing) * 16);
  }

  .max-sm\:h-24 {
    height: calc(var(--spacing) * 24);
  }

  .max-sm\:w-16 {
    width: calc(var(--spacing) * 16);
  }

  .max-sm\:w-24 {
    width: calc(var(--spacing) * 24);
  }

  .max-sm\:w-full {
    width: 100%;
  }

  .max-sm\:basis-full {
    flex-basis: 100%;
  }

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

  .max-sm\:flex-col {
    flex-direction: column;
  }

  .max-sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .max-sm\:gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .max-sm\:self-start {
    align-self: flex-start;
  }

  .max-sm\:p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .max-sm\:p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .max-sm\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .max-sm\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .max-sm\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
}

@media (min-width: 40rem) {
  .sm\:w-1\/3 {
    width: 33.3333%;
  }

  .sm\:w-1\/6 {
    width: 16.6667%;
  }

  .sm\:w-2\/3 {
    width: 66.6667%;
  }

  .sm\:w-3\/4 {
    width: 75%;
  }

  .sm\:w-5\/6 {
    width: 83.3333%;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:max-w-full {
    max-width: 100%;
  }

  .sm\:flex-0 {
    flex: 0;
  }

  .sm\:\!text-xs {
    font-size: var(--text-xs) !important;
    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;
  }
}

@media (min-width: 48rem) {
  .md\:mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.3333%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-1\/6 {
    width: 16.6667%;
  }

  .md\:w-1\/12 {
    width: 8.33333%;
  }

  .md\:w-2\/3 {
    width: 66.6667%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-5\/6 {
    width: 83.3333%;
  }

  .md\:w-5\/12 {
    width: 41.6667%;
  }

  .md\:w-7\/12 {
    width: 58.3333%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:max-w-full {
    max-width: 100%;
  }

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

  .md\:grid-cols-\[minmax\(0\,260px\)_auto\] {
    grid-template-columns: minmax(0, 260px) auto;
  }

  .md\:grid-cols-\[minmax\(170px\,1fr\)_minmax\(0\,5fr\)\] {
    grid-template-columns: minmax(170px, 1fr) minmax(0, 5fr);
  }

  .md\:flex-row {
    flex-direction: row;
  }

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

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

  .md\:gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

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

  .md\:\!text-3xl {
    font-size: var(--text-3xl) !important;
    line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
  }
}

@media (min-width: 64rem) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:right-0 {
    right: calc(var(--spacing) * 0);
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:\!m-0 {
    margin: calc(var(--spacing) * 0) !important;
  }

  .lg\:mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:min-h-\[49px\] {
    min-height: 49px;
  }

  .lg\:\!w-full {
    width: 100% !important;
  }

  .lg\:w-1\/3 {
    width: 33.3333%;
  }

  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-1\/6 {
    width: 16.6667%;
  }

  .lg\:w-1\/12 {
    width: 8.33333%;
  }

  .lg\:w-5\/6 {
    width: 83.3333%;
  }

  .lg\:w-5\/12 {
    width: 41.6667%;
  }

  .lg\:w-7\/12 {
    width: 58.3333%;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:max-w-\[380px\] {
    max-width: 380px;
  }

  .lg\:max-w-full {
    max-width: 100%;
  }

  .lg\:min-w-\[var\(--responsive-table-min-width\)\] {
    min-width: var(--responsive-table-min-width);
  }

  .lg\:flex-1 {
    flex: 1;
  }

  .lg\:\[grid-template-columns\:repeat\(3\,1fr\)_auto\] {
    grid-template-columns: repeat(3, 1fr) auto;
  }

  .lg\:\[grid-template-columns\:repeat\(4\,1fr\)_auto\] {
    grid-template-columns: repeat(4, 1fr) auto;
  }

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

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

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

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

  .lg\:grid-cols-\[1fr_1fr_1fr_1fr\] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.7fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,0\.8fr\)_minmax\(0\,1\.4fr\)_auto\] {
    grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,0\.8fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,1\.4fr\)_auto\] {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,1\.7fr\)_auto\] {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.8fr\)_minmax\(0\,1\.35fr\)_auto_minmax\(0\,0\.55fr\)\] {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr) auto minmax(0, .55fr);
  }

  .lg\:grid-cols-\[minmax\(0\,0\.9fr\)_minmax\(0\,0\.9fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.9fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.9fr\)_minmax\(0\,1fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.9fr\)_minmax\(150px\,0\.55fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .9fr) minmax(150px, .55fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,0\.65fr\)_minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1\.25fr\)_minmax\(280px\,0\.9fr\)\] {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr);
  }

  .lg\:grid-cols-\[minmax\(0\,1\.35fr\)_auto\] {
    grid-template-columns: minmax(0, 1.35fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1\.35fr\)_auto_auto\] {
    grid-template-columns: minmax(0, 1.35fr) auto auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1fr\)_auto_minmax\(0\,1fr\)_auto_auto\] {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_auto_auto\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  }

  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,5fr\)\] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);
  }

  .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,0\.75fr\)\] {
    grid-template-columns: minmax(0, 2fr) minmax(0, .75fr);
  }

  .lg\:grid-cols-\[minmax\(100px\,1fr\)_minmax\(100px\,1fr\)_auto_minmax\(100px\,1fr\)_minmax\(100px\,1fr\)\] {
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) auto minmax(100px, 1fr) minmax(100px, 1fr);
  }

  .lg\:grid-cols-\[minmax\(140px\,1fr\)_minmax\(140px\,1fr\)_minmax\(140px\,1fr\)_minmax\(140px\,1fr\)_auto\] {
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(180px\,1fr\)_minmax\(180px\,1fr\)_minmax\(180px\,1fr\)_auto\] {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(180px\,1fr\)_minmax\(240px\,1fr\)_minmax\(180px\,1fr\)_auto\] {
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr) minmax(180px, 1fr) auto;
  }

  .lg\:grid-cols-\[minmax\(200px\,2fr\)_minmax\(100px\,auto\)_repeat\(3\,minmax\(100px\,1fr\)\)\] {
    grid-template-columns: minmax(200px, 2fr) minmax(100px, auto) repeat(3, minmax(100px, 1fr));
  }

  .lg\:grid-cols-\[minmax\(240px\,1fr\)_minmax\(170px\,1fr\)_minmax\(170px\,1fr\)_auto\] {
    grid-template-columns: minmax(240px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

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

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

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

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

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

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

  .lg\:gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .lg\:gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .lg\:gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:overflow-visible {
    overflow: visible;
  }

  .lg\:\!rounded-none {
    border-radius: 0 !important;
  }

  .lg\:rounded {
    border-radius: .25rem;
  }

  .lg\:\!rounded-b-none {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .lg\:\!border-0 {
    border-style: var(--tw-border-style) !important;
    border-width: 0 !important;
  }

  .lg\:border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .lg\:border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .lg\:\!border-b-\[1px\] {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 1px !important;
  }

  .lg\:\!border-\[var\(--list-border\)\] {
    border-color: var(--list-border) !important;
  }

  .lg\:\!border-b-\[var\(--list-border\)\] {
    border-bottom-color: var(--list-border) !important;
  }

  .lg\:p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .lg\:\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }

  .lg\:px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .lg\:px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .lg\:px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .lg\:\!py-0 {
    padding-block: calc(var(--spacing) * 0) !important;
  }

  .lg\:py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .lg\:pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .lg\:last\:\!rounded:last-child {
    border-radius: .25rem !important;
  }

  .lg\:last\:\!border-b-0:last-child {
    border-bottom-style: var(--tw-border-style) !important;
    border-bottom-width: 0 !important;
  }
}

@media (min-width: 80rem) {
  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:col-span-6 {
    grid-column: span 6 / span 6;
  }

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

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

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

  .xl\:grid-cols-\[minmax\(8rem\,0\.7fr\)_minmax\(14rem\,1\.5fr\)_minmax\(14rem\,1\.5fr\)\] {
    grid-template-columns: minmax(8rem, .7fr) minmax(14rem, 1.5fr) minmax(14rem, 1.5fr);
  }

  .xl\:grid-cols-\[minmax\(220px\,1fr\)_minmax\(220px\,1fr\)_minmax\(260px\,1fr\)_minmax\(180px\,1fr\)_auto\] {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(260px, 1fr) minmax(180px, 1fr) auto;
  }

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

.\[\&_\.react-datepicker-wrapper\]\:w-full .react-datepicker-wrapper, .\[\&_button\]\:w-full button {
  width: 100%;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_svg\]\:text-\[var\(--input-icon\)\] svg {
  color: var(--input-icon);
}

.\[\&_svg\]\:opacity-70 svg {
  opacity: .7;
}

.\[\&\+div\]\:mt-4 + div {
  margin-top: calc(var(--spacing) * 4);
}

.\[\&\+li\]\:mt-2 + li {
  margin-top: calc(var(--spacing) * 2);
}

.\[\&\:\:-webkit-slider-thumb\]\:h-\[1\.1rem\]::-webkit-slider-thumb {
  height: 1.1rem;
}

.\[\&\:\:-webkit-slider-thumb\]\:w-\[1\.1rem\]::-webkit-slider-thumb {
  width: 1.1rem;
}

.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb {
  cursor: pointer;
}

.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
  appearance: none;
}

.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[50px\]::-webkit-slider-thumb {
  border-radius: 50px;
}

.\[\&\:\:-webkit-slider-thumb\]\:bg-\[var\(--button-text\)\]::-webkit-slider-thumb {
  background-color: var(--button-text);
}

@property --tw-border-spacing-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-spacing-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

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