/*- First level of variables will contain all the colours that will be used in the application.
Naming convention:
**--[type]-[lightness]-[color_alpha]**, where **color_alpha** is added in case it's different than 1.
*Example*:
--primary-l72, --neutral-l53, --accent-l72


    Second level of variables will describe colors by what they'll be used for.
  Naming convention:
  **--[type]-[state]-[element_name]-[what_it_is_used_on]-color**
  *type*: primary, secondary, accent, etc
  *state*: disabled, selected, pressed, etc.
  *element_name*: div, span, h1, button, select, etc.
  *what_it_is_used_on*: border, bg, text

  Example: 
  --primary-l33: hsl(198, 100%, 33%)
  --primary-default-button-background-color: var(--primary-l33)

- Third level of variables will be ones used in Web Components.
  Their naming convention is similar to the second level of color variables, only they have to have the component's name as a prefix.
*/
:root,
tab-panel,
button-menu,
multi-select,
modal-confirm,
input,
radio-button,
modal-box,
bookmark-modal,
toggle-switch,
tree-view-item::part(itemWrapper),
tree-view-group::part(groupWrapper),
tree-view-item,
tree-view-group,
modal-box {
  --primary-l10: hsl(198, 100%, 10%); /* Orbit */
  --primary-l13: hsl(198, 100%, 13%); /* Secondary */
  --primary-l23: hsl(198, 100%, 23%); /* Chameleon */
  --primary-l28: hsl(198, 100%, 28%); /* Electric */
  --primary-l33: hsl(198, 100%, 33%); /* Main Event */
  --primary-l33-a06: hsla(198, 100%, 33%, 0.6);
  --primary-l43: hsl(198, 100%, 43%); /* Primary */
  --primary-l43-a08: hsla(198, 100%, 43%, 0.8);
  --primary-l43-a07: hsla(198, 100%, 43%, 0.7);
  --primary-l43-a06: hsla(198, 100%, 43%, 0.6);
  --primary-l43-a05: hsla(198, 100%, 43%, 0.5);
  --primary-l43-a04: hsla(198, 100%, 43%, 0.4);
  --primary-l43-a03: hsla(198, 100%, 43%, 0.3);
  --primary-l43-a035: hsla(198, 100%, 43%, 0.35);
  --primary-l43-a015: hsla(198, 100%, 43%, 0.15);
  --primary-l53: hsl(198, 100%, 53%); /* Argentina */
  --primary-l53-a035: hsl(198, 100%, 53%, 0.35);
  --primary-l63: hsl(198, 100%, 63%); /* Jazz */
  --primary-l72: hsl(198, 100%, 72%); /* Unicorn */
  --primary-l85: hsl(198, 100%, 85%); /* Summer */

  --accent-l36: hsl(54, 100%, 36%, 0.28); /* Yoga */
  --accent-l50: hsl(54, 100%, 50%); /* Accent */

  --neutral-black: hsl(0, 0%, 0%); /* Black */
  --neutral-black-a025: hsla(0, 0%, 0%, 0.25);
  --neutral-black-a03: hsla(0, 0%, 0%, 0.3);
  --neutral-black-a04: hsla(0, 0%, 0%, 0.4);
  --neutral-black-a05: hsla(0, 0%, 0%, 0.5);
  --neutral-black-a06: hsla(0, 0%, 0%, 0.6);
  --neutral-black-a07: hsla(0, 0%, 0%, 0.7);
  --neutral-black-a08: hsla(0, 0%, 0%, 0.8);
  --neutral-white: hsl(0, 0%, 100%); /* White */
  --neutral-white-a01: hsla(0, 0%, 100%, 0.1);
  --neutral-white-a025: hsla(0, 0%, 100%, 0.25);
  --neutral-white-a02: hsla(0, 0%, 100%, 0.2);
  --neutral-white-a03: hsla(0, 0%, 100%, 0.3);
  --neutral-white-a035: hsla(0, 0%, 100%, 0.35);
  --neutral-white-a05: hsla(0, 0%, 100%, 0.5);
  --neutral-white-a06: hsla(0, 0%, 100%, 0.6);
  --neutral-l0: hsl(198, 15%, 0%); /* Black */
  --neutral-l0-a06: hsla(198, 15%, 0%, 0.6);
  --neutral-l3: hsl(198, 15%, 3%); /* Night */
  --neutral-l3-a66: hsla(198, 15%, 3%, 0.66);
  --neutral-l6: hsl(198, 15%, 6%); /* Black Hole */
  --neutral-l6-a03: hsla(198, 15%, 6%, 0.3); /* Black Hole */
  --neutral-l8: hsl(198, 15%, 8%); /* Charcoal */
  --neutral-l8-a07: hsla(198, 15%, 8%, 0.7);
  --neutral-l13: hsl(198, 15%, 13%); /* DAK */
  --neutral-l13-a07: hsla(198, 15%, 13%, 0.7);
  --neutral-l17: hsl(198, 15%, 17%); /* Storm */
  --neutral-l23: hsl(198, 15%, 23%); /* Petrol */
  --neutral-l28: hsl(198, 15%, 28%); /* Koala */
  --neutral-l33: hsl(198, 15%, 33%); /* Dolphin */
  --neutral-l43: hsl(198, 15%, 43%); /* England */
  --neutral-l53: hsl(198, 15%, 53%); /* Stone */
  --neutral-l78: hsl(198, 15%, 78%); /* Mozart */
  --neutral-l95: hsl(198, 15%, 95%); /* Candyfloss */
  --destructive-l19: hsl(360, 93%, 19%); /* Merlot */
  --destructive-l29: hsl(360, 93%, 29%); /* Cherry */
  --destructive-l39: hsl(360, 93%, 39%); /* Radio */
  --destructive-l49: hsl(360, 93%, 49%); /* Christmas */
  --destructive-l63: hsl(360, 93%, 63%); /* Pop */
  --destructive-l69: hsl(360, 93%, 69%); /* Flamingo */
  --confirmation-l17: hsl(109, 95%, 17%); /* Forest */

  --custom-color-l35: hsl(180, 2%, 40%);
  /* body */
  --general-font: Open Sans, Arial, Helvetica;
  --heading2-size: 24px;
  --z-index-tooltip: 10000;
  --neutral-default-nav-background-color: var(--neutral-l3);
  --neutral-default-body-background-color: var(--neutral-l8);
  --neutral-background-color: var(--neutral-black);
  --neutral-background-color-a025: var(--neutral-black-a025);
  --neutral-background-color-a03: var(--neutral-black-a03);
  --neutral-background-color-a04: var(--neutral-black-a04);
  --neutral-background-color-a05: var(--neutral-black-a05);
  --neutral-background-color-a06: var(--neutral-black-a06);
  --neutral-background-color-a07: var(--neutral-black-a07);
  --neutral-background-color-a08: var(--neutral-black-a08);
  /* a */
  --primary-default-a-background-color: var(--primary-l43);
  --primary-hover-a-background-color: var(--primary-l43);
  --primary-active-a-border-color: var(--primary-l43);
  --primary-default-a-text-color: var(--primary-l43);
  --primary-hover-a-text-color: var(--primary-l43);
  /* input */
  --primary-default-input-background-color: var(--neutral-l6);
  /* button */
  --primary-default-button-background-color: var(--primary-l33);
  --primary-disabled-hover-button-background-color: var(--primary-l33);
  --primary-default-button-background-color-a07: var(--primary-l33-a07);
  --primary-hover-button-background-color: var(--primary-l23);
  --primary-active-button-background-color: var(--primary-l13);
  --neutral-hover-button-background-color: var(--neutral-white-a01);
  --primary-hover-button-border-color: var(--primary-l43);
  --primary-selected-button-background-color: var(--primary-l43);
  --primary-selected-button-text-color: var(--primary-l43);
  --neutral-default-button-text-color: var(--neutral-white);
  --secondary-default-button-border-color: var(--primary-l43);
  --secondary-default-button-text-color: var(--primary-l43);
  --secondary-hover-button-border-color: var(--primary-l53);
  --secondary-hover-button-text-color: var(--primary-l53);
  --secondary-active-button-border-color: var(--primary-l33);
  --secondary-active-button-text-color: var(--primary-l33);
  --tertiary-default-button-background-color: var(--neutral-l33);
  --tertiary-hover-button-background-color: var(--neutral-l43);
  --tertiary-active-button-background-color: var(--neutral-l23);
  --destructive-default-button-background-color: var(--destructive-l39);
  --destructive-default-button-text-color: var(--destructive-l63);
  --destructive-hover-button-background-color: var(--destructive-l29);
  --destructive-hover-button-text-color: var(--destructive-l69);
  --destructive-active-button-background-color: var(--destructive-l19);
  --secondary-destructive-default-button-border-color: var(--destructive-l63);
  --secondary-destructive-default-button-text-color: var(--destructive-l63);
  --secondary-destructive-hover-button-border-color: var(--destructive-l69);
  --secondary-destructive-hover-button-text-color: var(--destructive-l69);
  --secondary-destructive-active-button-border-color: var(--destructive-l49);
  --secondary-destructive-active-button-text-color: var(--destructive-l49);
  --transparent-button-text-color: var(--neutral-white);
  --transparent-hover-button-background-color: var(--neutral-white-a02);
  --transparent-active-button-background-color: var(--neutral-white-a03);
  /* li */
  --primary-default-li-background-color: var(--primary-l43-a07);
  --primary-active-li-background-color: var(--primary-l43);
  --primary-default-li-text-color-a07: var(--primary-l43-a07);
  --primary-hover-li-background-color: var(--primary-l43);
  --primary-hover-li-text-color: var(--primary-l43);
  /* span */
  --primary-default-span-text-color: var(--primary-l43);
  /* div */
  --neutral-default-div-border-color-a02: var(--neutral-white-a02);
  --neutral-default-div-border-color: var(--neutral-l53);
  --neutral-hover-div-background-color-a02: var(--neutral-white-a02);
  --neutral-hover-div-background-color-a03: var(--neutral-white-a03);
  --neutral-default-div-text-color: var(--neutral-white);
  --neutral-default-div-box-shadow-color-a06: var(--neutral-l0-a06);
  --primary-default-div-background-color: var(--primary-l43);
  --primary-default-div-background-color-a06: var(--primary-l33-a06);
  --primary-default-div-border-color: var(--primary-l43);
  --primary-default-div-border-color-a06: var(--primary-l33-a06);
  --primary-default-div-outline-color: var(--primary-l43);
  --primary-default-div-outline-color-a07: var(--primary-l43-a07);
  --primary-default-div-text-color: var(--primary-l43);
  --primary-active-div-text-color: var(--primary-l43);
  --primary-active-div-background-color-a07: var(--primary-l43-a07);
  --primary-selected-div-background-color: var(--primary-l23);
  --primary-hover-div-outline-color: var(--primary-l43);
  --primary-hover-div-background-color: var(--primary-l10);
  --destructive-default-div-text-color: var(--destructive-l63);
  /* checkbox */
  --primary-default-checkbox-border-color: var(--primary-l43);
  /* radio */
  --primary-default-radio-border-color: var(--primary-l43);
  --primary-default-radio-background-color: var(--primary-l43);
  /* h2 */
  --primary-default-h2-text-color: var(--primary-l43);
  --primary-default-h2-border-color: var(--primary-l43);
  /* h3 */
  --primary-active-h3-text-color: var(--primary-l43);
  --primary-hover-h3-background-color: var(--primary-l23);
  --primary-active-h3-background-color: var(--primary-l13);
  --primary-hover-h3-border-color: var(--primary-l23);
  --neutral-default-h3-border-color: var(--neutral-l43);
  /* icon */
  --primary-default-icon-background-color: var(--primary-l43);
  --primary-default-icon-fill-color: var(--primary-l43);
  --primary-active-icon-background-color-a08: var(--primary-l43-a08);
  --primary-active-icon-border-color: var(--primary-l43);
  --primary-hover-icon-background-color-a05: var(--primary-l43-a05);
  --primary-active-icon-text-color-a05: var(--primary-l43-a05);
  --destructive-default-icon-background-color: var(--destructive-l63);
  --secondary-default-icon-background-color: var(--primary-l43);
  /* Scrollbar */
  --scrollbar-track-color: hsl(0, 0%, 43%);
  --scrollbar-thumb-color: var(--neutral-l33);
  --scrollbar-thumb-hover-color: var(--neutral-l43);
  --scrollbar-thumb-active-color: var(--neutral-l28);
  /* Mark */
  --accent-default-mark-text-background-color: var(--accent-l36);
  --accent-default-mark-text-color: var(--neutral-white);
  /************************************  Old color    **********************************************/
  --dropdown-menu-background-color: var(--neutral-l13);
  --dropdown-menu-list-background-color: var(--neutral-l3);
  --dropdown-menu-list-disable-color: var(--neutral-white-a035);
  --language-menu-background-color: var(--neutral-l8);
  --filter-cameras-border-color: var(--neutral-l33);
  --title-text-color: var(--neutral-white);
  --text-description-color: var(--neutral-white-a06);
  --mutlicamera-playback-timeline-background-color: var(--neutral-l17);
  /************************************  Web components    **********************************************/
  /* modal-confirm */
  --modal-confirm-primary-default-button-background-color: var(
    --primary-default-button-background-color
  );
  /* text-link */
  --text-link-primary-default-a-text-color: var(--primary-default-a-text-color);
  /* dropdown-menu */
  --dropdown-menu-option-primary-default-option-background-color: var(
    --primary-l43
  );
  --dropdown-menu-neutral-default-label-text-color: var(--neutral-white);
  --dropdown-menu-neutral-default-options-wrapper-background-color: var(
    --neutral-black
  );
  --dropdown-menu-neutral-default-label-background-color: transparent;
  --dropdown-menu-option-neutral-default-div-text-color: var(--neutral-white);
  --dropdown-menu-option-neutral-default-div-background-color: var(
    --neutral-l6
  );
  --dropdown-menu-option-primary-selected-div-background-color: var(
    --primary-l10
  );
  --dropdown-menu-option-primary-hover-div-background-color: var(--primary-l13);
  /* multi-select */
  --multi-select-primary-default-checkbox-border-color: var(
    --primary-default-checkbox-border-color
  );
  /* toggle-switch */
  --toggle-switch-primary-active-div-background-color: var(--primary-l43);
  --toggle-switch-primary-active-div-border-color: var(--primary-l43);
  --toggle-switch-primary-hover-div-border-color: var(--primary-l72);
  --toggle-switch-primary-hover-div-background-color: var(--neutral-l3);
  --toggle-switch-primary-hover-button-background-color: var(--primary-l72);
  --toggle-switch-primary-pressed-div-border-color: var(--primary-l33);
  --toggle-switch-primary-pressed-div-background-color: var(--neutral-l3);
  --toggle-switch-primary-pressed-button-background-color: var(--primary-l33);
  --toggle-switch-primary-active-hover-div-background-color: var(--primary-l72);
  --toggle-switch-primary-active-hover-div-border-color: var(--primary-l72);
  --toggle-switch-primary-active-pressed-div-background-color: var(
    --primary-l33
  );
  --toggle-switch-primary-active-pressed-div-border-color: var(--primary-l33);
  /* mlstn-button */
  --mlstn-button-neutral-default-button-old-background-color-a025: var(
    --neutral-white-a025
  );
  --mlstn-button-neutral-hover-button-old-background-color-a035: var(
    --neutral-white-a035
  );
  --mlstn-button-neutral-default-button-text-color: var(
    --neutral-default-button-text-color
  );
  --mlstn-button-primary-default-button-background-color: var(
    --primary-default-button-background-color
  );
  --mlstn-button-primary-hover-button-background-color: var(
    --primary-hover-button-background-color
  );
  --mlstn-button-primary-active-button-background-color: var(
    --primary-active-button-background-color
  );
  --mlstn-button-secondary-default-button-border-color: var(
    --secondary-default-button-border-color
  );
  --mlstn-button-secondary-default-button-text-color: var(
    --secondary-default-button-text-color
  );
  --mlstn-button-secondary-hover-button-border-color: var(
    --secondary-hover-button-border-color
  );
  --mlstn-button-secondary-hover-button-text-color: var(
    --secondary-hover-button-text-color
  );
  --mlstn-button-secondary-active-button-border-color: var(
    --secondary-active-button-border-color
  );
  --mlstn-button-secondary-active-button-text-color: var(
    --secondary-active-button-text-color
  );
  --mlstn-button-tertiary-default-button-background-color: var(
    --tertiary-default-button-background-color
  );
  --mlstn-button-tertiary-hover-button-background-color: var(
    --tertiary-hover-button-background-color
  );
  --mlstn-button-tertiary-active-button-background-color: var(
    --tertiary-active-button-background-color
  );
  --mlstn-button-destructive-default-button-background-color: var(
    --destructive-default-button-background-color
  );
  --mlstn-button-destructive-default-button-text-color: var(
    --destructive-default-button-text-color
  );
  --mlstn-button-destructive-hover-button-background-color: var(
    --destructive-hover-button-background-color
  );
  --mlstn-button-destructive-hover-button-text-color: var(
    --destructive-hover-button-text-color
  );
  --mlstn-button-destructive-active-button-background-color: var(
    --destructive-active-button-background-color
  );
  --mlstn-button-secondary-destructive-default-button-border-color: var(
    --secondary-destructive-default-button-border-color
  );
  --mlstn-button-secondary-destructive-default-button-text-color: var(
    --secondary-destructive-default-button-text-color
  );
  --mlstn-button-secondary-destructive-hover-button-border-color: var(
    --secondary-destructive-hover-button-border-color
  );
  --mlstn-button-secondary-destructive-hover-button-text-color: var(
    --secondary-destructive-hover-button-text-color
  );
  --mlstn-button-secondary-destructive-active-button-border-color: var(
    --secondary-destructive-active-button-border-color
  );
  --mlstn-button-secondary-destructive-active-button-text-color: var(
    --secondary-destructive-active-button-text-color
  );
  --mlstn-button-transparent-button-text-color: var(
    --transparent-button-text-color
  );
  --mlstn-button-transparent-hover-button-background-color: var(
    --transparent-hover-button-background-color
  );
  --mlstn-button-transparent-active-button-background-color: var(
    --transparent-active-button-background-color
  );
  --mlstn-button-border-radius: 2px;
  --mlstn-button-font-family: var(--general-font);
  --mlstn-button-font-size: 14px;
  --mlstn-button-font-weight: 600;
  /* mlstn-icon */
  --mlstn-icon-disabled-activated-border-color: var(--primary-l43-a035);
  --mlstn-icon-disabled-activated-background-color: var(--primary-l43-a015);
  /* loading-indicator */
  --loading-indicator-destructive-default-icon-background-color: var(
    --destructive-default-icon-background-color
  );
  --loading-indicator-secondary-default-icon-background-color: var(
    --secondary-default-icon-background-color
  );
  /* scroll-bar */
  --scroll-bar-neutral-default-track-background-color: var(
    --scrollbar-track-color
  );
  --scroll-bar-neutral-hover-track-background-color: var(
    --scrollbar-track-color
  );
  --scroll-bar-neutral-default-thumb-background-color: var(
    --scrollbar-thumb-color
  );
  --scroll-bar-neutral-hover-thumb-background-color: var(
    --scrollbar-thumb-hover-color
  );
  --scroll-bar-neutral-active-thumb-background-color: var(
    --scrollbar-thumb-active-color
  );
  /* form-field */
  --form-field-destructive-default-div-text-color: var(
    --destructive-default-div-text-color
  );
  --form-field-neutral-default-div-background-color: var(
    --primary-default-input-background-color
  );
  --form-field-destructive-focus-div-border-color: var(
    --destructive-default-button-background-color
  );
  /* split-panel*/
  --split-panel-background-color: var(--neutral-l8);
  --median-background-color: var(--neutral-l23);
  --median-line-color: var(--primary-l43);
  --median-size: 4px;
  --collapse-default-background-color: var(--neutral-l33);
  --collapse-hover-background-color: var(--neutral-l43);
  /* tab-panel */
  --tab-panel-neutral-default-h3-border-color: var(
    --neutral-default-h3-border-color
  );
  --tab-panel-primary-hover-div-border-color: var(
    --primary-default-div-border-color
  );
  --tab-panel-primary-selected-div-border-color: var(
    --primary-default-div-border-color
  );
  --tab-panel-primary-active-div-background-color: var(
    --primary-active-h3-background-color
  );
  --tab-panel-primary-hover-div-background-color: var(
    --primary-hover-h3-background-color
  );
  /* button-menu */
  --button-menu-primary-div-background-color: rgba(255, 255, 255, 0.3);
  --button-menu-primary-hover-div-background-color: var(--primary-l13);
  --button-menu-neutral-hover-div-background-color-a02: var(
    --neutral-hover-div-background-color-a02
  );
  --button-menu-neutral-hover-div-background-color-a03: var(
    --neutral-hover-div-background-color-a03
  );
  --button-menu-neutral-default-div-text-color: var(
    --neutral-default-div-text-color
  );
  --button-menu-neutral-default-div-background-color: var(--neutral-l6);
  --button-menu-neutral-default-div-border-color: var(
    --neutral-default-div-border-color
  );
  --button-menu-neutral-default-div-box-shadow-color-a06: var(
    --neutral-default-div-box-shadow-color-a06
  );
  --button-menu-div-margin: 2.5px 0px 0px 0px;
  --button-menu-slot-div-width: auto;
  --button-menu-slot-div-min-width: 174px;
  --button-menu-slot-padding: 6px 12px 6px 12px;
  --button-menu-list-items-width: 164px;
  --button-menu-list-items-min-width: 164px;
  /* radio-button */
  --radio-button-input-width-hight-size: 16px;
  --radio-button-input-border-size: 1px;
  --radio-button-input-border-gap-padding: 3px;
  --radio-button-input-border-radius: 100%;
  --radio-button-input-circle-margin-right: 8px;
  --radio-button-neutral-deselected-input-border-circle: var(--neutral-white);
  --radio-button-primary-selected-hover-input-border-color-circle: var(
    --primary-l72
  );
  --radio-button-primary-hover-input-border-color: var(--primary-l72);
  --radio-button-primary-selected-input-border-color-circle: var(--primary-l53);
  --radio-button-checked-background-color: var(--neutral-l6);
  --radio-button-disabled-input-circle-label-text-opacity: 0.3;
  --radio-button-label-text-color: var(--neutral-white);
  --radio-button-label-text-font-size: 14px;
  --radio-button-label-text-font-weight: 400;
  --radio-button-label-text-line-height: 20px;
  --radio-button-primary-selected-input-border-color-circle: var(--primary-l53);
  --radio-button-primary-selected-active-input-border-color-circle: var(
    --primary-l33
  );
  --radio-button-primary-selected-disabled-input-border-color-circle: var(
    --primary-l33
  );
  --radio-button-primary-active-input-border-color: var(--primary-l33);
  /* tree-view-item */
  --tree-view-item-primary-hover-div-background-color: var(--primary-l13);
  --tree-view-item-accent-mark-background-color: var(
    --accent-default-mark-text-background-color
  );
  --tree-view-item-accent-mark-color: var(--accent-default-mark-text-color);
  --tree-view-item-color-text: var(--neutral-white);
  --tree-view-item-background-color: var(--neutral-l8);
  --tree-view-item-background-color-hover: var(--primary-l13);
  --tree-view-item-background-color-selected: var(--primary-l28);
  --tree-view-item-sub-title-color: var(--neutral-white-a06);
  --tree-view-item-color-disabled-text: var(--neutral-white-a035);
  --tree-view-item-sub-title-color: var(--neutral-white-a06);
  /* tree-view-group */
  --tree-view-group-accent-mark-background-color: var(
    --accent-default-mark-text-background-color
  );
  --tree-view-group-accent-mark-color: var(--accent-default-mark-text-color);
  --tree-view-group-background-color-hover: var(--primary-l13);
  --tree-view-group-color-disabled-text: var(--neutral-white-a035);
  /* search-box */
  --search-box-neutral-default-input-border: 1px solid var(--neutral-l43);
  --search-box-neutral-hover-input-border: 1px solid var(--neutral-l78);
  --search-box-neutral-default-input-text-color: var(--neutral-white);
  --search-box-neutral-default-placeholder-text-color: var(--neutral-white-a06);
  --search-box-neutral-default-form-background-color: var(--neutral-l6);
  --search-box-primary-focus-input-border: 1px solid var(--primary-l43);
  --search-box-border-radius: 2px;
  --recent-searches-border: var(--neutral-l53);
  --recent-searches-background-color: var(--neutral-l6);
  --recent-searches-title-color: var(--neutral-white-a06);
  --recent-searches-hover-background-color: var(--primary-l13);
  /*toast-message*/
  --toast-mesage-width: 276px;
  --toast-mesage-default-toast-background-color: var(--primary-l13);
  --toast-mesage-hover-toast-background-color: var(--primary-l23);
  --toast-mesage-active-toast-background-color: var(--primary-l10);
  --toast-mesage-primary-toast-text-color: var(--neutral-white);
  --toast-mesage-secondary-toast-text-color: var(--neutral-white-a06);
  --toast-mesage-font-family: var(--general-font);
  /*timeline*/
  --timeline-background-color: var(--neutral-l8);
  /*range-slider*/
  --range-slider-input-unfilled-track-color: var(--neutral-l43);
  --range-slider-input-thumb-hover-color: var(--primary-l72);
  --range-slider-label-hover: var(--neutral-white-a02);
  --range-slider-label-pressed: var(--neutral-white-a03);
  --range-slider-button-menu-neutral-default-div-background-color: var(
    --neutral-l6
  );
  --range-slider-button-menu-neutral-default-div-border-color: var(
    --neutral-default-div-border-color
  );
  --range-slider-button-menu-neutral-default: var(
    --neutral-default-div-box-shadow-color-a06
  );
  /*shuttle-slider*/
  --shuttle-slider-input-track-width: 94px;
  --shuttle-slider-input-track-height: 2px;
  --shuttle-slider-input-unfilled-track-color: var(--neutral-l43);
  --shuttle-slider-input-thumb-width: 6px;
  --shuttle-slider-input-thumb-height: 18px;
  --shuttle-slider-input-thumb-border-radius: 6px;
  --shuttle-slider-input-thumb-color: var(--neutral-white);
  --shuttle-slider-input-thumb-hover-color: var(--primary-l72);
  --shuttle-slider-input-disabled-thumb-color: var(--custom-color-l35);
  /*time slot*/
  --time-slot-border-color: var(--neutral-l78);
  --time-slot-short-border-color: var(--neutral-l43);
  --time-slot-text-color: var(--neutral-white);
  /*playback header*/
  --playback-header-background-color: var(--neutral-l95);
  /*current time*/
  --current-time-background-color: var(--neutral-l95);
  --current-time-default-text-color: var(--neutral-l3);
  --current-time-hover-text-color: var(--primary-l33);
  --current-time-collapsed-text-color: var(--neutral-white);
  --current-time-collapsed-hover-background-color: var(--neutral-white-a02);
  /* toggle button playback/live */
  --toggle-button-container-background-color: var(--neutral-l23);
  --toggle-button-active-button-background-color: var(--primary-l33);
  --toggle-button-default-text-color: var(--neutral-white-a06);
  --toggle-button-active-text-color: var(--neutral-white);
  --toggle-button-font-family: var(--general-font);
  /* bookmark overlay */
  --bookmark-overlay-default-background-color: var(--neutral-l13);
  --bookmark-overlay-default-text-color: var(--neutral-white);
  --bookmark-overlay-detail-background-color: var(--neutral-l33);
  --bookmark-overlay-camera-background-color: var(--neutral-l3-a66);
  --bookmark-overlay-destructive-text-color: var(--destructive-l63);
  --bookmark-overlay-font-family: Open Sans, Arial, Helvetica;
  --bookmark-overlay-default-box-shadow: 0 1px 6px var(--neutral-black-a06);
  --bookmark-overlay-detail-box-shadow: 0 1px 6px var(--neutral-black-a05);
  --bookmark-overlay-progress-bar-background-color: var(--neutral-l43);
  --bookmark-overlay-elapsed-time-background-color: var(--primary-l43);
  /* modal box component*/
  --modal-box-background-window: var(--neutral-black-a07);
  --modal-box-background-box-shadow-modal: var(--neutral-black-a06);
  --modal-box-background-modal: var(--neutral-l13);
  /*timeline brackets*/
  --bracket-trigger-background: var(--primary-l53);
  --bracket-border-color: var(--accent-l50);
  --bracket-gradient-color: var(--neutral-l8-a07);
  /* calendar */
  --calendar-today-border-color: var(--primary-l33);
  --calendar-selected-background-color: var(--primary-l23);
  --calendar-background-color: var(--neutral-l6);
  --calendar-text-color: var(--neutral-white);
  --calendar-disabled-cell-color: var(--neutral-white-a06);
  --calendar-hover-cell-background-color: var(--neutral-white-a02);
  --calendar-container-border-color: var(--neutral-l53);
  --calendar-container-box-shadow-color: var(
    --neutral-default-div-box-shadow-color-a06
  );
  --calendar-container-padding: 11px;
  /* tooltip */
  --tooltip-background-color: var(--neutral-l33);
  --tooltip-text-color: var(--neutral-white);
  --tooltip-boxshadow-color: var(--neutral-black-a05);
  --tooltip-font-size: 12px;
  /* go-to-brackets */
  --go-to-brackets-box-shadow: var(--neutral-black-a06);
  --go-to-brackets-background-color: var(--accent-l50);
  /* list */
  --list-text-color: var(--neutral-white);
  --list-background-color: var(--neutral-l6);
  --list-border-color: var(--neutral-l53);
  --list-boxshadow-color: var(--neutral-l0-a06);
  --list-font-family: var(--general-font);
  --list-item-selected-background-color: var(--primary-l23);
  --list-item-hover-background-color: var(--primary-l13);
  --list-item-active-background-color: var(--primary-l10);
}

/* scroll width */
::-webkit-scrollbar {
  width: 8px;
}

/* scroll Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* scroll Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
}

/* scroll Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

::-webkit-scrollbar-button {
  display: none;
}

@supports (-webkit-line-clamp: 2) {
  .webclient-tour .shepherd-content .shepherd-header .shepherd-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}