:root {
  --loader-secondary-color: #cfcfcf;
  --loader-primary-color: #057368;
}

:root body {
  --font-family: Helvetica;
  --font-size: 16px;
  --font-weight: 700;

  /* bg */
  --bg-secondary-alt-color: #f1fdff;

  --box-shadow: rgba(0, 0, 0, 0.25);
  --box-light-shadow: rgba(0, 0, 0, 0.1);

  --modal-close-button: var(--theme-font-grey);
  --modal-bg-color: var(--bg-default-color);
  --modal-header-bg-color: var(--bg-primary-color);

  --icon-info-color: var(--theme-info-color);
  --icon-primary-color: var(--theme-primary-color);
  --icon-success-color: var(--theme-success-color);
  --icon-warning-color: var(--theme-warning-color);
  --icon-danger-color: var(--theme-danger-color);

  --font-primary-color: var(--theme-primary-color);
  --font-secondary-color: var(--theme-secondary-color);
  --font-success-color: var(--theme-success-color);
  --font-danger-color: var(--theme-danger-color);
  --font-warning-color: var(--theme-warning-color);
  --font-default-color: var(--theme-font-color);
  --font-disabled-color: var(--theme-default-color);
  --font-overlay-color: var(--theme-overlay-color);
  --font-link-color: var(--theme-link-color);

  --border-primary-color: var(--theme-primary-color);
  --border-secondary-color: var(--theme-secondary-color);
  --border-success-color: var(--theme-success-color);
  --border-default-color: var(--theme-default-color);
  --border-color: var(--theme-border-color);
  --border-danger-color: var(--theme-danger-color);
  --border-warning-color: var(--theme-warning-color);
  --border-info-color: var(--theme-info-color);
  --border-overlay-color: var(--theme-overlay-color);
  --border-disabled-color: var(--theme-disabled-color);

  --button-default-color: var(--bg-default-color);
  --button-primary-color: var(--theme-primary-color);
  --button-secondary-color: var(--theme-secondary-color);
  --button-danger-color: var(--theme-danger-color);
  --button-warning-color: var(--theme-warning-color);
  --button-info-color: var(--theme-info-color);
  --button-disabled-color: var(--theme-disabled-color);

  --control-bg-color: var(--bg-default-color);
  --chat-bg-color: var(--bg-info-color);

  --h1-font-size: 24px;
  --h2-font-size: 22px;
  --h3-font-size: 20px;
  --h4-font-size: 18px;
  --h5-font-size: 16px;
  --h6-font-size: 14px;

  --header-bg-color: var(--bg-default-color);
  --footer-bg-color: var(--bg-default-color);
  --main-footer-bg-color: var(--bg-default-color);
  --card-header-bg-color: var(--bg-default-color);
  --box-bg-color: var(--bg-default-color);
  --sidebar-bg-color: var(--bg-default-color);
  --container-bg-color: var(--bg-primary-color);
  --container-secondary-bg-color: var(--bg-secondary-alt-color);

  --items-primary-selected-bg-color: var(--theme-primary-color);
  --items-primary-hover-bg-color: var(--theme-primary-color);

  --items-secondary-selected-bg-color: #eafbfd;
  --items-secondary-hover-bg-color: #eafbfd;

  --default-margin-top1: 40px;
  --default-margin-top2: 30px;
  --default-margin-top3: 20px;
  --default-margin-top4: 10px;

  --icon-font-size: 24px;

  --app-logo-image-height: 80px;
  --app-logo-image-width: 240px;

  --footer-logo-image-height: 30px;
  --footer-logo-image-width: 120px;

  --logo-image-height: 50px;
  --logo-image-width: 160px;

  --skip-to-main-bg-color: var(--bg-info-color);
  --skip-to-main-txt-color: var(--theme-link-color);

  /* --button-border-radius: 23px;
  --control-border-radius: 23px; */
  --button-border-radius: 2px;
  --control-border-radius: 2px;

  --theme-primary-login-color: #119c8b;
  --border-sidebar-color: #e1e1e1;
  /* table tooltip */
  --table-tooltip-bg-color: #eafbfd;

  --theme-bg-color: #e9fbfd;
  --theme-header-bg-color: #222222;
  --theme-font-color1: #333333;

  /* multi select dropdown component */
  --multi-select-dropdown-chip-bg-color: var(--grid-info-color);
  --multi-select-dropdown-disabled-chip-bg-color: var(--bg-primary-color);
  --multi-select-dropdown-disabled-chip-border-color: var(--theme-default-color);
  --multi-select-dropdown-option-check-border-color: var(--theme-font-grey-primary);
  --multi-select-dropdown-check-icon-color: var(--bg-default-color);

  --checkbox-disabled-color: #79b7e9;
}

