:root{
  /* FOREGROUND COLORS */
  --gen-color-foreground-primary: #fefefe;
  --gen-color-foreground-secondary: #b69984;
  --gen-color-foreground-tertiary: #fefefe99;
  --gen-color-foreground-disabled: #fefefe4d;
  --gen-color-foreground-inverse: #181e26;
  --gen-color-foreground-success: #45b445;
  --gen-color-foreground-warning: #e4c00e;
  --gen-color-foreground-error: #ff7366;

  /* BACKGROUND COLORS */
  --gen-color-background-default: #181e26;
  --gen-color-background-information: #fefefe1a;
  --gen-color-background-success: #1b461b;
  --gen-color-background-warning: #483d05;
  --gen-color-background-error: #7e0b00;
  --gen-color-background-layer-1: #1e242d;
  --gen-color-background-layer-2: #222933;
  --gen-color-background-layer-3: #272e38;

  /* ACCENT COLORS */
  --gen-color-accent-solid: #00aeef;
  --gen-color-accent-subtle: #00aeef66;
  --gen-color-accent-gradient: linear-gradient(45deg, #0098d1 0%, #13bfff 100%);
  --gen-color-accent-hover: #0bbeff;
  --gen-color-accent-pressed: #0091c6;
  --gen-color-accent-disabled: #7878784d;

  /* LIST COLORS */
  --gen-color-background-lists-default: #00000000;
  --gen-color-background-lists-hover: #ffffff0a;
  --gen-color-background-lists-pressed: #ffffff0a;
  --gen-color-background-lists-selected: #4fd0ff14;

  /* SOLID COLORS */
  --gen-color-background-solid-default: #00000040;
  --gen-color-background-solid-hover: #00000021;
  --gen-color-background-solid-pressed: #0000004d;
  --gen-color-background-solid-disabled: #0000001a;

  /* HIGHLIGHT COLORS */
  --gen-color-highlight-success: #45b445;
  --gen-color-highlight-warning: #e4c00e;
  --gen-color-highlight-error: #ff7366;
  --gen-color-highlight-caution: #ff7700;
  --gen-color-highlight-inactive: #606469;

  --gen-color-highlight-subtle-success: #45b44566;
  --gen-color-highlight-subtle-warning: #e4c00e66;
  --gen-color-highlight-subtle-error: #ff736666;
  --gen-color-highlight-subtle-caution: #ff770066;
  --gen-color-highlight-subtle-inactive: #60646966;

  /* DATA VISUALIZATION COLORS */
  --gen-color-datavisualization-blue: #00aeef;
  --gen-color-datavisualization-green: #45b445;
  --gen-color-datavisualization-orange: #ff7700;
  --gen-color-datavisualization-yellow: #e4c00e;
  --gen-color-datavisualization-red: #ff7366;
  --gen-color-datavisualization-purple: #bb89ea;

  --gen-color-datavisualization-subtle-blue: #00aeef66;
  --gen-color-datavisualization-subtle-green: #45b44566;
  --gen-color-datavisualization-subtle-orange: #ff770066;
  --gen-color-datavisualization-subtle-yellow: #e4c00e66;
  --gen-color-datavisualization-subtle-red: #ff736666;
  --gen-color-datavisualization-subtle-purple: #bb89ea66;

  /* BORDER COLORS */
  --gen-color-border-primary: #fefefe4d;
  --gen-color-border-secondary: #fefefe1a;

  --font-family-base: OpenSans, Verdana, Arial;
  --font-size-base: 16px;
  --font-color: var(--gen-color-foreground-primary);
  --font-line-height: 1.5;
  --icon-size-base: 24px;

  --focus: 1px dotted var(--gen-color-accent-hover);

  --header-bg-color: var(--gen-color-background-layer-2);
  --header-fg-color: var(--gen-color-foreground-primary);
  --header-height: 56px;

  --footer-bg-color: var(--gen-color-background-layer-2);
  --footer-fg-color: var(--gen-color-foreground-primary);
  --footer-height: 24px;

  --sidemenu-bg-color: var(--gen-color-background-layer-1);
  --sidemenu-fg-color: var(--gen-color-foreground-primary);

  --sidepane-width: 400px;
  --sidepane-icon-width: 28px;

  --input-bg-color: var(--gen-color-background-solid-default);
  --input-bg-color-disable: var(--gen-color-background-solid-disabled);
  --input-bg-color-hover: var(--gen-color-background-solid-hover);
  --input-bg-color-readonly: transparent;
  --input-fg-color: var(--gen-color-foreground-primary);

  --list-bg-color-hover: var(--gen-color-background-lists-hover);
  --list-bg-color-active: var(--gen-color-background-lists-selected);

  --dropdown-bg-color: var(--gen-color-background-layer-2);

  --selected-bg-color: var(--gen-color-background-lists-selected);
  --active-bg-color: var(--gen-color-accent-solid);

  --sidepane-bg-color: var(--gen-color-background-layer-1);
  --sidepane-fg-color: var(--gen-color-foreground-primary);

  --divider-color: var(--gen-color-border-secondary);
  --border-color: var(--gen-color-border-primary);
  --gen-border-color: var(--gen-color-border-secondary);
  --text-color: var(--gen-color-foreground-primary);
  --text-color-1: var(--gen-color-foreground-primary);
  --text-color-2: var(--gen-color-foreground-secondary);
  --text-color-3: var(--gen-color-foreground-tertiary);
  --gen-text-secondary: var(--gen-color-foreground-secondary);
  --gen-text-muted: var(--gen-color-foreground-tertiary);
}

body[data-theme="gelato-light"],
gen-design-system-provider[data-theme="gelato-light"] {
  /* FOREGROUND COLORS */
  --gen-color-foreground-primary: #1f2a37;
  --gen-color-foreground-secondary: #425466;
  --gen-color-foreground-tertiary: #6b7280;
  --gen-color-foreground-disabled: #9ca3af;
  --gen-color-foreground-inverse: #ffffff;
  --gen-color-foreground-success: #1f7a3e;
  --gen-color-foreground-warning: #b45309;
  --gen-color-foreground-error: #c62828;

  /* BACKGROUND COLORS */
  --gen-color-background-default: #f6f7f9;
  --gen-color-background-information: #1f2a371a;
  --gen-color-background-success: #e8f5e9;
  --gen-color-background-warning: #fff7e0;
  --gen-color-background-error: #ffebee;
  --gen-color-background-layer-1: #ffffff;
  --gen-color-background-layer-2: #f1f3f5;
  --gen-color-background-layer-3: #e7ebf0;

  /* ACCENT COLORS */
  --gen-color-accent-solid: #00aeef;
  --gen-color-accent-subtle: #00aeef33;
  --gen-color-accent-gradient: linear-gradient(45deg, #0098d1 0%, #13bfff 100%);
  --gen-color-accent-hover: #0bbeff;
  --gen-color-accent-pressed: #0091c6;
  --gen-color-accent-disabled: #7878784d;

  /* LIST COLORS */
  --gen-color-background-lists-default: #00000000;
  --gen-color-background-lists-hover: #0000000a;
  --gen-color-background-lists-pressed: #0000000f;
  --gen-color-background-lists-selected: #00aeef1a;

  /* SOLID COLORS */
  --gen-color-background-solid-default: #0000000f;
  --gen-color-background-solid-hover: #00000014;
  --gen-color-background-solid-pressed: #0000001f;
  --gen-color-background-solid-disabled: #0000000a;

  /* HIGHLIGHT COLORS */
  --gen-color-highlight-success: #2e7d32;
  --gen-color-highlight-warning: #f2b705;
  --gen-color-highlight-error: #d32f2f;
  --gen-color-highlight-caution: #ff7700;
  --gen-color-highlight-inactive: #9aa0a6;

  --gen-color-highlight-subtle-success: #2e7d3233;
  --gen-color-highlight-subtle-warning: #f2b70533;
  --gen-color-highlight-subtle-error: #d32f2f33;
  --gen-color-highlight-subtle-caution: #ff770033;
  --gen-color-highlight-subtle-inactive: #9aa0a633;

  /* DATA VISUALIZATION COLORS */
  --gen-color-datavisualization-blue: #00aeef;
  --gen-color-datavisualization-green: #2e7d32;
  --gen-color-datavisualization-orange: #ff7700;
  --gen-color-datavisualization-yellow: #f2b705;
  --gen-color-datavisualization-red: #d32f2f;
  --gen-color-datavisualization-purple: #7b4dd6;

  --gen-color-datavisualization-subtle-blue: #00aeef33;
  --gen-color-datavisualization-subtle-green: #2e7d3233;
  --gen-color-datavisualization-subtle-orange: #ff770033;
  --gen-color-datavisualization-subtle-yellow: #f2b70533;
  --gen-color-datavisualization-subtle-red: #d32f2f33;
  --gen-color-datavisualization-subtle-purple: #7b4dd633;

  /* BORDER COLORS */
  --gen-color-border-primary: #1f2a3733;
  --gen-color-border-secondary: #1f2a371a;

  --font-family-base: OpenSans, Verdana, Arial;
  --font-size-base: 15px;
  --font-color: var(--gen-color-foreground-primary);
  --font-line-height: 1.5;
  --icon-size-base: 24px;

  --focus: 1px dotted var(--gen-color-accent-hover);

  --header-bg-color: var(--gen-color-background-layer-2);
  --header-fg-color: var(--gen-color-foreground-primary);
  --header-height: 56px;

  --footer-bg-color: var(--gen-color-background-layer-2);
  --footer-fg-color: var(--gen-color-foreground-primary);
  --footer-height: 24px;

  --sidemenu-bg-color: var(--gen-color-background-layer-1);
  --sidemenu-fg-color: var(--gen-color-foreground-primary);

  --sidepane-width: 400px;
  --sidepane-icon-width: 28px;

  --input-bg-color: var(--gen-color-background-solid-default);
  --input-bg-color-disable: var(--gen-color-background-solid-disabled);
  --input-bg-color-hover: var(--gen-color-background-solid-hover);
  --input-bg-color-readonly: transparent;
  --input-fg-color: var(--gen-color-foreground-primary);

  --list-bg-color-hover: var(--gen-color-background-lists-hover);
  --list-bg-color-active: var(--gen-color-background-lists-selected);

  --dropdown-bg-color: var(--gen-color-background-layer-2);

  --selected-bg-color: var(--gen-color-background-lists-selected);
  --active-bg-color: var(--gen-color-accent-solid);

  --sidepane-bg-color: var(--gen-color-background-layer-1);
  --sidepane-fg-color: var(--gen-color-foreground-primary);

  --divider-color: var(--gen-color-border-secondary);
  --border-color: var(--gen-color-border-primary);
  --gen-border-color: var(--gen-color-border-secondary);
  --text-color: var(--gen-color-foreground-primary);
  --text-color-1: var(--gen-color-foreground-primary);
  --text-color-2: var(--gen-color-foreground-secondary);
  --text-color-3: var(--gen-color-foreground-tertiary);
  --gen-text-secondary: var(--gen-color-foreground-secondary);
  --gen-text-muted: var(--gen-color-foreground-tertiary);
}
.dx-scrollable-content{
    background: var(--gen-color-background-layer-3);
}