
:root{
  --blue50: #ebf5ff;
  --blue100: #dbebff;
  --blue200: #bedaff;
  --blue300: #97c0ff;
  --blue400: #839ffe;
  --blue500: #4c75ff;
  --blue600: #2848ff;
  --blue700: #2039e2;
  --blue800: #1e2e9d;
  --blue900: #131c53;
  --green50: #eefff7;
  --green100: #d7ffee;
  --green200: #b1ffdf;
  --green300: #75ffc7;
  --green400: #32f6a6;
  --green500: #08f093;
  --green600: #00ba6f;
  --green700: #069a60;
  --green800: #095437;
  --green900: #003521;
  --gray50: #f7f7fa;
  --gray100: #d5d7db;
  --gray200: #bcbec4;
  --gray300: #a1a4ab;
  --gray400: #858994;
  --gray500: #6c717f;
  --gray600: #545a69;
  --gray700: #3b4254;
  --gray800: #232b3e;
  --gray900: #0a1329;
  --lightblue: #1cdfff;
  --white: #ffffff;
  --black: #000000;
  --red500: #d4321b;
  --opacity8: #0a1329;
  --opacity20: #ffffff;
}


/* COLOR Blue50 */
.colorBlue50{ color: var(--blue50); }
.hoverColorBlue50:hover{ color: var(--blue50); }
.bgColorBlue50{ background-color: var(--blue50); }
.hoverBgColorBlue50:hover{ background-color: var(--blue50); }
.borderBlue50{ border-color: var(--blue50); }
.hoverBorderBlue50:hover{ border-color: var(--blue50); }

/* COLOR Blue100 */
.colorBlue100{ color: var(--blue100); }
.hoverColorBlue100:hover{ color: var(--blue100); }
.bgColorBlue100{ background-color: var(--blue100); }
.hoverBgColorBlue100:hover{ background-color: var(--blue100); }
.borderBlue100{ border-color: var(--blue100); }
.hoverBorderBlue100:hover{ border-color: var(--blue100); }

/* COLOR Blue200 */
.colorBlue200{ color: var(--blue200); }
.hoverColorBlue200:hover{ color: var(--blue200); }
.bgColorBlue200{ background-color: var(--blue200); }
.hoverBgColorBlue200:hover{ background-color: var(--blue200); }
.borderBlue200{ border-color: var(--blue200); }
.hoverBorderBlue200:hover{ border-color: var(--blue200); }

/* COLOR Blue300 */
.colorBlue300{ color: var(--blue300); }
.hoverColorBlue300:hover{ color: var(--blue300); }
.bgColorBlue300{ background-color: var(--blue300); }
.hoverBgColorBlue300:hover{ background-color: var(--blue300); }
.borderBlue300{ border-color: var(--blue300); }
.hoverBorderBlue300:hover{ border-color: var(--blue300); }

/* COLOR Blue400 */
.colorBlue400{ color: var(--blue400); }
.hoverColorBlue400:hover{ color: var(--blue400); }
.bgColorBlue400{ background-color: var(--blue400); }
.hoverBgColorBlue400:hover{ background-color: var(--blue400); }
.borderBlue400{ border-color: var(--blue400); }
.hoverBorderBlue400:hover{ border-color: var(--blue400); }

/* COLOR Blue500 */
.colorBlue500{ color: var(--blue500); }
.hoverColorBlue500:hover{ color: var(--blue500); }
.bgColorBlue500{ background-color: var(--blue500); }
.hoverBgColorBlue500:hover{ background-color: var(--blue500); }
.borderBlue500{ border-color: var(--blue500); }
.hoverBorderBlue500:hover{ border-color: var(--blue500); }

/* COLOR Blue600 */
.colorBlue600{ color: var(--blue600); }
.hoverColorBlue600:hover{ color: var(--blue600); }
.bgColorBlue600{ background-color: var(--blue600); }
.hoverBgColorBlue600:hover{ background-color: var(--blue600); }
.borderBlue600{ border-color: var(--blue600); }
.hoverBorderBlue600:hover{ border-color: var(--blue600); }

