:root{
--white: #FFFFFF;
--black: #000000;
--blue500: #0000eb;
--blue400: #5c5cfa;
--blue300: #9e9eff;
--blue200: #ccccff;
--blue100: #e6e6ff;
--blue50: #f2f5fa;
--blue20: #f8f9fc;
--blue10: #f8f9fb;
--neutrals50: #f0f0f2;
--neutrals100: #e1e2e6;
--neutrals200: #c4c5cc;
--neutrals300: #a8aab3;
--neutrals400: #8d8f99;
--neutrals500: #6c7080;
--neutrals600: #474b59;
--neutrals700: #2c2f3c;
--neutrals800: #262633;
--neutrals850: #111127;
--neutrals900: #040417;
--green700: #027a48;
--green200: #6ce9a6;
--red700: #b42318;
--red200: #fda298;
--yellow200: #fec848;
--magenta: #ff2e74;
--green: #00c575;
--lightblue: #00aaed;
--orange: #ff6700;
--capriblue: #1771a2;
--lilla: #9855FF;
} .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); }
.customIcon .background-hexagon.background-color-white .hexagon,
.customIcon .background-hexagon.background-color-white .hexagon path{
fill: var(--white);
}
.customIcon.color-white .icon,
.customIcon.color-white .icon path{
stroke: var(--white);
} .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); }
.customIcon .background-hexagon.background-color-black .hexagon,
.customIcon .background-hexagon.background-color-black .hexagon path{
fill: var(--black);
}
.customIcon.color-black .icon,
.customIcon.color-black .icon path{
stroke: var(--black);
} .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); }
.customIcon .background-hexagon.background-color-blue500 .hexagon,
.customIcon .background-hexagon.background-color-blue500 .hexagon path{
fill: var(--blue500);
}
.customIcon.color-blue500 .icon,
.customIcon.color-blue500 .icon path{
stroke: var(--blue500);
} .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); }
.customIcon .background-hexagon.background-color-blue400 .hexagon,
.customIcon .background-hexagon.background-color-blue400 .hexagon path{
fill: var(--blue400);
}
.customIcon.color-blue400 .icon,
.customIcon.color-blue400 .icon path{
stroke: var(--blue400);
} .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); }
.customIcon .background-hexagon.background-color-blue300 .hexagon,
.customIcon .background-hexagon.background-color-blue300 .hexagon path{
fill: var(--blue300);
}
.customIcon.color-blue300 .icon,
.customIcon.color-blue300 .icon path{
stroke: var(--blue300);
} .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); }
.customIcon .background-hexagon.background-color-blue200 .hexagon,
.customIcon .background-hexagon.background-color-blue200 .hexagon path{
fill: var(--blue200);
}
.customIcon.color-blue200 .icon,
.customIcon.color-blue200 .icon path{
stroke: var(--blue200);
} .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); }
.customIcon .background-hexagon.background-color-blue100 .hexagon,
.customIcon .background-hexagon.background-color-blue100 .hexagon path{
fill: var(--blue100);
}
.customIcon.color-blue100 .icon,
.customIcon.color-blue100 .icon path{
stroke: var(--blue100);
} .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); }
.customIcon .background-hexagon.background-color-blue50 .hexagon,
.customIcon .background-hexagon.background-color-blue50 .hexagon path{
fill: var(--blue50);
}
.customIcon.color-blue50 .icon,
.customIcon.color-blue50 .icon path{
stroke: var(--blue50);
} .colorBlue20{ color: var(--blue20); }
.hoverColorBlue20:hover{ color: var(--blue20); }
.bgColorBlue20{ background-color: var(--blue20); }
.hoverBgColorBlue20:hover{ background-color: var(--blue20); }
.borderBlue20{ border-color: var(--blue20); }
.hoverBorderBlue20:hover{ border-color: var(--blue20); }
.customIcon .background-hexagon.background-color-blue20 .hexagon,
.customIcon .background-hexagon.background-color-blue20 .hexagon path{
fill: var(--blue20);
}
.customIcon.color-blue20 .icon,
.customIcon.color-blue20 .icon path{
stroke: var(--blue20);
} .colorBlue10{ color: var(--blue10); }
.hoverColorBlue10:hover{ color: var(--blue10); }
.bgColorBlue10{ background-color: var(--blue10); }
.hoverBgColorBlue10:hover{ background-color: var(--blue10); }
.borderBlue10{ border-color: var(--blue10); }
.hoverBorderBlue10:hover{ border-color: var(--blue10); }
.customIcon .background-hexagon.background-color-blue10 .hexagon,
.customIcon .background-hexagon.background-color-blue10 .hexagon path{
fill: var(--blue10);
}
.customIcon.color-blue10 .icon,
.customIcon.color-blue10 .icon path{
stroke: var(--blue10);
} .colorNeutrals50{ color: var(--neutrals50); }
.hoverColorNeutrals50:hover{ color: var(--neutrals50); }
.bgColorNeutrals50{ background-color: var(--neutrals50); }
.hoverBgColorNeutrals50:hover{ background-color: var(--neutrals50); }
.borderNeutrals50{ border-color: var(--neutrals50); }
.hoverBorderNeutrals50:hover{ border-color: var(--neutrals50); }
.customIcon .background-hexagon.background-color-neutrals50 .hexagon,
.customIcon .background-hexagon.background-color-neutrals50 .hexagon path{
fill: var(--neutrals50);
}
.customIcon.color-neutrals50 .icon,
.customIcon.color-neutrals50 .icon path{
stroke: var(--neutrals50);
} .colorNeutrals100{ color: var(--neutrals100); }
.hoverColorNeutrals100:hover{ color: var(--neutrals100); }
.bgColorNeutrals100{ background-color: var(--neutrals100); }
.hoverBgColorNeutrals100:hover{ background-color: var(--neutrals100); }
.borderNeutrals100{ border-color: var(--neutrals100); }
.hoverBorderNeutrals100:hover{ border-color: var(--neutrals100); }
.customIcon .background-hexagon.background-color-neutrals100 .hexagon,
.customIcon .background-hexagon.background-color-neutrals100 .hexagon path{
fill: var(--neutrals100);
}
.customIcon.color-neutrals100 .icon,
.customIcon.color-neutrals100 .icon path{
stroke: var(--neutrals100);
} .colorNeutrals200{ color: var(--neutrals200); }
.hoverColorNeutrals200:hover{ color: var(--neutrals200); }
.bgColorNeutrals200{ background-color: var(--neutrals200); }
.hoverBgColorNeutrals200:hover{ background-color: var(--neutrals200); }
.borderNeutrals200{ border-color: var(--neutrals200); }
.hoverBorderNeutrals200:hover{ border-color: var(--neutrals200); }
.customIcon .background-hexagon.background-color-neutrals200 .hexagon,
.customIcon .background-hexagon.background-color-neutrals200 .hexagon path{
fill: var(--neutrals200);
}
.customIcon.color-neutrals200 .icon,
.customIcon.color-neutrals200 .icon path{
stroke: var(--neutrals200);
} .colorNeutrals300{ color: var(--neutrals300); }
.hoverColorNeutrals300:hover{ color: var(--neutrals300); }
.bgColorNeutrals300{ background-color: var(--neutrals300); }
.hoverBgColorNeutrals300:hover{ background-color: var(--neutrals300); }
.borderNeutrals300{ border-color: var(--neutrals300); }
.hoverBorderNeutrals300:hover{ border-color: var(--neutrals300); }
.customIcon .background-hexagon.background-color-neutrals300 .hexagon,
.customIcon .background-hexagon.background-color-neutrals300 .hexagon path{
fill: var(--neutrals300);
}
.customIcon.color-neutrals300 .icon,
.customIcon.color-neutrals300 .icon path{
stroke: var(--neutrals300);
} .colorNeutrals400{ color: var(--neutrals400); }
.hoverColorNeutrals400:hover{ color: var(--neutrals400); }
.bgColorNeutrals400{ background-color: var(--neutrals400); }
.hoverBgColorNeutrals400:hover{ background-color: var(--neutrals400); }
.borderNeutrals400{ border-color: var(--neutrals400); }
.hoverBorderNeutrals400:hover{ border-color: var(--neutrals400); }
.customIcon .background-hexagon.background-color-neutrals400 .hexagon,
.customIcon .background-hexagon.background-color-neutrals400 .hexagon path{
fill: var(--neutrals400);
}
.customIcon.color-neutrals400 .icon,
.customIcon.color-neutrals400 .icon path{
stroke: var(--neutrals400);
} .colorNeutrals500{ color: var(--neutrals500); }
.hoverColorNeutrals500:hover{ color: var(--neutrals500); }
.bgColorNeutrals500{ background-color: var(--neutrals500); }
.hoverBgColorNeutrals500:hover{ background-color: var(--neutrals500); }
.borderNeutrals500{ border-color: var(--neutrals500); }
.hoverBorderNeutrals500:hover{ border-color: var(--neutrals500); }
.customIcon .background-hexagon.background-color-neutrals500 .hexagon,
.customIcon .background-hexagon.background-color-neutrals500 .hexagon path{
fill: var(--neutrals500);
}
.customIcon.color-neutrals500 .icon,
.customIcon.color-neutrals500 .icon path{
stroke: var(--neutrals500);
} .colorNeutrals600{ color: var(--neutrals600); }
.hoverColorNeutrals600:hover{ color: var(--neutrals600); }
.bgColorNeutrals600{ background-color: var(--neutrals600); }
.hoverBgColorNeutrals600:hover{ background-color: var(--neutrals600); }
.borderNeutrals600{ border-color: var(--neutrals600); }
.hoverBorderNeutrals600:hover{ border-color: var(--neutrals600); }
.customIcon .background-hexagon.background-color-neutrals600 .hexagon,
.customIcon .background-hexagon.background-color-neutrals600 .hexagon path{
fill: var(--neutrals600);
}
.customIcon.color-neutrals600 .icon,
.customIcon.color-neutrals600 .icon path{
stroke: var(--neutrals600);
} .colorNeutrals700{ color: var(--neutrals700); }
.hoverColorNeutrals700:hover{ color: var(--neutrals700); }
.bgColorNeutrals700{ background-color: var(--neutrals700); }
.hoverBgColorNeutrals700:hover{ background-color: var(--neutrals700); }
.borderNeutrals700{ border-color: var(--neutrals700); }
.hoverBorderNeutrals700:hover{ border-color: var(--neutrals700); }
.customIcon .background-hexagon.background-color-neutrals700 .hexagon,
.customIcon .background-hexagon.background-color-neutrals700 .hexagon path{
fill: var(--neutrals700);
}
.customIcon.color-neutrals700 .icon,
.customIcon.color-neutrals700 .icon path{
stroke: var(--neutrals700);
} .colorNeutrals800{ color: var(--neutrals800); }
.hoverColorNeutrals800:hover{ color: var(--neutrals800); }
.bgColorNeutrals800{ background-color: var(--neutrals800); }
.hoverBgColorNeutrals800:hover{ background-color: var(--neutrals800); }
.borderNeutrals800{ border-color: var(--neutrals800); }
.hoverBorderNeutrals800:hover{ border-color: var(--neutrals800); }
.customIcon .background-hexagon.background-color-neutrals800 .hexagon,
.customIcon .background-hexagon.background-color-neutrals800 .hexagon path{
fill: var(--neutrals800);
}
.customIcon.color-neutrals800 .icon,
.customIcon.color-neutrals800 .icon path{
stroke: var(--neutrals800);
} .colorNeutrals850{ color: var(--neutrals850); }
.hoverColorNeutrals850:hover{ color: var(--neutrals850); }
.bgColorNeutrals850{ background-color: var(--neutrals850); }
.hoverBgColorNeutrals850:hover{ background-color: var(--neutrals850); }
.borderNeutrals850{ border-color: var(--neutrals850); }
.hoverBorderNeutrals850:hover{ border-color: var(--neutrals850); }
.customIcon .background-hexagon.background-color-neutrals850 .hexagon,
.customIcon .background-hexagon.background-color-neutrals850 .hexagon path{
fill: var(--neutrals850);
}
.customIcon.color-neutrals850 .icon,
.customIcon.color-neutrals850 .icon path{
stroke: var(--neutrals850);
} .colorNeutrals900{ color: var(--neutrals900); }
.hoverColorNeutrals900:hover{ color: var(--neutrals900); }
.bgColorNeutrals900{ background-color: var(--neutrals900); }
.hoverBgColorNeutrals900:hover{ background-color: var(--neutrals900); }
.borderNeutrals900{ border-color: var(--neutrals900); }
.hoverBorderNeutrals900:hover{ border-color: var(--neutrals900); }
.customIcon .background-hexagon.background-color-neutrals900 .hexagon,
.customIcon .background-hexagon.background-color-neutrals900 .hexagon path{
fill: var(--neutrals900);
}
.customIcon.color-neutrals900 .icon,
.customIcon.color-neutrals900 .icon path{
stroke: var(--neutrals900);
} .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); }
.customIcon .background-hexagon.background-color-green700 .hexagon,
.customIcon .background-hexagon.background-color-green700 .hexagon path{
fill: var(--green700);
}
.customIcon.color-green700 .icon,
.customIcon.color-green700 .icon path{
stroke: var(--green700);
} .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); }
.customIcon .background-hexagon.background-color-green200 .hexagon,
.customIcon .background-hexagon.background-color-green200 .hexagon path{
fill: var(--green200);
}
.customIcon.color-green200 .icon,
.customIcon.color-green200 .icon path{
stroke: var(--green200);
} .colorRed700{ color: var(--red700); }
.hoverColorRed700:hover{ color: var(--red700); }
.bgColorRed700{ background-color: var(--red700); }
.hoverBgColorRed700:hover{ background-color: var(--red700); }
.borderRed700{ border-color: var(--red700); }
.hoverBorderRed700:hover{ border-color: var(--red700); }
.customIcon .background-hexagon.background-color-red700 .hexagon,
.customIcon .background-hexagon.background-color-red700 .hexagon path{
fill: var(--red700);
}
.customIcon.color-red700 .icon,
.customIcon.color-red700 .icon path{
stroke: var(--red700);
} .colorRed200{ color: var(--red200); }
.hoverColorRed200:hover{ color: var(--red200); }
.bgColorRed200{ background-color: var(--red200); }
.hoverBgColorRed200:hover{ background-color: var(--red200); }
.borderRed200{ border-color: var(--red200); }
.hoverBorderRed200:hover{ border-color: var(--red200); }
.customIcon .background-hexagon.background-color-red200 .hexagon,
.customIcon .background-hexagon.background-color-red200 .hexagon path{
fill: var(--red200);
}
.customIcon.color-red200 .icon,
.customIcon.color-red200 .icon path{
stroke: var(--red200);
} .colorYellow200{ color: var(--yellow200); }
.hoverColorYellow200:hover{ color: var(--yellow200); }
.bgColorYellow200{ background-color: var(--yellow200); }
.hoverBgColorYellow200:hover{ background-color: var(--yellow200); }
.borderYellow200{ border-color: var(--yellow200); }
.hoverBorderYellow200:hover{ border-color: var(--yellow200); }
.customIcon .background-hexagon.background-color-yellow200 .hexagon,
.customIcon .background-hexagon.background-color-yellow200 .hexagon path{
fill: var(--yellow200);
}
.customIcon.color-yellow200 .icon,
.customIcon.color-yellow200 .icon path{
stroke: var(--yellow200);
} .colorMagenta{ color: var(--magenta); }
.hoverColorMagenta:hover{ color: var(--magenta); }
.bgColorMagenta{ background-color: var(--magenta); }
.hoverBgColorMagenta:hover{ background-color: var(--magenta); }
.borderMagenta{ border-color: var(--magenta); }
.hoverBorderMagenta:hover{ border-color: var(--magenta); }
.customIcon .background-hexagon.background-color-magenta .hexagon,
.customIcon .background-hexagon.background-color-magenta .hexagon path{
fill: var(--magenta);
}
.customIcon.color-magenta .icon,
.customIcon.color-magenta .icon path{
stroke: var(--magenta);
} .colorGreen{ color: var(--green); }
.hoverColorGreen:hover{ color: var(--green); }
.bgColorGreen{ background-color: var(--green); }
.hoverBgColorGreen:hover{ background-color: var(--green); }
.borderGreen{ border-color: var(--green); }
.hoverBorderGreen:hover{ border-color: var(--green); }
.customIcon .background-hexagon.background-color-green .hexagon,
.customIcon .background-hexagon.background-color-green .hexagon path{
fill: var(--green);
}
.customIcon.color-green .icon,
.customIcon.color-green .icon path{
stroke: var(--green);
} .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); }
.customIcon .background-hexagon.background-color-lightblue .hexagon,
.customIcon .background-hexagon.background-color-lightblue .hexagon path{
fill: var(--lightblue);
}
.customIcon.color-lightblue .icon,
.customIcon.color-lightblue .icon path{
stroke: var(--lightblue);
} .colorOrange{ color: var(--orange); }
.hoverColorOrange:hover{ color: var(--orange); }
.bgColorOrange{ background-color: var(--orange); }
.hoverBgColorOrange:hover{ background-color: var(--orange); }
.borderOrange{ border-color: var(--orange); }
.hoverBorderOrange:hover{ border-color: var(--orange); }
.customIcon .background-hexagon.background-color-orange .hexagon,
.customIcon .background-hexagon.background-color-orange .hexagon path{
fill: var(--orange);
}
.customIcon.color-orange .icon,
.customIcon.color-orange .icon path{
stroke: var(--orange);
} .colorCapriBlue{ color: var(--capriblue); }
.hoverColorCapriBlue:hover{ color: var(--capriblue); }
.bgColorCapriBlue{ background-color: var(--capriblue); }
.hoverBgColorCapriBlue:hover{ background-color: var(--capriblue); }
.borderCapriBlue{ border-color: var(--capriblue); }
.hoverBorderCapriBlue:hover{ border-color: var(--capriblue); }
.customIcon .background-hexagon.background-color-capriblue .hexagon,
.customIcon .background-hexagon.background-color-capriblue .hexagon path{
fill: var(--capriblue);
}
.customIcon.color-capriblue .icon,
.customIcon.color-capriblue .icon path{
stroke: var(--capriblue);
} .colorLilla{ color: var(--lilla); }
.hoverColorLilla:hover{ color: var(--lilla); }
.bgColorLilla{ background-color: var(--lilla); }
.hoverBgColorLilla:hover{ background-color: var(--lilla); }
.borderLilla{ border-color: var(--lilla); }
.hoverBorderLilla:hover{ border-color: var(--lilla); }
.customIcon .background-hexagon.background-color-lilla .hexagon,
.customIcon .background-hexagon.background-color-lilla .hexagon path{
fill: var(--lilla);
}
.customIcon.color-lilla .icon,
.customIcon.color-lilla .icon path{
stroke: var(--lilla);
}
.simpleBtnBlue500{
background-color: var(--blue500) !important;
border-color: var(--blue500) !important;
color: var(--white) !important;
}
.simpleHoverBtnBlue500:hover{
background-color: var(--black) !important;
border-color: var(--black) !important;
color: var(--white) !important;
}