/* COLORS */
:root {
  /* new theme tokens starts here */
  --neutral-bg-base: rgba(0, 0, 0, 0.9);
  --neutral-bg-default: rgba(221, 227, 242, 0.15);
  --neutral-modal-body-bg: #1b1b1d;
  --neutral-modal-bg-inverted: rgba(0, 0, 0, 0.3);
  --neutral-modal-content-secondary: #a5aab9;
  --neutral-button-quickbet-bg: rgba(221, 227, 242, 0.15);
  --brand-button-bet-bg: #9cff51;
  --brand-button-bet-hover: #afff59;
  --brand-button-bet-shadow: #afff59b3;
  --neutral-text-primary: #f9fafc;
  --neutral-text-secondary: #a5aab9;
  --neutral-text-tertiary: #6a6f7d;
  --neutral-tab-filled-selected-accent-content: #000;
  --neutral-dropdown-list-item-content-secondary: #000;
  --neutral-dropdown-list-bg: #000;
  --neutral-dropdown-bg: #000;
  /* new theme tokens ends here */

  --background-page: #040405;
  --background-page-overlay: #040405cc;
  --background-page-overlay-alpha-0: #04040500;
  --background-container-primary: #dde3f219;
  --background-container-secondary: #040405f4;
  --background-container-elevated-primary: #1a1a1d;
  --background-container-elevated-secondary: #29292d;
  --background-container-elevated-inverted: #f4f6fc;
  --background-field-primary: #dde3f20c;
  --background-field-secondary: #dde3f20c;
  --background-field-inverted: #04040551;
  --background-overlay: #000000cc;
  --background-element-primary: #dde3f228;
  --background-element-secondary: #dde3f25b;
  --background-element-selection-primary: #c2f444;
  --background-element-selection-hover: #caff6d;
  --background-hover-01: #dde3f233;
  --background-hover-02: #dde3f21e;
  --fg-content-primary: #ebf0ff;
  --fg-content-primary-alpha-50: #ebf0ff7f;
  --fg-content-primary-alpha-30: #ebf0ff4c;
  --fg-content-primary-alpha-12: #ebf0ff1e;
  --fg-content-secondary: #828896;
  --fg-content-tertiary: #525660;
  --fg-content-inverted: #040405;
  --fg-content-dark: #040405;
  --fg-content-brand: #caff6d;
  --fg-content-brand-alpha-60: #caff6d99;
  --fg-content-brand-alpha-15: #caff6d26;
  --fg-content-brand-ghost: #caff6d00;
  --fg-content-gray: #9ba1b0;
  --fg-content-green: #caff6d;
  --fg-content-yellow: #ffdc83;
  --fg-content-red: #f13e48;
  --fg-fg-content-btn-secondary-text: #caff6d7f;
  --fg-content-btn-secondary-amount-01: #ebf0ff;
  --fg-content-btn-secondary-amount-02: #ebf0ffb2;
  --fg-content-brand-secondary: #2696ff;
  --fg-content-brand-secondary-alpha-60: #2696ff99;
  --fg-content-brand-secondary-alpha-15: #2696ff26;
  --fg-content-brand-ghost-secondary: #2696ff00;
  --feedback-error: #f13e48;
  --win-notification-brand-liner-01: #b2ff3c28;
  --win-notification-brand-liner-02: #bfff520a;
  --feedback-warning: #ffc91a;
  --win-notification-cashwin-base: #54752326;
  --feedback-success: #caff6d;
  --win-notification-white-liner-01: #ffffff47;
  --feedback-info: #828896;
  --win-notification-white-liner-02: #ffffff28;
  --win-notification-white-liner-03: #ffffff00;
  --border-element-primary: #dde3f214;
  --border-btn-secondary-up: #bafb4866;
  --border-btn-secondary-down: #bafb4819;
  --border-btn-secondary-up-hover: #bafb48b2;
  --border-btn-secondary-down-hover: #bafb4823;
  --border-btn-affirmative-up: #bafb4866;
  --border-btn-affirmative-down: #bafb4819;
  --border-btn-accent: #dde3f2;
  --button-primary-up: #b5e95d;
  --button-primary-down: #ace30b;
  --button-primary-up-hover: #cfff78;
  --button-primary-down-hover: #b6f10c;
  --button-secondary-up: #8fe50c5b;
  --button-secondary-down: #8fe50c0a;
  --button-negative-up: #ff4f00;
  --button-negative-down: #fd3535;
  --button-negative-up-hover: #ff580d;
  --button-negative-down-hover: #fd4141;
  --button-accent-up: #ebeef6;
  --button-accent-down: #bcc3d5;
  --button-accent-up-hover: #f6f8ff;
  --button-accent-down-hover: #ccd4e8;
  --button-affirmative-up: #8fe50c59;
  --button-affirmative-down: #8fe50c28;
  --button-brand: #a8e2443d;
  --button-black: #a3a7bc3d;
  --button-red: #f13e483d;
  --button-brand-selected-up: #b5e95d;
  --button-brand-selected-down: #ace30b;
  --button-black-selected-up: #89898c;
  --button-black-selected-down: #5a5a60;
  --button-red-selected-up: #ff626a;
  --button-red-selected-down: #f5313c;
  --button-brand-hover: #a8e24451;
  --button-black-hover: #a3a7bc51;
  --button-red-hover: #f13e4851;
  --button-slider-up: #ebeef6;
  --button-slider-down: #bcc3d5;
  --button-btn-togame: #e2e5ee;
  --button-secondary-bet: #2696ff;
  --button-secondary-ghost-bet: #2696ff00;
  --shadow-btn-primary-hover: #aff03eb2;
  --window-rules-grid-01: #ffffff33;
  --window-rules-grid-02: #ffffff00;
  --shadow-btn-secondsry-hover: #aaf0301e;
  --shadow-btn-negative-hover: #fd4242b2;
  --shadow-btn-shadow: #0000003f;
  --shadow-modal: #05050666;
  --shadow-notification: #000000cc;

  /* Plinko */
  --plinko-01: #f24d42;
  --plinko-01-ghost: #f24d4200;
  --plinko-02: #f15c3e;
  --plinko-03: #f16e3e;
  --plinko-04: #f1813e;
  --plinko-05: #ffa14b;
  --plinko-06: #ffad48;
  --plinko-07: #feb944;
  --plinko-08: #fec641;
  --plinko-09: #fdd33e;
  --plinko-09-ghost: #fdd33e00;
  --plinko-ball-brand-01: #c4ff2f;
  --plinko-ball-brand-02: #8cb427;
  --plinko-dots: #5f5f6c;
  --plinko-dots-shadow: #15151be5;
  --plinko-dots-active: #ebf0ff;
  --plinko-dots-active-shadow-01: #ffffff0c;
  --plinko-dots-active-shadow-02: #ffffff19;
  --plinko-bg: #0e0e12;
  --plinko-fg-content: #040405;
  --plinko-bg-shadow-01: #b8c2dd11;
  --plinko-bg-shadow-02: #b8c2dd51;
  --plinko-particles: #d7ff77;
  --plinko-particles-shadow: #d7ff778c;
  --plinko-notification-gold-alpha-50: #ffa6007f;
  --plinko-notification-fill: #f1813e0c;
  --plinko-notification-gold-border: #fdd33e;
  --plinko-notification-gold-content: #fdd33e;
  --plinko-glow-gold-02: #f15c3e;
  --plinko-platform-glow: #fffca699;
  
  /* Punchit */
  --punchit-risk-panel-bg: rgba(241, 244, 250, 0.94);
  --punchit-risk-done: #509E40;

  /* Subway */
  --subway-background-page: #bf3e17;
  --subway-footer-text: #ffbc46;
  --subway-footer-shield: #f9fafc;
  --subway-betfield-text-shadow: #ffe000;
  --subway-betfield-text-color: #563602;
  --subway-betfield-border: #563602;
  --subway-betfield-shadow: #97979780;
  --subway-betfield-bg: #ffff00;
  --subway-betfield-shadow-hover: #c4c4c4;
  --subway-betfield-shadow-active: #c4c4c4;
  --subway-betfield-blink: #ffffffbf;
  --subway-betfield-wrapper-shadow-01: #c87300;
  --subway-betfield-wrapper-shadow-02: #ffff00;
  --subway-betfield-wrapper-shadow-03: #ffcd00;
  --subway-betfield-wrapper-bg-01: #ffd800;
  --subway-betfield-wrapper-bg-02: #ffd800;
  --subway-betfield-wrapper-bg-03: #ffb600;
  --subway-betfield-wrapper-bg-04: #ffb600;
  --subway-betfield-wrapper-shadow-01-hover: #d28800;
  --subway-betfield-wrapper-shadow-02-hover: #ffff00;
  --subway-betfield-wrapper-shadow-03-hover: #ffe200;
  --subway-betfield-wrapper-bg-01-hover: #ffe900;
  --subway-betfield-wrapper-bg-02-hover: #ffe900;
  --subway-betfield-wrapper-bg-03-hover: #ffd700;
  --subway-betfield-wrapper-bg-04-hover: #ffd700;
  --subway-betfield-wrapper-shadow-01-active: #d24900;
  --subway-betfield-wrapper-shadow-02-active: #ffcc00;
  --subway-betfield-wrapper-shadow-03-active: #ff8000;
  --subway-betfield-wrapper-bg-01-active: #ff9100;
  --subway-betfield-wrapper-bg-02-active: #ff9100;
  --subway-betfield-wrapper-bg-03-active: #ff6500;
  --subway-betfield-wrapper-bg-04-active: #ff6500;
  --subway-betinfo-container-bg: #f2f2f2;
  --subway-betinfo-container-border: #000000;
  --subway-amount-text-color: #563602;
  --subway-amount-bg: #dedede;
  --subway-amount-border: #d4d4d4;
  --subway-amount-button-bg: #d7ff5b;
  --subway-amount-button-bg-01: #d7ff5b;
  --subway-amount-button-bg-02: #c5fb4a;
  --subway-amount-button-bg-03: #a7e137;
  --subway-amount-button-bg-04: #8fcd27;
  --subway-amount-button-shadow-01: #327400;
  --subway-amount-button-shadow-02: #d0ec3d;
  --subway-amount-button-shadow-03: #69a614;
  --subway-amount-button-bg-01-hover: #cbfc48;
  --subway-amount-button-bg-02-hover: #cbfc48;
  --subway-amount-button-bg-03-hover: #b1ea34;
  --subway-amount-button-bg-04-hover: #b1ea34;
  --subway-amount-button-shadow-01-hover: #327400;
  --subway-amount-button-shadow-02-hover: #e0fd5f;
  --subway-amount-button-shadow-03-hover: #79b71f;
  --subway-amount-button-bg-01-active: #82ad1b;
  --subway-amount-button-bg-02-active: #82ad1b;
  --subway-amount-button-bg-03-active: #688e16;
  --subway-amount-button-bg-04-active: #688e16;
  --subway-amount-button-shadow-01-active: #327400;
  --subway-amount-button-shadow-02-active: #b9d427;
  --subway-amount-button-shadow-03-active: #568d0d;
  --subway-betinfo-text-color: #ffffff;
  --subway-betinfo-bg: #130a0acc;
  --subway-quick-bet-bg: #a0d82880;
  --subway-quick-bet-border: #32740014;
  --subway-quick-bet-text-color: #327400;
  --subway-quick-bet-bg-hover: #aeff0080;
  --subway-quick-bet-bg-active: #71a50080;
  --subway-quick-bet-border-active: #214c0014;
  --subway-gate-button-bg-01: #bddf0a;
  --subway-gate-button-bg-02: #bddf0a;
  --subway-gate-button-bg-03: #92c407;
  --subway-gate-button-bg-04: #92c407;
  --subway-gate-button-shadow: #3e7100;
  --subway-gate-button-shadow-01: #ffff14;
  --subway-gate-button-shadow-02: #3e7100;
  --subway-gate-button-bg-01-hover: #dbf203;
  --subway-gate-button-bg-02-hover: #dbf203;
  --subway-gate-button-bg-03-hover: #a1db02;
  --subway-gate-button-bg-04-hover: #a1db02;
  --subway-gate-button-shadow-hover: #bae503;
  --subway-gate-button-shadow-01-hover: #ffff06;
  --subway-gate-button-shadow-02-hover: #3e7100;
  --subway-gate-button-bg-01-active: #8cc700;
  --subway-gate-button-bg-02-active: #8cc700;
  --subway-gate-button-bg-03-active: #5a8000;
  --subway-gate-button-bg-04-active: #5a8000;
  --subway-gate-button-shadow-active: #689400;
  --subway-gate-button-shadow-01-active: #d1e900;
  --subway-gate-button-shadow-02-active: #3e7100;
  --subway-gate-text-color: #ffffff;
  --subway-gate-text-stroke-color: #00234A;
  --subway-multiplier-stroke-color: #000000;
  --subway-withdraw-color: #000000;
  --subway-withdraw-border: #fdd640;
  --subway-withdraw-shadow: #fff5cf99;
  --subway-withdraw-bg-01: #ffd800;
  --subway-withdraw-bg-02: #ffd800;
  --subway-withdraw-bg-03: #ffb500;
  --subway-withdraw-bg-04: #ffb500;
  --subway-withdraw-border-hover: #fdd640;
  --subway-withdraw-bg-01-hover: #ffe56a;
  --subway-withdraw-bg-02-hover: #ffe56a;
  --subway-withdraw-bg-03-hover: #ffce48;
  --subway-withdraw-bg-04-hover: #ffce48;
  --subway-windraw-shadow-hover: #fee996;
  --subway-withdraw-border-active: #fd8240;
  --subway-withdraw-bg-01-active: #ffcc00;
  --subway-withdraw-bg-02-active: #ffcc00;
  --subway-withdraw-bg-03-active: #ff9f00;
  --subway-withdraw-bg-04-active: #ff9f00;
  --subway-withdraw-shadow-active: #fec796;
  --subway-card-shadow-01: #04040500;
  --subway-card-shadow-02: #040405;
}

