@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap);
/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --display-font-family: Open Sans, sans-serif;
  --display-small: 700 1.5rem/2rem 'Open Sans', sans-serif;
  --display-medium: 700 1.75rem/2.25rem 'Open Sans', sans-serif;
  --display-large: 700 2rem/2.5rem 'Open Sans', sans-serif;

  --heading-font-family: Open Sans, sans-serif;
  --heading-h1: 700 1.25rem/1.75rem 'Open Sans', sans-serif;
  --heading-h2: 700 1rem/1.5rem 'Open Sans', sans-serif;
  --heading-h3: 700 0.875rem/1.25rem 'Open Sans', sans-serif;
  --heading-h4: 700 0.75rem/1.125rem 'Open Sans', sans-serif;
  /* TODO SKY: remove h5 in code */
  --heading-h5: 700 0.875rem/1.25rem 'Open Sans', sans-serif;

  --text-font-family: Open Sans, sans-serif;
  --text-t2-line-height: 1.5rem;
  --text-t2-font-size: 1rem;
  --text-t2-regular: 400 1rem/1.5rem 'Open Sans', sans-serif;
  --text-t2-semibold: 600 1rem/1.5rem 'Open Sans', sans-serif;
  --text-t2-bold: 700 1rem/1.5rem 'Open Sans', sans-serif;
  --text-t3-line-height: 1.25rem;
  --text-t3-font-size: 0.875rem;
  --text-t3-regular: 400 0.875rem/1.25rem 'Open Sans', sans-serif;
  --text-t3-semibold: 600 0.875rem/1.25rem 'Open Sans', sans-serif;
  --text-t3-bold: 700 0.875rem/1.25rem 'Open Sans', sans-serif;
  --text-t4-line-height: 1.125rem;
  --text-t4-font-size: 0.75rem;
  --text-t4-regular: 400 0.75rem/1.125rem 'Open Sans', sans-serif;
  --text-t4-semibold: 600 0.75rem/1.125rem 'Open Sans', sans-serif;
  --text-t4-bold: 700 0.75rem/1.125rem 'Open Sans', sans-serif;
  --text-t5-line-height: 1rem;
  --text-t5-font-size: 0.625rem;
  --text-t5-regular: 400 0.625rem/1rem 'Open Sans', sans-serif;
  --text-t5-semibold: 600 0.625rem/1rem 'Open Sans', sans-serif;
  --text-t5-bold: 700 0.625rem/1rem 'Open Sans', sans-serif;
  --text-paragraph-spacing: 8px;

  --editor-font-family: Menlo, Monaco, "Courier New", monospace;
  --editor-medium: 400 0.875rem/1.25rem Menlo, Monaco, '"Courier New"', monospace;
  --editor-small: 400 0.75rem/1.125rem Menlo, Monaco, '"Courier New"', monospace;

}

/**
 * Stylesheet for Neo components.
 *
 * NOTE: If you're here wondering what `neo` styles are — you're at the right place!
 * The `neo-` prefix/identifier helps differentiate our next-generation component variants.
 */

/* GENERAL */
/* Label */
.neo-label {
    margin-bottom: 0.25rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    fill: var(--color-on-foreground-subtle);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-on-foreground-subtle)
}

/* Meta / Error */
.neo-meta-container {
    margin-top: 0.25rem;
    display: flex;
    align-items: flex-start;
    font-size: 0.75rem;
    line-height: 1rem
}

.neo-meta-container .neo-error-message-text {
    color: var(--color-on-danger-border)
}

.neo-meta-container .neo-error-icon {
    margin-right: 0.25rem;
    fill: var(--color-on-danger-border)
}

/* ---------------------------- */

/* INPUT GROUP */
/* Positioning styles for grouped neo components */

.input-group > .input-group-slot:first-child:not(:last-child) .neo-groupable {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px
}

.input-group > .input-group-slot:last-child:not(:first-child) .neo-groupable {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px
}

.input-group > .input-group-slot:last-child:not(:first-child) .neo-groupable:not(:focus-within) {
    border-left-color: transparent
}