/* COLOR Blue700 */
.colorBlue700{ color: var(--blue700); }
.hoverColorBlue700:hover{ color: var(--blue700); }
.bgColorBlue700{ background-color: var(--blue700); }
.hoverBgColorBlue700:hover{ background-color: var(--blue700); }
.borderBlue700{ border-color: var(--blue700); }
.hoverBorderBlue700:hover{ border-color: var(--blue700); }

/* COLOR Blue800 */
.colorBlue800{ color: var(--blue800); }
.hoverColorBlue800:hover{ color: var(--blue800); }
.bgColorBlue800{ background-color: var(--blue800); }
.hoverBgColorBlue800:hover{ background-color: var(--blue800); }
.borderBlue800{ border-color: var(--blue800); }
.hoverBorderBlue800:hover{ border-color: var(--blue800); }

/* COLOR Blue900 */
.colorBlue900{ color: var(--blue900); }
.hoverColorBlue900:hover{ color: var(--blue900); }
.bgColorBlue900{ background-color: var(--blue900); }
.hoverBgColorBlue900:hover{ background-color: var(--blue900); }
.borderBlue900{ border-color: var(--blue900); }
.hoverBorderBlue900:hover{ border-color: var(--blue900); }

/* COLOR Green50 */
.colorGreen50{ color: var(--green50); }
.hoverColorGreen50:hover{ color: var(--green50); }
.bgColorGreen50{ background-color: var(--green50); }
.hoverBgColorGreen50:hover{ background-color: var(--green50); }
.borderGreen50{ border-color: var(--green50); }
.hoverBorderGreen50:hover{ border-color: var(--green50); }

/* COLOR Green100 */
.colorGreen100{ color: var(--green100); }
.hoverColorGreen100:hover{ color: var(--green100); }
.bgColorGreen100{ background-color: var(--green100); }
.hoverBgColorGreen100:hover{ background-color: var(--green100); }
.borderGreen100{ border-color: var(--green100); }
.hoverBorderGreen100:hover{ border-color: var(--green100); }

/* COLOR Green200 */
.colorGreen200{ color: var(--green200); }
.hoverColorGreen200:hover{ color: var(--green200); }
.bgColorGreen200{ background-color: var(--green200); }
.hoverBgColorGreen200:hover{ background-color: var(--green200); }
.borderGreen200{ border-color: var(--green200); }
.hoverBorderGreen200:hover{ border-color: var(--green200); }

/* COLOR Green300 */
.colorGreen300{ color: var(--green300); }
.hoverColorGreen300:hover{ color: var(--green300); }
.bgColorGreen300{ background-color: var(--green300); }
.hoverBgColorGreen300:hover{ background-color: var(--green300); }
.borderGreen300{ border-color: var(--green300); }
.hoverBorderGreen300:hover{ border-color: var(--green300); }

/* COLOR Green400 */
.colorGreen400{ color: var(--green400); }
.hoverColorGreen400:hover{ color: var(--green400); }
.bgColorGreen400{ background-color: var(--green400); }
.hoverBgColorGreen400:hover{ background-color: var(--green400); }
.borderGreen400{ border-color: var(--green400); }
.hoverBorderGreen400:hover{ border-color: var(--green400); }

/* COLOR Green500 */
.colorGreen500{ color: var(--green500); }
.hoverColorGreen500:hover{ color: var(--green500); }
.bgColorGreen500{ background-color: var(--green500); }
.hoverBgColorGreen500:hover{ background-color: var(--green500); }
.borderGreen500{ border-color: var(--green500); }
.hoverBorderGreen500:hover{ border-color: var(--green500); }