/* ROUNDING */
:root {
  /* Button */
  --button-rounding-button-s: 4px;
  --button-rounding-button-m: 8px;

  /* Tabs */
  --tabs-rounding-segment-tab: 8px;
  --tabs-rounding-segment-control: 12px;
  --tabs-rounding-chips-tab: 999px;

  /* Input */
  --input-rounding-input-s: 4px;
  --input-rounding-input-m: 8px;

  /* Basebadge */
  --basebadge-rounding-badge: 8px;

  /* Modal */
  --modal-rounding-modal: 12px;

  /* Notification */
  --notification-rounding-notification: 12px;

  /* Element */
  --element-rounding-element: 12px;
}

/* SIZE */
:root {
  /* Button */
  --button-size-button-xl: 48px;
  --button-size-button-l: 44px;
  --button-size-button-m: 36px;
  --button-size-button-s: 28px;
  --button-size-bet-button: 76px;

  /* Tabs */
  --tab-size-segment-tab-m: 36px;
  --tab-size-tag: 28px;
  --tab-size-segment-tab-s: 28px;

  /* Input */
  --input-size-input: 44px;

  /* Basebadge */
  --badge-size-badge: 36px;
}

/* OPACITY */
:root {
  --opacity-disabled: 30%;
  --opacity-active: 74%;
}

