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

html[data-theme="dark"], .theme-override[data-theme="dark"] {
    body {
        background-color: var(--dark3, #0D0E0F);
        color : var(--light10, #A5B7C0);
    }

    --test-bg : var(--dark3, #0D0E0F);
    --body-bg    : var(--dark3, #0D0E0F); //$dark3;
    --alt-body-bg : var(--dark1, #000000); //$dark1;
    --body-text-color : var(--light10, #A5B7C0); //$light10;

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

    --alt-tile-color : var(--light10, #A5B7C0); //$light10

    --header-bg                  : var(--dark7, #212A2F); //$dark7;
    --header-border-color        : transparent;
    --header-webadm-bg           : var(--dark7, #212A2F); //$dark7;
    --header-webadm-border-color : transparent;

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

    --ribbon-alert-bg : var(--yellow_d2_lighter, #{$yellow_d2_lighter});
    --ribbon-alert-border : var(--yellow_d2_lighter, #{$yellow_d2_lighter});
    --ribbon-alert-color : var(--dark3, #0D0E0F); //$dark3;

    --image-box-border-color : var(--dark10, #303F47); //$dark10;
    --image-box-selected-border-color : var(--brand-d1);

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

    --search-link-color               : var(--light2, #F5F7F8); // $light2;
    --search-link-hover-color         : var(--light6, #CDD7DC); // $light6;
    --search-link-visited-color       : var(--light6, #CDD7DC); // $light6;
    --search-link-visited-hover-color : var(--light8, #B9C7CE); // $light8;
    --search-highlight-bg          : rgba(var(--brand-d1--rgb), 0.8);
    --search-highlight-color: var(--light4, #E1E7EA); //$light4;

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

    --spot-gradient : radial-gradient(
        ellipse farthest-corner at center center,
        #303F47 0,
        #2B383F 3%,
        #263137 5%,
        #212A2F 10%,
        #1C2327 15%,
        #171C1F 20%,
        #121517 23%,
        #0D0E0F 25%,
        #080707 30%,
        #000000 40%
    );

    --h1 : var(--light4, #E1E7EA); //$light4;
    --h2 : var(--light4, #E1E7EA); //$light4;
    --h3 : var(--light4, #E1E7EA); //$light4;
    --h4 : var(--light4, #E1E7EA); //$light4;
    --h5 : var(--light4, #E1E7EA); //$light4;
    --h6 : var(--light4, #E1E7EA); //$light4;
    --h7 : var(--light4, #E1E7EA); //$light4;

    --elements-disabled : var(--dark12, #3A4D57); //$dark12;

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

    --svg-warning-fill: #C26626;
    --svg-warning-elm-fill: var(--warning_icon_dark_elm, #{$warning_icon_dark_elm});

    --svg-std-icon-fill : var(--dark16);
    --svg-path-light-color : var(--dark9, #2B383F); //$dark9;
    --svg-path-dark-color  : var(--light4, #E1E7EA); //$light4;
    --svg-path-accent-color : var(--svg-path-dark-color);

    --svg-confirmations-color  : var(--light10, #A5B7C0); //$light10;

    --svg-placeholder-elm1-color : var(--light4, #E1E7EA); //$light4;
    --svg-placeholder-elm2-color : var(--light10, #A5B7C0); //$light10;

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

    --text-placeholder-color : var(--dark18, #587785); //$dark18;
    --text-contrast: var(--light1);

    --scrollbar-color                   : var(--dark11, #35464F); //$light16;
    --scrollbar-thumb-bg                : var(--light10, #A5B7C0); //$light10;
    --scrollbar-thumb-border-color      : var(--dark9, #2B383F); //$dark9;
    --menu-scrollbar-thumb-border-color : var(--dark9, #2B383F); //$dark9;

    --tooltip-shadow-color : var(--dark1, #000000);  //$dark1;
    --tooltip-bg : var(--dark13, #3F545F); //$dark13;
    --tooltip-color : var(--light4, #E1E7EA); //$light4;
    --tooltip-box-shadow-color: rgba(73, 98, 111, 0.4);
    --tooltip-contrast-bg: var(--additional_light2, #{$additional_light2});
    --tooltip-contrast-color : var(--dark9, #{$dark9});

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

    --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});

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

    --radio-color              : var(--light10, #A5B7C0); //$light10;
    --radio-check-color        : var(--brand-d1);
    --radio-hover-color        : var(--light4, #E1E7EA); //$light4;
    --radio-hover-check-color  : var(--brand-core);
    --radio-active-color       : var(--light10, #A5B7C0); //$light10;
    --radio-active-check-color : var(--brand-l1);
    --radio-active-hover-color : var(--light4, #E1E7EA); //$light4;

    --checkbox-color              : var(--light10, #A5B7C0); //$light10;
    --checkbox-check-color        : var(--brand-d1);
    --checkbox-hover-color        : var(--light4, #E1E7EA); //$light4;
    --checkbox-hover-check-color  : var(--brand-core);
    --checkbox-active-color       : var(--light2, #F5F7F8); //$light2;
    --checkbox-active-check-color : var(--brand-l1);
    --checkbox-active-hover-color : var(--light4, #E1E7EA); //$light4;

    --auth-header-bg : var(--dark6, #1C2327); //$dark6;
    --auth-header-color : var(--light4, #E1E7EA); //$light4;
    --auth-subheader-color : var(--light10, #A5B7C0); //$light10;
    --auth-body-bg : var(--dark4, #121517); //$dark4;
    --auth-pill-bg : var(--dark12, #3A4D57); //$dark11;

    --border-color         : var(--dark11, #35464F); //$dark11;
    --border-hover-color   : var(--dark8, #263137); //$dark8;
    --border-active-color  : var(--dark6, #1C2327); //$dark6;
    --horizontal-sep-color : var(--dark9, #2B383F); //$dark9;

    --label-color          : var(--light4, #E1E7EA); //light4;
    /* This was the original value before it was changed to the one above without
    design's approval. There are too many places using the new value now to flip
    it back and risk breaking things on release, so using a different variable. */
    --label-color-original : var(--light10, #A5B7C0); //light10;
    --label-disabled-color : var(--light4, #E1E7EA); //light4;

    --placehoder-cloud-color   : var(--dark5, #171C1F); //$dark5
    --placehoder-cloud-opacity : 0;
    --placeholder-light-color : var(--light4, #E1E7EA); //$light4;
    --placeholder-light2-color : var(--light5, #{$light5});
    --placeholder-accent-color : var(--light6, #{$light6});
    --placeholder-accent2-color : var(--light12, #{$light12});
    --placehoder-title-color   : var(--light4, #E1E7EA); //$light4;
    --placehoder-body-color    : var(--light10, #A5B7C0); //light10;
    --placeholder-description-text: var(--light10, #{$light10});
    --placeholder-bookmarks-bg-color: #A5B6C0;

    --placehoder-v2-title-color   : var(--dark17,#53707F); //$dark17;
    --placehoder-v2-message-color    : var(--dark17,#53707F); //$dark17;
    --placeholder-v2-description-color: var(--dark17,#53707F); //$dark17;

    --progress-bar-color                  : var(--dark16, #4E6977); //$dark16
    --progress-bar-border-color           : var(--dark16, #4E6977); //$dark16
    --progress-bar-reindex-color          : var(--brand-d1);
    --progress-bar-heder-title-color      : var(--brand-d1);
    --progress-bar-heder-persentage-color : var(--light4, #E1E7EA); //$light4

    --switch-slider-bg            : var(--dark12, #3A4D57); //$dark12;
    --switch-slider-hover-bg      : var(--dark14, #445B67); //$dark14;
    --switch-disabled-color       : var(--dark12, #3A4D57); //$dark12;
    --switch-disabled-hover-color : var(--dark14, #445B67); //$dark14;
    --switch-selected-color       : #32731E; //$green_d1;
    --switch-selected-hover-color : #3A911E; //$green_main};
    --switch-button-color         : var(--light10, #A5B7C0); //light10;
    --switch-bar-color            : #3A911E; //$green_main};
    --switch-bar-hover-color      : #44A624; //$green_l1};
    --switch-bar-disable-color    : var(--dark8, #263137); //$dark8;

    --switch-warning-color        : #8E1717; //$red_d2;
    --switch-warning-hover-color  : #AA1E1D; //$red_d1;
    --switch-warning-circle-color : var(--red_d1, #{$red_d1});
    --switch-circle-off-color         : var(--dark8, #263137); //$dark9;
    --switch-circle-off-hover-color   : #C22626; //$red_main;
    --switch-circle-off-disable-color : var(--dark9, #2B383F); //$dark9;

    --switch-circle-color         : var(--dark8, #263137); //$dark9;
    --switch-circle-hover-color   : #C22626; //$red_main;
    --switch-circle-disable-color : var(--dark9, #2B383F); //$dark9;

    --developer-menu-bg: var(--dark5, #171C1F); //$dark5;
    --developer-menu-base-color : var(--light10, #A5B7C0); //$light10;

    // *** arch svg ***********************
    --arch-svg-dash-stroke              : var(--brand-d6);
    --arch-svg-solid-path-arrow-fill    : var(--light4, #E1E7EA); //$light4;
    --arch-svg-level1-fill              : var(--dark15, #49626F); //$dark15;
    --arch-svg-level1-color             : var(--light2, #F5F7F8); //$light2;
    --arch-svg-level2-fill              : var(--dark12, #3A4D57); //$dark12;
    --arch-svg-level3-fill              : var(--dark5, #171C1F); //$dark5;
    --arch-svg-spacer-fill              : var(--dark3, #0D0E0F); //$dark3;
    --arch-svg-cloud-fill               : var(--brand-d2);
    --arch-svg-cloud-color              : var(--light2, #F5F7F8); //$light2;
    --arch-svg-cloud-relay-fill         : var(--brand-d5);
    --arch-svg-cloud-relay-color        : var(--light4, #E1E7EA); //$light4;
    --arch-svg-third-party-fill         : var(--dark7, #212A2F); //$dark7;
    --arch-svg-built-in-fill            : var(--dark5, #171C1F); //$dark5;
    --arch-svg-built-in-color           : var(--light4, #E1E7EA); //$light4;
    --arch-svg-rest-streaming-api-fill  : var(--dark5, #171C1F); //$dark5;
    --arch-svg-rest-streaming-api-color : var(--light4, #E1E7EA); //$light4;
    --arch-svg-server-fill              : var(--dark7, #212A2F); //$dark7;
    --arch-svg-server-hover-fill        : var(--dark7, #212A2F); //$dark7;
    --arch-svg-transparent-tile-stroke  : #587787; //$dark18
    // ***************************************

    --left-menu-bg                              : var(--dark5);
    --left-menu-border-color                    : transparent;
    --left-menu-l1-bg                           : transparent;
    --left-menu-l1-bg-hover                     : var(--dark12, #3A4D57); //$dark11;
    --left-menu-l1-bg-active                    : var(--dark9, #2B383F); //$dark9;
    --left-menu-l1-color                        : var(--light4, #E1E7EA); //$light4;
    --left-menu-l1-selected-bg                  : var(--dark6, #1C2327); //$dark6;
    --left-menu-l1-selected-hover-bg            : var(--dark9, #2B383F); //$dark9;
    --left-menu-l3-scroll                       : var(--dark6, #1C2327); //$dark6;
    --left-menu-l3-shadow                       : transparent;
    --left-menu-l3-bg                           : var(--dark6, #1C2327); //$dark6;
    --left-menu-l3-color                        : var(--light4, #E1E7EA); //$light4;
    --left-menu-l3-accent-color                 : var(--light10, #A5B7C0); //$light10;
    --left-menu-l3-additional-color             : var(--light14, #698796); //$light16;
    --left-menu-l3-hover-bg                     : var(--light10, #A5B7C0); //light10;
    --left-menu-l3-hover-color                  : var(--dark2, #080707); //$dark2
    --left-menu-l3-opacity                      : 1;
    --left-menu-l3-selected-bg                  : var(--dark11, #35464F); //$light16;
    --left-menu-l3-selected-color               : var(--light2, #F5F7F8); //$light2;
    --left-menu-disabled-item-color             : var(--dark13, #3F545F); //$dark13;
    --left-menu-disabled-item-addtitional-color : var(--dark14, #445B67); //$dark14;

    // 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(--dark4, #{$dark4});
    --header-lang-code : var(--light16, #{$light16});
    --header-lang-code-text: var(--light1, #{$light1});

    // Footer
    --footer-bg                           : var(--dark4, #{$dark4});
    --footer-text-color                   : var(--dark18, #{$dark18});
    --footer-link-color                   : var(--dark18, #{$dark18});
    --footer-mobile-bottom-bg             : var(--dark2, #{$dark2});

    // View tab ********************************
    --view-bg                    : var(--dark5, #171C1F); //$dark5;
    --view-search-bg             : var(--dark5, #171C1F); //$dark5;
    --view-search-color          : var(--light10, #A5B7C0); //$light10;
    --view-search-hover-bg       : var(--dark3, #0D0E0F); //$dark3;
    --view-search-hover-color    : var(--light10, #A5B7C0); //$light10;
    --view-search-active-bg      : var(--dark3, #0D0E0F); //$dark3;
    --view-search-active-color   : var(--light4, #E1E7EA); //$light4;

    --control-color              : var(--dark10, #303F47); //dark10;
    --control-enabled-color      : var(--dark18, #587785); //$dark18;
    --control-hoved-bg           : var(--dark3, #0D0E0F); //$dark3;
    --control-active-bg          : var(--dark3, #0D0E0F); //$dark3;

    --left-menu-view-hover-bg    : var(--dark8, #263137); //$dark8;
    --left-menu-view-selected-bg : var(--dark11, #35464F); //$light16;
    // end View tab ****************************

    --sidebar-toggling-ear-color : var(--light4, #E1E7EA); // $light16;

    --time-under-mouse-bg               : var(--dark10);
    --timeline-date-color               : var(--light10, #A5B7C0); //$light10;
    --timeline-time-color               : var(--light4, #{$light4});
    --timeline-bg                       : var(--dark5, #171C1F); //$dark5;
    --timeline-tick-color               : var(--dark10, #{$dark10});
    --timeline-major-color              : var(--light4, #{$light4});
    --timeline-manor-color              : var(--light10, #{$light10});
    --timeline-scrollbar-bg             : var(--dark9, #2B383F); //$dark9;
    --timeline-scrollbar-hover-bg       : var(--dark8, #263137); //$dark8;
    --timeline-scrollbar-stripe-bg      : var(--dark18, #587785); //$dark18;
    --timeline-scrollbutton-bg          : rgba(var(--dark9--rgb), 0.5);
    --timeline-scrollbutton-hover-bg    : rgba(var(--dark9--rgb), 0.9);
    --timeline-playback-indicator-bg    : var(--dark8, #263137); //$dark8;
    --timeline-selection-panel-bg       : var(--brand-d4);
    --timeline-selection-panel-hover-bg       : var(--brand-d4);
    --timeline-selection-panel-active-bg      : var(--brand-d2);
    --timeline-selection-panel-color    : var(--light4, #{$light4});
    --timeline-selection-picker         : dark;
    --timeline-selection-panel-delimiter-color : rgba(var(--light4--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            : var(--light4, #{$light4});
    --timeline-chunk-color : var(--green_d2);
    --timeline-background : rgba(var(--green_d2--rgb), 0.1);

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

    --paginator-bg           : var(--dark6, #1C2327); //$dark6;
    --paginator-color        : var(--light10, #A5B7C0); //$light10;
    --paginator-hover-bg     : var(--dark12, #3A4D57); //$dark12;
    --paginator-hover-color  : var(--light2, #F5F7F8); //$light2;
    --paginator-active-bg    : var(--dark11, #35464F); //$dark11;
    --paginator-active-color : var(--light2, #F5F7F8); //$light2;

    --btn-download-hover-bg : var(--light10, #A5B7C0); //$light10;

    --btn-close-bg : var(--light4, #E1E7EA); //$light4;
    --btn-close-hover-bg : var(--dark9, #2B383F); //$dark9;
    --btn-close-hover-color : var(--light10, #A5B7C0); //light10;
    --btn-close-active-bg : var(--dark4, #121517); //$dark4;
    --btn-close-active-color : var(--light17, #5F7F8F); //$light17;

    --btn-text-color : var(--light4, #E1E7EA); //$light4;
    --btn-text-hover-color : var(--light10, #A5B7C0); //light10;
    --btn-text-active-color : var(--light17, #5F7F8F); //$light17;

    --btn-clear-bg    : transparent;
    --btn-clear-color : var(--light4, #E1E7EA); //$light4;
    --btn-clear-hover-bg  : transparent;
    --btn-clear-hover-color  : var(--light10, #A5B7C0); //light10;
    --btn-clear-active-bg : transparent;
    --btn-clear-active-color : var(--light17, #5F7F8F); //$light17;

    --btn-dropdown-toggle-bg             : var(--dark8, #263137); //$dark8
    --btn-dropdown-toggle-selected-color : var(--light5, #D7DFE3);; //$light5;
    --btn-dropdown-toggle-color          : var(--light10, #A5B7C0); //$light10
    --btn-dropdown-toggle-shadow-color   : none;
    --btn-dropdown-toggle-hover-bg       : var(--dark9, #2B383F); //$dark9;
    --btn-dropdown-toggle-hover-shadow   : inset 0 -1px 0 0 var(--dark6, #1C2327); //$dark6;
    --btn-dropdown-toggle-active-bg      : var(--dark11, #35464F); //$dark11;
    --btn-dropdown-toggle-active-shadow  : inset 0 1px 0 0 var(--dark6, #1C2327); //$dark6;

    --btn-tag-bg                 : var(--dark12, #3A4D57); //$dark12;
    --btn-tag-color              : var(--light2, #F5F7F8); //$light2;
    --btn-tag-selected-bg        : var(--dark15, #49626F); //$dark15;
    --btn-tag-selected-hover-bg  : var(--dark11, #35464F); //$dark11;
    --btn-tag-selected-active-bg : var(--dark8, #263137); //$dark8
    --btn-tag-selected-color     : var(--light4, #E1E7EA); //$light4;

    --btn-arrow-bg             : var(--dark12, #3A4D57); //$dark12;
    --btn-arrow-color          : var(--light2, #F5F7F8); //$light2;
    --btn-arrow-hover-bg       : var(--dark10, #303F47); //$dark10;
    --btn-arrow-hover-color    : var(--light2, #F5F7F8); //$light2;
    --btn-arrow-selected-bg    : var(--dark9, #2B383F); //$dark9;
    --btn-arrow-selected-color : var(--light5, #D7DFE3);; //$light5;

    --btn-default-bg                : var(--dark12, #3A4D57); //$dark12;
    --btn-default-color             : var(--light2, #F5F7F8); //$light2;
    --btn-default-shadow            : none;
    --btn-default-hover-bg          : var(--dark10, #303F47); //$dark10;
    --btn-default-hover-color       : var(--light2, #F5F7F8); //$light2;
    --btn-default-hover-shadow      : inset 0 -1px 0 0 var(--dark6, #1C2327); //$dark6;
    --btn-default-active-bg         : var(--dark9, #2B383F); //$dark9;
    --btn-default-active-color      : var(--light5, #D7DFE3);; //$light5;
    --btn-default-active-shadow     : inset 0 1px 0 0 var(--dark6, #1C2327); //$dark6;
    --btn-default-focus-shadow      : 0 0 0 2px var(--brand-d1);
    --btn-default-focus-outline-rgb : rgba(var(--brand-d1--rgb), .3);

    --btn-primary-bg                : var(--brand-core);
    --btn-primary-color             : var(--light2, #F5F7F8); //$light2;
    --btn-primary-shadow            : none;
    --btn-primary-hover-bg          : var(--brand-d2);
    --btn-primary-hover-color       : var(--light2, #F5F7F8); //$light2;
    --btn-primary-hover-shadow      : inset 0 -1px 0 0 var(--brand-d3);
    --btn-primary-active-bg         : var(--brand-d4);
    --btn-primary-active-color      : var(--light2, #F5F7F8); //$light2;
    --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), .3);

    --btn-danger-bg                : #741414; //$red_d3;
    --btn-danger-color             : var(--light2, #F5F7F8); //$light2;
    --btn-danger-shadow            : none;
    --btn-danger-hover-bg          : #5E1010; //$red-d4;
    --btn-danger-hover-color       : var(--light2, #F5F7F8); //$light2;
    --btn-danger-hover-shadow      : inset 0 -1px 0 0 #330909; //$red_d6;
    --btn-danger-active-bg         : #480D0D; //$red-d5;
    --btn-danger-active-color      : var(--light2, #F5F7F8); //$light2;
    --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), .3);

    --btn-header-saparator-color : var(--light10, #A5B7C0); //light10;
    --btn-header-main-bg         : transparent;
    --btn-header-main-color      : var(--light4, #E1E7EA); //$light4;
    --btn-header-main-hover-bg   : var(--dark11, #35464F); //$dark11;

    --btn-header-webadm-main-bg         : transparent;
    --btn-header-webadm-main-color      : var(--light4, #E1E7EA); //$light4;
    --btn-header-webadm-main-hover-bg   : var(--dark11, #35464F); //$dark11;
    --btn-header-webadm-main-active-bg  : var(--dark15, #49626F); //$dark15;
    --btn-disabled-opacity: 0.3;

    --dialog-bg : var(--dark5, #171C1F); //$dark5;
    --dialog-border-color : var(--dark11, #35464F); //$dark11;
    --dialog-header-bg : var(--dark6, #1C2327); //$dark6;
    --dialog-header-color: var(--light4, #E1E7EA); //$light4
    --dialog-header-muted-color: var(--light14);
    --dialog-overlay-bg: rgba(var(--dark1--rgb), 0.5);
    --dialog-box-shadow: 0px 16px 32px rgba(var(--dark15--rgb), 0.2);

    --svg-legend-bg : var(--dark5, #171C1F); //$dark5;
    --svg-legend-border-color : var(--dark11, #35464F); //$dark11;

    --light-text-color : var(--light10, #A5B7C0); //light10;
    --light-text-opacity : .4;

    --tab-link-hover-bg           : var(--dark11, #35464F); //$dark11;
    --tab-link-hover-bottom-color : var(--dark6, #1C2327); //$dark6;
    --tab-link-active-bg           : var(--dark5, #171C1F); //$dark5;
    --tab-link-active-bottom-color : var(--dark5, #171C1F); //$dark5;
    --tab-link-selected-color       : var(--brand-core);

    --tab-link-webadm-color               : var(--light4, #E1E7EA); //$light4;
    --tab-link-webadm-hover-bg            : var(--dark11, #35464F); //dark11;
    --tab-link-webadm-active-bg           : var(--dark5, #171C1F); //$dark5;

    --dropdown-menu-arrow-color      : var(--dark15, #49626F); //$dark15;
    --dropdown-menu-arrow-fill-color : var(--dark4, #121517); //dark4;

    --dropdown-menu-border : 1px solid var(--dark8, #263137); //$dark8;
    --dropdown-menu-top-border : 1px solid var(--dark15, #49626F); //$dark15;
    --dropdown-menu-shadow : none;
    --dropdown-menu-shadow-upper : none;
    --dropdown-menu-bg : var(--dark4, #121517); //dark4;
    --drop-menu-systems-bg    : var(--dark5, #171C1F); //$dark5;
    --drop-menu-navigation-bg : var(--dark7, #212A2F); //$dark7;
    --dropdown-placeholder-color: var(--light15, #738F9D);; //$light15;

    --dropdown-item-color: var(--light10, #A5B7C0); //$light10
    --dropdown-item-active-bg : var(--dark9, #2B383F); //$dark9;
    // --dropdown-item-active-color
    --dropdown-item-hover-bg : var(--dark7, #212A2F); //dark7;
    --dropdown-item-hover-color : var(--light10, #A5B7C0); //$light10
    --dropdown-item-selected-bg    : var(--dark11, #35464F); //dark11;
    --dropdown-item-selected-color : var(--light4, #E1E7EA); //$light4;
    --dropdown-item-error-color : #C22626; //$red_main;

    // part of drop-menu
    --system-tile-icon-offline-color : #AA1E1D; //$red_d1
    --system-tile-name-color  : var(--light4, #E1E7EA); //$light4;
    --system-tile-owner-color : var(--light10, #A5B7C0); //$light10;
    --system-tile-hover-bg : var(--dark6, #1C2327); //$dark6;
    --system-tile-active-bg : var(--dark5, #171C1F); //$dark5;
    --system-tile-selected-bg : var(--dark11, #35464F); //$dark11;
    --system-tile-nav-link-color : var(--light4, #E1E7EA); //$light4;
    --system-tile-nav-link-icon-color : var(--light4, #E1E7EA); //$light4;
    --system-tile-nav-link-hover-bg    : var(--dark6, #1C2327); //$dark6;
    --system-tile-nav-link-hover-color : var(--light4, #E1E7EA); //$light4;
    --system-tile-nav-link-active-bg           : var(--dark11, #35464F); //$dark11;
    --system-tile-nav-link-active-border-color : var(--dark11, #35464F); //$dark11;
    // *****************

    --swagger-get-bg    : var(--blue12, #{$blue12});
    --swagger-put-bg    : var(--orange_d1, #{$orange_d1});
    --swagger-delete-bg : var(--red_d1, #{$red_d1});
    --swagger-patch-bg  : var(--cyan600, #{$cyan600});
    --swagger-post-bg   : var(--green_d1, #{$green_d1});
    --swagger-btn-execute-bg    : var(--brand-core);
    --swagger-btn-execute-color : var(--light4, #{$light4});
    --swagger-btn-value-text-color   : var(--light10, #{$light10});
    --swagger-btn-key-text-color     : var(--purple400, #{$purple400});
    --swagger-btn-value-number-color : var(--green_d2, #{$green_d2});
    --swagger-textarea-color : var(--light10, #{$light10});
    --swagger-required-color : var(--red_main, #{$red_main});
    --swagger-input-disabled: var(--dark11, #{$dark11});
    --swagger-input-disabled-border: var(--dark13, #{$dark13});
    --swagger-table-header-color: var(--light4, #{$light4});
    --api-tool-section-header: var(--dark1, #{$dark1});
    --media-type-bg: var(--dark11, #{$dark11});
    --media-type-border: var(--light13, #{$light13});

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

    --tabset-bg : var(--dark3, #0D0E0F); //$dark3;
    --tabset-hover-bg : var(--dark6, #1C2327); //$dark6;
    --tabset-color : var(--light10, #A5B7C0); //$light10;

    --table-alt-row-bg: var(--dark5, #171C1F); //$dark5;
    --table-row-hover-bg : rgba(var(--brand-core--rgb), .1);
    --table-row-selected-bg : var(--dark8, #{$dark8});
    --table-row-selected-color : var(--light1, #{$light1});

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

    --promo-tile-bg : var(--dark4, #{$dark4});
    --promo-tile-h4-color : var(--light10, #{$light10});
    --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 : var(--light4, #E1E7EA); //$light4;
    --toast-danger-border-color : var(--red_d3);
    --toast-success-bg : #32731E; //$green_d1;
    --toast-success-color : var(--light4, #E1E7EA); //$light4;
    --toast-success-border-color : #32731E; //$green_d1;
    --toast-warning-bg : var(--yellow_d2);
    --toast-warning-color : var(--dark6, #1C2327); //$dark6;
    --toast-warning-border-color : var(--yellow_d2);
    --toast-info-bg : var(--brand-d3);
    --toast-info-color : var(--light4, #E1E7EA); //$light4;
    --toast-info-border-color : var(--brand-d3);

    --card-shadow : none;
    --card-active-shadow : 0 2px 5px 0 var(--dark6, #1C2327); //$dark6;
    --card-header-bg : var(--dark6, #1C2327); //$dark6;
    --card-header-text :  var(--light10, #{$light10});
    --card-header-disabled : var(--dark12, #{$dark12});
    --card-body-bg   : var(--dark4, #121517); //$dark4;
    --card-hover-bg : var(--dark8, #263137); //$dark8;

    --card-simple-info-bg           : var(--bluez);
    --card-simple-info-border-color : var(--bluez);
    --card-simple-info-color        : var(--light4, #E1E7EA); //$light4;
    --card-simple-info-svg-color    : var(--light4, #E1E7EA); //$light4;

    --card-simple-warning-bg           : var(--yellow_d2_lighter);
    --card-simple-warning-border-color : var(--yellow_d2_lighter);
    --card-simple-warning-color        : var(--dark3, #0D0E0F); //$dark3;
    --card-simple-warning-svg-color    : var(--light4, #E1E7EA); //$light4;

    --card-simple-error-bg           : var(--red_d1_lighter);
    --card-simple-error-border-color : var(--red_d1_lighter);
    --card-simple-error-color        : var(--light4, #E1E7EA); //$light4;
    --card-simple-error-svg-color    : var(--light4, #E1E7EA); //$light4;
    --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        : var(--light4, #E1E7EA); //$light4;

    --card-support-bg : var(--dark6, #1C2327); //$dark6;
    --card-support-color : var(--light10, #A5B7C0); //$light10;
    --card-support-svg-elem-bg : var(--light10, #A5B7C0); //$light10;

    --card-capability-header-bg : var(--dark6, #1C2327); //$dark6;
    --card-capability-intro-color : var(--light10, #A5B7C0); //$light10;
    --card-capability-icon        : var(--brand-d1);

    --support-lang-wrapper-bg    : var(--dark4, #121517); //$dark4
    --support-lang-wrapper-color : var(--light10, #A5B7C0); //$light10;
    --support-tech-apple-color : var(--light4, #E1E7EA); //$light4;

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

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

    --input-bg                 : var(--dark4, #{$dark4});
    --input-hover-bg           : var(--dark8, #{$dark8});
    --input-color              : var(--light10, #A5B7C0); //$light10;
    --input-border-color       : var(--dark11, #35464F); //$dark11;
    --input-error-color        : #C22626; //$red_main;
    --input-error-border-color : #C22626; //$red_main;
    --input-hover-color        : var(--light10, #A5B7C0); //$light10;
    --input-hover-border-color : var(--dark18, #587785); //$dark18;
    --input-focus-color        : var(--light4, #E1E7EA); //$light4;
    --input-focus-border-color : var(--brand-d1);
    --input-focus-shadow-color : rgba(var(--brand-d1--rgb), .3);
    --input-active-bg           : var(--dark3, #0D0E0F); //$dark3;
    --input-active-color        : var(--light4, #E1E7EA); //$light4;
    --input-active-border-color : var(--dark18, #5D7E8F);; //$dark19;
    --input-color-placeholder   : var(--light10, #A5B7C0); //$light10;

    --input-disabled-color : var(--light10, #{$light10});
    --input-disabled-border-color : var(--dark11, #35464F); //$dark11;

    --input-numeric-arrow-bg    : var(--dark4, #121517); //$dark4;
    --input-numeric-arrow-color : var(--light10, #A5B7C0); //$light10;

    --badge-opacity : 0.9;
    --badge-base-bg    : var(--dark6, #1C2327); //$dark6;
    --badge-base-hover-bg : var(--dark9, #2B383F); //$dark9;
    --badge-base-color : var(--light4, #E1E7EA); //$light4;
    --badge-base-selected-bg : var(--dark15, #49626F); //$dark15;
    --badge-base-selected-color : var(--light4, #E1E7EA); //$light4;
    --badge-base-selected-hover-bg  : var(--dark11, #35464F);//var(--dark11, #{$dark11});
    --badge-base-selected-active-bg : var(--dark8, #263137);//var(--dark8, #{$dark8});

    --badge-default-bg    : var(--dark11, #35464F); //$dark11;
    --badge-color : var(--light4, #E1E7EA); //$light4;
    --badge-selected-color : var(--light3, #EBEFF1); //$light3;
    --badge-danger-bg    : #AA1E1E; //$red_d4;
    --badge-danger-bright-bg : #8E1717; //$red_d2;
    --badge-danger-bright-color : var(--light4, #E1E7EA); //$light4;
    --badge-warning-bg           : #E1A700; //$yellow_d1;
    --badge-warning-bright-bg    : #E1A700; //$yellow_d1;
    --badge-warning-bright-color : var(--dark6, #1C2327); //$dark6;
    --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 : var(--dark13, #3F545F); //$dark13;
    --badge-integration-color : var(--light4, #E1E7EA); //$light4;

    --grey-section-bg : var(--dark7, #212A2F); //$dark7;
    --grey-section-sep-color : var(--dark11, #35464F); //$dark11;

    --dashboard-add-widget-color : var(--brand-d2);
    --dashboard-widget-hover-color : var(--brand-core);
    --dashboard-settings-menu-bg : var(--dark6, #1C2327); //$dark6;
    --dashboard-settings-menu-shadow : none;

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

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

    // System groups TODO
    --org-delete-folder-warning-header: var(--yellow_main, #{$yellow_main});
    --org-delete-folder-warning-bg: var(--yellow_d3, #{$yellow_d3});

    @include generateVarAndRgb(--system-card-bg-grad0, $dark8);
    @include generateVarAndRgb(--system-card-bg-grad100, $dark5);

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

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

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

    /*  */
    --new-feature-gradient: linear-gradient(242.24deg, var(--dark2) 0.43%, var(--brand-d4) 122.68%);
    --cloud-storage-spot-gradient: radial-gradient(50% 50% at 50% 50%, var(--dark2) 0%, var(--brand-d4) 0.01%, transparent 98.65%);
    --cloud-storage-focus: var(--dark6);
    --cloud-storage-focus-2: var(--dark6);
    --cloud-storage-info-text: var(--light9);

    /* Bookmarks */
    --bookmarks-background-color: inherit;
    --bookmarks-calendar-today-border: rgba(var(--light1--rgb, rgb(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(--dark11);
    --bookmarks-time-input-active-bg: var(--dark1);
    --bookmarks-filter-header-bg: var(--dark7);
    --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(--dark8);
    --bookmarks-filter-button-bg: var(--dark6);
    --bookmarks-filter-button-text: var(--light10);
    --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(--dark8--rgb), 0),
        rgba(var(--dark8--rgb), 1)
    );
    --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: var(--light4, #E1E7EA); //$light4;

    /* Ellipsis */
    --ellipsis-gradient: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(84, 88, 90, 1));

    /* 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: var(--red_main, #{$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); // $dark7
    --context-menu-shadow: rgba(var(--dark1--rgb), 0.4);
    --context-menu-hr: var(--dark10);
    --context-menu-item-text: var(--btn-text-color); // $light4
    --context-menu-item-icon: var(--svg-path-dark-color); // $light4
    --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(--dark3--rgb), 0.6);
    --overlay-action-bg-active: rgba(var(--dark3--rgb), 0.5);
    --overlay-action-bg-hover: rgba(var(--dark3--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-system-text: var(--light4);
    --merge-unmerged-system-message: var(--light10);
}
