@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");
:root {
  --ui-animaton-speed:0.2s;
}

.gxg-title-01 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
}

.gxg-title-01--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-on-primary);
}

.gxg-title-02 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
}

.gxg-title-02--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
  color: var(--color-on-primary);
}

.gxg-title-03 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
}

.gxg-title-03--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
  color: var(--color-on-primary);
}

.gxg-title-04 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
}

.gxg-title-04--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-on-primary);
}

.gxg-title-05 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.556em;
}

.gxg-title-05--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.556em;
  color: var(--color-on-primary);
}

.gxg-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
}

.gxg-text--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-on-primary);
}

.gxg-text--gray {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--gray-05);
}

.gxg-quote {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  font-style: italic;
}

.gxg-quote--negative {
  color: var(--color-on-primary);
}

.gxg-link {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}

.gxg-link:hover {
  color: var(--color-primary-hover);
}

.gxg-link:active {
  color: var(--color-primary-active);
}

.gxg-link-gray {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  color: var(--gray-04);
}

.gxg-link-gray:hover {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  color: var(--gray-04);
  color: var(--gray-06);
}

.gxg-alert-error {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-error-dark);
  display: inline-block;
}

.gxg-alert-warning {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-warning-dark);
  display: inline-block;
}

.gxg-alert-success {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-success-dark);
  display: inline-block;
}

.gxg-tab--disabled {
  color: var(--color-primary-disabled);
  pointer-events: none;
}

.gxg-tab--disabled[disabled] {
  color: var(--color-primary-disabled);
  pointer-events: none;
}

.gxg-label {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm) !important;
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-primary-enabled);
  text-align: center;
  line-height: 1.455em;
}

.gxg-label:hover {
  color: var(--color-primary-hover);
}

.gxg-label:focus {
  color: var(--color-primary-active);
}

.gxg-label:active {
  color: var(--color-primary-active);
}

.gxg-label[disabled] {
  color: var(--color-primary-disabled);
}

.gxg-label--negative {
  color: var(--color-on-primary);
}

.gxg-label--negative[disabled] {
  color: var(--color-on-disabled);
}

.gxg-button-styles {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm) !important;
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-primary-enabled);
  text-align: center;
  line-height: 1.455em;
}

.gxg-scrollbar {
  cursor: initial;
}

.gxg-scrollbar::-webkit-scrollbar {
  width: var(--gxg-scrollbar-width, 6px);
  height: var(--gxg-scrollbar-width, 6px);
}

.gxg-scrollbar::-webkit-scrollbar-track {
  background-color: var(--gxg-scrollbar-track-background, --gray-02);
  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
}

.gxg-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--gxg-scrollbar-track-thumb-background, --gray-05);
  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
  border: var(--gxg-scrollbar-track-thumb-border);
  background-clip: padding-box;
}

.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
}

:root {
  --border-width-sm:1px;
  --border-width-md:2px;
  --border-width-lg:4px;
  --border-style-regular:solid;
  --border-radius-xs:1px;
  --border-radius-sm:2px;
  --border-radius-md:3px;
  --border-radius-lg:8px;
  --box-shadow-values:inset 0px 0px 0px 2px;
}

:root.mercury {
  --border-width-sm:1px;
  --border-width-md:2px;
  --border-width-lg:4px;
}

:root.mercury {
  --border-radius-xs:2px;
  --border-radius-sm:4px;
  --border-radius-md:8px;
  --border-radius-lg:12px;
  --border-radius-xl:30px;
}

:root {
  --color-primary-enabled:#0266a0;
  --color-primary-active:#005688;
  --color-primary-hover:#0077de;
  --color-primary-disabled:#828385;
  --color-primary-active--inverted:#4ba3d4;
}

:root.mercury {
  --color-primary-enabled:#2070ce;
  --color-primary-disabled:#b3b3b3;
  --color-primary-active--inverted:#005688;
}

:root.dark {
  --color-primary-enabled:#91c8e4;
  --color-primary-active:#4ba3d4;
  --color-primary-hover:#8dcbff;
  --color-primary-disabled:#828385;
  --color-primary-active--inverted:#335884;
}

:root.dark.mercury {
  --color-primary-enabled:#5ba7ff;
  --color-primary-active:#335884;
  --color-primary-hover:#437dc0;
  --color-primary-disabled:#333333;
}

:root {
  --color-secondary-enabled:#cfdee6;
  --color-secondary-enabled--hover:#ddecf4;
  --color-secondary-active:#6a8c9f;
  --color-secondary-hover:#97b0bf;
  --color-secondary-disabled:#828385;
}