/* FONTS */

/* Display */
.display-text-s-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.33px;
}

.display-text-s-semibold {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.33px;
}

.display-text-s-regular {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.33px;
}

.display-text-xs-bold {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.18px;
}

.display-text-xs-semibold {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.18px;
}

.display-text-xs-regular {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.18px;
}

/* Headline */

.h1-bold {
  font-size: 72px;
  font-weight: 700;
  line-height: 86px;
  letter-spacing: -1.25px;
}

.h2-bold {
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: -0.98px;
}

.h3-bold {
  font-size: 38px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -0.4px;
}

.h4-bold {
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.58px;
}

.h5-semibold-desktop {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.33px;
}

.h5-semibold-mobile {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.18px;
}

h6-regular {
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.08px;
}

/* Body */
.body-regular {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.09px;
}

.body-medium {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.09px;
}

.body-semibold {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.09px;
}

.body-extrabold {
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0.01px;
}

/* Caption */

.caption-s-regular {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.01px;
}

.caption-s-medium {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.01px;
}

.caption-s-semibold {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01px;
}

.caption-s-caps {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.01px;
}

.caption-xs-regular {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.1px;
}

.caption-xs-semibold {
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.1px;
}

.color-fg-content-primary {
  color: var(--fg-content-primary);
}

.color-fg-content-neutral-primary {
  color: var(--neutral-text-primary);
}

