bfg-common 1.5.458 → 1.5.459

package/assets/scss/common/theme.scss

@@ -1,812 +1,812 @@
-@import 'variables.scss';
-
-.dark-theme {
-  background-color: #213444;
-}
-
-:root {
-  --scrollbar-thumb: #bbb;
-  --scrollbar-track: #eee;
-
-  --global-font-color: #{$--grey-200};
-  --global-font-color2: #{$light-black};
-  --global-font-color3: #{$--grey-200};
-  --global-font-color4: #{$--grey-100};
-  --global-font-color5: #{$light-black};
-  --global-font-color6: #{$--grey-800};
-  --global-font-color7: #{$--grey-900};
-  --global-font-color8: #{$--grey-100};
-  --global-font-color9: #{$--grey-200};
-  --global-border-color: #ccc;
-  --global-border-colo2: #{$--grey-100};
-  --global-bg-color: #{$white};
-  --global-bg-color2: #{$light-grey-100};
-  --global-text-color: #5659b8;
-  --global-text-color2: #{$--blue-150};
-  --global-text-color3: #{$--grey-100};
-  --block-view-bg-color: #{$light-grey};
-  --block-view-bg-color2: #{$white};
-  --block-view-bg-color3: #{$white};
-  --block-view-bg-color4: #{$light-grey};
-  --block-view-bg-color5: #{$white};
-  --block-view-bg-color6: #{$light-grey-150};
-  --block-border-color: #{$--grey-850};
-  --block-border-color2: #{$--grey-850};
-
-  --main-color-mode: #{$black};
-
-  /*  Modal  */
-  --modal-bg-color: #fff;
-  --modal-other-bg-color: #fff;
-  --modal-secondary-title: #565656;
-
-  --close-icon: #8c8c8c;
-  --arrows-icon: #000;
-  --info-icon: #{$--blue-150};
-  --title-color: #e9ecef;
-  --triger-icon-color: #{$--grey-200}; //#666
-  --ellipsis-vertical-icon-color: #{$--grey-100};
-
-  --progress-color: #{$--blue-100};
-  --progress-bg-color: #{$--grey-900};
-  --progress-value-bg-color: #61b715; // equal in dark and white modes
-
-  --dropdown-bg-color: #fff;
-  --dropdown-item-color: #0072a3;
-
-  --radio-btn-active-label-bg-color: #f0f8fd;
-  --radio-btn-active-label-border-color: #008fd6;
-
-  --separator-color: #e9ebed;
-  --input-border: #d3d6da;
-  --input-caret-color: #000000;
-  --input-bg-common: #ffffff;
-  --hide-row-icon: #4d5d69;
-  --hide-row-icon-hover: #213444;
-  --create-row-icon: #008fd6;
-  --create-row-icon-hover: #0081c1;
-  --ready-to-complete-border-color: #e9ebeda3;
-
-  /*  Alert  */
-  --alert-warning-icon-color: #d28f00;
-  --alert-warning-bg-color: #fef3b5;
-  --alert-warning-border-color: #d28f00;
-
-  /*  Collapse Nav Item  */
-  --collapse-nav-item-link-color: #4d5d69;
-  --collapse-nav-item-link-hover-color: #182531;
-  --collapse-nav-item-active-link-color: #008fd6;
-  --collapse-nav-item-active-link-hover-color: #0081c1;
-
-  /*  Portlet  */
-  --portlet-bg-color: #fff;
-  --portlet-border-color: #d3d3d3;
-  --portlet-input-color: #4d5d69;
-  --sub-title-color: #4d5d69;
-  --tag-input-color: #4d5d69;
-
-  /*  Modal By Steps Second  */
-  --close-icon-color: #8c8c8c;
-
-  /*  Simple Popup  */
-  --popup-bgcolor: #fafafa;
-  --table-border-color: #ccc;
-
-  /*  Switch  */
-  --label-before-bg-color: #737373;
-  --label-after-bg-color: #fff;
-  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
-
-  /*  Home  */
-  --home-title-color: #4d5d69;
-
-  /*  Packages  */
-  --action-link-container-bg-color: #e9f6fd;
-  --vui-action-label-color: #333;
-
-  /*  Shortcut  */
-  --shortcut-item-hover-bg: linear-gradient(135deg, #ffffff 0%, #f0f8fd 100%);
-  --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #008fd6,
-    0px 2px 24px 0px #0000001f;
-  --shortcut-item-disabled-text-icon-color: #bdc3c7;
-
-  /*  Tasks  */
-  --tasks-actions-icon-color: #4d5d69;
-  --tasks-actions-icon-hover-color: #213444;
-  --tasks-actions-icon-icative-color: #008fd6;
-
-  /*  Header  */
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-  --header-container-bg-color: #213444;
-  --header-shortcuts-link-color: #ffffff;
-  --badge-info-bg-color: #008fd6;
-
-  /*  Main Navigation Panel New View  */
-  --new-view-vertical-nav-bg-color: rgba(233, 235, 237, 0.92);
-  --new-view-vertical-nav-item-color: #4d5d69;
-  --new-view-vertical-nav-hover-item-color: #182531;
-  --new-view-vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
-  --new-view-vertical-active-nav-bg-color: #213444;
-  --new-view-vertical-active-nav-color: #ffffff;
-  --new-view-pin-unpin-label-hover-color: #008fd6;
-  --new-view-nav-content-scrollbar-thumb: #9da6ad;
-  --new-view-nav-content-scrollbar-track-corner-thumb: #ebedee;
-  --new-view-nav-content-divider-bg: #d3d6da;
-
-  /*  Main Navigation Panel Old View  */
-  --old-view-vertical-nav-bg-color-old: rgba(232, 232, 232, 0.85);
-  --old-view-vertical-nav-item-color-old: #565656;
-  --old-view-vertical-nav-active-item-color-old: #fff;
-  --old-view-vertical-nav-divider-border-color-old: #ccc;
-  --old-view-vertical-border-color-old: tranparent;
-
-  /*  Table  */
-  --table-color: #565656;
-  --table-active-color: #fff;
-  --table-checkbox-color: #454545;
-  --table-caret-color: #454545;
-  --table-switch-color: #575757;
-  --table-hover-row-border-color: #666;
-  --table-hover-row-background-color: #e8e8e8;
-  --table-hover-row-color: #454545;
-  --table-spinner-bg-color: #ffffff99;
-  --thead-bg-color: #{$light-grey};
-  --row-selected-input-color: #{$white};
-
-  /*  Vertical Tabs  */
-  --vertical-tabs-nav-link: --grey-100;
-  --vertical-tabs-bg-color: #fafafa;
-
-  /*  Signpost  */
-  --signpost-bgcolor: #fff;
-  --signpost-border-color: #b3b3b3;
-  --signpost-color: #acbac3;
-
-  /*  Backup Storage Add  */
-  --backup-storage-add-ready-to-complate-border-color: #e9ebeda3;
-
-  /*  Chart Options Modal  */
-  --chart-options-timespan-blocks-bg: #ffffff;
-  --chart-options-timespan-blocks-title-color: #4d5d69;
-
-  /*  Context Recursion  */
-  --context-menu-hover-bg-color: #e8e8e8;
-  --context-menu-border-color: #949494;
-  --context-menu-inset-border-color: #d4d5d6;
-  --context-menu-item-header-color: #eceff2;
-  --context-menu-hover-border-color: #666;
-
-  /*  Feedback Button  */
-  --modal-first-title: #565656;
-  --icon-fill-color: #1d1c1c;
-  --icon-fill-hover-color: rgb(0, 121, 184);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: #dedede;
-  --a-link-color: #0072a3;
-
-  /*  Graph  */
-  --chart-block-title-color: #4d5d69;
-  --chart-block-header-bg-color: #ffffff;
-  --chart-block-export-button-color: #4d5d69;
-  --chart-block-export-button-hover-color: #213444;
-  --chart-block-export-button-active-color: #008fd6;
-
-  /*  Advanced Chart Options Modal  */
-  --chart-options-name-actions-seperate-border-color: #e9ebeda3;
-  --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
-  --counters-border-block-border-color: #e9ebeda3;
-  --metrics-container-bg-color: #ffffff;
-  --metrics-container-title-color: #4d5d69;
-  --metrics-container-selected-item-color: #e9eaec;
-  --metrics-container-selected-item-bg-color: #213444;
-  --metrics-container-item-color: #4d5d69;
-  --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.4);
-  --metrics-container-item-hover-color: #182531;
-  --metrics-container-item-border-line-color: #e9ebeda3;
-  --chart-options-details-title-color: #4d5d69;
-  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.64);
-  --advanced-chart-options-text-color: #008fd6;
-  --advanced-chart-options-text-hover-color: #0081c1;
-  --advanced-text-color: #4d5d69;
-
-  /*  Overview  */
-  --overview-time-range-lable-color: #4d5d69;
-  --overview-time-range-border-color: rgba(233, 235, 237, 0.64);
-  --overview-filter-text-color: #4d5d69;
-  --overview-filter-edit-color: #008fd6;
-  --overview-filter-edit-hover-color: #0081c1;
-  --graphic-loader-bg-color: #ffffff;
-
-  /*  Feedback Additional Details  */
-  --upload-image-hover-bg-color: #f6f7f8;
-
-  /*  Feedback New  */
-  --feedback-tooltip-trigger-color: #9da6ad;
-  --feedback-tooltip-acctive-trigger-color: #008fd6;
-  --feedback-tooltip-hover-trigger-color: #4d5d69;
-  --feedback-text-color: #4d5d69;
-  --feedback-tooltip-close-color: #213444;
-
-  /*  Feedback Tabs  */
-  --feedback-tab-bg-color: #ffffff;
-  --feedback-tab-hover-bg-color: #f6f7f8;
-  --feedback-tab-active-bg-color: #008fd60f;
-  --feedback-tab-border-color: #e9ebed;
-  --feedback-tab-active-text-color: #008fd6;
-
-  /*  Help Menu About  */
-  --about-text-color: #4d5d69;
-  --about-text-link-color: #008fd6;
-  --about-text-link-hover-color: #0081c1;
-
-  /*  Unsaved Changes Modal  */
-  --unsaved-changes-modal-bg-color: var(--modal-bg);
-
-  /*  Inventory Tabs  */
-  --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
-    270deg,
-    rgba(255, 255, 255, 0) 0%,
-    #ffffff 100%
-  );
-  --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
-    270deg,
-    #ffffff 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-
-  /*  UI_I_Button Variables light mode  */
-  /* outline */
-  --btn-outline-border-color: #0079b8;
-  --btn-outline-hover-bg-color: #e1f1f6;
-  --btn-outline-hover-color: #004d8a;
-  --btn-outline-box-shadow-color: #0095d3;
-  /* primary */
-  --btn-primary-color: #{$white};
-  --btn-primary-border-color: #{$--blue-100};
-  --btn-primary-hover-bg-color: #004d8a;
-  --btn-primary-hover-color: #e1f1f6;
-  --btn-primary-box-shadow-color: #0095d3;
-  --btn-primary-disabled-color: #666;
-  --btn-primary-disabled-bg-color: #ccc;
-  /* warning */
-  --btn-warning-color: #{$white};
-  --btn-warning-bg-color: #{$--red-200};
-  --btn-warning-hover-bg-color: #{$--red-150};
-  --btn-warning-box-shadow-color: #{$--red-50};
-  /* link */
-  --btn-link-color: #0079b8;
-  --btn-link-hover-color: #004d8a;
-  --btn-link-disabled: #{$--grey-150};
-
-  /*  Form Input Label Variables light mode  */
-  --form-label-color: #000;
-  --form-input-color: #000;
-  --form-input-border-color: #9a9a9a;
-
-  /*  Checkbox Variables light mode  */
-  --checkbox-label-color: #454545;
-  --checkbox-background-color: #0079b8;
-  --checkbox-border-color: #575757;
-  --checkbox-mark-color: #fff;
-  --checkbox-mark-background-color: #737373;
-  --checkbox-value-active-color: #61b715;
-
-  /*  Select Variables light mode  */
-  --select-color: #000;
-
-  /*  NavBar Variables light mode  */
-  --nav-link-color: #454545;
-  --nav-link-active-color: #000;
-  --nav-active-box-shadow-color: #0079b8;
-  --nav-link-hover-color: #666666;
-  --nav-panel-border-color: #ccc;
-
-  //--gutter-bg-color: #eee; // for old
-  --gutter-bg-color: #e9ebed; // for new
-  //--gutter-hover-bg-color: #0079b8; // for old
-  --gutter-hover-bg-color: #008fb6; // for new
-  //--gutter-active-bg-color: #a6d8e7; // for old
-  --gutter-active-bg-color: #66bce6; // for new
-  --gutter-before-bg: #9da6ad;
-
-  /*  Items Row Variables light mode  */
-  --row-hover-bg-color: #{$light-grey-100};
-  --row-hover-border-color: #{$--grey-200};
-  --row-selected-text-color: #{$white};
-  --row-selected-bg-color: #{$--blue-800};
-
-  /*  Vertical Steps Variables light mode  */
-  --vertical-steps-active-color: #fff;
-  --vertical-steps-complete-color: #454545;
-  --vertical-steps-active-bg-color: #{$--blue-800};
-  --vertical-steps-complete-bg-color: #{$light-grey-100};
-  --vertical-steps-hover-border-color: #{$--grey-200};
-  --vertical-nav-active-item-color: #fff;
-  --vertical-nav-active-bg-color: #29414e;
-  --vertical-nav-hover-item-color: #29414e;
-  --vertical-nav-hover-bg-color: #e8e8e8;
-  --vertical-nav-hover-border-color: #666;
-  --tree-node-caret-icon: #666;
-
-  /*  Tooltip Variables light mode  */
-  --tooltip-content-text-color: #{$white};
-  --tooltip-content-bg-color: #{$black};
-  --tooltip-content-error-bg-color: #{#c92100};
-
-  /*  Select File Variables light mode  */
-  --select-file-text-color: #182531;
-  --select-file-selected-text-color: #ffffff;
-  --select-file-selected-bg: #213444;
-  --select-file-hover-bg: #e9ebed66;
-  --select-file-sprt-color: #e9ebed;
-  --select-file-sprt-handler-color: #9da6ad;
-  --select-file-sprt-handler-hover-color: #4d5d69;
-  --select-file-sprt-handler-selected-color: #008fd6;
-  --select-file-header-bg: #e9ebed66;
-  --select-file-header-arrow-color: #008fd6;
-  --select-file-info-color: #4d5d69;
-
-  /*  Table Action  */
-  --table-actions-icon: #4d5d69;
-  --table-actions-icon-hover: #182531;
-  --table-actions-icon-active: #008fd6;
-  --table-actions-view: #4d5d69;
-  --table-actions-view-hover: #182531;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed66;
-
-  // Diagram new view
-  --diagram-container-bg: #ffffff;
-  --diagram-central-panel-bg: #e9ebed66;
-  --diagram-block-stroke: #d3d6da;
-  --diagram-block-bg: #ffffff;
-  --diagram-connect-line: #d3d6da;
-  --diagram-selection-line: #008fd6;
-  --diagram-selection-bg: #ebf6fc;
-  --diagram-highlight-line: #fbce28;
-  --diagram-highlight-bg: #fff9e5;
-  --diagram-content-text: #4d5d69;
-  --diagram-content-text-hover: #182531;
-  --diagram-content-text-selected: #008fd6;
-  --diagram-content-text-selected-hover: #0081c1;
-  --diagram-content-second-text: #182531;
-  --diagram-content-second-disabled-text: #bdc3c7;
-  --diagram-content-third-text: #9da6ad;
-  --diagram-info-text: #4d5d69;
-  --diagram-info-second-text: #9da6ad;
-
-  // VM Add Edit new view
-  --select-file-type-label: #4d5d69;
-  --remote-console-options-password-content-copy-icon: #9da6ad;
-  --cpu-model-info-tooltip-icon-disabled: #bdc3c7;
-
-  // Add Hosts new view
-  --add-hosts-hosts-row-between-line: #e9ebeda3;
-  --add-hosts-hosts-row-child-value: #4d5d69;
-  --add-hosts-hosts-row-child-vm-bg-color: #e9ebeda3;
-  --add-hosts-hosts-row-child-vm-color: #4d5d69;
-  --add-hosts-ready-complete-description: #4d5d69;
-  --add-hosts-ready-complete-host-item-color: #4d5d69;
-
-  // Enter Maintenance Mode
-  --enter-maintenance-mode-modal-desc: #4d5d69;
-
-  // Enter Standby Mode
-  --enter-standby-mode-modal-desc: #4d5d69;
-  --enter-standby-mode-modal-vm-block-key: #4d5d69;
-  --enter-standby-mode-modal-block-border: #e9ebeda3;
-  --enter-standby-mode-modal-last-attempt-value: #4d5d69;
-
-  // Shut Down
-  --shut-down-modal-question-desc: #4d5d69;
-
-  // Reboot Host
-  --reboot-host-modal-question-desc: #4d5d69;
-
-  // Move To Modal
-  --move-to-tree-scrollbar-thumb-bg: #4d5d69;
-}
-
-:root.dark-theme {
-  --scrollbar-thumb: #29414e;
-  --scrollbar-track: #17242b;
-
-  --global-font-color: #{$--grey-800};
-  --global-font-color2: #{#eaedf0};
-  --global-font-color3: #{$light-white-100};
-  --global-font-color4: #{$light-white-100};
-  --global-font-color5: #{$light-black};
-  --global-font-color8: #{$white};
-  --global-font-color9: #{$light-blue-100};
-  --global-border-color: #495865;
-  --global-border-colo2: #{$light-white-100};
-  --global-bg-color: #17242b;
-  --global-bg-color2: #{$--blue-950};
-  --global-text-color: #{$--blue-200};
-  --global-text-color2: #{$--blue-200};
-  --global-text-color3: #{$--grey-700};
-  --block-view-bg-color: #{$--blue-800};
-  --block-view-bg-color2: #{$--blue-750};
-  --block-view-bg-color3: #{$--blue-800};
-  --block-view-bg-color4: #{$--blue-700};
-  --block-view-bg-color5: #{$--blue-700};
-  --block-view-bg-color6: #{$--blue-700};
-  --block-border-color: #{$black};
-  --block-border-color2: #{$--blue-960};
-
-  --main-color-mode: #{$light-white};
-
-  /*  Modal  */
-  --modal-bg-color: #{$--blue-800};
-  --modal-other-bg-color: #22343c;
-  --modal-secondary-title: #e9ecef;
-
-  --close-icon: #{$light-grey};
-  --arrows-icon: #e9ecef;
-  --info-icon: #{$--grey-800};
-  --title-color: #565656;
-  --triger-icon-color: #fff;
-  --ellipsis-vertical-icon-color: #{$light-white-100};
-
-  --progress-color: #{$--blue-250};
-  --progress-bg-color: #{$--blue-900};
-
-  --dropdown-bg-color: #1b2a32;
-  --dropdown-item-color: #79c6e6;
-
-  --radio-btn-active-label-bg-color: #2ba2de14;
-  --radio-btn-active-label-border-color: #2ba2de;
-
-  --separator-color: #e9ebed1f;
-  --input-border: #e9ebed3d;
-  --input-caret-color: #ffffff;
-  --input-bg-common: transparent;
-  --hide-row-icon: #e9eaec;
-  --hide-row-icon-hover: #ffffff;
-  --create-row-icon: #2ba2de;
-  --create-row-icon-hover: #008fd6;
-  --ready-to-complete-border-color: #e9ebed1f;
-
-  /*  Alert  */
-  --alert-warning-icon-color: currentColor;
-  --alert-warning-bg-color: #816709;
-  --alert-warning-border-color: transparent;
-
-  /*  Collapse Nav Item  */
-  --collapse-nav-item-link-color: #e9eaec;
-  --collapse-nav-item-link-hover-color: #ffffff;
-  --collapse-nav-item-active-link-color: #2ba2de;
-  --collapse-nav-item-active-link-hover-color: #0081c1;
-
-  /*  Portlet  */
-  --portlet-bg-color: transparent;
-  --portlet-border-color: #000000;
-  --portlet-input-color: #d3d6da;
-  --sub-title-color: #e9eaec;
-  --tag-input-color: #d3d6da;
-
-  /*  Modal By Steps Second  */
-  --close-icon-color: #fff;
-
-  /*  Simple Popup  */
-  --popup-bgcolor: #29414e;
-  --table-border-color: #495865;
-
-  /*  Switch  */
-  --label-before-bg-color: #fff;
-  --label-after-bg-color: #1b2a32;
-  --label-before-box-shadow: 0 0 0;
-
-  /*  Home  */
-  --home-title-color: #e9eaec;
-
-  /*  Packages  */
-  --action-link-container-bg-color: #29414e;
-  --vui-action-label-color: #adbbc4;
-
-  /*  Shortcut  */
-  --shortcut-item-hover-bg: linear-gradient(135deg, #334453 0%, #324c5e 100%);
-  --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #2ba2de,
-    0px -1px 12px 0px rgba(0, 0, 0, 0.1), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
-  --shortcut-item-disabled-text-icon-color: #bdc3c770;
-
-  /*  Tasks  */
-  --tasks-actions-icon-color: #e9eaec;
-  --tasks-actions-icon-hover-color: #ffffff;
-  --tasks-actions-icon-icative-color: #2ba2de;
-
-  /*  Header  */
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
-  --header-container-bg-color: #1b2a37;
-  --header-shortcuts-link-color: #e9eaec;
-  --badge-info-bg-color: #2ba2de;
-
-  /*  Main Navigation Panel New View  */
-  --new-view-vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
-  --new-view-vertical-nav-item-color: #e9eaec;
-  --new-view-vertical-nav-hover-item-color: #ffffff;
-  --new-view-vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
-  --new-view-vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
-  --new-view-vertical-active-nav-color: #213444;
-  --new-view-pin-unpin-label-hover-color: #2ba2de;
-  --new-view-nav-content-scrollbar-thumb: rgba(157, 166, 173, 0.32);
-  --new-view-nav-content-scrollbar-track-corner-thumb: #435360;
-  --new-view-nav-content-divider-bg: rgba(211, 214, 218, 0.12);
-
-  /*  Main Navigation Panel Old View  */
-  --old-view-vertical-nav-bg-color-old: #17242b;
-  --old-view-vertical-nav-item-color-old: #e9ecef;
-  --old-view-vertical-nav-active-item-color-old: #000;
-  --old-view-vertical-nav-divider-border-color-old: #495865;
-  --old-view-vertical-border-color-old: #495865;
-
-  /*  Table  */
-  --table-color: #fff;
-  --table-active-color: #565656;
-  --table-checkbox-color: #49aeda;
-  --table-caret-color: #ffffff;
-  --table-switch-color: #b3b3b3;
-  --table-hover-row-border-color: #fff;
-  --table-hover-row-background-color: #324f61;
-  --table-hover-row-color: #e9ecef;
-  --table-spinner-bg-color: rgba(0, 0, 0, 0.5);
-  --thead-bg-color: #{$--blue-700};
-  --row-selected-input-color: #000;
-
-  /*  Vertical Tabs  */
-  --vertical-tabs-nav-link: #ffffff;
-  --vertical-tabs-bg-color: transparent;
-
-  /*  Signpost  */
-  --signpost-bgcolor: #21333b;
-  --signpost-border-color: #000;
-  --signpost-color: #acbac3;
-
-  /*  Backup Storage Add  */
-  --backup-storage-add-ready-to-complate-border-color: #e9ebed1f;
-
-  /*  Chart Options Modal  */
-  --chart-options-timespan-blocks-bg: #334453;
-  --chart-options-timespan-blocks-title-color: #e9eaec;
-
-  /*  Context Recursion  */
-  --context-menu-hover-bg-color: #324f61;
-  --context-menu-border-color: #495865;
-  --context-menu-inset-border-color: #485764;
-  --context-menu-item-header-color: #29414e;
-  --context-menu-hover-border-color: #fff;
-
-  /*  Feedback Button  */
-  --modal-first-title: #adbbc4;
-  --icon-fill-color: rgb(233, 236, 239);
-  --icon-fill-hover-color: rgb(73, 175, 217);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: rgb(14, 22, 27);
-  --a-link-color: #4aaed9;
-
-  /*  Graph  */
-  --chart-block-title-color: #e9eaec;
-  --chart-block-header-bg-color: #334453;
-  --chart-block-export-button-color: #e9eaec;
-  --chart-block-export-button-hover-color: #ffffff;
-  --chart-block-export-button-active-color: #2ba2de;
-
-  /*  Advanced Chart Options Modal  */
-  --chart-options-name-actions-seperate-border-color: #e9ebed1f;
-  --chart-options-name-actions-delete-disabled-text-color: rgba(
-    189,
-    195,
-    199,
-    0.72
-  );
-  --counters-border-block-border-color: rgba(233, 235, 237, 0.12);
-  --metrics-container-bg-color: #334453;
-  --metrics-container-title-color: #e9eaec;
-  --metrics-container-selected-item-color: #182531;
-  --metrics-container-selected-item-bg-color: #e9eaec;
-  --metrics-container-item-color: #e9eaec;
-  --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.08);
-  --metrics-container-item-hover-color: #ffffff;
-  --metrics-container-item-border-line-color: #e9ebed1f;
-  --chart-options-details-title-color: #e9eaec;
-  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.12);
-  --advanced-chart-options-text-color: #2ba2de;
-  --advanced-chart-options-text-hover-color: #008fd6;
-  --advanced-text-color: #e9eaec;
-
-  /*  Overview  */
-  --overview-time-range-lable-color: #e9eaec;
-  --overview-time-range-border-color: #e9ebed1f;
-  --overview-filter-text-color: #e9eaec;
-  --overview-filter-edit-color: #2ba2de;
-  --overview-filter-edit-hover-color: #008fd6;
-  --graphic-loader-bg-color: #22343c;
-
-  /*  Feedback Additional Details  */
-  --upload-image-hover-bg-color: #283948;
-
-  /*  Feedback New  */
-  --feedback-tooltip-trigger-color: #9da6ad;
-  --feedback-tooltip-acctive-trigger-color: #2ba2de;
-  --feedback-tooltip-hover-trigger-color: #e9eaec;
-  --feedback-text-color: #e9eaec;
-  --feedback-tooltip-close-color: #e9eaec;
-
-  /*  Feedback Tabs  */
-  --feedback-tab-bg-color: #1b2a373d;
-  --feedback-tab-hover-bg-color: #283948;
-  --feedback-tab-active-bg-color: #2ba2de14;
-  --feedback-tab-border-color: #e9ebed1f;
-  --feedback-tab-active-text-color: #2ba2de;
-
-  /*  Help Menu About  */
-  --about-text-color: #9da6ad;
-  --about-text-link-color: #2ba2de;
-  --about-text-link-hover-color: #008fd6;
-
-  /*  Unsaved Changes Modal  */
-  --unsaved-changes-modal-bg-color: #334453;
-
-  /*  Inventory Tabs  */
-  --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
-    270deg,
-    rgba(33, 52, 68, 0) 0%,
-    #213444 100%
-  );
-  --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
-    270deg,
-    #213444 0%,
-    rgba(33, 52, 68, 0) 100%
-  );
-
-  /*  Button Variables dark mode  */
-  /* outline */
-  --btn-outline-border-color: #89cbdf;
-  --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
-  --btn-outline-hover-color: #57c8ea;
-  --btn-outline-box-shadow-color: #000;
-  /* primary */
-  --btn-primary-color: #{$black};
-  --btn-primary-border-color: #{$--blue-250};
-  --btn-primary-hover-bg-color: #57c8ea;
-  --btn-primary-hover-color: #000;
-  --btn-primary-box-shadow-color: #0065ad;
-  --btn-primary-disabled-bg-color: #fff;
-  --btn-primary-disabled-color: #000;
-  /* warning */
-  --btn-warning-color: #{$black};
-  --btn-warning-bg-color: #{$--red-300};
-  --btn-warning-hover-bg-color: #{$--red-400};
-  --btn-warning-box-shadow-color: #{$--red-100};
-  /* link */
-  --btn-link-color: #89cbdf;
-  --btn-link-hover-color: #57c8ea;
-  --btn-link-disabled: #{$white};
-
-  /*  Form Input Label Variables dark mode  */
-  --form-label-color: #adbbc4;
-  --form-input-color: #e9ecef;
-  --form-input-border-color: #adbbc4;
-
-  /*  Checkbox Variables dark mode  */
-  --checkbox-label-color: #acbac3;
-  --checkbox-background-color: #4aaed9;
-  --checkbox-border-color: #e9ecef;
-  --checkbox-mark-color: #000;
-  --checkbox-mark-background-color: #fff;
-  --checkbox-value-active-color: #61b715;
-
-  /*  Select Variables light mode  */
-  --select-color: #000;
-
-  /*  NavBar Variables dark mode  */
-  --nav-link-color: #acbac3;
-  --nav-link-active-color: #fff;
-  --nav-active-box-shadow-color: #4aaed9;
-  --nav-link-hover-color: #acbac3;
-  --nav-panel-border-color: #495865;
-
-  //--gutter-bg-color: #25333d; // for old
-  --gutter-bg-color: #e9ebed1f; // for new
-  --gutter-hover-bg-color: #495a67;
-  --gutter-active-bg-color: #495a67;
-  --gutter-before-bg: rgba(157, 166, 173, 0.32);
-
-  /*  Items Row Variables light mode  */
-  --row-hover-bg-color: #{$--blue-950};
-  --row-hover-border-color: #{$white};
-  --row-selected-text-color: #{$black};
-  --row-selected-bg-color: #{$light-blue};
-
-  /*  Vertical Steps Variables dark mode  */
-  --vertical-steps-active-color: #000;
-  --vertical-steps-complete-color: #acbac3;
-  --vertical-steps-active-bg-color: #{$light-blue};
-  --vertical-steps-complete-bg-color: #{$--blue-950};
-  --vertical-steps-hover-border-color: #{$white};
-  --vertical-nav-active-item-color: #{$black};
-  --vertical-nav-active-bg-color: #d8e3e9;
-  --vertical-nav-hover-item-color: #d8e3e9;
-  --vertical-nav-hover-bg-color: #324f61;
-  --vertical-nav-hover-border-color: #fff;
-  --tree-node-caret-icon: #acbac3;
-
-  /*  Tooltip Variables light mode  */
-  --tooltip-content-text-color: #{$black};
-  --tooltip-content-bg-color: #{$white};
-
-  /*  Select File Variables dark mode  */
-  --select-file-text-color: #e9eaec;
-  --select-file-selected-text-color: #182531;
-  --select-file-selected-bg: #e9eaec;
-  --select-file-hover-bg: #e9eaec1f;
-  --select-file-sprt-color: #e9ebed1f;
-  --select-file-sprt-handler-color: #9da6ad;
-  --select-file-sprt-handler-hover-color: #e9eaec;
-  --select-file-sprt-handler-selected-color: #2ba2de;
-  --select-file-header-bg: #e9ebed0f;
-  --select-file-header-arrow-color: #2ba2de;
-  --select-file-info-color: #e9eaec;
-
-  /*  Table Action  */
-  --table-actions-icon: #e9eaec;
-  --table-actions-icon-hover: #ffffff;
-  --table-actions-icon-active: #2ba2de;
-  --table-actions-view: #e9eaec;
-  --table-actions-view-hover: #ffffff;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed0f;
-
-  // Diagram new view
-  --diagram-container-bg: #334453;
-  --diagram-central-panel-bg: #e9ebed0f;
-  --diagram-block-stroke: #5c6a76;
-  --diagram-block-bg: #304150;
-  --diagram-connect-line: #5c6a76;
-  --diagram-selection-line: #2ba2de;
-  --diagram-selection-bg: #2f5167;
-  --diagram-highlight-line: #fbce28;
-  --diagram-highlight-bg: #48524b;
-  --diagram-content-text: #e9eaec;
-  --diagram-content-text-hover: #ffffff;
-  --diagram-content-text-selected: #2ba2de;
-  --diagram-content-text-selected-hover: #008fd6;
-  --diagram-content-second-text: #e9eaec;
-  --diagram-content-second-disabled-text: #4d5d69;
-  --diagram-content-third-text: #9da6ad;
-  --diagram-info-text: #e9eaec;
-  --diagram-info-second-text: #9da6ad;
-
-  // VM Add Edit new view
-  --select-file-type-label: #e9eaec;
-  --remote-console-options-password-content-copy-icon: #e9eaec;
-  --cpu-model-info-tooltip-icon-disabled: #bdc3c770;
-
-  // Add Hosts new view
-  --add-hosts-hosts-row-between-line: #e9ebed1f;
-  --add-hosts-hosts-row-child-value: #e9eaec;
-  --add-hosts-hosts-row-child-vm-bg-color: #e9ebed1f;
-  --add-hosts-hosts-row-child-vm-color: #e9eaec;
-  --add-hosts-ready-complete-description: #e9eaec;
-  --add-hosts-ready-complete-host-item-color: #e9eaec;
-
-  // Enter Maintenance Mode
-  --enter-maintenance-mode-modal-desc: #e9eaec;
-
-  // Enter Standby Mode
-  --enter-standby-mode-modal-desc: #e9eaec;
-  --enter-standby-mode-modal-vm-block-key: #e9eaec;
-  --enter-standby-mode-modal-block-border: #e9ebed1f;
-  --enter-standby-mode-modal-last-attempt-value: #e9eaec;
-
-  // Shut Down
-  --shut-down-modal-question-desc: #e9eaec;
-
-  // Reboot Host
-  --reboot-host-modal-question-desc: #e9eaec;
-
-  // Move To Modal
-  --move-to-tree-scrollbar-thumb-bg: #d3d6da3d;
-}
+@import 'variables.scss';
+
+.dark-theme {
+  background-color: #213444;
+}
+
+:root {
+  --scrollbar-thumb: #bbb;
+  --scrollbar-track: #eee;
+
+  --global-font-color: #{$--grey-200};
+  --global-font-color2: #{$light-black};
+  --global-font-color3: #{$--grey-200};
+  --global-font-color4: #{$--grey-100};
+  --global-font-color5: #{$light-black};
+  --global-font-color6: #{$--grey-800};
+  --global-font-color7: #{$--grey-900};
+  --global-font-color8: #{$--grey-100};
+  --global-font-color9: #{$--grey-200};
+  --global-border-color: #ccc;
+  --global-border-colo2: #{$--grey-100};
+  --global-bg-color: #{$white};
+  --global-bg-color2: #{$light-grey-100};
+  --global-text-color: #5659b8;
+  --global-text-color2: #{$--blue-150};
+  --global-text-color3: #{$--grey-100};
+  --block-view-bg-color: #{$light-grey};
+  --block-view-bg-color2: #{$white};
+  --block-view-bg-color3: #{$white};
+  --block-view-bg-color4: #{$light-grey};
+  --block-view-bg-color5: #{$white};
+  --block-view-bg-color6: #{$light-grey-150};
+  --block-border-color: #{$--grey-850};
+  --block-border-color2: #{$--grey-850};
+
+  --main-color-mode: #{$black};
+
+  /*  Modal  */
+  --modal-bg-color: #fff;
+  --modal-other-bg-color: #fff;
+  --modal-secondary-title: #565656;
+
+  --close-icon: #8c8c8c;
+  --arrows-icon: #000;
+  --info-icon: #{$--blue-150};
+  --title-color: #e9ecef;
+  --triger-icon-color: #{$--grey-200}; //#666
+  --ellipsis-vertical-icon-color: #{$--grey-100};
+
+  --progress-color: #{$--blue-100};
+  --progress-bg-color: #{$--grey-900};
+  --progress-value-bg-color: #61b715; // equal in dark and white modes
+
+  --dropdown-bg-color: #fff;
+  --dropdown-item-color: #0072a3;
+
+  --radio-btn-active-label-bg-color: #f0f8fd;
+  --radio-btn-active-label-border-color: #008fd6;
+
+  --separator-color: #e9ebed;
+  --input-border: #d3d6da;
+  --input-caret-color: #000000;
+  --input-bg-common: #ffffff;
+  --hide-row-icon: #4d5d69;
+  --hide-row-icon-hover: #213444;
+  --create-row-icon: #008fd6;
+  --create-row-icon-hover: #0081c1;
+  --ready-to-complete-border-color: #e9ebeda3;
+
+  /*  Alert  */
+  --alert-warning-icon-color: #d28f00;
+  --alert-warning-bg-color: #fef3b5;
+  --alert-warning-border-color: #d28f00;
+
+  /*  Collapse Nav Item  */
+  --collapse-nav-item-link-color: #4d5d69;
+  --collapse-nav-item-link-hover-color: #182531;
+  --collapse-nav-item-active-link-color: #008fd6;
+  --collapse-nav-item-active-link-hover-color: #0081c1;
+
+  /*  Portlet  */
+  --portlet-bg-color: #fff;
+  --portlet-border-color: #d3d3d3;
+  --portlet-input-color: #4d5d69;
+  --sub-title-color: #4d5d69;
+  --tag-input-color: #4d5d69;
+
+  /*  Modal By Steps Second  */
+  --close-icon-color: #8c8c8c;
+
+  /*  Simple Popup  */
+  --popup-bgcolor: #fafafa;
+  --table-border-color: #ccc;
+
+  /*  Switch  */
+  --label-before-bg-color: #737373;
+  --label-after-bg-color: #fff;
+  --label-before-box-shadow: 0 0 0.1rem 0.1rem #69c0e2;
+
+  /*  Home  */
+  --home-title-color: #4d5d69;
+
+  /*  Packages  */
+  --action-link-container-bg-color: #e9f6fd;
+  --vui-action-label-color: #333;
+
+  /*  Shortcut  */
+  --shortcut-item-hover-bg: linear-gradient(135deg, #ffffff 0%, #f0f8fd 100%);
+  --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #008fd6,
+    0px 2px 24px 0px #0000001f;
+  --shortcut-item-disabled-text-icon-color: #bdc3c7;
+
+  /*  Tasks  */
+  --tasks-actions-icon-color: #4d5d69;
+  --tasks-actions-icon-hover-color: #213444;
+  --tasks-actions-icon-icative-color: #008fd6;
+
+  /*  Header  */
+  --description-color: #414b57;
+  --link-visited-color: #5659b8;
+  --header-container-bg-color: #213444;
+  --header-shortcuts-link-color: #ffffff;
+  --badge-info-bg-color: #008fd6;
+
+  /*  Main Navigation Panel New View  */
+  --new-view-vertical-nav-bg-color: rgba(233, 235, 237, 0.92);
+  --new-view-vertical-nav-item-color: #4d5d69;
+  --new-view-vertical-nav-hover-item-color: #182531;
+  --new-view-vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
+  --new-view-vertical-active-nav-bg-color: #213444;
+  --new-view-vertical-active-nav-color: #ffffff;
+  --new-view-pin-unpin-label-hover-color: #008fd6;
+  --new-view-nav-content-scrollbar-thumb: #9da6ad;
+  --new-view-nav-content-scrollbar-track-corner-thumb: #ebedee;
+  --new-view-nav-content-divider-bg: #d3d6da;
+
+  /*  Main Navigation Panel Old View  */
+  --old-view-vertical-nav-bg-color-old: rgba(232, 232, 232, 0.85);
+  --old-view-vertical-nav-item-color-old: #565656;
+  --old-view-vertical-nav-active-item-color-old: #fff;
+  --old-view-vertical-nav-divider-border-color-old: #ccc;
+  --old-view-vertical-border-color-old: tranparent;
+
+  /*  Table  */
+  --table-color: #565656;
+  --table-active-color: #fff;
+  --table-checkbox-color: #454545;
+  --table-caret-color: #454545;
+  --table-switch-color: #575757;
+  --table-hover-row-border-color: #666;
+  --table-hover-row-background-color: #e8e8e8;
+  --table-hover-row-color: #454545;
+  --table-spinner-bg-color: #ffffff99;
+  --thead-bg-color: #{$light-grey};
+  --row-selected-input-color: #{$white};
+
+  /*  Vertical Tabs  */
+  --vertical-tabs-nav-link: --grey-100;
+  --vertical-tabs-bg-color: #fafafa;
+
+  /*  Signpost  */
+  --signpost-bgcolor: #fff;
+  --signpost-border-color: #b3b3b3;
+  --signpost-color: #acbac3;
+
+  /*  Backup Storage Add  */
+  --backup-storage-add-ready-to-complate-border-color: #e9ebeda3;
+
+  /*  Chart Options Modal  */
+  --chart-options-timespan-blocks-bg: #ffffff;
+  --chart-options-timespan-blocks-title-color: #4d5d69;
+
+  /*  Context Recursion  */
+  --context-menu-hover-bg-color: #e8e8e8;
+  --context-menu-border-color: #949494;
+  --context-menu-inset-border-color: #d4d5d6;
+  --context-menu-item-header-color: #eceff2;
+  --context-menu-hover-border-color: #666;
+
+  /*  Feedback Button  */
+  --modal-first-title: #565656;
+  --icon-fill-color: #1d1c1c;
+  --icon-fill-hover-color: rgb(0, 121, 184);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: #dedede;
+  --a-link-color: #0072a3;
+
+  /*  Graph  */
+  --chart-block-title-color: #4d5d69;
+  --chart-block-header-bg-color: #ffffff;
+  --chart-block-export-button-color: #4d5d69;
+  --chart-block-export-button-hover-color: #213444;
+  --chart-block-export-button-active-color: #008fd6;
+
+  /*  Advanced Chart Options Modal  */
+  --chart-options-name-actions-seperate-border-color: #e9ebeda3;
+  --chart-options-name-actions-delete-disabled-text-color: #bdc3c7;
+  --counters-border-block-border-color: #e9ebeda3;
+  --metrics-container-bg-color: #ffffff;
+  --metrics-container-title-color: #4d5d69;
+  --metrics-container-selected-item-color: #e9eaec;
+  --metrics-container-selected-item-bg-color: #213444;
+  --metrics-container-item-color: #4d5d69;
+  --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.4);
+  --metrics-container-item-hover-color: #182531;
+  --metrics-container-item-border-line-color: #e9ebeda3;
+  --chart-options-details-title-color: #4d5d69;
+  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.64);
+  --advanced-chart-options-text-color: #008fd6;
+  --advanced-chart-options-text-hover-color: #0081c1;
+  --advanced-text-color: #4d5d69;
+
+  /*  Overview  */
+  --overview-time-range-lable-color: #4d5d69;
+  --overview-time-range-border-color: rgba(233, 235, 237, 0.64);
+  --overview-filter-text-color: #4d5d69;
+  --overview-filter-edit-color: #008fd6;
+  --overview-filter-edit-hover-color: #0081c1;
+  --graphic-loader-bg-color: #ffffff;
+
+  /*  Feedback Additional Details  */
+  --upload-image-hover-bg-color: #f6f7f8;
+
+  /*  Feedback New  */
+  --feedback-tooltip-trigger-color: #9da6ad;
+  --feedback-tooltip-acctive-trigger-color: #008fd6;
+  --feedback-tooltip-hover-trigger-color: #4d5d69;
+  --feedback-text-color: #4d5d69;
+  --feedback-tooltip-close-color: #213444;
+
+  /*  Feedback Tabs  */
+  --feedback-tab-bg-color: #ffffff;
+  --feedback-tab-hover-bg-color: #f6f7f8;
+  --feedback-tab-active-bg-color: #008fd60f;
+  --feedback-tab-border-color: #e9ebed;
+  --feedback-tab-active-text-color: #008fd6;
+
+  /*  Help Menu About  */
+  --about-text-color: #4d5d69;
+  --about-text-link-color: #008fd6;
+  --about-text-link-hover-color: #0081c1;
+
+  /*  Unsaved Changes Modal  */
+  --unsaved-changes-modal-bg-color: var(--modal-bg);
+
+  /*  Inventory Tabs  */
+  --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
+    270deg,
+    rgba(255, 255, 255, 0) 0%,
+    #ffffff 100%
+  );
+  --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
+    270deg,
+    #ffffff 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+
+  /*  UI_I_Button Variables light mode  */
+  /* outline */
+  --btn-outline-border-color: #0079b8;
+  --btn-outline-hover-bg-color: #e1f1f6;
+  --btn-outline-hover-color: #004d8a;
+  --btn-outline-box-shadow-color: #0095d3;
+  /* primary */
+  --btn-primary-color: #{$white};
+  --btn-primary-border-color: #{$--blue-100};
+  --btn-primary-hover-bg-color: #004d8a;
+  --btn-primary-hover-color: #e1f1f6;
+  --btn-primary-box-shadow-color: #0095d3;
+  --btn-primary-disabled-color: #666;
+  --btn-primary-disabled-bg-color: #ccc;
+  /* warning */
+  --btn-warning-color: #{$white};
+  --btn-warning-bg-color: #{$--red-200};
+  --btn-warning-hover-bg-color: #{$--red-150};
+  --btn-warning-box-shadow-color: #{$--red-50};
+  /* link */
+  --btn-link-color: #0079b8;
+  --btn-link-hover-color: #004d8a;
+  --btn-link-disabled: #{$--grey-150};
+
+  /*  Form Input Label Variables light mode  */
+  --form-label-color: #000;
+  --form-input-color: #000;
+  --form-input-border-color: #9a9a9a;
+
+  /*  Checkbox Variables light mode  */
+  --checkbox-label-color: #454545;
+  --checkbox-background-color: #0079b8;
+  --checkbox-border-color: #575757;
+  --checkbox-mark-color: #fff;
+  --checkbox-mark-background-color: #737373;
+  --checkbox-value-active-color: #61b715;
+
+  /*  Select Variables light mode  */
+  --select-color: #000;
+
+  /*  NavBar Variables light mode  */
+  --nav-link-color: #454545;
+  --nav-link-active-color: #000;
+  --nav-active-box-shadow-color: #0079b8;
+  --nav-link-hover-color: #666666;
+  --nav-panel-border-color: #ccc;
+
+  //--gutter-bg-color: #eee; // for old
+  --gutter-bg-color: #e9ebed; // for new
+  //--gutter-hover-bg-color: #0079b8; // for old
+  --gutter-hover-bg-color: #008fb6; // for new
+  //--gutter-active-bg-color: #a6d8e7; // for old
+  --gutter-active-bg-color: #66bce6; // for new
+  --gutter-before-bg: #9da6ad;
+
+  /*  Items Row Variables light mode  */
+  --row-hover-bg-color: #{$light-grey-100};
+  --row-hover-border-color: #{$--grey-200};
+  --row-selected-text-color: #{$white};
+  --row-selected-bg-color: #{$--blue-800};
+
+  /*  Vertical Steps Variables light mode  */
+  --vertical-steps-active-color: #fff;
+  --vertical-steps-complete-color: #454545;
+  --vertical-steps-active-bg-color: #{$--blue-800};
+  --vertical-steps-complete-bg-color: #{$light-grey-100};
+  --vertical-steps-hover-border-color: #{$--grey-200};
+  --vertical-nav-active-item-color: #fff;
+  --vertical-nav-active-bg-color: #29414e;
+  --vertical-nav-hover-item-color: #29414e;
+  --vertical-nav-hover-bg-color: #e8e8e8;
+  --vertical-nav-hover-border-color: #666;
+  --tree-node-caret-icon: #666;
+
+  /*  Tooltip Variables light mode  */
+  --tooltip-content-text-color: #{$white};
+  --tooltip-content-bg-color: #{$black};
+  --tooltip-content-error-bg-color: #{#c92100};
+
+  /*  Select File Variables light mode  */
+  --select-file-text-color: #182531;
+  --select-file-selected-text-color: #ffffff;
+  --select-file-selected-bg: #213444;
+  --select-file-hover-bg: #e9ebed66;
+  --select-file-sprt-color: #e9ebed;
+  --select-file-sprt-handler-color: #9da6ad;
+  --select-file-sprt-handler-hover-color: #4d5d69;
+  --select-file-sprt-handler-selected-color: #008fd6;
+  --select-file-header-bg: #e9ebed66;
+  --select-file-header-arrow-color: #008fd6;
+  --select-file-info-color: #4d5d69;
+
+  /*  Table Action  */
+  --table-actions-icon: #4d5d69;
+  --table-actions-icon-hover: #182531;
+  --table-actions-icon-active: #008fd6;
+  --table-actions-view: #4d5d69;
+  --table-actions-view-hover: #182531;
+  --table-actions-remove: #ea3223;
+  --table-actions-bg-hover: #e9ebed66;
+
+  // Diagram new view
+  --diagram-container-bg: #ffffff;
+  --diagram-central-panel-bg: #e9ebed66;
+  --diagram-block-stroke: #d3d6da;
+  --diagram-block-bg: #ffffff;
+  --diagram-connect-line: #d3d6da;
+  --diagram-selection-line: #008fd6;
+  --diagram-selection-bg: #ebf6fc;
+  --diagram-highlight-line: #fbce28;
+  --diagram-highlight-bg: #fff9e5;
+  --diagram-content-text: #4d5d69;
+  --diagram-content-text-hover: #182531;
+  --diagram-content-text-selected: #008fd6;
+  --diagram-content-text-selected-hover: #0081c1;
+  --diagram-content-second-text: #182531;
+  --diagram-content-second-disabled-text: #bdc3c7;
+  --diagram-content-third-text: #9da6ad;
+  --diagram-info-text: #4d5d69;
+  --diagram-info-second-text: #9da6ad;
+
+  // VM Add Edit new view
+  --select-file-type-label: #4d5d69;
+  --remote-console-options-password-content-copy-icon: #9da6ad;
+  --cpu-model-info-tooltip-icon-disabled: #bdc3c7;
+
+  // Add Hosts new view
+  --add-hosts-hosts-row-between-line: #e9ebeda3;
+  --add-hosts-hosts-row-child-value: #4d5d69;
+  --add-hosts-hosts-row-child-vm-bg-color: #e9ebeda3;
+  --add-hosts-hosts-row-child-vm-color: #4d5d69;
+  --add-hosts-ready-complete-description: #4d5d69;
+  --add-hosts-ready-complete-host-item-color: #4d5d69;
+
+  // Enter Maintenance Mode
+  --enter-maintenance-mode-modal-desc: #4d5d69;
+
+  // Enter Standby Mode
+  --enter-standby-mode-modal-desc: #4d5d69;
+  --enter-standby-mode-modal-vm-block-key: #4d5d69;
+  --enter-standby-mode-modal-block-border: #e9ebeda3;
+  --enter-standby-mode-modal-last-attempt-value: #4d5d69;
+
+  // Shut Down
+  --shut-down-modal-question-desc: #4d5d69;
+
+  // Reboot Host
+  --reboot-host-modal-question-desc: #4d5d69;
+
+  // Move To Modal
+  --move-to-tree-scrollbar-thumb-bg: #4d5d69;
+}
+
+:root.dark-theme {
+  --scrollbar-thumb: #29414e;
+  --scrollbar-track: #17242b;
+
+  --global-font-color: #{$--grey-800};
+  --global-font-color2: #{#eaedf0};
+  --global-font-color3: #{$light-white-100};
+  --global-font-color4: #{$light-white-100};
+  --global-font-color5: #{$light-black};
+  --global-font-color8: #{$white};
+  --global-font-color9: #{$light-blue-100};
+  --global-border-color: #495865;
+  --global-border-colo2: #{$light-white-100};
+  --global-bg-color: #17242b;
+  --global-bg-color2: #{$--blue-950};
+  --global-text-color: #{$--blue-200};
+  --global-text-color2: #{$--blue-200};
+  --global-text-color3: #{$--grey-700};
+  --block-view-bg-color: #{$--blue-800};
+  --block-view-bg-color2: #{$--blue-750};
+  --block-view-bg-color3: #{$--blue-800};
+  --block-view-bg-color4: #{$--blue-700};
+  --block-view-bg-color5: #{$--blue-700};
+  --block-view-bg-color6: #{$--blue-700};
+  --block-border-color: #{$black};
+  --block-border-color2: #{$--blue-960};
+
+  --main-color-mode: #{$light-white};
+
+  /*  Modal  */
+  --modal-bg-color: #{$--blue-800};
+  --modal-other-bg-color: #22343c;
+  --modal-secondary-title: #e9ecef;
+
+  --close-icon: #{$light-grey};
+  --arrows-icon: #e9ecef;
+  --info-icon: #{$--grey-800};
+  --title-color: #565656;
+  --triger-icon-color: #fff;
+  --ellipsis-vertical-icon-color: #{$light-white-100};
+
+  --progress-color: #{$--blue-250};
+  --progress-bg-color: #{$--blue-900};
+
+  --dropdown-bg-color: #1b2a32;
+  --dropdown-item-color: #79c6e6;
+
+  --radio-btn-active-label-bg-color: #2ba2de14;
+  --radio-btn-active-label-border-color: #2ba2de;
+
+  --separator-color: #e9ebed1f;
+  --input-border: #e9ebed3d;
+  --input-caret-color: #ffffff;
+  --input-bg-common: transparent;
+  --hide-row-icon: #e9eaec;
+  --hide-row-icon-hover: #ffffff;
+  --create-row-icon: #2ba2de;
+  --create-row-icon-hover: #008fd6;
+  --ready-to-complete-border-color: #e9ebed1f;
+
+  /*  Alert  */
+  --alert-warning-icon-color: currentColor;
+  --alert-warning-bg-color: #816709;
+  --alert-warning-border-color: transparent;
+
+  /*  Collapse Nav Item  */
+  --collapse-nav-item-link-color: #e9eaec;
+  --collapse-nav-item-link-hover-color: #ffffff;
+  --collapse-nav-item-active-link-color: #2ba2de;
+  --collapse-nav-item-active-link-hover-color: #0081c1;
+
+  /*  Portlet  */
+  --portlet-bg-color: transparent;
+  --portlet-border-color: #000000;
+  --portlet-input-color: #d3d6da;
+  --sub-title-color: #e9eaec;
+  --tag-input-color: #d3d6da;
+
+  /*  Modal By Steps Second  */
+  --close-icon-color: #fff;
+
+  /*  Simple Popup  */
+  --popup-bgcolor: #29414e;
+  --table-border-color: #495865;
+
+  /*  Switch  */
+  --label-before-bg-color: #fff;
+  --label-after-bg-color: #1b2a32;
+  --label-before-box-shadow: 0 0 0;
+
+  /*  Home  */
+  --home-title-color: #e9eaec;
+
+  /*  Packages  */
+  --action-link-container-bg-color: #29414e;
+  --vui-action-label-color: #adbbc4;
+
+  /*  Shortcut  */
+  --shortcut-item-hover-bg: linear-gradient(135deg, #334453 0%, #324c5e 100%);
+  --shortcut-item-hover-box-shadow: inset 0 0 0 1.5px #2ba2de,
+    0px -1px 12px 0px rgba(0, 0, 0, 0.1), 0px 4px 20px 0px rgba(0, 0, 0, 0.12);
+  --shortcut-item-disabled-text-icon-color: #bdc3c770;
+
+  /*  Tasks  */
+  --tasks-actions-icon-color: #e9eaec;
+  --tasks-actions-icon-hover-color: #ffffff;
+  --tasks-actions-icon-icative-color: #2ba2de;
+
+  /*  Header  */
+  --description-color: #adbbc4;
+  --link-visited-color: #49afd9;
+  --header-container-bg-color: #1b2a37;
+  --header-shortcuts-link-color: #e9eaec;
+  --badge-info-bg-color: #2ba2de;
+
+  /*  Main Navigation Panel New View  */
+  --new-view-vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
+  --new-view-vertical-nav-item-color: #e9eaec;
+  --new-view-vertical-nav-hover-item-color: #ffffff;
+  --new-view-vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
+  --new-view-vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
+  --new-view-vertical-active-nav-color: #213444;
+  --new-view-pin-unpin-label-hover-color: #2ba2de;
+  --new-view-nav-content-scrollbar-thumb: rgba(157, 166, 173, 0.32);
+  --new-view-nav-content-scrollbar-track-corner-thumb: #435360;
+  --new-view-nav-content-divider-bg: rgba(211, 214, 218, 0.12);
+
+  /*  Main Navigation Panel Old View  */
+  --old-view-vertical-nav-bg-color-old: #17242b;
+  --old-view-vertical-nav-item-color-old: #e9ecef;
+  --old-view-vertical-nav-active-item-color-old: #000;
+  --old-view-vertical-nav-divider-border-color-old: #495865;
+  --old-view-vertical-border-color-old: #495865;
+
+  /*  Table  */
+  --table-color: #fff;
+  --table-active-color: #565656;
+  --table-checkbox-color: #49aeda;
+  --table-caret-color: #ffffff;
+  --table-switch-color: #b3b3b3;
+  --table-hover-row-border-color: #fff;
+  --table-hover-row-background-color: #324f61;
+  --table-hover-row-color: #e9ecef;
+  --table-spinner-bg-color: rgba(0, 0, 0, 0.5);
+  --thead-bg-color: #{$--blue-700};
+  --row-selected-input-color: #000;
+
+  /*  Vertical Tabs  */
+  --vertical-tabs-nav-link: #ffffff;
+  --vertical-tabs-bg-color: transparent;
+
+  /*  Signpost  */
+  --signpost-bgcolor: #21333b;
+  --signpost-border-color: #000;
+  --signpost-color: #acbac3;
+
+  /*  Backup Storage Add  */
+  --backup-storage-add-ready-to-complate-border-color: #e9ebed1f;
+
+  /*  Chart Options Modal  */
+  --chart-options-timespan-blocks-bg: #334453;
+  --chart-options-timespan-blocks-title-color: #e9eaec;
+
+  /*  Context Recursion  */
+  --context-menu-hover-bg-color: #324f61;
+  --context-menu-border-color: #495865;
+  --context-menu-inset-border-color: #485764;
+  --context-menu-item-header-color: #29414e;
+  --context-menu-hover-border-color: #fff;
+
+  /*  Feedback Button  */
+  --modal-first-title: #adbbc4;
+  --icon-fill-color: rgb(233, 236, 239);
+  --icon-fill-hover-color: rgb(73, 175, 217);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: rgb(14, 22, 27);
+  --a-link-color: #4aaed9;
+
+  /*  Graph  */
+  --chart-block-title-color: #e9eaec;
+  --chart-block-header-bg-color: #334453;
+  --chart-block-export-button-color: #e9eaec;
+  --chart-block-export-button-hover-color: #ffffff;
+  --chart-block-export-button-active-color: #2ba2de;
+
+  /*  Advanced Chart Options Modal  */
+  --chart-options-name-actions-seperate-border-color: #e9ebed1f;
+  --chart-options-name-actions-delete-disabled-text-color: rgba(
+    189,
+    195,
+    199,
+    0.72
+  );
+  --counters-border-block-border-color: rgba(233, 235, 237, 0.12);
+  --metrics-container-bg-color: #334453;
+  --metrics-container-title-color: #e9eaec;
+  --metrics-container-selected-item-color: #182531;
+  --metrics-container-selected-item-bg-color: #e9eaec;
+  --metrics-container-item-color: #e9eaec;
+  --metrics-container-item-hover-bg-color: rgba(233, 235, 237, 0.08);
+  --metrics-container-item-hover-color: #ffffff;
+  --metrics-container-item-border-line-color: #e9ebed1f;
+  --chart-options-details-title-color: #e9eaec;
+  --advanced-chart-options-border-color: rgba(233, 235, 237, 0.12);
+  --advanced-chart-options-text-color: #2ba2de;
+  --advanced-chart-options-text-hover-color: #008fd6;
+  --advanced-text-color: #e9eaec;
+
+  /*  Overview  */
+  --overview-time-range-lable-color: #e9eaec;
+  --overview-time-range-border-color: #e9ebed1f;
+  --overview-filter-text-color: #e9eaec;
+  --overview-filter-edit-color: #2ba2de;
+  --overview-filter-edit-hover-color: #008fd6;
+  --graphic-loader-bg-color: #22343c;
+
+  /*  Feedback Additional Details  */
+  --upload-image-hover-bg-color: #283948;
+
+  /*  Feedback New  */
+  --feedback-tooltip-trigger-color: #9da6ad;
+  --feedback-tooltip-acctive-trigger-color: #2ba2de;
+  --feedback-tooltip-hover-trigger-color: #e9eaec;
+  --feedback-text-color: #e9eaec;
+  --feedback-tooltip-close-color: #e9eaec;
+
+  /*  Feedback Tabs  */
+  --feedback-tab-bg-color: #1b2a373d;
+  --feedback-tab-hover-bg-color: #283948;
+  --feedback-tab-active-bg-color: #2ba2de14;
+  --feedback-tab-border-color: #e9ebed1f;
+  --feedback-tab-active-text-color: #2ba2de;
+
+  /*  Help Menu About  */
+  --about-text-color: #9da6ad;
+  --about-text-link-color: #2ba2de;
+  --about-text-link-hover-color: #008fd6;
+
+  /*  Unsaved Changes Modal  */
+  --unsaved-changes-modal-bg-color: #334453;
+
+  /*  Inventory Tabs  */
+  --inventory-tabs-left-opacity-block-bg-color: linear-gradient(
+    270deg,
+    rgba(33, 52, 68, 0) 0%,
+    #213444 100%
+  );
+  --inventory-tabs-right-opacity-block-bg-color: linear-gradient(
+    270deg,
+    #213444 0%,
+    rgba(33, 52, 68, 0) 100%
+  );
+
+  /*  Button Variables dark mode  */
+  /* outline */
+  --btn-outline-border-color: #89cbdf;
+  --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
+  --btn-outline-hover-color: #57c8ea;
+  --btn-outline-box-shadow-color: #000;
+  /* primary */
+  --btn-primary-color: #{$black};
+  --btn-primary-border-color: #{$--blue-250};
+  --btn-primary-hover-bg-color: #57c8ea;
+  --btn-primary-hover-color: #000;
+  --btn-primary-box-shadow-color: #0065ad;
+  --btn-primary-disabled-bg-color: #fff;
+  --btn-primary-disabled-color: #000;
+  /* warning */
+  --btn-warning-color: #{$black};
+  --btn-warning-bg-color: #{$--red-300};
+  --btn-warning-hover-bg-color: #{$--red-400};
+  --btn-warning-box-shadow-color: #{$--red-100};
+  /* link */
+  --btn-link-color: #89cbdf;
+  --btn-link-hover-color: #57c8ea;
+  --btn-link-disabled: #{$white};
+
+  /*  Form Input Label Variables dark mode  */
+  --form-label-color: #adbbc4;
+  --form-input-color: #e9ecef;
+  --form-input-border-color: #adbbc4;
+
+  /*  Checkbox Variables dark mode  */
+  --checkbox-label-color: #acbac3;
+  --checkbox-background-color: #4aaed9;
+  --checkbox-border-color: #e9ecef;
+  --checkbox-mark-color: #000;
+  --checkbox-mark-background-color: #fff;
+  --checkbox-value-active-color: #61b715;
+
+  /*  Select Variables light mode  */
+  --select-color: #000;
+
+  /*  NavBar Variables dark mode  */
+  --nav-link-color: #acbac3;
+  --nav-link-active-color: #fff;
+  --nav-active-box-shadow-color: #4aaed9;
+  --nav-link-hover-color: #acbac3;
+  --nav-panel-border-color: #495865;
+
+  //--gutter-bg-color: #25333d; // for old
+  --gutter-bg-color: #e9ebed1f; // for new
+  --gutter-hover-bg-color: #495a67;
+  --gutter-active-bg-color: #495a67;
+  --gutter-before-bg: rgba(157, 166, 173, 0.32);
+
+  /*  Items Row Variables light mode  */
+  --row-hover-bg-color: #{$--blue-950};
+  --row-hover-border-color: #{$white};
+  --row-selected-text-color: #{$black};
+  --row-selected-bg-color: #{$light-blue};
+
+  /*  Vertical Steps Variables dark mode  */
+  --vertical-steps-active-color: #000;
+  --vertical-steps-complete-color: #acbac3;
+  --vertical-steps-active-bg-color: #{$light-blue};
+  --vertical-steps-complete-bg-color: #{$--blue-950};
+  --vertical-steps-hover-border-color: #{$white};
+  --vertical-nav-active-item-color: #{$black};
+  --vertical-nav-active-bg-color: #d8e3e9;
+  --vertical-nav-hover-item-color: #d8e3e9;
+  --vertical-nav-hover-bg-color: #324f61;
+  --vertical-nav-hover-border-color: #fff;
+  --tree-node-caret-icon: #acbac3;
+
+  /*  Tooltip Variables light mode  */
+  --tooltip-content-text-color: #{$black};
+  --tooltip-content-bg-color: #{$white};
+
+  /*  Select File Variables dark mode  */
+  --select-file-text-color: #e9eaec;
+  --select-file-selected-text-color: #182531;
+  --select-file-selected-bg: #e9eaec;
+  --select-file-hover-bg: #e9eaec1f;
+  --select-file-sprt-color: #e9ebed1f;
+  --select-file-sprt-handler-color: #9da6ad;
+  --select-file-sprt-handler-hover-color: #e9eaec;
+  --select-file-sprt-handler-selected-color: #2ba2de;
+  --select-file-header-bg: #e9ebed0f;
+  --select-file-header-arrow-color: #2ba2de;
+  --select-file-info-color: #e9eaec;
+
+  /*  Table Action  */
+  --table-actions-icon: #e9eaec;
+  --table-actions-icon-hover: #ffffff;
+  --table-actions-icon-active: #2ba2de;
+  --table-actions-view: #e9eaec;
+  --table-actions-view-hover: #ffffff;
+  --table-actions-remove: #ea3223;
+  --table-actions-bg-hover: #e9ebed0f;
+
+  // Diagram new view
+  --diagram-container-bg: #334453;
+  --diagram-central-panel-bg: #e9ebed0f;
+  --diagram-block-stroke: #5c6a76;
+  --diagram-block-bg: #304150;
+  --diagram-connect-line: #5c6a76;
+  --diagram-selection-line: #2ba2de;
+  --diagram-selection-bg: #2f5167;
+  --diagram-highlight-line: #fbce28;
+  --diagram-highlight-bg: #48524b;
+  --diagram-content-text: #e9eaec;
+  --diagram-content-text-hover: #ffffff;
+  --diagram-content-text-selected: #2ba2de;
+  --diagram-content-text-selected-hover: #008fd6;
+  --diagram-content-second-text: #e9eaec;
+  --diagram-content-second-disabled-text: #4d5d69;
+  --diagram-content-third-text: #9da6ad;
+  --diagram-info-text: #e9eaec;
+  --diagram-info-second-text: #9da6ad;
+
+  // VM Add Edit new view
+  --select-file-type-label: #e9eaec;
+  --remote-console-options-password-content-copy-icon: #e9eaec;
+  --cpu-model-info-tooltip-icon-disabled: #bdc3c770;
+
+  // Add Hosts new view
+  --add-hosts-hosts-row-between-line: #e9ebed1f;
+  --add-hosts-hosts-row-child-value: #e9eaec;
+  --add-hosts-hosts-row-child-vm-bg-color: #e9ebed1f;
+  --add-hosts-hosts-row-child-vm-color: #e9eaec;
+  --add-hosts-ready-complete-description: #e9eaec;
+  --add-hosts-ready-complete-host-item-color: #e9eaec;
+
+  // Enter Maintenance Mode
+  --enter-maintenance-mode-modal-desc: #e9eaec;
+
+  // Enter Standby Mode
+  --enter-standby-mode-modal-desc: #e9eaec;
+  --enter-standby-mode-modal-vm-block-key: #e9eaec;
+  --enter-standby-mode-modal-block-border: #e9ebed1f;
+  --enter-standby-mode-modal-last-attempt-value: #e9eaec;
+
+  // Shut Down
+  --shut-down-modal-question-desc: #e9eaec;
+
+  // Reboot Host
+  --reboot-host-modal-question-desc: #e9eaec;
+
+  // Move To Modal
+  --move-to-tree-scrollbar-thumb-bg: #d3d6da3d;
+}