:root {
  
  --md-source: rgb(6, 18, 110);
 
  --primary: rgb(6, 18, 110);
  --surface-tint: rgb(76 86 172);
  --on-primary: rgb(255 255 255);
  --primary-container: rgb(6, 18, 110);
  --on-primary-container: rgb(120 130 219);
  --secondary: rgb(88 92 127);
  --on-secondary: rgb(255 255 255);
  --secondary-container: rgb(210 212 254);
  --on-secondary-container: rgb(87 91 126);
  --tertiary: rgb(176, 0, 44);
  --on-tertiary: rgb(255 255 255);
  --tertiary-container: hsl(348, 83%, 47%);
  --on-tertiary-container: rgb(255 241 240);
  --error: rgb(186 26 26);
  --on-error: rgb(255 255 255);
  --error-container: rgb(255 218 214);
  --on-error-container: rgb(147 0 10);
  --background: rgb(251 248 255);
  --on-background: rgb(27 27 33);
  --surface: rgb(251 248 255);
  --on-surface: rgb(27 27 33);
  --surface-variant: rgb(226 225 240);
  --on-surface-variant: rgb(69 70 81);
  --outline: rgb(118 118 131);
  --outline-variant: rgb(198 197 211);
  --shadow: rgb(0 0 0);
  --scrim: rgb(0 0 0);
  --inverse-surface: rgb(48 48 54);
  --inverse-on-surface: rgb(242 239 248);
  --inverse-primary: rgb(189 194 255);
  --primary-fixed: rgb(223 224 255);
  --on-primary-fixed: rgb(0 9 100);
  --primary-fixed-dim: rgb(189 194 255);
  --on-primary-fixed-variant: rgb(52 62 147);
  --secondary-fixed: rgb(223 224 255);
  --on-secondary-fixed: rgb(21 25 56);
  --secondary-fixed-dim: rgb(193 196 236);
  --on-secondary-fixed-variant: rgb(65 68 102);
  --tertiary-fixed: rgb(255 218 217);
  --on-tertiary-fixed: rgb(64 0 10);
  --tertiary-fixed-dim: rgb(255 179 179);
  --on-tertiary-fixed-variant: rgb(146 0 34);
  --surface-dim: rgb(219 217 225);
  --surface-bright: rgb(251 248 255);
  --surface-container-lowest: rgb(255 255 255);
  --surface-container-low: rgb(245 242 250);
  --surface-container: rgb(239 237 245);
  --surface-container-high: rgb(234 231 239);
  --surface-container-highest: rgb(228 225 233);

    --primary-op-5:rgba(232,240,254,0.5);

 
  /* neutral */
  --neutral0: #000000;
  --neutral10: #1b1b1f;
  --neutral20: #303034;
  --neutral25: #3b3b3f;
  --neutral30: #47464a;
  --neutral35: #525256;
  --neutral40: hsl(240, 2%, 38%);
  --neutral50: #77767a;
  --neutral60: #919094;
  --neutral70: #acaaaf;
  --neutral80: #c8c6ca;
  --neutral90: #e4e1e6;
  --neutral95: #f2f0f4;
  --neutral98: #fbf8fd;
  --neutral99: #fefbff;
  --neutral100: #ffffff;
  /* neutral-variant */
  --neutral-variant0: #000000;
  --neutral-variant10: #1a1b23;
  --neutral-variant20: #2f3038;
  --neutral-variant25: #3a3b43;
  --neutral-variant30: #45464f;
  --neutral-variant35: #51525b;
  --neutral-variant40: #5d5e67;
  --neutral-variant50: #767680;
  --neutral-variant60: #90909a;
  --neutral-variant70: #aaaab4;
  --neutral-variant80: #c6c5d0;
  --neutral-variant90: #e2e1ec;
  --neutral-variant95: #f0f0fa;
  --neutral-variant98: #faf8ff;
  --neutral-variant99: #fefbff;
  --neutral-variant100: #ffffff;
  /* error */
  --error0: #000000;
  --error10: #410002;
  --error20: #690005;
  --error25: #7e0007;
  --error30: #93000a;
  --error35: #a80710;
  --error40: #ba1a1a;
  --error50: #de3730;
  --error60: #ff5449;
  --error70: #ff897d;
  --error80: #ffb4ab;
  --error90: #ffdad6;
  --error95: #ffedea;
  --error98: #fff8f7;
  --error99: #fffbff;
  --error100: #ffffff;
  /* light */

  
  /* Border radius */
  --border-radius-xsm:4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 28px;
  --border-radius-pill: 100px;

  
  --elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
  --elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);

  /* fonts */

  --font-serif: Roboto;

  --primary-op: 6, 18, 110;
  --error-op: 179, 38, 30;
  --outline-op: 121, 116, 126;

  --on-primary-op: 255, 255, 255;
  --on-primary-container-op: 29, 43, 178;
  --on-secondary-op: 255, 255, 255;
  --on-secondary-container-op: 46, 61, 255;
  --on-tertiary-op: 255, 255, 255;
  --on-tertiary-container-op: 49, 17, 29;
  --on-error-op: 255, 255, 255;
  --on-error-container-op: 65, 0, 2;
  --on-background-op: 28, 27, 31;
  --on-surface-op: 28, 27, 31;
  --on-surface-variant-op: 73, 69, 79;
  --inverse-on-surface-op: 245, 240, 244;

}


/* display - large */
.display-large {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 57px;
  line-height: 64px;
  letter-spacing: -0.25px;
}

/* display - medium */
.display-medium {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 45px;
  line-height: 52px;
  letter-spacing: 0px;
}

/* display - small */
.display-small {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0px;
}

/* headline - large */
.headline-large {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0px;
}

/* headline - medium */
.headline-medium {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: 0px;
}

/* headline - small */
.headline-small {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
}

/* body - large */
.body-large {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.50px;
}

/* body - medium */
.body-medium {
  font-family: var(--font-serif);
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
}

/* body - small */
.body-small {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
}

/* label - large */
.label-large {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.10px;
}

/* label - medium */
.label-medium {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
}

/* label - small */
.label-small {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
}

/* title - large */
.title-large {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0px;
}

/* title - medium */
.title-medium {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
}

/* title - small */
.title-small {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.10px;
}