:root.dark {
  --color-secondary-enabled:#5d7c8d;
  --color-secondary-enabled--hover:#6e8d9dad;
  --color-secondary-active:#3f5460;
  --color-secondary-hover:#4d6776;
  --color-secondary-disabled:#828385;
}

:root {
  --color-primary-hover-opacity-01:rgba(0, 119, 222, 0.1);
}

:root.dark {
  --color-primary-hover-opacity-01:rgba(141, 203, 255, 0.1);
}

:root {
  --color-on-primary:#fff;
  --color-on-secondary:#000;
  --color-on-background:#000;
  --color-on-alert:#000;
  --color-on-disabled:#a4a5a6;
  --color-always-black:#000;
  --color-always-white:#fff;
}

:root.mercury {
  --color-on-primary:#ffffff;
  --color-on-background:#696969;
  --color-on-alert:#ffffff;
  --color-on-disabled:#7f7f7f;
  --color-always-black:#000;
  --color-always-white:#fff;
}

:root.dark {
  --color-on-primary:#1d1e22;
  --color-on-secondary:#fff;
  --color-on-background:#fff;
  --color-on-alert:#fff;
  --color-on-disabled:#616164;
  --color-always-black:#000;
  --color-always-white:#fff;
}

:root.dark.mercury {
  --color-on-primary:#1a1a1a;
  --color-on-background:#999999;
  --color-on-alert:#333333;
  --color-on-disabled:#666666;
  --color-always-black:#000;
  --color-always-white:#fff;
}

:root {
  --color-primary:var(--color-primary-enabled);
  --color-secondary:var(--color-secondary-enabled);
}

:root.mercury {
  --color-primary:#2070ce;
}

:root.dark {
  --color-primary-rgb:var(--color-primary-enabled);
  --color-secondary:var(--color-secondary-enabled);
}

:root.dark.mercury {
  --color-primary:#5ba7ff;
}

:root {
  --color-background:#fff;
  --color-background--rgb:255, 255, 255;
  --color-shadow--rgb:0, 0, 0;
}

:root.mercury {
  --color-background:#ffffff;
}

:root.dark {
  --color-background:#1d1e22;
  --color-background--rgb:0, 0, 0;
  --color-shadow--rgb:255, 255, 255;
}

:root.dark.mercury {
  --color-background:#1a1d20;
}

:root {
  --color-error-dark:#f02031;
  --color-error-light:#ffeaee;
  --color-warning-dark:#ff8000;
  --color-warning-light:#ffe7e6;
  --color-success-dark:#02a08b;
  --color-success-light:#e1f3f1;
}

:root.mercury {
  --color-error-dark:#e35861;
  --color-error-light:#fb7c84;
  --color-warning-dark:#f9bd56;
  --color-warning-light:#ffc96b;
  --color-success-dark:#5dc599;
  --color-success-light:#64d9a8;
}

:root.dark {
  --color-error-dark:#f9464e;
  --color-error-light:#281617;
  --color-warning-dark:#ffab13;
  --color-warning-light:#292011;
  --color-success-dark:#50beae;
  --color-success-light:#172221;
}

:root.dark.mercury {
  --color-error-dark:#e35861;
  --color-error-light:#fb7c84;
  --color-warning-dark:#f9bd56;
  --color-warning-light:#ffc96b;
  --color-success-dark:#5dc599;
  --color-success-light:#64d9a8;
}

:root {
  --gray-00:#f4f4f4;
  --gray-01:#e8e8e9;
  --gray-02:#c6c6c7;
  --gray-02--rgb:198, 198, 199;
  --gray-03:#a4a5a6;
  --gray-04:#828385;
  --gray-05:#616164;
  --gray-06:#3e3f42;
  --gray-07:#28292d;
}

:root.mercury {
  --gray-00:#ffffff;
  --gray-01:#cccccc;
  --gray-02:#b3b3b3;
  --gray-02--rgb:179, 179, 179;
  --gray-03:#999999;
  --gray-04:#7f7f7f;
  --gray-05:#666666;
  --gray-06:#4d4d4d;
  --gray-07:#333333;
  --gray-08:#cccccc;
  --gray-09:#ffffff;
  --gray-10:#f8f8f8;
  --gray-11:#f1f1f1;
  --gray-12:#e4e4e4;
  --gray-13:#dedede;
}

:root.dark {
  --gray-00:#232326;
  --gray-01:#28292d;
  --gray-02:#3e3f42;
  --gray-02--rgb:62, 63, 66;
  --gray-03:#616164;
  --gray-04:#828385;
  --gray-05:#a4a5a6;
  --gray-06:#c6c6c7;
  --gray-07:#e8e8e9;
}

