/* 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;
  --crash-content-coeff-low: #9ba1b0;
  --crash-content-coeff-middle: #caff6d;
  --crash-content-coeff-high: #ffdc83;
  --crash-fg-content-brand: #caff6d;
  --crash-schedule-brand-01: #caff6d;
  --crash-schedule-brand-02: #caff6d28;
  --crash-schedule-brand-alpha-0: #caff6d00;
  --crash-shadow-circle-01: #000000a5;
  --crash-shadow-circle-02: #c0ff5ad8;
  --crash-fg-content: #191b1f;
  --crash-waiting-circle-line-01: #caff6d;
  --crash-waiting-circle-line-02: #a4e338;
  --crash-waiting-circle: #0e0e12;
  --crash-waiting-circle-radial: #18191d;
  --crash-waiting-circle-radial-alpha-20: #18191d33;
  --crash-waiting-circle-radial-alpha-0: #18191d00;
  --dice-win-number-01: #d9ff97;
  --dice-win-number-02: #abde51;
  --dice-win-indicator: #caff6d;
  --dice-win-indicator-alpha-0: #caff6d00;
  --dice-win-cub: #caff6d;
  --dice-win-bg-shadow: #caff6d38;
  --dice-lose-number-01: #f8646c;
  --dice-lose-number-02: #f13e48;
  --dice-lose-indicator: #f13e48;
  --dice-lose-indicator-alpha-0: #f13e4800;
  --dice-lose-cub: #f13e48;
  --dice-lose-bg-shadow: #f13e4838;
  --dice-default-number-01: #ffffff;
  --dice-default-number-02: #b7c3db;
  --dice-default-cub: #ebf0ff;
  --dice-default-indicator: #dde3f2;
  --dice-default-indicator-alpha-0: #dde3f200;
  --dice-default-bg-shadow: #ebf0ff38;
  --dice-border-number: #ffffff4c;
  --dice-border-number-alpha-0: #ffffff00;
  --dice-win-zone: #caff6d;
  --dice-lose-zone: #f13e48;
  --keno-default: #dde3f219;
  --keno-default-border: #5155597f;
  --keno-default-border-alpha-0: #51555900;
  --keno-default-content: #ebf0ff7f;
  --keno-selected: #c7d5f838;
  --keno-selected-border: #dde3f270;
  --keno-selected-content: #ebf0ff;
  --keno-win-01: #ace30b;
  --keno-win-02: #b5e95d;
  --keno-win-content: #040405;
  --keno-lose-border: #dde3f21e;
  --keno-lose-content: #525660;
  --keno-info-tag-01: #b5e95d;
  --keno-info-tag-02: #ace30b;
  --keno-info-tag-content: #040405;
  --mines-info-tag-01: #fff43d;
  --mines-info-tag-02: #f9cc2d;
  --mines-info-tag-content: #040405;
  --mines-default: #dde3f219;
  --mines-default-border: #5155594c;
  --mines-default-border-alpha-0: #51555900;
  --mines-crystal-bg: #0404050f;
  --mines-crystal-fg: #fee839;
  --mines-crystal-radial-01: #f9d41199;
  --mines-crystal-radial-02: #f9d41142;
  --mines-crystal-radial-03: #f9d4110a;
  --mines-bomb-bg: #f13e4814;
  --mines-bombl-fg: #ff6645;
  --mines-bomb-radial-01: #f13e4847;
  --mines-bomb-radial-02: #f13e4814;
  --mines-bomb-radial-03: #04040500;
  --mines-star-linear-01: #f6ef45;
  --mines-star-linear-02: #d57300;
  --mines-bomb-linear-01: #ff6645;
  --mines-bomb-linear-02: #f13e48;
  --mines-star-particles: #f6ef45;
  --mines-bomb-particles: #f13e48;
  --mines-bomb-particles-base: #fa666f;
  --mines-card: rgba(36, 36, 40, 0.5);
  --mines-card-alpha-0: rgba(36, 36, 40, 0);
  --double-brand-01: #b5e95d;
  --double-brand-02: #ace30b;
  --double-brand-border: #b6e95b;
  --double-brand-circle-01: #80a70e;
  --double-brand-circle-02: #94c20c;
  --double-brand-circle-border-01: #8db90d;
  --double-brand-circle-border-02: #c9ff32;
  --double-brand-fg: #74990a;
  --double-red-01: #ff626a;
  --double-red-02: #f5313c;
  --double-red-border: #fe5555;
  --double-red-circle-01: #c1343c;
  --double-red-circle-02: #de3d45;
  --double-red-circle-border-01: #dd343d;
  --double-red-circle-border-02: #ff636c;
  --double-red-fg: #b32727;
  --double-dark-01: #879aff;
  --double-dark-02: #586ee9;
  --double-dark-border: #7086ff;
  --double-dark-circle-01: #4054c7;
  --double-dark-circle-02: #687ff5;
  --double-dark-circle-border-01: #495fd9;
  --double-dark-circle-border-02: #758bff;
  --double-dark-fg: #3e55d8;
  --double-base: #121213;
  --double-base-border: #dde3f214;
  --double-base-alpha-0: #12121300;
  --double-arrow: #ebeef6;
  --double-arrow-alpha-0: #bcc3d500;
  --double-lines-alpha-20: rgba(165, 228, 58, 0.2);
  --double-lines-alpha-60: rgba(165, 228, 58, 0.6);
  --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;
  --hilo-game-field-button: #38393d;
  --hilo-win-glow: #f4f48a;

  --banner-brand-01: #587d19;
  --banner-brand-02: #263c03;
  --penalty-vs-color: #aede23;
  --penalty-banner-border: #678b2a;

  --blackjack-push-text: #ffc91a99;
  --blackjack-push-content: #ffc91a;

  --punchit-risk-panel-bg: rgba(241, 244, 250, 0.94);
  --punchit-risk-done: #509E40;
}

/* 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);
}