:root {
  --white: #ffffff;
  --off-white: #fafaf8;
  --bluegrey1: #e9eef0;
  --bluegrey2: #c9d1d4;
  --bluegrey3: #b9c2c6;
  --bluegrey4: #8595a3;
  --bluegrey5: #444e57;
  --pharma-red: #f3364c;
  --dataset-color: #d4dadc;
}

html {
  scrollbar-face-color: var(--off-white);
  scrollbar-base-color: var(--off-white);
  scrollbar-3dlight-color: var(--off-white);
  scrollbar-highlight-color: var(--off-white);
  scrollbar-track-color: var(--bluegrey2);
  scrollbar-arrow-color: var(--bluegrey2);
  scrollbar-shadow-color: var(--off-white);
  scrollbar-darkshadow-color: var(--off-white);
}

::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background-color: var(--off-white);
}

::-webkit-scrollbar-track-piece {
  background-color: var(--bluegrey3);
}

::-webkit-scrollbar-thumb {
  height: 20px;
  background-color: var(--bluegrey4);
  border-radius: 00px;
  border: 0px solid var(--off-white);  /* creates padding around scroll thumb */
}

::-webkit-scrollbar-corner {
  background-color: var(--off-white);
}