:root.dark.mercury {
  --gray-00:#333333;
  --gray-01:#4d4d4d;
  --gray-02:#666666;
  --gray-02--rgb:102, 102, 102;
  --gray-03:#7f7f7f;
  --gray-04:#999999;
  --gray-05:#b3b3b3;
  --gray-06:#cccccc;
  --gray-07:#ffffff;
  --gray-08:#1a1a1a;
  --gray-09:#000000;
  --gray-10:#1f2225;
  --gray-11:#24272a;
  --gray-12:#2d3032;
  --gray-13:#3b3e40;
}

:root {
  --icons01-enabled:#0266a0;
  --icons02-enabled:#605cab;
  --icons03-enabled:#00746b;
  --icons04-enabled:#00a99d;
  --icons05-enabled:#39b54a;
  --icons06-enabled:#ed145b;
  --icons07-enabled:#f26522;
  --icons08-enabled:#f7941d;
  --icons09-enabled:#616164;
  --icons01-active:#004a81;
  --icons02-active:#484099;
  --icons03-active:#02645b;
  --icons04-active:#00998c;
  --icons05-active:#2fa640;
  --icons06-active:#dc105a;
  --icons07-active:#e75e1e;
  --icons08-active:#f3891b;
  --icons09-active:#3e3f42;
  --icons01-hover:#2088c2;
  --icons02-hover:#9e9ecc;
  --icons03-hover:#009187;
  --icons04-hover:#7ccdc7;
  --icons05-hover:#79cc81;
  --icons06-hover:#f4608d;
  --icons07-hover:#f59065;
  --icons08-hover:#fab454;
  --icons09-hover:#828385;
  --icons-disabled:#a4a5a6;
}

:root.dark {
  --icons01-enabled:#4ba3d4;
  --icons02-enabled:#9e9ecc;
  --icons03-enabled:#24a19a;
  --icons04-enabled:#7ccdc7;
  --icons05-enabled:#a1daa5;
  --icons06-enabled:#f4608d;
  --icons07-enabled:#f59065;
  --icons08-enabled:#fab454;
  --icons09-enabled:#a4a5a6;
  --icons01-active:#4497c6;
  --icons02-active:#7979b8;
  --icons03-active:#009088;
  --icons04-active:#45b9b1;
  --icons05-active:#7bcc81;
  --icons06-active:#f03d73;
  --icons07-active:#f37943;
  --icons08-active:#f9a533;
  --icons09-active:#c6c6c7;
  --icons01-hover:#6abee0;
  --icons02-hover:#c4c4e1;
  --icons03-hover:#7ec8c5;
  --icons04-hover:#b0e0dd;
  --icons05-hover:#c6e8c8;
  --icons06-hover:#f78ead;
  --icons07-hover:#facebc;
  --icons08-hover:#fddfb4;
  --icons09-hover:#828385;
  --icons-disabled:#3e3f42;
}

:root {
  --color-bpm-01:#ff9a1b;
  --color-bpm-02:#1b82ff;
  --color-bpm-03:#ffed39;
  --color-bpm-04:#ff261b;
  --color-bpm-05:#2dcf76;
  --color-bpm-start:#87cf2d;
  --color-bpm-end:#ff261b;
  --color-bpm-gateways:#2dcf76;
  --color-bpm-intermediate:#3e3f42;
}

:root.dark {
  --color-bpm-01:#ffb754;
  --color-bpm-02:#5bb2ff;
  --color-bpm-03:#fef69c;
  --color-bpm-04:#f89491;
  --color-bpm-05:#96e3b0;
  --color-bpm-start:#87cf2d;
  --color-bpm-end:#ff261b;
  --color-bpm-gateways:#2dcf76;
  --color-bpm-intermediate:#c6c6c7;
}

:root {
  --box-shadow-00:none;
  --box-shadow-01:0px 1px 1px 0px rgba(0, 0, 0, 0.14),
  0px 2px 1px -1px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-02:0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-03:0px 3px 4px 0px rgba(0, 0, 0, 0.14),
  0px 3px 3px -2px rgba(0, 0, 0, 0.12), 0px 1px 8px 0px rgba(0, 0, 0, 0.2);
  --box-shadow-04:0px 4px 5px 0px rgba(0, 0, 0, 0.14),
  0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
  --box-shadow-06:0px 6px 10px 0px rgba(0, 0, 0, 0.14),
  0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 3px 5px -1px rgba(0, 0, 0, 0.2);
  --box-shadow-08:0px 8px 10px 1px rgba(0, 0, 0, 0.14),
  0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
  --box-shadow-09:0px 9px 12px 1px rgba(0, 0, 0, 0.14),
  0px 3px 16px 2px rgba(0, 0, 0, 0.12), 0px 5px 6px -3px rgba(0, 0, 0, 0.2);
  --box-shadow-12:0px 12px 17px 2px rgba(0, 0, 0, 0.14),
  0px 5px 22px 4px rgba(0, 0, 0, 0.12), 0px 7px 8px -4px rgba(0, 0, 0, 0.2);
  --box-shadow-card:none;
}