:root body.dark {
  --theme-info-color: #00e4ff;
  /*used in icon for information*/
  --theme-primary-color: #ffffff;
  /*button background, borders in textbox, buttons*/
  --theme-secondary-color: #89f6ff;
  /*button hover background, hover, focus borders in textbox*/
  --theme-danger-color: #f99090;
  /*for all error scenarios*/
  --theme-success-color: #00db58;
  /*icons & textbox tick mark, verified succes color*/
  --theme-disabled-color: #cfcfcf;
  /*textbox, button, other controls, ----modal header bottom border */
  --theme-overlay-color: #bdfaff;
  /* not used at presently*/
  --theme-border-color: #424242;
  /*used for all box border color*/
  --theme-default-color: #cfcfcf;
  /* disabeld text colors, controls border, -----tooltip in username,pwd */
  --theme-font-color: #ffffff;
  /* default app text color --- changed*/
  --theme-link-color: #00e4ff;
  /* link button colors */
  --theme-font-white: #424242;

  /*not used color codes*/
  --theme-font-color1: #333333;
  /* dont use */
  --theme-warning-color: #eb5a0a;
  /*not used warning*/
  --theme-warning1-color: #c9a909;
  /*not used*/
  --bg-secondary-color: #f6f6f6;
  /* dont use */
  --button-primary-color: #bdfaff;

  --bg-primary-color: #141414;
  /*main bg, modal header, ------account settings header*/
  --bg-default-color: #292929;
  --bg-disabled-color: var(--theme-disabled-color);
  --bg-selected-color: #f9f9f9;
  --bg-success-color: #ecfdea;
  --bg-info-color: #7d7d7d;

  --modal-overlay-color: #000000;
  --modal-opacity: 0.5;
  --modal-bg-color: #424242;

  --control-bg-color: #424242;
  --chat-bg-color: #424242;
  --modal-close-button: #ffffff;

  --modal-header-bg-color: #424242;
  --sidebar-bg-color: #222222;
  --footer-bg-color: #222222;
  --header-bg-color: #292929;
  --container-bg-color: #424242;

  --items-primary-hover-bg-color: var(--bg-primary-color);
  --items-secondary-selected-bg-color: #424242;
  --items-secondary-hover-bg-color: #424242;

  --loader-secondary-color: #292929;
  --loader-primary-color: #89f6ff;

  --skip-to-main-bg-color: #f4f4f4;
  --skip-to-main-txt-color: #005187;

  --grid-info-color: #dcfbff;
  --grid-legend-border: #cecece;
  --grid-legend-bg-color: #484848;
  --grid-legend-box-shadow: #bcbcbc;

  --card-alert-bg-color: #fbffec;
  --card-alert-success: #0a853c;

  /* notification */
  --alert-message-wrapper-shadow: #999999;
  --alert-message-wrapper-color: #222222;
  --alert-theme-error-bg: #ffeceb;
  --alert-theme-info-bg: #dcfbff;
  --alert-icon-info-color: #0c8ca2;
  /*for alert error scenarios*/
  --alert-theme-warning-color: #9f6000;
  --alert-theme-warning-bg: #fffbe9;

  --theme-primary-login-color: #119c8b;
  --border-sidebar-color: #e1e1e1;
  /* table tooltip */
  --table-tooltip-bg-color: #eafbfd;

  --theme-bg-color: #e9fbfd;
  --theme-header-bg-color: #222222;
}

:root body.light {
  --theme-info-color: #0c8ca2;
  /*used in icon for information*/
  --theme-primary-color: #006fc9;
  /*button background, borders in textbox, buttons*/
  --theme-secondary-color: #0064b5;
  /*button hover background, hover, focus borders in textbox*/
  --theme-danger-color: #d10e00;
  /*for all error scenarios*/
  --theme-success-color: #0a853c;
  /*icons & textbox tick mark, verified succes color*/
  --theme-disabled-color: #cfcfcf;
  /*textbox, button, other controls, ----modal header bottom border */
  --theme-overlay-color: #515151;
  /* not used at presently*/
  --theme-border-color: #e1e1e1;
  /*used for all box border color*/
  --theme-default-color: #949494;
  /* disabeld text colors, controls border, -----tooltip in username,pwd */
  --theme-font-color: #19191a;
  --theme-font-grey-primary: #626262;
  --theme-font-grey-secondary: #333333;

  /* default app text color*/
  --theme-link-color: #196ecf;
  /* link button colors */
  --theme-font-white: #ffffff;

  /* dont use */
  --theme-warning-color: #eb5a0a;
  /*not used warning*/
  --theme-warning1-color: #c9a909;
  /*not used*/
  --bg-secondary-color: #f6f6f6;
  /* dont use */

  --bg-primary-color: #f4f4f4;
  /*main bg, modal header, ------account settings header*/
  --bg-default-color: #ffffff;
  --bg-disabled-color: var(--theme-disabled-color);
  --bg-selected-color: #f9f9f9;
  --bg-success-color: #ecfdea;
  --bg-info-color: #eafbfd;

  --modal-overlay-color: #000000;
  --modal-opacity: 0.8;

  --loader-secondary-color: #cfcfcf;
  --loader-primary-color: #057368;

  --grid-info-color: #dcfbff;
  --grid-legend-border: #cecece;
  --grid-legend-bg-color: #484848;
  --grid-legend-box-shadow: #bcbcbc;

  --card-alert-bg-color: #fbffec;
  --card-alert-success: #0a853c;

  /* notification */
  --alert-message-wrapper-shadow: #999999;
  --alert-message-wrapper-color: #222222;
  --alert-theme-error-bg: #ffeceb;
  --alert-theme-info-bg: #dcfbff;
  --alert-icon-info-color: #0c8ca2;
  /*for alert error scenarios*/
  --alert-theme-warning-color: #9f6000;
  --alert-theme-warning-bg: #fffbe9;
  --border-sidebar-color: #e1e1e1;
  /* table tooltip */
  --table-tooltip-bg-color: #eafbfd;
  --theme-bg-color: #e9fbfd;
  --theme-header-bg-color: #222222;
  --theme-font-color1: #333333;
}