:root {
    --basewhite: #ffffff;
    --black: #000000;
    --blue-dark--900: #00349e;
    --blue-light25: #f4faff;
    --blue800: #1849a9;
    --blue900: #194084;
    --color--base--primary---0f69c4: #0f69c4;
    --color--base-secondary-001c41: #001c41;
    --color--gray--ffffff: #ffffff;
    --colorbaseinblackprimary-40: #062a4e;
    --colorbaseinblackprimary-80: #0c549c;
    --error500: #f04437;
    --error600: #d92c20;
    --gray-blue50: #f8f8fb;
    --gray100: #f2f3f6;
    --gray200: #eaecf0;
    --gray300: #cfd4dc;
    --gray400: #98a1b2;
    --gray50: #f8f9fb;
    --gray500: #667084;
    --gray600: #475466;
    --gray700: #344053;
    --gray800: #1d2838;
    --hawkes-blue: #cfe1f3;
    --midnight-blue: #002a61;
    --onyx: #373737;
    --storm-dust: #646464;
    --warning600: #db6803;
    --font-size-l: 16px;
    --font-size-m: 14px;
    --font-size-s: 12px;
    --font-size-xl: 18px;
    --font-size-xxl: 20px;
    --font-size-xxxl: 48px;
    --font-family-inter: "Inter", Helvetica;
    --font-family-poppins: "Poppins", Helvetica;
    --font-family-roboto: "Roboto", Helvetica;
    --font-family-roboto_slab: "Roboto Slab", Helvetica;
    
    --basewhite: rgba(255, 255, 255, 1);
    --color-base-secondary-001c41: rgba(0, 28, 65, 1);
    --colorbaseinblackprimary-60: rgba(9, 63, 117, 1);
    --gray-700: rgba(52, 64, 84, 1);
    --colorbaseinblackprimary-80: rgba(12, 84, 156, 1);
    --color-base-primary-0f69c4: rgba(15, 105, 196, 1);
    --gray-300: rgba(208, 213, 221, 1);
    --colorbaseinblackprimary-40: rgba(6, 42, 78, 1);
    --colorbaseinwhitesecundary-80: rgba(51, 73, 103, 1);
    --blue-900: rgba(25, 65, 133, 1);
    --gray-100: rgba(242, 244, 247, 1);
    --gray-500: rgba(102, 112, 133, 1);
    --gray-600: rgba(71, 84, 103, 1);
    --error-500: rgba(240, 68, 56, 1);
    --gray-900: rgba(16, 24, 40, 1);
    --error-300: rgba(253, 162, 155, 1);
    --gray-50: rgba(249, 250, 251, 1);
    --primary-300: rgba(214, 187, 251, 1);
    --primary-700: rgba(105, 65, 198, 1);
    --error-700: rgba(180, 35, 24, 1);
    --primary-800: rgba(83, 56, 158, 1);
    --error-800: rgba(145, 32, 24, 1);
    --gray-800: rgba(29, 41, 57, 1);
    --success-500: rgba(18, 183, 106, 1);
    --primary-600: rgba(127, 86, 217, 1);
    --error-600: rgba(217, 45, 32, 1);
    --primary-50: rgba(249, 245, 255, 1);
    --error-50: rgba(254, 243, 242, 1);
    --primary-200: rgba(233, 215, 254, 1);
    --error-200: rgba(254, 205, 202, 1);
    --primary-25: rgba(252, 250, 255, 1);
    --error-25: rgba(255, 251, 250, 1);
    --gray-200: rgba(234, 236, 240, 1);
    --primary-100: rgba(244, 235, 255, 1);
    --error-100: rgba(254, 228, 226, 1);
    --display-md-bold-font-family: "Inter", Helvetica;
    --display-md-bold-font-weight: 700;
    --display-md-bold-font-size: 36px;
    --display-md-bold-letter-spacing: -0.72px;
    --display-md-bold-line-height: 44px;
    --display-md-bold-font-style: normal;
    --text-md-semibold-font-family: "Inter", Helvetica;
    --text-md-semibold-font-weight: 600;
    --text-md-semibold-font-size: 16px;
    --text-md-semibold-letter-spacing: 0px;
    --text-md-semibold-line-height: 24px;
    --text-md-semibold-font-style: normal;
    --text-sm-semibold-font-family: "Inter", Helvetica;
    --text-sm-semibold-font-weight: 600;
    --text-sm-semibold-font-size: 14px;
    --text-sm-semibold-letter-spacing: 0px;
    --text-sm-semibold-line-height: 20px;
    --text-sm-semibold-font-style: normal;
    --display-sm-bold-font-family: "Inter", Helvetica;
    --display-sm-bold-font-weight: 700;
    --display-sm-bold-font-size: 30px;
    --display-sm-bold-letter-spacing: 0px;
    --display-sm-bold-line-height: 38px;
    --display-sm-bold-font-style: normal;
    --text-sm-regular-font-family: "Inter", Helvetica;
    --text-sm-regular-font-weight: 400;
    --text-sm-regular-font-size: 14px;
    --text-sm-regular-letter-spacing: 0px;
    --text-sm-regular-line-height: 20px;
    --text-sm-regular-font-style: normal;
    --text-sm-medium-font-family: "Inter", Helvetica;
    --text-sm-medium-font-weight: 500;
    --text-sm-medium-font-size: 14px;
    --text-sm-medium-letter-spacing: 0px;
    --text-sm-medium-line-height: 20px;
    --text-sm-medium-font-style: normal;
    --text-xl-regular-font-family: "Inter", Helvetica;
    --text-xl-regular-font-weight: 400;
    --text-xl-regular-font-size: 20px;
    --text-xl-regular-letter-spacing: 0px;
    --text-xl-regular-line-height: 30px;
    --text-xl-regular-font-style: normal;
    --text-xl-bold-font-family: "Inter", Helvetica;
    --text-xl-bold-font-weight: 700;
    --text-xl-bold-font-size: 20px;
    --text-xl-bold-letter-spacing: 0px;
    --text-xl-bold-line-height: 30px;
    --text-xl-bold-font-style: normal;
    --text-xl-semibold-font-family: "Inter", Helvetica;
    --text-xl-semibold-font-weight: 600;
    --text-xl-semibold-font-size: 20px;
    --text-xl-semibold-letter-spacing: 0px;
    --text-xl-semibold-line-height: 30px;
    --text-xl-semibold-font-style: normal;
    --text-md-regular-font-family: "Inter", Helvetica;
    --text-md-regular-font-weight: 400;
    --text-md-regular-font-size: 16px;
    --text-md-regular-letter-spacing: 0px;
    --text-md-regular-line-height: 24px;
    --text-md-regular-font-style: normal;
    --text-xs-semibold-font-family: "Inter", Helvetica;
    --text-xs-semibold-font-weight: 600;
    --text-xs-semibold-font-size: 12px;
    --text-xs-semibold-letter-spacing: 0px;
    --text-xs-semibold-line-height: 18px;
    --text-xs-semibold-font-style: normal;
    --text-xs-medium-font-family: "Inter", Helvetica;
    --text-xs-medium-font-weight: 500;
    --text-xs-medium-font-size: 12px;
    --text-xs-medium-letter-spacing: 0px;
    --text-xs-medium-line-height: 18px;
    --text-xs-medium-font-style: normal;
    --text-lg-semibold-font-family: "Inter", Helvetica;
    --text-lg-semibold-font-weight: 600;
    --text-lg-semibold-font-size: 18px;
    --text-lg-semibold-letter-spacing: 0px;
    --text-lg-semibold-line-height: 28px;
    --text-lg-semibold-font-style: normal;
    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --focus-ring-4px-error-100: 0px 0px 0px 4px rgba(254, 228, 226, 1);
    --focus-ring-4px-primary-100: 0px 0px 0px 4px rgba(244, 235, 255, 1);
    --shadow-xs-focused-4px-primary-100: 0px 0px 0px 4px rgba(244, 235, 255, 1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-xs-focused-4px-error-100: 0px 0px 0px 4px rgba(254, 228, 226, 1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-xs-focused-4px-gray-100: 0px 0px 0px 4px rgba(242, 244, 247, 1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.text-mdregular {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.text-smsemibold {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.text-smmedium {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.text-mdmedium {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.text-mdbold {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.text-smregular {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.text-sm--bold {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.text-xsmedium {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.roboto-medium-white-16px {
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
}

.roboto-normal-tangaroa-16px {
  color: var(--color--base-secondary-001c41);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}

.roboto-normal-white-16px {
    color: #FFF;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 32px; /* 200% */
}

.robotoslab-bold-white-20px {
  color: var(--basewhite);
  font-family: var(--font-family-roboto_slab);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
}

.robotoslab-bold-white-18px {
  color: var(--basewhite);
  font-family: var(--font-family-roboto_slab);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.roboto-normal-white-14px {
  color: var(--basewhite);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.roboto-bold-white-16px {
  color: var(--basewhite);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.poppins-medium-white-20px {
  color: var(--basewhite);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.poppins-semi-bold-black-20px {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 600;
}

.poppins-normal-white-48px {
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
}

.poppins-normal-white-48px-2 {
  color: var(--basewhite);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 400;
}

.poppins-bold-white-48px {
  color: var(--basewhite);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.poppins-bold-hawkes-blue-48px {
  color: var(--hawkes-blue);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.poppins-semi-bold-white-16px {
  color: var(--basewhite);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
}

.poppins-semi-bold-black-16px {
  color: var(--black);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
}