:root.dark {
  --box-shadow-card:var(--box-shadow-02);
}

:root {
  --font-family-primary:"Open Sans", sans-serif;
  --font-family-secondary:sans-serif;
  --font-weight-regular:400;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extra-bold:800;
  --font-size-xxs:8px;
  --font-size-xs:9px;
  --font-size-sm:10px;
  --font-size-md:11px;
  --font-size-lg:12px;
  --font-size-xl:13px;
  --mc-font-size-xxs:12px;
  --mc-font-size-xs:14px;
  --mc-font-size-sm:16px;
  --mc-font-size-md:20px;
  --mc-font-size-lg:24px;
  --mc-font-size-xl:36px;
  --font-style-regular:normal;
  --line-height-regular:normal;
  --line-height-default:1.6em;
  --line-height-comfortable:1.8em;
  --letter-spacing-xs:0.2px;
  --letter-spacing-sm:0.25px;
  --letter-spacing-md:0.3px;
  --letter-spacing-lg:0.6px;
}

:root.mercury {
  --font-family-primary:"Inter", sans-serif;
  --font-family-secondary:sans-serif;
}

.gxg-title-01 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
}

.gxg-title-01--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-on-primary);
}

.gxg-title-02 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
}

.gxg-title-02--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
  color: var(--color-on-primary);
}

.gxg-title-03 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
}

.gxg-title-03--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  text-transform: uppercase;
  line-height: 1.556em;
  color: var(--color-on-primary);
}

.gxg-title-04 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
}

.gxg-title-04--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: var(--letter-spacing-md);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-on-primary);
}

.gxg-title-05 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.556em;
}

.gxg-title-05--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-sm);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.556em;
  color: var(--color-on-primary);
}

.gxg-text {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  cursor: pointer;
}

.gxg-text--negative {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-on-primary);
}

.gxg-text--gray {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--gray-05);
}

.gxg-link {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}

.gxg-link:hover {
  color: var(--color-primary-hover);
}

.gxg-link:active {
  color: var(--color-primary-active);
}

.gxg-quote {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-on-background);
  text-align: start;
  line-height: 1.455em;
  font-style: italic;
}

.gxg-quote--negative {
  color: var(--color-on-primary);
}

.gxg-tab {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-lg);
  color: var(--color-on-background);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.778em;
}

.gxg-tab:active {
  font-weight: var(--font-weight-bold);
}

.gxg-tab--active {
  font-weight: var(--font-weight-bold);
}

.gxg-tab--disabled {
  color: var(--color-primary-disabled);
  pointer-events: none;
}

.gxg-label {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm) !important;
  letter-spacing: var(--letter-spacing-xs);
  color: var(--color-primary-enabled);
  text-align: center;
  line-height: 1.455em;
}

.gxg-label--disabled {
  color: var(--color-primary-disabled);
}

.gxg-label:not(.gxg-label--negative):not(.gxg-label--negative-disabled):not(.gxg-label--disabled):hover {
  color: var(--color-primary-hover);
}

.gxg-label:not(.gxg-label--negative):not(.gxg-label--negative-disabled):not(.gxg-label--disabled):focus {
  color: var(--color-primary-active);
}

.gxg-label:not(.gxg-label--negative):not(.gxg-label--negative-disabled):not(.gxg-label--disabled):active {
  color: var(--color-primary-active);
}

.gxg-label--negative {
  color: var(--color-on-primary);
}

.gxg-label--negative-disabled {
  color: var(--color-on-disabled);
}

:root {
  --outline-width-regular:2px;
  --outline-style-regular:solid;
}

:root {
  --spacing-comp-00:2px;
  --spacing-comp-01:4px;
  --spacing-comp-02:8px;
  --spacing-comp-03:12px;
  --spacing-comp-04:16px;
  --spacing-comp-05:24px;
  --spacing-comp-06:32px;
  --spacing-comp-07:40px;
  --spacing-comp-08:50px;
  --spacing-comp-09:60px;
}

