:root {
  --brimary: white;

  /**
 * --bgbase Use as a background on login screen.
 */
  --bgbase: f8f8f8;

  /**
 * --primary - accent color. Usually use for actions requiring primary attention.
 * uncommon use: some splitter elements background;
 *               text color for success message in toast;
 *               card content border;
 *               spinner animation
 */
  --primary: #007FB9;

  /**
 * --bgprimary Usually use like card/container/list item border.
 */
  --bgprimary: #007FB91A;

  /**
 * --primary-light Use to highlight elements.
 */
  --primary-light: #007FB91A;

  /**
 * --main - primary color. Use for header, and actions not requiring primary attention.
 */
  --main: #008DCE;

  /**
 * --main-light - Use for secondary text.
 */
  --main-light: #666666;

  /**
 * --bgmain - Use for second level header, accordion header.
 * uncommon use: background color for paginator
 */
  --bgmain: #F6F6F6;

  /**
 * --bgmain-dark - Usually use like container/input element border.
 * uncommon use: Background color for header row in table-container
 */
  --bgmain-dark: #f2f2f2;

  /**
 * --bgmain-ultra-dark - Usually use like checkbox/radio button border.
 */
  --bgmain-ultra-dark: #F2F2F2;

  /**
 * --attention - Used for warning that may require attention.
 */
  --attention: #F2994A;

  /**
 * --warn - Used for validation.
 * uncommon use: fill for some cancel/pause icon
 */
  --warn: #EB5757;

  /**
 * --warn-light - Usually use like validation element background.
 */
  --warn-light: #FFE5E5;

  /**
 * --info - used to indicate a neutral informative change or action.
 * e.g. info toast/icon
 */
  --info: #0288D1;
  --info-light: #e0f4ff;

  /**
 * --black - Use for primary text.
 * uncommon use: native css collapse-icon for cell in table-container
 */
  --black: #000;

  /**
 * --disabled-btn - Text/background color for disabled button state.
 */
  --disabled-btn: #C4C4C4;

  /**
 * --hover - Use to highlight menu-item-container, activity-item-container, filter-columns-data-container,
 * filter-columns-data-container, filter-chbx-container, filter-dropdown-option and high level rows for table container
 */
  --hover: #4093DF1A;

  /**
 * --btn-hover - Use to highlight some icons.
 * e.g. cancel-btn, nav-action-icon
 */
  --btn-hover: #007FB91A;

  /**
 * --nav-hover - Hover/active state for nav-item.
 */
  --nav-hover: #007FB9;

  /**
 * --scroll - Background color for scrollbar
 */
  --scroll: #808080;

  
-/**
 * --card-border-color - Border color for card container and header
 */
  --card-border-color: #007FB91A;

  /**
* --card-header-color - Background color for card header
*/
  --card-header-color: #007FB91A;

  /**
 * --card-selected-color - Background color selected for card header
 */
  --card-selected-color: #007FB9;

  /**
 * --card-selected-border-color - Border color for selected card header
 */
  --card-selected-border-color: #007FB9;

  /**
* --card-selected-header-text - Text color for selected card header
*/
  --card-selected-header-text: white;

  /**
* --card-selected-header-icon - Icon color for selected card header
*/
  --card-selected-header-icon: white;

  /**
* --table-row-hover - Background color for hovered table rows
*/
  --table-row-hover: #e0e8ee;

  /**
* --table-row-selected - Background color for selected table rows
*/
  --table-row-selected: #007FB91A;

  /**
* --table-row-selected-font-bold - Font weight for selected table rows
*/
  --table-row-selected-font-bold: normal;

  /**
* --table-row-selected-icon - Icon color for selected table rows
*/
  --table-row-selected-icon: #007FB9;

  /**
* --hover-color - General color for hovered items: menu, list etc.
*/
  --hover-color: #4093DF1A;

  /**
* --list-selected-color - Background color for selected items list
*/
  --list-selected-color: #007FB91A;

  /**
    * --list-selected-color - Font weight for selected items list
    */
  --list-selected-font-bold: normal;

  /**
  * --nav-selected-color - Background color for selected navigation item
  */
  --nav-selected-color: #007FB91A;

  /**
    * --list-selected-color - Font weight for selected navigation item
    */
  --nav-selected-font-bold: normal;

  /**
    * --list-selected-color - Border color for breadcrumb container
    */
  --breadcrumb-border-color: transparent;

  /**
  * --menu-hover-color - Background color for hovered menu item
  */
  --menu-hover-color: #007FB91A;

  /**
  * --menu-selected-color - Font weight for selected menu item
  */
  --menu-selected-font-bold: normal;

  /**
  * --menu-selected-color - Font weight for selected menu item
  */
  --menu-seletced-color: #4093DF1A;

  /**
  * --input-checkbox-color - Color for unchecked checkbox
  */
  --input-checkbox-color: #F2F2F2;

  /**
  * --process-diagram-overlay-text-color - Color for process diagram overlay text
  */
  --process-diagram-overlay-text-color: #c4c4c4;

  /**
  * --disabled-component-background - Background color for disabled components
  */
  --disabled-component-background: #f2f2f2;
}