@use "utils" as *;
@import "./native-theme/theme_palette";
@import "theme_palette";

html[data-theme="light"], .theme-override[data-theme="light"] {
    body {
        background-color: var(--additional_light2, #{$additional_light2});
        color: var(--dark9, #{$dark9});
    }

    --test-bg : var(--additional_light2, #{$additional_light2});
    --body-bg : var(--additional_light2, #{$additional_light2});
    --alt-body-bg : var(--light1, #{$light1});
    --body-text-color : var(--dark9, #{$dark9});

    --anchor-color : var(--brand-core);
    --anchor-hover-color : var(--brand-l1);

    --alt-tile-color : var(--dark9, #{$dark9});

    --header-bg : var(--light1, #{$light1});
    --header-border-color : var(--light4, #{$light4});
    --header-webadm-bg : var(--dark14, #{$dark14});
    --header-webadm-border-color : transparent;

    --ribbon-bg : var(--bluez-light);
    --ribbon-border : var(--bluez-light);
    --ribbon-color : var(--dark9, #{$dark9});

    --ribbon-alert-bg : var(--yellow_l2, #{$yellow_l2});
    --ribbon-alert-border : var(--yellow_l1, #{$yellow_l1});
    --ribbon-alert-color : var(--dark9, #{$dark9});

    --image-box-border-color : var(--light6, #{$light6});
    --image-box-selected-border-color : var(--brand-l1);

    --storage-size-available : var(--additional_light1, #{$additional_light1});
    --storage-size-reserved : repeating-linear-gradient(-45deg,
        var(--light3, #{$light3}),
        var(--light3, #{$light3}) 4.25px,
        var(--light4, #{$light4}) 4.25px,
        var(--light4, #{$light4}) 9px);
    --storage-size-reserved-border : var(--light5, #{$light5});

    --search-link-color : var(--dark9, #{$dark9});
    --search-link-hover-color : var(--dark15, #{$dark15});
    --search-link-visited-color : var(--dark19, #{$dark19});
    --search-link-visited-hover-color : var(--light14, #{$light14});
    --search-highlight-bg : rgba(var(--yellow_main--rgb), 0.5);
    --search-highlight-color: var(--dark9, #{$dark9});

    --user-selected-highlight-color : rgba(var(--brand-d1--rgb), 0.5);

    --spot-gradient : radial-gradient(
        ellipse farthest-corner at center center,
        #A5B7C0 0,
        #AFBFC7 3%,
        #B9C7CE 5%,
        #C3CFD5 10%,
        #CDD7DC 15%,
        #D7DFE3 20%,
        #E1E7EA 23%,
        #EBEFF1 25%,
        #F5F7F8 30%,
        #FFFFFF 40%
    );

    --h1 : var(--dark9, #{$dark9});
    --h2 : var(--dark9, #{$dark9});
    --h3 : var(--dark9, #{$dark9});
    --h4 : var(--dark9, #{$dark9});
    --h5 : var(--dark9, #{$dark9});
    --h6 : var(--dark9, #{$dark9});
    --h7 : var(--dark9, #{$dark9});

    --elements-disabled : var(--light10, #{$light10});

    --svg-info-fill: var(--info_icon, #{$info_icon});
    --svg-info-elm-fill: var(--info_icon_dark, #{$info_icon_dark});

    --svg-warning-fill: var(--warning_icon, #{$warning_icon});
    --svg-warning-elm-fill: var(--info_icon_dark, #{$info_icon_dark});

    --svg-std-icon-fill : var(--light16, #{$light16});
    --svg-path-light-color: var(--light4, #{$light4});
    --svg-path-accent-color : var(--light10, #{$light10});
    --svg-path-dark-color: var(--dark9, #{$dark9});

    --svg-confirmations-color: var(--light10, #{$light10});

    --svg-placeholder-elm1-color : var(--dark9, #2B383F); // $dark9
    --svg-placeholder-elm2-color : var(--light10, #A5B7C0); //$light10;

    --svg-table-button: var(--light14, #698796); //$light14

    --text-placeholder-color : var(--light16, #{$light16});
    --text-contrast: var(--dark1);

    --scrollbar-color : var(--light16);
    --scrollbar-thumb-bg : var(--light10);
    --scrollbar-thumb-border-color : var(--additional-light1);
    --menu-scrollbar-thumb-border-color : var(--light6);

    --tooltip-shadow-color : var(--dark15, #{$dark15});
    --tooltip-bg : var(--dark1, #{$dark1});
    --tooltip-color : var(--light1, #{$light1});
    --tooltip-box-shadow-color: rgba(var(--dark4--rgb), 0.2);
    --tooltip-contrast-bg: var(--tooltip-bg);
    --tooltip-contrast-color : var(--tooltip-color);
    // Light tooltip is already high-contrast

    --validation-popover-shadow-color : none;
    --validation-popover-bg           : var(--light1, #{$light1});
    --validation-popover-color        : var(--dark9, #{$dark9});

    --popover-shadow-color : 0 1rem 2rem 0 var(--light15, #{$light15});
    --popover-bg : var(--light1, #{$light1});
    --popover-color : var(--dark9, #{$dark9});

    --popover-shadow-dark-color : none;
    --popover-dark-bg           : var(--dark13, #3F545F); //$dark13;
    --popover-dark-color        : var(--light4, #E1E7EA); //$light4;

    --popover-shadow-light-color : 0 1rem 2rem 0 var(--light15, #{$light15});
    --popover-light-bg : var(--light1, #{$light1});
    --popover-light-color : var(--dark9, #{$dark9});

    --radio-color : var(--dark11, #{$dark11});
    --radio-check-color : var(--brand-core);
    --radio-hover-color : var(--dark3, #{$dark3});
    --radio-hover-check-color : var(--brand-core);
    --radio-active-color : var(--dark11, #{$dark11});
    --radio-active-check-color : var(--brand-core);
    --radio-active-hover-color : var(--dark3, #{$dark3});

    --checkbox-color : var(--dark9, #{$dark9});
    --checkbox-check-color : var(--brand-core);
    --checkbox-hover-color : var(--dark1, #{$dark1});
    --checkbox-hover-check-color : var(--brand-core);
    --checkbox-active-color : var(--dark9, #{$dark9});
    --checkbox-active-check-color : var(--brand-core);
    --checkbox-active-hover-color : var(--dark1, #{$dark1});

    --auth-header-bg : var(--additional_light1, #{$additional_light1});
    --auth-header-color : var(--dark9, #{$dark9});
    --auth-subheader-color : var(--dark9, #{$dark9});
    --auth-body-bg : var(--light1, #{$light1});
    --auth-pill-bg : var(--light3, #{$light3});

    --border-color : var(--light4, #{$light4});
    --border-hover-color : var(--light8, #{$light8});
    --border-active-color : var(--light10, #{$light10});
    --horizontal-sep-color : var(--light7, #{$light7});

    --label-color : var(--dark9, #{$dark9});
    --label-color-original : var(--dark9, #{$dark9});
    --label-disabled-color : var(--dark10, #{$dark10});

    --placehoder-cloud-color : var(--brand-core-t10);
    --placehoder-cloud-opacity : .1;
    --placeholder-accent-color : var(--dark7, #{$dark7});
    --placeholder-light-color : var(--light1, #{$light1});
    --placeholder-light2-color : var(--light2, #{$light2});
    --placeholder-accent2-color : var(--dark7, #{$dark7});
    --placehoder-title-color : var(--dark9, #{$dark9});
    --placehoder-body-color : var(--dark9, #{$dark9});
    --placeholder-description-text: var(--light10, #{$light10});
    --placeholder-bookmarks-bg-color: var(--light4, #{$light4});

    --placehoder-v2-title-color   : var(--dark9, #{$dark9});
    --placehoder-v2-message-color    : var(--dark9, #{$dark9});
    --placeholder-v2-description-color: var(--dark9, #{$dark9});

    --progress-bar-color : var(--light4, #{$light4});
    --progress-bar-border-color : var(--light6, #{$light6});
    --progress-bar-reindex-color : var(--brand-core);
    --progress-bar-heder-title-color : var(--brand-core);
    --progress-bar-heder-persentage-color : var(--dark9, #{$dark9});

    --switch-slider-bg : var(--light8, #{$light8});
    --switch-slider-hover-bg : var(--light7, #{$light7});
    --switch-disabled-color : var(--light8, #{$light8});
    --switch-disabled-hover-color : var(--light7, #{$light7});
    --switch-selected-color : var(--green_main, #{$green_main});
    --switch-selected-hover-color : var(--green_l1, #{$green_l1});
    --switch-button-color : var(--light1, #{$light1});
    --switch-bar-color : var(--green_l2, #{$green_l2});
    --switch-bar-hover-color : var(--green_l2, #{$green_l2});
    --switch-bar-disable-color : var(--light12, #{$light12});

    --switch-warning-color : var(--red_l1, #{$red_l1});
    --switch-warning-hover-color : var(--red_l2, #{$red_l2});
    --switch-warning-circle-color : var(--red_d2, #{$red_d2});
    // --switch-circle-off-color
    // --switch-circle-off-hover-color
    // --switch-circle-off-disable-color

    --switch-circle-color : var(--light12, #{$light12});
    --switch-circle-hover-color : var(--light12, #{$light12});
    --switch-circle-disable-color : var(--light12, #{$light12});

    --developer-menu-bg : var(--additional_light2, #{$additional_light2});
    --developer-menu-base-color : var(--dark10, #{$dark10});

    // *** arch svg ***********************
    --arch-svg-dash-stroke : var(--brand-l4);
    --arch-svg-solid-path-arrow-fill : var(--dark1, #{$dark1});
    --arch-svg-level1-fill : var(--light10, #{$light10});
    --arch-svg-level1-color : var(--dark9, #{$dark9});
    --arch-svg-level2-fill : var(--light6, #{$light6});
    --arch-svg-level3-fill : var(--light1, #{$light1});
    --arch-svg-spacer-fill : var(--light1, #{$light1});
    --arch-svg-cloud-fill : rgba(var(--brand-l4--rgb), 0.3);
    --arch-svg-cloud-color : var(--dark9, #{$dark9});
    --arch-svg-cloud-relay-fill : rgba(var(--brand-l2--rgb), 0.3);
    --arch-svg-cloud-relay-color : var(--dark9, #{$dark9});
    --arch-svg-third-party-fill : var(--light4, #{$light4});
    --arch-svg-built-in-fill : var(--light1, #{$light1});
    --arch-svg-built-in-color : var(--dark9, #{$dark9});
    --arch-svg-rest-streaming-api-fill : var(--light1, #{$light1});
    --arch-svg-rest-streaming-api-color : var(--dark9, #{$dark9});
    --arch-svg-server-fill : var(--light4, #{$light4});
    --arch-svg-server-hover-fill : var(--light4, #{$light4});
    --arch-svg-transparent-tile-stroke : var(--light18, #{$light18});
    // ***************************************

    --left-menu-bg : var(--additional_light3, #{$additional_light3});
    --left-menu-border-color : transparent;
    --left-menu-l1-bg : transparent;
    --left-menu-l1-bg-hover : var(--additional_light3, #{$additional_light3});
    --left-menu-l1-bg-active : var(--light5, #{$light5});
    --left-menu-l1-color : var(--dark9, #{$dark9});
    --left-menu-l1-selected-bg : var(--light5, #{$light5});
    --left-menu-l1-selected-hover-bg : var(--light6, #{$light6});
    --left-menu-l3-scroll : var(--light5, #{$light5});
    --left-menu-l3-shadow : transparent;
    --left-menu-l3-bg : var(--light5, #{$light5});
    --left-menu-l3-color : var(--dark9, #{$dark9});
    --left-menu-l3-accent-color : var(--dark13, #{$dark13});
    --left-menu-l3-additional-color : var(--light16, #{$light16});
    --left-menu-l3-hover-bg : var(--light6, #{$light6});
    --left-menu-l3-hover-color : var(--dark9, #{$dark9});
    --left-menu-l3-opacity : 1;
    --left-menu-l3-selected-bg : var(--light16, #{$light16});
    --left-menu-l3-selected-color : var(--light1, #{$light1});
    --left-menu-disabled-item-color : var(--light13, #{$light13});
    --left-menu-disabled-item-addtitional-color : var(--light10, #{$light10});

    // New header ******************************
    --header-level-one-color : var(--light13, #{$light13});
    --header-level-one-bg : var(--dark4, #{$dark4});
    --header-level-one-active-bg : var(--dark5, #{$dark5});
    --header-level-one-active-color : var(--light4, #{$light4});
    --header-level-one-hover-color : var(--light10, #{$light10});
    --header-level-two-bg : var(--dark6, #{$dark6});
    --header-item-disabled : var(--dark13, #{$dark13});
    --header-level-two-hover-border-color : var(--dark11, #{$dark11});
    --header-arrow-hover : var(--dark8, #{$dark8});
    --header-nav-arrow-bg : var(--dark7, #{$dark7});
    --header-logout-action-color : var(--light16, #{$light16});
    --header-active-border-bg : var(--brand-core);

    // Logo;
    --header-logo-text-color : var(--light4, #{$light4});
    --header-logo-border : var(--dark11, #{$dark11});

    // Mobile header
    --mobile-header-bg : var(--dark4, #{$dark4});
    --mobile-level-one-color : var(--dark15, #{$dark15});
    --mobile-level-two-color : var(--light6, #{$light6});
    --mobile-header-svg-color : var(--light1, #{$light1});
    --mobile-header-border-one : var(--dark2, #{$dark2});
    --mobile-header-border-two : var(--dark5, #{$dark5});
    --mobile-header-border-three : var(--dark3, #{$dark3});
    --mobile-header-item-nav-arrow : var(--dark13, #{$dark13});
    --mobile-header-logout-btn-bg : var(--dark12, #{$dark12});
    --mobile-header-logout-btn-color : var(--light2, #{$light2});

    // Header profile dropdown
    --header-profile-bg : var(--dark7, #{$dark7});
    --header-profile-color : var(--light13, #{$light13});
    --header-profile-hover-bg : var(--dark9, #{$dark9});
    --header-profile-hover-color : var(--light10, #{$light10});
    --header-profile-active-color : var(--light4, #{$light4});
    --header-profile-active-bg : var(--dark9, #{$dark9});

    // Header lang
    --header-lang-bg   : var(--light4, #{$light4});
    --header-lang-code : var(--light16, #{$light16});
    --header-lang-code-text: var(--light1, #{$light1});

    // Footer
    --footer-bg : var(--light3, #{$light3});
    --footer-text-color : var(--light16, #{$light16});
    --footer-link-color : var(--light16, #{$light16});
    --footer-mobile-bottom-bg: var(--light1, #{$light1});

    // View tab ********************************
    --view-bg : var(--additional_light2, #{$additional_light2});
    --view-search-bg : var(--additional_light2, #{$additional_light2});
    --view-search-color : var(--dark9, #{$dark9});
    --view-search-hover-bg : var(--light2, #{$light2});
    --view-search-hover-color : var(--dark9, #{$dark9});
    --view-search-active-bg : var(--light1, #{$light1});
    --view-search-active-color : var(--dark9, #{$dark9});

    --control-color : var(--light4, #{$light4});
    --control-enabled-color : var(--light16, #{$light16});
    --control-hoved-bg : var(--additional_light3, #{$additional_light3});
    --control-active-bg : var(--light5, #{$light5});

    --left-menu-view-hover-bg : var(--additional_light3, #{$additional_light3});
    --left-menu-view-selected-bg : var(--light5, #{$light5});
    // end View tab ****************************

    --sidebar-toggling-ear-color : var(--light16, #{$light16});

    --time-under-mouse-bg : var(--light8);
    --timeline-date-color : var(--dark9, #{$dark9});
    --timeline-time-color        : var(--dark4, #{$dark4});
    --timeline-bg : var(--light1, #{$light1});
    --timeline-tick-color: var(--light10, #{$light10});
    --timeline-major-color: var(--dark4, #{$dark4});
    --timeline-manor-color: var(--dark10, #{$dark10});
    --timeline-scrollbar-bg : var(--light16, #{$light16});
    --timeline-scrollbar-hover-bg : var(--light14, #{$light14});
    --timeline-scrollbar-stripe-bg : var(--dark12, #{$dark12});
    --timeline-scrollbutton-bg : rgba(var(--dark9--rgb), 0.5);
    --timeline-scrollbutton-hover-bg : rgba(var(--dark9--rgb), 0.9);
    --timeline-playback-indicator-bg : var(--light10);
    --timeline-selection-panel-bg : var(--brand-core);
    --timeline-selection-panel-hover-bg : var(--brand-l1);
    --timeline-selection-panel-active-bg : var(--brand-d1);
    --timeline-selection-panel-color : var(--light1, #{$light1});
    --timeline-selection-picker : light;
    --timeline-selection-panel-delimiter-color : rgba(var(--light4--rgb), 0.25);
    --timeline-selection-panel-close-bg : var(--brand-d2);
    --timeline-selection-panel-close-hover-bg : var(--brand-d1);
    --timeline-selection-panel-close-active-bg : var(--brand-d4);
    --timeline-control-color : var(--dark9, #{$dark9});
    --timeline-chunk-color : var(--green_l2);
    --timeline-background : rgba(var(--green_l2--rgb), 0.1);

    // Timeline actions (for now) --TT
    --button-action-bg: var(--light3);
    --button-action-border-color: var(--light15);
    --button-action-icon-fill: var(--light10);

    --paginator-bg : var(--light4, #{$light4});
    --paginator-color : var(--light16, #{$light16});
    --paginator-hover-bg : var(--light5, #{$light5});
    --paginator-hover-color : var(--light16, #{$light16});
    --paginator-active-bg : var(--light16, #{$light16});
    --paginator-active-color : var(--light1, #{$light1});

    --btn-download-hover-bg : var(--light5, #{$light5});

    --btn-close-bg : var(--dark9, #{$dark9});
    --btn-close-hover-bg : var(--additional_light2, #{$additional_light2});
    --btn-close-hover-color : var(--light10, #{$light10});
    --btn-close-active-bg : var(--additional_light3, #{$additional_light3});
    --btn-close-active-color : var(--light17, #{$light17});

    --btn-text-color : var(--light16, #{$light16});
    --btn-text-hover-color : var(--dark15, #{$dark15});
    --btn-text-active-color : var(--light16, #{$light16});

    --btn-clear-bg : transparent;
    --btn-clear-color : var(--dark9, #{$dark9});
    --btn-clear-hover-bg : transparent;
    --btn-clear-hover-color : var(--dark9, #{$dark9});
    --btn-clear-active-bg : transparent;
    --btn-clear-active-color : var(--dark9, #{$dark9});

    --btn-dropdown-toggle-bg : var(--light4, #{$light4});
    --btn-dropdown-toggle-color : var(--dark9, #{$dark9});
    --btn-dropdown-toggle-selected-color : var(--light1, #{$light1});
    --btn-dropdown-toggle-shadow-color : inset 0px -1px 0px var(--light7, #{$light7});
    --btn-dropdown-toggle-hover-bg : var(--light5, #{$light5});
    --btn-dropdown-toggle-hover-shadow : inset 0 -1px 0 0 var(--light8, #{$light8});
    --btn-dropdown-toggle-active-bg : var(--light6, #{$light6});
    --btn-dropdown-toggle-active-shadow : inset 0 1px 0 0 var(--light8, #{$light8});

    --btn-tag-bg : var(--light4, #{$light4});
    --btn-tag-color : var(--light16, #{$light16});
    --btn-tag-selected-bg : var(--light16, #{$light16});
    --btn-tag-selected-hover-bg : var(--light17, #{$light17});
    --btn-tag-selected-active-bg : var(--light18, #{$light18});
    --btn-tag-selected-color : var(--light1, #{$light1});

    --btn-arrow-bg : var(--light4, #{$light4});
    --btn-arrow-color : var(--light16, #{$light16});
    --btn-arrow-hover-bg : var(--light5, #{$light5});
    --btn-arrow-hover-color : var(--light16, #{$light16});
    --btn-arrow-selected-bg : var(--light6, #{$light6});
    --btn-arrow-selected-color : var(--light16, #{$light16});

    --btn-default-bg                : var(--light4, #{$light4});
    --btn-default-color             : var(--dark9, #{$dark9});
    --btn-default-shadow            : inset 0 -1px 0 0 var(--light7, #{$light7});
    --btn-default-hover-bg          : var(--light5, #{$light5});
    --btn-default-hover-color       : var(--dark9, #{$dark9});
    --btn-default-hover-shadow      : inset 0 -1px 0 0 var(--light8, #{$light8});
    --btn-default-active-bg         : var(--light6, #{$light6});
    --btn-default-active-color      : var(--dark9, #{$dark9});
    --btn-default-active-shadow     : inset 0 1px 0 0 var(--light9, #{$light9});
    --btn-default-focus-shadow      : 0 0 0 2px var(--brand-d1);
    --btn-default-focus-outline-rgb : rgba(var(--brand-d1--rgb), 0.3);

    --btn-primary-bg : var(--brand-core);
    --btn-primary-color : var(--light1, #{$light1});
    --btn-primary-shadow : inset 0 -1px 0 0 var(--brand-d2);
    --btn-primary-hover-bg : var(--brand-d1);
    --btn-primary-hover-color : var(--light1, #{$light1});
    --btn-primary-hover-shadow : inset 0 -1px 0 0 var(--brand-d3);
    --btn-primary-active-bg : var(--brand-d2);
    --btn-primary-active-color : var(--light1, #{$light1});
    --btn-primary-active-shadow : inset 0 1px 0 0 var(--brand-d4);
    --btn-primary-focus-shadow : 0 0 0 2px var(--brand-d1);
    --btn-primary-focus-outline-rgb : rgba(var(--brand-d1--rgb), .3);

    --btn-danger-bg                : var(--red_main, #{$red_main});
    --btn-danger-color             : var(--light1, #{$light1});
    --btn-danger-shadow            : inset 0 -1px 0 0 var(--red_d2, #{$red_d2});
    --btn-danger-hover-bg          : var(--red_d1, #{$red_d1});
    --btn-danger-hover-color       : var(--light1, #{$light1});
    --btn-danger-hover-shadow      : inset 0 -1px 0 0 var(--red_d3, #{$red_d3});
    --btn-danger-active-bg         : var(--red_d2, #{$red_d2});
    --btn-danger-active-color      : var(--light1, #{$light1});
    --btn-danger-active-shadow     : inset 0 1px 0 0 var(--red_d4, #{$red_d4});
    --btn-danger-focus-shadow      : 0 0 0 2px var(--brand-d1);
    --btn-danger-focus-outline-rgb : rgba(var(--brand-d1--rgb), .3);

    --btn-header-saparator-color : var(--light4, #{$light4});
    --btn-header-main-bg : var(--light4, #{$light4});
    --btn-header-main-color : var(--dark9, #{$dark9});
    --btn-header-main-hover-bg : var(--light2, #{$light2});

    --btn-header-webadm-main-bg : var(--dark14, #{$dark14});
    --btn-header-webadm-main-color : var(--additional_light1, #{$additional_light1});
    --btn-header-webadm-main-hover-bg : var(--dark15, #{$dark15});
    --btn-header-webadm-main-active-bg : var(--dark13, #{$dark13});
    --btn-disabled-opacity: 0.3;

    --dialog-bg : var(--light1, #{$light1});
    --dialog-border-color : var(--additional_light8, #{$additional_light8});
    --dialog-header-bg : var(--additional_light1, #{$additional_light1});
    --dialog-header-color: var(--dark9, #{$dark9});
    --dialog-header-muted-color: var(--dark14);
    --dialog-overlay-bg: rgba(var(--dark15--rgb), 0.2);
    --dialog-box-shadow: 0px 16px 32px rgba(var(--dark15--rgb), 0.2);

    --svg-legend-bg : var(--additional_light1, #{$additional_light1});
    --svg-legend-border-color : var(--additional_light8, #{$additional_light8});

    --light-text-color : var(--light16, #{$light16});
    --light-text-opacity : 1;

    --tab-link-hover-bg : var(--light3, #{$light3});
    --tab-link-hover-bottom-color : var(--light6, #{$light6});
    --tab-link-active-bg : var(--light3, #{$light3});
    --tab-link-active-bottom-color : var(--light6, #{$light6});
    --tab-link-selected-color : var(--brand-core);

    --tab-link-webadm-color : var(--additional_light1, #{$additional_light1});
    --tab-link-webadm-hover-bg : var(--dark15, #{$dark15});
    --tab-link-webadm-active-bg : var(--dark13, #{$dark13});

    --dropdown-menu-arrow-color : var(--light4, #{$light4});
    --dropdown-menu-arrow-fill-color : var(--additional_light1, #{$additional_light1});

    --dropdown-menu-border : none;
    --dropdown-menu-top-border : none;
    --dropdown-menu-shadow : 0 1rem 2rem 0 var(--light15, #{$light15});
    --dropdown-menu-shadow-upper : 1rem 0 2rem 0 var(--light15, #{$light15});
    --dropdown-menu-bg : var(--additional_light1, #{$additional_light1});
    --drop-menu-systems-bg : var(--additional_light1, #{$additional_light1});
    --drop-menu-navigation-bg : var(--light1, #{$light1});
    --dropdown-placeholder-color: var(--light15, #{$light15});

    --dropdown-item-color: var(--dark9, #{$dark9});
    --dropdown-item-active-bg : var(--light4, #{$light4});
    --dropdown-item-active-color : var(--dark9, #{$dark9});
    --dropdown-item-hover-bg : var(--light3, #{$light3});
    --dropdown-item-hover-color : var(--dark9, #{$dark9});
    --dropdown-item-selected-bg : var(--light16, #{$light16});
    --dropdown-item-selected-color : var(--light1, #{$light1});
    --dropdown-item-error-color : var(--red_l2, #{$red_l2});

    // part of drop-menu
    --system-tile-icon-offline-color : var(--red_l2, #{$red_l2});
    --system-tile-name-color : var(--dark9, #{$dark9});
    --system-tile-owner-color : var(--dark9, #{$dark9});
    --system-tile-hover-bg : var(--light3, #{$light3});
    --system-tile-active-bg : var(--light4, #{$light4});
    --system-tile-selected-bg : var(--light5, #{$light5});
    --system-tile-nav-link-color : var(--dark9, #{$dark9});
    --system-tile-nav-link-icon-color : var(--light13, #{$light13});
    --system-tile-nav-link-hover-bg : var(--light3, #{$light3});
    --system-tile-nav-link-hover-color : var(--dark9, #{$dark9});
    --system-tile-nav-link-active-bg : var(--light5, #{$light5});
    --system-tile-nav-link-active-border-color : var(--light6, #{$light6});
    // *****************

    --swagger-get-bg : var(--blue9, #{$blue9});
    --swagger-put-bg : var(--orange_l1, #{$orange_l1});
    --swagger-delete-bg : var(--red_l1, #{$red_l1});
    --swagger-patch-bg  : var(--cyan400, #{$cyan400});
    --swagger-post-bg   : var(--green_l1, #{$green_l1});
    --swagger-btn-execute-bg : var(--brand-core);
    --swagger-btn-execute-color : var(--light1, #{$light1});
    --swagger-btn-value-text-color : var(--dark9, #{$dark9});
    --swagger-btn-key-text-color : var(--purple500, #{$purple500});
    --swagger-btn-value-number-color : var(--green_main, #{$green_main});
    --swagger-textarea-color : var(--light12, #{$light12});
    --swagger-required-color : rgba(var(--red_main--rgb), .6);
    --swagger-input-disabled: var(--light2, #{$light2});
    --swagger-input-disabled-border: var(--light6, #{$light6});
    --swagger-table-header-color: var(--dark1, #{$dark1});
    --api-tool-section-header: var(--light1, #{$light1});
    --media-type-bg: var(--light2, #{$light2});
    --media-type-border: var(--light4, #{$light4});

    --tabset-bg : var(--light1, #{$light1});
    --tabset-hover-bg : var(--light3, #{$light3});
    --tabset-color : var(--dark12, #{$dark12});

    --footer-color : var(--light16, #{$light16});

    --table-alt-row-bg : var(--additional_light1, #{$additional_light1});
    --table-row-hover-bg : rgba(var(--brand-core--rgb), .1);
    --table-row-selected-bg : var(--light16, #{$light16});
    --table-row-selected-color : var(--dark1, #{$dark1});

    --dynamic-table-row-hover-bg : var(--light16) !important;

    --promo-tile-bg : var(--light3, #{$light3});
    --promo-tile-h4-color : var(--dark9, #{$dark9});
    --promo-tile-img-1-path : url("/static/images/promo/landing_promo_1.svg");
    --promo-tile-img-2-path : url("/static/images/promo/landing_promo_2.svg");
    --promo-tile-img-3-path : url("/static/images/promo/landing_promo_3.svg");

    --toast-danger-bg : #f8d7da;
    --toast-danger-color : #721c24;
    --toast-danger-border-color : #f5c6cb;
    --toast-success-bg : #d4edda;
    --toast-success-color : #155724;
    --toast-success-border-color : #c3e6cb;
    --toast-warning-bg : #fff3cd;
    --toast-warning-color : #856404;
    --toast-warning-border-color : #ffeeba;
    --toast-info-bg : #d1ecf1;
    --toast-info-color : #0c5460;
    --toast-info-border-color : #bee5eb;

    --card-shadow: 0 2px 5px 0 var(--light4, #{$light4});
    --card-active-shadow: 0 2px 5px 0 var(--light10, #{$light10});
    --card-header-bg : var(--additional_light1, #{$additional_light1});
    --card-header-text : var(--dark9, #{$dark9});
    --card-header-disabled : var(--light8, #{$light8});
    --card-body-bg : var(--light1, #{$light1});
    --card-hover-bg : var(--light1, #{$light1});

    --card-simple-info-bg : var(--bluez-light);
    --card-simple-info-border-color : var(--bluez-light-dim);
    --card-simple-info-color : var(--dark9, #{$dark9});
    --card-simple-info-svg-color : var(--bluez-bright);

    --card-simple-warning-bg : var(--yellow-l2);
    --card-simple-warning-border-color : var(--yellow-l1);
    --card-simple-warning-color : var(--dark9, #{$dark9});
    --card-simple-warning-svg-color : var(--yellow-main);

    --card-simple-error-bg : var(--red2_dim, #{$red2_dim});
    --card-simple-error-border-color : var(--red2_dimmer, #{$red2_dimmer});
    --card-simple-error-color : var(--dark9, #{$dark9});
    --card-simple-error-svg-color : var(--red-l2, #{$red_l2});
    --card-simple-error-svg-ornament-color : var(--light1, #{$light1});

    --card-simple-default-bg : var(--red2, #{$red2});
    --card-simple-default-color : var(--dark9, #{$dark9});
    --card-simple-default-border-color : var(--red1, #{$red1});

    --card-support-bg : var(--light1, #{$light1});
    --card-support-color : var(--dark9, #{$dark9});
    --card-support-svg-elem-bg : var(--dark9, #{$dark9});

    --card-capability-header-bg : var(--dark11, #{$dark11});
    --card-capability-intro-color : var(--light10, #{$light10});
    --card-capability-icon : var(--brand-core);

    --support-lang-wrapper-bg : var(--light4, #{$light4});
    --support-lang-wrapper-color : var(--light16, #{$light16});
    --support-tech-apple-color : var(--dark1, #{$dark1});

     --success-label : var(--green_main);

    --error-label : var(--red-l2, #{$red-l2});
    --error : var(--red-l2, #{$red-l2});

    --input-bg : var(--light1, #{$light1});
    --input-hover-bg : var(--additional_light2, #{$additional_light2});
    --input-color : var(--dark9, #{$dark9});
    --input-border-color : var(--light6, #{$light6});
    --input-error-color : var(--red-l2, #{$red-l2});
    --input-error-border-color : var(--red-l2, #{$red-l2});
    --input-hover-color : var(--dark9, #{$dark9});
    --input-hover-border-color : var(--light8, #{$light8});
    --input-focus-color : var(--dark9, #{$dark9});
    --input-focus-border-color : var(--brand-core);
    --input-focus-shadow-color : rgba(var(--brand-l1--rgb), .3);
    --input-active-bg : var(--light1, #{$light1});
    --input-active-color : var(--dark9, #{$dark9});
    --input-active-border-color : var(--light6, #{$light6});
    --input-color-placeholder : var(--light16, #{$light16});

    --input-disabled-color : var(--light16, #{$light16});
    --input-disabled-border-color : var(--light6, #{$light6});

    --input-numeric-arrow-bg : var(--light1, #{$light1});
    --input-numeric-arrow-color : var(--dark9, #{$dark9});

    --badge-opacity : 1;
    --badge-base-bg : var(--light4, #{$light4});
    --badge-base-hover-bg : var(--light5, #{$light5});
    --badge-base-color : var(--light16, #{$light16});
    --badge-base-selected-bg : var(--light16, #{$light16});
    --badge-base-selected-color : var(--light1, #{$light1});
    --badge-base-selected-hover-bg : var(--light17, #{$light17});
    --badge-base-selected-active-bg : var(--light18, #{$light18});

    --badge-default-bg : var(--light8, #{$light8});
    --badge-color : var(--light1, #{$light1});
    --badge-selected-color : var(--light1, #{$light1});
    --badge-danger-bg : #D42B2B;
    --badge-danger-bright-bg : var(--red_l2, #{$red_l2});
    --badge-danger-bright-color : var(--light1, #{$light1});
    --badge-warning-bg : #FF960F;
    --badge-warning-bright-bg : var(--yellow_main, #{$yellow_main});
    --badge-warning-bright-color : var(--light1, #{$light1});
    --badge-success-bg : var(--green_main, #{$green_main});
    --badge-success-bright-bg : var(--green_l2, #{$green_l2});
    --badge-brand-bg : var(--brand-d2);
    --badge-info-bg : var(--brand-core);
    --badge-integration-bg : var(--light4, #{$light4});
    --badge-integration-color : var(--light16, #{$light16});

    --grey-section-bg: var(--light4);
    --grey-section-sep-color: var(--light6);

    --dashboard-add-widget-color : var(--brand-core);
    --dashboard-widget-hover-color : var(--brand-l4);
    --dashboard-settings-menu-bg : var(--light4, #{$light4});
    --dashboard-settings-menu-shadow : 6px 0 6px -6px var(--light7, #{$light7});

    --active-license-text: var(--green_main);
    --inactive-license-text: var(--yellow_d2);

    /* Tabs component */
    --tabs-border-color: var(--light5);
    --tabs-active-color: var(--brand-core);
    --tabs-color: var(--dark16);

    // System groups

    --org-delete-folder-warning-header: var(--yellow_main, #{$yellow_main});
    --org-delete-folder-warning-bg: var(--yellow_l3, #{$yellow_l3});

    @include generateVarAndRgb(--system-card-bg-grad0, $light1);
    @include generateVarAndRgb(--system-card-bg-grad100, $light3);

    --system-card-border-color: var(--light7);

    --card-placeholder-shadow: inset 0 0.25rem 0.5rem rgba(var(--dark15--rgb), 0.2);
    --card-drag-shadow: 0 1rem 2rem rgba(var(--dark15--rgb), 0.2);

    --CP-pane-header-background: var(--light1);
    --CP-error-ribbon-bg: var(--red2_dim, #{$red2_dim});
    --CP-error-ribbon-border: var(--red2_dimmer, #{$red2_dimmer});

    /*  */
    --new-feature-gradient: linear-gradient(242.24deg, var(--light2) 0.43%, var(--brand-l4) 122.68%);
    --cloud-storage-spot-gradient: radial-gradient(50% 50% at 50% 50%, #D9D9D9 0%, #A8E1FE 0.01%, rgba(255, 255, 255, 0) 98.65%);
    --cloud-storage-focus: var(--light3);
    --cloud-storage-focus-2: var(--light7);
    // --cloud-storage-info-text

    /* Bookmarks */
    --bookmarks-background-color: var(--additional_light2, #{$additional_light2});
    --bookmarks-calendar-today-border: rgba(0, 0, 0, 0.38);
    --bookmarks-calendar-today-highlight-shadow: var(--light1);
    --bookmarks-calendar-cell-highlight-bg: var(--light3);
    --bookmarks-calendar-month-text: var(--dark12);
    --bookmarks-input-border-color: var(--light10);
    --bookmarks-time-input-active-bg: var(--light3);
    --bookmarks-filter-header-bg: var(--light6);
    --bookmarks-filter-header-color: var(--dark9);
    --bookmarks-filter-clear-btn-bg: var(--light3);
    --bookmarks-filter-clear-btn-stroke: var(--light16);
    --bookmarks-filter-body-bg: var(--light5);
    --bookmarks-filter-button-bg: var(--light4);
    --bookmarks-filter-button-text: var(--dark12);
    --bookmarks-filter-filled-text: var(--light2);
    --bookmarks-filter-tag-color: var(--btn-default-bg);
    --bookmarks-text-highlight-bg: var(--light3);
    --bookmarks-duration-bg: rgba(0, 0, 0, 0.5);
    --bookmarks-card-background-color: var(--light1);
    --bookmarks-card-background-color-hover: none;
    --bookmarks-card-shadow-color-hover: rgba(var(--dark4--rgb), 0.2);
    --bookmarks-card-video-background-color: var(--dark1);
    --bookmarks-card-thumbnail-error-description: var(--light12);
    --bookmarks-card-thumbnail-error-background: var(--light4);
    --bookmarks-card-border-color: var(--light4);
    --bookmarks-card-title-gradient: linear-gradient(
        to right,
        rgba(var(--light1--rgb), 0),
        rgba(var(--light1--rgb), 1)
    );
    --bookmarks-card-title-gradient-hover: var(--bookmarks-card-title-gradient);
    --bookmarks-card-video-bg: inherit;
    --bookmarks-share-header-title-color: var(--dark9);
    --bookmarks-share-url-background-color: var(--brand-core);
    --bookmarks-share-url-text-color: var(--light1);
    --bookmarks-share-details-text-color: var(--dark16);
    --bookmarks-share-delete-text-color: var(--light16);
    --bookmarks-share-password-container-border-color: var(--light6);
    --bookmarks-share-password-container-background-color: var(--additional-light3);
    --bookmarks-share-input-header-text-color: var(--dark8);
    --bookmark-sharing-viewer-text-color: var(--dark13);

    --tour-background: rgba(var(--dark9--rgb), 0.4);

    /* System Admin */
    --system-admin-info-text: var(--dark9, #2B383F); //$dark9;

    /* Ellipsis */
    --ellipsis-gradient: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 255, 255, 1) 85%);

    /* Layouts */
    --svg-toggle-arrow-color: var(--dark17);
    --svg-tab-arrow-color: var(--dark5);
    --sidebar-background: var(--light5);
    --sidebar-tab-hover: var(--light6);
    --sidebar-tab-active: var(--light4);
    --sidebar-tab-closed: var(--light8);

    --layout-grid-item-hover: var(--light15);
    --layout-grid-item-playing: var(--light6);
    --layout-grid-item-playing-hover: var(--light1);
    --layout-grid-item-selected: var(--brand-core);
    --layout-grid-item-selected-hover: var(--brand-l2);

    --placeholder-background: var(--light6);
    --placeholder-info-color: var(--light10);
    --placeholder-error-color-old: var(--red_main, #{$red_main});
    --placeholder-info-color-old: var(--dark11);
    --no-camera-placeholder-color: var(--dark10);
    --no-layouts-body-color: var(--dark17);

    --tree-locked-icon: var(--dark4);
    --tree-node-editable-color-override: var(--light3);

    --tree-node-main-color: var(--dark10);
    --tree-node-secondary-color: var(--dark17);
    --tree-node-selected-main-color: var(--brand-core);
    --tree-node-selected-secondary-color: var(--light1);
    --tree-node-activated-main-color: var(--dark17);
    --tree-node-activated-secondary-color: var(--dark17);
    --tree-node-checked-main-color: var(--dark17);
    --tree-node-checked-secondary-color: var(--light1);
    --tree-node-hover-background: var(--light4);
    --tree-node-pressed-background: var(--additional-light3);
    --tree-node-activated-background: var(--light6);
    --tree-node-hover-activated-background: var(--light5);
    --tree-node-pressed-activated-background: var(--additional-light3);
    --tree-node-playing-outline: var(--light7);
    --tree-node-offline-color: var(--light16);

    --tree-node-action-color: var(--dark10);
    --tree-node-action-hover-color: var(--dark13);
    --tree-node-menu-color: var(--dark10);

    --context-menu-bg: var(--drop-menu-navigation-bg);
    --context-menu-shadow: rgba(var(--dark15-rgb), 0.2);
    --context-menu-hr: var(--light7);
    --context-menu-item-text: var(--btn-text-color);
    --context-menu-item-icon: var(--svg-path-dark-color);
    --context-menu-item-text-hover: var(--dark17);
    --context-menu-item-icon-hover: var(--dark17);
    --context-menu-item-bg-hover: var(--brand-core);
    --context-menu-item-expanded-bg: var(--light3);

    --grid-new-layout-text: var(--dark17);
    --grid-new-layout-text-highlight: var(--dark12);

    --overlay-action-bg: rgba(var(--light2--rgb), 0.6);
    --overlay-action-bg-active: rgba(var(--light2--rgb), 0.5);
    --overlay-action-bg-hover: rgba(var(--light2--rgb), 0.7);
    --overlay-action-svg: rgba(var(--dark17--rgb), 0.8);
    --overlay-action-text: var(--dark17);
    --overlay-text: var(--dark17);
    --overlay-status-title: var(--dark12);
    --other-sites-title: var(--dark12);
    --other-sites-heading-background: var(--light6);
    --other-sites-heading-background-hover: var(--light7);
    --other-sites-heading-background-active: var(--light4);
    --other-sites-expand-stroke: var(--dark16);

	/* Merge */
    --merge-unmerged-error-text: unset;
    --merge-unmerged-system-message: var(--dark17);
}
