* {
  /* scrollbar-width: thin; */
  /* scrollbar-color: #73878D #3A3E40; */
  /* -webkit-tap-highlight-color: transparent; */
}
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
*::-webkit-scrollbar-track {
  background: rgba(0,0,0,0);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb {
  background: #1B7B88;
  border-radius: 4px;
}
*::-webkit-scrollbar-button:vertical:start:decrement {
  display: none;
}
*::-webkit-scrollbar-button:vertical:end:increment {
  display: none;
}
*::-webkit-scrollbar-button:horizontal:start:decrement {
  display: none;
}
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
}
html, body {
  padding: 0px;
  margin: 0px;
}
body {
  background-color: rgba(5, 5, 7, 1);
  font-family: 'Montserrat';
  overflow: hidden;

  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
html.zoomedLess,
body.zoomedLess {
  height: 100%;
}
body.noscroll .page_wrapper {
  overflow: hidden;
}
.flip-clock-wrapper ul {
  width: 44px !important;
}
.clock {
  zoom: 0.7;
  -moz-transform: scale(1);
}
.flip-clock-wrapper {
  width: auto !important;
  margin: 1em auto !important;
}
.bonus_list_block .bonus_list_item:last-child {
  border-bottom: 0;
}
.raiting_list_block .raiting_list_item:last-child {
  border-bottom: 0;
}
.page_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  background-color: rgba(5, 5, 7, 1);
  width: 100%;
  height: 100vh;
  overflow: auto;
}
body.zoomedLess .page_wrapper {
  height: 100%;
}
.page_wrapper::-webkit-scrollbar {
  display: none;
}
.page_wrapper.main {
  background: linear-gradient(180deg, #010102 0%, #8ABCF6 100%);
  background-image: url(/app/images/background/fon_main.jpg);
  background-size: cover;
  background-position: center;
}
.page_wrapper.game {
  background-color: #000000;
  background-image: url(/app/images/background/fon_game.png);
  background-size: cover;
  background-position: center;
}
.page_wrapper.raiting_fon {
  background-color: #050507;
  background-image: url(/app/images/background/raiting_fon.png);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
}
.game_content_block {
  width: 100%;
  max-width: 394px;
  display: none;
}
.game_content_block.show {
  display: grid;
}
[data-rare="-4"]{
  --rare-color-f: #a0a6ab;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Common.jpg');
}
[data-rare="-3"]{
  --rare-color-f: #73e33b;
  --rare-color-s: #73e33b;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Uncommon.jpg');
}
[data-rare="-2"]{
  --rare-color-f: #2F75B5;
  --rare-color-s: #2F75B5;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Rare.jpg');
}
[data-rare="-1"]{
  --rare-color-f: #9d1cb0;
  --rare-color-s: #9d1cb0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Epic.jpg');
}
[data-rare="0"]{
  --rare-color-f: #FF8801;
  --rare-color-s: #FF8801;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Legendary.jpg');
}
[data-rare="1"]{
  --rare-color-f: #00B0F0;
  --rare-color-s: #00B0F0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Limited.jpg');
}
[data-rare="2"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #FFCC00;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection.jpg');
}
[data-rare="-3,-4"]{
  --rare-color-f: #73e33b;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Uncommon_Common.jpg');
}
[data-rare="-2,-4"]{
  --rare-color-f: #2F75B5;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Rare_Common.jpg');
}
[data-rare="-2,-3"]{
  --rare-color-f: #2F75B5;
  --rare-color-s: #73e33b;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Rare_Uncommon.jpg');
}
[data-rare="1,-4"]{
  --rare-color-f: #00B0F0;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Limited_Common.jpg');
}
[data-rare="1,-3"]{
  --rare-color-f: #00B0F0;
  --rare-color-s: #73e33b;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Limited_Uncommon.jpg');
}
[data-rare="1,-2"]{
  --rare-color-f: #00B0F0;
  --rare-color-s: #2F75B5;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Limited_Rare.jpg');
}
[data-rare="1,-1"]{
  --rare-color-f: #00B0F0;
  --rare-color-s: #9d1cb0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Limited_Epic.jpg');
}
[data-rare="1,0"]{
  --rare-color-f: #00B0F0;
  --rare-color-s: #FF8801;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Limited_Legendary.jpg');
}
[data-rare="0,-4"]{
  --rare-color-f: #FF8801;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Legendary_Common.jpg');
}
[data-rare="0,-3"]{
  --rare-color-f: #FF8801;
  --rare-color-s: #73e33b;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Legendary_Uncommon.jpg');
}
[data-rare="0,-2"]{
  --rare-color-f: #FF8801;
  --rare-color-s: #2F75B5;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Legendary_Rare.jpg');
}
[data-rare="0,-1"]{
  --rare-color-f: #FF8801;
  --rare-color-s: #9d1cb0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Legendary_Epic.jpg');
}
[data-rare="-1,-4"]{
  --rare-color-f: #9d1cb0;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Epic_Common.jpg');
}
[data-rare="-1,-3"]{
  --rare-color-f: #9d1cb0;
  --rare-color-s: #73e33b;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Epic_Uncommon.jpg');
}
[data-rare="-1,-2"]{
  --rare-color-f: #9d1cb0;
  --rare-color-s: #2F75B5;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Epic_Rare.jpg');
}
[data-rare="2,-4"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #a0a6ab;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection_Common.jpg');
}
[data-rare="2,-3"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #73e33b;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection_Uncommon.jpg');
}
[data-rare="2,-2"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #2F75B5;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection_Rare.jpg');
}
[data-rare="2,-1"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #9d1cb0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection_Epic.jpg');
}
[data-rare="2,0"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #00B0F0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection_Legendary.jpg');
}
[data-rare="2,1"]{
  --rare-color-f: #FFCC00;
  --rare-color-s: #00B0F0;
  --nft-rare-bg: url('/app/images/background/createNFT/FUSION_Collection_Limited.jpg');
}
.pageloading_block {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10000;
}
.pageloading_block .spinner {
  animation: spinner_rotate 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
}
.pageloading_block .spinner .path {
  stroke: #57FFE3;
  stroke-linecap: round;
  stroke-width: 2;
  animation: spinner_dash 1.5s ease-in-out infinite;
}
.uploading_block .spinner {
  animation: spinner_rotate 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: var(--spinner-height);
}
.uploading_block .spinner .path {
  stroke: #57FFE3;
  stroke-linecap: round;
  stroke-width: 2;
  animation: spinner_dash 1.5s ease-in-out infinite;
}
@keyframes spinner_rotate {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spinner_dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* ========================================================================== */

.bottom_menu {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  display: none;
  justify-content: center;
  z-index: 10;
}
.bottom_menu.show {
  display: flex;
}
.bottom_menu_content {
  width: 100%;
  /* max-width: 394px; */
  background-color: #171717;
  border-radius: 30px 30px 0px 0px;
  padding: 0px 0px 42px 0px;
  box-sizing: border-box;
}
.bottom_menu_play_wrapper {
  display: none;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 9px;
  align-items: center;
  padding: 12px 15px 15px 15px;
  background-color: #272727;
  border-radius: 30px 30px 0px 0px;
}
.bottom_menu_play_wrapper.show {
  display: grid;
}
.bm_play_avatar_coontainer {
  position: relative;
  padding: 0px 12px 3px 0px;
  box-sizing: border-box;
}
.bm_play_avatar_icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bm_play_raiting_num {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0px;
  right: 0px;
  background-color: #5684B9;
  height: 18px;
  padding: 0px 4px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bm_play_raiting_num.bmpr_counter {
  margin: 0px 2px;
}
.bm_play_raiting_num svg.branch_icon {
  width: 8px;
  height: auto;
  fill: #ffffff;
}
.bm_play_raiting_num svg.branch_icon:nth-child(3){
  transform: scale(-1, 1);
}
.bm_play_gamer_info_block {
  justify-self: start;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 9px;
}
.bm_play_gamer_nik {
  grid-column: 1/3;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bm_play_gamer_score {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.bm_play_gamer_score svg {
  width: 20px;
  height: auto;
  margin-right: 5px;
  fill: rgba(185, 185, 185, 1);
}
.bm_play_gamer_level {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  padding-left: 10px;
  position: relative;
}
.bm_play_gamer_level::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.bm_play_gamer_levels {
  grid-column: 1/3;
  grid-row: 2;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
}
.bm_play_gamer_heads {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
}
.bm_play_gamer_heads.second {
  padding-left: 8px;
}
.bm_play_gamer_heads.second::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.bm_play_gamer_heads svg {
  width: 15px;
  height: auto;
  margin-right: 6px;
  fill: #B9B9B9;
}
.bm_play_gamer_heads.active svg {
  fill: #FFCC00;
}
.bm_play_gamer_army {
  grid-column: 2/3;
  grid-area: 2;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
  padding-left: 8px;
}
.bm_play_gamer_army svg {
  width: 12px;
  height: auto;
  margin-right: 6px;
  fill: #B9B9B9;
}
.bm_play_gamer_army.second::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.bm_play_gamer_power {
  grid-column: 1/2;
  grid-area: 2;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
}
.bm_play_gamer_power svg {
  width: 15px;
  height: auto;
  margin-right: 6px;
  fill: #B9B9B9;
}
.bm_play_btn {
  height: 24px;
  background-color: #5684B9;
  border-radius: 12px;
  padding: 0px 7px 0px 9px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bm_play_btn svg {
  width: 18px;
  height: auto;
  margin-right: 5px;
  fill: #ffffff;
}

.bm_get_money_btn {
  height: 60px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(0deg, #1C2939 0%, #5C81AC 100%);
  /* padding: 12px 15px 0px 15px; */
  /* margin-bottom: 16px; */
  margin: 12px 15px 0px 15px;
}
.bm_get_money_btn.show {
  display: flex;
}
.bm_get_money_btn_title {
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bm_get_money_btn_title svg {
  width: 18px;
  height: auto;
  margin-left: 6px;
}
.bm_get_money_btn_title img {
  width: 18px;
  height: auto;
  margin-left: 6px;
  margin-bottom: -2px;
}
.bm_get_money_btn_label {
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

.bottom_menu_battle_wrapper {
  z-index: 1;
  position: relative;
  display: none;
  flex-direction: column;
  /* margin-bottom: 16px; */
  /* padding: 12px 15px 0px 15px; */
  margin: 12px 15px 0px 15px;
}
.bottom_menu_battle_wrapper.show {
  display: flex;
}
.bmm_battle_progress {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #323232;
  border-radius: 20px;
  z-index: -1;
  overflow: hidden;
}
.bmm_menu_battle_progress_line {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 0px;
  height: 100%;
  background-color: #474747;
  border-radius: 20px;
}
.bmm_menu_touch_ripple {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  z-index: 2;
}
.bmm_menu_touch_ripple span {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: rgba(64,125,204, 0.5);
  transform: scale(0);
  position: absolute;
  opacity: 1;
  z-index: 3;
}
.bmm_menu_touch_ripple span.ripple_anim {
  animation: ripple .6s linear;
}
@keyframes ripple {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.bmm_battle_info {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-areas:
  'battle_icon battle_status battle_status battle_coins coins_icon'
  'battle_icon battle_duration battle_farm battle_coins coins_icon';
  grid-row-gap: 0px;
  align-items: center;
  padding: 8px 14px 10px 12px;
  box-sizing: border-box;
}
.bmm_battle_icon {
  grid-area: battle_icon;
  width: 35px;
  height: auto;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bmm_battle_icon svg {
  width: 100%;
  height: auto;
  fill: #ffffff;
}
.bmm_battle_info_status {
  grid-area: battle_status;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bmm_battle_info_duration {
  grid-area: battle_duration;
  margin-right: 12px;
}
.bmm_battle_info_farm {
  grid-area: battle_farm;
}
.bmm_battle_info_farm,
.bmm_battle_info_duration {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  white-space: nowrap;
}
.bmm_battle_info_coins {
  grid-area: battle_coins;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-right: 7px;
  white-space: nowrap;
}
.balance-num,
.bmm_battle_info_coins {
  will-change: auto;
}
.bmm_battle_coins_icon {
  grid-area: coins_icon;
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bmm_battle_coins_icon svg {
  width: 100%;
  height: auto;
}
.bmm_battle_coins_icon img {
  width: 100%;
  height: auto;
}
.bottom_menu_list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 16px 15px 0px 15px;
}
.bottom_menu_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.bottom_menu_item.message::after {
  position: absolute;
  content: '';
  top: -3px;
  right: 13px;
  width: 6px;
  height: 6px;
  background-color: #E08512;
  border-radius: 50%;
}
.bottom_menu_item_icon {
  width: 33px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_menu_item_icon svg {
  fill: #78797D;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin-bottom: 3px;
}
.bottom_menu_item_text {
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  color: #78797D;
}
.bottom_menu_item.active .bottom_menu_item_text {
  color: #3D7CCF;
}
.bottom_menu_item.active svg {
  fill: #3D7CCF;
}
.bottom_menu_item.tutorial_focus .bottom_menu_item_text {
  color: #ffffff;
}
.bottom_menu_item.tutorial_focus .bottom_menu_item_icon svg {
  fill: #ffffff;
}

/* ========================================================================== */

.game_start_container {
  justify-items: center;
  padding: 130px 16px 120px 16px;
  box-sizing: border-box;
  grid-template-rows: 1fr;
  height: 100vh;
}
.game_stop_container {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 16px;
  box-sizing: border-box;
  padding: 130px 16px 120px 16px;
  grid-template-rows: 1fr;
  height: 100vh;
}
.game_over_container {
  justify-items: center;
  padding: 130px 16px 120px 16px;
  box-sizing: border-box;
  grid-template-rows: 1fr;
  height: 100vh;
}
.game_level_menu {
  padding: 16px;
  justify-items: center;
  grid-template-rows: auto auto 1fr;
  box-sizing: border-box;
  padding: 130px 16px 120px 16px;
}

/* ========================================================================== */

.hero_page {
  padding: 80px 0px 185px 0px;
  box-sizing: border-box;
  max-height: 100vh;
  overflow: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  position: relative;
}
body.zoomedLess .hero_page {
  max-height: 100%;
}
body[data-platform="android"] .hero_page {
  padding: 80px 0px 185px 0px;
}
body[data-platform="ios"] .hero_page {
  padding: 96px 0px 185px 0px;
}
.game_main_logo {
  position: absolute;
  left: 50%;
  top: 36px;
  transform: translate(-50%, 0px);
  width: 100px;
  height: auto;
}
body[data-platform="android"] .game_main_logo {
  top: 36px;
}
body[data-platform="ios"] .game_main_logo {
  top: 52px;
}
.game_main_logo img {
  width: 100%;
  height: auto;
}
.hero_info_head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(130px, auto) 1fr;
  grid-column-gap: 19px;
  padding: 0px 16px 20px 16px;
  box-sizing: border-box;
}
.hero_page_actions_block {
  align-self: end;
  display: grid;
  grid-row-gap: 20px;
  box-sizing: border-box;
  position: relative;
}

.main_settings_block {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: 1px solid #2A2A2A;
  background-color: rgba(5,5,25, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 16px 12px 16px;
  box-sizing: border-box;
  border-radius: 26px;
  transition: 0.25s;
  opacity: 0;
  visibility: hidden;
}
.main_settings_block.visible {
  opacity: 1;
  visibility: visible;
}
.main_settings_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.main_settings_head_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.main_settings_close_btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.main_settings_close_btn svg {
  width: 12px;
  height: auto;
  fill: #FFFFFF;
  stroke: none;
}
.main_settings_game {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 16px;
}
.main_settings_item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.main_settings_item .custom_radio_ch {
  margin-right: 12px;
}
.main_settings_language_block {
  margin-top: 24px;
}
.main_settings_language_label {
  font-weight: 600;
  font-size: 11px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #868686;
  margin-bottom: 8px;
}
.language_select {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  background-color: #0C0D0F;
  border: 1px solid rgba(0, 0, 0, 0);
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding: 0px 8px;
  box-sizing: border-box;
}
.language_select:focus {
  outline: none;
  border: 1px solid #00CAD1;
}
.hero_page_actions_block .spinner {
  animation: spinner_rotate 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}
.hero_page_actions_block .spinner .path {
  stroke: #57FFE3;
  stroke-linecap: round;
  stroke-width: 2;
  animation: spinner_dash 1.5s ease-in-out infinite;
}
.hp_action_btn {
  width: 100%;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.20);
  border-radius: 25px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 24px 1fr auto;
  grid-column-gap: 4px;
  align-items: center;
  padding: 0px 5px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hp_action_btn.play {
  /* background-color: rgba(11, 247, 255, 0.35); */
  background: linear-gradient(180deg, rgba(115, 160, 214, 0.7) 0%, rgba(18, 29, 41, 0.7) 100%);
}
.hp_action_btn_text,
.hp_action_btn_counter {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.hp_action_btn_counter {
  text-align: left;
  position: relative;
  /* text-align: right; */
}
.hp_action_btn_icon,
.hp_action_btn_arrow {
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp_action_btn_icon svg {
  width: auto;
  max-width: 100%;
  height: auto;
  fill: #ffffff;
}
.hp_action_btn.play .hp_action_btn_icon {
  justify-self: center;
}
.hp_action_btn.play .hp_action_btn_icon svg {
  width: 21px;
  fill: #57FFE3;
}
.hp_action_btn.warehouse .hp_action_btn_icon svg {
  width: 30px;
  fill: #FFFFFF;
}
.hp_action_btn.army .hp_action_btn_icon svg {
  width: 24px;
  fill: #FFFFFF;
}
.hp_action_btn_icon img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.hp_action_btn_arrow svg {
  width: 16px;
  height: auto;
  margin-right: 5px;
}
.hp_action_btn.play .hp_action_btn_arrow svg path {
  stroke: #57FFE3;
}
.hero_main_info {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.hero_points_block {
  width: 100%;
  display: grid;
  grid-row-gap: 10px;
}
.money_buble_block {
  width: 100%;
  position: absolute;
  bottom: 15px;
  right: 0px;
  height: 30px;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  padding: 0px 6px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  animation: 3s money_buble linear forwards;
}
.money_buble_block span {
  grid-column: 2/3;
}
@keyframes money_buble {
  to {
    transform: translate(0px, -200px);
    opacity: 0;
  }
}
.hero_points_item {
  width: 100%;
  height: 30px;
  padding: 0px 6px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 15px;
  display: grid;
  align-items: center;
  grid-template-columns: 20px 1fr;
  position: relative;
}
.hero_points_item .spinner {
  animation: spinner_rotate 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}
.hero_points_item .spinner .path {
  stroke: #57FFE3;
  stroke-linecap: round;
  stroke-width: 2;
  animation: spinner_dash 1.5s ease-in-out infinite;
}
.hero_points_item_text {
  justify-self: center;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  position: relative;
}
.hero_points_item svg {
  width: auto;
  max-width: 17px;
  height: auto;
  fill: #ffffff;
}
.hero_points_item img {
  width: auto;
  max-width: 17px;
  height: auto;
}
.hero_level_container {
  margin-bottom: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user_maininfo_block {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  margin-bottom: 10px;
}
.hero_level_label {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  position: relative;
}
.user_maininfo_tonbalance {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
}
.user_maininfo_tonbalance img {
  width: 16px;
  height: auto;
  margin-right: 4px;
}
.hero_level_block {
  width: max-content;
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  padding: 0px 6px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  animation: 2s level_buble linear forwards;
}
@keyframes level_buble {
  to {
    transform: translate(0px, -100px);
    opacity: 0;
  }
}
.hero_level_indicator_block {
  padding: 7px;
  box-sizing: border-box;
  position: relative;
}
@keyframes nft_text_anim {
  0%, 25% { transform: rotate(0deg); }
  5% { transform: rotate(7deg); }
  10% { transform: rotate(-7deg); }
  15% { transform: rotate(7deg); }
  20% { transform: rotate(-7deg); }
}
.mainPageNFTbtn {
  position: absolute;
  left: 9px;
  top: -4px;
  transform: translate(-50%, 2px);
  display: flex;
  z-index: 10;
  cursor: pointer;
}
.mainPageNFTbtn .airdrop_text {
  font-weight: 900;
  font-size: 22px;
  color: transparent;
  background: linear-gradient(to bottom, #00E7E9, #00FD3B);
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
  display: inline-block;
  animation: 3s nft_text_anim ease-in-out 1s infinite;
}
.mainPageNFTbtn .airdrop_text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-stroke: 1px #2d2d2d;
  text-stroke: 1px #2d2d2d;
  z-index: -1;
}
.settings_btn {
  position: absolute;
  left: 85px;
  top: 0px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  --rotate-speed: 12s;
}
.settings_btn.open {
  --rotate-speed: 3s;
}
.settings_btn svg {
  width: 25px;
  height: auto;
  fill: #738595;
  animation: var(--rotate-speed) gear_anim linear infinite;
}
@keyframes gear_anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.hero_level_indicator_block .level_progress {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 24px);
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.hero_level_indicator_block .level_progress .path {
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-width: 2;
  stroke-dasharray: 0, 125;
  stroke-dashoffset: 0;
}
.hero_level_icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero_container {
  display: grid;
  grid-template-columns: minmax(130px, 1.5fr) 1fr;
  grid-column-gap: 0px;
  padding: 0px 16px 0px 0px;
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  min-height: min-content;
  overflow: auto;
}
.hero_rune_container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero_rune_container .rune_cell .segyn_icon {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 16px;
  height: auto;
  z-index: 4;
}
.hero_avatar_block {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero_avatar_block .spinner {
  animation: spinner_rotate 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
}
.hero_avatar_block .spinner .path {
  stroke: #57FFE3;
  stroke-linecap: round;
  stroke-width: 2;
  animation: spinner_dash 1.5s ease-in-out infinite;
}
.hero_avatar_block .segyn_icon {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 30px;
  height: auto;
  z-index: 4;
}
.hero_avatar_block .nft_icon_wrapper,
.hero_avatar_block .nft_fusion_icon_wrapper {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 40px;
  height: auto;
  display: flex;
  z-index: 4;
}
.hero_avatar_block .nft_icon_wrapper img.nft_icon,
.hero_avatar_block .nft_fusion_icon_wrapper img.nft_fusion_icon {
  width: 100%;
  height: auto;
}
/* .hero_avatar_block::before {
  position: absolute;
  content: '';
  z-index: 1;
  left: 50%;
  bottom: 0px;
  width: 167px;
  height: 19px;
  background: rgba(18, 37, 54, 0.7);
  filter: blur(20px);
  transform: translate(-50%, 0px);
}
.hero_avatar_block::after {
  position: absolute;
  content: '';
  z-index: 1;
  right: 0px;
  bottom: 23px;
  width: 116px;
  height: 24px;
  background: rgba(18, 37, 54, 0.7);
  filter: blur(20px);
  transform: translate(0px, 0px) rotate(-15deg);
} */
.hero_avatar_block .hero_avatar_img {
  z-index: 3;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hero_name_block {
  min-height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 47px;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #DDECFF;
  position: relative;
}
.hero_name_block .spinner {
  animation: spinner_rotate 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
}
.hero_name_block .spinner .path {
  stroke: #57FFE3;
  stroke-linecap: round;
  stroke-width: 2;
  animation: spinner_dash 1.5s ease-in-out infinite;
}
.hero_assets_block {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 15px;
}
.hero_asset_item {
  justify-self: start;
  height: 30px;
  padding: 0px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.20);
  border-radius: 15px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  white-space: nowrap;
}
.hero_asset_item:nth-child(2n){
  justify-self: end;
}
.hero_asset_item:nth-child(7){
  width: 100%;
  grid-column: 1/3;
}
.hero_asset_item svg {
  width: auto;
  max-width: 26px;
  height: auto;
  margin-right: 5px;
  fill: #ffffff;
}
.hero_asset_item:nth-child(7) svg {
  width: 18px;
}

/* ========================================================================== */

.level_label {
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 50px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 70px;
}
.level_label span {
  font-size: 48px;
  margin-left: 5px;
  font-family: 'Arial';
}
.start_counter {
  font-style: normal;
  font-weight: 500;
  font-size: 64px;
  line-height: 50px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 70px;
  font-family: 'Arial';
}
.enemies_list {
  align-self: start;
  width: 100%;
  padding: 22px 45px 22px 40px;
  background-color: rgba(111, 168, 234, 0.05);
  border: 1px solid rgba(111, 168, 234, 0.71);
  border-radius: 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row-gap: 16px;
}
.enemy_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.enemy_main_info {
  display: flex;
  align-items: center;
}
.enemy_icon {
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 50px;
  height: auto;
  max-height: 58px;
  margin-right: 17px;
}
.enemy_counter_x {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  display: flex;
  align-items: center;
  letter-spacing: -0.32px;
  color: rgba(255,255,255,0.8);
  margin-right: 11px;
}
.enemy_counter {
  min-width: 21px;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 21px;
  display: flex;
  align-items: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  font-family: 'Arial';
}
.enemy_halth_info {
  display: flex;
  align-items: center;
}
.enemy_halth_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 11px;
}
.enemy_halth_icon img {
  width: 30px;
  height: auto;
}

/* ========================================================================== */

.game_motion_head {
  width: 100%;
  max-width: 394px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* margin-bottom: 55px; */
  position: fixed;
  top: calc(80px + 22px);
  left: 50%;
  transform: translate(-50%, 0px);
  padding: 0px 16px;
  box-sizing: border-box;
}
.game_play_head {
  width: 100%;
  max-width: 394px;
  display: none;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: start;
  /* margin-bottom: 55px; */
  position: fixed;
  top: 42px;
  left: 50%;
  transform: translate(-50%, 0px);
  z-index: 10;
}
.game_play_head.show {
  display: grid;
}
body[data-platform="android"] .game_play_head {
  top: 42px;
}
body[data-platform="ios"] .game_play_head {
  top: 55px;
}
.game_motion_settings_btn {
  grid-column: 1/2;
  justify-self: start;
  background-color: rgb(67 80 113 / 35%);
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 13px 0px 9px;
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  font-family: 'Arial';
  position: relative;
  transition: 0.25s;
}
.game_motion_settings_btn svg.settings_icon {
  width: 14px;
  height: auto;
  fill: #ffffff;
  margin-right: 6px;
}
.game_motion_settings_btn svg.next_arrow {
  width: 14px;
  height: auto;
  margin-left: 6px;
  transform: rotate(90deg);
  transition: 0.25s;
}
.game_motion_settings_btn.active {
  border-radius: 15px 15px 0px 0px;
}
.game_motion_settings_btn.active svg.next_arrow {
  transform: rotate(-90deg);
}
.game_motion_settings_btn.active .game_motion_settings_menu {
  max-height: 76px;
  padding: 6px 13px 16px 9px;
  border-radius: 0px 0px 15px 15px;
}
.game_motion_settings_menu {
  max-height: 0px;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
  padding: 0px 13px 0px 9px;
  box-sizing: border-box;
  border-radius: 15px;
  background-color: rgb(67 80 113 / 35%);
  transition: 0.25s;
}
.game_msettings_menu_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom_radio_ch_hidden {
  display: none;
}
.custom_radio_ch_rect {
  width: 28px;
  height: 14px;
  background-color: #363B48;
  border: 1px solid #4998FF;
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;
}
.custom_radio_ch_mark {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: #ffffff;
  transition: 0.25s;
}
.custom_radio_ch .custom_radio_ch_hidden:checked + .custom_radio_ch_rect {
  background-color: #4998FF;
}
.custom_radio_ch .custom_radio_ch_hidden:checked + .custom_radio_ch_rect .custom_radio_ch_mark {
  left: 14px;
}
.game_cpower {
  grid-column: 2/3;
  justify-self: end;
  background-color: rgb(67 80 113 / 35%);
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 13px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  font-family: 'Arial';
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.game_cpower svg {
  width: auto;
  max-width: 18px;
  height: auto;
  margin-left: 10px;
  fill: #57FFE3;
}
.game_pause_btn {
  grid-column: 2/3;
  background-color: rgb(67 80 113 / 35%);
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game_pause_btn svg {
  width: 12px;
  height: auto;
}
.game_level_label {
  grid-column: 3/4;
  justify-self: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-left: 7px;
  margin-top: 5px;
}
.game_money_block {
  grid-column: 4/5;
  justify-self: end;
  background-color: rgb(67 80 113 / 35%);
  height: 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 13px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-top: 40px;
}
.game_money_block svg {
  width: auto;
  max-width: 19px;
  height: auto;
  margin-left: 7px;
}
.game_money_block img {
  width: auto;
  max-width: 19px;
  height: auto;
  margin-left: 7px;
}
.game_over_anim {
  width: auto;
  max-width: 185px;
  height: auto;
  margin: 15px 0px;
}
.game_motion_title {
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 28px;
}
.game_motion_label {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 17px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #507AAE;
}
.game_motion_label svg {
  width: 18px;
  fill: #57FFE3;
  margin-left: 4px;
}
.game_motion_label.big {
  font-size: 24px;
  line-height: 21px;
  letter-spacing: -0.32px;
}

.game_over_inf_block {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  justify-items: center;
}
.game_over_inf_item {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-top: 19px;
  margin-bottom: 26px;
  white-space: nowrap;
}
.game_over_inf_item.small {
  font-size: 20px;
}
.game_over_inf_item.reward img {
  width: 33px;
  margin-left: 8px;
}
.game_over_inf_item.multiplier svg {
  width: 40px;
  height: auto;
  fill: #ffffff;
  margin-left: 12px;
  margin-bottom: -3px;
}
.game_motion_actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  margin-bottom: 21px;
}
.game_motion_actions.stop {
  margin-top: 31px;
  margin-bottom: 21px;
}
.game_motion_actions.start {
  margin: 21px 0px;
}
.game_motion_action_btn {
  width: 100%;
  height: 100px;
  background-color: #6FA8EA0D;
  border: 1px solid #6FA8EA;
  border-radius: 20px;
  padding: 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.game_motion_action_btn.fill {
  background-color: #6FA8EA0D;
  background: linear-gradient(180deg, rgba(115, 173, 239, 0.4) 0%, rgba(15, 21, 28, 0.4) 100%);
}
.game_motion_action_btn.align_c {
  justify-content: center;
}
.game_motion_action_btn_title {
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 5px;
}
.game_motion_action_btn_title.margin_t {
  margin-top: 14px;
}
.game_motion_action_btn_title.small {
  font-size: 20px;
}
.game_motion_action_btn_label {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.game_motion_action_btn_label.margin_b {
  margin-bottom: 10px;
}
.game_motion_action_btn_label.min_h2str {

}
.game_motion_action_btn_label svg {
  width: auto;
  max-width: 18px;
  height: auto;
  margin-left: 6px;
  fill: #57FFE3;
}
.game_motion_action_btn_icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game_motion_action_btn_icon.rerun {
  width: 32px;
  height: 32px;
}
.game_motion_action_btn_icon svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  fill: #FDFDFD;
}
.game_motion_action_btn_icon.contine {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game_motion_action_btn_icon.contine svg {
  width: 30px;
  height: auto;
  fill: #FEA70C;
}

/* ========================================================================== */

.game_fox_img {
  align-self: center;
  width: auto;
  max-width: 122px;
  height: auto;
  margin-bottom: 26px;
  margin-top: 26px;
}
.game_menu_buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 11px;
}
.game_over_container .game_menu_buttons {
  margin-bottom: 61px;
}
.game_menu_btn {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6FA8EA;
  border-radius: 25px;
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.game_menu_btn.dark {
  background-color: #223448;
}
.game_menu_btn.icon_power svg {
  width: 24px;
  fill: #57FFE3;
  margin-left: 9px;
}

/* ========================================================================== */

.game_superstrike_menu_wrapper {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  display: none;
  justify-content: center;
}
.game_superstrike_menu_wrapper.tutorial::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
}
.game_superstrike_menu_wrapper.show {
  display: flex;
}
.game_superstrike_menu {
  width: 100%;
  max-width: 394px;
  background: linear-gradient(180deg, rgba(34,52,72,0.5) 5.16%, rgba(111,168,234,0.5) 114.77%);
  border-radius: 20px;
  padding: 15px 10px 42px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 4px;
}
.game_superstrike_item {
  width: 100%;
  height: 47px;
  padding-bottom: 7px;
  padding-right: 6px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon_booster_main {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.game_superstrike_border {
  position: absolute;
  left: 0px;
  top: 0px;
  width: calc(100% - 7px);
  height: calc(100% - 6px);
  border: 2px solid #3b5f89;
  box-sizing: border-box;
  border-radius: 6px;
  /* clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 18px) 100%, 0 100%); */
  box-shadow: 2px 2px 0.7px rgba(0, 0, 0, 0.25);
}
.game_superstrike_counter {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 26px;
  height: 26px;
  border: 2px solid #3b5f89;
  background-color: #43648A;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  box-shadow: 2px 2px 0.7px rgba(0, 0, 0, 0.25);
  font-family: 'Arial';
  background-color: #2c486d;
}
.game_superstrike_item svg {
  fill: #ffffff;
  z-index: 2;
}
.game_superstrike_item.fire svg {
  width: 40px;
  height: auto;
}
.game_superstrike_item.time_freeze svg {
  width: 20px;
  height: auto;
}
.game_superstrike_item.seashell svg {
  width: 35px;
  height: auto;
  transform: rotate(-15deg);
}
.game_superstrike_item.defence svg {
  width: 25px;
  height: auto;
}
.game_superstrike_item.elixir svg {
  width: 21px;
  height: auto;
}
/* ========================================================================== */
.raiting_page {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  padding-bottom: 200px;
  box-sizing: border-box;
  /* margin-top: 80px; */
  padding-top: 112px;
}
body[data-platform="android"] .raiting_page {
  padding-top: 112px;
}
body[data-platform="ios"] .raiting_page {
  padding-top: 132px;
}
.page_cb_head_block {
  width: 100%;
  display: none;
  grid-template-columns: 1fr;
}
.page_cb_head_block.show {
  display: grid;
}
.page_cb_label {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 1;
  position: relative;
}
.page_cb_label::after {
  position: absolute;
  content: '';
  width: 100%;
  height: calc(100% + 30px);
  left: 0px;
  top: -15px;
  background: rgba(0, 202, 209, 0.35);
  filter: blur(20.45px);
  z-index: -1;
}
.page_cb_label.turnir_page_cb_label {

}
.page_cb_tournament_awards_icon {
  justify-self: center;
}
.page_cb_tournament_awards_icon svg {
  width: 80px;
  height: auto;
  margin-top: 32px;
  fill: #ffffff;
}

.tournament_head_buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 42px;
  z-index: 2;
  margin-top: 10px;
  padding: 0px 26px;
  box-sizing: border-box;
}
.tournament_head_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  background: #5684B9;
  border-radius: 12px;
  padding: 0px 8px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_head_btn svg {
  width: 14px;
  height: auto;
  stroke: none;
  fill: #ffffff;
  margin-right: 10px;
}

.tournaments_players_categoty {
  display: grid;
  padding: 0px 20px;
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
}
.tournaments_players_categoty_btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  transition: 0.25s;
  cursor: pointer;
}
.tournaments_players_categoty_btn.active {
  background-color: #474747;
  color: #ffffff;
}

.tournament_liaderboard_container {
  display: grid;
  grid-template-columns: 100% 100%;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.tournaments_liaderboard_list {
  display: grid;
  transition: 0.5s;
}
.tournaments_liaderboard_list .uploading_block {
  height: 100px;
  --spinner-height: 100%;
  position: relative;
  margin-top: 50px;
}
.tournaments_liaderboard_list.recruits {
  transform: translate(calc(-100% - 16px), 0px);
}
.tournaments_liaderboard_list.recruits.active {
  transform: translate(0%, 0px);
}
.tournaments_liaderboard_list.masters {
  transform: translate(16px, 0px);
}
.tournaments_liaderboard_list.masters.active {
  transform: translate(-100%, 0px);
}
.tournament_awards_container {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 100% 100%;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.game_content_block.raiting_page.tournament_awards {
  padding-bottom: 120px;
}
.tournament_awards_list {
  max-width: 100%;
  overflow: hidden;
  display: grid;
  grid-row-gap: 16px;
  transition: 0.5s;
}
.tournament_awards_list .uploading_block {
  height: 100px;
  --spinner-height: 100%;
  position: relative;
  margin-top: 50px;
}
.tournament_awards_list.recruits {
  transform: translate(calc(-100% - 16px), 0px);
}
.tournament_awards_list.recruits.active {
  transform: translate(0%, 0px);
}
.tournament_awards_list.masters {
  transform: translate(16px, 0px);
}
.tournament_awards_list.masters.active {
  transform: translate(-100%, 0px);
}
.page_cb_block_placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.page_cb_block_placeholder.height_230 {
  height: 230px;
}
.page_cb_block_placeholder.height_210 {
  height: 210px;
}
.page_cb_block_placeholder.height_170 {
  /* height: 170px; */
}
.page_cb_block_placeholder.height_130 {
  height: 130px;
}
.raiting_page_menu_block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #000000;
  padding: 8px 16px;
}
.raiting_page_menu_block.hidden {
  display: none;
}
.raiting_page_menu_btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-weight: 500;
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  cursor: pointer;
}
.raiting_page_menu_btn.active {
  background-color: #474747;
  color: #FFFFFF;
}
.raiting_page_menu_btn.tournaments svg {
  width: 9px;
  margin-left: 4px;
  fill: #78797D;
  stroke: none;
}
.raiting_container_list {
  height: 100%;
  background-color: #000000;
  border-radius: 0px 0px 35px 35px;
}
.raiting_list_block {
  height: 100%;
  background: #15171A;
  border-radius: 35px;
  display: none;
  flex-direction: column;
  padding: 10px 16px;
  box-sizing: border-box;
}
.raiting_list_block.show {
  display: flex;
}
.raiting_list_item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 21px;
  align-items: center;
  padding: 15px 24px 15px 11px;
  border-bottom: 1px solid #474747;
  box-sizing: border-box;
}
.raiting_list_item_avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.raiting_list_item_info {
  justify-self: start;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 9px;
}
.rli_play_gamer_nik {
  grid-column: 1/3;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  word-wrap: break-word;
}
.rli_play_gamer_score {
  grid-column: 1/2;
  grid-row: 2;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.rli_play_gamer_score svg {
  width: 20px;
  height: auto;
  margin-right: 5px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_level {
  grid-column: 2/3;
  grid-row: 2;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  padding-left: 10px;
  position: relative;
}
.rli_play_gamer_level::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.rli_play_gamer_results {
  grid-row: 2;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
}
.rli_play_gamer_results.current_tournamet {
  grid-column: 1/3;
}
.rli_play_gamer_results.history {
  grid-column: 3/4;
  font-size: 12px;
}
.rli_play_gamer_results.my_result {
  line-height: 21px;
}
.rli_play_gamer_results .coin_icon {
  width: 15px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -2px;
}
.rli_play_gamer_results svg.chest_icon {
  width: 16px;
  height: auto;
  margin-right: 1px;
  margin-bottom: -3px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.elixir_icon {
  width: 14px;
  height: auto;
  margin-right: 1px;
  margin-bottom: -4px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.defence_icon {
  width: 16px;
  height: auto;
  margin-right: 1px;
  margin-bottom: -3px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.friends_icon {
  width: 16px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -3px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.seashell_icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -3px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.fire_wall_icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -6px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.gamepad_icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  fill: rgba(185, 185, 185, 1);
}
.rli_play_gamer_results svg.power_icon {
  width: 14px;
  height: auto;
  margin-right: 5px;
  margin-top: -2px;
}
.rli_play_gamer_results svg.head_icon {
  width: 14px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -3px;
  fill: #ffffff;
}
.rli_play_gamer_results svg.upp_icon {
  width: 10px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -4px;
}
.rli_play_gamer_army {
  grid-column: 2/3;
  grid-area: 2;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
  padding-left: 8px;
}
.rli_play_gamer_army svg {
  width: 12px;
  height: auto;
  margin-right: 6px;
  fill: #B9B9B9;
}
.rli_play_gamer_army.second::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.rli_play_gamer_power {
  grid-column: 1/2;
  grid-area: 2;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
}
.rli_play_gamer_power svg {
  width: 15px;
  height: auto;
  margin-right: 6px;
  fill: #B9B9B9;
}
.rli_play_gamer_heads {
  grid-column: 1/2;
  grid-area: 2;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
}
.rli_play_gamer_heads.second {
  grid-column: 2/3;
  grid-area: 2;
  padding-left: 8px;
}
.rli_play_gamer_heads.second::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.rli_play_gamer_heads svg {
  width: 15px;
  height: auto;
  margin-right: 6px;
  fill: #B9B9B9;
}
.rli_play_gamer_heads.active svg {
  fill: #FFCC00;
}
.raiting_list_item_place {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
}
.raiting_list_item_place .rlip_counter {
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  margin: 0px 2px;
}
.raiting_list_item_place svg.branch_icon {
  width: 10px;
  height: auto;
  fill: #B9B9B9;
}
.raiting_list_item_place.gold svg.branch_icon {
  fill: #b7a500;
}
.raiting_list_item_place.silver svg.branch_icon {
  fill: #D3D3D3;
}
.raiting_list_item_place.copper svg.branch_icon {
  fill: #CD7F32;
}
.raiting_list_item_place svg.branch_icon:nth-child(3){
  transform: scale(-1, 1);
}
.raiting_list_item:not(.tournament):nth-child(1) svg.branch_icon {
  fill: #b7a500;
}
.raiting_list_item:not(.tournament):nth-child(2) svg.branch_icon {
  fill: #D3D3D3;
}
.raiting_list_item:not(.tournament):nth-child(3) svg.branch_icon {
  fill: #CD7F32;
}

/* ========================================================================== */

.raiting_page_bonus {
  padding-bottom: 120px;
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  margin-top: 112px;
}
.bonus_page_menu_block {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #000000;
  margin-top: 8px;
}
.bonus_page_menu_btn {
  height: 26px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  cursor: pointer;
  padding: 0px 7px;
  position: relative;
}
.bonus_page_menu_btn.message::after {
  position: absolute;
  content: '';
  top: 0px;
  right: 0px;
  width: 6px;
  height: 6px;
  background-color: #E08512;
  border-radius: 50%;
}
.bonus_page_menu_btn svg {
  width: auto;
  height: auto;
  fill: #78797D;
  margin-right: 5px;
}
.bonus_page_menu_btn.social svg {
  width: 18px;
  height: auto;
}
.bonus_page_menu_btn.game svg {
  width: 20px;
  height: auto;
}
.bonus_page_menu_btn.friends svg {
  width: 13px;
  height: auto;
}
.bonus_page_menu_btn.stocks svg {
  width: 16px;
  height: auto;
}
.bonus_page_menu_btn.active {
  color: #ffffff;
  background-color: #474747;
}
.bonus_page_menu_btn.active svg {
  fill: #ffffff;
}
.bonus_page_head_rect {
  margin: 38px 10px 0px 10px;
  background-color: #1C1E23;
  border-radius: 10px;
  padding: 14px 5px 12px 19px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  position: relative;
}
.bp_head_rect_icon {
  grid-column: 1/2;
  grid-row: 1/3;
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp_head_rect_icon svg {
  width: 37px;
  height: auto;
  fill: #6FA8EA;
}
.bp_head_rect_title {
  justify-self: start;
  grid-column: 2/3;
  grid-row: 1/2;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  position: relative;
}
.bonus_page_head_rect.message .bp_head_rect_title::after {
  position: absolute;
  content: '';
  top: -2px;
  right: -14px;
  width: 6px;
  height: 6px;
  background-color: #E08512;
  border-radius: 50%;
}
.bp_head_rect_label {
  grid-column: 2/3;
  grid-row: 2/3;
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.bp_head_rect_arrow {
  grid-column: 3/4;
  grid-row: 1/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp_head_rect_arrow svg {
  width: 24px;
  height: auto;
  stroke: #FFFFFF;
}
.bonus_container_list {
  /* margin-top: 15px; */
  background-color: #000000;
  border-radius: 0px 0px 35px 35px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 14px;
}
.bonus_block_wrapper {
  display: none;
}
.bonus_block_wrapper.show {
  display: flex;
  flex-direction: column;
}
.bonus_list_block {
  width: 100%;
  flex-direction: column;
  background: #15171A;
  border-radius: 35px;
  padding: 10px 16px;
  box-sizing: border-box;
}
.bonus_list_title {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin: 15px 16px;
}
.bonus_list_item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 18px;
  align-items: center;
  padding: 15px 5px 15px 11px;
  border-bottom: 1px solid #474747;
  box-sizing: border-box;
}
.bonus_list_item_icon {
  grid-column: 1/2;
  grid-row: 1/3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #9F9F9F;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 24px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bonus_list_item_icon.friends {
  background-color: #262C3A;
}
.bonus_list_item_icon.friends svg {
  width: 29px;
  height: auto;
  fill: #3D7CCF;
}
.bonus_list_item_icon.demons {
  background-color: #932E2E;
}
.bonus_list_item_icon.demons svg {
  width: 33px;
  height: auto;
  fill: #ffffff;
}
.bonus_list_item_icon.levels {
  background-color: #6D1FA1;
}
.bonus_list_item_icon.subscribe_tg {
  background-color: #21A3DC;
}
.bonus_list_item_icon.subscribe_tg svg {
  width: 35px;
  height: auto;
  fill: #ffffff;
}
.bonus_list_item_icon.subscribe_vk {
  background-color: #0077FF;
}
.bonus_list_item_icon.subscribe_vk svg {
  width: 35px;
  height: auto;
  fill: #ffffff;
}
.bonus_list_item_icon.start_game {
  background-color: #2F70A5;
}
.bonus_list_item_icon.start_game svg {
  width: 25px;
  height: auto;
  fill: #ffffff;
}
.bonus_list_item_icon.opened {
  background-color: #474747;
}
.bonus_list_item_icon.friends.opened {
  background-color: #474747;
}
.bonus_list_item_icon.demons.opened {
  background-color: #474747;
}
.bonus_list_item_icon.levels.opened {
  background-color: #474747;
}
.bonus_list_item_icon.subscribe_tg.opened {
  background-color: #474747;
}
.bonus_list_item_icon.subscribe_vk.opened {
  background-color: #474747;
}
.bonus_list_item_icon.start_game.opened {
  background-color: #474747;
}
.bonus_list_item_icon.opened svg {
  width: 19px;
  height: auto;
  stroke: #ffffff;
}
.bonus_list_item_icon.demons.opened svg,
.bonus_list_item_icon.friends.opened svg,
.bonus_list_item_icon.start_game.opened svg,
.bonus_list_item_icon.subscribe_vk.opened svg,
.bonus_list_item_icon.subscribe_tg.opened svg {
  width: 19px;
  height: auto;
  fill: none;
  stroke: #00d723;
}
.bonus_list_item_icon img.subscribe_game {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.bonus_list_item_title {
  grid-column: 2/3;
  grid-row: 1/2;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.bonus_list_item_label {
  grid-column: 2/3;
  grid-row: 2/3;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  display: flex;
  align-items: center;
}
.bonus_list_item_label svg {
  width: 15px;
  height: auto;
  min-width: 15px;
  margin-left: 6px;
  margin-right: 6px;
}
.bonus_list_item_label img {
  width: 15px;
  height: auto;
  min-width: 15px;
  margin-left: 6px;
  margin-right: 6px;
}
.bonus_list_item_label.collectible svg {
  fill: #FFCC00;
}
.bonus_list_item_label.epic svg {
  fill: #9d1cb0;
}
.bonus_list_item_label.rare svg {
  fill: #368ee2;
}
.bonus_list_item_label.unusual svg {
  fill: #73e33b;
}
.bonus_list_item_label.ordinary svg {
  fill: #a0a6ab;
}
.bonus_list_item_label.limited svg {
  fill: #00D6DD;
}
.bonus_list_item_label.legend svg {
  fill: #FF8801;
}
.bonus_list_item_label .blil_point {
  width: 2px;
  height: 100%;
  position: relative;
  margin-right: 6px;
}
.bonus_list_item_label .blil_point::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.bonus_list_item_action {
  grid-column: 3/4;
  grid-row: 1/3;
}
.bonus_list_item_action_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bonus_list_item_action_arrow svg {
  width: 16px;
  height: auto;
  stroke: #ffffff;
}
.bonus_list_item_action.complete:not(.opened) .bonus_list_item_action_arrow {
  display: none;
}
.bonus_list_item_action.complete:not(.opened) .bonus_list_item_action_btn {
  display: flex;
}
.bonus_list_item_action.opened .bonus_list_item_action_arrow {
  display: none;
}
.bonus_list_item_action.opened .bonus_list_item_action_btn {
  display: none;
}
.bonus_list_item_action_btn {
  height: 24px;
  background-color: #5684B9;
  border-radius: 12px;
  padding: 0px 7px 0px 9px;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  position: relative;
}

/* .particles_container .coin {
  position: absolute;
  top: var(--coin-from-x, 24px);
  left: var(--coin-from-y, 24px);
  z-index: 100;
  opacity: 0;
} */

.particles_container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}
.coin {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* box-shadow: 0 0 10px rgba(255,215,0,0.7); */
  pointer-events: none;
  z-index: 5;
  transform-style: preserve-3d;
  opacity: 0;
  background-image: url(/app/images/coin.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@keyframes coinFly {
  0% {
    opacity: 0.5;
    transform: translate(var(--start-x), var(--start-y)) rotateY(0) scale(0.9);
    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
  }
  50% {
    transform: translate(calc(var(--start-x) + var(--fly-x) * 1px), calc(var(--start-y) - var(--fly-height) * 1px)) rotateY(900deg) scale(1.2);
    animation-timing-function: cubic-bezier(0.4,0,1,1);
    opacity: 1;
  }
  100% {
    transform: translate(20px, calc(100vh - 62px)) rotateY(1800deg) scale(0.8);
    opacity: 0;
  }
}

/* ========================================================================== */

.army_page {
  padding-top: 100px;
  padding-bottom: 120px;
  box-sizing: border-box;
  grid-template-rows: auto auto 1fr;
}
.army_page_menu_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  align-items: center;
  margin: 8px 31px;
}
.army_page_menu_btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  cursor: pointer;
  border-radius: 13px;
}
.army_page_menu_btn svg {
  width: auto;
  height: auto;
  fill: #78797D;
  margin-right: 5px;
}
.army_page_menu_btn.characters svg {
  width: 15px;
  height: auto;
}
.army_page_menu_btn.squad svg {
  width: 12px;
  height: auto;
}
.army_page_menu_btn.active {
  color: #ffffff;
  background-color: #474747;
}
.army_page_menu_btn.active svg {
  fill: #ffffff;
}
.army_page_menu_btn_counter {
  margin-left: 6px;
}
.army_page_menu_btn.active .army_page_menu_btn_counter {
  /* background-color: #3D7CCF; */
}
.army_page_head_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  margin: 0px 16px;
  margin-bottom: 2px;
}
.army_page_head_list_item {
  background-color: #191B1F;
  border-radius: 8px;
  padding: 9px 8px 15px 8px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 12px;
}
.aphl_item_title {
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.aphl_item_label_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 8px;
}
.aphl_item_label_block {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 5px;
  align-items: center;
}
.aphl_item_label_block svg {
  width: 15px;
  margin-top: -2px;
  height: auto;
}
.aphl_item_label_block.first svg {
  fill: #FFCC00;
}
.aphl_item_label_block.second svg {
  fill: #B9B9B9;
}
.aphl_item_label {
  min-height: 20px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.aphl_item_label svg {
  width: 17px;
  height: auto;
  fill: #ffffff;
  margin-right: 8px;
}
.itemslis_container {
  height: 100%;
  background-color: #191B1F;
  border-radius: 35px;
}
.itemslist_block {
  display: none;
  padding: 18px 16px 18px 16px;
  box-sizing: border-box;
}
.itemslist_block.show {
  display: flex;
  flex-direction: column;
}
.itemslist_filters_block {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 4px;
  margin-bottom: 11px;
}
.itemslist_filters_block.hide {
  display: none;
}
.itemslist_filters_block_scroll {
  display: grid;
  grid-template-columns: repeat(8, auto);
  grid-column-gap: 4px;
  max-width: 100%;
  overflow: auto;
}
.itemslist_filters_block_scroll::-webkit-scrollbar {
  display: none;
}
.itemslist_filter_btn {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #4747474D;
  padding: 0px 10px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  white-space: nowrap;
}
.itemslist_filter_btn.all {
  color: #ffffff;
}
.action_army {
	background-color: #373739;
}
.itemslist_filter_btn.collectible {
  color: #FFCC00;
}
.itemslist_filter_btn.epic {
  color: #9d1cb0;
}
.itemslist_filter_btn.rare {
  color: #368ee2;
}
.itemslist_filter_btn.unusual {
  color: #73e33b;
}
.itemslist_filter_btn.ordinary {
  color: #a0a6ab;
}
.itemslist_filter_btn.limited {
  color: #00D6DD;
}
.itemslist_filter_btn.legend {
  color: #FF8801;
}
.sort_cbtn_hidden_ch {
  display: none;
}
.sort_custom_btn {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #9B9B9C;
  transition: 0.25s;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sort_custom_btn.show {
  display: flex;
}
.sort_custom_btn svg {
  width: 13px;
  height: auto;
  stroke: #27282B;
  transition: 0.25s;
}
.sort_custom_btn[value='1'] {
  background-color: #ffffff;
}
.sort_custom_btn[value='1'] svg {
  transform: scale(1, -1);
}
.sort_custom_btn[value='2'] {
  background-color: #ffffff;
}
.sort_custom_btn[value='2'] svg {
  transform: none;
}
.sort_custom_btn[value='3'] {
  background-color: #FFCC00;
}
.sort_custom_btn[value='3'] svg {
  transform: scale(-1, 1);
}
.itemslist_grid_block {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 9px;
}
.itemslist_grid_block .uploading_block {
  height: 160px;
  --spinner-height: calc(100% - 40px);
  position: relative;
}
.itemslist_grid_block.army_itemslist_block_item .uploading_block {
  grid-column: 1 / 4;
}
.itemslist_grid_block.otrad_itemslist_grid_block .uploading_block {
  grid-column: 1 / 3;
}
.itemslist_grid_block.show {
  display: grid;
}
.itemslist_grid_block.runes {
  grid-template-columns: repeat(2, 1fr);
}
.itemslist_container {
  display: none;
  grid-gap: 9px;
}
.itemslist_container.show {
  display: grid;
}
.itemslist_container .uploading_block {
  height: 160px;
  --spinner-height: calc(100% - 40px);
  position: relative;
}
.itemslist_container.itemslist_grid_block_lootboxes .uploading_block {
  grid-column: 1 / 4;
}
.itemslist_container.itemslist_grid_block_runes .uploading_block {
  grid-column: 1 / 3;
}
.itemslist_container.itemslist_grid_block_artifacts .uploading_block {
  grid-column: 1 / 4;
}
.itemslist_container.itemslist_container_lootboxes_market .uploading_block  {
  grid-column: 1 / 4;
}
.itemslist_container.itemslist_container_artifacts_market .uploading_block {
  grid-column: 1 / 4;
}
.itemslist_container.itemslist_container_tickets_market .uploading_block {
  grid-column: 1 / 4;
}
.itemslist_container.lootboxes {
  grid-template-columns: repeat(3, 1fr);
}
.itemslist_container.runes {
  grid-template-columns: repeat(2, 1fr);
}
.itemslist_container.artifacts {
  grid-template-columns: repeat(3, 1fr);
}
.itemslist_container.tickets {
  grid-template-columns: repeat(3, 1fr);
}
.itemslist_grid_item {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.itlt_gr_item_border,
.itlt_gr_item_border_blur {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  border-top: 2px solid var(--rare-color-f);
  border-right: 2px solid var(--rare-color-f);
  border-bottom: 2px solid var(--rare-color-s);
  border-left: 2px solid var(--rare-color-s);
}
.itlt_gr_item_border {
  z-index: 3;
}
.itlt_gr_item_border_blur {
  z-index: 2;
  filter: blur(2.5px);
}
.itemslist_grid_item.collectible:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.collectible:not([data-rare]) .itlt_gr_item_border_blur {
  border: 2px solid #FFCC00;
}
.itemslist_grid_item.epic:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.epic:not([data-rare]) .itlt_gr_item_border_blur {
   border: 2px solid #9d1cb0;
}
.itemslist_grid_item.rare:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.rare:not([data-rare]) .itlt_gr_item_border_blur {
   border: 2px solid #368ee2;
}
.itemslist_grid_item.unusual:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.unusual:not([data-rare]) .itlt_gr_item_border_blur {
   border: 2px solid #73e33b;
}
.itemslist_grid_item.ordinary:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.ordinary:not([data-rare]) .itlt_gr_item_border_blur {
   border: 2px solid #a0a6ab;
}
.itemslist_grid_item.limited:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.limited:not([data-rare]) .itlt_gr_item_border_blur {
  border: 2px solid #00D6DD;
}
.itemslist_grid_item.legend:not([data-rare]) .itlt_gr_item_border,
.itemslist_grid_item.legend:not([data-rare]) .itlt_gr_item_border_blur {
  border: 2px solid #FF8801;
}
.itemslist_grid_item .rent_timer {
  position: absolute;
  left: 50%;
  bottom: 9px;
  background-color: #24272C;
  height: 15px;
  border-radius: 15px;
  padding: 0px 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #B2B2B2;
  font-feature-settings: 'tnum' on, 'lnum' on;
  white-space: nowrap;
  transform: translate(-50%, 0px);
  z-index: 10;
}
.itemslist_grid_item .rune_cell .segyn_icon {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 12px;
  height: auto;
  z-index: 4;
}
.svg_marcket_items {
  position: relative;
  z-index: 1;
  margin-top: 15px;
}
.svg_marcket_items::after {
  position: absolute;
  content: '';
  width: 46px;
  height: 71px;
  left: 50%;
  top: 50%;
  background: #009C82;
  filter: blur(12.6px);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.svg_marcket_items_counter {
  font-weight: 700;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #57FFE3;
  margin-top: 6px;
}
.itemslist_grid_item .svg_marcket_items svg {
  width: 53px;
  height: auto;
  fill: #57FFE3;
}
.itlt_gr_item_image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: calc(100% - 20px);
  height: auto;
  max-height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}
.itemslist_grid_item .nft_icon_wrapper,
.itemslist_grid_item .nft_fusion_icon_wrapper {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.itemslist_grid_item .nft_icon_wrapper svg {
  width: 100%;
  height: auto;
  fill: #ffffff;
  stroke: none;
}
.itemslist_grid_item .nft_icon_wrapper img.nft_icon,
.itemslist_grid_item .nft_icon_wrapper img.nft_fusion_icon {
  width: 100%;
  height: auto;
}
.itemslist_grid_item .segyn_icon {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 18px;
  height: auto;
  z-index: 4;
}
.win_modal_img_container .pass_hero_in_rent_btn {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 23px;
  background-color: #3D7CCF;
  border-radius: 24px;
  padding: 0px 8px;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 10;
  cursor: pointer;
}
.win_modal_img_container .rent_timer {
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: #24272C;
  height: 27px;
  border-radius: 15px;
  padding: 0px 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #EAEAEA;
  font-feature-settings: 'tnum' on, 'lnum' on;
  white-space: nowrap;
  z-index: 10;
}
.win_modal_img_container .attention_icon_wrapper {
  width: 65px;
  position: absolute;
  right: 0px;
  bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.win_modal_img_container .attention_icon_wrapper svg {
  width: 37px;
  height: auto;
}
.win_modal_img_container .segyn_icon {
  position: absolute;
  left: 15px;
  bottom: 35px;
  width: 30px;
  height: auto;
  z-index: 4;
}
.win_modal_img_container .segun_icon_wrapper {
  position: absolute;
  left: 15px;
  bottom: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.win_modal_img_container .segun_icon_wrapper .segyn_icon {
  position: static;
  width: 30px;
  height: auto;
  z-index: auto;
}
.win_modal_img_container .segun_icon_wrapper.is_broadcast {
  filter: grayscale(1);
}
.win_modal_img_container .nft_icon_wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win_modal_img_container .nft_icon_wrapper.is_broadcast {
  filter: grayscale(1);
}
.win_modal_img_container .nft_icon_wrapper svg {
  width: 100%;
  height: auto;
  fill: #ffffff;
  stroke: none;
}
.win_modal_img_container .nft_icon_wrapper,
.win_modal_img_container .nft_fusion_icon_wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win_modal_img_container .nft_icon_wrapper img.nft_icon,
.win_modal_img_container .nft_fusion_icon_wrapper img.nft_fusion_icon {
  width: 100%;
  height: auto;
}
.win_modal_img_container .heroNFT_min_price {
  position: absolute;
  left: -2px;
  top: 50px;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 2;
  cursor: pointer;
}
.win_modal_img_container .heroNFT_min_price .attention_wrapper {
  position: absolute;
  top: -6px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.win_modal_img_container .heroNFT_min_price .attention_wrapper svg {
  width: auto;
  height: 12px;
}
.win_modal_img_container .heroNFT_min_price .price_text {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 2px;
  justify-items: center;
  font-weight: 500;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #FFFFFF;
  padding-top: 4px;
  padding-bottom: 2px;
  position: relative;
  margin-left: 1px;
  margin-right: 1px;
  z-index: 1;
}
.win_modal_img_container .heroNFT_min_price .price_text::before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: calc(100% + 2px);
  background: linear-gradient(180deg, #00E8EB 0%, #3E8728 100%);
  z-index: -2;
  -webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
  -o-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
}
.win_modal_img_container .heroNFT_min_price .price_text::after {
  position: absolute;
  content: '';
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% + 1px);
  background-color: #15171A;
  z-index: -1;
  -webkit-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
  -o-clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
}
.win_modal_img_container .heroNFT_min_price .price_val {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  box-sizing: border-box;
  position: relative;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #F5F5F5;
  z-index: 2;
}
.win_modal_img_container .heroNFT_min_price .price_val span {
  font-size: 8px;
  line-height: 8px;
  margin-left: 2px;
  margin-bottom: -1px;
}
.win_modal_img_container .heroNFT_min_price .price_val::before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #00E8EB 0%, #3E8728 100%);
  border-radius: 4px;
  z-index: -2;
}
.win_modal_img_container .heroNFT_min_price .price_val::after {
  position: absolute;
  content: '';
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #15171A;
  border-radius: 4px;
  z-index: -1;
}

.win_modal_img_container .heroNFT_min_price .price_val .ton_icon {
  width: 10px;
  height: auto;
  margin-right: 2px;
  margin-top: -1px;
}


.itlt_gr_item_level_label {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: #191B1F;
  height: 13px;
  border-radius: 7px;
  padding: 0px 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 3;
  background: linear-gradient(215deg, var(--rare-color-f) 0%, var(--rare-color-s) 100%);
}
.itemslist_grid_item.collectible:not([data-rare]) .itlt_gr_item_level_label {
  background: #FFCC00;
  color: #000000;
}
.itemslist_grid_item.epic:not([data-rare]) .itlt_gr_item_level_label {
  background: #9d1cb0;
}
.itemslist_grid_item.rare:not([data-rare]) .itlt_gr_item_level_label {
  background: #368ee2;
}
.itemslist_grid_item.unusual:not([data-rare]) .itlt_gr_item_level_label {
  background: #73e33b;
  color: #000000;
}
.itemslist_grid_item.ordinary:not([data-rare]) .itlt_gr_item_level_label {
  background: #a0a6ab;
}
.itemslist_grid_item.limited:not([data-rare]) .itlt_gr_item_level_label {
  background: #00D6DD;
}
.itemslist_grid_item.legend:not([data-rare]) .itlt_gr_item_level_label {
  background: #FF8801;
}
.itemslist_grid_item.is_broadcast .itlt_gr_item_background {
  filter: grayscale(1);
}
.itemslist_grid_item.is_broadcast .itlt_gr_item_level_label {
  filter: grayscale(1);
}
.itemslist_grid_item.is_broadcast .itlt_gr_item_image {
  filter: grayscale(1);
}
.itemslist_grid_item.is_broadcast .segyn_icon {
  filter: grayscale(1);
}
.itemslist_grid_item.is_broadcast .nft_icon_wrapper {
  filter: grayscale(1);
}
.itemslist_grid_item .stop_icon_wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}
.itemslist_grid_item .stop_icon_wrapper svg {
  width: 45px;
  height: auto;
  fill: #A12424;
  stroke: none;
}
.itlt_gr_item_selected_mark {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itlt_gr_item_selected_mark svg {
  width: 18px;
  height: auto;
  fill: #ffffff;
}
.itlt_gr_item_segun_mark {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itlt_gr_item_segun_mark img {
  width: 18px;
  height: auto;
}
/* ========================================================================== */

.loot_page {
  box-sizing: border-box;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  padding-top: 100px;
  padding-bottom: 120px;
}
.loot_page_menu_block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 8px;
  align-items: center;
  margin: 8px 16px;
}
.loot_page_menu_btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  cursor: pointer;
  border-radius: 13px;
}
.loot_page_menu_btn svg {
  width: auto;
  height: auto;
  fill: #78797D;
  margin-right: 5px;
}
.loot_page_menu_btn.lootboxes svg {
  width: 12px;
  height: auto;
  margin-bottom: -1px;
}
.loot_page_menu_btn.rune svg {
  width: 11px;
  height: auto;
}
.loot_page_menu_btn.artifact svg {
  width: 12px;
  height: auto;
}
.loot_page_menu_btn.active {
  color: #ffffff;
  background-color: #474747;
}
.loot_page_menu_btn.active svg {
  fill: #ffffff;
}
.loot_page_menu_btn_counter {
  margin-left: 6px;
}
.loot_page_menu_btn.active .loot_page_menu_btn_counter {
  /* background-color: #3D7CCF; */
}

/* ========================================================================== */

.friends_page {
  grid-template-rows: auto 1fr;
  box-sizing: border-box;
  padding-bottom: 184px;
  padding-top: 112px;
}
.page_fr_block_head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 16px;
  box-sizing: border-box;
}
.page_friends_img {
  width: 146px;
  margin-bottom: 25px;
}
.page_fr_label {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  margin-bottom: 11px;
}
.friend_afert_block {
  width: 100%;
  background-color: #1C1E23;
  height: 60px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-row-gap: 7px;
  align-items: center;
  border-radius: 30px;
  padding: 0px 22px;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.friend_afert_block_icon {
  grid-column: 1/2;
  grid-row: 1/3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32px;
}
.friend_afert_block_icon svg {
  width: 26px;
  fill: #ffffff;
}
.friend_afert_block_title {
  align-self: end;
  grid-column: 2/3;
  grid-row: 1/2;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.friend_afert_block_label {
  align-self: start;
  grid-column: 2/3;
  grid-row: 2/3;
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.friend_afert_block_label svg {
  width: 13px;
  height: auto;
  margin: 0px 4px;
}
.friend_afert_block_label img {
  width: 13px;
  height: auto;
  margin: 0px 4px -2px 4px;
}


.friends_container_list {
  background: #15171A;
  border-radius: 35px;
}
.friends_list_head {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding: 27px 0px 23px 11px;
  margin: 0px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #474747;
}
.friends_list_counter {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  position: relative;
  padding-left: 12px;
  margin-left: 10px;
}
.friends_list_counter::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.friends_list_block {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  box-sizing: border-box;
}
.friend_list_item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 21px;
  align-items: center;
  padding: 15px 24px 15px 11px;
  border-bottom: 1px solid #474747;
  box-sizing: border-box;
}
.friend_list_item:last-child {
  border-bottom: 0px;
}
.friend_list_item_avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.friend_list_item_info {
  justify-self: start;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 9px;
}
.frli_play_gamer_nik {
  grid-column: 1/3;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.frli_play_gamer_numfriend {
  grid-column: 1/2;
  grid-row: 2;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.frli_play_gamer_numfriend svg {
  width: auto;
  height: 12px;
  margin-right: 6px;
  fill: #B9B9B9;
}
.frli_play_gamer_farm {
  grid-column: 2/3;
  grid-row: 2;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  padding-left: 10px;
  position: relative;
}
.frli_play_gamer_farm::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #B9B9B9;
  transform: translate(0px, -50%);
}
.frli_play_gamer_farm svg {
  width: 13px;
  height: auto;
  margin: 0px 4px;
}
.frli_play_gamer_farm img {
  width: 13px;
  height: auto;
  margin: 0px 4px -2px 4px;
}
.bottom_menu_invite_friend_btn {
  /* width: 100%; */
  height: 39px;
  background: linear-gradient(180deg, #6FA8EA 0%, #223448 100%);
  border-radius: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  /* margin-bottom: 25px; */
  /* padding: 12px 15px 0px 15px; */
  margin: 12px 15px 10px 15px;
}
.bottom_menu_invite_friend_btn.show {
  display: flex;
}

/* ========================================================================== */

.bonustoday_page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 80px;
  padding-bottom: 200px;
}
.bonustoday_page_title {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.bonustoday_page_label {
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  margin-bottom: 16px;
}
.bonustoday_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  margin-bottom: 25px;
}
.bonustoday_list_item {
  background-color: #101112;
  border-radius: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bonustoday_list_item.active {
  background-color: #15171A;
}
.bntd_list_item_title {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #474747;
  margin-bottom: 8px;
}
.bonustoday_list_item.active .bntd_list_item_title {
  color: #FFFFFF;
}
.bntd_list_item_bonus {
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #474747;
  display: flex;
  align-items: center;
}
.bonustoday_list_item.active .bntd_list_item_bonus {
  color: #B9B9B9;
}
.bntd_lib_money {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bntd_lib_money svg {
  width: 13px;
  height: auto;
}
.bntd_lib_chest {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bntd_lib_chest svg {
  width: 20px;
  height: auto;
}
.bntd_lib_chest.blue svg {
  fill: #4384FF;
}
.bntd_lib_chest.purple svg {
  fill: #BA53FF;
}
.bntd_lib_chest.legend svg {
  fill: #FF8801;
}
.bntd_lib_chest.rare svg {
  fill: #368ee2;
}
.bntd_lib_chest.epic svg {
  fill: #9d1cb0;
}
.bntd_list_item_progress {
  width: 100%;
  height: 19px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #232323;
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #858585;
}
.bonustoday_list_item.active .bntd_list_item_progress {
  background-color: #333333;
  color: #ababab;
}
.bntd_list_item_progress.complete svg {
  width: 9px;
  height: auto;
  stroke: #ffffff;
  fill: none;
}
.bntd_list_item_progress.next svg {
  width: 9px;
  height: auto;
  fill: #B9B9B9;
  stroke: none;
}
.bntd_list_item_progress.active {
  background: linear-gradient(180deg, #6FA8EA 0%, #1D2B3B 100%);
  color: #ffffff;
}
.bntd_list_item_progress.complete {
  background: linear-gradient(180deg, #009316 0%, #012E07 100%);
}
.bonustoday_list_item.active .bntd_list_item_progress.active {
  color: #ffffff;
}

/* ========================================================================== */

._bottom_curtain {
  display: none;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  position: fixed;
  left: 0px;
  bottom: 0px;
  overflow: hidden;
  transform: translate(0px, -100%);
  z-index: 45;
  will-change: transform;
}
._bottom_curtain ._bcurtain_cursor_hzone {
  position: absolute;
  content: '';
  top: 50%;
  width: 100px;
  height: 100px;
  z-index: 1;
}
._bcurtain_details_mark_container {
  border-radius: 35px 35px 0px 0px;
  background-color: #000000;
  box-sizing: border-box;
  z-index: 2;
  position: absolute;
  width: 100%;
  max-width: 394px;
  left: 50%;
  bottom: calc(-100% - 12px);
  transform: translate(-50%, 0px);
  will-change: transform;
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: calc(100% - 24px);
}
._bottom_curtain_content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  will-change: scroll-position;
  padding: 0px 16px 16px 16px;
}
._bottom_curtain_content::-webkit-scrollbar {
  display: none;
}
#bonus_area._bottom_curtain ._bottom_curtain_content {
  padding: 0px 16px 45px 16px;
}
._bottom_curtain_blackout {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(16, 16, 20, 0.8);
  opacity: 1;
  will-change: opacity;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
._bottom_curtain_arrow {
  display: flex;
  width: 100%;
  height: 28px;
  min-height: 28px;
  position: relative;
  box-sizing: border-box;
}
._bottom_curtain_arrow::before,
._bottom_curtain_arrow::after {
  position: absolute;
  content: '';
  top: 12px;
  left: 50%;
  width: 26px;
  height: 4px;
  background-color: #70A8E7;
  border-radius: 12px;
  transition: 0.25s;
  pointer-events: none;
}
._bottom_curtain_arrow::before {
  transform: translate(calc(-100% + 2px), 0px);
}
._bottom_curtain_arrow::after {
  transform: translate(-2px, 0px);
}
._bottom_curtain_arrow.down::before {
  transform: translate(calc(-100% + 2px), 0px) rotate(15deg);
}
._bottom_curtain_arrow.down::after {
  transform: translate(-2px, 0px) rotate(-15deg);
}
._bottom_curtain_arrow.up::before {
  transform: translate(calc(-100% + 2px), 0px) rotate(-15deg);
}
._bottom_curtain_arrow.up::after {
  transform: translate(-2px, 0px) rotate(15deg);
}
._bottom_curtain._hover {
  display: block;
  will-change: auto;
}

/* ========================================================================== */

.c_lootbox_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* margin-bottom: 70px; */
  transition: 0.25s;
}
.c_lootbox_item {
  background-color: #000000;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.25s;
}
.c_lootbox_item.glow {
  /* box-shadow: 0px 0px 7.1px 2px #FFFFFF; */
  background-color: rgb(117 120 123);
  transform: scale(1.1);
  z-index: 50;
}
.c_lootbox_item.glow .c_lootbox_item_img_wrapper {
  background-color: rgb(117 120 123);
}
.c_lootbox_item.final {
  box-shadow: 0px 0px 7.1px 2px #ffe500;
  background-color: #000000;
  transform: scale(1.1);
  z-index: 50;
}
.c_lootbox_item.final .c_lootbox_item_img_wrapper {
  background-color: #000000;
}
.lootbox_open_win_head.final {
  /* filter: blur(3px); */
}
.c_lootbox_list.c_lootbox_list_sclad.final .c_lootbox_item:not(.final){
  /* filter: blur(3px); */
}
.c_lootbox_item_img_wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: auto 85%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 7px;
  background-color: #000000;
  transition: 0.25s;
}
.c_lootbox_item_img_wrapper.power svg {
  width: 45px;
  height: auto;
  fill: #57FFE3;
}
.c_lootbox_item_img_wrapper.money svg {
  width: 51px;
  height: auto;
}
.c_lootbox_item_img_wrapper.money img {
  width: 51px;
  height: auto;
}
.c_lootbox_item_img_wrapper::after,
.c_lootbox_item_img_wrapper::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  box-sizing: border-box;
}
.c_lootbox_item_img_wrapper::after {
  z-index: 2;
  border: 1px solid var(--border-color);
}
.c_lootbox_item_img_wrapper::before {
  z-index: 1;
  filter: blur(2.5px);
  border: 2px solid var(--border-color);
}

/* Цвета для разных типов */
.c_lootbox_item.collectible { --border-color: #FFCC00; }
.c_lootbox_item.epic        { --border-color: #9d1cb0; }
.c_lootbox_item.rare        { --border-color: #368ee2; }
.c_lootbox_item.unusual     { --border-color: #73e33b; }
.c_lootbox_item.ordinary    { --border-color: #a0a6ab; }
.c_lootbox_item.limited     { --border-color: #00D6DD; }
.c_lootbox_item.legend      { --border-color: #FF8801; }
/* Цвета для разных типов */

.c_lootbox_item_img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 7px;
}
.c_lootbox_item_in {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  grid-column-gap: 9px;
  margin: 6px 0px;
}
.c_lootbox_item_in_money {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.c_lootbox_item_in_money svg {
  width: 13px;
  height: auto;
  margin-right: 4px;
}
.c_lootbox_item_in_money img {
  width: 13px;
  height: auto;
  margin-right: 4px;
}
.c_lootbox_item_in_bilet {
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.c_lootbox_item_in_bilet svg {
  width: 9px;
  fill: #57FFE3;
  height: auto;
  margin-right: 4px;
}
.bntd_lib_money {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bntd_lib_money svg {
  width: 13px;
  height: auto;
}
.bntd_lib_money img {
  width: 13px;
  height: auto;
  opacity: 0.7;
}
.bonustoday_list_item.active .bntd_lib_money img {
  color: #ababab;
  opacity: 1;
}
.bonustoday_list_item.today .bntd_lib_money img {
  color: #ababab;
  opacity: 1;
}
.bntd_lib_chest {
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bntd_lib_chest svg {
  width: 20px;
  height: auto;
  opacity: 0.7;
}
.bntd_lib_chest.blue svg {
  fill: #4384FF;
}
.bntd_lib_chest.purple svg {
  fill: #BA53FF;
}
.bonustoday_list_item.active .bntd_lib_chest svg {
  opacity: 1;
}
.bonustoday_list_item.today .bntd_lib_chest svg {
  opacity: 1;
}

/* ========================================================================== */

.modal_window {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  background-color: #15171A;
  padding-top: 75px;
  padding-bottom: 45px;
  height: 100vh;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
body.zoomedLess .modal_window {
  height: 100%;
}
body[data-platform="tdesktop"] .modal_window {
  padding-top: 75px;
  padding-bottom: 45px;
}
body[data-platform="android"] .modal_window {
  padding-top: 75px;
  padding-bottom: 45px;
}
body[data-platform="ios"] .modal_window {
  padding-top: 95px;
  padding-bottom: 35px;
}
.modal_window.tutorial {
  pointer-events: none;
}
.modal_window.tutorial .modal_window_content {
  -webkit-transform: none;
}
.modal_window.show {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.modal_window.show_anim {
  animation: 0.25s show_modal_window ease-in-out forwards;
}
.modal_window.lootbox_win {
  background-color: #000000;
  background-image: url(/app/images/lootboxfon.png);
  background-size: auto 100%;
}
@keyframes show_modal_window {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
.modal_window_content {
  width: 100%;
  /* max-width: 394px; */
  height: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  box-sizing: border-box;
  transition: 0.25s;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  grid-template-rows: auto 1fr;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  position: relative;
}
.modal_window_content::-webkit-scrollbar {
  display: none;
}
.modal_window.lootbox_win .modal_window_content {
  grid-template-rows: auto 1fr repeat(3, auto);
  align-items: center;
  overflow: hidden;
  padding-bottom: 45px;
}
.modal_window.hero_window .modal_window_content {
  grid-template-rows: auto 1fr repeat(3, auto) auto;
  align-items: center;
  overflow: hidden;
}
.modal_window.rune_window .modal_window_content {
  grid-template-rows: auto 1fr repeat(3, auto) auto;
  align-items: center;
  overflow: hidden;
}
.modal_window.artifact_window .modal_window_content {
  grid-template-rows: auto 1fr repeat(3, auto) auto;
  align-items: center;
  overflow: hidden;
}
.modal_window.hero_window._show_details .modal_window_content,
.modal_window.rune_window._show_details .modal_window_content,
.modal_window.artifact_window._show_details .modal_window_content {
  overflow: auto;
}
.modal_window .rune_create_container .rune_container.numcell6,
.modal_window .rune_create_container .rune_container.numcell4 {
  margin: 28px 0px;
}
.modal_window .rune_create_container .rune_container.numcell2 {
  margin: 28px 0px;
}
.modal_window.promocode .modal_window_content {
  grid-template-rows: auto 1fr repeat(3, auto);
  align-items: center;
  overflow: hidden;
  padding-bottom: 0px;
}
.modal_window.promocode .runec_assets_block {
  margin: 20px 0px;
}
.modal_window.lootbox_win .modal_window_content.lavel_modal_window_content {
  padding-bottom: 45px;
}
/* ========================================================================== */
.modal_window.small_indents .lootbox_win_title {
  margin-bottom: 5px;
}
.modal_window.small_indents .lootbox_win_container {
  padding-top: 5px;
}
.modal_window.small_indents .lootbox_win_hero {
  grid-row-gap: 5px;
  margin-bottom: 5px;
}
.modal_window.small_indents .runec_assets_block {
  grid-row-gap: 5px;
}
.modal_window.small_indents .lootbox_win_hero_actives {
  margin: 5px 0px;
}
.modal_window.small_indents .lootbox_win_action_btn {
  height: 40px;
}

.modal_window.small_indents .rune_create_container .rune_container.numcell6,
.modal_window.small_indents .rune_create_container .rune_container.numcell4 {
  height: 10px 0px;
}
.modal_window.small_indents .rune_create_container .rune_container.numcell2 {
  height: 10px 0px;
}
.modal_window.small_indents .rune_create_actions {
  margin: 5px 0px;
}
.modal_window.small_indents .modal_window_details {
  margin-top: 10px;
}
.modal_window.small_indents .lootbox_win_container.two_row {
  grid-row-gap: 25px;
}
/* ========================================================================== */
.modal_window_details {
  margin-top: 20px;
  align-self: end;
  display: grid;
  grid-template-rows: auto 1fr;
}
.modal_window_details_label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.modal_window_details_label.rent_rules {
  font-size: 16px;
  font-weight: 600;
}
.modal_window_details_label svg {
  height: 10px;
  width: auto;
  stroke: #ffffff;
  transform: rotate(-90deg);
  margin-left: 6px;
  transition: 0.25s;
}
.modal_window_details.open .modal_window_details_label svg {
  transform: rotate(90deg);
}
.modal_window_details_wrapper {
  height: 0px;
  overflow: hidden;
  will-change: transform;
}
.modal_window_details.open .modal_window_details_wrapper {

}
.modal_window_details_content {
  min-height: 150px;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding: 28px 0px;
}
.modal_window_details_content p {
  margin: 0px;
  margin-bottom: 12px;
}
.message_content {
  opacity: 0;
  filter: blur(2px);
  --show-speed: 2s;
}
.message_content.show {
  animation: fadeIn var(--show-speed) forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
    filter: none;
  }
}

/* ========================================================================== */

.win_modal_title_block {
  display: grid;
  align-items: center;
}
.win_modal_title_block.hero {
  grid-template-columns: 1fr auto 1fr;
}
.win_modal_title_block.rune {
  grid-template-columns: 1fr auto 1fr;
}
.winm_hero_battle_icon {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.winm_hero_battle_icon svg {
  width: 18px;
  height: auto;
  fill: #FFFFFF;
}
.winm_hero_level {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 26px;
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  background: linear-gradient(215deg, var(--rare-color-f) 0%, var(--rare-color-s) 100%);
}
.winm_hero_level.collectible:not([data-rare]) {
  background-color: #FFCC00;
  color: #000000;
}
.winm_hero_level.epic:not([data-rare]) {
  background-color: #9d1cb0;
}
.winm_hero_level.rare:not([data-rare]) {
  background-color: #368ee2;
}
.winm_hero_level.unusual:not([data-rare]) {
  background-color: #73e33b;
  color: #000000;
}
.winm_hero_level.ordinary:not([data-rare]) {
  background-color: #a0a6ab;
}
.winm_hero_level.limited:not([data-rare]) {
  background-color: #00D6DD;
}
.winm_hero_level.legend:not([data-rare]) {
  background-color: #FF8801;
}
.win_modal_label {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.runec_assets_block {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 14px;
}
.runec_assets_block.tutorial_focus {
  pointer-events: none;
  z-index: 21;
  position: relative;
}
.runec_asset_item {
  width: 100%;
  justify-self: start;
  height: 30px;
  padding: 0px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #24272C;
  border-radius: 15px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.runec_assets_block .runec_asset_item:nth-child(1){
  grid-column: 1/2;
}
.runec_assets_block .runec_asset_item:nth-child(2){
  grid-column: 2/4;
}
.runec_assets_block .runec_asset_item:nth-child(3){
  grid-column: 4/5;
}
.runec_assets_block .runec_asset_item:nth-child(4){
  grid-column: 1/2;
}
.runec_assets_block .runec_asset_item:nth-child(5){
  grid-column: 2/4;
}
.runec_assets_block .runec_asset_item:nth-child(6){
  grid-column: 4/5;
}
.runec_assets_block .runec_asset_item:nth-child(7){
  justify-self: center;
  grid-column: 1/3;
}
.runec_assets_block .runec_asset_item:nth-child(8){
  justify-self: center;
  grid-column: 3/5;
}
.runec_asset_item.noupgrade {
  color: #434343;
}

.runec_assets_block_five {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 14px;
}
.runec_assets_block_five .runec_asset_item:nth-child(1){
  grid-column: 1/2;
}
.runec_assets_block_five .runec_asset_item:nth-child(2){
  grid-column: 2/4;
}
.runec_assets_block_five .runec_asset_item:nth-child(3){
  grid-column: 4/5;
}
.runec_assets_block_five .runec_asset_item:nth-child(4){
  grid-column: 1/2;
}
.runec_assets_block_five .runec_asset_item:nth-child(5){
  grid-column: 2/4;
}
.runec_assets_block_five .runec_asset_item:nth-child(6){
  grid-column: 4/5;
}
.runec_assets_block_five .runec_asset_item:nth-child(7){
  justify-self: center;
  grid-column: 1/5;
}



.runec_asset_item svg {
  width: auto;
  height: auto;
  margin-right: 5px;
  fill: #ffffff;
}
.runec_asset_item.noupgrade svg {
  fill: #434343;
}
.runec_asset_item:nth-child(1) svg {
  width: 26px;
}
.runec_asset_item:nth-child(2) svg {
  width: 20px;
}
.runec_asset_item:nth-child(3) svg {
  width: 17px;
}
.runec_asset_item:nth-child(4) svg {
  width: 19px;
}
.runec_asset_item:nth-child(5) svg {
  width: 16px;
}
.runec_asset_item:nth-child(6) svg {
  width: 32px;
}
.runec_asset_item:nth-child(7) svg {
  width: 17px;
}
.runec_asset_item:nth-child(8) svg {
  width: 18px;
}
.rune_create_actions {
  margin: 28px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
}
.rune_create_actions.one_btn {
  grid-template-columns: 1fr;
}
.rune_create_action_btn {
  height: 40px;
  border-radius: 10px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.rune_create_action_btn.empty {
  background-color: inherit;
}
.rune_create_action_btn.active {
  background-color: #3D7CCF;
}
.rune_create_action_btn.del_pers svg {
  width: 15px;
  height: auto;
  margin-left: 5px;
}
.rune_create_action_btn.del_pers img {
  width: 15px;
  height: auto;
  margin-left: 5px;
}
.rune_create_action_btn.is_broadcast {
  grid-column: 1/3;
  background-color: #A12424;
  height: 50px;
  font-size: 16px;
}

/* ========================================================================== */

/* .alert_text .confirm_win_money_icon {
  width: 15px;
  margin: 0px 4px -2px 4px;
}
.confirm_win_btn.yes .confirm_win_money_icon {
  width: 15px;
  margin: 0px 0px 3px 4px;
} */
.confirm_win_btn.alert_ok.getgems_link {
  width: 100%;
  text-decoration: none;
}
.confirm_win_btn.alert_ok.getgems_link .getgems_logo {
  width: auto;
  height: 18px;
  margin-left: 5px;
}
.alert_text .money_icon {
  width: 15px;
  height: auto;
  display: inline;
  margin: 0px 4px -3px 4px;
}
.alert_text .confirm_win_money_icon {
  width: 15px;
  height: auto;
  margin: 0px 4px -2px 4px;
}
.confirm_win_btn.yes .confirm_win_money_icon {
  width: 15px;
  height: auto;
  margin: 0px 0px -2px 4px;
}

/* ========================================================================== */

.segun_select_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.rune_win_select_label {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 15px;
}
.rune_win_select_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
.rune_select_noasset {
  grid-column: 1 / 4;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.runec_win_actions_container {
  border-radius: 35px 35px 0px 0px;
  background-color: #15171A;
  padding: 21px 16px 45px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
}
.runec_win_btns {
  justify-self: center;
  margin-top: 15px;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 6px;
}
.runec_win_button {
  height: 40px;
  background-color: #24272C;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 14px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.runec_win_button span {
  margin: 0px 4px;
}
.runec_win_button span:last-child {
  margin: 0px;
  margin-left: 4px;
}
.runec_win_button.select_btn {
  background-color: #3D7CCF;
  padding: 0px 16px;
}
.runec_win_button.cancel svg {
  width: 12px;
  height: auto;
  fill: #FF2727;
}
.runec_win_button.reselect_pers {
  background-color: #3D7CCF;
  padding: 0px 8px;
}
.runec_win_button.reselect_pers svg {
  width: 15px;
  height: auto;
  margin-left: 6px;
}
.runec_win_button.reselect_pers img {
  width: 15px;
  height: auto;
  margin-left: 6px;
}
.rune_win_select_item {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}
.rune_win_select_item svg.nft_icon,
.rune_win_select_item svg.nft_fusion_icon {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: auto;
}
.rune_win_select_item .nft_icon_wrapper,
.rune_win_select_item .nft_fusion_icon_wrapper {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: auto;
  display: flex;
}
.rune_win_select_item img.nft_icon,
.rune_win_select_item img.nft_fusion_icon {
  width: 100%;
  height: auto;
}
.rune_win_select_item.hidden {
  display: none;
}
.rune_win_select_item.used::before {
  position: absolute;
  content: '';
  top: 6px;
  left: 6px;
  width: 13px;
  height: 13px;
  background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 1L13.5 13H0.5L7 1Z" fill="%23890D0D" stroke="%23FF2727" stroke-linejoin="round"/><path d="M6.34 9.57L6.03 5H7.89L7.58 9.57H6.34ZM6.96 12.08C6.68 12.08 6.45 11.99 6.27 11.81C6.09 11.63 6 11.4167 6 11.17C6 10.9167 6.09 10.7067 6.27 10.54C6.45 10.3667 6.68 10.28 6.96 10.28C7.24667 10.28 7.47667 10.3667 7.65 10.54C7.83 10.7067 7.92 10.9167 7.92 11.17C7.92 11.4167 7.83 11.63 7.65 11.81C7.47667 11.99 7.24667 12.08 6.96 12.08Z" fill="white"/></svg>');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.rnw_slt_item_ch_hidden {
  display: none;
}
.rnw_slt_item_ch_rect {
  position: absolute;
  z-index: 1;
  left: 7px;
  bottom: 7px;
  width: 22px;
  height: 22px;
  border: 1px solid #4998FF;
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnw_slt_item_ch_rect svg {
  width: 11px;
  height: auto;
  stroke: #4998FF;
  opacity: 0;
  transition: 0.25s;
}
.rnw_slt_item_ch_hidden:checked + .rnw_slt_item_ch_rect svg {
  opacity: 1;
}
.rune_win_select_item.hide_ch .rnw_slt_item_ch_hidden:not(:checked) + .rnw_slt_item_ch_rect {
  display: none;
}
.rune_win_select_item .segyn_icon {
  position: absolute;
  left: 7px;
  top: 5px;
  width: 20px;
  height: auto;
  z-index: 4;
  opacity: 0.5;
}
.rune_win_select_item .rnw_slt_item_ch_hidden:checked ~ .segyn_icon {
  opacity: 1;
}
.rnw_slt_item_block {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 10px;
  position: relative;
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnw_slt_item_ch_hidden:checked ~ .rnw_slt_item_block {
  opacity: 1;
}
.rnw_slt_item_pers_level {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: #191B1F;
  height: 13px;
  border-radius: 7px;
  padding: 0px 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 3;
}
.rnw_slt_item_block::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 3;
}
.rnw_slt_item_block::before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  filter: blur(2.5px);
  box-sizing: border-box;
  z-index: 2;
}

.rnw_slt_item_block::before,
.rnw_slt_item_block::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
}
.rnw_slt_item_block::before {
  filter: blur(2.5px);
  z-index: 2;
}
.rnw_slt_item_block::after {
  z-index: 3;
}
.rune_win_select_item.collectible .rnw_slt_item_block::after {
  border: 1px solid #FFCC00;
}
.rune_win_select_item.epic .rnw_slt_item_block::after {
  border: 1px solid #9d1cb0;
}
.rune_win_select_item.rare .rnw_slt_item_block::after {
  border: 1px solid #368ee2;
}
.rune_win_select_item.unusual .rnw_slt_item_block::after {
  border: 1px solid #73e33b;
}
.rune_win_select_item.ordinary .rnw_slt_item_block::after {
  border: 1px solid #a0a6ab;
}
.rune_win_select_item.limited .rnw_slt_item_block::after {
  border: 1px solid #00D6DD;
}
.rune_win_select_item.legend .rnw_slt_item_block::after {
  border: 1px solid #FF8801;
}
.rune_win_select_item.collectible .rnw_slt_item_block::before {
  border: 2px solid #FFCC00;
}
.rune_win_select_item.epic .rnw_slt_item_block::before {
   border: 2px solid #9d1cb0;
}
.rune_win_select_item.rare .rnw_slt_item_block::before {
   border: 2px solid #368ee2;
}
.rune_win_select_item.unusual .rnw_slt_item_block::before {
   border: 2px solid #73e33b;
}
.rune_win_select_item.ordinary .rnw_slt_item_block::before {
   border: 2px solid #a0a6ab;
}
.rune_win_select_item.limited .rnw_slt_item_block::before {
  border: 2px solid #00D6DD;
}
.rune_win_select_item.legend .rnw_slt_item_block::before {
  border: 2px solid #FF8801;
}

/* ========================================================================== */

.alert_window_wrapper {
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 1000000;
}
.alert_container {
  position: absolute;
  left: 50%;
  width: 100%;
  max-width: calc(394px - 32px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 37px 16px 17px 16px;
  box-sizing: border-box;
  animation: 0.25s alert_window_animate ease-out;
  z-index: 1;
}
.alert_container.tutorial {
  pointer-events: none;
}
.alert_container.tutorial::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background-color: rgba(0, 0, 0, 0.8);
}
@keyframes alert_window_animate {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
.alert_container_background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background-color: rgba(0,0,0,0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: -1;
}
.alert_block {
  width: 100%;
  display: flex;
  align-items: center;
}
.alert_text {
  width: 100%;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.alert_text .bold {
  font-weight: 700;
}
.alert_text .blue {
  color: #3D7CCF;
}
.prompt_error {
  display: none;
  width: 100%;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #DE4040;
  justify-content: center;
  margin-bottom: 23px;
}
.prompt_error.show {
  display: flex;
}
.prompt_input_block {
  width: 100%;
}
.prompt_input {
  width: 100%;
  height: 40px;
  border: 1px solid #00E7EA;
  border-radius: 10px;
  background-color: #000000;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #ffffff;
  box-sizing: border-box;
}
.prompt_input:focus {
  outline: none;
}
.prompt_input.error {
  border: 1px solid #DE4040;
}
.prompt_input::placeholder {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #6D6D6D;
}
.alert_subtext {
  font-style: normal;
  font-weight: 500;
  font-size: 8px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #6D6D6D;
  margin-top: 14px;
}
.alert_balance {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-top: 14px;
}
.alert_balance .money_icon {
  width: 15px;
  height: auto;
  margin-left: 5px;
  margin-bottom: -2px;
}
.alert_buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 23px;
}
.confirm_buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 5px;
  margin-top: 23px;
}
.confirm_win_btn {
  width: 100%;
  height: 34px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.confirm_win_btn.tutorial_focus {
  pointer-events: auto;
  z-index: 21;
}
.confirm_win_btn:not(.lock).yes {
  background-color: #3D7CCF;
}
.confirm_win_btn:not(.lock).yes.red {
  background-color: #6E1B1B;
}
.confirm_win_btn.alert_ok {
  width: 150px;
  background-color: #3D7CCF;
}
.confirm_win_btn .airdrop {
  font-size: 14px;
  line-height: 21px;
}

/* ========================================================================== */

.win_modal_img_container {
  --margin-tb: 28px;
  /* width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px auto;
  position: relative; */

  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-row-gap: 20px;
  margin: var(--margin-tb) 0px;
  width: 100%;
  height: calc(100% - var(--margin-tb) * 2);
  grid-template-rows: 1fr;
  position: relative;
  overflow: unset;
}
#market_buy_bilet_window .win_modal_img_wrapper {
  height: auto;
  align-self: center;
}
.winm_hero_number {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 26px;
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  background-color: #24272C;
}
.winm_hero_number.is_broadcast {
  filter: grayscale(1);
}
.win_modal_img_wrapper {
  /* max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column; */

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 250px;
  max-height: 500px;
  -webkit-mask-image: none;
}
.win_modal_img_wrapper::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  height: 60%;
  aspect-ratio: 1 / 4;
  border: 21px solid #1EF7FF;
  filter: blur(37.5px);
  border-radius: 50%;
  z-index: -1;
  border-top: 26px solid var(--rare-color-f);
  border-right: 26px solid var(--rare-color-f);
  border-bottom: 26px solid var(--rare-color-s);
  border-left: 26px solid var(--rare-color-s);
}
.modal_window.artifact_window .win_modal_img_wrapper::after {
  aspect-ratio: 1/1;
}
.win_modal_img_wrapper.collectible:not([data-rare])::after  {
  border: 26px solid #FFCC00;
}
.win_modal_img_wrapper.epic:not([data-rare])::after  {
   border: 26px solid #9d1cb0;
}
.win_modal_img_wrapper.rare:not([data-rare])::after {
   border: 26px solid #368ee2;
}
.win_modal_img_wrapper.unusual:not([data-rare])::after {
   border: 26px solid #73e33b;
}
.win_modal_img_wrapper.ordinary:not([data-rare])::after {
   border: 26px solid #a0a6ab;
}
.win_modal_img_wrapper.limited:not([data-rare])::after {
  border: 26px solid #00D6DD;
}
.win_modal_img_wrapper.legend:not([data-rare])::after {
  border: 26px solid #FF8801;
}
.win_modal_img {

  /* width: auto;
  height: auto;
  max-width: 288px;
  max-height: 377px;
  object-fit: contain;
  animation: 0.5s card_hero_show_anim ease-in forwards;
  transform: translate(0%, -50%);
  opacity: 0; */

  position: absolute;
  left: 50%;
  /* top: 0px; */
  /* object-fit: contain; */
  /* transform: translate(-50%, 0px); */
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* transform: translate(-50%, -50%); */

}
.win_modal_img.is_broadcast {
  filter: grayscale(1);
}
.win_modal_img_wrapper:not(.noanim) .win_modal_img {
  transform: translate(0%, -50%);
  animation: 0.5s card_hero_show_anim ease-in forwards;
  opacity: 0;
}
.win_modal_img_wrapper:not(.noanim)::after {
  animation: 0.5s card_hero_light_show_anim ease-in forwards;
  opacity: 0;
}
@keyframes card_hero_light_show_anim {
  to {
    opacity: 1;
  }
}


/* ========================================================================== */

.loot_page_menu_btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  cursor: pointer;
  border-radius: 13px;
}
.loot_page_menu_btn svg {
  width: auto;
  height: auto;
  fill: #78797D;
  margin-right: 5px;
}
.loot_page_menu_btn.lootboxes svg {
  width: 12px;
  height: auto;
  margin-bottom: -1px;
}
.loot_page_menu_btn.rune svg {
  width: 11px;
  height: auto;
}
.loot_page_menu_btn.artifact svg {
  width: 12px;
  height: auto;
}
.loot_page_menu_btn.active {
  color: #ffffff;
  background-color: #474747;
}
.loot_page_menu_btn.active svg {
  fill: #ffffff;
}
.loot_page_menu_btn_counter {
  margin-left: 6px;
}
.loot_page_menu_btn.active .loot_page_menu_btn_counter {
  /* background-color: #3D7CCF; */
}

/* ========================================================================== */

.market_page  {
  padding-top: 100px;
  padding-bottom: 120px;
  box-sizing: border-box;
  grid-template-rows: auto auto 1fr;
}
.market_page_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0px 25px 0px;
}
.market_page_head_icon svg {
  width: 44px;
  height: auto;
  fill: #78797D;
  margin-bottom: 19px;
}
.market_page_head_label {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.market_item_wrapper {
  border-radius: 10px;
  background-color: #050507;
}
.market_item_name {
  padding: 7px 5px 5px 5px;
  box-sizing: border-box;
  font-style: normal;
  font-weight: 500;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.market_item_price {
  display: flex;
  align-items: center;
  padding: 0px 5px 7px 5px;
}
.market_item_price svg {
  width: 10px;
  height: auto;
  margin-right: 6px;
}
.market_item_price img {
  width: 10px;
  height: auto;
  margin-right: 6px;
}
.market_item_price_num {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.market_item_price_num_str {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-left: 5px;
}

/* ========================================================================== */

.lootbox_open_win_head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  margin-bottom: 10px;
  transition: 0.25s;
}
.lootbox_open_img_wrapper {
  grid-column: 2/3;
  grid-row: 1/4;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
}
.lootbox_open_img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.lootbox_open_name {
  grid-column: 1/2;
  grid-row: 1/2;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  box-sizing: border-box;
}
.lootbox_open_label {
  align-self: end;
  grid-column: 1/2;
  grid-row: 3/4;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  text-align: left;
  margin-bottom: 6px;
}
.lootbox_open_btn {
  justify-self: center;
  margin-right: -6px;
  width: 100px;
  height: 40px;
  font-family: 'Arial';
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  grid-column: 3 / 4;
  grid-row: 1 / 4;
  border-radius: 10px;
  background-color: #3D7CCF;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: left;
  padding: 5px 13px;
  box-sizing: border-box;
}
.lootbox_open_btn.lootbox_open_btn_ready.loading {
  display: none;
}
.lootbox_open_btn svg {
  width: 26px;
  min-width: 26px;
  height: auto;
  fill: #ffffff;
}
.lootbox_count_buy {
  align-self: center;
  grid-column: 1/2;
  grid-row: 2/3;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: -0.32px;
  margin: 5px 0px;
  color: #ffffff;
}
.lootbox_count_buy .count_label {
  font-weight: 400;
  color: #B9B9B9;
}
.lootbox_pay_btn {
  font-family: 'Arial';
  align-self: center;
  grid-column: 3 / 4;
  grid-row: 1 / 4;
  border-radius: 10px;
  background-color: #3D7CCF;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
  padding: 5px 9px;
  box-sizing: border-box;
}
.lootbox_pay_btn.lootbox_open_btn_market.loading {
  display: none;
}
.lootbox_pay_btn svg {
  display: inline;
  width: 14px;
  height: auto;
  fill: #ffffff;
}
.lootbox_pay_btn img {
  display: inline;
  width: 14px;
  height: auto;
  fill: #ffffff;
  margin: 0px 0px -2px 4px;
}

/* ========================================================================== */

.roulette_label {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 20px;
}
.roulette_container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  padding: 32px 0px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  position: relative;
}
.roulette_container::before {
  position: absolute;
  content: '';
  left: calc(50% - 65px);
  top: 0px;
  width: 1px;
  height: 100%;
  background-color: #ffffff;
}
.roulette_container::after {
  position: absolute;
  content: '';
  left: calc(50% + 65px);
  top: 0px;
  width: 1px;
  height: 100%;
  background-color: #ffffff;
}
.roulette_awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 40px;
  margin-top: 80px;
}
.roulette_award_item {
  height: 40px;
  border-radius: 10px;
  background-color: #24272C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.roulette_award_item.money svg {
  width: 20px;
  height: auto;
  margin-right: 16px;
}
.roulette_award_item.power svg {
  width: 17px;
  height: auto;
  margin-right: 16px;
  fill: #57FFE3;
}
.roulette_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 40px;
  margin-top: 40px;
  margin-bottom: 70px;
}
.roulette_action_btn {
  height: 40px;
  border-radius: 10px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  background-color: #3D7CCF;
}
.roulette_action_btn svg {
  width: 15px;
  height: auto;
  margin-left: 5px;
}

/* ========================================================================== */

.lootbox_win_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 12px;
}
.lootbox_win_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 25px;
  box-sizing: border-box;
}
.lootbox_win_container.two_row {
  height: auto;
  align-self: center;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-row-gap: 56px;
}
.lootbox_reward_item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-row-gap: 14px;
}
.lootbox_reward_item_number {
  font-weight: 500;
  font-size: 24px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.lootbox_reward_item_icon {
  width: 130px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.lootbox_reward_item_icon.power svg {
  width: 90px;
  height: auto;
  fill: #57FFE3;
}
.lootbox_reward_item_icon.power::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 102px;
  height: 159px;
  background: #009C82;
  filter: blur(40.85px);
  z-index: -1;
}
.lootbox_reward_item_icon.money svg {
  width: 128px;
  height: auto;
}
.lootbox_reward_item_icon.money img {
  width: 128px;
  height: auto;
}
.lootbox_reward_item_icon.money::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 158px;
  height: 109px;
  background: #9E6202;
  filter: blur(40.85px);
  z-index: -1;
}



.lootbox_win_hero {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-row-gap: 20px;
  margin-bottom: 12px;
  width: 100%;
  height: 100%;
  grid-template-rows: auto 1fr;
}
.lootbox_win_rune {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 15px;
  height: 100%;
  grid-template-rows: auto 1fr;
  align-items: center;
}
.lootbox_win_rune_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lootbox_win_name {
  min-height: 21px;
  justify-self: center;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}

.loot_win_placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  background-color: #000000;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: auto 100%;
  transform: translate(-50%, -50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.loot_win_placeholder.show {
  animation: 0.3s loot_win_show linear forwards;
}
@keyframes loot_win_show {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    -o-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  10% {
    -webkit-clip-path: circle(50% at 50% 50%);
    -o-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
  }
  100% {
    -webkit-clip-path: circle(0% at 50% 50%);
    -o-clip-path: circle(0% at 50% 50%);
    clip-path: circle(0% at 50% 50%);
  }
}
.lootbox_win_hero_img_container {
  /* width: 260px;
  height: 260px; */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 500px;
}
.lootbox_win_hero_img_container::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80%;
  aspect-ratio: 1 / 2;
  border: 21px solid rgba(0,0,0,0);
  filter: blur(37.5px);
  border-radius: 80px;
  z-index: -1;
}
.lootbox_win_hero_img {
  position: absolute;
  left: 50%;
  /* top: 0px; */
  /* width: auto;
  height: 100%; */
  /* object-fit: contain; */
  /* transform: translate(-50%, 0px); */

  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  max-width: 100%;
  max-height: 100%;
  top: 50%;
  /* transform: translate(-50%, -50%); */
  animation: 0.5s card_hero_show_anim ease-in forwards;
  transform: translate(0%, -50%);
  opacity: 0;
}
@keyframes card_hero_show_anim {
  0% {
    transform: translate(0%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.lootbox_win_hero_img_container.collectible::after {
  border: 21px solid #FFCC00;
}
.lootbox_win_hero_img_container.epic::after {
  border: 21px solid #9d1cb0;
}
.lootbox_win_hero_img_container.rare::after {
  border: 21px solid #368ee2;
}
.lootbox_win_hero_img_container.unusual::after {
  border: 21px solid #73e33b;
}
.lootbox_win_hero_img_container.ordinary::after {
  border: 21px solid #a0a6ab;
}
.lootbox_win_hero_img_container.limited::after {
  border: 21px solid #00D6DD;
}
.lootbox_win_hero_img_container.legend::after {
  border: 21px solid #FF8801;
}
.lootbox_win_counterX {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #00E7EA;
  font-size: 24px;
  font-weight: 700;
  width: 80px;
  height: 80px;
  background: rgba(71, 78, 87, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transform: translate(50%, 0px);
}
.lootbox_win_hero_actives {
  margin: 20px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
}
.lootbox_win_hero_active_item {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
  justify-items: center;
  background-color: rgba(71,78,87,0.3);
  border-radius: 10px;
  padding: 10px 10px 8px 10px;
  box-sizing: border-box;
}
.ltbx_winh_acit_icon {
  width: 71px;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ltbx_winh_acit_icon.bilet svg {
  width: 55px;
  height: auto;
  fill: #57FFE3;
}
.ltbx_winh_acit_icon.money svg {
  width: 71px;
  height: auto;
}
.ltbx_winh_acit_icon.money img {
  width: 71px;
  height: auto;
}
.ltbx_winh_acit_counter {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.lootbox_win_action_btn {
  width: 100%;
  height: 60px;
  align-self: center;
  justify-self: center;
  border-radius: 10px;
  background-color: #3D7CCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

/* ========================================================================== */
/* ========================================================================== */
/* ========================================================================== */

.rune_container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  --cell-size: 120px;
  --border-size: 50px;
  --cell-padding: 0px;
  --body-padding: 15px;
  --body-gap: 8px;
  --cell-radius: 5px;

  --cell-img-width: auto;
  --cell-img-height: calc(100% - 10px);
  --cell-svg-width: auto;
  --cell-svg-height: calc(100% - 20px);

  --artifact-size: 90px;
  --artifact-border-size: 10px;
  --artifact-top-padding: calc(var(--cell-size) / 4);
  --artifact-bottom-padding: calc(var(--cell-size) / 4);
  --artifact-sides-padding: calc(var(--border-size) / 2);
  --artifact-cell-radius: 2px;

  --artifact-img-width: auto;
  --artifact-img-height: 100%;
  --artifact-svg-width: auto;
  --artifact-svg-height: calc(100% - 20px);
  z-index: 1;
}
.rune_block {
  position: relative;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: var(--border-size) auto var(--border-size);
  grid-template-rows: var(--border-size) auto var(--border-size);
  grid-template-areas:
  'corner_tl border_t corner_tr'
  'border_l body border_r'
  'corner_bl border_b corner_br';
}
.rune_body {
  grid-area: body;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--body-gap);
  position: relative;
  padding: var(--body-padding);
  box-sizing: border-box;
}
.rune_container.numcell2 .rune_body {
  grid-template-columns: 1fr;
}
.rune_body::after {
  position: absolute;
  content: '';
  left: -4px;
  top: -2px;
  width: calc(100% + 8px);
  height: calc(100% + 11px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}
.rune_container.numcell2 .rune_body::after {
  background-image: url(/app/images/rune/rune_fon2.png);
  /* left: -1px;
  top: 0px;
  width: calc(100% + 2px);
  height: calc(100% + 4px); */
  left: calc(var(--body-padding) / 2 * -1);
  top: calc(var(--body-padding) / 2 * -1);
  width: calc(100% + var(--body-padding));
  height: calc(100% + var(--body-padding));
}
.rune_container.numcell4 .rune_body::after {
  background-image: url(/app/images/rune/rune_fon4.png);
}
.rune_container.numcell6 .rune_body::after {
  background-image: url(/app/images/rune/rune_fon6.png);
}
.rune_artifacts_block {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translate(0px, -50%);
  width: 100%;
  height: 0px;
  z-index: 10;
}
/* ========================================================================== */
.rune_block_corner {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.rune_block_corner.top_left {
  grid-area: corner_tl;
  background-image: url(/app/images/rune/rune_corner_tl.png);
}
.rune_block_corner.top_right {
  grid-area: corner_tr;
  background-image: url(/app/images/rune/rune_corner_tr.png);
}
.rune_block_corner.bottom_right {
  grid-area: corner_br;
  background-image: url(/app/images/rune/rune_corner_br.png);
}
.rune_block_corner.bottom_left {
  grid-area: corner_bl;
  background-image: url(/app/images/rune/rune_corner_bl.png);
}
/* ========================================================================== */
.rune_block_border {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.rune_block_border.top {
  grid-area: border_t;
}
.rune_block_border.right {
  grid-area: border_r;
}
.rune_block_border.bottom {
  grid-area: border_b;
}
.rune_block_border.left {
  grid-area: border_l;
}
.rune_container.numcell2 .rune_block_border.top {
  background-image: url(/app/images/rune/rune_border_ts.png);
}
.rune_container.numcell4 .rune_block_border.top,
.rune_container.numcell6 .rune_block_border.top {
  background-image: url(/app/images/rune/rune_border_tl.png);
}
.rune_container.numcell2 .rune_block_border.right,
.rune_container.numcell4 .rune_block_border.right {
  background-image: url(/app/images/rune/rune_border_rs.png);
}
.rune_container.numcell6 .rune_block_border.right {
  background-image: url(/app/images/rune/rune_border_rl.png);
}
.rune_container.numcell2 .rune_block_border.bottom {
  background-image: url(/app/images/rune/rune_border_bs.png);
}
.rune_container.numcell4 .rune_block_border.bottom,
.rune_container.numcell6 .rune_block_border.bottom {
  background-image: url(/app/images/rune/rune_border_bl.png);
}
.rune_container.numcell2 .rune_block_border.left,
.rune_container.numcell4 .rune_block_border.left {
  background-image: url(/app/images/rune/rune_border_ls.png);
}
.rune_container.numcell6 .rune_block_border.left {
  background-image: url(/app/images/rune/rune_border_ll.png);
}
/* ========================================================================== */
.rune_cell {
  width: var(--cell-size);
  height: var(--cell-size);
  padding: var(--cell-padding);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cell-radius);
  position: relative;
  background-color: #15171A;
}

.rune_cell .segyn_icon {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 22px;
  height: auto;
  z-index: 4;
}
.rune_block_artifact {
  position: absolute;
  width: var(--artifact-size);
  height: var(--artifact-size);
  padding: var(--artifact-border-size);
  box-sizing: border-box;
  background-color: #15171A;
  background-image: url(/app/images/rune/rune_artif.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rune_cell img {
  width: var(--cell-img-width);
  max-width: 100%;
  height: var(--cell-img-height);
  max-height: 100%;
  object-fit: contain;
}
.rune_cell .nft_icon_wrapper,
.rune_cell .nft_fusion_icon_wrapper {
  bottom: -3px;
  position: absolute;
  right: -3px;
  width: var(--cell-nft-width);
  height: auto;
  mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.60614 19.7535L9.46328 23.3761C10.2369 23.7851 11.1108 24 11.9998 24C12.8888 24 13.7626 23.7851 14.5363 23.3761L21.3934 19.7535C22.1833 19.3354 22.8406 18.7294 23.2984 17.9972C23.7563 17.2649 23.9983 16.4326 24 15.5847V8.40396C23.9988 7.55598 23.7569 6.72346 23.299 5.99116C22.8411 5.25886 22.1836 4.65295 21.3934 4.23511L14.5363 0.612136C13.7599 0.210639 12.8869 0 11.9994 0C11.1118 0 10.2389 0.210639 9.46243 0.612136L2.60529 4.23511C1.81535 4.65313 1.15812 5.25912 0.700484 5.9914C0.242852 6.72368 0.00115696 7.55611 0 8.40396V15.5847C0.00133103 16.4326 0.243192 17.265 0.700971 17.9973C1.15875 18.7296 1.8161 19.3355 2.60614 19.7535Z" fill="black"/></svg>');
  mask-size: 100%;
  background-color: #000000;
  display: flex;
  z-index: 4;
}
.rune_cell img.nft_icon,
.rune_cell img.nft_fusion_icon {
  width: 100%;
  height: auto;
}
.rune_cell svg {
  width: var(--cell-svg-width);
  max-width: 100%;
  height: var(--cell-svg-height);
  max-height: 100%;
  fill: #78797D;
  object-fit: contain;
}
.rune_cell svg.nft_fusion_icon {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 15px;
  height: 15px;
  z-index: 10;
}
.rune_block_artifact img {
  width: var(--artifact-img-width);
  max-width: 100%;
  height: var(--artifact-img-height);
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--artifact-cell-radius);
}
.rune_block_artifact svg {
  width: var(--artifact-svg-width);
  max-width: 100%;
  height: var(--artifact-svg-height);
  max-height: 100%;
  fill: #78797D;
  object-fit: contain;
}
/* ========================================================================== */
.rune_block::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  filter: blur(26px);
  z-index: -2;
}
.rune_container.collectible .rune_block::after {
  border: 7px solid #FFCC00;
}
.rune_container.epic .rune_block::after {
  border: 7px solid #9d1cb0;
}
.rune_container.rare .rune_block::after {
  border: 7px solid #368ee2;
}
.rune_container.unusual .rune_block::after {
  border: 7px solid #73e33b;
}
.rune_container.ordinary .rune_block::after {
  border: 7px solid #a0a6ab;
}
.rune_container.limited .rune_block::after {
  border: 7px solid #00D6DD;
}
.rune_container.legend .rune_block::after {
  border: 7px solid #FF8801;
}
.rune_container.collectible .rune_cell svg path:nth-child(2){
  fill: #FFCC00;
}
.rune_container.epic .rune_cell svg path:nth-child(2){
  fill: #9d1cb0;
}
.rune_container.rare .rune_cell svg path:nth-child(2){
  fill: #368ee2;
}
.rune_container.unusual .rune_cell svg path:nth-child(2){
  fill: #73e33b;
}
.rune_container.ordinary .rune_cell svg path:nth-child(2){
  fill: #a0a6ab;
}
.rune_container.limited .rune_cell svg path:nth-child(2){
  fill: #00D6DD;
}
.rune_container.legend .rune_cell svg path:nth-child(2){
  fill: #FF8801;
}
/* ========================================================================== */
.rune_cell::before,
.rune_cell::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: var(--cell-radius);
  box-sizing: border-box;
  border-top: 1px solid var(--rare-color-f);
  border-right: 1px solid var(--rare-color-f);
  border-bottom: 1px solid var(--rare-color-s);
  border-left: 1px solid var(--rare-color-s);
}
.rune_cell::before {
  filter: blur(2.5px);
  z-index: 2;
}
.rune_cell::after {
  z-index: 3;
}
.rune_block_artifact::before,
.rune_block_artifact::after {
  position: absolute;
  content: '';
  top: var(--artifact-border-size);
  left: var(--artifact-border-size);
  width: calc(100% - var(--artifact-border-size) * 2 );
  height: calc(100% - var(--artifact-border-size) * 2 );
  border-radius: var(--artifact-cell-radius);
  box-sizing: border-box;
}
.rune_block_artifact::before {
  filter: blur(2.5px);
  z-index: 2;
}
.rune_block_artifact::after {
  z-index: 3;
}
.rune_container.collectible .rune_cell:not([data-rare])::after,
.rune_container.collectible .rune_block_artifact::after {
  border: 1px solid #FFCC00;
}
.rune_container.epic .rune_cell:not([data-rare])::after,
.rune_container.epic .rune_block_artifact::after {
  border: 1px solid #9d1cb0;
}
.rune_container.rare .rune_cell:not([data-rare])::after,
.rune_container.rare .rune_block_artifact::after {
  border: 1px solid #368ee2;
}
.rune_container.unusual .rune_cell:not([data-rare])::after,
.rune_container.unusual .rune_block_artifact::after {
  border: 1px solid #73e33b;
}
.rune_container.ordinary .rune_cell:not([data-rare])::after,
.rune_container.ordinary .rune_block_artifact::after {
  border: 1px solid #a0a6ab;
}
.rune_container.limited .rune_cell:not([data-rare])::after,
.rune_container.limited .rune_block_artifact::after {
  border: 1px solid #00D6DD;
}
.rune_container.legend .rune_cell:not([data-rare])::after,
.rune_container.legend .rune_block_artifact::after {
  border: 1px solid #FF8801;
}
.rune_container.collectible .rune_cell:not([data-rare])::before,
.rune_container.collectible .rune_block_artifact::before {
  border: 2px solid #FFCC00;
}
.rune_container.epic .rune_cell:not([data-rare])::before,
.rune_container.epic .rune_block_artifact::before {
   border: 2px solid #9d1cb0;
}
.rune_container.rare .rune_cell:not([data-rare])::before,
.rune_container.rare .rune_block_artifact::before {
   border: 2px solid #368ee2;
}
.rune_container.unusual .rune_cell:not([data-rare])::before,
.rune_container.unusual .rune_block_artifact::before {
   border: 2px solid #73e33b;
}
.rune_container.ordinary .rune_cell:not([data-rare])::before,
.rune_container.ordinary .rune_block_artifact::before {
   border: 2px solid #a0a6ab;
}
.rune_container.limited .rune_cell:not([data-rare])::before,
.rune_container.limited .rune_block_artifact::before {
  border: 2px solid #00D6DD;
}
.rune_container.legend .rune_cell:not([data-rare])::before,
.rune_container.legend .rune_block_artifact::before {
  border: 2px solid #FF8801;
}
/* ========================================================================== */
.rune_container.numartifact1 .rune_block_artifact:nth-child(1) {
  top: 50%;
  left: calc(100% + var(--artifact-sides-padding));
  transform: translate(0px, -50%);
}
.rune_container.numartifact2 .rune_block_artifact:nth-child(1),
.rune_container.numartifact3 .rune_block_artifact:nth-child(1),
.rune_container.numartifact4 .rune_block_artifact:nth-child(1) {
  top: var(--artifact-top-padding);
  left: calc(100% + var(--artifact-sides-padding));
  transform: translate(0px, 0px);
}
.rune_container.numartifact2 .rune_block_artifact:nth-child(2),
.rune_container.numartifact3 .rune_block_artifact:nth-child(2),
.rune_container.numartifact4 .rune_block_artifact:nth-child(2) {
  bottom: var(--artifact-bottom-padding);
  left: calc(100% + var(--artifact-sides-padding));
  transform: translate(0px, 0px);
}
.rune_container.numartifact3 .rune_block_artifact:nth-child(3) {
  top: 50%;
  right: calc(100% + var(--artifact-sides-padding));
  transform: translate(0px, -50%);
}
.rune_container.numartifact4 .rune_block_artifact:nth-child(3) {
  top: var(--artifact-top-padding);
  right: calc(100% + var(--artifact-sides-padding));
  transform: translate(0px, 0px);
}
.rune_container.numartifact4 .rune_block_artifact:nth-child(4) {
  bottom: var(--artifact-bottom-padding);
  right: calc(100% + var(--artifact-sides-padding));
  transform: translate(0px, 0px);
}
/* ========================================================================== */

.rune_cell_pers_level {
  width: max-content;
  white-space: nowrap;
  position: absolute;
  bottom: 0px;
  left: 50%;
  background-color: #191B1F;
  height: 13px;
  border-radius: 7px;
  padding: 0px 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 10px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 4;
  transform: translate(-50%, 4px);
  background: linear-gradient(215deg, var(--rare-color-f) 0%, var(--rare-color-s) 100%);
}
.rune_container.collectible .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #FFCC00;
}
.rune_container.epic .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #9d1cb0;
}
.rune_container.rare .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #368ee2;
}
.rune_container.unusual .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #73e33b;
}
.rune_container.ordinary .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #a0a6ab;
}
.rune_container.limited .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #00D6DD;
}
.rune_container.legend .rune_cell:not([data-rare]) .rune_cell_pers_level {
  background: #FF8801;
}
/* ========================================================================== */
.rune_container.collectible .rune_block_artifact svg path.plus {
  fill: #FFCC00;
}
.rune_container.epic .rune_block_artifact svg path.plus {
  fill: #9d1cb0;
}
.rune_container.rare .rune_block_artifact svg path.plus {
  fill: #368ee2;
}
.rune_container.unusual .rune_block_artifact svg path.plus {
  fill: #73e33b;
}
.rune_container.ordinary .rune_block_artifact svg path.plus {
  fill: #a0a6ab;
}
.rune_container.limited .rune_block_artifact svg path.plus {
  fill: #00D6DD;
}
.rune_container.legend .rune_block_artifact svg path.plus {
  fill: #FF8801;
}

/* ========================================================================== */
/* ========================================================================== */
/* ========================================================================== */

.hero_container_main_past_rune .hero_name_block {
  font-size: 16px;
  line-height: 18px;
}
.hero_rune_container .rune_container.numcell6,
.hero_rune_container .rune_container.numcell4 {
  --cell-size: 40px;
  --border-size: 21px;
  --body-padding: 3px;
  --body-gap: 5px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --artifact-size: 30px;
  --artifact-border-size: 4px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --cell-nft-width: 18px;
}
.hero_rune_container .rune_container.numcell2 {
  --cell-size: 60px;
  --border-size: 22px;
  --body-padding: 6px;
  --body-gap: 6px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --artifact-size: 38px;
  --artifact-border-size: 4px;
  --artifact-img-height: calc(100% - 5px);
  --artifact-svg-height: calc(100% - 5px);
  --cell-nft-width: 18px;
}
.hero_rune_container .rune_container {
  margin-top: 40px;
}

/* ========================================================================== */

.itemslist_grid_item .rune_container.numcell6,
.itemslist_grid_item .rune_container.numcell4 {
  --cell-size: 32px;
  --border-size: 18px;
  --body-padding: 3px;
  --body-gap: 3px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --artifact-size: 26px;
  --artifact-border-size: 4px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --cell-nft-width: 16px;
}
.itemslist_grid_item .rune_container.numcell2 {
  --cell-size: 49px;
  --border-size: 18px;
  --body-padding: 5px;
  --body-gap: 5px;
  --cell-img-height: calc(100% - 5px);
  --cell-svg-height: calc(100% - 10px);
  --artifact-size: 33px;
  --artifact-border-size: 4px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --cell-nft-width: 16px;
}

.rnw_slt_item_block .rune_container.numcell6,
.rnw_slt_item_block .rune_container.numcell4 {
  --cell-size: 32px;
  --border-size: 18px;
  --body-padding: 3px;
  --body-gap: 3px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --artifact-size: 26px;
  --artifact-border-size: 4px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --cell-nft-width: 16px;
}
.rnw_slt_item_block .rune_container.numcell2 {
  --cell-size: 49px;
  --border-size: 18px;
  --body-padding: 5px;
  --body-gap: 5px;
  --cell-img-height: calc(100% - 5px);
  --cell-svg-height: calc(100% - 10px);
  --artifact-size: 33px;
  --artifact-border-size: 4px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --cell-nft-width: 16px;
}
.rnw_slt_item_block .rune_container.numcell6 .rune_cell .segyn_icon,
.rnw_slt_item_block .rune_container.numcell4 .rune_cell .segyn_icon,
.rnw_slt_item_block .rune_container.numcell2 .rune_cell .segyn_icon {
  width: 14px;
  opacity: 1;
}
.rune_create_container {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.rune_create_container .rune_container.numcell6,
.rune_create_container .rune_container.numcell4 {
  margin: 70px 0px;
  --cell-size: 66px;
  --border-size: 36px;
  --body-padding: 7px;
  --body-gap: 8px;
  --cell-img-height: calc(100% - 2px);
  --cell-svg-height: calc(100% - 14px);
  --artifact-size: 46px;
  --artifact-border-size: 4px;
  --artifact-img-height: calc(100% - 10px);
  --artifact-svg-height: calc(100% - 10px);
  --cell-nft-width: 20px;
}
.rune_create_container .rune_container.numcell2 {
  margin: 70px 0px;
  --cell-size: 100px;
  --border-size: 36px;
  --body-padding: 7px;
  --body-gap: 8px;
  --cell-img-height: calc(100% - 10px);
  --cell-svg-height: calc(100% - 20px);
  --artifact-size: 55px;
  --artifact-border-size: 4px;
  --artifact-img-height: calc(100% - 10px);
  --artifact-svg-height: calc(100% - 10px);
  --cell-nft-width: 20px;
}

.c_lootbox_item .rune_container.numcell6,
.c_lootbox_item .rune_container.numcell4 {
  --cell-size: 16px;
  --border-size: 6px;
  --body-padding: 1px;
  --body-gap: 1px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --cell-radius: 1px;
  --artifact-size: 15px;
  --artifact-border-size: 3px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --artifact-cell-radius: 0px;
}
.c_lootbox_item .rune_container.numcell2 {
  --cell-size: 26px;
  --border-size: 7px;
  --body-padding: 2px;
  --body-gap: 2px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --cell-radius: 1px;
  --artifact-size: 17px;
  --artifact-border-size: 3px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --artifact-cell-radius: 0px;
}

.lootbox_win_rune_wrapper .rune_container.numcell6,
.lootbox_win_rune_wrapper .rune_container.numcell4 {
  margin: 15px 0px;
  --cell-size: 66px;
  --border-size: 36px;
  --body-padding: 7px;
  --body-gap: 8px;
  --cell-img-height: calc(100% - 2px);
  --cell-svg-height: calc(100% - 14px);
  --artifact-size: 46px;
  --artifact-border-size: 4px;
  --artifact-img-height: calc(100% - 10px);
  --artifact-svg-height: calc(100% - 10px);
}
.lootbox_win_rune_wrapper .rune_container.numcell2 {
  margin: 15px 0px;
  --cell-size: 100px;
  --border-size: 36px;
  --body-padding: 7px;
  --body-gap: 8px;
  --cell-img-height: calc(100% - 10px);
  --cell-svg-height: calc(100% - 20px);
  --artifact-size: 55px;
  --artifact-border-size: 4px;
  --artifact-img-height: calc(100% - 10px);
  --artifact-svg-height: calc(100% - 10px);
}

/* ========================================================================== */

.market_buy_btns {
  width: 100%;
  justify-self: center;
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 6px;
}
.market_buy_button {
  height: 60px;
  background-color: #24272C;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 14px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.market_buy_button.buy {
  background-color: #3D7CCF;
  padding: 0px 30px;
}
.market_buy_button.buy svg {
  width: 15px;
  height: auto;
  margin-left: 8px;
}
.market_buy_button.buy img {
  width: 15px;
  height: auto;
  margin-left: 8px;
}
.market_buy_button.cancel svg {
  width: 12px;
  height: auto;
  fill: #FF2727;
}

.bilet_buy_block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bilet_buy_block_icon {
  z-index: 1;
}
.bilet_buy_block_icon::after {
  position: absolute;
  content: '';
  width: 193px;
  height: 296px;
  left: 50%;
  top: 50%;
  background: #009C82;
  filter: blur(51.15px);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.bilet_buy_block_icon svg {
  width: 204px;
  height: auto;
  fill: #57FFE3;
}
.bilet_buy_count {
  font-weight: 700;
  font-size: 36px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #57FFE3;
  margin-top: 40px;
  z-index: 2;
}
.upgrade_confirm_block .runec_assets_block {
  margin-top: 26px;
  margin-bottom: 8px;
}

/* ========================================================================== */

.page_wrapper.load_game {
  background: #000000;
  background-image: url(/app/images/background/fon_load.jpg);
  background-size: cover;
  background-position: center;
}
.game_start {
  width: 100%;
  max-width: 394px;
  padding: calc(80px + 16px) 16px 45px 16px;
  box-sizing: border-box;
  display: none;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
}
.game_start.show {
  display: grid;
}
.game_start_logo {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #DDECFF;
}
.game_start_logo img {
  width: 149px;
  height: auto;
  transition: 0.25s;
}
.game_start_logo.hint img {
  width: 279px;
}
.game_start_logo.road_map img {
  width: 149px;
}
.game_loading_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-row-gap: 25px;
  margin-top: 5px;
}

/* .game_loading_progress {
  padding: 0px 13px;
  width: 100%;
  height: 20px;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative;
}
.game_loading_progress_placeholder {
  position: absolute;
  left: 3px;
  bottom: 3px;
  height: 12px;
  width: 0px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  animation: 5s game_loading_progress linear forwards;
} */
/* @keyframes game_loading_progress {
  0% {
    width: 0px;
  }
  100% {
    width: calc(100% - 6px);
  }
} */
.game_loading_progress {
  height: 12px;
  background-color: #000000;
  border-radius: 4px;
  margin: 0px 30px;
  position: relative;
}
.game_loading_progress_placeholder {
  position: absolute;
  width: 0px;
  height: 12px;
  left: 0px;
  top: 50%;
  background: linear-gradient(270deg, #00CAD1 0%, #004D50 100%);
  border-radius: 5px;
  transform: translate(0px, -50%);
  transition: 0.5s;
  /* animation: 5s game_loading_progress linear forwards; */
}
@keyframes game_loading_progress {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}
.game_loading_progress_text {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 12px;
  line-height: 12px;
  color: #ffffff;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: opacity 0.3s ease;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.game_loading_content  {

}
.game_start_hint {
  display: none;
  background: rgba(0, 0, 0, 0.6);
  /* -webkit-backdrop-filter: blur(5px); */
  /* backdrop-filter: blur(5px); */
  border-radius: 35px;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-row-gap: 23px;
  padding: 32px 38px 48px 36px;
  box-sizing: border-box;
  margin-top: 100px;
}
.game_loading_content.hint .game_start_hint {
  display: grid;
}
.game_start_hint_title {
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.game_start_hint_text {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.game_start_list {
  display: none;
  grid-template-columns: 1fr;
  grid-row-gap: 10px;
}
.game_loading_content.road_map .game_start_list {
  display: grid;
}
.game_start_list_item {
  display: flex;
  align-items: center;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #DDECFF;
  position: relative;
  opacity: 0;
  animation: 0.5s start_list_item_show ease-in-out forwards;
}
.game_start_list_item:nth-child(2){ animation-delay: 0.25s; }
.game_start_list_item:nth-child(3){ animation-delay: 0.5s; }
.game_start_list_item:nth-child(4){ animation-delay: 0.75s; }
.game_start_list_item:nth-child(5){ animation-delay: 1s; }
.game_start_list_item:nth-child(6){ animation-delay: 1.25s; }
.game_start_list_item:nth-child(7){ animation-delay: 1.5s; }
.game_start_list_item:nth-child(8){ animation-delay: 1.75s; }
.game_start_list_item:nth-child(9){ animation-delay: 2s; }
.game_start_list_item:nth-child(10){ animation-delay: 2.25s; }
.game_start_list_item:nth-child(11){ animation-delay: 2.5s; }
.game_start_list_item:nth-child(12){ animation-delay: 2.75s; }
.game_start_list_item:nth-child(13){ animation-delay: 3s; }
.game_start_list_item:nth-child(14){ animation-delay: 3.25s; }
.game_start_list_item:nth-child(15){ animation-delay: 3.5s; }
.game_start_list_item:nth-child(16){ animation-delay: 3.75s; }
.game_start_list_item:nth-child(17){ animation-delay: 4s; }
.game_start_list_item:nth-child(18){ animation-delay: 4.25s; }
@keyframes start_list_item_show {
  from { opacity: 0; }
  to { opacity: 1; }
}
.game_start_list_item::before {
  position: absolute;
  content: '';
  left: 18px;
  top: calc(50% - -1px);
  width: 2px;
  height: calc(100% + 10px);
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  transform: rotate(-30deg);
}
.game_start_list_item:nth-child(2n)::before {
  left: 16px;
  top: calc(100% - 9px);
  transform: rotate(31deg);
}
.game_start_list_item:nth-child(16)::before {
  left: 18px;
  top: calc(100% - 9px);
  transform: rotate(26deg);
  height: calc(100% + 13px);
}
.game_start_list_item:nth-child(17)::before {
  left: 17px;
  top: calc(100% - 23px);
  transform: rotate(-26deg);
  height: calc(100% + 2px);
}
.game_start_list_item:last-child::before {
  display: none;
}
.gs_li_circle {
  width: 19px;
  height: 19px;
  border: 6px solid #5D6B84;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  margin-right: 12px;
  position: relative;
}
.game_start_list_item:nth-child(2n) .gs_li_circle {
  margin-left: 18px;
}
.game_start_list_item .gs_li_circle::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #2b3349;
  border-radius: 50%;
}
.game_start_list_item.complete .gs_li_circle::after {
  background-color: #ffffff;
}

/* ========================================================================== */

.modal_window.starterpack_win {
  background-color: #000000;
  background-image: url(/app/images/background/fon_game.png);
  background-size: cover;
  background-position: center;
}
.starterpack_title {
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.starterpack_win_hero_img_container {
  justify-self: center;
  width: auto;
  height: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 25px 0px 25px 0px;
}
.starterpack_win_hero_img_block {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.starterpack_win_hero_img_block::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  width: 69px;
  height: 213px;
  filter: blur(37.5px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.starterpack_win_hero_img_block.collectible::after  {
  border: 26px solid #FFCC00;
}
.starterpack_win_hero_img_block.epic::after  {
   border: 26px solid #9d1cb0;
}
.starterpack_win_hero_img_block.rare::after {
   border: 26px solid #368ee2;
}
.starterpack_win_hero_img_block.unusual::after {
   border: 26px solid #73e33b;
}
.starterpack_win_hero_img_block.ordinary::after {
   border: 26px solid #a0a6ab;
}
.starterpack_win_hero_img_block.limited::after {
  border: 26px solid #00D6DD;
}
.starterpack_win_hero_img_block.legend::after {
  border: 26px solid #FF8801;
}
.starterpack_win_hero_img {
  width: auto;
  height: auto;
  max-width: 288px;
  max-height: 355px;
  object-fit: contain;
}
.starterpack_win_hero_name {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-top: 20px;
}
.starterpack_items_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 25px;
}
.starterpack_item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-gap: 14px;
}
.starterpack_item_name {
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.starterpack_item_img {
  width: 68px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.starterpack_item_img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.starterpack_item_img.power svg {
  width: 48px;
  height: auto;
  fill: #57FFE3;
}
.starterpack_item_img.money svg {
  width: 62px;
  height: auto;
}
.starterpack_item_img.money img {
  width: 62px;
  height: auto;
}

/* ========================================================================== */

.messagebox_list {
  position: fixed;
  left: 0px;
  top: 135px;
  width: 100%;
  max-width: 394px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  z-index: 100;
  padding: 0px 16px;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  /* max-height: 133px; */
}
.messagebox_item {
  pointer-events: auto;
  /* width: max-content; */
  width: auto;
  max-width: 100%;
  margin-bottom: 5px;
  user-select: none;
}
.messagebox_item_content {
  background-color: #040809;
  border-radius: 35px;
  padding: 12px 28px 13px 28px;
  box-sizing: border-box;
  display: flex;
}
.messagebox_item_icon {

}
.messagebox_item_text {
  font-weight: 500;
  font-size: 13px;
  line-height: normal;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
/* ========================================================================== */
.messagebox_item_status {
  width: 15px;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 6px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.messagebox_item_status.green {
  background-color: #00B215;
}
.messagebox_item_status.red {
  background-color: #FF0000;
}
.messagebox_item_status.green svg {
  width: 9px;
  height: auto;
  stroke: #ffffff;
}
.messagebox_item_status.red svg {
  width: 7px;
  height: auto;
  stroke: #ffffff;
}
.loading {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.loading::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #1B1A20;
  border-radius: 6px;
  z-index: 1001;
}
.loading::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(100deg, #000000 40%, #f6f7f821 50%, #000000 60%);
  z-index: 1002;
  animation: loading 1.5s ease-in-out infinite;
  background-size: 400%;
}
@keyframes loading {
  0% {background-position: 100% 50%;}
  100% {background-position: 0 50%;}
}

/* ========================================================================== */

.pay_choice_window {
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 1000000;
}
.pay_choice_container {
  position: absolute;
  left: 50%;
  width: 100%;
  max-width: calc(394px - 32px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 16px 17px 16px;
  box-sizing: border-box;
  animation: 0.25s pay_choice_window_animate ease-out;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 35px;
}
@keyframes pay_choice_window_animate {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
.pay_choice_buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 12px;
}
.confirm_buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 5px;
  margin-top: 23px;
}
.pay_choice_btn {
  height: 70px;
  border-radius: 10px;
  background-color: #3D7CCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

.pay_choice_btn.stars svg {
  margin-left: 7px;
  width: 20px;
  height: auto;
  fill: #FEA70C;
}

.stars_price_list svg{
margin-left:2px;
fill: #FEA70C;
}

.pay_choice_cancel {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.pay_choice_cancel svg {
  width: 16px;
  height: auto;
  fill: #DE4040;
}


/* ========================================================================== */
canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  transform: translateZ(0);
}
.page_wrapper.user_menu {
  background-color: #050507;
  overflow: hidden;
}
.user_page {
  width: 100vw;
  position: absolute;
  left: 50%;
  top: 0px;
  transform: translate(-50%, 0px);
  padding: 0px 0px 116px 0px;
  box-sizing: border-box;
  max-height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  justify-items: center;
  z-index: 1;
  overflow: auto;
}
body.zoomedLess .user_page {
  width: 100%;
}
.game_content_block.user_page {
  max-width: 100%;
}
.user_page::-webkit-scrollbar {
  display: none;
}
.user_page::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 0px;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, 0px);
  background-image: url(/app/images/background/raiting_fon.png);
  background-position: top 100px center;
  background-repeat: repeat;
  background-size: 200%;
  z-index: -1;
  opacity: 0.10;
}
.user_page_head_wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 16px 0px 16px;
  background-color: #050507;
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 3;
}
body[data-platform="tdesktop"] .user_page_head_wrapper {
  padding: 80px 16px 0px 16px;
}
body[data-platform="android"] .user_page_head_wrapper {
  padding: 80px 16px 0px 16px;
}
body[data-platform="ios"] .user_page_head_wrapper {
  padding: 110px 16px 0px 16px;
}
.user_page_head::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 100%;
  width: 100vw;
  height: 19px;
  transform: translate(-50%, 0px);
  background: linear-gradient(180deg, rgba(5,5,7,1) 0%, rgba(5,5,7,0) 100%);
}
.user_page_head {
  width: 100%;
  max-width: 394px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  grid-column-gap: 10px;
}
.user_page_content_wrapper {
  display: grid;
  grid-template-columns: 100% 100% 100%;
  grid-column-gap: 16px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.user_page_content_block {
  max-height: 100%;
  overflow: auto;
  padding-top: 17px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  transition: 0.5s;
}
.user_page_content_block:nth-child(1) {
  transform: translate(calc(-100% - 16px), 0px);
}
.user_page_content_block:nth-child(1).active {
  transform: translate(0px, 0px);
}
.user_page_content_block:nth-child(2) {
  transform: translate(calc(100% + 16px), 0px);
}
.user_page_content_block:nth-child(2).active {
  transform: translate(calc(-100% - 16px), 0px);
}
.user_page_content_block:nth-child(3) {
  transform: translate(calc(100% + 16px), 0px);
}
.user_page_content_block:nth-child(3).active {
  transform: translate(calc(-200% - 32px), 0px);
}
.user_page_content_block::-webkit-scrollbar {
  display: none;
}
.user_page_avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user_page_player_info {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 9px;
  margin-top: 7px;
}
.uspg_player_level_info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3px;
}
.uspg_player_rank {
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #e3e3e3;
}
.uspg_player_level {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #00CAD1;
}
.uspg_player_level span {
  font-size: 14px;
}
.uspg_player_progress {
  width: 100%;
  height: 2px;
  background-color: #343434;
  border-radius: 2px;
  margin: 1px 0px;
  position: relative;
}
.uspg_player_progress_placeholder {
  position: absolute;
  width: 0px;
  height: 4px;
  left: 0px;
  top: 50%;
  background: linear-gradient(270deg, #00CAD1 0%, #004D50 100%);
  border-radius: 2px;
  transform: translate(0px, -50%);
}
.uspg_player_progress_info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 4px;
}
.uspg_player_progress_label {
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.uspg_player_progress_counter_block {
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 3px;
  align-items: center;
}
.user_page_block {
  width: 100%;
  max-width: 394px;
  padding: 0px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
  z-index: 2;
}
.user_page_menu {
  width: 100%;
  max-width: 394px;
  padding: 0px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
  z-index: 2;
}
.user_page_menu_item {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: 1fr 20px;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  align-items: center;
  cursor: pointer;
}
.uspg_menu_item_icon_wrapper {
  grid-column: 1/2;
  grid-row: 1/3;
  width: 44px;
  height: 44px;
  background: rgb(20 20 20 / 90%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.uspg_menu_item_icon_wrapper svg {
  fill: #e3e3e3;
  stroke: none;
}
.user_page_menu_item.disabled .uspg_menu_item_icon_wrapper svg {
  fill: #353535;
}
.user_page_menu_item.disabled .uspg_menu_item_icon_wrapper svg.lock_icon {
  fill: #ffffff;
  position: absolute;
  left: 4px;
  top: 4px;
  width: 12px;
  height: auto;
}
.user_page_menu_item .disconnect_wallet_btn {
  display: none;
  grid-column: 3/4;
  grid-row: 1/3;
  height: 21px;
  align-items: center;
  justify-content: center;
  background-color: #6E1B1B;
  border-radius: 11px;
  padding: 0px 12px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.user_page_menu_item .disconnect_wallet_btn.show {
  display: flex;
}
.uspg_menu_item_icon_wrapper.promo svg {
  width: 17px;
  height: auto;
}
.uspg_menu_item_icon_wrapper.instruction svg {
  width: 19px;
  height: auto;
}
.uspg_menu_item_icon_wrapper.support svg {
  width: 22px;
  height: auto;
  fill: #e3e3e3;
  stroke: none;
}
.uspg_menu_item_icon_wrapper.email svg {
  width: 22px;
  height: auto;
  fill: #e3e3e3;
  stroke: none;
}
.uspg_menu_item_icon_wrapper.tournaments svg {
  width: 17px;
  height: auto;
}
.uspg_menu_item_icon_wrapper.roadmap svg {
  width: 23px;
  height: auto;
}
.uspg_menu_item_icon_wrapper.nft svg {
  width: 25px;
  height: auto;
}
.uspg_menu_item_icon_wrapper.nft.check svg {
  width: 20px;
  height: auto;
  fill: none;
  stroke: #00CAD1;
}
.uspg_menu_item_icon_wrapper.wallet svg {
  width: 25px;
  height: auto;
}
.uspg_menu_item_icon_wrapper.herosinfo svg {
  width: 19px;
  height: auto;
}
.uspg_menu_item_title {
  align-self: end;
  grid-column: 2/3;
  grid-row: 1/2;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #e3e3e3;
}
.uspg_menu_item_label {
  grid-column: 2/3;
  grid-row: 2/3;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #868686;
}
.user_page_title {
  width: 100%;
  max-width: 394px;
  padding: 17px 26px 8px 26px;
  box-sizing: border-box;
  font-weight: 700;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #e3e3e3;
  position: relative;
  z-index: 2;
}
.uspg_slider_block {
  max-width: 100%;
  margin-bottom: 8px;
}
.uspg_slider_wrapper {
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.uspg_slider_wrapper::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  width: 100%;
  height: calc(100% + 10px);
  transform: translate(0px, -50%);
  background: rgba(0, 202, 209, 0.35);
  filter: blur(20.45px);
  z-index: -1;
}
/* .uspg_slider_container {
  min-width: 0;
  max-width: 100vw;
  overflow: hidden;
}
.uspg_slider_container .owl-stage {
  display: flex;
} */

.uspg_slider_container {
  --container-padding-left: 16px;
  --card-gap: 10px;
  --visible-cards: 2.5;
  --card-width: calc(
    (100vw - var(--container-padding-left) - (var(--visible-cards) - 1) * var(--card-gap)) / var(--visible-cards)
  );
  display: grid;
  grid-column-gap: var(--card-gap);
  grid-auto-flow: column;
  grid-auto-columns: var(--card-width);
  padding-left: var(--container-padding-left);
  padding-right: 16px;
  box-sizing: border-box;
  max-width: 100vw;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-padding-left: 16px;
}
.uspg_slider_container::-webkit-scrollbar {
  display: none;
}
.uspg_hint_item {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-row-gap: 6px;
  background: #0A0A0A;
  border-radius: 10px;
  padding: 14px 9px;
  box-sizing: border-box;
  position: relative;

  scroll-snap-align: start;
}
.uspg_hint_item::after {
  position: absolute;
  content: '';
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.457907) 21.69%, rgba(10, 10, 10, 0.781644) 41.2%, rgba(10, 10, 10, 0.89807) 56.69%, rgba(10, 10, 10, 0.960883) 66.45%, #0A0A0A 100%);
  border-radius: 0px 0px 10px 10px;
}
.uspg_hint_title {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #e3e3e3;
}
.uspg_hint_text {
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  max-height: 120px;
  overflow: hidden;
}

/* ========================================================================== */

.modal_window.hint_slider {
  background: #000000;
  background-image: url(/app/images/background/fon_load.jpg);
  background-size: cover;
  background-position: center;
  align-items: flex-start;
}
.modal_window.hint_slider .modal_window_content {
  max-width: 100%;
  height: auto;
  padding: 0px;
  overflow: hidden;
}
.hint_slider_logo {
  width: 100%;
  display: flex;
  justify-content: center;
}
.hint_slider_logo img {
  width: 279px;
  height: auto;
  transition: 0.25s;
}
.modal_window_hint_slider_wrapper {
  max-width: 100%;
  overflow: hidden;
  margin-top: 100px;
  box-sizing: border-box;
  position: relative;
}
.mw_hint_slider_arrow {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 40px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 10px;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 10;
}
.mw_hint_slider_arrow svg {
  width: 5px;
  height: auto;
  stroke: #ffffff;
  fill: none;
  stroke-width: 4px;
}
.mw_hint_slider_arrow.next {
  left: auto;
  right: 0px;
}
.mw_hint_slider_arrow.prev svg {
  transform: scale(-1, 1);
}
.uspmw_hint_slider {

}


.spmw_hint_item {
  max-width: calc(100vw - 80px);
  display: grid;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 35px;
  grid-template-columns: 1fr;
  justify-items: center;
  grid-row-gap: 23px;
  padding: 32px 38px 48px 36px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.spmw_hint_item_title {
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.spmw_hint_item_text {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

/* ========================================================================== */

.user_page_instruction_page {
  width: 100%;
  max-width: 394px;
  padding: 0px 16px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.user_page_instruction_page::-webkit-scrollbar {
  display: none;
}
.user_page_instruction_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0px 0px 16px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.user_page_instruction_title {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.user_page_instruction_head_btn {
  height: 31px;
  display: flex;
  align-items: center;
  background: rgba(13, 13, 13, 0.9);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #059297;
  padding: 0px 10px 0px 8px;
  box-sizing: border-box;
}
.user_page_instruction_head_btn svg {
  width: 14px;
  fill: none;
  stroke: #059297;
  transform: rotate(90deg) translate(-2px, 0px);
}
.user_page_instruction_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 2px;
}

.instruction_chapter_block {
  position: relative;
}
.instruction_chapter_head {
  height: 50px;
  background: rgb(20 20 20 / 90%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding: 16px;
  box-sizing: border-box;
}
.instruction_chapter_head svg {
  width: 13px;
  height: auto;
  stroke: #ffffff;
  fill: none;
  transition: 0.25s;
}
.instruction_chapter_head.subchapter svg {
  width: 9px;
}
.instruction_chapter_block.active > .instruction_chapter_head svg,
.instruction_subchapter_block.active > .instruction_chapter_head svg {
  transform: rotate(180deg);
  stroke: #009195;
}
.instruction_chapter_block>.instruction_chapter_backlight {
  position: absolute;
  left: 50%;
  top: 0px;
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, 0px);
  opacity: 0;
  transition: 0.5s;
}
.instruction_chapter_block>.instruction_chapter_backlight::before,
.instruction_chapter_block>.instruction_chapter_backlight::after {
  position: absolute;
  content: '';
  left: -120px;
  top: 0px;
  width: 50px;
  height: 100%;
  background: rgba(0, 202, 209, 0.3);
  filter: blur(8px);
  transition: 0.5s;
}
.instruction_chapter_block>.instruction_chapter_backlight::after {
  left: auto;
  right: -120px;
}
.instruction_chapter_block.active:not(.subchapter_active)>.instruction_chapter_backlight {
  opacity: 1;
}
.instruction_chapter_block.active:not(.subchapter_active)>.instruction_chapter_backlight::before {
  left: -45px;
}
.instruction_chapter_block.active:not(.subchapter_active)>.instruction_chapter_backlight::after {
  right: -45px;
}
.instruction_chapter_head.subchapter {
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
}
.instruction_chapter_body_wrapper {
  width: 100%;
  padding-left: 16px;
  box-sizing: border-box;
  height: 0px;
  overflow: hidden;
}
.instruction_chapter_body {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 2px;
  padding: 2px 0px;
}
.instruction_subchapter_block {
  background-color: #000000;
  border-radius: 8px;
  position: relative;
}
.instruction_subchapter_block .instruction_chapter_backlight {
  position: absolute;
  left: calc(50% - 8px);
  top: 0px;
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, 0px);
  opacity: 0;
  transition: 0.5s;
}
.instruction_subchapter_block.active .instruction_chapter_backlight {
  opacity: 1;
}
.instruction_subchapter_block .instruction_chapter_backlight::before,
.instruction_subchapter_block .instruction_chapter_backlight::after {
  position: absolute;
  content: '';
  left: -45px;
  top: 0px;
  width: 50px;
  height: 100%;
  background: rgba(0, 202, 209, 0.3);
  filter: blur(8px);
}
.instruction_subchapter_block .instruction_chapter_backlight::after {
  left: auto;
  right: -45px;
}
.instruction_subchapter_body_wrapper {
  height: 0px;
  overflow: hidden;
}
.instruction_subchapter_body {
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.32px;
  color: #DADADA;
  padding: 13px 10px 11px 11px;
  box-sizing: border-box;
}
.instruction_subchapter_body strong {
  font-weight: 600;
  color: #ffffff;
}
.instruction_subchapter_body p {
  margin: 0px;
  margin-bottom: 12px;
}
.instruction_subchapter_body ul {
  margin: 0px;
  margin-bottom: 12px;
  padding-left: 20px;
}

/* ========================================================================== */

.tutorial_container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 20;
  pointer-events: auto;
}
.tutorial_container.confirm {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
}
.tutorial_container.confirm .tutorial_next_btn {
  pointer-events: auto;
}
.tutorial_container.confirm .tutorial_postpone_btn {
  pointer-events: auto;
}
.tutorial_mark {
  --ttl-mark-h: 0px;
  --ttl-mark-v: 0px;
  --ttl-mark-padding: 16px;
  --ttl-mark-width: 100%;
  --ttl-mark-row-gap: 12px;
  --ttl-grid-column-gap: 12px;
  --ttl-swipe-padding: 32px;
  --ttl-text-minheight: auto;
  --ttl-template-columns: 1fr;
  --ttl-template-areas: 'text';
  position: absolute;
  left: 0px;
  top: 0px;
  display: grid;
  grid-row-gap: var(--ttl-mark-row-gap);
  grid-column-gap: var(--ttl-grid-column-gap);
  box-sizing: border-box;
  width: var(--ttl-mark-width);
  max-width: 100%;
  padding: var(--ttl-mark-padding);
  transform: translate(var(--ttl-mark-h), var(--ttl-mark-v));
  grid-template-columns: var(--ttl-template-columns);
  grid-template-areas: var(--ttl-template-areas);
  --ttl-cont-padding: 10px 5px;
}
.ttl_content_arrow {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 32px;
  height: 32px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(var(--translate-h), var(--translate-v));
}
.ttl_content_arrow svg.long_arrow {
  width: 12px;
  height: auto;
  fill: none;
  stroke: #ffd700;
  stroke-width: 3;
  animation: 1s ttl_arrow_bounce ease-in-out infinite;
}
.ttl_content_arrow.top svg.long_arrow {
  --anim-translate-s: translate(0px, 8px);
  --anim-translate-c: translate(0px, -8px);
  --arrow-rotate: rotate(0deg);
}
.ttl_content_arrow.bottom svg.long_arrow {
  --anim-translate-s: translate(0px, -8px);
  --anim-translate-c: translate(0px, 8px);
  --arrow-rotate: rotate(180deg);
}
.ttl_content_arrow.left svg.long_arrow {
  --anim-translate-s: translate(-8px, 0px);
  --anim-translate-c: translate(8px, 0px);
  --arrow-rotate: rotate(-90deg);
}
.ttl_content_arrow.right svg.long_arrow {
  --anim-translate-s: translate(-8px, 0px);
  --anim-translate-c: translate(8px, 0px);
  --arrow-rotate: rotate(90deg);
}
@keyframes ttl_arrow_bounce {
  0% {
    transform: var(--anim-translate-s) var(--arrow-rotate);
  }
  50% {
    transform: var(--anim-translate-c) var(--arrow-rotate);
  }
  100% {
    transform: var(--anim-translate-s) var(--arrow-rotate);
  }
}
.ttlc_swipe {
  grid-area: swipe;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-columns: 30px;
  grid-column-gap: 5px;
  align-items: center;
  padding: var(--ttl-swipe-padding);
}
.ttlc_swipe svg.hand_icon {
  width: 100%;
  height: auto;
  fill: #ffffff;
  stroke: none;
}
.ttlc_swipe.top svg.hand_icon {
  --anim-translate-s: translate(0px, -32px);
  --anim-translate-c: translate(0px, 32px);
  animation: 1.5s ttl_swipe_bounce_top ease-in infinite;
}
@keyframes ttl_swipe_bounce_top {
  0% { opacity: 1; transform: var(--anim-translate-c); }
  10% { opacity: 1; }
  60% { opacity: 1; transform: var(--anim-translate-s); }
  70% { opacity: 0; }
  100% { opacity: 0; }
}
.ttlc_swipe.bottom svg.hand_icon {
  --anim-translate-s: translate(0px, -32px);
  --anim-translate-c: translate(0px, 32px);
  animation: 1.5s ttl_swipe_bounce_bottom ease-in infinite;
}
@keyframes ttl_swipe_bounce_bottom {
  0% { opacity: 0; transform: var(--anim-translate-s); }
  10% { opacity: 1; }
  60% { opacity: 1; transform: var(--anim-translate-c); }
  70% { opacity: 0; }
  100% { opacity: 0; }
}
.tutorial_mark .ttlc_text {
  width: 100%;
  grid-area: text;
  min-height: var(--ttl-text-minheight);
  justify-self: center;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #bbbbbb;
  text-align: center;
  position: relative;
  background-color: #000000;
  padding: var(--ttl-cont-padding);
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid #444548;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
  justify-items: center;
  animation: 0.5s ttlc_show_anim ease-in-out forwards;
}
@keyframes ttlc_show_anim {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.tutorial_mark .ttlc_text .title {
  color: #e3e3e3;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
}
.tutorial_mark .ttlc_text .attention {
  display: inline-grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  align-items: flex-end;
}
.tutorial_mark .ttlc_text .attention svg {
  width: auto;
  height: 31px;
  margin-bottom: 1px;
}

.tutorial_mark .list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
  justify-items: start;
}
.tutorial_mark .icon_row {
  display: grid;
  grid-auto-flow: column;
}
.tutorial_mark .icon_row.raiting {
  grid-template-columns: 20px 1fr;
  grid-column-gap: 6px;
}
.tutorial_mark .icon_row.raiting svg {
  justify-self: start;
  align-self: center;
}
.tutorial_mark .icon_row.raitingCollection svg {
  width: 15px;
  height: auto;
  fill: #FFCC00;
}
.tutorial_mark .icon_row.raitingVirtual svg {
  width: 15px;
  height: auto;
  fill: #B9B9B9;
}
.tutorial_mark .icon_row.raitingPower svg {
  width: 15px;
  height: auto;
  fill: #B9B9B9;
}
.tutorial_mark .icon_row.raitingArmy svg {
  width: 12px;
  height: auto;
  fill: #B9B9B9;
}
.tutorial_mark .icon_row.raitingGamepad svg {
  width: 20px;
  height: auto;
  fill: #B9B9B9;
}

.tutorial_mark .tAlignLeft {
  text-align: left;
}
.tutorial_mark .justifyLeft {
  justify-self: start;
}
.tutorial_mark .ttlc_text .bigFont {
  font-size: 16px;
  font-weight: 600;
}
.tutorial_mark .ttlc_text .blue {
  color: #407dcc;
}
.tutorial_mark .ttlc_text .title.blue {
  color: #407dcc;
}
.tutorial_mark .ttlc_text .red {
  color: #E83E3E;
}

.page_wrapper.tutorial {
  overflow: hidden;
}
.page_wrapper.tutorial .game_content_block {
  pointer-events: none;
}
.page_wrapper.tutorial .tutorial_focus {
  z-index: 21;
  pointer-events: auto;
  position: relative;
}
.game_superstrike_menu_wrapper.tutorial {
  pointer-events: none;
}
.game_superstrike_menu_wrapper.tutorialAction {
  z-index: 21;
}
.game_superstrike_menu_wrapper.tutorialAction::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.bottom_menu.tutorial {
  pointer-events: none;
}
.bottom_menu.tutorialAction {
  z-index: 21;
}
.bottom_menu.tutorialAction::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 20;
}
.tutorial_next_btn {
  grid-area: nextBtn;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background-color: #3D7CCF;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  animation: 0.5s ttlc_show_anim ease-in-out forwards;
}
.tutorial_next_btn svg.long_arrow {
  width: 14px;
  height: auto;
  fill: none;
  stroke: #ffffff;
  animation: none;
  transform: rotate(90deg);
  margin-left: 10px;
}
.bottom_menu.tutorialAction .bottom_menu_play_wrapper.tutorial_focus .bm_play_btn {
  visibility: hidden;
}
.tutorial_postpone_btn {
  grid-area: postponeBtn;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #444548;
  padding: 0px 4px 0px 7px;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  animation: 0.5s ttlc_show_anim ease-in-out forwards;
}
.tutorial_postpone_btn img {
  width: 23px;
  height: auto;
  margin-left: 6px;
}

/* ========================================================================== */

.tutorial_resume_wrapper {
  justify-self: start;
  width: 53px;
  height: 0px;
  position: relative;
  display: none;
}
.tutorial_resume_wrapper.visible {
  display: block;
}
.tutorial_resume_container {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: auto;
  z-index: 1;
}
.tutorial_resume_img {
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 1;
  --animate-transform: translate(0px, -10px);
  animation: 1.5s book_animate ease-in-out infinite;
}
.tutorial_resume_container::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: #01FFD5;
  filter: blur(10px);
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: 1.5s book_light_animate ease-in-out infinite;
}

/* ========================================================================== */

.tutorial_confirm_window {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1000000;
}
.ttl_confirm_container {
  padding: 0px 18px 24px 18px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #353535;
  backdrop-filter: blur(5px);
  border-radius: 35px;
  display: grid;
  grid-template-columns: 1fr;
}
.ttl_confirm_img_wrapper {
  justify-self: center;
  width: auto;
  height: 75px;
  position: relative;
  margin-bottom: 34px;
}
.ttl_confirm_img_box {
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: auto;
  height: 150px;
  transform: translate(-50%, 0px);
}
.ttl_confirm_img {
  --animate-transform: translate(0px, -20px);
  width: auto;
  height: 100%;
  object-fit: contain;
  animation: 3s book_animate ease-in-out infinite;
}
@keyframes book_animate {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  50% {
    transform: var(--animate-transform) rotate(0deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
.ttl_confirm_img_box::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  width: 70%;
  height: 70%;
  background: #01FFD5;
  border-radius: 70px;
  filter: blur(25px);
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: 3s book_light_animate ease-in-out infinite;
}
@keyframes book_light_animate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.ttl_confirm_text_block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ttl_confirm_text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #D7C7AC;
}
.ttl_confirm_subtext {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  margin-top: 14px;
}
.ttl_confirm_subtext .green {
  font-weight: 600;
  color: #57FFE3;
}



.modal_window.tutorial_get {
  background-color: #000000;
  background-image: url(/app/images/lootboxfon.png);
  background-size: auto 100%;
}
.modal_window.tutorial_get .modal_window_content {
  grid-template-rows: auto 1fr repeat(3, auto auto);
  align-items: center;
  overflow: hidden;
}
.tutorial_get_asset_img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  opacity: 0;
  animation: 0.5s tutorial_get_asset_img_anim forwards;
}
@keyframes tutorial_get_asset_img_anim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ========================================================================== */

.double_reward_window {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1000000;
}
.double_reward_container {
  padding: 36px 14px 50px 14px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #353535;
  backdrop-filter: blur(5px);
  border-radius: 35px;
  display: grid;
  grid-template-columns: 1fr;
}
.drw_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 32px;
}
.drw_reward_block {
  position: relative;
  z-index: 1;
}
.drw_reward_block::after {
  position: absolute;
  content: '';
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: calc(100% - 20px);
  background: #1C1E23;
  box-shadow: 0px 0px 20.2px rgba(255, 208, 18, 0.47);
  border-radius: 10px 10px 20px 20px;
  z-index: -1;
}
.drw_reward_head_block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.drw_reward_head_text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-shadow: 0px 0px 2px #3C0000;
  animation: 1.5s doubleRewardShake ease-in-out infinite;
}
@keyframes doubleRewardShake {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.4) rotate(-15deg) translate(0px, -2px); }
  70% { transform: scale(1.4) rotate(15deg) translate(0px, -2px); }
  100% { transform: scale(1) rotate(0deg); }
}
.drw_reward_head_img {
  width: 38px;
  height: auto;
  margin-right: 7px;
}
.drw_reward_block_text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding: 12px 16px 16px 16px;
  box-sizing: border-box;
}
.drw_reward_block_text svg.add_icon {
  width: 14px;
  height: auto;
  stroke: none;
  fill: #ffffff;
  margin-bottom: -1px;
  margin-left: 2px;
}
.drw_reward_block_text span {
  padding-left: 8px;
  box-sizing: border-box;
}
.double_reward_btn {
  font-family: 'Arial';
  width: 100%;
  height: 37px;
  background-color: #3D7CCF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.reward_btn_img {
  width: 16px;
  height: auto;
  margin-left: 5px;
}

/* ========================================================================== */

.modal_window.multiple_assets_get {
  background-color: #000000;
  background-image: url(/app/images/lootboxfon.png);
  background-size: auto 100%;
}
.modal_window.multiple_assets_get .modal_window_content {
  grid-template-rows: auto auto 1fr auto;
  align-items: center;
  overflow: hidden;
  padding: 16px 0px 40px 0px;
}
.promocode_get_head {
  justify-self: center;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 16px;
  padding: 0px 16px 0px 16px;
  box-sizing: border-box;
  align-items: center;
  grid-template-areas: 'toggle_btn_prew title toggle_btn_next';
}
.promocode_head_text {
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.32px;
  color: #9b9b9b;
  text-align: center;
  padding: 16px 16px 0px 16px;
  box-sizing: border-box;
}
.promocode_get_toggle_btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.promocode_get_toggle_btn.prew {
  grid-area: toggle_btn_prew;
}
.promocode_get_toggle_btn.next {
  grid-area: toggle_btn_next;
}
.promocode_get_toggle_btn svg {
  width: 24px;
  height: auto;
  stroke: #3D7CCF;
  fill: none;
}
.promocode_get_toggle_btn.prew svg {
  transform: rotate(90deg);
}
.promocode_get_toggle_btn.next svg {
  transform: rotate(-90deg);
}
.multiple_assets_get_title {
  grid-area: title;
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.multiple_assets_get_action_btn {
  width: calc(100% - 32px);
  height: 60px;
  align-self: center;
  justify-self: center;
  border-radius: 10px;
  background-color: #3D7CCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-left: 16px;
  margin-right: 16px;
}

.multiple_assets_get_wrapper {
  height: 100%;
}
.multiple_get_asset_item {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-row-gap: 16px;
  padding: 16px;
  box-sizing: border-box;
}
.multiple_get_asset_item.hero {
  grid-template-rows: auto 1fr auto;
}
.multiple_get_asset_item.artifact {
  grid-template-rows: auto 1fr auto;
}
.mg_ai_img {
  position: absolute;
  left: 50%;
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mg_ai_title {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.mg_ai_title .slides_counter {
  margin-left: 10px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  color: #9b9b9b;
}
.mg_ai_img_wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 250px;
  max-height: 500px;
  -webkit-mask-image: none;
}
.mg_ai_img_wrapper.rare_light {
  transform-style: preserve-3d;
}
.mg_ai_img_wrapper.rare_light::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30%;
  border: 21px solid #1EF7FF;
  filter: blur(38px);
  border-radius: 50%;
  z-index: -1;
  transition: 0.5s;
  will-change: transform, filter;
}
._multiple_slide.active .mg_ai_img_wrapper.rare_light::after {
  height: 60%;
}
.mg_ai_img_wrapper.rare_light.hero::after {
  aspect-ratio: 1 / 4;
}
.mg_ai_img_wrapper.rare_light.lootbox::after {
  aspect-ratio: 1 / 1;
}
.mg_ai_img_wrapper.rare_light.lootbox::after {
  aspect-ratio: 1 / 1;
}
.mg_ai_img_wrapper.rare_light.rune::after {
  aspect-ratio: 1 / 4;
}
.mg_ai_img_wrapper.rare_light.artifact::after {
  aspect-ratio: 1 / 1;
}
.mg_ai_img_wrapper.rare_light.tickets::after {
  aspect-ratio: 1 / 1;
}
.mg_ai_img_wrapper.rare_light.coins::after {
  aspect-ratio: 1 / 1;
}
.mg_ai_img_wrapper.rare_light.collectible::after  {
  border: 26px solid #FFCC00;
}
.mg_ai_img_wrapper.rare_light.epic::after  {
  border: 26px solid #9d1cb0;
}
.mg_ai_img_wrapper.rare_light.rare::after {
  border: 26px solid #368ee2;
}
.mg_ai_img_wrapper.rare_light.unusual::after {
  border: 26px solid #73e33b;
}
.mg_ai_img_wrapper.rare_light.ordinary::after {
  border: 26px solid #a0a6ab;
}
.mg_ai_img_wrapper.rare_light.limited::after {
  border: 26px solid #00D6DD;
}
.mg_ai_img_wrapper.rare_light.legend::after {
  border: 26px solid #FF8801;
}
.mg_ai_img_wrapper.coins .mg_ai_img {
  max-width: 250px;
  position: static;
  transform: none;
}
._multiple_slide.active .mg_ai_img_wrapper.coins.rare_light::after {
  height: 40%;
}
.mg_ai_img_wrapper.tickets .mg_ai_ticket_img svg {
  width: 200px;
  height: auto;
  fill: #57FFE3;
}
._multiple_slide.active .mg_ai_img_wrapper.tickets.rare_light::after {
  height: 40%;
}
.mg_ai_img_wrapper.lootbox .mg_ai_img {
  max-width: 280px;
}
._multiple_slide.active .mg_ai_img_wrapper.lootbox.rare_light::after {
  height: 50%;
}
.mg_ai_ticket_label {
  font-size: 42px;
  font-weight: 700;
  color: #52ffe3;
  margin-top: 16px;
}
.mg_ai_coins_label {
  font-size: 42px;
  font-weight: 700;
  color: #ffc100;
  margin-top: 16px;
}

/* ========================================================================= */

.game_content_block.nft_page {
  grid-template-rows: auto 1fr;
  padding-bottom: 120px;
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
}
.game_content_block.nft_page.show {
  display: grid;
}
.nft_page_menu {
  align-self: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 12px;
  box-sizing: border-box;
}
.nft_airdrop_btn {
  position: relative;
  height: 60px;
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  padding: 0px 15px;
  box-sizing: border-box;
  z-index: 2;
  text-decoration: none;
  cursor: pointer;
  font-family: '1797';
  font-style: normal;
}
.nft_airdrop_btn_сompl {
  padding: 1px 5px 0px 5px;
  border-radius: 12px;
  box-sizing: border-box;
  background-color: #ED4D4D;
  font-family: '1797';
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 14px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 1px solid #ffffff;
}
.nft_airdrop_btn_text_left {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0px;
  justify-items: center;
}
.nft_pmbtn_date {
  display: flex;
  align-self: center;
}
.nft_pmbtn_date .day {
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  letter-spacing: 1px;
  color: #FFFFFF;
}
.nft_pmbtn_date .month {
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  color: #FFFFFF;
  margin-left: 2px;
}
.nft_pmbtn_year {
  font-weight: 400;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.nft_airdrop_btn_text_center {
  justify-self: center;
  font-weight: 400;
  font-size: 42px;
  line-height: 42px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  padding-top: 2px;
}
.nft_airdrop_btn_text_right {
  font-weight: 400;
  font-size: 18px;
  line-height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: right;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding-top: 1px;
}
.nft_airdrop_btn::before {
  position: absolute;
  content: '';
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-image: url(/app/images/fon/airdrop_btn2.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  z-index: -2;
}
.nft_airdrop_btn::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 20px;
  z-index: -3;
}
.nft_page_menu_btn {
  position: relative;
  height: 40px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 16px;
  padding: 0px 8px 0px 8px;
  box-sizing: border-box;
  z-index: 2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nft_airdrop_btn:nth-child(1){
  grid-column: 1/3;
}
.nft_page_menu_btn:nth-child(2){
  grid-column: 1/3;
}
.nft_page_menu_btn:nth-child(3){
  grid-column: 1/3;
}
.nft_page_menu_btn:nth-child(4){
  grid-column: 1/3;
}
.nft_page_menu_btn.lock {
  cursor: default;
}
.nft_page_menu_btn_lock {
  position: absolute;
  left: 1px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.nft_page_menu_btn_lock svg {
  fill: #ffffff;
  width: 12px;
  height: auto;
}
.nft_page_menu_btn_text {
  justify-self: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}
.nft_page_menu_btn.lock .nft_page_menu_btn_text {
  color: #868686;
}
.nft_page_menu_btn_text .getgems_logo {
  width: 83px;
  height: auto;
  margin-left: 5px;
}
.nft_page_menu_btn::before {
  position: absolute;
  content: '';
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #060C15;
  border-radius: 20px;
  z-index: -2;
}
.nft_page_menu_btn::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 20px;
  z-index: -3;
}
.nft_page_menu_btn.lock::after {
  opacity: 0.5;
}
.nft_page_menu_btn_arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nft_page_menu_btn_arrow svg {
  width: 12px;
  height: auto;
  stroke: #57FFE3;
  stroke-width: 1.5;
  fill: none;
  transform: rotate(-90deg);
}
.nft_page_menu_btn.go_rant_page {
  grid-template-columns: 1fr 1fr 1fr;
}
.nft_page_menu_btn.go_rant_page .nft_page_menu_btn_arrow {
  justify-self: end;
}
.rent_page_tonbalance {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  box-sizing: border-box;
  margin-left: 8px;
}
.rent_page_tonbalance img {
  width: 16px;
  height: auto;
  margin-right: 4px;
}
.nft_page_head {
  width: 100%;
  height: 250px;
  background-image: url(/app/images/fon/nft_page_head_fon.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.nft_page_logo_block {
  position: absolute;
  left: 50%;
  top: 36px;
  transform: translate(-50%, 0px);
  display: flex;
}
body[data-platform="android"] .nft_page_logo_block {
  top: 36px;
}
body[data-platform="ios"] .nft_page_logo_block {
  top: 52px;
}
.nft_page_logo_block img.logo_img {
  width: 121px;
  height: auto;
}
.nft_page_logo_block img.nft_img {
  position: absolute;
  bottom: 8px;
  right: 9px;
  width: 42px;
  height: auto;
}
.nft_page_content {

}
.nft_page_title {
  font-weight: 800;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.nft_page_text {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 24px;
}
.nft_page_text .bold {
  font-weight: 600;
  color: #57FFE3;
}
.nft_page_img {
  width: 100%;
  margin-bottom: 24px;
}
.nft_page_list {
  padding-left: 18px;
  margin-top: 0px;
  margin-bottom: 24px;
}
.nft_page_list li {
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.nft_page_list li::marker {
   color: #57FFE3;
}
.nft_page_text .link {
  height: 19px;
  text-decoration: none;
  display: inline-block;
}
.nft_page_text .getgems_logo {
  height: 20px;
  margin-bottom: -5px;
}
.nft_page_content_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  grid-column-gap: 16px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  min-height: 100px;
  transition: height 0.3s ease-in-out;
}
.nft_page_content_wrapper::-webkit-scrollbar {
  display: none;
}
.nft_page_container {
  width: 100%;
  display: none;
  box-sizing: border-box;
  will-change: transform;
}
.nft_page_container.active {
  display: grid;
}
.nft_page_container.main {
  grid-template-columns: 1fr;
  grid-row-gap: 25px;
  padding: 12px 16px 16px 16px;
}
.nft_page_container.nft_heros {

}
.nft_page_heros_head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  grid-gap: 10px;
  background-color: #15171A;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 10px 16px 12px 16px;
  margin-top: 10px;
}
.nft_page_heros_head .NFTheros_rare_fltrs_block {
  grid-row: 2/3;
  grid-column: 1/3;
}
.NFT_heros_filter_btn {
  justify-self: end;
  display: grid;
  align-items: center;
  grid-template-columns: auto auto;
  grid-column-gap: 4px;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
.NFT_heros_filter_btn .label {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.NFT_heros_filter_btn svg {
  width: 9px;
  height: auto;
  fill: none;
  stroke: #FFFFFF;
  transition: 0.25s;
}
.NFT_heros_filter_btn.active .label {
  color: #ffffff;
}
.NFT_heros_filter_btn.active svg {
  transform: rotate(-180deg);
}
.NFT_heros_filter_btn_list {
  position: absolute;
  left: 0px;
  top: calc(100% + 9px);
  padding: 16px 8px;
  background: #1A1A1A;
  border: 1px solid #333333;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
  box-sizing: border-box;
  max-height: 250px;
  overflow: auto;
}
.NFT_heros_filter_btn_list.width_btn {
  width: 100%;
}
.NFT_heros_filter_btn.active .NFT_heros_filter_btn_list {
  opacity: 1;
  visibility: visible;
}
.NFT_heros_filter_btn_list.display {
  left: auto;
  right: 0px;
}
.NFT_heros_fltr_radio_label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
  color: #ffffff;
}
.NFT_heros_fltr_radio_label input {
  display: none;
}
.NFT_heros_fltr_radio {
  width: 16px;
  min-width: 16px;
  height: 16px;
  border: 1px solid #4998FF;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
  box-sizing: border-box;
}
.NFT_heros_fltr_radio::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background-color: #4998FF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s;
}
.NFT_heros_fltr_radio_label input:checked + .NFT_heros_fltr_radio::after {
  opacity: 1;
}
.NFTheros_rare_fltrs_block {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 4px;
}
.NFTheros_rare_fltrs_block.hide {
  display: none;
}
.NFTheros_rare_fltrs_block_scroll {
  display: grid;
  grid-template-columns: repeat(8, auto);
  grid-column-gap: 4px;
  max-width: 100%;
  overflow: auto;
}
.NFTheros_rare_fltrs_block_scroll::-webkit-scrollbar {
  display: none;
}
.NFTheros_rare_fltrs_btn {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #4747474D;
  padding: 0px 10px;
  box-sizing: border-box;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  white-space: nowrap;
}
.NFTheros_rare_fltrs_btn.all {
  color: #ffffff;
}
.NFTheros_rare_fltrs_btn.active {
	background-color: #373739;
}
.NFTheros_rare_fltrs_btn.collectible {
  color: #FFCC00;
}
.NFTheros_rare_fltrs_btn.epic {
  color: #9d1cb0;
}
.NFTheros_rare_fltrs_btn.rare {
  color: #368ee2;
}
.NFTheros_rare_fltrs_btn.unusual {
  color: #73e33b;
}
.NFTheros_rare_fltrs_btn.ordinary {
  color: #a0a6ab;
}
.NFTheros_rare_fltrs_btn.limited {
  color: #00D6DD;
}
.NFTheros_rare_fltrs_btn.legend {
  color: #FF8801;
}
.nft_page_heros_search {
  position: relative;
}
.nft_page_heros_search input {
  background-color: #0D0D0D;
  border-radius: 15px;
  border: 1px solid #333333;
  height: 29px;
  padding: 0px 24px 0px 14px;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #ffffff;
  box-sizing: border-box;
}
.nft_page_heros_search input:focus {
  outline: none;
  border: 1px solid #78797D;
}
.nft_page_heros_search input::placeholder {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #78797D;
}
.nft_page_heros_search input:not(:placeholder-shown):not(:focus) {
  border: 1px solid #3D7CCF;
}
.nft_page_heros_search svg {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 13px;
  height: auto;
  transform: translate(0px, -50%);
  pointer-events: none;
}
.nft_page_heros_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px 16px 16px 16px;
  box-sizing: border-box;
}
.nfr_hero_item {
  background-color: #121417;
  border-radius: 10px;
}
.nfr_hero_item_img {
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.nfr_hero_item_img .sale_mark {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 91px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  -o-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  border-radius: 0px 0px 0px 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.nfr_hero_item_img .sale_mark.sale {
  background: linear-gradient(89.63deg, #3D7CCF 3.71%, #57FFE3 45.3%);
}
.nfr_hero_item_img .sale_mark.at_user {
  background: #1A1C20;
  font-size: 9px;
}
.nfr_hero_item_img .sale_mark span {
  transform: translate(-20px, 5px) rotate(25deg)
}
.nfr_hero_item_img .itlt_gr_item_level_label {
  top: auto;
  right: 2px;
  bottom: 25px;
  font-size: 9px;
  line-height: 9px;
}
.nfr_hero_item_img .segyn_icon {
  position: absolute;
  right: 8px;
  bottom: 41px;
  width: 18px;
  height: auto;
  z-index: 4;
}
.nfr_hero_item_price {
  padding: 4px 8px 4px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #c9c9c9;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.nfr_hero_item_price span.price {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 600;
}
.nfr_hero_item_price .ton_icon {
  width: 14px;
  height: auto;
  margin: -2px 4px 0px 4px;
}

/* ========================================================================== */

.modal_window.nft_hero_view {
  background-color: #000000;
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
}
.modal_window.nft_hero_view .modal_window_content {
  grid-template-rows: unset;
  padding: 0px;
}
.nft_hero_view_logo_block {
  position: absolute;
  left: 50%;
  top: 36px;
  transform: translate(-50%, 0px);
  display: flex;
  z-index: 2;
}
body[data-platform="android"] .nft_hero_view_logo_block {
  top: 36px;
}
body[data-platform="ios"] .nft_hero_view_logo_block {
  top: 52px;
}
.nft_hero_view_logo_block img.logo_img {
  width: 121px;
  height: auto;
}
.nft_hero_view_logo_block img.nft_img {
  position: absolute;
  bottom: 8px;
  right: 9px;
  width: 42px;
  height: auto;
}
.nft_hero_view_name {
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 14px;
  text-align: center;
}
.nft_hero_view_card {
  width: 100%;
  max-width: 289px;
  justify-self: center;
  background-color: #121417;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 22px;
}
.nft_hero_view_card_img {
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.nft_hero_view_card_img .segyn_icon {
  position: absolute;
  left: 15px;
  bottom: 35px;
  width: 30px;
  height: auto;
  z-index: 4;
}
.nft_hero_view_card_img .segun_icon_wrapper {
  position: absolute;
  right: 15px;
  bottom: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.nft_hero_view_card_img .segun_icon_wrapper .segyn_icon {
  position: static;
  width: 30px;
  height: auto;
  z-index: auto;
}
.nft_hero_view_card_img .winm_hero_level
{
  width: 60px;
  height: auto;
  right: 2px;
  bottom: 36px;
  left: unset;
}
.nft_hero_view_card_img .sale_mark {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 91px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  -o-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  border-radius: 0px 0px 0px 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.nft_hero_view_card_img .sale_mark.sale {
  background: linear-gradient(89.63deg, #3D7CCF 3.71%, #57FFE3 45.3%);
}
.nft_hero_view_card_img .sale_mark.at_user {
  background: #1A1C20;
  font-size: 9px;
}
.nft_hero_view_card_img .sale_mark span {
  transform: translate(-20px, 5px) rotate(25deg)
}
.nft_hero_view_card_price {
  padding: 4px 8px 4px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  color: #c9c9c9;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.nft_hero_view_card_price span.price {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #FFFFFF;
  font-weight: 600;
}
.nft_hero_view_card_price .ton_icon {
  width: 14px;
  height: auto;
  margin: -2px 4px 0px 4px;
}
.nft_hero_view_link_wrapper {
  width: 100%;
  padding: 12px 16px 40px 12px;
  box-sizing: border-box;
  background-color: #060C15;
  border-radius: 12px 12px 0px 0px;
  position: relative;
}
.nft_hero_view_link_wrapper::before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #15171A;
  z-index: -1;
}
.nft_hero_view_btn {
  position: relative;
  width: 100%;
  height: 40px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 16px;
  padding: 0px 8px 0px 8px;
  box-sizing: border-box;
  z-index: 2;
  text-decoration: none;
  cursor: pointer;
}
.nft_hero_view_btn_text {
  justify-self: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}
.nft_hero_view_btn_text .getgems_logo {
  width: 83px;
  height: auto;
  margin-left: 5px;
}
.nft_hero_view_btn_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nft_hero_view_btn_icon svg {
  width: auto;
  max-width: 34px;
  height: auto;
  max-height: 26px;
  fill: #ffffff;
  stroke: none;
}
.nft_hero_view_btn::before {
  position: absolute;
  content: '';
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #060C15;
  border-radius: 20px;
  z-index: -2;
}
.nft_hero_view_btn::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 20px;
  z-index: -3;
}
.nft_hero_view_container {
  padding: 20px 8px 16px 8px;
  box-sizing: border-box;
  background-color: #15171A;
  border-radius: 35px 35px 0px 0px;
}
.nft_hero_view_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.nft_hv_ccharacters_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
  padding: 12px;
  background-color: #0D0D0D;
  border: 1px solid #333333;
  box-sizing: border-box;
  border-radius: 12px;
  margin-bottom: 14px;
}
.nft_hero_view_current_characters {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr 1fr;
  grid-column-gap: 4px;
  grid-row-gap: 8px;
}
.runec_asset_item {
  width: 100%;
  justify-self: start;
  height: 30px;
  padding: 0px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #24272C;
  border-radius: 15px;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.nft_hero_view_characters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  margin-top: 14px;
}
.nft_hro_char_head {
  width: 100%;
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  background-color: #0D0D0D;
  border: 1px solid #333333;
  border-radius: 12px 12px 0px 0px;
  box-sizing: border-box;
}
.nft_hro_char_column {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 4px;
  background-color: #0D0D0D;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;
  padding: 4px 0px 1px 0px;
  border-radius: 0px 0px 20px 20px;
  box-sizing: border-box;
}
.nft_hro_char_column .nft_hro_char_item {
  margin: 0px 10px;
}
.nft_hro_char_column .nft_hro_char_item:last-child {
  margin: 0px;
  width: 100%;
  margin-top: 5px;
  position: relative;
}
.nft_hro_char_column .nft_hro_char_item:last-child::after {
  position: absolute;
  content: '';
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 1px solid #333333;
  border-radius: 20px;
  box-sizing: border-box;
}
.nft_hro_char_item {
  height: 32px;
  padding: 0px 12px 0px 18px;
  box-sizing: border-box;
  background-color: #24272C;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.nft_hro_char_item.current:nth-child(1){
  grid-column: 1/2;
}
.nft_hro_char_item.current:nth-child(2){
  grid-column: 2/4;
}
.nft_hro_char_item.current:nth-child(3){
  grid-column: 4/5;
}
.nft_hro_char_item.current:nth-child(4){
  grid-column: 1/2;
}
.nft_hro_char_item.current:nth-child(5){
  grid-column: 2/4;
}
.nft_hro_char_item.current:nth-child(6){
  grid-column: 4/5;
}
.nft_hro_char_item.current:nth-child(7){
  grid-column: 1/3;
}
.nft_hro_char_item.current:nth-child(8){
  grid-column: 3/5;
}
.nft_hro_char_item_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nft_hro_char_item_icon svg {
  width: auto;
  max-width: 22px;
  height: auto;
  max-height: 21px;
  fill: #ffffff;
  stroke: none;
}
.nft_hro_char_item_label {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

/* ========================================================================== */

.multiple_slider {
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
._multiple_slide {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  will-change: transform;
}
._multiple_slide.remainSlide {
  left: 100%;
}
._multiple_slide.active {
  position: static;
  z-index: 1;
  transform: translate(0px, 0px);
}
._multiple_slide.prewSlide {
  transform: translate(-100%, 0px);
}
._multiple_slide.nextSlide {
  transform: translate(100%, 0px);
}

/* ========================================================================= */

.conditions_window {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 1000000;
}
.conditions_container {
  padding: 29px 24px 24px 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #353535;
  backdrop-filter: blur(5px);
  border-radius: 35px;
  display: grid;
  grid-template-columns: 1fr;
}
.cond_window_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.cond_list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 12px;
  margin: 24px 0px;
}
.cond_list .cond_item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 12px;
  align-items: center;
}
.cond_list .cond_icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FF3838;
  border-radius: 50%;
}
.cond_list .cond_icon.check {
  border: 1px solid #00CAD1;
}
.cond_list .cond_icon svg {
  width: 10px;
  height: auto;
  fill: none;
  stroke: #FF3838;
}
.cond_list .cond_icon.check svg {
  width: 10px;
  height: auto;
  fill: none;
  stroke: #00CAD1;
}
.cond_list .cond_text {
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.cond_list .cond_text .link {
  font-weight: 600;
  color: #367AEB;
  cursor: pointer;
}
.cond_accept_btn {
  width: 100%;
  height: 39px;
  background-color: #3D7CCF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

/* ========================================================================= */

.game_content_block.hero_unity_page {
  align-self: start;
  height: 100%;
  padding-bottom: 120px;
  box-sizing: border-box;
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
  grid-template-rows: auto auto 1fr;
}
.hrouty_page_menu {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  padding: 32px 16px 4px 16px;
  box-sizing: border-box;
}
.hrouty_page_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
}
.hrouty_page_btn {
  position: relative;
  border-radius: 24px;
  z-index: 1;
  padding: 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  grid-row-gap: 8px;
  cursor: pointer;
}
.hrouty_page_btn .hrouty_page_btn_lock_icon {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hrouty_page_btn .hrouty_page_btn_lock_icon svg {
  width: 20px;
  height: auto;
  stroke: none;
  fill: #ffffff;
}
.hrouty_page_btn::before {
  position: absolute;
  content: '';
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #060C15;
  border-radius: 24px;
  z-index: -2;
}
.hrouty_page_btn::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 24px;
  z-index: -3;
}
.hrouty_page_btn.blocked::after {
  opacity: 0.5;
}
.hrouty_page_btn.blocked .hrouty_page_btn_icon {
  opacity: 0.5;
}
.hrouty_page_btn_text {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.hrouty_page_btn.blocked .hrouty_page_btn_text {
  opacity: 0.5;
}
.hrouty_hero_list_toggle_menu {
  justify-self: center;
  display: grid;
  grid-template-columns: auto auto;
}
.hrouty_hero_list_toggle_btn {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  padding: 9px 8px;
  border-radius: 17px;
  box-sizing: border-box;
  cursor: pointer;
}
.hrouty_hero_list_toggle_btn.active {
  color: #ffffff;
  background-color: #474747;
}
.hrouty_page_hero_list_block {
  background-color: #15171A;
  border-radius: 35px;
  padding: 12px 16px 12px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 100% 100%;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.hrouty_page_hero_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  transition: 0.5s;
}
.hrouty_page_hero_list.complete_applications {
  transform: translate(16px, 0px);
}
.hrouty_page_hero_list.complete_applications.active {
  transform: translate(-100%, 0px);
}
.hrouty_page_hero_list.active_applications {
  transform: translate(calc(-100% - 16px), 0px);
}
.hrouty_page_hero_list.active_applications.active {
  transform: translate(0%, 0px);
}

.hrouty_nohero_text_block {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
  justify-items: center;
  margin-top: 11px;
}
.hrouty_nohero_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.hrouty_nohero_text {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.hrouty_hero_NFT_request_item {
  width: 100%;
  background-color: #24272C;
  border-radius: 16px;
}
.hrouty_hro_NFT_rqst_status {
  position: absolute;
  left: 9px;
  bottom: 5px;
  padding: 4px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  background-color: #D3B128;
}
.hrouty_hro_NFT_rqst_status.complete {
  background-color: #34AA1C;
}
.hrouty_hro_NFT_rqst_information {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 12px;
  padding: 10px 12px 12px 15px;
  box-sizing: border-box;
  justify-items: start;
}
.hrouty_hro_NFT_rqst_title {
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.hrouty_hro_NFT_rqst_number {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 4px;
}
.hrouty_hro_NFT_rqst_number .label {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.hrouty_hro_NFT_rqst_number .value {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.hrouty_hro_NFT_rqst_date {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 4px;
}
.hrouty_hro_NFT_rqst_date .label {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #78797D;
}
.hrouty_hro_NFT_rqst_date .value {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.hrouty_hro_NFT_rqst_heros {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 8px;
  grid-row-gap: 4px;
}
.hrouty_hro_NFT_rqst_heros .label {
  grid-column: 1/5;
  font-weight: 500;
  font-size: 11px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #78797D;
}
.hrouty_hro_NFT_rqst_heros .number {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  padding: 4px;
  border-radius: 12px;
  background-color: var(--rare-color);
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="-4"]{
  --rare-color: #a0a6ab;
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="-3"]{
  --rare-color: #73e33b;
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="-2"]{
  --rare-color: #2F75B5;
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="-1"]{
  --rare-color: #9d1cb0;
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="0"]{
  --rare-color: #FF8801;
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="1"]{
  --rare-color: #00B0F0;
}
.hrouty_hro_NFT_rqst_heros .number[data-rare="2"]{
  --rare-color: #FFCC00;
}
.hrouty_hro_NFT_rqst_heros .ampersand {
  font-weight: 500;
  font-size: 11px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

/* ========================================================================== */

.game_content_block.hero_unity_select_page {
  align-self: start;
  height: 100%;
  padding-bottom: 120px;
  box-sizing: border-box;
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
  grid-template-rows: auto auto 1fr;
}
.hero_unity_select_head {
  width: 100%;
  height: 96px;
  position: relative;
}
body[data-platform="android"] .hero_unity_select_head {
  height: 96px;
}
body[data-platform="ios"] .hero_unity_select_head {
  height: 106px;
}

._NFT_hero_unity_container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin: 10px 0px;
}
._NFT_create_hero_selected {
  width: 100%;
  aspect-ratio: 1/1;
  z-index: 1;
  position: relative;
}
._NFT_create_hero_selected[data-rare="-4"]{
  --rare-color: #a0a6ab;
}
._NFT_create_hero_selected[data-rare="-3"]{
  --rare-color: #73e33b;
}
._NFT_create_hero_selected[data-rare="-2"]{
  --rare-color: #2F75B5;
}
._NFT_create_hero_selected[data-rare="-1"]{
  --rare-color: #9d1cb0;
}
._NFT_create_hero_selected[data-rare="0"]{
  --rare-color: #FF8801;
}
._NFT_create_hero_selected[data-rare="1"]{
  --rare-color: #00B0F0;
}
._NFT_create_hero_selected[data-rare="2"]{
  --rare-color: #FFCC00;
}
._NFT_create_hero_selected::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  aspect-ratio: 1/3;
  height: 80%;
  border: 21px solid var(--rare-color);
  filter: blur(37.5px);
  border-radius: 50%;
  z-index: -1;
  transition: 0.25s;
}
._NFT_create_hero_selected .hero_image {
  width: auto;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
._NFT_hero_unity_container .ampersand {
  align-self: center;
  font-weight: 700;
  font-size: 24px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #78797D;
  z-index: 2;
}
.hro_uty_select_heros_container {
  background-color: #15171A;
  border-radius: 35px;
  padding: 16px 21px 21px 21px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  grid-row-gap: 18px;
  z-index: 2;
}
.hro_uty_select_heros_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
._NFT_create_heros_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 4px;
}
._NFT_create_hero_item {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 10px;
  z-index: 1;
  padding: 1px;
  box-sizing: border-box;
}
._NFT_create_hero_item[data-rare="-4"]{
  --rare-color: #a0a6ab;
}
._NFT_create_hero_item[data-rare="-3"]{
  --rare-color: #73e33b;
}
._NFT_create_hero_item[data-rare="-2"]{
  --rare-color: #2F75B5;
}
._NFT_create_hero_item[data-rare="-1"]{
  --rare-color: #9d1cb0;
}
._NFT_create_hero_item[data-rare="0"]{
  --rare-color: #FF8801;
}
._NFT_create_hero_item[data-rare="1"]{
  --rare-color: #00B0F0;
}
._NFT_create_hero_item[data-rare="2"]{
  --rare-color: #FFCC00;
}
._NFT_create_hero_item_border {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  transition: 0.25s;
}
._NFT_create_hero_select_ch:checked ~ ._NFT_create_hero_item_border {
  opacity: 1;
}
._NFT_create_hero_item_border::before,
._NFT_create_hero_item_border::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: -1;
  border: 1px solid var(--rare-color);
}
._NFT_create_hero_item_border::before {
  z-index: -2;
  filter: blur(4px);
}
._NFT_create_hero_select_ch {
  display: none;
}
._NFT_create_hero_item .attention_icon_wrapper {
  position: absolute;
  left: 8px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._NFT_create_hero_item .attention_icon_wrapper svg {
  width: 20px;
  height: auto;
}
._NFT_create_hero_custom_checkbox {
  position: absolute;
  left: 8px;
  bottom: 7px;
  width: 24px;
  height: 24px;
  background-color: #000000;
  border: 1px solid #4998FF;
  border-radius: 3px;
  z-index: 2;
}
._NFT_create_hero_custom_checkbox.hidden {
  opacity: 0;
  visibility: hidden;
}
._NFT_create_hero_custom_checkbox svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: auto;
  stroke: #4998FF;
  fill: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}
._NFT_create_hero_select_ch:checked ~ ._NFT_create_hero_custom_checkbox svg {
  opacity: 1;
  visibility: visible;
}
._NFT_create_hero_item .segyn_icon {
  position: absolute;
  left: 8px;
  top: 3px;
  width: 24px;
  height: auto;
  z-index: 1;
  opacity: 0.5;
  transition: 0.25s;
}
._NFT_create_hero_select_ch:checked ~ .segyn_icon {
  opacity: 1;
}
._NFT_create_hero_item.block_hero .segyn_icon {
  filter: grayscale(1);
}
._NFT_create_hero_item .hero_lavel {
  height: 15px;
  display: flex;
  align-items: center;
  position: absolute;
  top: 6px;
  right: 4px;
  padding: 0px 8px;
  box-sizing: border-box;
  border-radius: 15px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #ffffff;
  opacity: 0.5;
  transition: 0.25s;
  background-color: var(--rare-color);
  z-index: 2;
}
._NFT_create_hero_item.block_hero .hero_lavel {
  filter: grayscale(1);
}
._NFT_create_hero_item[data-rare='-3'] .hero_lavel {
  color: #000000;
}
._NFT_create_hero_select_ch:checked ~ .hero_lavel {
  opacity: 1;
}
._NFT_create_hero_item .hero_number {
  position: absolute;
  right: 4px;
  bottom: 11px;
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  opacity: 0.5;
  transition: 0.25s;
}
._NFT_create_hero_select_ch:checked ~ .hero_number {
  opacity: 1;
}
._NFT_create_hero_item.block_hero .hero_number {
  filter: grayscale(1);
}
._NFT_create_hero_item .hero_image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  transition: 0.25s;
}
._NFT_create_hero_select_ch:checked ~ .hero_image {
  opacity: 1;
}
._NFT_create_hero_item.block_hero .hero_image {
  filter: grayscale(1);
}
.select_hero_for_create_NFT {
  height: 40px;
  border-radius: 20px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.select_hero_for_create_NFT.active {
  background-color: #3D7CCF;
}
.select_hero_for_create_NFT img {
  width: 18px;
  height: auto;
  margin-left: 6px;
  margin-bottom: -2px;
}

/* ========================================================================== */

.game_content_block.hero_unity_characters_page {
  align-self: start;
  height: 100%;
  padding-bottom: 120px;
  box-sizing: border-box;
  background-size: contain;
  grid-template-rows: auto auto 1fr;
  background-image: url(/app/images/nft_page_fon2.jpg);
}
._NFT_created_hero_container {
  margin: 8px 0px 17px;
  display: flex;
  justify-content: center;
}
._NFT_created_hero_block {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
._NFT_created_hero_block.create_page {
  width: 183px;
  height: 183px;
  border: 1px solid #333333;
  border-radius: 10px;
}
._NFT_created_hero_block.application {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px 16px 0px 0px;
}
._NFT_created_hero_block .unity_number {
  position: absolute;
  left: 9px;
  top: 10px;
  font-weight: 400;
  font-size: 8px;
  line-height: 8px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  white-space: nowrap;
  font-feature-settings: 'tnum' on, 'lnum' on;
  display: flex;
  align-items: center;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  padding: 0px 3px;
  border-radius: 4px;
  border-top: 1px solid var(--rare-color-f);
  border-right: 1px solid var(--rare-color-f);
  border-bottom: 1px solid var(--rare-color-s);
  border-left: 1px solid var(--rare-color-s);
}
._NFT_created_hero_block .spec_list {
  position: absolute;
  left: 9px;
  top: 35px;
  font-feature-settings: 'tnum' on, 'lnum' on;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  padding: 6px 6px 4px 6px;
  border-radius: 4px;
  border: 1px solid #981bcb;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3px;
  grid-row-gap: 1px;
  align-items: center;
  display: grid;
  z-index: 2;
  border-top: 1px solid var(--rare-color-f);
  border-right: 1px solid var(--rare-color-f);
  border-bottom: 1px solid var(--rare-color-s);
  border-left: 1px solid var(--rare-color-s);
}
._NFT_created_hero_block.create_page .spec_list {
  display: none;
}
._NFT_created_hero_block.create_page .spec_list.visible {
  display: grid;
}
._NFT_created_hero_block .spec_list_label {
  grid-column: 1/3;
  font-weight: 500;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: -0.32px;
  color: #78797D;
  text-align: center;
  margin-bottom: 2px;
}
._NFT_created_hero_block .spec_row {
  display: flex;
  align-items: center;
  padding: 3px 3px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
._NFT_created_hero_block .spec_row .row_value {
  font-weight: 500;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: -0.32px;
  color: #ffffff;
}
._NFT_created_hero_block .spec_row svg {
  width: auto;
  max-width: 12px;
  max-height: 10px;
  height: auto;
  stroke: none;
  fill: #ffffff;
  margin-right: 5px;
}
._NFT_created_hero_block .spec_row:nth-child(8),
._NFT_created_hero_block .spec_row:nth-child(9){
  grid-column: 1/3;
  justify-content: center;
}
._NFT_created_hero_block .number {
  position: absolute;
  right: 8px;
  bottom: 10px;
  font-weight: 700;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #000000;
}
._NFT_created_hero_block .hero {
  position: absolute;
  top: 27px;
  right: 26px;
  width: 50px;
  height: 121px;
  background-color: #d9d9d9;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: auto 100%;
  z-index: 2;
}
._NFT_created_hero_block .shadow {
  position: absolute;
  top: 139px;
  right: 26px;
  width: 50px;
  height: 13px;
  background-color: #000000;
  border-radius: 50%;
  z-index: 1;
  filter: blur(3px);
}
._NFT_created_hero_block .question_sumbol {
  font-family: 'Arial';
  position: absolute;
  top: 63px;
  right: 46px;
  color: #000000;
  font-weight: 400;
  font-size: 30px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  z-index: 3;
}
._NFT_create_characters_container {
  background-color: #15171A;
  border-radius: 35px;
  padding: 16px 21px 21px 21px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  z-index: 2;
}
.hro_uty_characters_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
._NFT_create_remaind_pints {
  margin-bottom: 3px;
  display: flex;
  align-items: flex-end;
}
._NFT_create_remaind_pints .label {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #78797D;
}
._NFT_create_remaind_pints .value {
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  text-align: right;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-left: 12px;
}
._NFT_create_characters_list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 6px;
  padding-top: 12px;
  box-sizing: border-box;
}
._NFT_create_character_row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  padding-top: 8px;
  box-sizing: border-box;
}
._NFT_create_character_row._NFT_spec_row {
  padding-top: 16px;
}
._NFT_create_spec_icon {
  width: 29px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
._NFT_create_spec_icon svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  stroke: none;
  fill: #ffffff;
}
._NFT_create_spec_counter {
  min-width: 30px;
  margin-left: 12px;
  margin-right: 6px;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
._NFT_create_indicators_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  margin-top: 14px;
}
._NFT_create_indicator_item {
  position: relative;
  height: 40px;
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  padding: 0px 18px 0px 18px;
  box-sizing: border-box;
  z-index: 2;
  text-decoration: none;
  text-align: center;
}
._NFT_create_indicator_item.characters {
  grid-template-columns: auto 1fr;
  grid-column-gap: 10px;
  padding: 0px 14px 0px 14px;
}
._NFT_create_indicator_item.characters._NFT_create_indicator_item::after {
  background: linear-gradient(90deg, rgba(61,124,207,0.3) 0%, rgba(87,255,227,0.3) 100%);
}
._NFT_crt_ind_item_text {
  justify-self: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
._NFT_crt_ind_item_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
._NFT_crt_ind_item_icon svg {
  fill: #ffffff;
  stroke: none;
  height: auto;
}
._NFT_create_indicator_item.power ._NFT_crt_ind_item_icon svg {
  width: 18px;
}
._NFT_create_indicator_item.battle ._NFT_crt_ind_item_icon svg {
  width: 20px;
}
._NFT_create_indicator_item::before {
  position: absolute;
  content: '';
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: #181A22;
  border-radius: 20px;
  z-index: -2;
}
._NFT_create_indicator_item::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7DCF 0%, #58FFE4 100%);
  border-radius: 20px;
  z-index: -3;
}
._NFT_create_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  margin-top: 22px;
}
._NFT_create_action_btn {
  height: 40px;
  border-radius: 20px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
._NFT_create_action_btn.active {
  background-color: #3D7CCF;
}
._NFT_create_action_btn img {
  width: 18px;
  height: auto;
  margin-left: 6px;
  margin-bottom: -2px;
}

/* ========================================================================= */

._NFT_complete_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
._NFT_complete_title .link {
  color: #3D7CCF;
}
._NFT_complete_label {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  margin-top: 16px;
}
._NFT_complete_content {
  display: flex;
  height: 100%;
  align-items: center;
}
._NFT_complete_actions {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
}
._NFT_complete_action_btn {
  height: 40px;
  border-radius: 20px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
._NFT_complete_action_btn.active {
  background-color: #3D7CCF;
}

/* ========================================================================= */

._custom-range {
  --thumb-border: 2px solid #00CAD1;
  --thumb-bg: #000000;
  --thumb-width: 16px;
  --track-height: 4px;
  --track-bg: #343434;
  --filled-width: 0%;
  --filled-track: linear-gradient(270deg, #00CAD1 0%, #3E7ED0 100%);
  position: relative;
  width: 100%;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  padding: 0px 8px;
  box-sizing: border-box;
}
._custom-range .-track {
  width: 100%;
  height: var(--track-height);
  padding: 6px 0px;
  box-sizing: border-box;
  position: relative;
}
._custom-range .-track::before {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  transform: translate(0px, -50%);
  height: var(--track-height);
  width: 100%;
  background-color: var(--track-bg);
  border-radius: 2px;
  z-index: 1;
}
._custom-range .-track::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%;
  height: var(--track-height);
  width: var(--filled-width);
  background: var(--filled-track);
  transform: translate(0px, -50%);
  border-radius: 2px;
  z-index: 2;
}
._custom-range .-thumb {
  position: absolute;
  left: var(--filled-width);
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--thumb-width);
  background-color: var(--thumb-bg);
  border: var(--thumb-border);
  box-sizing: border-box;
  aspect-ratio: 1/1;
  border-radius: 50%;
  z-index: 2;
  transition: transform 0.1s;
  z-index: 3;
}
._custom-range .-thumb.active {
  transform: translate(-50%, -50%) scale(1.2);
}
._custom-range .-counter {
  position: absolute;
  left: 50%;
  top: calc(-100% - 8px);
  transform: translate(-50%, 0px);
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  white-space: nowrap;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* ========================================================================== */

.game_content_block.check_NFT_heros_page {
  align-self: start;
  height: 100%;
  padding-bottom: 120px;
  box-sizing: border-box;
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
  grid-template-rows: auto auto 1fr;
}
.check_NFT_heros_head_wrapper {
  padding: 0px 16px;
  box-sizing: border-box;
  margin: 8px 0px 14px 0px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 11px;
}
.check_NFT_heros_head_block {
  background-color: #191B1F;
  border-radius: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: start;
}
.check_NFT_heros_inform {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 18px;
  grid-row-gap: 8px;
}
.check_NFT_heros_inform .label {
  grid-column: 1 / 3;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #B9B9B9;
}
.check_NFT_heros_inform .info_block {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.check_NFT_heros_inform .info_block svg {
  width: 15px;
  height: auto;
  stroke: none;
  fill: #B9B9B9;
  margin-right: 6px;
}
.search.NFT_hero {
  position: relative;
}
.search.NFT_hero .search_icon_wrapper {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0px, -50%);
  pointer-events: none;
}
.search.NFT_hero .search_icon_wrapper svg {
  width: 12px;
  height: auto;
  fill: #EBEBEB;
  stroke: none;
}
.search.NFT_hero .search_input {
  width: 100%;
  height: 34px;
  background-color: #0D0D0D;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 0px 12px 0px 24px;
  box-sizing: border-box;

  font-family: 'Golos';
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #ffffff;
}
.search.NFT_hero .search_input:focus {
  outline: none;
  border: 1px solid #4998FF;
}
.search.NFT_hero .search_input::placeholder {
  font-family: 'Golos';
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #4D4D4D;
}
.check_NFT_heros_menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  padding: 0px 12px;
  box-sizing: border-box;
}
.check_NFT_heros_menu_btn {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  transition: all 0.2s ease;
}
.check_NFT_heros_menu_btn.active {
  background-color: #474747;
}
.check_NFT_heros_menu_btn svg {
  width: 11px;
  height: auto;
  stroke: none;
  fill: #ffffff;
  margin-right: 4px;
}
._NFT_fusion_heros_container {
  min-height: 100%;
  display: grid;
  grid-template-columns: 100% 100%;
  align-items: start;
  background-color: #15171A;
  border-radius: 36px;
  padding: 0px 16px 0px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
._NFT_fusion_heros_block {
  display: grid;
  grid-template-columns: 1fr;
  transition: 0.5s;
  padding: 12px 0px 24px 12px;
  box-sizing: border-box;
}
._NFT_fusion_heros_block.all_heros {
  grid-row-gap: 14px;
  transform: translate(16px, 0px);
}
._NFT_fusion_heros_block.all_heros.active {
  transform: translate(-100%, 0px);
}
._NFT_fusion_heros_block.my_heros {
  transform: translate(calc(-100% - 16px), 0px);
}
._NFT_fusion_heros_block.my_heros.active {
  transform: translate(0%, 0px);
}
.my_NFT_fusion_hero_item {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 1px solid #353535;
  box-sizing: border-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #000000;
}
._NFT_fsn_hros_filters_container {

}
._NFT_fsn_hros_filters_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
._NFT_fsn_hros_sort_list {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 12px;
  align-items: center;
}
._NFT_fsn_hros_visible_sort_btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
._NFT_fsn_hros_visible_sort_btn .label {
  font-weight: 600;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
._NFT_fsn_hros_visible_sort_btn.active .label {
  color: #ffffff;
}
._NFT_fsn_hros_visible_sort_btn .arrow_wrapper {
  margin-left: 4px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._NFT_fsn_hros_visible_sort_btn .arrow_wrapper svg {
  width: 9px;
  height: auto;
  fill: none;
  stroke: #ffffff;
  transition: 0.25s;
}
._NFT_fsn_hros_visible_sort_btn.active .arrow_wrapper svg {
  transform: rotate(-180deg);
}
._NFT_fsn_hros_visible_sort_list {
  position: absolute;
  right: 0px;
  top: calc(100% + 9px);
  padding: 16px 8px;
  background: #1A1A1A;
  border: 1px solid #333333;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}
._NFT_fsn_hros_visible_sort_btn.active ._NFT_fsn_hros_visible_sort_list {
  opacity: 1;
  visibility: visible;
}
._NFT_fsn_hros_sort_btn {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  white-space: nowrap;
}
._NFT_fsn_hros_sort_btn.active {
  color: #ffffff;
}
._NFT_fsn_hros_sort_btn svg {
  width: 9px;
  height: auto;
  fill: none;
  stroke: #ffffff;
  transition: 0.25s;
  margin-left: 3px;
  opacity: 0;
}
._NFT_fsn_hros_sort_btn.active svg {
  opacity: 1;
}
._NFT_fsn_hros_sort_btn.active[data-sort-dir="asc"] svg {
  transform: rotate(180deg);
}
._NFT_fsn_hros_sort_btn.active[data-sort-dir="desc"] svg {
  transform: rotate(0deg);
}
._NFT_fsn_hros_visfilt_btn {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #78797D;
  cursor: pointer;
  white-space: nowrap;
}
._NFT_fsn_hros_visfilt_btn.active {
  color: #ffffff;
}
._NFT_fsn_hros_visfilt_btn input {
  display: none;
}
._NFT_fsn_hros_sort_radio {
  width: 16px;
  min-width: 16px;
  height: 16px;
  border: 1px solid #4998FF;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
  box-sizing: border-box;
}
._NFT_fsn_hros_sort_radio::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background-color: #4998FF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s;
}
._NFT_fsn_hros_visfilt_btn input:checked + ._NFT_fsn_hros_sort_radio::after {
  opacity: 1;
}
._NFT_fsn_hros_visfilt_btn input:checked ~ span {
  color: #ffffff;
}
._NFT_fusion_heros_list {
  display: grid;
  grid-gap: 8px;
}
._NFT_fusion_heros_list.my_heros {
  grid-template-columns: 1fr 1fr 1fr;
}
._NFT_fusion_heros_list.all_heros {
  grid-template-columns: 1fr;
}
._NFT_fusion_hero_item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 7px;
  grid-row-gap: 12px;
}
._NFT_fsn_hero_itm_image {
  grid-row: 1 / 6;
  width: 112px;
  height: 112px;
  box-sizing: border-box;
  border: 2px solid #333333;
  border-radius: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #000000;
}
._NFT_fsn_hero_itm_name {
  margin-top: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
._NFT_fsn_hero_itm_info_block {
  justify-self: start;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 4px;
  align-items: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
}
._NFT_fsn_hero_itm_info_block .label {
  color: #78797D;
}
._NFT_fsn_hero_itm_info_block .value {
  display: flex;
  align-items: center;
  height: 16px;
  padding: 0px 4px;
  border-radius: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
}
._NFT_fsn_hero_itm_info_block .value.green {
  background-color: #34AA1C;
}
._NFT_fsn_hero_itm_info_block .value.red {
  background-color: #AA1C1C;
}

/* ========================================================================= */

.modal_window.view_NFT_unity {
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
}
body[data-platform="tdesktop"] .modal_window {
  padding-bottom: 0px;
}
body[data-platform="android"] .modal_window {
  padding-bottom: 0px;
}
body[data-platform="ios"] .modal_window {
  padding-bottom: 0px;
}
.modal_window.view_NFT_unity .modal_window_content {
  padding: 0px;
  grid-template-rows: auto 1fr;
}
.view_NFT_unity_logo_wrapper {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, 0px);
  display: flex;
  z-index: 2;
}
.view_NFT_unity_logo_wrapper .logo_img {
  width: 121px;
  height: auto;
}
.view_NFT_unity_inform_container {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 35px 35px 0px 0px;
  background-color: #15171A;
  padding: 19px 16px;
  box-sizing: border-box;
}
.view_NFT_unity_hero_img {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 20px 0px 11px 0px;
  opacity: 0;
  transition: 1s;
  transition-timing-function: ease-out;
}
.view_NFT_unity_hero_img.show {
  opacity: 1;
}
.view_NFT_unity_hero_name {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.view_NFT_unity_hero_info_block {
  justify-self: start;
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 12px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  margin-bottom: 16px;
}
.view_NFT_unity_hero_info_block .label {
  color: #78797D;
}
.view_NFT_unity_hero_info_block .value {
  color: #ffffff;
}
.view_NFT_unity_hero_info_block.number {
  margin-bottom: 16px;
}
.view_NFT_unity_hero_info_block.unity {
  margin-bottom: 32px;
}

.view_NFT_unity_variable_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 12px;
  margin-bottom: 20px;
}
.view_NFT_un_variable_toggle_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.view_NFT_un_variable_toggle_btn .label {
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.view_NFT_un_variable_toggle_btn .arrow_wrapper {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view_NFT_un_variable_toggle_btn .arrow_wrapper svg {
  width: 9px;
  height: auto;
  fill: none;
  stroke: #ffffff;
  transition: 0.25s;
}
.view_NFT_un_variable_toggle_btn.active .arrow_wrapper svg {
  transform: rotate(-180deg);
}
.view_NFT_un_variable_list_wrapper {
  overflow: hidden;
}
.view_NFT_un_variable_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.view_NFT_un_variable_hero {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  opacity: 0.5;
}
.view_NFT_un_variable_hero .segyn_icon {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 24px;
  height: auto;
}
.view_NFT_un_variable_hero .nft_icon_wrapper {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view_NFT_un_variable_hero .nft_icon_wrapper .nft_icon {
  width: 100%;
  height: auto;
}
.view_NFT_un_variable_hero.isset_hero {
  opacity: 1;
}
.view_NFT_un_variable_hero.rare_border {
  background-size: contain;
}
.view_NFT_un_variable_hero.rare_border::before,
.view_NFT_un_variable_hero.rare_border::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
}
.view_NFT_un_variable_hero.rare_border::before {
  border: 3px solid var(--rare-color);
  filter: blur(4px);
}
.view_NFT_un_variable_hero.rare_border::after {
  border: 1px solid var(--rare-color);
}
.view_NFT_un_variable_hero[data-rare="-4"]{
  --rare-color: #a0a6ab;
}
.view_NFT_un_variable_hero[data-rare="-3"]{
  --rare-color: #73e33b;
}
.view_NFT_un_variable_hero[data-rare="-2"]{
  --rare-color: #2F75B5;
}
.view_NFT_un_variable_hero[data-rare="-1"]{
  --rare-color: #9d1cb0;
}
.view_NFT_un_variable_hero[data-rare="0"]{
  --rare-color: #FF8801;
}
.view_NFT_un_variable_hero[data-rare="1"]{
  --rare-color: #00B0F0;
}
.view_NFT_un_variable_hero[data-rare="2"]{
  --rare-color: #FFCC00;
}
.view_NFT_un_variable_hero .counter {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.view_NFT_un_variable_hero .hero_lavel {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: var(--rare-color);
  height: 16px;
  border-radius: 8px;
  padding: 0px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 3;
}
.view_NFT_unity_available_container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 12px;
  margin-bottom: 24px;
}
.view_NFT_unity_available_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.view_NFT_unity_available_head .title {
  font-weight: 500;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.view_NFT_unity_available_info {
  display: flex;
  align-items: center;
}
.view_NFT_unity_available_info .label {
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.view_NFT_unity_available_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
}
.view_NFT_unity_available_stack {
  width: 100%;
  aspect-ratio: 1/1;
  border: 2px solid #333333;
  box-sizing: border-box;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  opacity: 0.5;
}
.view_NFT_unity_available_stack.available {
  opacity: 1;
}
.view_NFT_unity_available_stack.crossing {
  border: 2px solid #bb2424;
}
.view_NFT_unity_available_stack .counter {
  position: absolute;
  left: 10px;
  bottom: 6px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.view_NFT_unity_available_stack.crossing .counter {
  color: #787878;
}
.view_NFT_unity_available_stack .crossing_badge {
  position: absolute;
  right: 4px;
  top: 4px;
  display: flex;
}
.view_NFT_unity_available_stack .crossing_badge svg {
  width: 17px;
  height: auto;
}
.view_NFT_unity_available_stack .number {
  position: absolute;
  right: 5px;
  bottom: 7px;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  height: 16px;
  display: flex;
  align-items: center;
  padding: 0px 6px;
  box-sizing: border-box;
  background-color: #24272C;
  border-radius: 8px;
}
.unity_catalog_myisset_heros_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.unity_catalog_mystack_heros_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  max-height: 100%;
  overflow: auto;
  margin-bottom: 12px;
}
.unity_catalog_mystack_heros_list::-webkit-scrollbar {
  display: none;
}
#unity_catalog_mystack_heros ._bottom_curtain_content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}
.unity_catalog_open_card_btn {
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3D7CCF;
  border-radius: 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

/* ========================================================================= */

.tournament_award_item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
  'image place'
  'image name'
  'image money'
  'image bilets';
  align-items: start;
  justify-items: start;
  grid-row-gap: 8px;
  grid-column-gap: 24px;
  grid-template-rows: auto auto auto 1fr;
}
.tournament_award_image_wrapper {
  grid-area: image;
  position: relative;
  width: 130px;
  height: 130px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tournament_award_image_wrapper.hero,
.tournament_award_image_wrapper.rune {
  padding: 5px;
}
.tournament_award_image_wrapper::before,
.tournament_award_image_wrapper::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  border-top: 2px solid var(--rare-color-f);
  border-right: 2px solid var(--rare-color-f);
  border-bottom: 2px solid var(--rare-color-s);
  border-left: 2px solid var(--rare-color-s);
}
.tournament_award_image_wrapper::after {
  z-index: 3;
}
.tournament_award_image_wrapper::before {
  z-index: 2;
  filter: blur(2.5px);
}
.tournament_award_image_wrapper .rune_container.numcell6,
.tournament_award_image_wrapper .rune_container.numcell4 {
  --cell-size: 25px;
  --border-size: 13px;
  --body-padding: 2px;
  --body-gap: 2px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --cell-radius: 1px;
  --artifact-size: 20px;
  --artifact-border-size: 2px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --artifact-cell-radius: 0px;
}
.tournament_award_image_wrapper .rune_container.numcell2 {
  --cell-size: 36px;
  --border-size: 13px;
  --body-padding: 4px;
  --body-gap: 2px;
  --cell-img-height: calc(100% - 3px);
  --cell-svg-height: calc(100% - 5px);
  --cell-radius: 1px;
  --artifact-size: 22px;
  --artifact-border-size: 2px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 5px);
  --artifact-cell-radius: 0px;
}
.tournament_award_image {
  width: auto;
  height: 100%;
}
.tournament_award_count {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_award_place_block {
  grid-area: place;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
}
.tournament_award_place {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 2px;
  align-items: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  margin-right: 12px;
}
.tournament_award_place svg {
  width: 12px;
  height: auto;
  fill: #575757;
}
.tournament_award_place.gold svg {
  fill: #B7A500;
}
.tournament_award_place.silver svg {
  fill: #B9B9B9;
}
.tournament_award_place.bronze svg {
  fill: #CD7F32;
}
.tournament_award_place svg:nth-child(2){
  transform: scale(-1, 1);
}
.tournament_award_place_label {
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_award_name {
  grid-area: name;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_award_money {
  grid-area: money;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_award_money img {
  width: 24px;
  height: auto;
  margin-right: 12px;
}
.tournament_award_bilets {
  grid-area: bilets;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_award_bilets svg {
  width: 20px;
  height: auto;
  fill: #57FFE3;
  margin-right: 16px;
}
.tournaments_history_filters_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 16px;
}
.tournaments_history_filter_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
.tournaments_history_filter_btn .label {
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.tournaments_history_filter_btn svg {
  width: 9px;
  height: auto;
  fill: none;
  stroke: #FFFFFF;
  margin-left: 7px;
  transition: 0.25s;
}
.tournaments_history_filter_btn.active .label {
  color: #ffffff;
}
.tournaments_history_filter_btn.active svg {
  transform: rotate(-180deg);
}
.trnmts_hstry_filter_btn_list {
  position: absolute;
  left: 0px;
  top: calc(100% + 9px);
  padding: 16px 8px;
  background: #1A1A1A;
  border: 1px solid #333333;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
  box-sizing: border-box;
  max-height: 250px;
  overflow: auto;
}
.trnmts_hstry_filter_btn_list.width_btn {
  width: 100%;
}
.tournaments_history_filter_btn.active .trnmts_hstry_filter_btn_list {
  opacity: 1;
  visibility: visible;
}
.trnmts_hstry_filter_btn_list.display {
  left: auto;
  right: 0px;
}
.trnmts_hstry_fltr_btn {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  cursor: pointer;
  white-space: nowrap;
  color: #ffffff;
}
.trnmts_hstry_fltr_btn input {
  display: none;
}
.trnmts_hstry_fltr_btn_radio {
  width: 16px;
  min-width: 16px;
  height: 16px;
  border: 1px solid #4998FF;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
  box-sizing: border-box;
}
.trnmts_hstry_fltr_btn_radio::after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background-color: #4998FF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s;
}
.trnmts_hstry_fltr_btn input:checked + .trnmts_hstry_fltr_btn_radio::after {
  opacity: 1;
}
.trnmts_hstry_fltr_btn .trnmts_hstry_fltr_btn_text {
  grid-row: 1/2;
  grid-column: 2/3;
}
.trnmts_hstry_fltr_btn .trnmts_hstry_fltr_btn_subtext {
  grid-row: 2/3;
  grid-column: 2/3;
  margin-top: 4px;
  color: #78797D;
}
.tournaments_history_tournament_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  grid-column-gap: 12px;
}
.tournaments_history_tournament_name {
  font-weight: 700;
  font-size: 17px;
  line-height: 17px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournaments_history_tournament_date {
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #78797D;
  text-align: right;
  white-space: nowrap;
}
.tournamets_history_tournament_container {
  border: 1px solid #474747;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 100% 100%;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.tournamets_history_tournament_container.uploading {
  border: 1px solid rgba(0, 0, 0, 0);
}
.game_content_block.raiting_page.tournaments_history {
  padding-bottom: 120px;
}
.tournamets_history_list {
  max-width: 100%;
  overflow: hidden;
  display: grid;
  transition: 0.5s;
}
.tournamets_history_list .uploading_block {
  height: 100px;
  --spinner-height: 100%;
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
}
.tournamets_history_list.recruits {
  transform: translate(-100%, 0px);
}
.tournamets_history_list.recruits.active {
  transform: translate(0%, 0px);
}
.tournamets_history_list.masters {
  transform: translate(0px, 0px);
}
.tournamets_history_list.masters.active {
  transform: translate(-100%, 0px);
}
.tournamets_history_tournament_block {
  border-bottom: 1px solid #474747;
  display: grid;
  grid-template-columns: 1fr;
}
.tournamets_history_tournament_block:last-child {
  border-bottom: 0px;
}
.tournamets_history_tournament_place {
  justify-self: center;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 8px 0px;
  box-sizing: border-box;
}
.tournament_history_award_place {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 2px;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  margin-right: 12px;
}
.tournament_history_award_place svg {
  width: 12px;
  height: auto;
  fill: #575757;
}
.tournament_history_award_place.gold svg {
  fill: #B7A500;
}
.tournament_history_award_place.silver svg {
  fill: #B9B9B9;
}
.tournament_history_award_place.bronze svg {
  fill: #CD7F32;
}
.tournament_history_award_place svg:nth-child(2){
  transform: scale(-1, 1);
}
.tournament_history_award_place_label {
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournamets_history_tournament_awards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  border-top: 1px solid #474747;
  padding: 8px 0px;
  box-sizing: border-box;
}
.tournamets_history_mainaward_block {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  grid-column-gap: 5px;
}
.trnmts_hstry_ltbx_image_wrapper {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trnmts_hstry_ltbx_image_wrapper.hero,
.trnmts_hstry_ltbx_image_wrapper.rune {
  padding: 2px;
}
.trnmts_hstry_ltbx_image_wrapper::before,
.trnmts_hstry_ltbx_image_wrapper::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  border-top: 1px solid var(--rare-color-f);
  border-right: 1px solid var(--rare-color-f);
  border-bottom: 1px solid var(--rare-color-s);
  border-left: 1px solid var(--rare-color-s);
}
.trnmts_hstry_ltbx_image_wrapper::after {
  z-index: 3;
}
.trnmts_hstry_ltbx_image_wrapper::before {
  z-index: 2;
  filter: blur(2.5px);
}
.trnmts_hstry_ltbx_image_wrapper .rune_container.numcell6,
.trnmts_hstry_ltbx_image_wrapper .rune_container.numcell4 {
  --cell-size: 10px;
  --border-size: 4px;
  --body-padding: 1px;
  --body-gap: 1px;
  --cell-img-height: calc(100% - 1px);
  --cell-svg-height: calc(100% - 1px);
  --cell-radius: 0px;
  --artifact-size: 8px;
  --artifact-border-size: 1px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 0px);
  --artifact-cell-radius: 0px;
}
.trnmts_hstry_ltbx_image_wrapper .rune_container.numcell2 {
  --cell-size: 14px;
  --border-size: 4px;
  --body-padding: 1px;
  --body-gap: 1px;
  --cell-img-height: calc(100% - 1px);
  --cell-svg-height: calc(100% - 1px);
  --cell-radius: 0px;
  --artifact-size: 9px;
  --artifact-border-size: 1px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 0px);
  --artifact-cell-radius: 0px;
}
.trnmts_hstry_ltbx_image_wrapper .rune_container.numcell6 .rune_body::after,
.trnmts_hstry_ltbx_image_wrapper .rune_container.numcell4  .rune_body::after {
  left: -1px;
  top: -1px;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
}
.trnmts_hstry_ltbx_image {
  width: auto;
  height: 100%;
}
.trnmts_hstry_ltbx_count {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 10;
}
.trnmts_hstry_ltbx_name {
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.trnmts_hstry_award_money {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.trnmts_hstry_award_money img {
  width: 20px;
  height: auto;
  margin-right: 4px;
}
.trnmts_hstry_award_bilets {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.trnmts_hstry_award_bilets svg {
  width: 16px;
  height: auto;
  fill: #57FFE3;
  margin-right: 4px;
}
.tournamets_history_tournament_players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 16px;
  align-items: start;
  padding: 8px 8px 12px 8px;
  box-sizing: border-box;
}
.tournamets_history_player {
  display: grid;
  grid-template-columns: minmax(19px, auto) 24px 1fr;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
  grid-template-areas:
  'place avatar name'
  'place avatar results';
}
.tournamets_history_player_place {
  grid-area: place;
  font-weight: 600;
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournamets_history_player_avatar {
  grid-area: avatar;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tournamets_history_player_name {
  grid-area: name;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  word-break: break-all;
}

/* ========================================================================= */

.game_content_block.hero_rent_page  {
  align-self: start;
  height: 100%;
  padding-bottom: 120px;
  box-sizing: border-box;
  background-image: url(/app/images/nft_page_fon2.jpg);
  background-size: contain;
  grid-template-rows: auto auto auto 1fr;
}
.nft_rent_header_balance {
  width: 100%;
  max-width: 394px;
  position: absolute;
  left: 0px;
  top: 85px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px 16px;
  box-sizing: border-box;
  z-index: 10;
}
body[data-platform="android"] .nft_rent_header_balance {
  top: 85px;
}
body[data-platform="ios"] .nft_rent_header_balance {
  top: 95px;
}
.rent_user_tonbalance_btn {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  box-sizing: border-box;
  position: relative;
  padding: 0px 12px;
  cursor: pointer;
}
.rentpage_user_tonbalance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.rent_user_tonbalance_btn.hidden {
  display: none;
}
.rent_user_tonbalance_btn .output {
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #F86060;
}
.rentpage_tonbalance_btn_list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
}
.rentpage_user_toninrent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.rent_user_tonbalance_btn svg.clock_icon {
  width: 16px;
  height: auto;
  stroke: none;
  fill: #0089D0;
  margin-right: 4px;
}
.rent_user_tonbalance_btn .label {
  font-weight: 400;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #B2B2B2;
}
.nft_rent_header_balance .user_tonbalance {
  margin-right: 5px;
}
.rent_user_tonbalance_btn::before {
  position: absolute;
  content: '';
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #060C15;
  border-radius: 20px;
  z-index: -2;
}
.rent_user_tonbalance_btn::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 20px;
  z-index: -3;
}
.rent_user_tonbalance_btn img {
  width: 16px;
  height: auto;
  margin-right: 4px;
}


.rent_page_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 0px 16px;
}
.rent_page_head_title {
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.start_rent_application_btn {
  position: relative;
  height: 32px;
  display: grid;
  align-items: center;
  grid-template-columns: 24px 1fr;
  grid-column-gap: 8px;
  padding: 0px 12px;
  box-sizing: border-box;
  z-index: 2;
  text-decoration: none;
  cursor: pointer;
}
.start_rent_application_btn_text {
  justify-self: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
}
.start_rent_application_btn::before {
  position: absolute;
  content: '';
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #060C15;
  border-radius: 20px;
  z-index: -2;
}
.start_rent_application_btn::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 20px;
  z-index: -3;
}

.rent_page_menu_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  padding: 16px 16px 8px 16px;
  box-sizing: border-box;
}
.rent_page_menu {
  justify-self: center;
  display: grid;
  grid-template-columns: auto auto;
}
.rent_page_menu_list_toggle_btn {
  height: 24px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  border-radius: 17px;
  padding: 0px 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.rent_page_menu_list_toggle_btn.active {
  color: #ffffff;
  background-color: #474747;
}
.rent_page_menu_list_toggle_btn svg {
  width: 20px;
  height: auto;
  margin-right: 4px;
}

.rent_page_hero_lists_wrapper {
  background-color: #15171A;
  border-radius: 35px;
  padding: 12px 16px 12px 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 100% 100%;
  align-items: start;
  position: relative;
  overflow: hidden;
}
.rent_page_hero_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  transition: 0.5s;
}
.rent_page_hero_list.available {
  transform: translate(calc(-100% - 16px), 0px);
}
.rent_page_hero_list.available.active {
  transform: translate(0%, 0px);
}
.rent_page_hero_list.for_rent {
  transform: translate(16px, 0px);
}
.rent_page_hero_list.for_rent.active {
  transform: translate(-100%, 0px);
}

.rent_hero_card {
  border-radius: 10px;
  box-sizing: border-box;
  position: relative;
}
.rent_hero_card::before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #121417;
  z-index: -1;
  pointer-events: none;
  border-radius: 10px;
}
.rent_hero_card.inrent::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 1;
  border-top: 1px solid var(--rare-color-f);
  border-right: 1px solid var(--rare-color-f);
  border-bottom: 1px solid var(--rare-color-s);
  border-left: 1px solid var(--rare-color-s);
  pointer-events: none;
}
.rent_hero_card_image_wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  position: relative;
}
.rent_hero_card_image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 10px;
}
.rent_hero_card_info {
  padding: 5px 5px 10px 5px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 4px;
}
.rent_hero_card_info_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rent_hero_card_info_row .label {
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #B2B2B2;
}
.rent_hero_card_info_row .value {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.rent_hero_card_info_row .value.level img {
  width: 14px;
  height: auto;
  margin-right: 4px;
  margin-bottom: 2px;
}
.rent_hero_card_info_row .value.power svg {
  width: 13px;
  height: auto;
  margin-right: 4px;
  fill: #ffffff;
  stroke: none;
  margin-bottom: 1px;
}
.rent_hero_card_info_row .value.ton_price img {
  width: 14px;
  height: auto;
  margin-right: 4px;
  margin-bottom: 1px;
}
.rent_hero_card_time {
  margin-top: 5px;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.nft_rentout_container {
  padding-bottom: 45px;
  box-sizing: border-box;
}
.nft_rentout_curtain_title {
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  color: #FFFFFF;
  margin-bottom: 20px;
  text-align: center;
}
.nft_rent_out_heros_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 9px;
}
.nft_rent_out_nohero_text_block {
  grid-column: 1/4;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
  justify-items: center;
  margin-top: 11px;
}
.nft_rent_out_nohero_title {
  font-weight: 600;
  font-size: 20px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.nft_rent_out_nohero_text {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.nft_rentout_hero_inform_container {
  display: grid;
  grid-template-columns: 113px 1fr;
  grid-column-gap: 8px;
  margin-bottom: 20px;
}
.nft_rentout_hero_inform_container .itemslist_grid_item {

}
.nft_rentout_hero_info_block {

}
.nft_rentout_hero_info_hero_name {
  margin-top: 3px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.nft_rentout_hero_info_hero_number {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 11px;
  line-height: 11px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
  margin-bottom: 12px;
}
.nft_rentout_hero_info_hero_number .value {
  color: #ffffff;
  margin-left: 4px;
}
.nft_rentout_hero_info_text {
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -0.32px;
  color: #78797D;
}

.nft_rentout_price_container {
  margin-bottom: 23px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 21px;
  grid-template-areas:
  'price get'
  'comission comission';
}
.nft_rentout_price_block {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 8px;
}
.nft_rentout_price_block.price {
  grid-area: price;
}
.nft_rentout_price_block.get {
  grid-area: get;
}
.nft_rentout_price_block .label {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #78797D;
}
.nft_rentout_price_block .label img.ton_icon {
  width: 15px;
  height: auto;
  margin-left: 4px;
}
.nft_rentout_price_input {
  width: 100%;
  height: 32px;
  background-color: #0D0D0D;
  border: 1px solid #333333;
  box-sizing: border-box;
  padding: 0px 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #ffffff;
  border-radius: 8px;
}
.nft_rentout_price_input::placeholder {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #4D4D4D;
}
.nft_rentout_price_input:focus {
  outline: none;
  border: 1px solid #57FFE3;
}
.nft_rentout_price_comission {
  grid-area: comission;
  font-weight: 600;
  font-size: 11px;
  line-height: 11px;
  letter-spacing: -0.32px;
  color: #78797D;
}

.nft_rent_rules {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: -0.32px;
  color: #78797D;
  margin-bottom: 40px;
}
.nft_rent_rules .title {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #FFFFFF;
  margin-bottom: 16px;
}
.nft_rent_rules ul {
  margin: 0px;
  padding: 0px;
  padding-left: 20px;
  box-sizing: border-box;
}
.nft_rent_rules li {
  margin: 0px;
  margin-bottom: 12px;
}
.go_nft_rentout_btn {
  height: 50px;
  border-radius: 25px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.go_nft_rentout_btn.active {
  background-color: #3D7CCF;
}
.rent_page_hero_list .uploading_block {
  grid-column: 1 / 3;
  height: 160px;
  --spinner-height: calc(100% - 40px);
  position: relative;
}
.nft_hero_win_rent_price {
  position: absolute;
  left: 50%;
  bottom: 0px;
  background: #24272C;
  border-radius: 15px;
  height: 35px;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  box-sizing: border-box;
  z-index: 5;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #B2B2B2;
  transform: translate(-50%, 50%);
  white-space: nowrap;
}
.nft_hero_win_rent_price .price {
  color: #ffffff;
}
.nft_hero_win_rent_price img {
  width: 14px;
  height: auto;
  margin-left: 8px;
  margin-right: 2px;
}

.nft_herowin_rent_actions {
  margin: 28px 0px;
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
}
.herowin_rent_action_btn {
  height: 50px;
  border-radius: 20px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.herowin_rent_action_btn.active {
  background-color: #3D7CCF;
}
.herowin_rent_action_btn svg.ton_circle_icon {
  width: 22px;
  height: auto;
  stroke: none;
  fill: #ffffff;
  margin-left: 12px;
  margin-bottom: 2px;
}
.herowin_rent_action_btn span {
  margin-left: 5px;
}

/* ========================================================================= */

.tonaccrual_alert_window {
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000000;
}
.tonaccrual_alert_placeholder {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 35px;
  background-color: rgba(0,0,0,0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: -1;
}
.tonaccrual_alert_container {
  position: absolute;
  left: 50%;
  width: 100%;
  max-width: calc(394px - 32px);
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 37px 16px 17px 16px;
  box-sizing: border-box;
  animation: 0.25s alert_window_animate ease-out;
  z-index: 2;
}
@keyframes alert_window_animate {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
.tonaccrual_alert_container::before {
  position: absolute;
  content: '';
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #060C15;
  border-radius: 20px;
  z-index: -1;
}
.tonaccrual_alert_container::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #3D7CCF 0%, #57FFE3 100%);
  border-radius: 20px;
  z-index: -2;
}
.tonaccrual_alert_cont {
  width: 100%;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.tonaccrual_alert_close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tonaccrual_alert_close svg {
  width: 12px;
  height: auto;
  fill: none;
  stroke: #FF2727;
}
.tonaccrual_alert_container.info {
  overflow: hidden;
}
.tonaccrual_alert_container.info::before {
  background-image: url(/app/images/background/fon_main.jpg);
  background-size: cover;
  background-position: top;
  filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.tonaccrual_alert_cont.info {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 28px;
  justify-items: center;
}
.tonaccrual_alert_cont.info .text {
  font-weight: 500;
  font-size: 14px;
  line-height: 120%;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.tonaccrual_alert_cont.info .text:last-child {
  margin-bottom: 0px;
}
.tonaccrual_alert_cont.info .title {
  font-weight: 800;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.tonaccrual_alert_cont.info .title:last-child {
  margin-bottom: 0px;
}
.tonaccrual_alert_cont.info .title.blue {
  font-weight: 800;
  font-size: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  background: linear-gradient(89.18deg, #3D7CCF 7.85%, #57FFE3 95.18%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.tonaccrual_alert_tonbalance {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 24px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tonaccrual_alert_tonbalance img {
  width: 24px;
  height: auto;
  margin-right: 8px;
}
.tonaccrual_alert_cont_block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tonaccrual_accept_btn {
  height: 34px;
  border-radius: 20px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.tonaccrual_accept_btn.empty {
  background-color: inherit;
}
.tonaccrual_accept_btn.active {
  background-color: #3D7CCF;
}
.tonaccrual_accept_btn span.placeholder {
  width: 1px;
  height: 18px;
  background-color: #ffffff;
  margin: 0px 6px;
}
.tonaccrual_accept_btn svg.ton_svg_icon {
  width: 14px;
  height: auto;
  stroke: none;
  fill: #ffffff;
  margin-right: 5px;
}
.tonaccrual_alert_container .tonaccrual_accept_btn {
  width: 100%;
}
.tonaccrual_accept_btn.alert_inf_btn {
  width: auto;
  padding: 0px 48px;
}

/* ========================================================================= */

.tournaments_victories_page {
  width: 100%;
  max-width: 394px;
  padding: 0px 16px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.tournaments_victories_page::-webkit-scrollbar {
  display: none;
}
.tournaments_victories_page_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.tournaments_victories_page_title {
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournaments_victories_page_head_btn {
  height: 31px;
  display: flex;
  align-items: center;
  background: rgba(13, 13, 13, 0.9);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.32px;
  color: #059297;
  padding: 0px 10px 0px 8px;
  box-sizing: border-box;
}
.tournaments_victories_page_head_btn svg {
  width: 14px;
  fill: none;
  stroke: #059297;
  transform: rotate(90deg) translate(-2px, 0px);
}
#tournaments_victories_calendar {
  z-index: 20;
}
.tournaments_victories_list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 16px;
}
.tournaments_victories_list .uploading_block {
  height: 100px;
  --spinner-height: 100%;
  position: relative;
  margin-top: 50px;
}

.tournament_victory_item {
  background-color: #0D0D0D;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 16px 12px;
  box-sizing: border-box;
}
.tournament_victory_head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
  'name place'
  'date place';
  align-items: center;
  justify-items: start;
  grid-column-gap: 12px;
  grid-row-gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #333333;
  box-sizing: border-box;
}
.victory_tournament_name {
  grid-area: name;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.victory_tournament_date {
  grid-area: date;
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #78797D;
}
.victory_tournament_place_block {
  grid-area: place;
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  box-sizing: border-box;
}
.victory_tournament_place {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 2px;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #B9B9B9;
  margin-right: 4px;
}
.victory_tournament_place svg {
  width: 7px;
  height: auto;
  fill: #575757;
}
.victory_tournament_place.gold svg {
  fill: #B7A500;
}
.victory_tournament_place.silver svg {
  fill: #B9B9B9;
}
.victory_tournament_place.bronze svg {
  fill: #CD7F32;
}
.victory_tournament_place svg:nth-child(2){
  transform: scale(-1, 1);
}
.victory_tournament_place_label {
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}

.tournament_victory_conditions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.tournament_victory_cond_label {

}
.tournament_victory_cond_val .coin_icon {
  width: 15px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -3px;
}
.tournament_victory_cond_val svg.chest_icon {
  width: 16px;
  height: auto;
  margin-right: 1px;
  margin-bottom: -4px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.elixir_icon {
  width: 14px;
  height: auto;
  margin-right: 1px;
  margin-bottom: -5px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.defence_icon {
  width: 16px;
  height: auto;
  margin-right: 1px;
  margin-bottom: -4px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.friends_icon {
  width: 16px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -4px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.seashell_icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -4px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.fire_wall_icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -7px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.gamepad_icon {
  width: 20px;
  height: auto;
  margin-right: 5px;
  fill: rgba(185, 185, 185, 1);
}
.tournament_victory_cond_val svg.power_icon {
  width: 14px;
  height: auto;
  margin-right: 5px;
  margin-top: -3px;
}
.tournament_victory_cond_val svg.head_icon {
  width: 14px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -4px;
  fill: #ffffff;
}
.tournament_victory_cond_val svg.upp_icon {
  width: 10px;
  height: auto;
  margin-right: 5px;
  margin-bottom: -5px;
}
.tournament_victory_title {
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.tournament_victory_awards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  border-bottom: 1px solid #333333;
  box-sizing: border-box;
  padding-bottom: 16px;
  margin-bottom: 8px;
}
.tournament_victory_image_wrapper {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tournament_victory_image_wrapper.hero,
.tournament_victory_image_wrapper.rune {
  padding: 2px;
}
.tournament_victory_image_wrapper::before,
.tournament_victory_image_wrapper::after {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  border-top: 1px solid var(--rare-color-f);
  border-right: 1px solid var(--rare-color-f);
  border-bottom: 1px solid var(--rare-color-s);
  border-left: 1px solid var(--rare-color-s);
}
.tournament_victory_image_wrapper::after {
  z-index: 3;
}
.tournament_victory_image_wrapper::before {
  z-index: 2;
  filter: blur(2.5px);
}
.tournament_victory_image_wrapper .rune_container.numcell6,
.tournament_victory_image_wrapper .rune_container.numcell4 {
  --cell-size: 10px;
  --border-size: 4px;
  --body-padding: 1px;
  --body-gap: 1px;
  --cell-img-height: calc(100% - 1px);
  --cell-svg-height: calc(100% - 1px);
  --cell-radius: 0px;
  --artifact-size: 8px;
  --artifact-border-size: 1px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 0px);
  --artifact-cell-radius: 0px;
}
.tournament_victory_image_wrapper .rune_container.numcell2 {
  --cell-size: 14px;
  --border-size: 4px;
  --body-padding: 1px;
  --body-gap: 1px;
  --cell-img-height: calc(100% - 1px);
  --cell-svg-height: calc(100% - 1px);
  --cell-radius: 0px;
  --artifact-size: 9px;
  --artifact-border-size: 1px;
  --artifact-img-height: 100%;
  --artifact-svg-height: calc(100% - 0px);
  --artifact-cell-radius: 0px;
}
.tournament_victory_image_wrapper .rune_container.numcell6 .rune_body::after,
.tournament_victory_image_wrapper .rune_container.numcell4  .rune_body::after {
  left: -1px;
  top: -1px;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
}
.tournament_victory_image {
  width: auto;
  height: 100%;
}
.tournament_victory_award_count {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  z-index: 10;
}
.tournament_victory_award_name {
  font-weight: 600;
  font-size: 10px;
  line-height: 13px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_victory_money {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_victory_money img {
  width: 20px;
  height: auto;
  margin-right: 4px;
}
.tournament_victory_bilets {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.tournament_victory_bilets svg {
  width: 16px;
  height: auto;
  fill: #57FFE3;
  margin-right: 4px;
}
.tournament_victory_description {
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: -0.32px;
  color: #868686;
}
.no_tournaments_message{
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-top: 30px;
}



/* ========================================================================= */
/* ========================================================================= */
/* ========================================================================= */

.custom_calendar {
  position: relative;
}
.cc_date_input {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #0D0D0D;
  border: 1px solid #333333;
  box-sizing: border-box;
  border-radius: 8px;
}
.cc_date_input .icon_block {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translate(0px, -50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc_date_input .icon_block .calendar_icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc_date_input .icon_block .calendar_icon svg {
  width: 13px;
  height: auto;
  stroke: none;
  fill: #FFFFFF;
}
.cc_date_input .icon_block .clear_btn {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
}
.cc_date_input .icon_block .clear_btn svg {
  width: 11px;
  height: auto;
  stroke: none;
  fill: #ffffff;
}
.custom_calendar.active .cc_date_input .icon_block .calendar_icon {
  opacity: 0;
  visibility: hidden;
}
.custom_calendar.active .cc_date_input .icon_block .clear_btn {
  opacity: 1;
  visibility: visible;
}
.cc_date_input input {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0);
  border: 0px;
  border-radius: 8px;
  padding: 0px 32px 0px 8px;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #868686;
  box-sizing: border-box;
  cursor: pointer;
}
.custom_calendar.active .cc_date_input input {
  color: #FFFFFF;
}
.cc_date_input input:focus {
  outline: none;
}
.cc_date_input .input_placeholder {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translate(0px, -50%);
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.32px;
  color: #868686;
  pointer-events: none;
}
.cc_date_input input:not(:placeholder-shown) ~ .input_placeholder {
  opacity: 0;
}
.cc_date_selector_wrapper {
  position: absolute;
  left: 0px;
  top: calc(100% + 4px);
  width: 100%;
  height: 0px;
  overflow: hidden;
  z-index: 2;
}
.custom_calendar.show-selector .cc_date_selector_wrapper {

}
.cc_date_selector_container {
  box-sizing: border-box;
  border-radius: 8px;
  background-color: #0D0D0D;
  border: 1px solid #333333;
  padding: 16px 8px 16px 8px;
}
.cc_date_selector_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px solid #333333;
  padding: 0px 4px 12px 4px;
  box-sizing: border-box;
}
.cc_date_toggle_date_block {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 8px;
  align-items: center;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.cc_date_toggle_date_block.months {
  grid-template-columns: auto 80px auto;
}
.cc_date_selector_head .arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cc_date_selector_head .arrow svg {
  width: 11px;
  height: auto;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5;
}
.cc_date_selector_head .arrow.disabled svg {
  stroke: #868686;
}
.cc_date_selector_head .arrow.prev svg {
  transform: rotate(90deg);
}
.cc_date_selector_head .arrow.next svg {
  transform: rotate(-90deg);
}
.cc_date_selector_head .value {
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  text-align: center;
}
.cc_date_selector_body {
  margin-bottom: 12px;
}
.cc_date_weekdays {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.cc_date_weekdays .weekday {
  width: 34px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 4px;
  box-sizing: border-box;
}
.cc_date_days_grid {
  display: grid;
  grid-template-columns: repeat(6, auto 1fr) 1fr;
  justify-content: space-between;
  align-items: center;
}
.cc_date_days_grid .day {
  width: 34px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: #868686;
  font-feature-settings: 'tnum' on, 'lnum' on;
  cursor: pointer;
  position: relative;
  padding: 4px;
  box-sizing: border-box;
  z-index: 1;
}
.cc_date_days_grid .day.selected {
  color: #ffffff;
}
.cc_date_days_grid .day.selected::after {
  position: absolute;
  content: '';
  left: 0px;
  top: 2px;
  width: 100%;
  height: calc(100% - 4px);
  background-color: #093B3C;
  z-index: -1;
}
.cc_date_days_grid .day.selected.start-week-day:not(.selected-start, .selected-end)::after {
  border-radius: 4px 0px 0px 4px;
}
.cc_date_days_grid .day.selected.end-week-day:not(.selected-start, .selected-end)::after {
  border-radius: 0px 4px 4px 0px;
}
.cc_date_days_grid .day.selected.selected-start::after {
  border-radius: 12px 0px 0px 12px;
}
.cc_date_days_grid .day.selected.selected-end::after {
  border-radius: 0px 12px 12px 0px;
}
.cc_date_days_grid .day.selected.selected-start.selected-end::after {
  border-radius: 12px;
}
.cc_date_days_grid .placeholder {
  height: calc(100% - 4px);
}
.cc_date_days_grid .day.selected:not(.selected-end) + .placeholder {
  background-color: #093B3C;
}
.cc_date_days_grid .day.unavailable {
  color: #4b4b4b;
  cursor: default;
}
.cc_date_change_btn {
  width: 100%;
  height: 35px;
  background-color: #444548;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
}
.cc_date_change_btn.active {
  background-color: #3D7CCF;
}

/* ========================================================================= */
/* ========================================================================= */
/* ========================================================================= */

.wallet_disconnect_confirm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wallet_disconnect_confirm .title {
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #FFFFFF;
  margin-bottom: 12px;
}
.wallet_disconnect_confirm .text {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #C03232;
  margin-bottom: 12px;
}
.wallet_disconnect_address {
  width: 100%;
  height: 40px;
  background-color: #000000;
  border: 1px solid #008287;
  box-sizing: border-box;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: -0.32px;
  color: #7F7F7F;
}
.wallet_disconnect_address:focus {
  outline: none;
  border: 1px solid #008287;
}






/* ========================================================================= */