:root {
  /* RGB */
  /*Brand*/
  --blue-rgb: 31, 34, 105;
  --shade-violet-rgb: 42, 40, 59;
  --light-blue-rgb: 0, 86, 179;
  --dark-violet-rgb: 21, 20, 29;

  --deep-dark-blue-rgb: 3, 7, 30;
  --dark-blue-rgb: 7, 5, 26;
  --shade-blue-rgb: 72, 82, 97;

  /*Base*/
  --white-rgb: 255, 255, 255;
  --total-black-rgb: 0, 0, 0;
  --light-gray-rgb: 222, 223, 228;
  --shade-gray-rgb: 174, 184, 200;
  --gray-rgb: 82, 85, 105;
  --dark-rgb: 0, 23, 36;

  /*Brand Colors */
  --blue-color: rgb(var(--blue-rgb));
  --dark-blue-color: rgb(var(--dark-blue-rgb));
  --shade-blue-color: rgba(var(--shade-blue-rgb));
  --deep-dark-blue-color: rgb(var(--deep-dark-blue-rgb));

  --shade-violet-color: rgba(var(--shade-violet-rgb));
  --dark-violet-color: rgb(var(--dark-violet-rgb));
  --light-blue-color: rgb(var(--light-blue-rgb));

  /*Base*/
  --total-black-color: rgb(var(--total-black-rgb));
  --white-color: rgb(var(--white-rgb));
  --light-gray-color: rgb(var(--light-gray-rgb));
  --shade-gray-color: rgba(var(--shade-gray-rgb));
  --gray-color: rgb(var(--gray-rgb));
  --dark-color: rgb(var(--dark-rgb));

  /*Fonts*/
  --font-size: 16px;
  --line-height: 24px;
  --font-weight: 400;
  --font-more-weight: 600;
  --font-semi-bold: 600;
  --font-bold: 800;
  --font-extra-bold: var(--font-bold);
  --font-family-primary: 'Montserrat', sans-serif;
  --font-family-secondary: 'Montserrat', sans-serif;
  --title-size: 18px;

  /*Design tokens start*/
  --brand-primary-color: var(--light-blue-color);
  --brand-primary-color-rgb: var(--light-blue-rgb);

  --brand-accent-color: var(--blue-color);
  --brand-accent-color-rgb: var(--blue-rgb);

  --brand-secondary-color: var(--shade-violet-color);
  --brand-secondary-color-rgb: var(--shade-violet-rgb);
  --brand-secondary-color-dark-rgb: var(--brand-secondary-color-rgb);

  --brand-dark-color: var(--dark-color);
  --brand-dark-color-rgb: var(--dark-rgb);

  --brand-text-color: var(--white-color);
  --brand-icon-color: var(--white-color);
  --brand-border-radius-size: 8px;
  /*Design tokens end*/
  --brand-gradient: var(--section-background);

  /* Additional header */
  --additional-header-left: linear-gradient(
    94deg,
    #ff7a00 -6.31%,
    #fedd2a 105.9%
  );
  --additional-header-right: linear-gradient(
    92deg,
    #2a283b -8.95%,
    #2f6ce7 113.4%
  );
  --additional-header-right-circle-gradient: transparent;
  --additional-header-right-circle-box-shadow: 0px 0px 0px 0px #1b79e1;
  --additional-header-border-color: #fff;
  --additional-header-text-color: var(--header-text);
  /* Additional header END*/

  --base-muted-color: var(--gray-color);

  /* Header */
  --header-text-color: var(--brand-text-color);
  --header-burger-background-color: var(--brand-primary-color);
  --header-burger-icon-color: var(--brand-icon-color);
  --header-search-icon-color: var(--brand-accent-color);
  --header-border-color: none;
  --header-mobile-max-logo-width: 40px;
  --header-menu-text: none;
  --header-mobile-height-logo: 40px;

  /*Links*/
  --link-hover-color: var(--brand-primary-color);

  /*Sidebar*/
  --sidebar-max-width: 250px;
  --sidebar-closed-width: 80px;
  --sidebar-background-color: var(--layout-header-color);
  --sidebar-text-color: var(--base-muted-color);
  --sidebar-border-color: rgba(var(--shade-blue-rgb));
  --sidebar-border-radius: var(--brand-border-radius-size);
  --sidebar-item-hover-color: var(--shade-blue-color);
  --sidebar-accented-item-hover-color: var(--light-blue-color);

  --sidebar-accented-item-border: linear-gradient(180deg, #36c3ff, #3b97ff);

  /*Game card*/
  --bonus-label-text-color: rgba(255, 243, 37, 1);
  --bonus-label-background-color: var(--brand-primary-color);
  --bonus-label-box-shadow: var(--banner-text-box-shadow);
  --game-card-flex-params: 0 0 calc(20% - 10px);
  --game-card-max-width: 350px;
  --game-card-max-width-mobile: 350px;

  --game-level-card-background-color: var(--brand-primary-color);
  --game-level-card-text-color: var(--brand-text-color);

  --card-background-color: var(--shade-blue-color);

  --nx-level-card-label-background-color: rgba(48, 52, 137, 1);
  --card-label-box-shadow: 0 0 0 1px rgba(27, 121, 225, 1);
  --loyalty-level-cards-detail-sub-title: rgba(27, 121, 225, 1);
  --nx-level-card-border: 1px solid rgba(48, 52, 137, 1);
  --nx-level-card-listitem-border: 1px solid rgba(255, 255, 255, 0.4);
  --nx-level-card-img-radius: var(--border-radius-size);
  --nx-level-card-background: rgba(42, 40, 59, 1);

  /*Layout*/

  --layout-header-color: var(--brand-accent-color);
  --layout-background-color: var(--dark-blue-color);
  --background-image-size: cover;
  --background-image-position: center;
  --background-image-reapeat: repeat;
  --layout-background-light: transparent;
  --layout-background-dark: var(--dark-blue-color);
  --layout-background-muted: rgba(var(--shade-gray-rgb), 0.3);
  --layout-modal-background-color: linear-gradient(
    180deg,
    rgba(21, 20, 29, 0.9) 0%,
    #15141d 33.33%,
    #15141d 66.67%,
    #090405 100%
  );
  --layout-fullscreen-background-color: var(--brand-secondary-color);
  --search-icon-color: var(--brand-text-color);

  /*Article*/
  --article-background-color: var(--brand-secondary-color);

  /*Banners*/
  --banner-text-color: var(--brand-text-color);
  --banner-title-text-color: #1b79e1;
  --banner-sub-text-color: var(--white-color);
  --banner-text-box-shadow: #000000 1px 0 10px;
  --banner-mobile-height: 300px;

  /*Bottom bar*/
  --bottom-bar-background-color: rgba(var(--blue-rgb), 0.1);

  /*Modals*/
  --modal-backdrop-color: linear-gradient(
    180deg,
    rgba(48, 52, 137, 0.85) 36%,
    rgba(12, 13, 35, 0.85) 100%
  );
  --layout-modal-border: 3px solid #1b79e1;

  /*Section*/
  --section-background: #2a283b;
  --winners-section-background: var(--section-background);
  --section-paddings: 16px;
  --section-border-radius: 16px;
  --setting-section-background: var(--section-background);
  --section-container-margin: 25px 0;
  --section-container-margin-v2: 25px 0;
  --section-container-mobile-margin: 10px 0;

  /*Promo*/
  --promotion-background: var(--section-background);
  --promotion-special-background: #ff2f01;
  --promotion-text-color: var(--text-color);

  --promo-progress-container-card-background: var(--new-table-background);
  --promo-progress-ternary-card-background: var(--new-table-background);
  --promo-progress-ternary-card-wraper: var(--new-table-background) border-box;
  --promo-progress-secret-card-background: var(--new-table-background);
  --promo-progress-secret-card-wraper: var(--new-table-background) border-box;
  --promo-progress-card-label-color: var(--new-table-background);

  /*Providers Block*/
  --providers-background: var(--promotion-background);
  --providers-list-opacity: 1;

  /*Service block*/
  --service-block-icon-background-color: var(--brand-primary-color);

  /*Headline*/
  --headline-font-size: 21px;
  --headline-font-weight: 800;
  --headline-icon-background-color: var(--brand-primary-color);
  --header-icon-color: #fff;
  --header-height-size: 70px;
  --headline-title-color: var(--text-color);

  /*Dropdown menu*/
  --dropdown-background-color: var(--brand-secondary-color);
  --dropdown-text-color: var(--primary-text-color);
  --dropdown-menu-text-color: var(--secondary-text);
  --dropdown-menu-item-hover-color: var(--brand-primary-color);
  --dropdown-button-box-shadow: 0 0 0 1px rgba(var(--light-gray-rgb), 0.1);
  --dropdown-button-box-shadow-hover: 0 0 0 1px
    rgba(var(--brand-accent-color-rgb), 1);
  --dropdown-arrow-image: url("2c15fcc2832af144742ce322be593eed19b3bfd2.svg");

  --deposit-btn-color: linear-gradient(
    90deg,
    var(--brand-secondary-color),
    var(--brand-secondary-color-dark-rgb)
  );
  --deposit-button-background: var(--brand-dark-color);

  /*Side menu*/
  --side-menu-background-color: #15131d;
  --side-menu-text-color: var(--primary-text-color);
  --side-menu-item-background-color: var(--brand-secondary-color);
  --side-menu-item-background-active: var(--brand-accent-color);
  --side-menu-notification-text-color: var(--brand-text-color);

  /*User menu*/
  --user-menu-background-color: var(--brand-dark-color);
  --user-menu-text-color: var(--text-color);
  --side-menu-game-hover-color: var(--accent-color);
  --side-menu-game-background-color: var(--brand-primary-color);

  /*Switcher*/
  --switcher-background: var(--brand-primary-color);
  --switcher-border: var(--brand-primary-color);
  --switcher-circle-background: var(--brand-accent-color);
  --switcher-circle-checked-background: var(--brand-primary-color);
  --switcher-background-checked: var(--brand-accent-color);

  /*Category bar*/

  --category-bar-height-size: 62px;
  --category-bar-width-size: 124px;
  --category-bar-icon-width: 24px;
  --category-bar-trigger-btns-width: var(--category-bar-height-size);
  --category-bar-btns-gap: 8px;
  --category-bar-active-background-color: var(--brand-primary-color);
  --category-bar-active-text-color: var(--brand-text-color);
  --category-bar-active-icon-color: var(--brand-icon-color);

  --category-bar-hover-background-color: var(--brand-secondary-color);
  --category-bar-background-color: rgba(var(--shade-violet-rgb), 1);
  --category-bar-text-color: var(--brand-text-color);
  --category-bar-hover-text-color: var(--brand-primary-color);
  --category-bar-hover-border-color: var(--brand-primary-color);
  --category-bar-icon-color: var(--brand-primary-color);
  --category-bar-icon-hover-color: var(--brand-text-color);
  --category-bar-border-color: none;
  --category-bar-border-active-color: none;
  --category-bar-box-shadow-color: 0 0 0 1px var(--primary-color);
  --category-bar-box-shadow-hover-color: 0 0 0 1px
    var(--category-bar-hover-border) inset;

  /*Filters*/
  --filter-background-color: var(--category-bar-background-color);
  --filter-box-shadow-color: var(--brand-primary-color);
  --filter-icon-color: var(--brand-primary-color);
  --filter-icon-color-hover: var(--brand-primary-color);
  --filter-border-radius: var(--brand-border-radius-size);

  /*Buttons*/
  --play-button-background-color: var(--brand-primary-color);

  --primary-button-color: var(--brand-primary-color);
  --primary-button-text-color: var(--brand-text-color);
  --primary-button-disabled-color: rgba(var(--brand-primary-color-rgb), 0.5);

  --secondary-button-color: var(--brand-secondary-color);
  --secondary-button-text-color: rgba(var(--light-gray-rgb), 0.6);
  --secondary-button-bg-hover-color: var(--brand-primary-color);
  --secondary-button-text-hover-color: var(--brand-text-color);

  --outline-button-color: var(--accent-color);
  --outline-button-border-color: var(--brand-primary-color-rgb);
  --outline-button-text-color: var(--brand-text-color);

  --tertiary-button-color: var(--brand-secondary-color);
  --tertiary-button-text-color: rgba(var(--light-gray-rgb), 0.6);
  --tertiary-button-bg-hover-color: var(--dark-gray-color);

  --radio-button-checked-color: var(--base-muted-color);
  --radio-button-not-checked-border-color: rgba(var(--white-rgb), 1);

  --link-button-color: var(--brand-primary-color);
  --link-button-text-color: var(--brand-primary-color);
  --link-button-text-hover-color: var(--brand-primary-color);

  --carousel-button-bg-color: var(--brand-primary-color);
  --carousel-button-disabled-color: var(--brand-primary-color);
  --carousel-button-hover-color: var(--brand-primary-color);
  --carousel-round-button-color: var(--dark-violet-color);
  --carousel-button-disabled-opacity-value: 0.5;
  --carousel-dots-indecator: var(--white-rgb);
  --carousel-dots-indecator-active-background: var(--primary-color);
  --carousel-dots-indecator-background: transparent;
  --carousel-dots-indecator-active-border: 1px solid var(--white-rgb);
  --carousel-dots-indecator-border: 1px solid var(--white-rgb);

  /*Back button*/
  --back-button-bg-color: var(--setting-section-background);
  --back-button-icon-color: var(--brand-text-color);
  --back-button-icon-hover: var(--brand-primary-color);

  /*Text*/
  --primary-text-color: var(--brand-text-color);
  --secondary-text-color: rgba(var(--light-gray-rgb), 0.6);
  --secondary-text-hover-color: rgba(var(--light-gray-rgb), 1);
  --muted-text-color: var(--brand-accent-color);

  --divider-color: var(--shade-blue-color);
  --avatar-background-color: var(--shade-blue-color);

  /*Tables*/
  --table-active-text-color: var(--black-color);

  /*Box Shadows*/
  --box-shadow-primary-button: 0 0 0 1px var(--primary-button-color);
  --box-shadow-secondary-button: 0 0 0 1px
    rgba(var(--brand-primary-color-rgb), 1);
  --box-shadow-secondary-button-hover: none;
  --box-shadow-button-hover: none;
  --box-shadow-button-accent: 0 4px 10px 0
    rgba(var(--brand-accent-color-rgb), 0.4);
  --box-shadow-button-outline: 0 0 0 1px
    rgba(var(--outline-button-border-color), 1);
  --box-shadow-button-outline-hover: 0 0 0 1px
    rgba(var(--brand-primary-color-rgb), 1);
  --box-shadow-round-button: 0 0 0 1px rgba(var(--brand-primary-color-rgb), 1);
  --box-shadow-radio-button-checked: 0 0 0 1px var(--brand-text-color);
  --box-shadow-radio-button-hover: 2px solid rgba(var(--white-rgb), 0.2);
  --box-shadow-card-overlay: inset 0 0 0 1px var(--brand-primary-color);
  --box-shadow-header: none;
  --box-shadow-input-focus: 0 0 0 1px var(--brand-primary-color);

  /*Inputs*/
  --input-background-color: rgba(var(--white-rgb), 0.15);
  --footer-input-background-color: var(--input-background-color);
  --input-disabled-background-color: rgba(var(--shade-gray-rgb), 0.1);
  --input-text-color: var(--light-gray-rgb);
  --input-label-color: rgba(var(--light-gray-rgb), 0.6);

  /*Border Radius*/
  --border-radius-size: 8px;
  --border-radius-section: 16px;
  --border-radius-tab-size: 10px;
  --border-radius-service-block-size: 24px;
  --border-radius-modal-size: 16px;
  --border-radius-banner-size: 16px;
  --border-radius-button-size: 8px;

  /*Overlays and hovers*/
  --card-hover-color: rgba(var(--dark-violet-rgb), 0.6);
  --card-hover-states-text-color: var(--brand-text-color);

  /*Icons*/
  --signup-icon-color: var(--brand-primary-color);
  --carousel-button-svg-color: var(--brand-icon-color);
  --carousel-button-round-svg-color: var(--brand-icon-color);
  --carousel-button-svg-disabled-color: var(--base-muted-color);
  --carousel-button-svg-hover-color: var(--brand-icon-color);

  /*Images*/
  --background-image: linear-gradient(
    180deg,
    #15141d 0%,
    var(--dark-violet-color) 100%
  );

  --footer-color: transparent;
  --footer-text-color: var(--brand-text-color);

  --wrapper-max-width-size: 1920px;
  --footer-max-width-size: 1240px;
  --wrapper-container-padding: 0 16px;

  --tabs-font-size: var(--font-bold);
  --tabs-container-gap: 8px;
  --tabs-container-background: none;

  --linear-gradient-8: linear-gradient(
    180deg,
    #36ff32,
    #36ff32,
    #18c814,
    #18c814
  );
  /* Action Card */
  --action-card-subtitle: var(--brand-accent-color);

  --calendar-modal-background: var(--layout-background-color);
  --calendar-items-background: #2a283b;
  --calendar-items-color: var(--game-level-card-text-color);

  --calendar-counter-container-bg: var(--category-bar-background);
  --calendar-day-counter-bg: var(--category-bar-background-color);
  --calendar-day-counter-active-bg: var(--category-bar-active-background-color);
  --calendar-day-counter-text: var(--category-bar-text);
  --calendar-day-counter-borders: var(--category-bar-hover-border);
  --calendar-day-counter-active-borders: var(--calendar-day-counter-borders);
  --calendar-money-color: #ffd203;

  --calendar-promo-block-bg: linear-gradient(
    180.34deg,
    var(--layout-background-color) 23.74%,
    var(--category-bar-active-background-color) 99.77%
  );
  --calendar-promo-block-border: 0 0 0 4px var(--category-bar-hover-border);
  --calendar-checkbox-color: #06b500;
  --calendar-promo-block-day-border: none;
  --calendar-promo-block-color: var(--text-color);
  --calendar-promo-block-info-bg: var(--layout-background-color);
  --calendar-promo-block-info-fill: var(--category-bar-hover-border);

  --list-item-color: var(--calendar-promo-block-color);
  --list-item-background: var(--calendar-promo-block-bg);
  --list-item-background-hover: var(--calendar-promo-block-bg);
  --list-item-border: var(--calendar-promo-block-day-border);

  --gradient-one: var(--calendar-items-background);
  --gradient-two: var(--calendar-items-background);
  --bar-down: #13661d;
  --bar-up: #50c250;

  --hold-card-text-color: #9698a1;
  --hold-close-btn-bg: #000;
  --hold-close-btn-color: white;
  --hold-close-btn-radius: 8px;
  --hold-close-btn-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --hold-close-btn-border: 1px solid rgba(27, 121, 225, 0.4);

  --registration-logo-height: 56px;
  --mobile-registration-logo-height: 50px;

  --google-btn-bg: #001724;
  --google-btn-border-radius: 8px;

  --select-input-text-color: white;
  ---pwa-icon: url("bb091e26444f80b30842d4f6c824e78de5e48d6b.svg");

  --banner-additional-exclusive-text: #fff325;
  --banner-additional-text: var(--banner-text);
  --banner-additional-radius: var(--section-border-radius);
  --banner-additional-border-color: linear-gradient(180deg, #fff325, #8456af);

  --onboarding-nav-color: #d9d9d9;
  --onboarding-bg: var(--brand-accent-color);
  --onboarding-nav-select-color: var(--primary-button);

  --nice-button-bg: linear-gradient(145deg, #303489, #1b79e1);
  --nice-button-color: #fff;
  --nice-button-box-shadow: 5px 5px 10px #303489, -5px -5px 10px #1b79e1;

  --new-table-text: #fff;
  --new-table-text2: #fff;
  --new-table-background: #15131d;
  --new-table-tr-background: #1f1e2c;
  --new-table-tr2-background: #15131d;
  --new-table-tr-hover: #0e2031;
  --new-table-border-color: #383550;
  --new-table-head-background: #15131d;
  --new-table-buttons-background: linear-gradient(145deg, #322f4a, #2e2c40);

  --chat-input: var(--new-table-tr-hover);
  --chat-background: var(--new-table-background);
  --chat-background-text: var(--header-text);
  --chat-header: var(--new-table-head-background);
  --chat-item-radius: 10px;
  --chat-items: #2a283b;
  --chat-items-hover: var(--new-table-tr-background);

  --travvel-banner-gradient:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(145deg, #e1c384, #ffae24, #483015) border-box;
  --scrollbar-color: var(--chat-items);
  --scrollbar-color-hover: var(--chat-items-hover);
  --scrollbar-background: var(--layout-background-color);

  --footer-link-icon-background: var(--brand-primary-color);
  --footer-link-icon-background-wrapper: var(--brand-text-color);
  --footer-menu-text: var(--header-text);
  --accented-mask:
    linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);

  --payment-method-background: #181a1f;
  --payment-method-text: #ffffff;
  --payment-item-bg: #2f313a;
  --payment-item-text: #ffffff;
  --payment-item-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  --game-sidebar-color: var(--section-background);

  --stats-bg-primary: #161a2b;
  --stats-bg-secondary: #242a3d;
  --stats-text-primary: #f1f5f9;
  --stats-text-secondary: #b0b8c4;

  --stas-progress-circle: var(--brand-accent-color);
  --stas-progress-circle-bg: var(--layout-background-color);

  --table-border-radius: var(--section-border-radius);
  --table-item-border-radius: 4px;

  --credentials-container-background: var(--layout-modal-background-color);
  --credentials-header-background: var(--section-background);
  --credentials-text-color: var(--primary-text-color);
  --credentials-secondary-text-color: var(--secondary-text-color);
  --credentials-action-background: var(--input-background-color);
  --credentials-action-hover-background: var(--secondary-button-color);
  --credentials-border-color: var(--dropdown-button-box-shadow);
  --credentials-success-background: var(--brand-accent-color);

  --promotion-title-color: var(--game-level-card-text-color);
  --bottom-box-shadow: 0 1px 0 0 var(--setting-section-background-color);

  --header-plus-button-color: #ffffff;

  --challenge-color: var(--new-table-text2);
  --challenge-background: var(--section-background-color);
}

@media (max-width: 1240px) {
  :root {
    --wrapper-container-padding: 0 10px;
  }
}