:root.mercury {
  --spacing-comp-00:2px;
  --spacing-comp-01:4px;
  --spacing-comp-02:8px;
  --spacing-comp-03:12px;
  --spacing-comp-04:16px;
  --spacing-comp-05:24px;
  --spacing-comp-06:32px;
  --spacing-comp-07:40px;
  --spacing-comp-08:48px;
  --spacing-comp-09:64px;
}

:root {
  --spacing-lay-xs:4px;
  --spacing-lay-s:8px;
  --spacing-lay-m:16px;
  --spacing-lay-l:32px;
  --spacing-lay-xl:64px;
}

:root {
  --timing-01:200;
  --timing-02:500;
  --timing-03:1000;
  --timing-04:2000;
  --timing-05:3500;
  --timing-06:5000;
  --timing-07:7000;
  --timing-08:9000;
  --timing-09:12000;
  --timing-10:15000;
}

:root {
  --gxg-form-text-height:20px;
  --gxg-form-control-gap--vertical:var(--spacing-comp-03);
  --gxg-form-control-gap--horizontal:var(--spacing-comp-03);
  --gxg-label-margin-horizontal:var(--spacing-lay-s);
  --gxg-label-margin-vertical:var(--spacing-lay-xs);
  --gxg-border-common-styles:var(--border-width-sm) solid
  var(--gxg-border-color--regular);
  --gxg-border-color--focused:var(--color-primary-enabled);
  --gxg-icon-size:var(--spacing-comp-04);
  --gxg-icon-mask-size:100%;
  --gxg-list-item-height:var(--spacing-comp-05);
  --gxg-list-item-height--spaced:calc(var(--spacing-comp-05) + 2px);
  --gxg-row-background-color-even:var(--color-background);
  --gxg-row-background-color-odd:var(--gray-00);
  --gxg-border-color--regular:var(--gray-02);
  --gxg-background-color--hover:var(--gray-01);
  --gxg-color--hover:var(--color-on-background);
  --gxg-filter-brightness--hover:1.03;
  --gxg-background-color--selected:var(--color-secondary-enabled);
  --gxg-background-color--selected-hover:var(--color-secondary-enabled--hover);
  --gxg-border-color--selected:var(--color-secondary-hover);
  --gxg-color--selected:var(--color-on-background);
  --gxg-background-color--active:var(--color-secondary-active);
  --gxg-color--active:var(--color-on-primary);
  --gxg-border-color--disabled:var(--gray-01);
  --gxg-background-color--disabled:var(--gray-00);
  --gxg-color--disabled:var(--gray-04);
  --gxg-checkbox-size:var(--spacing-comp-04);
  --gxg-scrollbar-width:6px;
  --gxg-scrollbar-track-background:var(--gray-02);
  --gxg-scrollbar-track-border-radius:10px;
  --gxg-scrollbar-track-thumb-background:var(--gray-04);
  --gxg-scrollbar-track-thumb-radius:10px;
  --gxg-scrollbar-track-thumb-border:none;
  --gxg-scrollbar-track-thumb-hover-background:var(--gray-05);
  --gxg-editable-title-focus-color:var(--color-primary-enabled);
  --gxg-hi-char-color:var(--color-primary);
}

:root.gxg-large {
  --gxg-form-text-height:var(--spacing-comp-05);
}

:root.dark {
  --gxg-background-color--selected:var(--color-secondary-active);
  --gxg-background-color--selected--hover:var(
    --color-secondary-enabled--hover
  );
  --gxg-filter-brightness--hover:1.1;
}

:root.mercury {
  --mc-base-font-size:var(--mc-font-size-xs);
  --mc-editable-title-color:var(--gray-06);
  --mc-card-section-padding--v:var(--spacing-comp-04);
  --mc-card-section-padding--h:var(--spacing-comp-04);
  --mc-card-article-padding--v:var(--spacing-comp-04);
  --mc-card-article-padding--h:var(--spacing-comp-03);
  --mc-card-mini-padding--v:var(--spacing-comp-02);
  --mc-card-mini-padding--h:var(--spacing-comp-03);
  --gxg-scrollbar-width:14px;
  --gxg-scrollbar-track-background:transparent;
  --gxg-scrollbar-track-border-radius:99px;
  --gxg-scrollbar-track-thumb-background:var(--gray-12);
  --gxg-scrollbar-track-thumb-radius:99px;
  --gxg-scrollbar-track-thumb-border:5px solid transparent;
  --gxg-scrollbar-track-thumb-hover-background:var(--gray-13);
}

body {
  background-color: var(--color-background);
}

.piaMessage {
  margin-bottom: 10px;
}

.piaMessageContent {
  max-width: 90%;
  white-space: pre-wrap;
}

.piaMessageText {
  font-size: var(--font-size-lg);
}