/* COLOR Green600 */
.colorGreen600{ color: var(--green600); }
.hoverColorGreen600:hover{ color: var(--green600); }
.bgColorGreen600{ background-color: var(--green600); }
.hoverBgColorGreen600:hover{ background-color: var(--green600); }
.borderGreen600{ border-color: var(--green600); }
.hoverBorderGreen600:hover{ border-color: var(--green600); }

/* COLOR Green700 */
.colorGreen700{ color: var(--green700); }
.hoverColorGreen700:hover{ color: var(--green700); }
.bgColorGreen700{ background-color: var(--green700); }
.hoverBgColorGreen700:hover{ background-color: var(--green700); }
.borderGreen700{ border-color: var(--green700); }
.hoverBorderGreen700:hover{ border-color: var(--green700); }

/* COLOR Green800 */
.colorGreen800{ color: var(--green800); }
.hoverColorGreen800:hover{ color: var(--green800); }
.bgColorGreen800{ background-color: var(--green800); }
.hoverBgColorGreen800:hover{ background-color: var(--green800); }
.borderGreen800{ border-color: var(--green800); }
.hoverBorderGreen800:hover{ border-color: var(--green800); }

/* COLOR Green900 */
.colorGreen900{ color: var(--green900); }
.hoverColorGreen900:hover{ color: var(--green900); }
.bgColorGreen900{ background-color: var(--green900); }
.hoverBgColorGreen900:hover{ background-color: var(--green900); }
.borderGreen900{ border-color: var(--green900); }
.hoverBorderGreen900:hover{ border-color: var(--green900); }

/* COLOR Gray50 */
.colorGray50{ color: var(--gray50); }
.hoverColorGray50:hover{ color: var(--gray50); }
.bgColorGray50{ background-color: var(--gray50); }
.hoverBgColorGray50:hover{ background-color: var(--gray50); }
.borderGray50{ border-color: var(--gray50); }
.hoverBorderGray50:hover{ border-color: var(--gray50); }

/* COLOR Gray100 */
.colorGray100{ color: var(--gray100); }
.hoverColorGray100:hover{ color: var(--gray100); }
.bgColorGray100{ background-color: var(--gray100); }
.hoverBgColorGray100:hover{ background-color: var(--gray100); }
.borderGray100{ border-color: var(--gray100); }
.hoverBorderGray100:hover{ border-color: var(--gray100); }

/* COLOR Gray200 */
.colorGray200{ color: var(--gray200); }
.hoverColorGray200:hover{ color: var(--gray200); }
.bgColorGray200{ background-color: var(--gray200); }
.hoverBgColorGray200:hover{ background-color: var(--gray200); }
.borderGray200{ border-color: var(--gray200); }
.hoverBorderGray200:hover{ border-color: var(--gray200); }

/* COLOR Gray300 */
.colorGray300{ color: var(--gray300); }
.hoverColorGray300:hover{ color: var(--gray300); }
.bgColorGray300{ background-color: var(--gray300); }
.hoverBgColorGray300:hover{ background-color: var(--gray300); }
.borderGray300{ border-color: var(--gray300); }
.hoverBorderGray300:hover{ border-color: var(--gray300); }

/* COLOR Gray400 */
.colorGray400{ color: var(--gray400); }
.hoverColorGray400:hover{ color: var(--gray400); }
.bgColorGray400{ background-color: var(--gray400); }
.hoverBgColorGray400:hover{ background-color: var(--gray400); }
.borderGray400{ border-color: var(--gray400); }
.hoverBorderGray400:hover{ border-color: var(--gray400); }

/* COLOR Gray500 */
.colorGray500{ color: var(--gray500); }
.hoverColorGray500:hover{ color: var(--gray500); }
.bgColorGray500{ background-color: var(--gray500); }
.hoverBgColorGray500:hover{ background-color: var(--gray500); }
.borderGray500{ border-color: var(--gray500); }
.hoverBorderGray500:hover{ border-color: var(--gray500); }

