:root {
  --color-white: #fff;
  --color-green-primary: #04a003;
  --color-bluegray-primary: #64748b;
  --color-indigo-light: #a5b4fc;
  --color-bluegray-dark: #475569;
  --color-bluegray-light: #cbd5e1;
  --color-neutral-light: #f3f4f6;
  --color-neutral-dark: #d1d5d8;
  --color-text-primary: #111827;
  --color-warn: #f92d18;

  /* background color for primary elements */
  --brimary: var(--color-white);

  /**
 * --bgbase Use as a background on login screen.
 */
  --bgbase: var(--color-white);

  /**
 * --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: var(--color-green-primary);

  /**
 * --bgprimary Usually use like card/container/list item border.
 */
  --bgprimary: var(--color-neutral-light);

  /**
 * --primary-light Use to highlight elements.
 */
  --primary-light: var(--color-indigo-light);

  /**
 * --main - primary color. Use for header, and actions not requiring primary attention.
 */
  --main: var(--color-bluegray-primary);

  /**
 * --main-light - Use for secondary text.
 */
  --main-light: var(--color-bluegray-primary);

  /**
 * --bgmain - Use for second level header, accordion header.
 * uncommon use: background color for paginator
 */
  --bgmain: var(--color-neutral-light);

  /**
 * --bgmain-dark - Usually use like container/input element border.
 * uncommon use: Background color for header row in table-container
 */
  --bgmain-dark: var(--color-neutral-dark);

  /**
 * --bgmain-ultra-dark - Usually use like checkbox/radio button border.
 */
  --bgmain-ultra-dark: var(--color-neutral-dark);

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

  /**
 * --warn - Used for validation.
 * uncommon use: fill for some cancel/pause icon
 */
  --warn: var(--color-warn);

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

  /**
 * --info - used to indicate a neutral informative change or action.
 * e.g. info toast/icon
 */
  --info: var(--color-indigo-light);
  --info-light: var(--color-neutral-light);

  /**
 * --black - Use for primary text.
 * uncommon use: native css collapse-icon for cell in table-container
 */
  --black: var(--color-text-primary);

  /**
 * --disabled-btn - Text/background color for disabled button state.
 */
  --disabled-btn: var(--color-neutral-dark);

  /**
 * --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: var(--color-bluegray-light);

  /**
 * --btn-hover - Use to highlight some icons.
 * e.g. cancel-btn, nav-action-icon
 */
  --btn-hover: var(--color-bluegray-light);

  /**
 * --nav-hover - Hover/active state for nav-item.
 */
  --nav-hover: var(--color-bluegray-dark);

  /**
 * --scroll - Background color for scrollbar
 */
  --scroll: var(--color-bluegray-primary);

  /**
 * --card-border-color - Border color for card container and header
 */
  --card-border-color: var(--color-neutral-light);

  /**
* --card-header-color - Background color for card header
*/
  --card-header-color: var(--color-neutral-light);

  /**
 * --card-selected-color - Background color selected for card header
 */
  --card-selected-color: var(--color-green-primary);

  /**
 * --card-selected-border-color - Border color for selected card header
 */
  --card-selected-border-color: var(--color-green-primary);

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

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

  /**
* --table-row-hover - Background color for hovered table rows
*/
  --table-row-hover: var(--color-white);

  /**
* --table-row-selected - Background color for selected table rows
*/
  --table-row-selected: var(--color-neutral-light);

  /**
* --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: var(--color-green-primary);

  /**
* --hover-color - General color for hovered items: menu, list etc.
*/
  --hover-color: var(--color-indigo-light);

  /**
* --list-selected-color - Background color for selected items list
*/
  --list-selected-color: var(--color-neutral-light);

  /**
    * --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: var(--color-neutral-light);

  /**
    * --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: var(--color-indigo-light);

  /**
  * --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: var(--color-indigo-light);

  /**
  * --input-checkbox-color - Color for unchecked checkbox
  */
  --input-checkbox-color: var(--color-neutral-dark);

  /**
  * --process-diagram-overlay-text-color - Color for process diagram overlay text
  */
  --process-diagram-overlay-text-color: var(--color-neutral-dark);

  /**
  * --disabled-component-background - Background color for disabled components
  */
  --disabled-component-background: var(--color-neutral-dark);

   /**
  * --font-family - Font to be used in app
  */
  --font-family: 'Segoe UI', 'Roboto';
  /**
* --bg-tab-header - Background color for tab and accordion headers
*/
  --bg-tab-header: var(--color-white);

  /**
* --bg-selected-filter-input - Background color for preselected filer inputs
*/
  --bg-selected-filter-input: var(--color-bluegray-light);
  /**
* --bg-hovered-selected-filter-input - Background color for preselected filer inputs on hover
*/
  --bg-hovered-selected-filter-input: var(--color-neutral-light);

/**
* --table-header - Background color for table headers
*/
--table-header: var(--color-white);

/**
* --table-header-hover - Background color for table hovered table headers
*/
--table-header-hover: var(--color-neutral-light);

/**
* --table-border - Color for table borders
*/
--table-border: var(--color-neutral-dark);

  /**
  * --old SM related classes
  */
  --primary-dark: var(--color-bluegray-dark);
  --main-navbar-bg: var(--color-bluegray-primary);
  --menu-item-hover-text: var(--color-text-primary);
  --tooltip: var(--color-text-primary);
  --backgroundColor: var(--color-white);
  --borderColor: var(--color-bluegray-light);
  --errorColor: var(--color-warn);
  --okColor: var(--color-green-primary);
  --selectedRowColor: var(--color-neutral-light);
}

.navbar .navbar-item .logo-container {
  background-size: 65px 24px !important;
  background-position-x: inherit !important;
  padding-left: 70px;
  min-width: 150px;
}

.login-container {
  background-size: 100% 100% !important;
}

.about-container-image {
  background-image: url("./about.jpg") !important;
}

.about-title-container img {
  width: 60px !important;
  height: 25px !important;
}

.toolbar-title img {
  width: 65px !important;
  height: 25px !important;
}