:root {
  /* First Level Color Variables */
  /* This variables can be exposed in the Admin Branding Portlet but should not be re-used in other LESS files. */
  --brand-primary-color: #ffffff;
  --brand-secondary-color: #164d56;
  --brand-tertiary-color: #D8E3E9;
  --body-bg: #fff;
  --text-color: #121212;
  --light-grey-1: #f3f3f3;
  --light-grey-2: #d8d8d8;
  --light-grey-3: #a6a5a6;
  --light-grey: #777677;
  --medium-grey: #595859;
  --alert-red: #d82021;
  --warning-yellow: #fe6100;
  --purple: #9148d8;
  --hyperlink-blue: #0473bd;
  --black: black;
  --transparent-color: transparent;

  /* Second Level Color Variables */
  /* This variables can be re-used in LESS files */
  --ts-color-1: var(--brand-primary-color);
  --ts-color-2: var(--brand-tertiary-color);
  --ts-color-3: var(--hyperlink-blue);
  --ts-color-4: var(--brand-secondary-color);
  --ts-color-5: #ffffff;
  --ts-color-6: var(--alert-red);
  --ts-color-7: var(--warning-yellow);
  --ts-color-8: purple;
  --ts-color-9: var(--light-grey-1);
  --ts-color-10: var(--light-grey-2);
  --ts-color-11: var(--light-grey-3);
  --ts-color-12: var(--medium-grey);
  --ts-color-13: var(--text-color);
  --ts-color-14: #ffffff;

  --app-welcome-msg-bg: #137886;
  --app-welcome-msg-color: #ffffff;
  --mgr-welcome-msg-bg: #7f1c7d;
  --mgr-welcome-msg-color: #ffffff;
  --newhire-welcome-msg-bg: #7f1c7d;
  --newhire-welcome-msg-color: #ffffff;

  /* banner */
  --banner-bg: #DDDDDD;
  --banner-height: 50px;
  --banner-title-color: #f1f1f1;

  /* application launcher */
  --app-launcher-bg: #fff;

  /* application navigation */
  --app-navigation-bg: #c9c9c9;
  --app-navigation-width: 245px;

  /* sub-navigation - onboard */
  --subnav-bg: var(--ts-color-9);
  --subnav-link-color: #0f6eb1;
  --subnav-link-sel-color:#009B55;

  /* global actions*/
  --actions-bg: var(--ts-color-1);

  /* user menu */
  --user-menu-text-color: var(--text-color);
  --user-menu-bg: var(--body-bg);
  --user-menu-select-bg: var(--ts-color-10);

  /* progress indicators */
  --progress-color: var(--ts-color-1);

  /* links */
  --link-color: var(--ts-color-3);
  --link-hover-color: var(--link-color);
  --link-visited-color: #7f1c7d;

  --error-color: var(--ts-color-6);
  --warning-color: var(--ts-color-7);
  --success-color: #0473bd;

  /* forms */
  --disabled-color: var(--ts-color-11);
  --primary-btn-color:#009B55;
  --primary-btn-color-hover: #dddddd;
  --primary-btn-text-color: #ffffff;
  --primary-btn-text-color-hover: #ffffff;
  --primary-btn-disabled-color: var(--disabled-color);
  --primary-btn-disabled-text-color: var(--text-color);
  --secondary-btn-color: #ffffff;
  --secondary-btn-color-hover: var(--primary-btn-color-hover);
  --secondary-btn-text-color: var(--primary-btn-color);
  --secondary-btn-text-color-hover: var(--primary-btn-text-color-hover);
  --secondary-btn-border-color: var(--secondary-btn-text-color);

  /* alerts */
  --alert-border-radius: 0;

  /* misc */
  --border-radius-base: 0px;
  --border-radius-large: round(--border-radius-base * 1.5);
  --border-radius-small: round(--border-radius-base * 0.75);
  --border-radius-very-small: round(--border-radius-base * 0.5);

  /* color - onboard */
  --onboard-home-bg: var(--app-welcome-msg-bg);
  --onboard-mgr-home-bg: var(--mgr-welcome-msg-bg);
  --newhire-home-bg: var(--newhire-welcome-msg-bg);
  --onboard-home-msg-color: var(--app-welcome-msg-color);
  --onboard-mgr-home-msg-color: var(--mgr-welcome-msg-color);
  --newhire-home-msg-color: var(--newhire-welcome-msg-color);
}