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

  /* === Main === */
  --main-will-main-color: #09090c;
  --main-will-border: #09090c;
  --main-will-main-segment-up: #26182f;
  --main-will-main-segment-up-alt: #1c141f;
  --main-content-will-primary: #9e79ba;
  --main-button-secondary: rgba(245, 45, 40, 0.5);
  --main-button-secondary-border: rgba(241, 32, 56, 0.5);
  --main-bonus-light: rgba(270, 44, 7, 0);
  --main-bonus-light-wild-dark: #ff8800;
  --main-bonus-light-wild-middle: #ffae00;
  --main-bonus-light-wild-middle-ghost: rgba(41, 100, 100, 0);
  --main-bonus-light-wild-light: rgba(60, 100, 100, 0.3);
  --main-bonus-light-wild-light-ghost: rgba(60, 100, 100, 0);

  /* === Ra === */
  --ra-colors-segment-up: #ff2046;
  --ra-colors-segment-down: #9f0817;
  --ra-colors-segment-border: #ff4363;
  --ra-colors-startpoint-up: #281320;
  --ra-colors-startpoint-down: #3b1730;
  --ra-colors-startpoint-border-down: rgba(351, 75, 100, 0);
  --ra-colors-hieroglyphs-up: #cf0013;
  --ra-colors-hieroglyphs-down: #76080b;
  --ra-colors-hieroglyphs-up-active: #ffec1f;
  --ra-colors-hieroglyphs-down-active: #e2cf00;
  --ra-colors-light-down: rgba(354, 100, 20, 0);

  /* === Sebek === */
  --sebek-colors-will-up: #00e760;
  --sebek-colors-will-down: #008815;
  --sebek-colors-will-border: #00e760;
  --sebek-colors-startpoint-up: #0d2419;
  --sebek-colors-startpoint-down: #122f24;
  --sebek-colors-startpoint-border-up: #00dd55;
  --sebek-colors-startpoint-border-down: rgba(143, 100, 87, 0);
  --sebek-colors-hieroglyphs-up: #056800;
  --sebek-colors-hieroglyphs-down: #055b00;
  --sebek-colors-light-down: rgba(117, 100, 12, 0);

  /* === Bastet === */
  --bastet-colors-will-up: #00dcff;
  --bastet-colors-will-down: #0286eb;
  --bastet-colors-will-border: #00dcff;
  --bastet-colors-startpoint-up: #002539;
  --bastet-colors-startpoint-down: #083148;
  --bastet-colors-startpoint-border-up: #03cafb;
  --bastet-colors-startpoint-border-down: rgba(192, 99, 98, 0);
  --bastet-colors-hieroglyphs-up: #0097ed;
  --bastet-colors-hieroglyphs-down: #001d91;
  --bastet-colors-light-down: rgba(228, 100, 34, 0);

  /* === Anubis === */
  --anubis-will-up: #7439d1;
  --anubis-will-down: #460194;
  --anubis-will-border: #763ecf;
  --anubis-startpoint-up: #210e34;
  --anubis-startpoint-down: #281146;
  --anubis-startpoint-border-up: #ad80ff;
  --anubis-startpoint-border-down: rgba(266, 57, 100, 0);
  --anubis-hieroglyphs-up: #b866ff;
  --anubis-hieroglyphs-down: #8725ff;
  --anubis-light-down: #65278d;
  --anubis-light-up: rgba(264, 79, 34, 0);
}

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