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

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

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

  --modal-close-button: #626262;
  --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);

  --theme-font-grey-primary: #626262;

  --section-heading-font-color: #222222;
  --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);

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

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

  --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: 4px;
  --control-border-radius: 2px;

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

  /* link text colors */
  --theme-text-color: #005187;
}

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

:root body.light {
  --theme-info-color: #0c8ca2;
  /*used in icon for information*/
  --theme-primary-color: #0a8579;
  /*button background, borders in textbox, buttons*/
  --theme-secondary-color: #057368;
  /*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;
  /* default app text color*/
  --theme-link-color: #196ecf;
  /* link button colors */
  --theme-font-white: #ffffff;

  /*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 */

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

  --input-border-color: #929496;
}