.color-fg-content-primary-alpha-50 {
  color: var(--fg-content-primary-alpha-50);
}

.color-fg-content-primary-alpha-30 {
  color: var(--fg-content-primary-alpha-30);
}

.color-fg-content-primary-alpha-12 {
  color: var(--fg-content-primary-alpha-12);
}

.color-fg-content-secondary {
  color: var(--fg-content-secondary);
}

.color-fg-content-neutral-secondary {
  color: var(--neutral-text-secondary);
}

.color-fg-content-tertiary {
  color: var(--fg-content-tertiary);
}

.color-fg-content-neutral-tertiary {
  color: var(--neutral-text-tertiary);
}

.color-fg-content-inverted {
  color: var(--fg-content-inverted);
}

.color-fg-content-gray {
  color: var(--fg-content-gray);
}

.color-fg-content-green {
  color: var(--fg-content-green);
}

.color-fg-content-green-alpha-50 {
  color: var(--fg-content-green-alpha-50);
}

.color-fg-content-yellow {
  color: var(--fg-content-yellow);
}

.color-fg-content-red {
  color: var(--fg-content-red);
}

.color-fg-content-dark {
  color: var(--fg-content-dark);
}

.color-fg-content-brand {
  color: var(--fg-content-brand);
}

.color-fg-content-brand-alpha-60 {
  color: var(--fg-content-brand-alpha-60);
}

.color-fg-content-secondary-text {
  color: var(--fg-fg-content-btn-secondary-text);
}

.color-fg-content-secondary-amount-01 {
  color: var(--fg-content-btn-secondary-amount-01);
}

.color-fg-content-secondary-amount-02 {
  color: var(--fg-content-btn-secondary-amount-02);
}