/* COLOR Gray600 */
.colorGray600{ color: var(--gray600); }
.hoverColorGray600:hover{ color: var(--gray600); }
.bgColorGray600{ background-color: var(--gray600); }
.hoverBgColorGray600:hover{ background-color: var(--gray600); }
.borderGray600{ border-color: var(--gray600); }
.hoverBorderGray600:hover{ border-color: var(--gray600); }

/* COLOR Gray700 */
.colorGray700{ color: var(--gray700); }
.hoverColorGray700:hover{ color: var(--gray700); }
.bgColorGray700{ background-color: var(--gray700); }
.hoverBgColorGray700:hover{ background-color: var(--gray700); }
.borderGray700{ border-color: var(--gray700); }
.hoverBorderGray700:hover{ border-color: var(--gray700); }

/* COLOR Gray800 */
.colorGray800{ color: var(--gray800); }
.hoverColorGray800:hover{ color: var(--gray800); }
.bgColorGray800{ background-color: var(--gray800); }
.hoverBgColorGray800:hover{ background-color: var(--gray800); }
.borderGray800{ border-color: var(--gray800); }
.hoverBorderGray800:hover{ border-color: var(--gray800); }

/* COLOR Gray900 */
.colorGray900{ color: var(--gray900); }
.hoverColorGray900:hover{ color: var(--gray900); }
.bgColorGray900{ background-color: var(--gray900); }
.hoverBgColorGray900:hover{ background-color: var(--gray900); }
.borderGray900{ border-color: var(--gray900); }
.hoverBorderGray900:hover{ border-color: var(--gray900); }

/* COLOR LightBlue */
.colorLightBlue{ color: var(--lightblue); }
.hoverColorLightBlue:hover{ color: var(--lightblue); }
.bgColorLightBlue{ background-color: var(--lightblue); }
.hoverBgColorLightBlue:hover{ background-color: var(--lightblue); }
.borderLightBlue{ border-color: var(--lightblue); }
.hoverBorderLightBlue:hover{ border-color: var(--lightblue); }

/* COLOR White */
.colorWhite{ color: var(--white); }
.hoverColorWhite:hover{ color: var(--white); }
.bgColorWhite{ background-color: var(--white); }
.hoverBgColorWhite:hover{ background-color: var(--white); }
.borderWhite{ border-color: var(--white); }
.hoverBorderWhite:hover{ border-color: var(--white); }

/* COLOR Black */
.colorBlack{ color: var(--black); }
.hoverColorBlack:hover{ color: var(--black); }
.bgColorBlack{ background-color: var(--black); }
.hoverBgColorBlack:hover{ background-color: var(--black); }
.borderBlack{ border-color: var(--black); }
.hoverBorderBlack:hover{ border-color: var(--black); }

/* COLOR Red500 */
.colorRed500{ color: var(--red500); }
.hoverColorRed500:hover{ color: var(--red500); }
.bgColorRed500{ background-color: var(--red500); }
.hoverBgColorRed500:hover{ background-color: var(--red500); }
.borderRed500{ border-color: var(--red500); }
.hoverBorderRed500:hover{ border-color: var(--red500); }

/* COLOR Opacity8 */
.colorOpacity8{ color: var(--opacity8); }
.hoverColorOpacity8:hover{ color: var(--opacity8); }
.bgColorOpacity8{ background-color: var(--opacity8); }
.hoverBgColorOpacity8:hover{ background-color: var(--opacity8); }
.borderOpacity8{ border-color: var(--opacity8); }
.hoverBorderOpacity8:hover{ border-color: var(--opacity8); }

/* COLOR Opacity20 */
.colorOpacity20{ color: var(--opacity20); }
.hoverColorOpacity20:hover{ color: var(--opacity20); }
.bgColorOpacity20{ background-color: var(--opacity20); }
.hoverBgColorOpacity20:hover{ background-color: var(--opacity20); }
.borderOpacity20{ border-color: var(--opacity20); }
.hoverBorderOpacity20:hover{ border-color: var(--opacity20); }

