:root { 
  --alert: #f64018;
  --bg---alert: #fff7ee;
  --consumer-1: #0fb1bf;
  --consumer-2: #5bb9d3;
  --consumer-3: #97d2e0;
  --consumer-4: #d6eef2;
  --consumer-5: #e6f4fe;
  --epc-1: #2f7c5a;
  --epc-3: #c4d9b6;
  --primary-color-1: #009aa6;
  --primary-color-2: #72ce9b;
  --primary-color-3: #5bc6e8;
  --tertiary-6: #f69419;
  --tertiary-8: #fcdbb1;
  --text-1: #336699;
  --text-2: #0099cc;
  --text-3: #ffffff;
  --text-4: #666666;
  --text-5: #000000;
 
  --font-size-l: 20px;
  --font-size-m: 16px;
  --font-size-s: 14px;
  --font-size-xl: 24px;
  --font-size-xs: 12px;
  --font-size-xxl: 30px;
  --font-size-xxxl: 32px;
 
  --font-family-arial-regular: "Arial-Regular", Helvetica;
  --font-family-inter-regular: "Inter-Regular", Helvetica;
  --font-family-noto_sans_thai: "Noto Sans Thai", Helvetica;
  --font-family-noto_sans_thai-bold: "Noto Sans Thai", Helvetica;
  --font-family-noto_sans_thai-regular: "Noto Sans Thai", Helvetica;
  --font-family-roboto-bold: "Roboto-Bold", Helvetica;
}
.notosansthai-regular-normal-granite-gray-14px {
  color: var(--text-4);
  font-family: var(--font-family-noto_sans_thai-regular);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.notosansthai-regular-normal-black-16px {
  color: var(--text-5);
  font-family: var(--font-family-noto_sans_thai-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.notosansthai-regular-normal-white-16px {
  color: var(--text-3);
  font-family: var(--font-family-noto_sans_thai-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.notosansthai-medium-granite-gray-20px {
  color: var(--text-4);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.notosansthai-medium-white-20px {
  color: var(--text-3);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.notosansthai-medium-white-30px {
  color: var(--text-3);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 500;
}

.notosansthai-medium-white-24px {
  color: var(--text-3);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 500;
}

.notosansthai-regular-normal-granite-gray-16px {
  color: var(--text-4);
  font-family: var(--font-family-noto_sans_thai-regular);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.notosansthai-medium-bondi-blue-20px {
  color: var(--primary-color-1);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 500;
}

.notosansthai-light-pacific-blue-14px {
  color: var(--text-2);
  font-family: var(--font-family-noto_sans_thai);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 300;
}

.roboto-bold-tree-poppy-24px {
  color: var(--tertiary-6);
  font-family: var(--font-family-roboto-bold);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}