:root {
  --colorGinPrimary: #0550e6;
  --colorGinPrimaryHover: #0444c4;
  --colorGinPrimaryActive: #043cad;
  --colorGinPrimaryLight: rgba(5, 80, 230, 0.15);
  --colorGinPrimaryLightHover: rgba(5, 80, 230, 0.2);
  --colorGinPrimaryLightActive: rgba(5, 80, 230, 0.3);
  --colorGinPrimaryLightShadow: rgba(5, 80, 230, 0.45);
  --colorGinItemHover: rgba(5, 80, 230, 0.1);
  --colorGinButtonShadow: #00000033;
  --colorGinButtonText: #fff;
  --colorGinFocus: #059fad;
  --colorGinDisabled: #bbb;
  --colorGinWarning: #d8b234;
  --colorGinWarningLight: #efcf64;
  --colorGinWarningBackground: #605328;
  --colorGinWarningLightBackground: rgba(226, 151, 0, .08);
  --colorGinDanger: #cc3d3d;
  --colorGinDangerLightest: #fdd9d9;
  --colorGinDangerLight: #f39b9d;
  --colorGinDangerBackground: #583333;
  --colorGinDangerLightBackground: rgba(222, 117, 96, .1);
  --colorGinGreen: #058260;
  --colorGinGreenLight: #32cea4;
  --colorGinGreenLightest: #adebdb;
  --colorGinGreenBackground: #145242;
  --colorGinGreenLightBackground: rgba(72, 171, 123, .1);
  --colorGinInfo: #082538;
  --colorGinInfoLight: #589ac5;
  --colorGinInfoBackground: #122b3c;
  --colorGinAppBackground: #fbfbff;
  --colorGinLayerBackground: #fff;
  --colorGinLayer2Background: #edeff5;
  --colorGinLayer3Background: #fff;
  --colorGinLayer4Background: #e2e5ec;
  --colorGinContextual: var(--colorGinText);
  --colorGinContextualText: #eee;
  --colorGinBorder: #d4d4d8;
  --colorGinLayerBorder: rgba(0, 0, 0, .08);
  --colorGinLayer2Border: #d4d4d8;
  --colorGinTableBorder: rgba(0, 0, 0, .15);
  --colorGinTabsBorder: rgba(0, 0, 0, .2);
  --colorGinFormElementBorder: #8E929C;
  --colorGinTitle:#222330;
  --colorGinText: #222330;
  --colorGinTextLight: #545560;
  --colorGinTableHeader: #e6e8ef;
  --colorGinSwitch: #26a769;
  --colorGinSwitchShadow: rgba(38, 167, 105, .3);
  --colorGinIcons: #414247;
  --colorGinStickyBg: #c8cdd8;
}

