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

html[data-theme="dark-gray"], .theme-override[data-theme="dark-gray"] {
    body {
        background-color: #101010;
        color : #B8B8B8;
    }

    --body-bg    : #101010; //$dark_gray_3;
    --alt-body-bg : #000000; //$dark_gray_1;
    --body-text-color : #B8B8B8; //$light_gray_10;

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

    --header-bg                  : #303030; //$dark_gray_7;
    --header-border-color        : transparent;
    --header-webadm-bg           : #303030; //$dark_gray_7;
    --header-webadm-border-color : transparent;

    --ribbon-bg     : var(--bluez);
    --ribbon-border : var(--bluez);
    --ribbon-color  : #{$light_gray_4};

    --ribbon-alert-bg : #{$yellow_d2_lighter};
    --ribbon-alert-border : #{$yellow_d2_lighter};
    --ribbon-alert-color : #101010; //$dark_gray_3;

    --image-box-border-color : #484848; //$dark_gray_10;
    --image-box-selected-border-color : var(--brand-d1);

    --storage-size-available : #E8E8E8; //$light_gray_4
    --storage-size-reserved : repeating-linear-gradient(
                -45deg,
                #{$light_gray_4},
                #{$light_gray_4} 4.25px,
                #{$light_gray_6} 4.25px,
                #{$light_gray_6} 9px
    );
    --storage-size-reserved-border : #{$light_gray_6};

    --search-link-color               : #F8F8F8; // $light_gray_2;
    --search-link-visited-color       : #D8D8D8; // $light_gray_6;
    --search-link-visited-hover-color : #C8C8C8; // $light8;
    --search-highlight-bg          : rgba(var(--brand-d1--rgb), 0.8);
    --search-highlight-color: #E8E8E8; //$light_gray_4;

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

    --spot-gradient : radial-gradient(
                    ellipse farthest-corner at center center,
                    #484848 0,
                    #404040 3%,
                    #383838 5%,
                    #303030 10%,
                    #282828 15%,
                    #202020 20%,
                    #181818 23%,
                    #101010 25%,
                    #080707 30%,
                    #000000 40%
    );

    --h1 : #E8E8E8; //$light_gray_4;
    --h2 : #E8E8E8; //$light_gray_4;
    --h3 : #E8E8E8; //$light_gray_4;
    --h4 : #E8E8E8; //$light_gray_4;
    --h5 : #E8E8E8; //$light_gray_4;
    --h6 : #E8E8E8; //$light_gray_4;
    --h7 : #E8E8E8; //$light_gray_4;

    --elements-disabled : #585858; //$dark_gray_12;

    --svg-std-icon-fill : var(--dark_gray_16);
    --svg-path-light-color : #404040; //$dark_gray_9;
    --svg-path-dark-color  : #E8E8E8; //$light_gray_4;
    --svg-path-accent-color : var(--svg-path-dark-color);

    --svg-confirmations-color  : #B8B8B8; //$light_gray_10;

    --svg-placeholder-elm1-color : #E8E8E8; //$light_gray_4;
    --svg-placeholder-elm2-color : #B8B8B8; //$light_gray_10;

    --svg-table-button: #989898; //$light_gray_14

    --text-placeholder-color : #888888; //$dark_gray_18;
    --text-contrast: var(--light1);

    --scrollbar-color                   : #505050; //$light_gray_16;
    --scrollbar-thumb-bg                : #B8B8B8; //$light_gray_10;
    --scrollbar-thumb-border-color      : #404040; //$dark_gray_9;
    --menu-scrollbar-thumb-border-color : #404040; //$dark_gray_9;

    --tooltip-shadow-color : #000000;  //$dark_gray_1;
    --tooltip-bg : #606060; //$dark_gray_13;
    --tooltip-color : #E8E8E8; //$light_gray_4;
    --tooltip-contrast-bg: #{$additional_light2};
    --tooltip-contrast-color : #{$dark9};

    --validation-popover-shadow-color : none;
    --validation-popover-bg           : #{$dark_gray_9};
    --validation-popover-color        : #E8E8E8; //$light_gray_4;

    --popover-shadow-color : none;
    --popover-bg           : #606060; //$dark_gray_13;
    --popover-color        : #E8E8E8; //$light_gray_4;

    --radio-color              : #B8B8B8; //$light_gray_10;
    --radio-check-color        : var(--brand-d1);
    --radio-hover-color        : #E8E8E8; //$light_gray_4;
    --radio-hover-check-color  : var(--brand-core);
    --radio-active-color       : #B8B8B8; //$light_gray_10;
    --radio-active-check-color : var(--brand-l1);
    --radio-active-hover-color : #E8E8E8; //$light_gray_4;

    --checkbox-color              : #B8B8B8; //$light_gray_10;
    --checkbox-check-color        : var(--brand-d1);
    --checkbox-hover-color        : #E8E8E8; //$light_gray_4;
    --checkbox-hover-check-color  : var(--brand-core);
    --checkbox-active-color       : #F8F8F8; //$light_gray_2;
    --checkbox-active-check-color : var(--brand-l1);
    --checkbox-active-hover-color : #E8E8E8; //$light_gray_4;

    --auth-header-bg : #282828; //$dark_gray_6;
    --auth-header-color : #E8E8E8; //$light_gray_4;
    --auth-subheader-color : #B8B8B8; //$light_gray_10;
    --auth-body-bg : #181818; //$dark_gray_4;
    --auth-pill-bg : #585858; //$dark_gray_11;

    --border-color         : #505050; //$dark_gray_11;
    --border-hover-color   : #383838; //$dark_gray_8;
    --border-active-color  : #282828; //$dark_gray_6;
    --horizontal-sep-color : #404040; //$dark_gray_9;

    --label-color          : #E8E8E8; //light_gray_4;
    --label-color-original : #B8B8B8; //light_gray_10;
    --label-disabled-color : #E8E8E8; //light_gray_4;

    --placehoder-cloud-color   : #202020; //$dark_gray_5
    --placehoder-cloud-opacity : 0;
    --placeholder-light-color : #E8E8E8; //$light_gray_4;
    --placeholder-light2-color : #{$light_gray_5};
    --placeholder-accent-color : #{$light_gray_6};
    --placeholder-accent2-color : #{$light_gray_12};
    --placehoder-title-color   : #E8E8E8; //$light_gray_4;
    --placehoder-body-color    : #B8B8B8; //light_gray_10;
    --placeholder-description-text: #{$light10};
    --placeholder-bookmarks-bg-color: #A5B6C0;

    --placehoder-v2-title-color   : #{$dark_gray_17};
    --placehoder-v2-message-color    : #{$dark_gray_17};
    --placeholder-v2-description-color: #{$dark_gray_17};

    --progress-bar-color                  : #787878; //$dark_gray_16
    --progress-bar-border-color           : #787878; //$dark_gray_16
    --progress-bar-reindex-color          : var(--brand-d1);
    --progress-bar-heder-title-color      : var(--brand-d1);
    --progress-bar-heder-persentage-color : #E8E8E8; //$light_gray_4

    --switch-slider-bg            : #585858; //$dark_gray_12;
    --switch-slider-hover-bg      : #686868; //$dark_gray_14;
    --switch-disabled-color       : #585858; //$dark_gray_12;
    --switch-disabled-hover-color : #686868; //$dark_gray_14;
    --switch-selected-color       : #32731E; //$green_d1;
    --switch-selected-hover-color : #3A911E; //$green_main};
    --switch-button-color         : #B8B8B8; //light_gray_10;
    --switch-bar-color            : #3A911E; //$green_main};
    --switch-bar-hover-color      : #44A624; //$green_l1};
    --switch-bar-disable-color    : #383838; //$dark_gray_8;

    --switch-warning-color        : #8E1717; //$red_d2;
    --switch-warning-hover-color  : #AA1E1D; //$red_d1;
    --switch-warning-circle-color : #{$red_d1};
    --switch-circle-off-color         : #383838; //$dark_gray_9;
    --switch-circle-off-hover-color   : #C22626; //$red_main;
    --switch-circle-off-disable-color : #404040; //$dark_gray_9;

    --switch-circle-color         : #383838; //$dark_gray_9;
    --switch-circle-hover-color   : #C22626; //$red_main;
    --switch-circle-disable-color : #404040; //$dark_gray_9;

    --developer-menu-bg: #202020; //$dark_gray_5;
    --developer-menu-base-color : #A0A0A0; //$light_gray_13;

    // *** arch svg ***********************
    --arch-svg-dash-stroke              : var(--brand-d6);
    --arch-svg-solid-path-arrow-fill    : #E8E8E8; //$light_gray_4;
    --arch-svg-level1-fill              : #707070; //$dark_gray_15;
    --arch-svg-level1-color             : #F8F8F8; //$light_gray_2;
    --arch-svg-level2-fill              : #585858; //$dark_gray_12;
    --arch-svg-level3-fill              : #202020; //$dark_gray_5;
    --arch-svg-spacer-fill              : #101010; //$dark_gray_3;
    --arch-svg-cloud-fill               : var(--brand-d2);
    --arch-svg-cloud-color              : #F8F8F8; //$light_gray_2;
    --arch-svg-cloud-relay-fill         : var(--brand-d5);
    --arch-svg-cloud-relay-color        : #E8E8E8; //$light_gray_4;
    --arch-svg-third-party-fill         : #303030; //$dark_gray_7;
    --arch-svg-built-in-fill            : #202020; //$dark_gray_5;
    --arch-svg-built-in-color           : #E8E8E8; //$light_gray_4;
    --arch-svg-rest-streaming-api-fill  : #202020; //$dark_gray_5;
    --arch-svg-rest-streaming-api-color : #E8E8E8; //$light_gray_4;
    --arch-svg-server-fill              : #303030; //$dark_gray_7;
    --arch-svg-server-hover-fill        : #303030; //$dark_gray_7;
    --arch-svg-transparent-tile-stroke  : #587787; //$dark_gray_18
    // ***************************************

    --left-menu-bg                              : #{$dark_gray_5};
    --left-menu-border-color                    : transparent;
    --left-menu-l1-bg                           : transparent;
    --left-menu-l1-bg-hover                     : #585858; //$dark_gray_11;
    --left-menu-l1-bg-active                    : #404040; //$dark_gray_9;
    --left-menu-l1-color                        : #E8E8E8; //$light_gray_4;
    --left-menu-l1-selected-bg                  : #282828; //$dark_gray_6;
    --left-menu-l1-selected-hover-bg            : #404040; //$dark_gray_9;
    --left-menu-l3-scroll                       : #282828; //$dark_gray_6;
    --left-menu-l3-shadow                       : transparent;
    --left-menu-l3-bg                           : #282828; //$dark_gray_6;
    --left-menu-l3-color                        : #E8E8E8; //$light_gray_4;
    --left-menu-l3-accent-color                 : #A5B7C0; //$light_gray_10;
    --left-menu-l3-additional-color             : #888888; //$light_gray_16;
    --left-menu-l3-hover-bg                     : #B8B8B8; //light_gray_10;
    --left-menu-l3-hover-color                  : #080808; //$dark_gray_2
    --left-menu-l3-opacity                      : 1;
    --left-menu-l3-selected-bg                  : #505050; //$light_gray_16;
    --left-menu-l3-selected-color               : #F8F8F8; //$light_gray_2;
    --left-menu-disabled-item-color             : #606060; //$dark_gray_13;
    --left-menu-disabled-item-addtitional-color : #686868; //$dark_gray_14;

     // New header ******************************
     --header-level-one-color              : #{$light_gray_13};
     --header-level-one-bg                 : #{$dark_gray_4};
     --header-level-one-active-bg          : #{$dark_gray_5};
     --header-level-one-active-color       : #{$light_gray_4};
     --header-level-one-hover-color        : #{$light_gray_10};
     --header-level-two-bg                 : #{$dark_gray_6};
     --header-item-disabled                : #{$dark_gray_13};
     --header-level-two-hover-border-color : #{$dark_gray_11};
     --header-arrow-hover                  : #{$dark_gray_8};
     --header-nav-arrow-bg                 : #{$dark_gray_7};
     --header-logout-action-color          : #{$light_gray_16};
     --header-active-border-bg             : var(--brand-core);

    // Logo;
    --header-logo-text-color              : #{$light_gray_4};
    --header-logo-border                  : #{$dark_gray_11};

    // Mobile header
    --mobile-header-bg                    : #{$dark_gray_4};
    --mobile-level-one-color              : #{$dark_gray_15};
    --mobile-level-two-color              : #{$light_gray_6};
    --mobile-header-svg-color             : #{$light_gray_1};
    --mobile-header-border-one            : #{$dark_gray_2};
    --mobile-header-border-two            : #{$dark_gray_5};
    --mobile-header-border-three          : #{$dark_gray_3};
    --mobile-header-item-nav-arrow        : #{$dark_gray_13};
    --mobile-header-logout-btn-bg         : #{$dark_gray_12};
    --mobile-header-logout-btn-color      : #{$light_gray_2};

    // Header profile dropdown
    --header-profile-bg                   : #{$dark_gray_7};
    --header-profile-color                : #{$light_gray_13};
    --header-profile-hover-bg             : #{$dark_gray_9};
    --header-profile-hover-color          : #{$light_gray_10};
    --header-profile-active-color         : #{$light_gray_4};
    --header-profile-active-bg            : #{$dark_gray_9};

    // Header lang
    --header-lang-bg   : #{$dark_gray_4};
    --header-lang-code : #{$light_gray_16};
    --header-lang-code-text: #{$light_gray_1};

    // Footer
    --footer-bg                           : #{$dark_gray_4};
    --footer-text-color                   : #{$dark_gray_9};
    --footer-link-color                   : #{$dark_gray_15};
    --footer-mobile-bottom-bg             : #{$dark_gray_2};

    // View tab ********************************
    --view-bg                    : #202020; //$dark_gray_5;
    --view-search-bg             : #202020; //$dark_gray_5;
    --view-search-color          : #B8B8B8; //$light_gray_10;
    --view-search-hover-bg       : #101010; //$dark_gray_3;
    --view-search-hover-color    : #B8B8B8; //$light_gray_10;
    --view-search-active-bg      : #101010; //$dark_gray_3;
    --view-search-active-color   : #E8E8E8; //$light_gray_4;

    --control-color              : #484848; //$dark_gray_10;
    --control-enabled-color      : #888888; //$dark_gray_18;
    --control-hoved-bg           : #101010; //$dark_gray_3;
    --control-active-bg          : #101010; //$dark_gray_3;

    --left-menu-view-hover-bg    : #383838; //$dark_gray_8;
    --left-menu-view-selected-bg : #505050; //$light_gray_16;
    // end View tab ****************************

    --sidebar-toggling-ear-color : #E8E8E8; // $light_gray_16;

    --time-under-mouse-bg               : #{$dark_gray_10};
    --timeline-date-color               : #B8B8B8; //$light_gray_10;
    --timeline-time-color               : #{$light_gray_4};
    --timeline-bg                       : #202020; //$dark_gray_5;
    --timeline-tick-color               : #{$dark_gray_10};
    --timeline-major-color              : #{$light_gray_4};
    --timeline-manor-color              : #{$light_gray_10};
    --timeline-scrollbar-bg             : #404040; //$dark_gray_9;
    --timeline-scrollbar-hover-bg       : #383838; //$dark_gray_8;
    --timeline-scrollbar-stripe-bg      : #888888; //$dark_gray_18;
    --timeline-scrollbutton-bg          : rgba(var(--dark9--rgb), 0.5);
    --timeline-scrollbutton-hover-bg    : rgba(var(--dark9--rgb), 0.9);
    --timeline-playback-indicator-bg    : #383838; //$dark_gray_8;
    --timeline-selection-panel-bg       : var(--brand-d3);
    --timeline-selection-panel-hover-bg       : var(--brand-d4);
    --timeline-selection-panel-active-bg      : var(--brand-d2);
    --timeline-selection-panel-color    : #{$light_gray_4};
    --timeline-selection-picker         : dark;
    --timeline-selection-panel-delimiter-color : rgba(var(--light_gray_4--rgb), 0.25);
    --timeline-selection-panel-close-bg        : var(--brand-d6);
    --timeline-selection-panel-close-hover-bg        : var(--brand-d5);
    --timeline-selection-panel-close-active-bg        : var(--brand-d4);
    --timeline-control-color            : #{$light_gray_4};
    --timeline-chunk-color : var(--green_d2);
    --timeline-background : rgba(var(--green_d2--rgb), 0.1);

    // Timeline actions (for now) --TT
    --button-action-bg: #{$dark_gray_5};
    --button-action-border-color: #{$dark_gray_15};
    --button-action-icon-fill: #{$dark_gray_10};

    --paginator-bg           : #282828; //$dark_gray_6;
    --paginator-color        : #B8B8B8; //$light_gray_10;
    --paginator-hover-bg     : #585858; //$dark_gray_12;
    --paginator-hover-color  : #F8F8F8; //$light_gray_2;
    --paginator-active-bg    : #505050; //$dark_gray_11;
    --paginator-active-color : #F8F8F8; //$light_gray_2;

    --btn-download-hover-bg : #B8B8B8; //$light_gray_10;

    --btn-close-bg : #E8E8E8; //$light_gray_4;
    --btn-close-hover-bg : #404040; //$dark_gray_9;
    --btn-close-hover-color : #B8B8B8; //light_gray_10;
    --btn-close-active-bg : #181818; //$dark_gray_4;
    --btn-close-active-color : #808080; //$light_gray_17;

    --btn-text-color : #E8E8E8; //$light_gray_4;
    --btn-text-hover-color : #B8B8B8; //light_gray_10;
    --btn-text-active-color : #808080; //$light_gray_17;

    --btn-clear-bg    : transparent;
    --btn-clear-color : #E8E8E8; //$light_gray_4;
    --btn-clear-hover-bg  : transparent;
    --btn-clear-hover-color  : #B8B8B8; //light_gray_10;
    --btn-clear-active-bg : transparent;
    --btn-clear-active-color : #808080; //$light_gray_17;

    --btn-dropdown-toggle-bg             : #383838; //$dark_gray_8
    --btn-dropdown-toggle-selected-color : #E0E0E0; //$light_gray_5;
    --btn-dropdown-toggle-color          : #B8B8B8; //$light_gray_10
    --btn-dropdown-toggle-shadow-color   : none;
    --btn-dropdown-toggle-hover-bg       : #404040; //$dark_gray_9;
    --btn-dropdown-toggle-hover-shadow   : inset 0 -1px 0 0 #282828; //$dark_gray_6;
    --btn-dropdown-toggle-active-bg      : #505050; //$dark_gray_11;
    --btn-dropdown-toggle-active-shadow  : inset 0 1px 0 0 #282828; //$dark_gray_6;

    --btn-tag-bg                 : #585858; //$dark_gray_12;
    --btn-tag-color              : #F8F8F8; //$light_gray_2;
    --btn-tag-selected-bg        : #707070; //$dark_gray_15;
    --btn-tag-selected-hover-bg  : #505050; //$dark_gray_11;
    --btn-tag-selected-active-bg : #383838; //$dark_gray_8
    --btn-tag-selected-color     : #E8E8E8; //$light_gray_4;

    --btn-arrow-bg             : #585858; //$dark_gray_12;
    --btn-arrow-color          : #F8F8F8; //$light_gray_2;
    --btn-arrow-hover-bg       : #484848; //$dark_gray_10;
    --btn-arrow-hover-color    : #F8F8F8; //$light_gray_2;
    --btn-arrow-selected-bg    : #404040; //$dark_gray_9;
    --btn-arrow-selected-color : #E0E0E0; //$light_gray_5;

    --btn-default-bg                : #585858; //$dark_gray_12;
    --btn-default-color             : #F8F8F8; //$light_gray_2;
    --btn-default-shadow            : none;
    --btn-default-hover-bg          : #484848; //$dark_gray_10;
    --btn-default-hover-color       : #F8F8F8; //$light_gray_2;
    --btn-default-hover-shadow      : inset 0 -1px 0 0 #282828; //$dark_gray_6;
    --btn-default-active-bg         : #404040; //$dark_gray_9;
    --btn-default-active-color      : #E0E0E0; //$light_gray_5;
    --btn-default-active-shadow     : inset 0 1px 0 0 #282828; //$dark_gray_6;
    --btn-default-focus-shadow      : 0 0 0 2px var(--brand-l1);
    --btn-default-focus-outline-rgb : rgba(var(--brand-l1--rgb), 0.8);

    --btn-primary-bg                : var(--brand-core);
    --btn-primary-color             : #F8F8F8; //$light_gray_2;
    --btn-primary-shadow            : none;
    --btn-primary-hover-bg          : var(--brand-d2);
    --btn-primary-hover-color       : #F8F8F8; //$light_gray_2;
    --btn-primary-hover-shadow      : inset 0 -1px 0 0 var(--brand-d3);
    --btn-primary-active-bg         : var(--brand-d4);
    --btn-primary-active-color      : #F8F8F8; //$light_gray_2;
    --btn-primary-active-shadow     : inset 0 1px 0 0 var(--brand-d4);
    --btn-primary-focus-shadow      : 0 0 0 2px var(--brand-l1);
    --btn-primary-focus-outline-rgb : rgba(var(--brand-l1--rgb), 0.8);

    --btn-danger-bg                : #741414; //$red_d3;
    --btn-danger-color             : #F8F8F8; //$light_gray_2;
    --btn-danger-shadow            : none; //red_d4;
    --btn-danger-hover-bg          : #5E1010; //$red-d4;
    --btn-danger-hover-color       : #F8F8F8; //$light_gray_2;
    --btn-danger-hover-shadow      : inset 0 -1px 0 0 #330909; //$red_d6;
    --btn-danger-active-bg         : #480D0D; //$red-d5;
    --btn-danger-active-color      : #F8F8F8; //$light_gray_2;
    --btn-danger-active-shadow     : inset 0 1px 0 0 #330909; //$red_d6;
    --btn-danger-focus-shadow      : 0 0 0 2px var(--brand-l1);
    --btn-danger-focus-outline-rgb : rgba(var(--brand-l1--rgb), 0.3);

    --btn-header-saparator-color : #B8B8B8; //light_gray_10;
    --btn-header-main-bg         : transparent;
    --btn-header-main-color      : #E8E8E8; //$light_gray_4;
    --btn-header-main-hover-bg   : #505050; //$dark_gray_11;

    --btn-header-webadm-main-bg         : transparent;
    --btn-header-webadm-main-color      : #E8E8E8; //$light_gray_4;
    --btn-header-webadm-main-hover-bg   : #505050; //$dark_gray_11;
    --btn-header-webadm-main-active-bg  : #707070; //$dark_gray_15;
    --btn-disabled-opacity: 0.3;

    --dialog-bg : #202020; //$dark_gray_5;
    --dialog-border-color : #505050; //$dark_gray_11;
    --dialog-header-bg : #282828; //$dark_gray_6;
    --dialog-header-color: #{$light_gray_4};
    --dialog-header-muted-color: #{$light_gray_14};
    --dialog-overlay-bg: rgba(var(--dark1--rgb), 0.5);
    --dialog-box-shadow: 0px 16px 32px rgba(var(--dark15--rgb), 0.2);

    --svg-legend-bg : #202020; //$dark_gray_5;
    --svg-legend-border-color : #505050; //$dark_gray_11;

    --light-text-color : #B8B8B8; //light_gray_10;
    --light-text-opacity : .4;

    --tab-link-hover-bg           : #505050; //$dark_gray_11;
    --tab-link-hover-bottom-color : #282828; //$dark_gray_6;
    --tab-link-active-bg           : #202020; //$dark_gray_5;
    --tab-link-active-bottom-color : #202020; //$dark_gray_5;
    --tab-link-selected-color       : var(--brand-core);

    --tab-link-webadm-color               : #E8E8E8; //$light_gray_4;
    --tab-link-webadm-hover-bg            : #505050; //$dark_gray_11;
    --tab-link-webadm-active-bg           : #202020; //$dark_gray_5;

    --dropdown-menu-arrow-color      : #707070; //$dark_gray_15;
    --dropdown-menu-arrow-fill-color : #181818; //$dark_gray_4;

    --dropdown-menu-border : 1px solid #383838; //$dark_gray_8;
    --dropdown-menu-top-border : 1px solid #707070; //$dark_gray_15;
    --dropdown-menu-shadow : none;
    --dropdown-menu-shadow-upper : none;
    --dropdown-menu-bg : #181818; //$dark_gray_4;
    --drop-menu-systems-bg    : #202020; //$dark_gray_5;
    --drop-menu-navigation-bg : #303030; //$dark_gray_7;
    --dropdown-placeholder-color: #738F9D; //$light_gray_15;

    --dropdown-item-color: #B8B8B8; //$light_gray_10;
    --dropdown-item-active-bg : #404040; //$dark_gray_9;
    --dropdown-item-hover-bg : #303030; //$dark_gray_7;
    --dropdown-item-hover-color : #B8B8B8; //$light_gray_10
    --dropdown-item-selected-bg    : #505050; //$dark_gray_11;
    --dropdown-item-selected-color : #E8E8E8; //$light_gray_4;
    --dropdown-item-error-color : #C22626; //$red_main;

    // part of drop-menu
    --system-tile-icon-offline-color : #AA1E1D; //$red_d1
    --system-tile-name-color  : #E8E8E8; //$light_gray_4;
    --system-tile-owner-color : #B8B8B8; //$light_gray_10;
    --system-tile-hover-bg : #282828; //$dark_gray_6;
    --system-tile-active-bg : #202020; //$dark_gray_5;
    --system-tile-selected-bg : #505050; //$dark_gray_11;
    --system-tile-nav-link-color : #E8E8E8; //$light_gray_4;
    --system-tile-nav-link-icon-color : #E8E8E8; //$light_gray_4;
    --system-tile-nav-link-hover-bg    : #282828; //$dark_gray_6;
    --system-tile-nav-link-hover-color : #E8E8E8; //$light_gray_4;
    --system-tile-nav-link-active-bg           : #505050; //$dark_gray_11;
    --system-tile-nav-link-active-border-color : #505050; //$dark_gray_11;
    // *****************

    --swagger-get-bg    : #{$blue12};
    --swagger-put-bg    : #{$orange_d1};
    --swagger-delete-bg : #{$red_d1};
    --swagger-patch-bg  : #{$cyan600};
    --swagger-post-bg   : #{$green_d1};
    --swagger-btn-execute-bg    : var(--brand-core);
    --swagger-btn-execute-color : #{$light_gray_4};
    --swagger-btn-value-text-color   : #{$light_gray_10};
    --swagger-btn-key-text-color     : #{$purple400};
    --swagger-btn-value-number-color : #{$green_d2};
    --swagger-textarea-color : #{$light_gray_10};
    --swagger-required-color : #{$red_main};
    --swagger-input-disabled: #{$dark_gray_11};
    --swagger-input-disabled-border: #{$dark_gray_13};
    --swagger-table-header-color: #{$light_gray_4};
    --api-tool-section-header: #{$dark_gray_1};
    --media-type-bg: #{$dark_gray_11};
    --media-type-border: #{$light_gray_13};

    --footer-color : rgba(var(--light_gray_10--rgb), .65);

    --tabset-bg : #101010; //$dark_gray_3;
    --tabset-hover-bg : #282828; //$dark_gray_6;
    --tabset-color : #B8B8B8; //$light_gray_10;

    --table-alt-row-bg: #202020; //$dark_gray_5;
    --table-row-hover-bg : rgba(var(--brand-core--rgb), .1);
    --table-row-selected-bg : #{$dark_gray_8};
    --table-row-selected-color : #{$light_gray_1};

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

    --promo-tile-bg : #{$dark_gray_4};
    --promo-tile-h4-color : #{$light_gray_10};
    --promo-tile-img-1-path : url("/static/images/promo/landing_promo_dark_1.svg");
    --promo-tile-img-2-path : url("/static/images/promo/landing_promo_dark_2.svg");
    --promo-tile-img-3-path : url("/static/images/promo/landing_promo_dark_3.svg");

    --toast-danger-bg : var(--red_d3);
    --toast-danger-color : #E8E8E8; //$light_gray_4;
    --toast-danger-border-color : var(--red_d3);
    --toast-success-bg : #32731E; //$green_d1;
    --toast-success-color : #E8E8E8; //$light_gray_4;
    --toast-success-border-color : #32731E; //$green_d1;
    --toast-warning-bg : var(--yellow_d2);
    --toast-warning-color : #282828; //$dark_gray_6;
    --toast-warning-border-color : var(--yellow_d2);
    --toast-info-bg : var(--brand-d3);
    --toast-info-color : #E8E8E8; //$light_gray_4;
    --toast-info-border-color : var(--brand-d3);

    --card-shadow : none;
    --card-active-shadow : 0 2px 5px 0 #282828; //$dark_gray_6;
    --card-header-bg : #282828; //$dark_gray_6;
    --card-header-text : #{$light_gray_4};
    --card-header-disabled : #{$dark_gray_12};
    --card-body-bg   : #181818; //$dark_gray_4;
    --card-hover-bg : #383838; //$dark_gray_8;

    --card-simple-info-bg           : var(--bluez);
    --card-simple-info-border-color : var(--bluez);
    --card-simple-info-color        : #E8E8E8; //$light_gray_4;
    --card-simple-info-svg-color    : #E8E8E8; //$light_gray_4;

    --card-simple-warning-bg           : var(--yellow_d2_lighter);
    --card-simple-warning-border-color : var(--yellow_d2_lighter);
    --card-simple-warning-color        : #101010; //$dark_gray_3;
    --card-simple-warning-svg-color    : #101010; //$dark_gray_3;

    --card-simple-error-bg           : var(--red_d1_lighter);
    --card-simple-error-border-color : var(--red_d1_lighter);
    --card-simple-error-color        : #E8E8E8; //$light_gray_4;
    --card-simple-error-svg-color    : #E8E8E8; //$light_gray_4;
    --card-simple-error-svg-ornament-color    : var(--red_d1_lighter);

    --card-simple-default-bg           : var(--red_d3);
    --card-simple-default-border-color : var(--red_d3);
    --card-simple-default-color        : #E8E8E8; //$light_gray_4;

    --card-support-bg : #282828; //$dark_gray_6;
    --card-support-color : #B8B8B8; //$light_gray_10;
    --card-support-svg-elem-bg : #B8B8B8; //$light_gray_10;

    --card-capability-header-bg : #282828; //$dark_gray_6;
    --card-capability-intro-color : #B8B8B8; //$light_gray_10;
    --card-capability-icon        : var(--brand-d1);

    --support-lang-wrapper-bg    : #181818; //$dark_gray_4
    --support-lang-wrapper-color : #B8B8B8; //$light_gray_10;
    --support-tech-apple-color : #E8E8E8; //$light_gray_4;

    --error-label : #C22626; //$red_main;
    --error : #C22626; //$red_main;

    --input-bg                 : #{$dark_gray_4};
    --input-hover-bg           : #{$dark_gray_8};
    --input-color              : #B8B8B8; //$light_gray_10;
    --input-border-color       : #505050; //$dark_gray_11;
    --input-error-color        : #C22626; //$red_main;
    --input-error-border-color : #C22626; //$red_main;
    --input-hover-color        : #B8B8B8; //$light_gray_10;
    --input-hover-border-color : #888888; //$dark_gray_18;
    --input-focus-color        : #E8E8E8; //$light_gray_4;
    --input-focus-border-color : var(--brand-d1);
    --input-focus-shadow-color : rgba(var(--brand-d1--rgb), .3);
    --input-active-bg           : #101010; //$dark_gray_3;
    --input-active-color        : #E8E8E8; //$light_gray_4;
    --input-active-border-color : #5D7E8F; //$dark19;
    --input-color-placeholder   : #B8B8B8; //$light_gray_10;

    --input-disabled-color : #{$light_gray_10};
    --input-disabled-border-color : #505050; //$dark_gray_11;

    --input-numeric-arrow-bg    : #181818; //$dark_gray_4;
    --input-numeric-arrow-color : #B8B8B8; //$light_gray_10;

    --badge-opacity : 0.9;
    --badge-base-bg    : #282828; //$dark_gray_6;
    --badge-base-hover-bg : #404040; //$dark_gray_9;
    --badge-base-color : #E8E8E8; //$light_gray_4;
    --badge-base-selected-bg : #707070; //$dark_gray_15;
    --badge-base-selected-color : #E8E8E8; //$light_gray_4;
    --badge-base-selected-hover-bg  : #505050;//#{$dark_gray_11};
    --badge-base-selected-active-bg : #383838;//#{$dark_gray_8};

    --badge-default-bg    : #505050; //$dark_gray_11;
    --badge-color : #E8E8E8; //$light_gray_4;
    --badge-selected-color : #F0F0F0; //$light_gray_3;
    --badge-danger-bg    : #AA1E1E; //$red_d4;
    --badge-danger-bright-bg : #8E1717; //$red_d2;
    --badge-danger-bright-color : #E8E8E8; //$light_gray_4;
    --badge-warning-bg           : #E1A700; //$yellow_d1;
    --badge-warning-bright-bg    : #E1A700; //$yellow_d1;
    --badge-warning-bright-color : #282828; //$dark_gray_6;
    --badge-success-bg        : #2A551E; //$green_d2;
    --badge-success-bright-bg : #32731E; //$green_d1;
    --badge-brand-bg : var(--brand-d2);
    --badge-info-bg : var(--brand-d4);
    --badge-integration-bg : #606060; //$dark_gray_13;
    --badge-integration-color : #E8E8E8; //$light_gray_4;

    --grey-section-bg : #303030; //$dark_gray_7;
    --grey-section-sep-color : #505050; //$dark_gray_11;

    --dashboard-add-widget-color : var(--brand-d2);
    --dashboard-widget-hover-color : var(--brand-core);
    --dashboard-settings-menu-bg : #282828; //$dark_gray_6;
    --dashboard-settings-menu-shadow : none;

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

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

    // System groups

    --org-delete-folder-warning-header: #{$yellow_main};
    --org-delete-folder-warning-bg: #{$yellow_d3};

    @include generateVarAndRgb(--system-card-bg-grad0, $dark_gray_8);
    @include generateVarAndRgb(--system-card-bg-grad100, $dark_gray_5);

    --system-card-border-color: transparent;

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

    --CP-pane-header-background: var(--dark_gray_4);
    --CP-error-ribbon-bg: var(--red_d1_lighter);
    --CP-error-ribbon-border: var(--red_d1_lighter);

    /* Bookmarks */
    --bookmarks-background-color: inherit;
    --bookmarks-calendar-today-border: rgba(255, 255, 255, 0.38);
    --bookmarks-calendar-today-highlight-shadow: var(--light1);
    --bookmarks-calendar-cell-highlight-bg: var(--dark12);
    --bookmarks-calendar-month-text: var(--light10);
    --bookmarks-input-border-color: var(--input-border-color);
    --bookmarks-time-input-active-bg: var(--dark1);
    --bookmarks-filter-header-bg: var(--card-header-bg);
    --bookmarks-filter-header-color: var(--light4);
    --bookmarks-filter-clear-btn-bg: var(--dark9);
    --bookmarks-filter-clear-btn-stroke: var(--light4);
    --bookmarks-filter-body-bg: var(--card-body-bg);
    --bookmarks-filter-button-bg: var(--btn-default-bg);
    --bookmarks-filter-button-text: var(--body-text-color);
    --bookmarks-filter-filled-text: var(--light2);
    --bookmarks-filter-tag-color: var(--dark6);
    --bookmarks-text-highlight-bg: var(--dark12);
    --bookmarks-duration-bg: rgba(0, 0, 0, 0.5);
    --bookmarks-card-background-color: var(--dark5);
    --bookmarks-card-background-color-hover: var(--dark7);
    --bookmarks-card-shadow-color-hover: none;
    --bookmarks-card-video-background-color: var(--dark1);
    --bookmarks-card-thumbnail-error-description: var(--light12);
    --bookmarks-card-thumbnail-error-background: var(--dark6);
    --bookmarks-card-border-color: none;
    --bookmarks-card-title-gradient: linear-gradient(
        to right,
        rgba(var(--dark4--rgb), 0),
        rgba(var(--dark4--rgb), 1)
    );
    --bookmarks-card-title-gradient-hover: linear-gradient(
        to right,
        rgba(var(--dark_gray_8--rgb), 0),
        rgba(var(--dark_gray_8--rgb), 1)
    );
    --bookmarks-background-color: inherit;
    --bookmarks-duration-bg: rgba(0, 0, 0, .5);
    --bookmarks-card-video-bg: var(--dark6);
    --bookmarks-share-header-title-color: var(--light4);
    --bookmarks-share-url-background-color: var(--brand-core);
    --bookmarks-share-url-text-color: var(--light1);
    --bookmarks-share-details-text-color: var(--light4);
    --bookmarks-share-delete-text-color: var(--light4);
    --bookmarks-share-password-container-border-color: var(--dark6);
    --bookmarks-share-password-container-background-color: var(--dark4);
    --bookmarks-share-input-header-text-color: var(--light4);
    --bookmark-sharing-viewer-text-color: var(--light4);

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

    /* System Admin */
    --system-admin-info-text: #E1E7EA; //$light4;

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

    /* Layouts */
    --svg-toggle-arrow-color: var(--light17);
    --svg-tab-arrow-color: var(--light5);
    --sidebar-background: var(--dark5);
    --sidebar-tab-hover: var(--dark6);
    --sidebar-tab-active: var(--dark4);
    --sidebar-tab-closed: var(--dark8);

    --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(--dark4);
    --placeholder-info-color: var(--light10);
    --placeholder-error-color-old: #{$red_main};
    --placeholder-info-color-old: var(--dark11);
    --no-camera-placeholder-color: var(--light10);
    --no-layouts-body-color: var(--light17);

    --tree-locked-icon: var(--light4);
    --tree-node-editable-color-override: var(--dark9);

    --tree-node-main-color: var(--light10);
    --tree-node-secondary-color: var(--dark17);
    --tree-node-selected-main-color: var(--brand-core);
    --tree-node-selected-secondary-color: var(--dark17);
    --tree-node-activated-main-color: var(--light1);
    --tree-node-activated-secondary-color: var(--light1);
    --tree-node-checked-main-color: var(--light1);
    --tree-node-checked-secondary-color: var(--dark17);
    --tree-node-hover-background: var(--dark6);
    --tree-node-pressed-background: var(--dark4);
    --tree-node-activated-background: var(--dark7);
    --tree-node-hover-activated-background: var(--dark8);
    --tree-node-pressed-activated-background: var(--dark4);
    --tree-node-playing-outline: var(--dark10);
    --tree-node-offline-color: var(--dark15);

    --tree-node-action-color: var(--light10);
    --tree-node-action-hover-color: var(--light3);
    --tree-node-menu-color: var(--light10);

    --context-menu-bg: var(--drop-menu-navigation-bg);
    --context-menu-shadow: rgba(var(--dark_gray_1--rgb), 0.2);
    --context-menu-hr: var(--dark_gray_10);
    --context-menu-item-text: var(--btn-text-color);
    --context-menu-item-icon: var(--svg-path-dark-color);
    --context-menu-item-text-hover: var(--light1);
    --context-menu-item-icon-hover: var(--light1);
    --context-menu-item-bg-hover: var(--brand-core);
    --context-menu-item-expanded-bg: var(--dark9);

    --grid-new-layout-text: var(--light17);
    --grid-new-layout-text-highlight: var(--light10);

    --overlay-action-bg: rgba(var(--dark_gray_3--rgb), 0.6);
    --overlay-action-bg-active: rgba(var(--dark_gray_3--rgb), 0.5);
    --overlay-action-bg-hover: rgba(var(--dark_gray_3--rgb), 0.7);
    --overlay-action-svg: rgba(var(--light1--rgb), 0.8);
    --overlay-action-text: var(--light1);
    --overlay-text: var(--light1);
    --overlay-status-title: var(--light10);
    --other-sites-title: var(--light10);
    --other-sites-heading-background: var(--dark6);
    --other-sites-heading-background-hover: var(--dark7);
    --other-sites-heading-background-active: var(--dark4);
    --other-sites-expand-stroke: var(--light16);

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