:root { 
  --azure-radiance: #0088eb;
  --base---black: #151515;
  --basicsblack: #171717;
  --basicswhite: #ffffff;
  --black: #000000;
  --black-2: #00000099;
  --cosmos: #ffd5d5;
  --cultured-pearl: #f5f5f5;
  --dark-gray: #324054;
  --day-blue900: #0c1132;
  --delta: #a3a3a3;
  --eerie-black: #1c1c1c;
  --eerie-black-2: #1c1c1c66;
  --eerie-black-3: #1c1c1c33;
  --eerie-black-4: #1d2022;
  --eerie-black-5: #1c1c1c99;
  --eerie-black-6: #1c1c1c1a;
  --eerie-black-7: #1c1c1c0d;
  --error-red: #f82727;
  --errordark: #dc2626;
  --errorlight: #ffeff0;
  --granite-gray: #666666;
  --grey1: #f4f7f9;
  --grey2: #e5e5e5;
  --grey3: #d4d4d4;
  --grey4: #a2a2a2;
  --grey5: #212c3b;
  --greygrey---3: #d5d9e1;
  --greygrey---5: #798595;
  --greygrey---6: #545f68;
  --mercury: #e5e7eb;
  --neutralneutral---6: #13243e;
  --pdf-red: #f14747;
  --pippin: #ffe1e1;
  --polar: #e5fff5;
  --primaryblue: #2563eb;
  --primaryprimary---6: #109bde;
  --primarypurple: #6d28d9;
  --secondary-gray: #71839b;
  --secondarydimmed-blue: #a8c5da;
  --secondarydimmed-purple: #c6c7f8;
  --secondaryindigo-blue: #95a4fc;
  --secondarylight-blue: #dff1fc;
  --secondarylight-purple: #eef2ff;
  --secondarymid-blue: #b1e3ff;
  --secondarymid-purple: #f3e8ff;
  --successdark: #16a34a;
  --successlight: #d6fff0;
  --sunflower: #dcc926;
  --warninglight: #fffbd4;
  --white: #ffffff;
  --white-2: #ffffff33;
  --white-lilac: #f7f9fb;
  --wild-sand: #f3f4f6;
  --xls-green: #0e8005;
 
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 20px;
  --font-size-xs: 10px;
  --font-size-xxl: 30px;
  --font-size-xxxl: 36px;
 
  --font-family-inter: "Inter", Helvetica;
  --font-family-metropolis-bold: "Metropolis-Bold", Helvetica;
  --font-family-metropolis-light: "Metropolis-Light", Helvetica;
  --font-family-metropolis-medium: "Metropolis-Medium", Helvetica;
  --font-family-metropolis-regular: "Metropolis-Regular", Helvetica;
  --font-family-metropolis-semibold: "Metropolis-SemiBold", Helvetica;
  --font-family-poppins: "Poppins", Helvetica;
}
.texts {
  font-family: var(--font-family-metropolis-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.h4strong {
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.menus-default {
  font-family: var(--font-family-metropolis-medium);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.menus-strong {
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.textbase {
  font-family: var(--font-family-metropolis-regular);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.h3strong {
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.h6default {
  font-family: var(--font-family-metropolis-medium);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.textxs {
  font-family: var(--font-family-metropolis-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.texts-strong {
  font-family: var(--font-family-metropolis-bold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

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

.textxs-strong {
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.textxxs {
  font-family: var(--font-family-metropolis-regular);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.x12-regular {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.h2default {
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.h4default {
  font-family: var(--font-family-metropolis-light);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0;
}

.h5default {
  font-family: var(--font-family-metropolis-medium);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.h5strong {
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.x12-semibold-ddddd {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.metropolis-semi-bold-mariner-14px {
  color: var(--primaryblue);
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

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

.inter-semi-bold-white-8px {
  color: var(--basicswhite);
  font-family: var(--font-family-inter);
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
}

.metropolis-semi-bold-ebony-clay-14px {
  color: var(--grey5);
  font-family: var(--font-family-metropolis-semibold);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.metropolis-bold-mariner-12px {
  color: var(--primaryblue);
  font-family: var(--font-family-metropolis-bold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 700;
}

.poppins-medium-salem-13-4px {
  color: var(--successdark);
  font-family: var(--font-family-poppins);
  font-size: 13.4px;
  font-style: normal;
  font-weight: 500;
}

.metropolis-bold-azure-radiance-16px {
  color: var(--azure-radiance);
  font-family: var(--font-family-metropolis-bold);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.poppins-medium-ebony-clay-13-4px {
  color: var(--grey5);
  font-family: var(--font-family-poppins);
  font-size: 13.4px;
  font-style: normal;
  font-weight: 500;
}

.poppins-medium-alizarin-crimson-13-4px {
  color: var(--errordark);
  font-family: var(--font-family-poppins);
  font-size: 13.4px;
  font-style: normal;
  font-weight: 500;
}

.metropolis-bold-eerie-black-12px {
  color: var(--eerie-black-4);
  font-family: var(--font-family-metropolis-bold);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 700;
}