: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.10);
  
    --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: #EAFBFD;
    --border-sidebar-color: #E1E1E1;

    --table-tooltip-bg-color: #EAFBFD;
    --theme-bg-color: #E9FBFD;
    --theme-header-bg-color: #222222;
    --theme-font-color1: #333333;

    --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;
    --theme-font-color2: #222222;
  
    /* 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;
    /*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: #eaf5fd;
  
    --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;
    /*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;
  }