:root {
  --alto: #d7d9dc;
  --big-foot-feet: #f69058;
  --black: #000000;
  --black-2: #000008;
  --black-2-opacity-8: rgba(0, 0, 8, 0.08);
  --blueberry: #505cf4;
  --blueberry-2: rgba(80, 92, 244, 0.078);
  --bombay: #B1B3B9;
  --bombay-font: #B1B3B9;
  --bright-gray: #3b4150;
  --bright-gray-2: #3C4251;
  --candlelight: #faca16;
  --coloryellow-1: #FACA1614;
  --candlelight-opacity-8: rgba(250, 202, 22, 0.08);
  --colorblack-12: #00000831;
  --colorcommonblack: #000008;
  --colorgreydark: #3b4150;
  --colorgreydarker: #232730;
  --colorgreydarker2: #242730;
  --colorgreylight: #b0b3b9;
  --colorgreylight-hover: #b0b3b922;
  --colorgreylighter: #d8d9dc;
  --colorgreylightest: #f3f3f3;
  --colorgreymain: #626773;
  --colorprimarymain: #2566eb;
  --colorprimarylight: #7ca3f3;
  --colorprimarylighter: #d3e0fb;
  --colorprimarydark: #163d8d;
  --colorprimarydark-hover: rgba(22, 61, 141, 0.88);
  --colorprimarydark-opacity-8: rgba(22, 61, 141, 0.08);
  --colorprimarydark-opacity-12: rgba(22, 61, 141, 0.12);
  --colorprimarydarker: #07142f;
  --colorsecondarybackground: #fbfbfb;
  --colorsecondarybackground-2: #f8f8f8;
  --colorsecondarybackground-3: #FCFCFC;
  --colorsecondarygreen: #49c572;
  --colorsecondarygreen-opacity-8: rgba(73, 197, 114, 0.08);
  --colorsecondarygreen-hover: #49c57222;
  --colorsecondaryorange: #f69058;
  --colorsecondaryorange-bg: #f6905814;
  --colorsecondaryorange-hover: #f6905828;
  --colorsecondaryorange-2: #F69158;
  --colorsecondarypink: #fb5d70;
  --colorsecondarypink2: #FC5D70;
  --colorsecondarypink-hover: #fb5d70cc;
  --colorsecondarypurple: #505cf4;
  --colorsecondaryyellow: #FACA16;
  --coloradditionalgreen: #2ECDA3;
  --emerald: #49c572;
  --emerald-2: #49c572;
  --emerald-opaque: #49c67214;
  --dark-red: #8b0000;
  --mariner: #2566eb;
  --mariner-hover: #2566ebcc;
  --mariner-2: rgba(37, 102, 235, 0.08);
  --mariner-3: rgba(37, 102, 235, 0.12);
  --melrose: #babffd;
  --mercury: #e3e5e7;
  --portage: #8d95fa;
  --purple: #505cf4;
  --shamrock: #2ecda3;
  --shuttle-gray: #63687414;
  --shuttle-gray-text: #636874;
  --shuttle-gray-2: #6368741f;
  --shuttle-gray-3: #626773;
  --shuttle-gray-4: rgba(99, 104, 116, 0.16);
  --shuttle-gray-5: rgba(99, 104, 116, 0.24);
  --shuttle-gray-6: #63687429;
  --shuttle-gray-7: #6368740b;
  --shuttle-gray-8: rgba(99, 104, 116, 0.08);
  --button-disabled: #63687452;
  --white: #ffffff;
  --wild-watermelon: #fb5d70;
  --error: #f91537;
  --colorred-1: #FC5D7014;
  --border-color: #00000820;
  --scrollbar: #e4e6e8;

  --font-size-l: 14px;
  --font-size-m: 12px;
  --font-size-s: 10px;
  --font-size-xl: 16px;
  --font-size-xxl: 18px;
  --font-size-xxxl: 19.2px;
  --font-size-11: 11.2px;
  --font-size-13: 13px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-25: 25px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-xxxxl: 35px;
  --font-size-38: 38px;
  --font-size-48: 48px;

  --font-family-helvetica_neue-bold: "Helvetica Neue-Bold", Helvetica;
  --font-family-helvetica_neue-lightitalic: "Helvetica Neue-LightItalic", Helvetica;
  --font-family-helvetica_neue-medium: "Helvetica Neue-Medium", Helvetica;
  --font-family-helvetica_neue-regular: "Helvetica Neue-Medium", Helvetica;

  /* TODO gradually replace the font family variables above */
  --font-family: "Helvetica-Neue", Helvetica, Arial, sans-serif;

  --main-shadow: 0 4px 18px 0 rgba(155, 155, 155, 0.50);
}

.helveticaneue-regular-normal-black-12px {
  color: var(--black-2);
  font-size: var(--font-size-m);
  font-family: var(--font-family);
}

.helveticaneue-medium-black-12px {
  color: var(--black-2);
  font-size: var(--font-size-m);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-medium-black-bold-12px {
  color: var(--black-2);
  font-size: var(--font-size-m);
  font-weight: 600;
  font-family: var(--font-family);
}

.helveticaneue-regular-normal-black-16px {
  color: var(--black-2);
  font-size: var(--font-size-xl);
  font-family: var(--font-family);
}

.helveticaneue-medium-black-16px {
  color: var(--black-2);
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-medium-black-14px {
  color: var(--black-2);
  font-size: var(--font-size-l);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-regular-normal-black-14px {
  color: var(--black-2);
  font-size: var(--font-size-l);
  font-family: var(--font-family);
}

.helveticaneue-medium-shuttle-gray-12px {
  color: var(--colorgreymain);
  font-size: var(--font-size-m);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-medium-bright-gray-12px {
  color: var(--colorgreydark);
  font-size: var(--font-size-m);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-regular-normal-shuttle-gray-12px {
  color: var(--shuttle-gray-3);
  font-size: var(--font-size-m);
  font-family: var(--font-family);
}

.helveticaneue-regular-normal-shuttle-gray-14px {
  color: var(--shuttle-gray-3);
  font-size: var(--font-size-l);
  font-family: var(--font-family);
}

.helveticaneue-medium-shuttle-gray-14px {
  color: var(--shuttle-gray-3);
  font-size: var(--font-size-l);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-regular-normal-bombay-12px {
  color: var(--bombay);
  font-size: var(--font-size-m);
  font-family: var(--font-family);
}

.helveticaneue-regular-normal-alto-14px {
  color: var(--alto);
  font-size: var(--font-size-l);
  font-family: var(--font-family);
}

.helveticaneue-bold-black-16px {
  color: var(--colorcommonblack);
  font-size: var(--font-size-xl);
  font-weight: 700;
  font-family: var(--font-family);
}

.helveticaneue-medium-shark-16px {
  color: var(--colorgreydarker);
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-medium-black-18px {
  color: var(--black-2);
  font-size: var(--font-size-xxl);
  font-weight: 500;
  font-family: var(--font-family);
}

.helveticaneue-medium-black-20px {
  color: var(--black-2);
  font-size: var(--font-size-xxxl);
  font-family: var(--font-family);
}

.helveticaneue-bold-black-24px {
  color: var(--black-2);
  font-weight: 700;
  font-size: 24px;
  font-family: var(--font-family);
}

.helveticaneue-bold-black-34px {
  color: var(--black-2);
  font-size: 34px;
  font-weight: 700;
  font-family: var(--font-family);
}