:root {
  --primary-color: #0067c0;
  --primary-color-alt: #1975c5;
  --text: #000000;
  --text-alt: #ffffff;
  --hypertext-hover-bg: #eaeaea;
  --text-disabled: #9b9b9b;

  --body-bg: #bccee2;

  --main-layout-bg: #f3f3f3;
  --content-bg: #f9f9f9;
  --card-bg: #fdfdfd;

  --btn-text-active: #ffffffa8; /* 66% transparency */

  --element-border: #5a5a5a;
  --element-bg: #00000005; /* 2% transparency */
  --element-bg-hover: #0000000f; /* 6% transparency */
  --element-disabled-bg: #5a5a5a;

  --sidebar-item-bg: #ededed;

  --text-input-bg: #fbfbfb;
  --text-input-bg-hover: #f6f6f6;
  --text-input-placeholder: #5f5f5f;
  --text-input-bg-focus: transparent;
  --text-input-border-bot: #5e5e5e;

  --dropdown-toggle-text-hover: #1a1a1a;
  --dropdown-toggle-border: #e5e5e5;
  --dropdown-menu-bg: #f7f7f7;
  --dropdown-menu-bg-hover: #f0f0f0;

  --color-success: #0f7b0f;
  --color-success-bg: #dff6dd;
  --color-caution: #9d5d00;
  --color-caution-bg: #fff4ce;
  --color-critical: #c42b1c;
  --color-critical-bg: #fde7e9;
  --color-attention: #0078d4;
  --color-attention-bg: #f9f9f9;
  --color-neutral: #8a8a8a;
}