body.light-theme {
    --body-background: #fafafa;
    --brand-primary: var(--b300);
    --brand-primary-accent: var(--b700);
    --mod-pan-color: #30363D;
    --tree-pan-color: #F3F3F3;
    --tree-pan-text: black;
    --table-background: #ffffff;
    --table-tr-hover: var(--table-tr-hover-color);
    --border-color: rgba(0, 0, 0, 0.12);
    --repiar-warning-header-color: #CD3336;
    --repiar--schedule-table-background: #ECF0F1;
    --repiar--schedule-table-border-color: #D7D9DC;
    --repiar--schedule-stop-day-color: rgba(196, 196, 196, 0.4);
    --table-header-color: #ecf0f1;
    --table-tr-hover: #eff7ea;
    --table-tr-parent: #ecedee;
    --table-border-color: #c3c5ce;
    --widget-button-default: #838486;
    --widget-button-hover: #8CC63E;
    --widget-button-active: #8CC63E;
    --widget-button-disable: rgba(166, 167, 168, 0.3);
    --tab-panel-background: #FDFDFD;
    --tab-panel-clicked-background: #D7D9DC;
    --repair-schedule-mat-card-background: #FAFCFD;
    --repair-schedule-mat-card-border: #D7D9DC;
    --table-repair-background: white;
    --table-repair-border: #e0e0e0;
    --xRect-color: url("#headerRowGradientId");
    --headerRowColor: linear-gradient(169.49deg, #ecf0f1 0%, #cbd7da 84.16%) !important;
    --factPlanColor: linear-gradient(169.49deg, #83f8c0 0%, #73daa9 84.16%) !important;
    --approvePlanColor: linear-gradient(169.49deg, #a3deff 0%, #50b3ea 84.16%) !important;
    --targetPlanColor: linear-gradient(169.49deg, #d5aef4 0%, #b36eea 84.16%) !important;
    --SCPPlanColor: linear-gradient(169.49deg, #F3F58A 0%, #F7B22E 84.16%) !important;
    --factPlanColorBox: #79e5b2;
    --approvePlanColorBox: #71c4f2;
    --targetPlanColorBox: #c189ee;
    --SCPPlanColorBox: #f6cb50;
    --rectFactPlan: #83F8C0;
    --rectApprovePlan: #A3DEFF;
    --rectTargetPlan: #D5AEF4;
    --rectSCPPlan: #F2C94C;
    --cases: 92.59deg, #4072BE 4.32%, #239ACD 96.76%;
    --repair: 147.33deg, #F7B22E 56.13%, #EAED63 80.35%;
    --unit-management: 135deg, #CE5B37 0%, #A155F1 100%;
    --fact-values: 147.33deg, #F7B22E 56.13%, #EAED63 80.35%;
    --target-values: 147.33deg, #F7B22E 56.13%, #EAED63 80.35%;
    --blending: 142.83deg, #2F80ED 69.08%, #A155F1 83.91%;
    --shipment: 138.43deg, #5BC56C 0%, #54DFF2 94.01%;
    --analytics2: 180deg, #82DDE2 0%, rgba(52, 163, 94, 0.7) 57.81%, #D4E31B 100%, rgba(212, 227, 27, 0.88) 100%;
    --selected-item-color: var(--grid-row-active);
    --widget-border-color: var(--grid-row-active);
    --func-header-background-color: #F3F3F3;
    --func-header-icons-color: brightness(0) saturate(100%) invert(14%) sepia(3%) saturate(2291%) hue-rotate(209deg) brightness(99%) contrast(90%);
    --func-header-icons-color-hover: brightness(0) saturate(100%) invert(56%) sepia(25%) saturate(504%) hue-rotate(41deg) brightness(100%) contrast(98%);
    --footer-background-color: var(--footer-background);
    --footer-font-color: #2465C6;
    --mat-card-background: var(--n50);
    --mat-card-font-color: var(--n900);
    --mat-drawer-container-background: var(--n50);
    --mat-card-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    --gantt-row-selected-background: #9BB26C4D;
    --mat-select-panel-option-selected: #879E61;
    --grid-mat-icons-filter: brightness(0) saturate(100%) invert(10%) sepia(3%) saturate(3220%) hue-rotate(202deg) brightness(97%) contrast(80%);
    --gantt-toolbar-icons-filter: brightness(0) saturate(100%) invert(34%) sepia(1%) saturate(2717%) hue-rotate(202deg) brightness(85%) contrast(89%);
    --spinner-circle-background: var(--n50);
    --window-resize-icon-filter: invert(61%) sepia(9%) saturate(227%) hue-rotate(201deg) brightness(83%) contrast(93%);
    --window-resize-icon-filter-hover: brightness(0) saturate(100%) invert(10%) sepia(3%) saturate(3220%) hue-rotate(202deg) brightness(97%) contrast(80%);
    --body-font-color: var(--n900);
    --disable-font-color: var(--n400);
    --primary-border-color: var(--n700);
    --secondary-border-color: var(--n400);
    --a-negative: #C52707;
    --mat-divider-color: var(--n400);
    /*Header*/
    --header-title-color: var(--n800);
    --header-breadcrumbs-color: var(--n800);
    --header-icons-color: var(--n800);
    --header-icons-background-hover: var(--b300);
    --header-icons-hover: var(--b600);
    --header-font-hover: var(--n800);
    --header-background: var(--n50);
    --header-border: var(--n400);
    /*Footer*/
    --footer-background: var(--n100);
    --footer-border: var(--n400);
    --footer-font-color: var(--n800);
    /*Submenu*/
    --submenu-font-color: var(--n400);
    --submenu-font-active: var(--n100);
    --submenu-font-hover: var(--n50);
    --submenu-background: var(--n800);
    --submenu-item-active: var(--b600);
    --submenu-item-hover: var(--b700);
    /*Buttons*/
    --button-background-color: var(--n300);
    --button-background-hover: var(--n400);
    --button-background-active: var(--n500);
    --button-background-disabled: var(--n200);
    --button-font-color: var(--body-font-color);
    --button-font-hover: var(--n900);
    --button-font-active: var(--n900);
    --button-font-disabled: var(--n400);
    --button-background-color-secondary: var(--n700);
    --button-background-hover-secondary: var(--n800);
    --button-background-active-secondary: var(--n900);
    --button-font-color-secondary: var(--n50);
    --button-font-hover-secondary: var(--n50);
    --button-font-active-secondary: var(--n50);
    --button-background-color-primary: var(--b600);
    --button-background-hover-primary: var(--b700);
    --button-background-active-primary: var(--b900);
    --button-font-color-primary: var(--n50);
    --button-font-hover-primary: var(--n50);
    --button-font-active-primary: var(--n50);
    --form-close-button-background: var(--n400);
    --form-close-button-color: var(--n800);
    /*Inputs*/
    --input-background-color: transparent;
    --input-background-hover: transparent;
    --input-background-focus: transparent;
    --input-background-disabled: var(--n100);
    --input-webkit-autofill: var(--n50);
    --input-font-hover: var(--n900);
    --input-font-focus: var(--n900);
    --input-font-disabled: var(--n600);
    /*checkradios*/
    --checkradio-border-default: var(--n700);
    --checkradio-border-hover: var(--b600);
    --checkradio-border-active-hover: var(--b600);
    --checkradio-background-default: transparent;
    --checkradio-background-active: var(--b600);
    --checkradio-background-disabled: var(--b300);
    --checkradio-font-active: var(--n100);
    --checkradio-font-disabled: var(--n100);
    /*Drop-downs / pop-ups / menus*/
    --dropdown-background: var(--n100);
    --dropdown-item-hover: var(--n400);
    --calendar-item-active: var(--b600);
    --calendar-item-hover: #809C5980;
    --calendar-font-active: var(--n100);
    --mobile-menu-background: var(--n400);
    --form-background-color: var(--n50);
    --tree-body-background: var(--n100);
    --overlay-container-background: rgba(0, 0, 0, 0.5);
    /* Shadows */
    --button-shadow: 0px 0px 1px rgba(51, 53, 56, 0);
    --checkradio-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.25);
    --tree-body-shadow: 3px 0px 3px rgba(0, 0, 0, 0.25);
    --overlay-panel-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25);
    --dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    --tab-label-shadow: -1px -1px 3px rgba(129, 133, 139, 0.25);
    --datepicker-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    --tab-border-shadow: 0;
    /* Scrollbar */
    --tltp-bg-default: rgba(97, 97, 97, 0.9);
    --tltp-font-default: var(--n50);
    /* Accordion */
    --scrollbar-width: 6px;
    --scrollbar-track-bg-color: var(--n500);
    --scrollbar-track-border-radius: 3px;
    --scrollbar-thumb-bg-color: var(--n600);
    --scrollbar-thumb-border-radius: 3px;
    --scrollbar-thumb-bg-color-hover: var(--n700);
    --scrollbar-thumb-bg-color-active: var(--n900);
    /* Accordion*/
    /*Background*/
    --accordion-body-background-color: transparent;
    --accordion-header-background-color: var(--n200);
    --accordion-item-background-color: transparent;
    --accordion-header-background-color-active: transparent;
    --accordion-item-background-color-active: transparent;
    --accordion-header-background-color-disabled: var(--n300);
    --accordion-item-background-color-disabled: var(--n300);
    /*Font*/
    --accordion-header-font-color: var(--n900);
    --accordion-item-font-color: var(--n900);
    --accordion-header-font-color-active: var(--b800);
    --accordion-item-font-color-active: var(--n900);
    --accordion-header-font-color-disabled: var(--n800);
    --accordion-item-font-color-disabled: var(--n800);
    /* Hover Colors */
    /*Background*/
    --accordion-header-background-hover: var(--b600);
    --accordion-item-background-hover: transparent;
    --accordion-header-background-hover-active: var(--b700);
    --accordion-item-background-hover-active: transparent;
    /*Font*/
    --accordion-header-font-hover: var(--n100);
    --accordion-item-font-hover: var(--n900);
    --accordion-header-font-hover-active: var(--n100);
    --accordion-item-font-hover-active: var(--n900);
    /* Borders */
    --accordion-body-radius: 1.15px;
    --accordion-item-border-radius: 2.35px;
    --accordion-item-border: 0;
    --accordion-header-border: 2px solid transparent;
    --accordion-item-border-active: 0;
    --accordion-header-border-active: 2px solid var(--b600);
    --accordion-item-border-disabled: 0;
    --accordion-header-border-disabled: 2px solid var(--n500);
    --accordion-item-border-hover: 0;
    --accordion-header-border-hover: 2px solid transparent;
    --accordion-item-border-active-hover: 0;
    --accordion-header-border-active-hover: 2px solid var(--b600);
    /* Chips Input */
    --chips-background-color: transparent;
    --chips-background-hover: var(--n100);
    --chips-font-color: var(--n900);
    --chips-font-hover: var(--n900);
    --chips-icon-hover: var(--b200);
    --chips-background-active: var(--n700);
    --chips-font-active: var(--n50);
    --chips-icon-active: var(--n100);
    --chips-icon-active-hover: var(--n400);
    --chips-body-background: var(--n400);
    --chips-input-box-shadow: 0;
    --chips-token-background: var(--b600);
    --chips-token-font-color: var(--n50);
    --select-container-diasbled-bg-color: var(--n300);
    --select-container-diasbled-font-color: var(--n600);
    /* ColorPicker */
    --clrpckr-dropdown-bg-color: var(--n700);
    --clrpckr-handle-color: var(--n50);
    --input-font-disabled: var(--n600);
    /* Context Menu */
    --context-menu-background-color: var(--n50);
    --context-menu-shadow: 1px 1px 4px rgba(111, 111, 119, 0.5);
    --context-menu-font-color: var(--n900);
    --context-menu-font-disabled-color: var(--n400);
    --context-menu-background-hover: var(--b100);
    --context-menu-font-hover: var(--n900);
    --context-menu-expand-icon-font-color: var(--n800);
    /* DatePicker */
    --datepicker-input-background-color: transparent;
    --datepicker-input-background-hover: transparent;
    --datepicker-input-background-focus: transparent;
    --datepicker-input-background-disabled: var(--n100);
    --datepicker-input-font-color: var(--n900);
    --datepicker-input-font-hover: var(--n900);
    --datepicker-input-font-focus: var(--datepicker-input-font-color);
    --datepicker-input-font-disabled: var(--n600);
    --datepicker-icon-color: var(--n900);
    --datepicker-icon-hover: var(--b500);
    --datepicker-dropdown-background: var(--n50);
    --datepicker-dropdown-item-hover: var(--n300);
    --calendar-item-active: var(--b600);
    --calendar-item-hover: var(--b600);
    --calendar-font-active: var(--n50);
    --calendar-time-btn-color: var(--n700);
    --calendar-time-btn-hover: var(--b500);
    --primary-border-color: var(--n700);
    --secondary-border-color: var(--n400);
    /* Dropdown Button */
    --dropdown-background-color: var(--n50);
    --dropdown-background-hover: var(--n50);
    --dropdown-font-color: var(--n900);
    --dropdown-font-hover: var(--n900);
    --dropdown-icon-hover: var(--n900);
    --dropdown-background-active: var(--n700);
    --dropdown-font-active: var(--n50);
    --dropdown-icon-active: var(--n50);
    --dropdown-icon-active-hover: var(--n400);
    --dropdown-body-background: var(--n400);
    --dropdown-font-color: var(--n900);
    /* Grid */
    /*Backgrounds*/
    --grid-row-odd: var(--n100);
    --grid-row-even: var(--n50);
    --grid-row-hover: var(--b200);
    --grid-main-background: var(--n100);
    --grid-main-background-disabled: var(--n100);
    --grid-row-active: var(--b600);
    --grid-row-active-hover: var(--b700);
    --grid-cell-range-selection-background-color: var(--b400);
    --grid-dropdown-background-color: var(--n50);
    --grid-dropdown-background-hover: var(--n400);
    --grid-input-background-color: var(--n100);
    --grid-input-background-hover: transparent;
    --grid-input-background-disabled: transparent;
    --grid-body-border: 1px solid var(--n300);
    --grid-header-border: 1px solid transparent;
    --grid-header-bottom-border: 1px solid var(--n300);
    --grid-footer-border: 1px solid transparent;
    --grid-footer-top-border: 1px solid var(--n300);
    --grid-content-border: 1px solid transparent;
    --grid-row-bottom-border: 1px solid var(--n300);
    --grid-last-row-bottom-border: 1px solid var(--n300);
    --grid-col-border: var(--n300);
    --grid-col-border-hover: var(--n300);
    /*Font colors*/
    --grid-body-font-color: var(--n900);
    --grid-body-font-hover: var(--n900);
    --grid-body-font-active: var(--n50);
    --grid-body-font-active-hover: var(--n50);
    --grid-input-font-color: var(--n900);
    --grid-input-font-hover: var(--n800);
    --grid-input-font-disabled: var(--n400);
    --grid-placeholder-font-color: var(--n400);
    --grid-header-font-hover: var(--b600);
    --grid-header-font-color: var(--n900);
    --grid-footer-font-color: var(--n800);
    --grid-paging-font-color-disabled: var(--n600);
    --grid-paging-font-color-active: var(--n50);
    --grid-paging-background-color-active: var(--b600);
    --grid-paging-font-color-hover: var(--n50);
    --grid-paging-background-color-hover: var(--b600);
    /* Sizes */
    --grid-cell-font-size: 11px;
    --grid-cell-offset: 3px;
    --hirerarchal-level-offset-step: 13px;
    /*Filter buttons and drop-down*/
    --grid-filter-background-hover: var(--b600);
    --grid-filter-icon-hover: var(--n50);
    --grid-filter-background-color: transparent;
    --grid-filter-icon-color: var(--n900);
    /*Buttons*/
    --grid-button-background-color: var(--button-background-color);
    --grid-button-background-hover: var(--button-background-hover);
    --grid-button-background-active: var(--button-background-active);
    --grid-button-background-disabled: var(--button-background-disabled);
    --grid-button-font-hover: var(--button-font-hover);
    --grid-button-font-active: var(--button-font-active);
    --grid-button-font-disabled: var(--button-font-disabled);
    /*Checks and radio*/
    --grid-checkradio-border-default: var(--n700);
    --grid-checkradio-border-hover: var(--b600);
    --grid-checkradio-border-active-hover: var(--b600);
    --grid-checkradio-background-default: transparent;
    --grid-checkradio-background-active: var(--b600);
    --grid-checkradio-background-disabled: var(--b300);
    --grid-checkradio-font-active: var(--n50);
    --grid-checkradio-font-disabled: var(--n50);
    --grid-dnd-ghost-background: var(--n50);
    /* Multi Select */
    --select-container-bg-color: transparent;
    --select-container-font-color: var(--n900);
    --select-container-border-color: var(--n900);
    --select-placeholder-font-color: var(--n700);
    --select-container-diasbled-bg-color: var(--n300);
    --select-container-diasbled-font-color: var(--n600);
    --select-value-selected-bg-color: var(--b600);
    --select-value-selected-font-color: var(--n50);
    --select-icon-bg-color-hover: var(--b200);
    --select-loader-color: transparent;
    --select-loader-bg-color: var(--n600);
    --select-dropdown-bg-color: var(--n50);
    --select-dropdown-border-color: var(--n500);
    --select-dropdown-option-selected-bg-color: var(--b600);
    --select-dropdown-option-selected-font-color: var(--n100);
    --select-dropdown-option-marked-bg-color: var(--b200);
    --select-dropdown-option-marked-font-color: var(--n800);
    /* Overlay */
    --overlay-background: #4C4E5099;  /* n700 60%*/
    /* Confirm Dialog */
    --cdk-container-background: var(--n50);
    --cdk-container-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25);
    --cdk-font-color: var(--n900);
    /* Spinner */
    --spinner-color: var(--b500);
    --spinner-mc-first-color: var(--spinner-color);
    --spinner-mc-second-color: var(--n600);
    --spinner-mc-third-color: var(--b700);
    --spinner-mc-fourth-color: var(--n800);
    --spinner-overlay-background: #DEDFDFB3;
    --spinner-title-color: var(--n900);
    /* Scroll Up Button */
    --scrollup-btn-background: var(--n900);
    --scrollup-btn-icon-color: var(--n100);
    /* Switcher */
    --switch-bg-off: var(--n500);
    --switch-bg-on: var(--b600);
    --switch-slider-bg-off: var(--n50);
    --switch-slider-bg-on: var(--n50);
    --switch-bg-off-disabled: var(--n300);
    --switch-bg-on-disabled: var(--n300);
    --switch-slider-bg-disabled: var(--n100);
    /* Tabs */
    --tab-background-color: tranparent;
    --tab-background-hover: var(--b300);
    --tab-background-active: var(--b600);
    --tab-background-disabled: var(--n500);
    --tab-font-color: var(--n800);
    --tab-font-hover: var(--n800);
    --tab-font-active: var(--b600);
    --tab-font-disabled: var(--n700);
    /* Toast */
    --positive-default-color: #6da25c;
    --warning-default-color: #c58827;
    --negative-default-color: #cb594f;
    --information-default-color: var(--n700);
    --positive-default-font: var(--n50);
    --warning-default-font: var(--positive-default-font);
    --negative-default-font: var(--positive-default-font);
    --information-default-font: var(--positive-default-font);
    /* Toggle Button */
    --tgl-btn-bg-default: var(--n400);
    --tgl-btn-bg-hover: var(--b200);
    --tgl-btn-bg-active: var(--b600);
    --tgl-btn-bg-disabled: var(--n100);
    --tgl-btn-bg-active-disabled: var(--n400);
    --tgl-btn-font-default: var(--n800);
    --tgl-btn-font-hover: var(--n900);
    --tgl-btn-font-active: var(--n50);
    --tgl-btn-font-disabled: var(--n400);
    --tgl-btn-font-active-disabled: var(--n50);
    /* Tree View/Input */
    --tree-background-default: transparent;
    --placeholder-font-color: var(--n700);
    --icon-color-hover: var(--n700);
    --tree-background-hover: var(--b200);
    --tree-font-color: var(--n800);
    --tree-font-hover: var(--n800);
    --tree-icon-hover: var(--b600);
    --select-container-diasbled-bg-color: var(--n50);
    --select-container-diasbled-font-color: var(--n600);
    --tree-background-active: var(--b600);
    --tree-font-active: var(--n100);
    --tree-icon-active: var(--n50);
    --tree-item-hover: var(--b200);
    --tree-item-active: var(--b600);
    --tree-icon-active-hover: var(--b600);
    --checkradio-size: 15px;
    --tree-border-radius: 0;
    --tree-toggler-border-radius: 2.35px;
    --tree-arrow-collapsed-color: var(--n700);
    --tree-arrow-expanded-color: var(--n800);
    --tree-arrow-hover: var(--b700);
    --tree-arrow-active-hover: var(--b200);
    --tree-checkbox-bg-active: var(--b700);
    --tree-checkbox-bg-active-hover: var(--b500);
    --tree-checkbox-ol-active-hover: var(--b800);
    --tree-item-dragover-background: #B6CB8880;
    --tree-item-droppoint-color: #4F4F5780;
    --auth-window-background: var(--n50);
    --auth-info-bar-font-color: var(--n800);
    --auth-info-bar-font-hover: var(--n700);
    --auth-roles-list-background-active: var(--b300);
    --auth-roles-list-background-hover: var(--n200);
    --auth-roles-list-font-active: var(--n900);
    /* Steps  */
    --steps-item-bg-hover: var(--n300);
    --steps-item-border-focus: 1px solid var(--b700);
    --steps-icon-pending-bg: var(--n100);
    --steps-icon-pending-border: 1px solid var(--n400);
    --steps-icon-pending-color: var(--n600);
    --label-pending-color: var(--n800);
    --steps-icon-active-bg: var(--b600);
    --steps-icon-active-color: var(--n50);
    --steps-label-active-color: var(--n900);
    --steps-icon-completed-color: invert(92%) sepia(68%) saturate(366%) hue-rotate(180deg) brightness(104%) contrast(103%);
    --steps-divider-bg: var(--n400);
    /* drag-drop-area */
    --dd-area-bg: var(--mat-card-background);
    --dd-area-preview-bg: #D7E3C680;
    --dd-area-preview-border: 1px dotted var(--n300);
    --dd-area-border-radius: 5px;
    --dd-area-item-bg: var(--n50);
    --dd-area-item-border: 1px solid var(--n200);
    --dd-area-item-border-radius: 5px;
    --dd-area-item-hover-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    --dd-area-item-moving-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);    
    /* Auth */
    --gradient-color: var(--b400);
}
body.dark-theme {
    --body-background: #303030;
    --brand-primary: var(--b700);
    --brand-primary-accent: var(--b300);
    --table-tr-hover-color: #f5d761;
    --mod-pan-color: --body-background;
    --calendar-stop-day-color: #dcdedf;
    --tree-pan-color: #424242;
    --tree-pan-text: white;
    --table-background: var(--body-background);
    --table-tr-hover: var(--table-tr-hover-color);
    --border-color: var(--brand-primary);
    --repiar-warning-header-color: #CD3336;
    --repiar--schedule-table-background: #ECF0F1;
    --repiar--schedule-table-border-color: #D7D9DC;
    --repiar--schedule-stop-day-color: rgba(196, 196, 196, 0.4);
    --table-header-color: #ecf0f1;
    --table-tr-hover: #eff7ea;
    --table-tr-parent: #ecedee;
    --table-border-color: red;
    --widget-button-default: #838486;
    --widget-button-hover: #8CC63E;
    --widget-button-active: #8CC63E;
    --widget-button-disable: rgba(166, 167, 168, 0.3);
    --tab-panel-background: #2121217a;
    --tab-panel-clicked-background: #212121;
    --tab-panel-clicked-color: #8BC34A;
    --repair-schedule-mat-card-background: #323232;
    --repair-schedule-mat-card-border: black;
    --table-repair-background: #323232;
    --table-repair-border: black;
    --xRect-color: #424242;
    --headerRowColor: #424242;
    --factPlanColor: #359a6a !important;
    --approvePlanColor: #0e75af !important;
    --targetPlanColor: #7740a2 !important;
    --SCPPlanColor: #b98522 !important;
    --factPlanColorBox: #359a6a;
    --approvePlanColorBox: #0e75af;
    --targetPlanColorBox: #7740a2;
    --SCPPlanColorBox: #b98522;
    --rectFactPlan: #359a6a;
    --rectApprovePlan: #0e75af;
    --rectTargetPlan: #7740a2;
    --rectSCPPlan: #b98522;
    --cases: 92.59deg, #4072BE 4.32%, #239ACD 96.76%;
    --repair: 147.33deg, #F7B22E 56.13%, #EAED63 80.35%;
    --unit-management: 135deg, #CE5B37 0%, #A155F1 100%;
    --fact-values: 147.33deg, #F7B22E 56.13%, #EAED63 80.35%;
    --target-values: 147.33deg, #F7B22E 56.13%, #EAED63 80.35%;
    --blending: 142.83deg, #2F80ED 69.08%, #A155F1 83.91%;
    --shipment: 138.43deg, #5BC56C 0%, #54DFF2 94.01%;
    --analytics2: 180deg, #82DDE2 0%, rgba(52, 163, 94, 0.7) 57.81%, #D4E31B 100%, rgba(212, 227, 27, 0.88) 100%;
    --selected-item-color: var(--grid-row-active);
    --widget-border-color: var(--grid-row-active);
    --func-header-background-color: #000000;
    --func-header-icons-color: brightness(0) saturate(100%) invert(100%) sepia(45%) saturate(669%) hue-rotate(305deg) brightness(106%) contrast(95%);
    --func-header-icons-color-hover: brightness(0) saturate(100%) invert(56%) sepia(25%) saturate(504%) hue-rotate(41deg) brightness(100%) contrast(98%);
    --footer-background-color: var(--footer-background);
    --footer-font-color: #ffffff;
    --mat-card-background: #424242;
    --mat-card-font-color: var(--n50);
    --mat-drawer-container-background: var(--n900);
    --mat-card-box-shadow: 0px 2px 1px -1px #F2F2FB33, 0px 1px 1px 0px #F2F2FB24, 0px 1px 3px 0px #F2F2FB1F;
    --gantt-row-selected-background: #9BB26C4D;
    --mat-select-panel-option-selected: #D3E1B7;
    --grid-mat-icons-filter: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(2650%) hue-rotate(180deg) brightness(110%) contrast(110%);
    --gantt-toolbar-icons-filter: brightness(0) saturate(100%) invert(88%) sepia(55%) saturate(1660%) hue-rotate(182deg) brightness(110%) contrast(114%);
    --spinner-circle-background: var(--n900);
    --window-resize-icon-filter: invert(42%) sepia(6%) saturate(492%) hue-rotate(201deg) brightness(100%) contrast(79%);
    --window-resize-icon-filter-hover: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(2650%) hue-rotate(180deg) brightness(110%) contrast(110%);
    --body-font-color: var(--n50);
    --disable-font-color: var(--n400);
    --primary-border-color: var(--n700);
    --secondary-border-color: var(--n400);
    --a-negative: #C52707;
    /*Header*/
    --header-title-color: var(--n100);
    --header-breadcrumbs-color: var(--n100);
    --header-icons-color: var(--n100);
    --header-icons-background-hover: var(--b300);
    --header-icons-hover: var(--b600);
    --header-font-hover: var(--n800);
    --header-background: var(--n900);
    --header-border: var(--b400);
    /*Footer*/
    --footer-background: var(--n800);
    --footer-border: var(--n700);
    --footer-font-color: var(--n300);
    /*Submenu*/
    --submenu-font-color: var(--n300);
    --submenu-font-active: var(--n100);
    --submenu-font-hover: var(--n100);
    --submenu-background: var(--n800);
    --submenu-item-active: var(--b600);
    --submenu-item-hover: var(--b700);
    /*Buttons*/
    --button-background-color: var(--n600);
    --button-background-hover: var(--n700);
    --button-background-active: var(--n800);
    --button-background-disabled: var(--n800);
    --button-font-color: var(--n50);
    --button-font-hover: var(--n50);
    --button-font-active: var(--n50);
    --button-font-disabled: var(--n600);
    --button-background-color-secondary: var(--n300);
    --button-background-hover-secondary: var(--n400);
    --button-background-active-secondary: var(--n500);
    --button-font-color-secondary: var(--n900);
    --button-font-hover-secondary: var(--n900);
    --button-font-active-secondary: var(--n900);
    --button-background-color-primary: var(--b600);
    --button-background-hover-primary: var(--b700);
    --button-background-active-primary: var(--b800);
    --button-font-color-primary: var(--n50);
    --button-font-hover-primary: var(--n50);
    --button-font-active-primary: var(--n50);
    --form-close-button-background: var(--n400);
    --form-close-button-color: var(--n900);
    /*Inputs*/
    --input-background-color: transparent;
    --input-background-hover: transparent;
    --input-background-focus: transparent;
    --input-background-disabled: #6D6F7133;   /*n600 20%*/
    --input-webkit-autofill: var(--n900);
    --input-font-hover: var(--n100);
    --input-font-focus: var(--n100);
    --input-font-disabled: var(--n900);
    /* card*/
    --wpcard-border: 1px solid var(--n300);
    --wpcard-background: var(--n900);
    /*checkradios*/
    --checkradio-border-default: var(--n50);
    --checkradio-border-hover: var(--b600);
    --checkradio-border-active-hover: var(--n100);
    --checkradio-background-default: transparent;
    --checkradio-background-active: var(--b600);
    --checkradio-background-disabled: var(--n700);
    --checkradio-font-active: var(--n900);
    --checkradio-font-disabled: var(--n500);
    /*Drop-downs / pop-ups / menus*/
    --dropdown-background: var(--n800);
    --dropdown-item-hover: var(--n600);
    --calendar-item-active: var(--b600);
    --calendar-item-hover: var(--b600);
    --calendar-font-active: var(--n100);
    --mobile-menu-background: var(--n800);
    --form-background-color: var(--n900);
    --tree-body-background: var(--n800);
    --overlay-container-background: rgba(0, 0, 0, 0.5);
    --form-font-color: var(--n100);
    /* Shadows */
    --button-shadow: 0px 0px 1px rgba(51, 53, 56, 0);
    --checkradio-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.25);
    --tree-body-shadow: 3px 0px 3px rgba(0, 0, 0, 0.25);
    --overlay-panel-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25);
    --dropdown-menu-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    --tab-label-shadow: -1px -1px 3px rgba(129, 133, 139, 0.25);
    --datepicker-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    --tab-border-shadow: 0;
    /* Tooltip */
    --tltp-bg-default: rgba(97, 97, 97, 0.9);
    --tltp-font-default: var(--n50);
    /* Scrollbar */
    --scrollbar-width: 6px;
    --scrollbar-track-bg-color: var(--n500);
    --scrollbar-track-border-radius: 3px;
    --scrollbar-thumb-bg-color: var(--n600);
    --scrollbar-thumb-border-radius: 3px;
    --scrollbar-thumb-bg-color-hover: var(--n700);
    --scrollbar-thumb-bg-color-active: var(--n900);
    /* Accordion */
    /*Background*/
    --accordion-body-background-color: transparent;
    --accordion-header-background-color: var(--b800);
    --accordion-item-background-color: transparent;
    --accordion-header-background-color-active: transparent;
    --accordion-item-background-color-active: transparent;
    --accordion-header-background-color-disabled: var(--n300);
    --accordion-item-background-color-disabled: var(--n300);
    /*Font*/
    --accordion-header-font-color: var(--n100);
    --accordion-item-font-color: var(--n100);
    --accordion-header-font-color-active: var(--b50);
    --accordion-item-font-color-active: var(--n100);
    --accordion-header-font-color-disabled: var(--n800);
    --accordion-item-font-color-disabled: var(--n300);
    /* Hover Colors */
    /*Background*/
    --accordion-header-background-hover: var(--b600);
    --accordion-item-background-hover: transparent;
    --accordion-header-background-hover-active: var(--b700);
    --accordion-item-background-hover-active: transparent;
    /*Font*/
    --accordion-header-font-hover: var(--n100);
    --accordion-item-font-hover: var(--n900);
    --accordion-header-font-hover-active: var(--n100);
    --accordion-item-font-hover-active: var(--n900);
    /* Borders */
    --accordion-body-radius: 1.15px;
    --accordion-item-border-radius: 2.35px;
    --accordion-item-border: 0;
    --accordion-header-border: 2px solid transparent;
    --accordion-item-border-active: 0;
    --accordion-header-border-active: 2px solid var(--b600);
    --accordion-item-border-disabled: 0;
    --accordion-header-border-disabled: 2px solid var(--n500);
    --accordion-item-border-hover: 0;
    --accordion-header-border-hover: 2px solid transparent;
    --accordion-item-border-active-hover: 0;
    --accordion-header-border-active-hover: 2px solid var(--b600);
    /* Chips Input */
    --chips-background-color: transparent;
    --chips-background-hover: var(--n100);
    --chips-font-color: var(--n900);
    --chips-font-hover: var(--n900);
    --chips-icon-hover: var(--b200);
    --chips-background-active: var(--n700);
    --chips-font-active: var(--n50);
    --chips-icon-active: var(--n100);
    --chips-icon-active-hover: var(--n400);
    --chips-body-background: var(--n400);
    --chips-input-box-shadow: 0;
    --chips-token-background: var(--b600);
    --chips-token-font-color: var(--n50);
    /* ColorPicker */
    --clrpckr-dropdown-bg-color: var(--n700);
    --clrpckr-handle-color: var(--n50);
    --input-font-disabled: var(--n600);
    /* Context Menu */
    --context-menu-background-color: var(--n800);
    --context-menu-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    --context-menu-font-color: var(--n100);
    --context-menu-font-disabled-color: var(--n600);
    --context-menu-background-hover: var(--b300);
    --context-menu-font-hover: var(--n900);
    --context-menu-expand-icon-font-color: var(--n100);
    /* DatePicker */
    --datepicker-input-background-color: transparent;
    --datepicker-input-background-hover: transparent;
    --datepicker-input-background-focus: transparent;
    --datepicker-input-background-disabled: var(--n800);
    --datepicker-input-font-color: var(--n50);
    --datepicker-input-font-hover: var(--n50);
    --datepicker-input-font-focus: var(--datepicker-input-font-color);
    --datepicker-input-font-disabled: var(--n700);
    --datepicker-icon-color: var(--n50);
    --datepicker-icon-hover: var(--b500);
    --datepicker-dropdown-background: var(--n800);
    --datepicker-dropdown-item-hover: var(--n500);
    --calendar-item-active: var(--b600);
    --calendar-item-hover: #809C5980;
    --calendar-font-active: var(--n100);
    --calendar-time-btn-color: var(--n700);
    --calendar-time-btn-hover: var(--b500);
    --primary-border-color: var(--n700);
    --secondary-border-color: var(--n500);
    /* Dropdown Button */
    --dropdown-background-color: var(--n800);
    --dropdown-background-hover: var(--n100);
    --dropdown-font-color: var(--n50);
    --dropdown-font-hover: var(--n50);
    --dropdown-icon-hover: var(--n50);
    --dropdown-background-active: var(--n700);
    --dropdown-font-active: var(--n100);
    --dropdown-icon-active: var(--n100);
    --dropdown-icon-active-hover: var(--n400);
    --dropdown-body-background: var(--n400);
    --dropdown-font-color: var(--n50);
    /* Grid */
    /*Backgrounds*/
    --grid-row-odd: var(--n700);
    --grid-row-even: var(--n800);
    --grid-row-hover: var(--b300);
    --grid-main-background: var(--n700);
    --grid-main-background-disabled: var(--n800);
    --grid-row-active: var(--b600);
    --grid-row-active-hover: var(--b700);
    --grid-cell-range-selection-background-color: var(--b400);
    --grid-dropdown-background-color: var(--n800);
    --grid-dropdown-background-hover: var(--n500);
    --grid-input-background-color: transparent;
    --grid-input-background-hover: transparent;
    --grid-input-background-disabled: transparent;
    --grid-body-border: 1px solid var(--n500);
    --grid-header-border: 1px solid transparent;
    --grid-header-bottom-border: 1px solid var(--n500);
    --grid-footer-border: 1px solid transparent;
    --grid-footer-top-border: 1px solid var(--n500);
    --grid-content-border: 1px solid transparent;
    --grid-row-bottom-border: 1px solid var(--n500);
    --grid-last-row-bottom-border: 1px solid var(--n500);
    --grid-col-border: var(--n500);
    --grid-col-border-hover: var(--n100);
    /*Font colors*/
    --grid-body-font-color: var(--n100);
    --grid-body-font-hover: var(--n900);
    --grid-body-font-active: var(--n100);
    --grid-body-font-active-hover: var(--n100);
    --grid-input-font-color: var(--n100);
    --grid-input-font-hover: var(--n100);
    --grid-input-font-disabled: var(--n500);
    --grid-placeholder-font-color: var(--n500);
    --grid-header-font-hover: var(--b500);
    --grid-header-font-color: var(--n100);
    --grid-footer-font-color: var(--n100);
    --grid-paging-font-color-disabled: var(--n800);
    --grid-paging-font-color-active: var(--n100);
    --grid-paging-background-color-active: var(--b600);
    --grid-paging-font-color-hover: var(--n100);
    --grid-paging-background-color-hover: var(--b600);
    /* Sizes */
    --grid-cell-font-size: 11px;
    --grid-cell-offset: 3px;
    --hirerarchal-level-offset-step: 13px;
    /*Filter buttons and drop-down*/
    --grid-filter-background-hover: var(--b600);
    --grid-filter-icon-hover: var(--n300);
    --grid-filter-background-color: transparent;
    --grid-filter-icon-color: var(--n100);
    /*Buttons*/
    --grid-button-background-color: var(--button-background-color);
    --grid-button-background-hover: var(--button-background-hover);
    --grid-button-background-active: var(--button-background-active);
    --grid-button-background-disabled: var(--button-background-disabled);
    --grid-button-font-hover: var(--button-font-hover);
    --grid-button-font-active: var(--button-font-active);
    --grid-button-font-disabled: var(--button-font-disabled);
    /*Checks and radio*/
    --grid-checkradio-border-default: var(--n50);
    --grid-checkradio-border-hover: var(--n100);
    --grid-checkradio-border-active-hover: var(--n100);
    --grid-checkradio-background-default: transparent;
    --grid-checkradio-background-active: var(--b500);
    --grid-checkradio-background-disabled: var(--b200);
    --grid-checkradio-font-active: var(--n200);
    --grid-checkradio-font-disabled: var(--b600);
    --grid-dnd-ghost-background: var(--n800);
    /* Multi Select */
    --select-container-bg-color: transparent;
    --select-container-font-color: var(--n100);
    --select-container-border-color: var(--n100);
    --select-placeholder-font-color: var(--n700);
    --select-container-diasbled-bg-color: var(--n800);
    --select-container-diasbled-font-color: var(--n700);
    --select-value-selected-bg-color: var(--b600);
    --select-value-selected-font-color: var(--n50);
    --select-icon-bg-color-hover: var(--b500);
    --select-loader-color: transparent;
    --select-loader-bg-color: var(--n700);
    --select-dropdown-bg-color: var(--n800);
    --select-dropdown-border-color: var(--n500);
    --select-dropdown-option-selected-bg-color: var(--b600);
    --select-dropdown-option-selected-font-color: var(--n100);
    --select-dropdown-option-marked-bg-color: var(--b300);
    --select-dropdown-option-marked-font-color: var(--n800);
    /* Overlay */
    --overlay-background: #313233B3;    /*n800 70%*/
    /* Confirm Dialog */
    --cdk-container-background: var(--n900);
    --cdk-container-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25);
    --cdk-font-color: var(--n100);
    /* Spinner */
    --spinner-color: var(--b500);
    --spinner-mc-first-color: var(--spinner-color);
    --spinner-mc-second-color: var(--n600);
    --spinner-mc-third-color: var(--b700);
    --spinner-mc-fourth-color: var(--n800);
    --spinner-overlay-background: #313233B3;    /*n800 70%*/
    --spinner-title-color: var(--n50);
    /* Scroll Up Button */
    --scrollup-btn-background: var(--n100);
    --scrollup-btn-icon-color: var(--n900);
    /* Switcher */
    --switch-bg-off: var(--n500);
    --switch-bg-on: var(--b600);
    --switch-slider-bg-off: var(--n50);
    --switch-slider-bg-on: var(--n50);
    --switch-bg-off-disabled: var(--n300);
    --switch-bg-on-disabled: var(--n300);
    --switch-slider-bg-disabled: var(--n100);
    /* Tabs */
    --tab-background-color: tranparent;
    --tab-background-hover: var(--b400);
    --tab-background-active: var(--b600);
    --tab-background-disabled: var(--n500);
    --tab-font-color: var(--n100);
    --tab-font-hover: var(--n100);
    --tab-font-active: var(--b300);
    --tab-font-disabled: var(--n700);
    /* Toast */
    --positive-default-color: #6da25c;
    --warning-default-color: #c58827;
    --negative-default-color: #cb594f;
    --information-default-color: var(--n700);
    --positive-default-font: var(--n50);
    --warning-default-font: var(--positive-default-font);
    --negative-default-font: var(--positive-default-font);
    --information-default-font: var(--positive-default-font);
    /* Toggle Button */
    --tgl-btn-bg-default: var(--n800);
    --tgl-btn-bg-hover: var(--b700);
    --tgl-btn-bg-active: var(--b600);
    --tgl-btn-bg-disabled: var(--n800);
    --tgl-btn-bg-active-disabled: var(--n400);
    --tgl-btn-font-default: var(--n200);
    --tgl-btn-font-hover: var(--n100);
    --tgl-btn-font-active: var(--n100);
    --tgl-btn-font-disabled: var(--n700);
    --tgl-btn-font-active-disabled: var(--n700);
    /* Tree View/Input */
    --tree-background-default: transparent;
    --placeholder-font-color: var(--n700);
    --icon-color-hover: var(--n700);
    --tree-background-hover: var(--b300);
    --tree-font-color: var(--n100);
    --tree-font-hover: var(--n800);
    --tree-icon-hover: var(--b600);
    --tree-background-active: var(--b600);
    --tree-font-active: var(--n100);
    --tree-icon-active: var(--n100);
    --tree-item-hover: var(--b300);
    --tree-item-active: var(--b600);
    --tree-icon-active-hover: var(--b600);
    --tree-arrow-collapsed-color: var(--n100);
    --tree-arrow-expanded-color: var(--n100);
    --tree-arrow-hover: var(--b700);
    --tree-arrow-active-hover: var(--b200);
    --tree-checkbox-bg-active: var(--b700);
    --tree-checkbox-bg-active-hover: var(--b500);
    --tree-checkbox-ol-active-hover: var(--b800);
    --tree-item-dragover-background: #B6CB8880;
    --tree-item-droppoint-color: #4F4F5780;
    --auth-window-background: var(--n800);
    --auth-info-bar-font-color: var(--n400);
    --auth-info-bar-font-hover: var(--n200);
    --auth-roles-list-background-active: var(--b300);
    --auth-roles-list-background-hover: var(--n700);
    --auth-roles-list-font-active: var(--n900);
    /* Steps */
    --steps-item-bg-hover: var(--n700);
    --steps-item-border-focus: 1px solid var(--b300);
    --steps-icon-pending-bg: var(--n800);
    --steps-icon-pending-border: 1px solid var(--n500);
    --steps-icon-pending-color: var(--n200);
    --steps-label-pending-color: var(--n100);
    --steps-icon-active-bg: var(--b600);
    --steps-icon-active-color: var(--n50);
    --steps-label-active-color: var(--n50);
    --steps-icon-completed-color: invert(92%) sepia(68%) saturate(366%) hue-rotate(180deg) brightness(104%) contrast(103%);
    --steps-divider-bg: var(--n500);
    /* drag-drop-area */
    --dd-area-bg: var(--mat-card-background);
    --dd-area-preview-bg: #D7E3C680;
    --dd-area-preview-border: 1px dotted var(--n300);
    --dd-area-border-radius: 5px;
    --dd-area-item-bg: var(--mat-card-background);
    --dd-area-item-border: 1px solid var(--n700);
    --dd-area-item-border-radius: 5px;
    --dd-area-item-hover-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    --dd-area-item-moving-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    --gradient-color: var(--b800);
}

body{    
    --mat-divider-width: 1px;
    --mat-menu-container-color: var(--tree-pan-color);
}