.input-group > .input-group-slot:not(:first-child):not(:last-child) .neo-groupable {
    border-radius: 0px
}

.input-group > .input-group-slot:not(:first-child):not(:last-child) .neo-groupable:not(:focus-within) {
    border-left-color: transparent
}

/* ---------------------------- */

/* BUTTON */
/* Base styles for neo button variants */
.button-neo-base {
    border-radius: 0.25rem;
    border-width: 0px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700
}

.button-neo-base.button-neo-slim {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}

/* neo-primary Button */
/* Using button.<class> for higher specificity to override Tailwind base preflight */
button.button-neo-primary {
    background-color: var(--color-neo-primary);
    fill: var(--color-on-primary);
    color: var(--color-on-primary);
    border-radius: 0.25rem;
    border-width: 0px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700
}
button.button-neo-primary.button-neo-slim {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}

button.button-neo-primary:hover {
    background-color: var(--color-neo-primary-hover)
}

button.button-neo-primary:active {
    background-color: var(--color-neo-primary-active)
}

button.button-neo-primary:focus {
    background-color: var(--color-neo-primary);
    outline-style: solid;
    outline-color: var(--color-neo-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--color-on-primary)
}

button.button-neo-primary.button-neo-slim:focus {
    outline-offset: -1px;
    --tw-ring-offset-width: 0px
}

button.button-neo-primary:disabled,
button.button-neo-primary:disabled:hover,
button.button-neo-primary:disabled:active,
button.button-neo-primary:disabled:focus {
    cursor: not-allowed;
    background-color: var(--color-panel-queue-highlight);
    fill: var(--color-on-background-disabled-text);
    color: var(--color-on-background-disabled-text);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

/* neo-secondary Button */
button.button-neo-secondary {
    border-color: var(--color-neo-primary);
    background-color: var(--color-background);
    fill: var(--color-neo-primary);
    color: var(--color-neo-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--color-neo-primary);
    border-radius: 0.25rem;
    border-width: 0px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700
}
button.button-neo-secondary.button-neo-slim {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}

button.button-neo-secondary:hover {
    background-color: var(--color-on-background-menu)
}

button.button-neo-secondary:active {
    background-color: var(--color-panel-queue-highlight)
}

button.button-neo-secondary:focus {
    border-width: 0px;
    background-color: var(--color-background);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--color-neo-primary)
}

button.button-neo-secondary.button-neo-slim:focus {
    --tw-ring-offset-width: 0px
}

button.button-neo-secondary:disabled,
button.button-neo-secondary:disabled:hover,
button.button-neo-secondary:disabled:active,
button.button-neo-secondary:disabled:focus {
    cursor: not-allowed;
    background-color: var(--color-on-background-menu);
    fill: var(--color-on-background-disabled-text);
    color: var(--color-on-background-disabled-text);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--outline-subtlest)
}

/* ---------------------------- */

/* SELECT */
/* Base styles for neo Select variants */
.select-neo-base {
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: var(--outline-input);
    background-color: var(--color-background);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    line-height: 20px
}

.select-neo-base:hover {
    background-color: var(--color-on-background-subtle)
}

.select-neo-base:not([aria-disabled='true']):not(.neo-error):focus {
    border-color: var(--color-neo-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--color-neo-primary)
}

.select-neo-base[aria-disabled='true'],
.select-neo-base[aria-disabled='true']:hover,
.select-neo-base[aria-disabled='true']:focus {
    cursor: not-allowed;
    background-color: var(--color-on-background-menu);
    color: var(--color-disabled-text-neo)
}

/* Container */
.select-neo-container {
    height: 40px;
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: var(--outline-input);
    background-color: var(--color-background);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    line-height: 20px
}
.select-neo-container:hover {
    background-color: var(--color-on-background-subtle)
}
.select-neo-container:not([aria-disabled='true']):not(.neo-error):focus {
    border-color: var(--color-neo-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--color-neo-primary)
}
.select-neo-container[aria-disabled='true'],.select-neo-container[aria-disabled='true']:hover,.select-neo-container[aria-disabled='true']:focus {
    cursor: not-allowed;
    background-color: var(--color-on-background-menu);
    color: var(--color-disabled-text-neo)
}

