:root {
  --color-10: hsl(278, 95%, 8%);
  --color-20: hsl(259, 39%, 14%);
  --color-30: hsl(260, 42%, 18%);
  --color-40: hsl(260, 42%, 22%);
  --color-50: hsl(240, 26%, 23%);
  --color-60: hsl(236, 26%, 25%);
  --color-70: hsl(240, 26%, 30%);
  --color-80: hsl(259, 15%, 59%);
  --color-90: hsl(271, 30%, 81%);

  --color-100: hsl(240, 2%, 8%);
  --color-200: hsl(0, 0%, 40%);
  --color-300: hsl(0, 0%, 63%);
  --color-400: hsl(0, 0%, 67%);
  --color-500: hsl(255, 6%, 87%);
  --color-600: hsl(260, 5%, 89%);
  --color-700: hsl(0, 0%, 90%);
  --color-800: hsl(0, 0%, 100%);

  --primary-color-10: hsl(259, 39%, 22%);
  --primary-color-20: hsl(270, 61%, 29%);
  --primary-color-30: hsl(275, 62%, 31%);
  --primary-color-40: hsl(280, 92%, 60%);
  --primary-color-50: hsl(279, 99%, 60%);
  --primary-color-60: hsl(270, 92%, 61%);
  --primary-color-70: hsl(279, 100%, 68%);

  --tertiary-color-10: hsl(150, 89%, 48%);
  --tertiary-color-20: hsl(150, 100%, 50%);
  --tertiary-color-30: hsl(80, 93%, 47%);

  --success-color: hsl(122, 56%, 44%);
  --success-color-20: hsl(159, 95%, 38%);
  --error-color: hsl(0, 59%, 40%);
  --error-color-20: hsl(348, 80%, 61%);
  --warning-color: hsl(38, 90%, 55%);

  --selection-background: var(--primary-color-60);
  --selection-color: var(--text-color);

  --focus-outline: 1px solid var(--primary-color-60);

  --root-bg: var(--color-10);
  --modal-bg: rgba(0, 0, 0, 0.8);
  --loading-bg: rgba(0, 0, 0, 0.6);

  --text-color: var(--color-800);
  --secondary-text-color: var(--color-700);
  --tertiary-text-color: var(--color-400);

  --font-size-10: 0.88rem; /* 14px */
  --font-size-20: 1rem; /* 16px */
  --font-size-30: 1.125rem; /* 18px */
  --font-size-40: 1.25rem; /* 20px */
  --font-size-50: 1.5rem; /* 28px */
  --font-size-60: 1.75rem; /* 36px */
  --font-size-70: 0.75rem; /* 12px */

  --side-padding: 0 0.94rem; /* 15px */
  --side-padding-desktop: 0 24px;
  --side-padding-mobile: 0.94rem;

  --transition-10: 0.1s cubic-bezier(0.29, 0.48, 0.43, 0.67);
  --transition-20: 0.1s cubic-bezier(0.5, 0.71, 0.37, 0.64);

  --utility-button-bg: var(--color-50);
  --utility-button-bg-hover: var(--color-60);
  --utility-button-icon-color: var(--color-300);
  --utility-button-icon-color-hover: var(--color-700);

  --logout-button-bg: hsl(298, 33%, 17%);
  --logout-button-bg-hover: hsl(308, 34%, 18%);
  --logout-button-color: var(--error-color-20);

  --input-bg: var(--color-30);
  --input-bg-hover: var(--color-40);
  --input-text-color: var(--text-color);
  --input-text-placeholder-color: var(--secondary-text-color);
  --input-datepicker-icon-color: var(--primary-color-50);
  --input-datepicker-icon-color-hover: var(--primary-color-70);

  /* Header */
  --header-bg: var(--color-10);
  --account-buttons-login-bg: var(--color-30);
  --account-buttons-login-bg-hover: var(--color-40);
  --account-buttons-login-text-color: var(--text-color);
  --account-buttons-signin-bg: var(--tertiary-color-10);
  --account-buttons-signin-bg-hover: var(--tertiary-color-20);
  --account-buttons-signin-text-color: var(--color-10);
  --account-buttons-deposit-bg: var(--color-30);
  --account-buttons-deposit-button-bg: var(--account-buttons-signin-bg);
  --account-buttons-deposit-button-bg-hover: var(--account-buttons-signin-bg-hover);
  --account-buttons-deposit-button-text-color: var(--account-buttons-signin-text-color);
  --events-button-bg: var(--color-30);
  --events-button-bg-hover: var(--color-40);
  --events-button-icon-color: var(--color-300);
  --events-button-icon-color-hover: var(--color-700);

  /* AuthPage */
  --auth-page-form-window-bg: var(--color-20);
  --type-toggle-bg: var(--color-30);
  --type-toggle-button-bg: var(--color-50);
  --type-toggle-button-bg-active: linear-gradient(180deg, var(--primary-color-60) 0%, var(--primary-color-40) 100%);
  --type-toggle-button-icon-color: var(--secondary-text-color);
  --type-toggle-button-icon-color-active: var(--text-color);
  --type-toggle-button-text-color: var(--secondary-text-color);
  --type-toggle-button-text-color-active: var(--text-color);
  --forgot-password-color: var(--primary-color-60);
  --forgot-password-color-hover: var(--primary-color-70);
  --submit-bg: var(--tertiary-color-20);
  --submit-text-color: var(--color-10);
  --checkbox-bg: var(--color-30);
  --checkbox-bg-hover: var(--color-50);
  --checkbox-bg-checked: var(--primary-color-60);
  --checkbox-text-color: var(--primary-color-60);
  --checkbox-text-color-hover: var(--primary-color-40);

  /* ProfilePage */
  --profile-page-sticky-header-bg: var(--color-20);
  --profile-page-sticky-header-border-bottom: var(--color-50);
  --profile-page-tab-window-bg: var(--color-20);
  --profile-page-back-button-icon-color: var(--primary-color-50);
  --profile-page-back-button-icon-color-hover: var(--primary-color-70);
  --profile-page-input-bg: var(--color-30);
  --profile-page-input-bg-hover: var(--primary-color-10);
  --profile-page-input-label-color: var(--color-300);
  --profile-page-input-icon-color: var(--color-200);
  --profile-page-button-bg: var(--color-50);
  --profile-page-button-bg-hover: var(--color-60);
  --profile-page-secondary-info-color: var(--color-300);
  --profile-submit-bg: var(--primary-color-50);
  --profile-submit-bg-hover: var(--primary-color-70);
  --profile-submit-text-color: var(--text-color);
  --profile-tab-button-icon-color: var(--tertiary-text-color);
  --history-tab-top-bar-bg: var(--color-30);
  --history-tab-top-bar-tab-bg-hover: var(--primary-color-10);
  --history-tab-top-bar-tab-bg-active: var(--color-70);
  --history-pagination-arrow-bg: var(--color-30);
  --history-pagination-arrow-bg-hover: var(--color-40);
  --history-pagination-count-bg: var(--history-tab-top-bar-bg);
  --history-pagination-count-bg-hover: var(--primary-color-10);
  --history-pagination-count-bg-active: var(--color-70);

  /* SupportsPopup */
  --supports-popup-bg: var(--color-20);
  --supports-popup-button-bg: var(--color-50);
  --supports-popup-button-bg-hover: var(--color-60);
  --supports-popup-close-bg: var(--primary-color-50);
  --supports-popup-close-bg-hover: var(--primary-color-70);
  --supports-popup-close-text-color: var(--text-color);

  /* WalletPage */
  --wallet-page-tab-window-bg: var(--color-20);
  --wallet-page-button-bg: var(--color-50);
  --wallet-page-button-bg-hover: var(--color-60);
  --wallet-page-button-bg-active: var(--color-30);
  --wallet-page-back-button-icon-color: var(--primary-color-50);
  --wallet-page-back-button-icon-color-hover: var(--primary-color-70);
  --wallet-page-add-wallet-color: var(--primary-color-50);
  --wallet-page-add-wallet-color-hover: var(--primary-color-70);
  --wallet-page-add-currency-bg: var(--color-30);
  --wallet-page-add-currency-search-icon: var(--color-300);

  /* PaymentsPage */
  --payments-page-tab-window-bg: var(--color-800);
  --payments-page-header-color: var(--color-100);
  --payments-page-back-button-icon-color: var(--primary-color-50);
  --payments-page-back-button-icon-color-hover: var(--primary-color-70);
  --payments-page-payment-bg: var(--color-600);
  --payments-page-payment-bg-hover: var(--color-500);
  --payments-page-payment-color: var(--color-100);
  --payments-page-payment-warning-border: 1px solid var(--color-200);
  --payments-page-payment-warning-color: var(--color-200);
  --payments-page-payment-warning-icon-color: var(--warning-color);
  --payments-page-copy-button-bg: var(--primary-color-50);
  --payments-page-copy-button-bg-hover: var(--primary-color-70);
  --payments-page-copy-button-color: var(--text-color);
  --payments-page-input-bg: var(--color-600);
  --payments-page-input-bg-hover: var(--color-500);
  --payments-page-input-label-color: var(--color-100);
  --payments-page-submit-button-bg: var(--primary-color-50);
  --payments-page-submit-button-bg-hover: var(--primary-color-70);
  --payments-page-submit-button-color: var(--text-color);
  --patments-page-amount-limits-color: var(--color-200);

  /* Notification */
  --notification-bg: var(--color-30);
  --notification-bar-bg: var(--primary-color-60);
  --notification-text-color: var(--text-color);
  --notification-close-button-icon-color: var(--secondary-text-color);

  /* Menu */
  --menu-bg: var(--color-20);
  --menu-online-count-dot-bg: var(--success-color);
  --menu-border-color: var(--color-60);
  --menu-account-bg: var(--color-60);
  --menu-account-bg-hover: var(--color-80);
  --menu-account-icon-color: var(--color-90);
  --menu-account-icon-color-hover: var(--color-70);
  --menu-menu-item-text-color: var(--tertiary-text-color);
  --menu-menu-item-text-color-active: var(--primary-color-60);
  --menu-bonuses-count-bg: var(--tertiary-color-30);
  --menu-bonuses-count-text-color: var(--color-10);
  --language-button-bg: var(--color-50);
  --language-button-bg-hover: var(--color-60);
  --language-button-list-bg: var(--color-800);
  --language-button-list-bg-hover: var(--color-700);
  --language-button-list-text-color: var(--color-10);
  --socials-closed-trigger-button-bg: var(--color-50);
  --socials-closed-trigger-button-bg-hover: var(--color-60);
  --socials-closed-trigger-button-more-icon-bg: var(--color-60);
  --socials-closed-list-bg: var(--color-800);
  --socials-closed-list-bg-hover: var(--color-700);
  --socials-closed-list-text-color: var(--color-10);

  /* AccountButton */
  --account-bg: var(--color-50);
  --account-bg-hover: var(--color-60);
  --account-icon-color: var(--color-300);
  --account-copy-bg: var(--color-50);
  --account-copy-bg-hover: var(--color-60);
  --account-copy-icon-color: var(--color-700);

  /* Balance */
  --balance-info-title-color: var(--color-90);
  --balance-deposit-color: var(--color-10);
  --balance-deposit-bg: var(--tertiary-color-10);
  --balance-deposit-bg-hover: var(--tertiary-color-20);
  --balance-withdraw-color: var(--secondary-text-color);
  --balance-withdraw-bg: var(--color-50);
  --balance-withdraw-bg-hover: var(--color-60);

  /* NavigationBar */
  --navigation-bar-search-bg: var(--color-30);
  --navigation-bar-search-bg-hover: var(--color-40);
  --navigation-bar-search-text-color: var(--tertiary-text-color);
  --navigation-bar-search-text-color-hover: var(--secondary-text-color);
  --navigation-bar-providers-bg: var(--color-30);
  --navigation-bar-providers-bg-hover: var(--color-40);
  --navigation-bar-providers-text-color: var(--text-color);

  /* FilterModal */
  --filter-modal-window-bg: var(--color-20);
  --filter-modal-type-toggle-bg: var(--color-30);
  --filter-modal-type-toggle-button-bg: var(--color-40);
  --filter-modal-type-toggle-button-bg-hover: var(--color-50);
  --filter-modal-type-toggle-button-bg-active: var(--color-60);
  --filter-modal-type-toggle-button-text-color: var(--secondary-text-color);
  --filter-modal-search-bg: var(--color-30);
  --filter-modal-search-bg-hover: var(--color-40);
  --filter-modal-search-text-color: var(--tertiary-text-color);
  --filter-modal-search-text-color-hover: var(--secondary-text-color);
  --filter-modal-provider-item-bg: var(--color-50);
  --filter-modal-provider-item-bg-hover: var(--color-60);
  --filter-modal-provider-item-text-color: var(--secondary-text-color);
  --filter-modal-provider-item-text-color-hover: var(--text-color);
  --filter-modal-window-border-bottom: var(--color-50);
  --filter-modal-window-shadow: 0 0px 20px 0 hsl(278deg 95% 8%); /* unique */

  /* Categories */
  --categories-category-bg: var(--color-30);
  --categories-category-bg-hover: var(--color-40);
  --categories-category-bg-active: linear-gradient(180deg, var(--primary-color-60) 0%, var(--primary-color-40) 100%);
  --categories-category-text-color: var(--secondary-text-color);
  --categories-category-text-color-active: var(--text-color);
  --categories-category-icon-color: var(--categories-category-text-color);
  --categories-category-icon-color-active: var(--categories-category-text-color-active);
  --categories-arrow-bg: var(--color-30);
  --categories-arrow-bg-hover: var(--color-40);
  --categories-left-arrow-bg: linear-gradient(to right, var(--root-bg) 10%, transparent);
  --categories-right-arrow-bg: linear-gradient(to left, var(--root-bg) 10%, transparent);

  /* GamesRow */
  --games-row-top-bar-title-color: var(--secondary-text-color);
  --games-row-top-bar-title-color-hover: var(--text-color);
  --games-row-show-more-bg: var(--color-30);
  --games-row-show-more-bg-hover: var(--color-40);
  --games-row-show-more-text-color: var(--secondary-text-color);
  --games-row-show-more-text-color-hover: var(--text-color);
  --games-row-navigation-button-bg: var(--color-30);
  --games-row-navigation-button-bg-hover: var(--color-40);

  /* Footer */
  --footer-bg: var(--color-20);
  --footer-line-color: var(--color-50);
  --footer-scroll-to-top-bg: var(--color-50);
  --footer-scroll-to-top-bg-hover: var(--color-60);
  --footer-support-banner-bg: var(--color-80);
  --footer-support-banner-gradient: linear-gradient(129deg, transparent 0%, var(--primary-color-60) 170%);
  --footer-support-banner-full-time-bg: var(--color-80);
  --footer-support-banner-contact-button-bg: #FF6302;
  --footer-support-banner-contact-button-bg-hover: #ff6f16;

  /* GamePage */
  --game-page-game-window-outline: 1px solid var(--color-50); /* unique */

  /* GameCard */
  --game-card-bg: var(--color-30);
  --favorite-color: hsl(39, 92%, 70%); /* unique */

  /* ScrollToTopButton */
  --scroll-to-top-button-bg: var(--color-30);
  --scroll-to-top-button-bg-hover: var(--color-40);
  --scroll-to-top-button-icon-color: var(--color-300);
  --scroll-to-top-button-icon-color-hover: var(--color-700);

  /* TotalJackpot */
  --total-jackpot-bg: linear-gradient(90deg, #44036A 0%, #C960FD 100%); /* unique */
  --total-jackpot-info-block-bg: var(--color-10);
  --total-jackpot-info-block-second-bg: unset,
    radial-gradient(73% 124% at -9% 110%, #e47341 0%, #c65efc00 100%), radial-gradient(23% 52% at 22% 100%, #fbac10 0%, #618fff00 100%); /* unique */
  --total-jackpot-info-block-show-all-bg: hsl(0, 0%, 100%); /* unique */
  --total-jackpot-info-block-show-all-bg-hover: hsl(0, 0%, 93%); /* unique */
  --total-jackpot-info-block-show-all-color: var(--color-10);
  --total-jackpot-swiper-shadow: linear-gradient(90deg, #982bcc 2%, transparent 31%, transparent 71%, #c45cfa 99%); /* unique */
  --total-jackpot-swiper-pointer-bg: var(--color-90);

  /* HighlightGame */
  --highlight-game-bg: linear-gradient(to right, #DD2321, #FFB002);
  --highlight-game-info-block-play-bg: var(--total-jackpot-info-block-show-all-bg);
  --highlight-game-info-block-play-bg-hover: var(--total-jackpot-info-block-show-all-bg-hover);
  --highlight-game-info-block-play-color: var(--total-jackpot-info-block-show-all-color);

  /* MobileBar */
  --mobile-bar-bg: var(--color-10);
  --mobile-bar-item-icon-bg: var(--color-20);
  --mobile-bar-item-icon-color: var(--tertiary-text-color);
  --mobile-bar-item-icon-color-active: var(--primary-color-60);
  --mobile-bar-item-title-color: var(--tertiary-text-color);
  --mobile-bar-item-title-color-active: var(--primary-color-60);

  /* Banners */
  --banners-button-bg: var(--color-90);

  /* GamesGrid */
  --games-grid-show-more-bg: var(--primary-color-40);
  --games-grid-show-more-bg-hover: var(--primary-color-70);
  --games-grid-show-more-text-color: var(--text-color);
  --games-grid-progress-bg: var(--color-30);
  --games-grid-progress-fill-bg: var(--color-800);

  /* Banners */
  --banners-pagination-bullet-bg: var(--color-400);
  --banners-pagination-bullet-bg-active: var(--color-800);
  --banners-navigation-button-bg: var(--color-30);
  --banners-navigation-button-bg-hover: var(--color-40);

  /* RandomGame */
  --random-game-bg: linear-gradient(90deg, #44036A 0%, #C960FD 100%);
  --random-game-play-bg: var(--total-jackpot-info-block-show-all-bg);
  --random-game-play-bg-hover: var(--total-jackpot-info-block-show-all-bg-hover);
  --random-game-play-color: var(--total-jackpot-info-block-show-all-color);
  --random-game-winner-border-color: var(--color-800);

  /* InformationPage */
  --information-page-list-bg: var(--color-20);
  --information-page-list-bg-active: var(--color-50);
  --information-page-top-bar-icon-color: hsl(217, 99%, 68%); /* unique */

  /* BonusesPage */
  --bonuses-page-bonus-item-bg-0: linear-gradient(90deg, #240038, #600090); /* unique */
  --bonuses-page-bonus-item-bg-1: linear-gradient(189deg, #a44dd4, #3d025a); /* unique */
  --bonuses-page-bonus-item-bg-2: linear-gradient(260deg, #2f0546, #722399); /* unique */
  --bonuses-page-bonus-item-bg-3: linear-gradient(-30deg, #8d2fc1, #300446); /* unique */
  --bonuses-page-show-more-bg: var(--total-jackpot-info-block-show-all-bg);
  --bonuses-page-show-more-bg-hover: var(--total-jackpot-info-block-show-all-bg-hover);
  --bonuses-page-show-more-color: var(--total-jackpot-info-block-show-all-color);
  --bonuses-description-bg: var(--profile-page-tab-window-bg);
  --bonuses-description-fields-group-bg: var(--profile-page-button-bg);
}


body .HighlightGame .container .highlight-game-block .game-image-wrapper {
  right: 80px;
}

body .RandomGame .container .random-game-block .winner-card .graphic-2 {
  top: -39px;
}

body .RandomGame .container .random-game-block .winner-card .winner-border {
  outline: none;
}

body .RandomGame .container .random-game-block .winner-card .winner-pointer,
body .RandomGame .container .random-game-block .winner-card .winner-pointer-2 {
  display:none !important;
}

.RandomGame[data-mobile="false"] .container .random-game-block .games-block.is-visible .games-block-inner .game-card:nth-child(2) {
  transform: scale(1.1);
}

body .RandomGame[data-mobile=true] .container .random-game-block .winner-card .graphic-2 {
  right: -42px;
}

.Header[data-mobile='false'] .container .first-part:before {
  content: '';
  height: 100%;
  max-width: 190px;
  max-height: 44px;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  pointer-events:none;
  background: url(/images/branding/logo-2.webp);
  background-size: contain;
  background-repeat: no-repeat;
  width: 130.84px;
  position: absolute;
  animation: logo-anim 2s ease infinite;
}

@keyframes logo-anim {
  0% {opacity:0}
  50% {opacity:1}
  100% {opacity:0}
}