.gin--dark-mode {
  --colorGinPrimary: #90aeef;
  --colorGinPrimaryHover: #9bb6f1;
  --colorGinPrimaryActive: #a1baf1;
  --colorGinPrimaryLight: rgba(144, 174, 239, 0.15);
  --colorGinPrimaryLightHover: rgba(144, 174, 239, 0.2);
  --colorGinPrimaryLightActive: rgba(144, 174, 239, 0.3);
  --colorGinPrimaryLightShadow: rgba(144, 174, 239, 0.45);
  --colorGinItemHover: rgba(144, 174, 239, 0.1);
  --colorGinButtonShadow: rgba(#111, .9);
  --colorGinButtonText: #111;
  --colorGinFocus: var(--colorGinPrimary);
  --colorGinDisabled: #555;
  --colorGinWarning: #dec15f;
  --colorGinWarningLightBackground: rgba(222, 193, 95, .1);
  --colorGinDanger: #ce6060;
  --colorGinDangerLightest: #483439;
  --colorGinGreen: #32cea4;
  --colorGinInfo: #559bca;
  --colorGinAppBackground: #1B1B1D;
  --colorGinLayerBackground: #2A2A2D;
  --colorGinLayer2Background: #3B3B3F;
  --colorGinLayer3Background: #47474c;
  --colorGinLayer4Background: #19191b;
  --colorGinContextual: var(--colorGinLayer3Background);
  --colorGinBorder: #43454a;
  --colorGinLayerBorder: rgba(0, 0, 0, .05);
  --colorGinLayer2Border: #76777B;
  --colorGinTableBorder: #43454a;
  --colorGinTabsBorder: rgba(255, 255, 255, .12);
  --colorGinFormElementBorder: var(--colorGinLayer2Border);
  --colorGinTitle: #fff;
  --colorGinText: #ccc;
  --colorGinTextLight: #9e9fa0;
  --colorGinTableHeader: var(--colorGinAppBackground);
  --colorGinSwitch: var(--colorGinPrimary);
  --colorGinSwitchShadow: var(--colorGinPrimaryLight);
  --colorGinIcons: #888;
  --colorGinStickyBg: var(--colorGinLayer4Background);
}

[data-gin-accent=light_blue] {
  --colorGinPrimary: #3275e0;
  --colorGinPrimaryHover: #2b63be;
  --colorGinPrimaryActive: #2658a8;
  --colorGinPrimaryLight: rgba(50, 117, 224, 0.15);
  --colorGinPrimaryLightHover: rgba(50, 117, 224, 0.2);
  --colorGinPrimaryLightActive: rgba(50, 117, 224, 0.3);
  --colorGinPrimaryLightShadow: rgba(50, 117, 224, 0.45);
  --colorGinItemHover: rgba(50, 117, 224, 0.1);
}

[data-gin-accent=dark_purple] {
  --colorGinPrimary: #4300bf;
  --colorGinPrimaryHover: #3900a2;
  --colorGinPrimaryActive: #32008f;
  --colorGinPrimaryLight: rgba(67, 0, 191, 0.15);
  --colorGinPrimaryLightHover: rgba(67, 0, 191, 0.2);
  --colorGinPrimaryLightActive: rgba(67, 0, 191, 0.25);
  --colorGinPrimaryLightShadow: rgba(67, 0, 191, 0.4);
  --colorGinItemHover: rgba(67, 0, 191, 0.08);
}

[data-gin-accent=purple] {
  --colorGinPrimary: #5b00ff;
  --colorGinPrimaryHover: #4d00d9;
  --colorGinPrimaryActive: #4400bf;
  --colorGinPrimaryLight: rgba(91, 0, 255, 0.15);
  --colorGinPrimaryLightHover: rgba(91, 0, 255, 0.2);
  --colorGinPrimaryLightActive: rgba(91, 0, 255, 0.25);
  --colorGinPrimaryLightShadow: rgba(91, 0, 255, 0.4);
  --colorGinItemHover: rgba(91, 0, 255, 0.08);
}

[data-gin-accent=teal] {
  --colorGinPrimary: #10857f;
  --colorGinPrimaryHover: #0e716c;
  --colorGinPrimaryActive: #0c645f;
  --colorGinPrimaryLight: rgba(16, 133, 127, 0.15);
  --colorGinPrimaryLightHover: rgba(16, 133, 127, 0.2);
  --colorGinPrimaryLightActive: rgba(16, 133, 127, 0.3);
  --colorGinPrimaryLightShadow: rgba(16, 133, 127, 0.45);
  --colorGinItemHover: rgba(16, 133, 127, 0.1);
}

[data-gin-accent=green] {
  --colorGinPrimary: #00875f;
  --colorGinPrimaryHover: #007351;
  --colorGinPrimaryActive: #006547;
  --colorGinPrimaryLight: rgba(0, 135, 95, 0.15);
  --colorGinPrimaryLightHover: rgba(0, 135, 95, 0.2);
  --colorGinPrimaryLightActive: rgba(0, 135, 95, 0.3);
  --colorGinPrimaryLightShadow: rgba(0, 135, 95, 0.45);
  --colorGinItemHover: rgba(0, 135, 95, 0.1);
}

[data-gin-accent=red] {
  --colorGinPrimary: #d8002f;
  --colorGinPrimaryHover: #b80028;
  --colorGinPrimaryActive: #a20023;
  --colorGinPrimaryLight: rgba(216, 0, 47, 0.15);
  --colorGinPrimaryLightHover: rgba(216, 0, 47, 0.2);
  --colorGinPrimaryLightActive: rgba(216, 0, 47, 0.3);
  --colorGinPrimaryLightShadow: rgba(216, 0, 47, 0.45);
  --colorGinItemHover: rgba(216, 0, 47, 0.1);
}

[data-gin-accent=orange] {
  --colorGinPrimary: #ef5c20;
  --colorGinPrimaryHover: #cb4e1b;
  --colorGinPrimaryActive: #b34518;
  --colorGinPrimaryLight: rgba(239, 92, 32, 0.15);
  --colorGinPrimaryLightHover: rgba(239, 92, 32, 0.2);
  --colorGinPrimaryLightActive: rgba(239, 92, 32, 0.3);
  --colorGinPrimaryLightShadow: rgba(239, 92, 32, 0.45);
  --colorGinItemHover: rgba(239, 92, 32, 0.1);
}

[data-gin-accent=yellow] {
  --colorGinPrimary: #c58900;
  --colorGinPrimaryHover: #a77400;
  --colorGinPrimaryActive: #946700;
  --colorGinPrimaryLight: rgba(197, 137, 0, 0.15);
  --colorGinPrimaryLightHover: rgba(197, 137, 0, 0.2);
  --colorGinPrimaryLightActive: rgba(197, 137, 0, 0.3);
  --colorGinPrimaryLightShadow: rgba(197, 137, 0, 0.45);
  --colorGinItemHover: rgba(197, 137, 0, 0.1);
}

[data-gin-accent=pink] {
  --colorGinPrimary: #e23177;
  --colorGinPrimaryHover: #c02a65;
  --colorGinPrimaryActive: #aa2559;
  --colorGinPrimaryLight: rgba(226, 49, 119, 0.15);
  --colorGinPrimaryLightHover: rgba(226, 49, 119, 0.2);
  --colorGinPrimaryLightActive: rgba(226, 49, 119, 0.3);
  --colorGinPrimaryLightShadow: rgba(226, 49, 119, 0.45);
  --colorGinItemHover: rgba(226, 49, 119, 0.1);
}

.gin--dark-mode[data-gin-accent=claro_blue],
.gin--dark-mode [data-gin-accent=claro_blue] {
  --colorGinPrimary: #7391d8;
  --colorGinPrimaryHover: #819cdc;
  --colorGinPrimaryActive: #88a2de;
  --colorGinPrimaryLight: rgba(115, 145, 216, 0.1);
  --colorGinPrimaryLightHover: rgba(115, 145, 216, 0.2);
  --colorGinPrimaryLightActive: rgba(115, 145, 216, 0.3);
  --colorGinItemHover: rgba(115, 145, 216, 0.1);
}

.gin--dark-mode[data-gin-accent=light_blue],
.gin--dark-mode [data-gin-accent=light_blue] {
  --colorGinPrimary: #82bfe8;
  --colorGinPrimaryHover: #8fc5ea;
  --colorGinPrimaryActive: #95c9eb;
  --colorGinPrimaryLight: rgba(130, 191, 232, 0.1);
  --colorGinPrimaryLightHover: rgba(130, 191, 232, 0.2);
  --colorGinPrimaryLightActive: rgba(130, 191, 232, 0.3);
  --colorGinItemHover: rgba(130, 191, 232, 0.1);
}

.gin--dark-mode[data-gin-accent=dark_purple],
.gin--dark-mode [data-gin-accent=dark_purple] {
  --colorGinPrimary: #ad8fe8;
  --colorGinPrimaryHover: #b59aea;
  --colorGinPrimaryActive: #b9a0eb;
  --colorGinPrimaryLight: rgba(173, 143, 232, 0.1);
  --colorGinPrimaryLightHover: rgba(173, 143, 232, 0.2);
  --colorGinPrimaryLightActive: rgba(173, 143, 232, 0.3);
  --colorGinItemHover: rgba(173, 143, 232, 0.1);
}

.gin--dark-mode[data-gin-accent=purple],
.gin--dark-mode [data-gin-accent=purple] {
  --colorGinPrimary: #dba5ef;
  --colorGinPrimaryHover: #dfaef1;
  --colorGinPrimaryActive: #e0b3f1;
  --colorGinPrimaryLight: rgba(219, 165, 239, 0.1);
  --colorGinPrimaryLightHover: rgba(219, 165, 239, 0.2);
  --colorGinPrimaryLightActive: rgba(219, 165, 239, 0.3);
  --colorGinItemHover: rgba(219, 165, 239, 0.1);
}

.gin--dark-mode[data-gin-accent=teal],
.gin--dark-mode [data-gin-accent=teal] {
  --colorGinPrimary: #00ead0;
  --colorGinPrimaryHover: #1aecd5;
  --colorGinPrimaryActive: #26edd7;
  --colorGinPrimaryLight: rgba(0, 234, 208, 0.1);
  --colorGinPrimaryLightHover: rgba(0, 234, 208, 0.2);
  --colorGinPrimaryLightActive: rgba(0, 234, 208, 0.3);
  --colorGinItemHover: rgba(0, 234, 208, 0.1);
}

.gin--dark-mode[data-gin-accent=green],
.gin--dark-mode [data-gin-accent=green] {
  --colorGinPrimary: #6bd4a1;
  --colorGinPrimaryHover: #7ad8aa;
  --colorGinPrimaryActive: #81daaf;
  --colorGinPrimaryLight: rgba(107, 212, 161, 0.1);
  --colorGinPrimaryLightHover: rgba(107, 212, 161, 0.2);
  --colorGinPrimaryLightActive: rgba(107, 212, 161, 0.3);
  --colorGinItemHover: rgba(107, 212, 161, 0.1);
}

.gin--dark-mode[data-gin-accent=red],
.gin--dark-mode [data-gin-accent=red] {
  --colorGinPrimary: #e67373;
  --colorGinPrimaryHover: #e98181;
  --colorGinPrimaryActive: #ea8888;
  --colorGinPrimaryLight: rgba(230, 115, 115, 0.1);
  --colorGinPrimaryLightHover: rgba(230, 115, 115, 0.2);
  --colorGinPrimaryLightActive: rgba(230, 115, 115, 0.3);
  --colorGinItemHover: rgba(230, 115, 115, 0.1);
}

.gin--dark-mode[data-gin-accent=orange],
.gin--dark-mode [data-gin-accent=orange] {
  --colorGinPrimary: #f79576;
  --colorGinPrimaryHover: #f8a084;
  --colorGinPrimaryActive: #f8a58b;
  --colorGinPrimaryLight: rgba(247, 149, 118, 0.1);
  --colorGinPrimaryLightHover: rgba(247, 149, 118, 0.2);
  --colorGinPrimaryLightActive: rgba(247, 149, 118, 0.3);
  --colorGinItemHover: rgba(247, 149, 118, 0.1);
}

.gin--dark-mode[data-gin-accent=yellow],
.gin--dark-mode [data-gin-accent=yellow] {
  --colorGinPrimary: #f1c970;
  --colorGinPrimaryHover: #f2ce7e;
  --colorGinPrimaryActive: #f3d185;
  --colorGinPrimaryLight: rgba(241, 201, 112, 0.1);
  --colorGinPrimaryLightHover: rgba(241, 201, 112, 0.2);
  --colorGinPrimaryLightActive: rgba(241, 201, 112, 0.3);
  --colorGinItemHover: rgba(241, 201, 112, 0.1);
}

.gin--dark-mode[data-gin-accent=pink],
.gin--dark-mode [data-gin-accent=pink] {
  --colorGinPrimary: #e79da3;
  --colorGinPrimaryHover: #e9a7ac;
  --colorGinPrimaryActive: #ebacb1;
  --colorGinPrimaryLight: rgba(231, 157, 163, 0.1);
  --colorGinPrimaryLightHover: rgba(231, 157, 163, 0.2);
  --colorGinPrimaryLightActive: rgba(231, 157, 163, 0.3);
  --colorGinItemHover: rgba(231, 157, 163, 0.1);
}

.gin--high-contrast-mode {
  --colorGinAppBackground: #d9dbde;
  --colorGinText: rgba(0, 0, 0, 0.8);
  --colorGinTextLight: rgba(0, 0, 0, 0.8);
  --colorGinIcons: rgba(0, 0, 0, 0.8);
  --colorGinFocus: rgba(0, 0, 0, 0.8);
  --colorGinBorder: rgba(0, 0, 0, 0.8);
  --colorGinLayerBorder: rgba(0, 0, 0, .6);
  --colorGinLayer2Border: rgba(0, 0, 0, 0.8);
  --colorGinTableBorder: rgba(0, 0, 0, 0.8);
  --colorGinTabsBorder: rgba(0, 0, 0, 0.8);
  --colorGinFormElementBorder: rgba(0, 0, 0, 0.8);
}
.gin--high-contrast-mode.gin--dark-mode {
  --colorGinAppBackground: #000;
  --colorGinText: rgba(255, 255, 255, 0.8);
  --colorGinTextLight: rgba(255, 255, 255, 0.8);
  --colorGinIcons: rgba(255, 255, 255, 0.8);
  --colorGinFocus: rgba(255, 255, 255, 0.8);
  --colorGinBorder: rgba(255, 255, 255, 0.8);
  --colorGinLayerBorder: rgba(255, 255, 255, .6);
  --colorGinLayer2Border: rgba(255, 255, 255, 0.8);
  --colorGinTableBorder: rgba(255, 255, 255, 0.8);
  --colorGinTabsBorder: rgba(255, 255, 255, 0.8);
  --colorGinFormElementBorder: rgba(255, 255, 255, 0.8);
}