.select-neo-container.select-neo-slim {
    height: 32px
}

.select-neo-container.neo-error {
    border-color: var(--color-on-danger-border)
}

/* Container internal elements */
.select-neo-container .select-neo-chevron {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    fill: var(--color-on-foreground-subtle)
}

.select-neo-container .select-neo-option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 20px;
    color: var(--color-global-search-bg)
}

.select-neo-container .select-neo-option-text-disabled {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 20px;
    color: var(--color-disabled-text-neo)
}

.select-neo-container .select-neo-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 20px;
    color: var(--color-on-foreground-placeholder)
}

/* Dropdown */
.select-neo-dropdown {
    z-index: 50;
    overflow-y: auto;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: var(--outline-input);
    background-color: var(--color-background);
    --tw-shadow: -1px -1px 8px 0 rgba(29, 29, 29, 0.03), 1px 1px 8px 0 rgba(29, 29, 29, 0.08);
    --tw-shadow-colored: -1px -1px 8px 0 var(--tw-shadow-color), 1px 1px 8px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

/* Dropdown options */
.select-neo-dropdown .select-neo-option {
    display: flex;
    height: 40px;
    cursor: pointer;
    align-items: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.select-neo-dropdown .select-neo-option:first-of-type {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem
}
.select-neo-dropdown .select-neo-option:last-of-type {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem
}
.select-neo-dropdown .select-neo-option:hover {
    background-color: var(--color-on-background-subtle)
}
.select-neo-dropdown .select-neo-option:focus {
    background-color: var(--color-on-background-selected)
}

.select-neo-dropdown .select-neo-option[aria-selected='true'] {
    background-color: var(--color-on-background-selected)
}

.select-neo-dropdown .select-neo-option[aria-disabled='true'],
.select-neo-dropdown .select-neo-option[aria-disabled='true']:hover,
.select-neo-dropdown .select-neo-option[aria-disabled='true']:focus {
    cursor: not-allowed;
    background-color: var(--color-background);
    color: var(--color-disabled-text-neo)
}

.select-neo-dropdown .select-neo-option-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 20px;
    color: var(--color-global-search-bg)
}

.select-neo-dropdown .select-neo-option-text-disabled {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 20px;
    color: var(--color-disabled-text-neo)
}

/* ---------------------------- */

/* INPUT */
.input-neo-container:not(disabled) {
    display: flex;
    height: 40px;
    align-items: center;
    border-radius: 0.25rem;
    border-width: 1px;
    border-color: var(--outline-input);
    background-color: var(--color-background);
    padding-left: 0.375rem;
    padding-right: 0.375rem
}
.input-neo-container:not(disabled):hover {
    background-color: var(--color-on-background-subtle)
}

.input-neo-container:not(disabled):not(.neo-error):focus-within {
    border-color: var(--color-neo-primary);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-inset: inset;
    --tw-ring-color: var(--color-neo-primary)
}

.input-neo-container.neo-error {
    border-color: var(--color-on-danger-border)
}

.input-neo-container.neo-disabled {
    cursor: not-allowed;
    background-color: var(--color-on-background-menu);
    fill: var(--color-disabled-text-neo)
}

.input-neo-container.neo-disabled:hover {
    background-color: var(--color-on-background-menu)
}

.input-neo-container input.neo-input {
    width: 100%;
    cursor: text;
    border-style: none;
    background-color: inherit;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 20px;
    color: var(--color-global-search-bg)
}

.input-neo-container input.neo-input::-moz-placeholder {
    color: var(--color-on-foreground-placeholder)
}

.input-neo-container input.neo-input::placeholder {
    color: var(--color-on-foreground-placeholder)
}

.input-neo-container input.neo-input:focus {
    border-style: none;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.input-neo-container input.neo-input:disabled {
    cursor: not-allowed;
    background-color: var(--color-on-background-menu);
    color: var(--color-disabled-text-neo)
}

/* COLORS */
:root {
  /*overlay */
  --color-overlay: #ededed;

  /* background */
  --color-background: #fff;
  --color-on-background-menu: #f4f4f4;
  --color-background-2: #f5f5f5;
  --color-on-background-active: #e6e8ef;
  --color-on-background-app-bar: #343434;
  --color-on-background: #262626;
  --color-on-background-alternate: #737373;
  --color-on-background-icon-background: #bdbdbd;
  --color-on-background-decoration: #e5e5e5;
  --color-on-background-link: #0266c2;
  --color-on-background-link-hover: #004b90;
  --color-on-background-table-header-dark: #444444;
  --color-on-background-subtle: #fafafa;
  --color-on-background-search: #333333;
  --color-on-background-search-hover: #414141;
  --color-on-background-search-focus: #fff;
  --color-on-background-search-prompt: #e1e1e1;
  --color-on-background-search-input: #bababa;
  --color-on-background-iq-insights: #edf5ff;
  --color-on-background-anchor: #f3f3f3;
  --color-on-light-border: #dcdcdc;
  --color-field-map-border: #cfcfcf;
  --color-on-background-new-badge: #fdba55;
  --color-on-light-background-blue: #3488dd;
  --color-on-background-selected: #f5f8ff;
  --color-subsunken: #f8f8f8;
  --color-aside-bar-active-bg: #d1e0ff;
  --color-aside-bar-active: #004be1;
  --color-aside-bar-hover-bg: #dedede;

  /* primary */
  --color-primary: #0266c2;
  --color-primary-hover: #004b90;
  --color-primary-active: #003b73;
  --color-on-primary: #fff;
  --color-on-primary-alternate: #fff;
  --color-on-primary-decoration: #fff;
  --color-on-primary-link: #fff;
  --color-on-primary-link-hover: #fff;

  --color-secondary: #fc9c0c;
  --color-secondary-hover: #f4753b;
  --color-secondary-active: #f4753b;
  --color-on-secondary: #000;
  --color-on-secondary-alternate: #000;
  --color-on-secondary-decoration: #000;
  --color-on-secondary-link: #000;
  --color-on-secondary-link-hover: #000;

  /* surface */
  --color-surface: #f7faff;
  --color-surface-active: #9ac2e7;
  --color-on-surface: #262626;
  --color-on-surface-alternate: #737373;
  --color-on-surface-decoration: #0266c2;
  --color-on-surface-link: #0266c2;
  --color-on-surface-link-hover: #0266c2;
  --color-on-surface-slate: #d6d8da;
  --color-on-subtle: #666666;

  /* information */
  --color-information: #d9e8f6;
  --color-on-information: #262626;
  --color-on-information-alternate: #737373;
  --color-on-information-decoration: #0266c2;
  --color-on-information-link: #0266c2;
  --color-on-information-link-hover: #0266c2;
  --color-on-foreground-subtle: #4D4D4D;
  --color-on-foreground-placeholder: #6f6f6f;

  /* success */
  --color-success: #bde7a6;
  --color-on-success: #262626;
  --color-on-success-alternate: #737373;
  --color-on-success-decoration: #2e7d32;
  --color-on-success-link: #262626;
  --color-on-success-link-hover: #262626;
  --color-on-success-alter-decoration: #4dac5f;

  /* success matching DS */
  --color-success-2: #eef5ee;

  /* warning */
  --color-warning: #fbe4a8;
  --color-on-warning: #262626;
  --color-on-warning-alternate: #737373;
  --color-on-warning-decoration: #fcab30;
  --color-on-warning-link: #262626;
  --color-on-warning-link-hover: #262626;
  --color-on-warning-border: #cb7e0a;
  --color-on-warning-pane: #fff6e7;
  --color-on-warning-alter-decoration: #cb7e0a;
  --color-on-warning-secondary-decoration: #bea103;

  /* error */
  --color-error: #f2a4a2;
  --color-on-error: #262626;
  --color-on-error-alternate: #737373;
  --color-on-error-decoration: #c62828;
  --color-on-error-link: #262626;
  --color-on-error-link-hover: #262626;

  /* notice */
  --color-notice: #e5e5e5;
  --color-on-notice: #262626;
  --color-on-notice-alternate: #737373;
  --color-on-notice-decoration: #262626;
  --color-on-notice-link: #262626;
  --color-on-notice-link-hover: #262626;

  /* danger */
  --color-danger: #b00020;
  --color-danger-hover: #970007;
  --color-danger-active: #7d0000;
  --color-on-danger: #fff;
  --color-on-danger-alternate: #fff;
  --color-on-danger-decoration: #fff;
  --color-on-danger-link: #fff;
  --color-on-danger-link-hover: #fff;
  --color-on-danger-border: #ea2328;
  --color-on-danger-pane: #fde9ea;
  --color-on-danger-alter-decoration: #ea2328;

  /* inactive */
  --color-inactive: #e5e5e5;
  --color-on-inactive: #4c4c4c;
  --color-on-light-inactive: #f5f5f5;

  /* shadow */
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-shadow-variant: rgba(155, 200, 243, 0.5);

  /* hover */
  --color-hover-button: #d0d5e6;
  --color-focussed-btn: #bfc7e1;

  /*disabled-text*/
  --color-disabled-text: #bfbfbf;
  --color-disabled-text-neo: #B9B9B9;

  /* chart */
  --color-chart-1: #0266c2;
  --color-chart-2: #4dac5f;
  --color-chart-3: #fc9c0c;
  --color-chart-4: #013666;
  --color-chart-5: #367842;
  --color-chart-6: #cc7e0a;
  --color-chart-7: #9ac2e7;
  --color-chart-8: #9dfaaf;
  --color-chart-9: #fed79e;
  --color-chart-10: #6aadbd;
  --color-chart-11: #936abd;

  /* brand */
  --color-brand-primary: #ed2226;
  --color-brand-secondary: #000000;
  --color-brand-tertiary: #ffffff;
  --color-appbar-bg: #202124;
  --color-global-search-bg: #1d1d1d;
  --color-brand-bg: #fff0db;
  --color-ai-stars: #fff0db;

  /* social/community */
  --color-social-forum: #e2f8ee;
  --color-social-discord: #5865f2;

  /* workbench, appbar, interactive colors */
  --color-panel-queue: #fafafa;
  --color-panel-queue-hover: #eaf2fa;
  --color-panel-queue-highlight: #ececec;
  --color-workbench-tooltip: #333;
  --color-workbench-plan-orient: #a1a1a1;
  --color-workbench-explain-node: #bfe2ba;
  --color-workbench-explain-node-expensive-1: #f9ca7b;
  --color-workbench-explain-node-expensive-2: #fbdba7;
  --color-workbench-explain-node-expensive-3: #fdedd3;
  --color-workbench-explain-node-hover: #b3cfef;
  --color-workbench-explain-node-link: #979797;
  --color-wb-explain-tooltip-border-top: #4287d6;
  --color-faded-white: rgba(255, 255, 255, 0.65);
  --color-outline-gray: #bfbfbf;
  --color-mid-gray: #3d3d3d;
  --color-editor-black: #1e1e1e;

  /* data grid */
  --color-master-row-border: #0266c2;

  /* wizard */
  --color-wizard-stepper: #2689e5;
  --color-wizard-line: #eeeeee;
  --color-wizard-active-step-border: #fdcd85;

  /* accordion */
  --color-accordion: #f8faff;

  /* border */
  --color-border-light: #ebebeb;
  --color-search-border: #74797e;
  --color-border-on-primary: #d5d7da;
  --outline-subtlest: #dedede;
  --outline-input: #dedede;

  /* neo button variants */
  --color-neo-primary: #155eef;
  --color-neo-primary-hover: #004be1;
  --color-neo-primary-active: #0040c1;
  --color-on-background-disabled-text: #8d8d8d;
}