:root
{
  --app-bg-color: #747474;
  --gradient-main: linear-gradient(180deg,rgba(233, 199, 123, 1) 0%, rgba(151, 104, 51, 1) 100%);
  --tile-background: rgba(0, 0, 0, 0.6);
  --popup-page-background: #747474;
  --dark-background: #1C2033;

  --annoce-bg-color: #2C303EF0;

  --base-text-color: #ffffff;
  --hint-color: #000000;
  --alert-color: #ff0000;
  --alert-border-color: #ff333350;
  --success-color: #55DD55;

  --gold-color: #CCA933;
  --light-color: #EBF0F3;
  --gold-color-light: #CCA933;
  --gold-border-light: #CCA93350;

  --light-buttons-bg: #6273D9;
  --light-buttons-text: #ffffff;

  --gold-buttons-bg: #F4D15D;
  --gold-buttons-text: #1C2033;

  --title-font-weight: bold;

  --disable-background: #bebebe;
  --disable-color: #eee;
}

body, html
{
  margin: 0px;
  padding: 0px;

  color: var(--base-text-color);

  font-family: "Inter", sans-serif;
  font-size: 14px;

  box-sizing: border-box;

  background: var(--app-bg-color) !important;

  border: none!important;
}

body .text-left
{
  text-align: left;
}

body .text-right
{
  text-align: right;
}

body .empty
{
  padding: 10px 0px;

  text-align: center;
}

@media (min-width: 290px)
{
  body, html
  {
    font-size: 11px;
  }
  .slot_image, .slot_image_active {
    width: 8vw!important;
    height: auto;
  }
}

@media (min-width: 320px)
{
  body, html
  {
    font-size: 14px;
  }
  .slot_image, .slot_image_active {
    width: 12vw!important;
    height: auto;
  }
}

@media (min-width: 420px)
{
  body, html
  {
    font-size: 16px;
  }
  .slot_image, .slot_image_active {
    width: 12vw!important;
    height: auto;
  }
}

body
{
  max-width: 100vw;

  position: relative;

  overflow: hidden;
}

body a
{
  color: var(--base-text-color);

  text-decoration: none;

  outline: none;

  cursor: default;
}


/* elements */

body .title
{
  color: #fff;
  background: none !important;
  /* color: var(--base-text-color); */
  font-size: 120%;
  font-weight: bold;
}

body .text
{
  color: var(--base-text-color);
  font-size: 100%;
}

body .text .coin
{
  display1: inline-block;
  position: relative;
  margin-bottom: -2px;

  width: 15px;
  height: 15px;

  border-radius: 11px;

  padding: 0px 2px;

  box-shadow: 0px 0px 3px rgb(0 0 0 / 30%);
}

body .coins
{
  display: flex;
  align-items: center;
}

body .coins svg,
body .coins img
{
  width: 20px;
  height: 20px;

  margin: 0px 5px;
}

body .hint
{
  color: var(--hint-color);
  font-size: 95%;

  text-align: center;
}

body .hint
{
  display: flex;
  align-items: center;
  /* justify-content: center; */

  margin: 1vw 6vw;
}

body .hint svg,
body .hint img
{
  width: 5vw;
  height: 5vw;
}

body .d-flex
{
  display: flex;

  align-items: center;
  justify-content: center;

  line-height: 1;
}

body .d-flex.gap-5
{
  gap: 5px;
}

/* buttons */

body .buttons
{
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;
}

body .buttons.top-control
{
  margin-bottom: 10px;

  justify-content: end;
}

body .button
{
  height: 8vw;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;

  gap: 1.5vw;

  color: var(--light-buttons-text);
  font-size: 95%;

  padding: 0.2vw 2.5vw;

  border-radius: 2vw;
  /* border: 1px solid var(--gold-border-light); */

  text-align: center;
  text-decoration: none !important;

  background: var(--light-buttons-bg);

  box-sizing: border-box;
}

body .button.icon-style
{
  padding: 4.5vw 1.5vw;

  background: var(--light-color)!important;
}

body .button.wide
{
  width: 100%;
  /* max-width: 300px; */
}

body .button.gold
{
  color: var(--gold-buttons-text);

  background: var(--gold-buttons-bg);
}

body .button.telegram
{
  background-color: #1c93e3!important;

  color: #fff;
}

body .button svg,
body .button img
{
  width: 4.5vw;
  height: 4.5vw;

  vertical-align: middle;
}

body .button.icon-style svg,
body .button.icon-style img
{
  height: 8vw;
  width: 8vw;
}

body .button.light
{
  color: var(--popup-page-background);

  /* border: 1px solid var(--gold-border-light); */
  background: var(--light-buttons-bg);
}

body .button.link
{
  width: auto !important;
}

body .button.link:has(img),
body .button.link:has(svg)
{
  padding1: 5px 10px !important;
}


body .button.square
{
  width: 9vw;
  padding: 0px;

}
body .button.square svg,
body .button.square img
{
  height: 4vw;
}


body .button.middle
{
  height: 7vw;
  font-size: 95%;

  padding: 0vw 2.5vw;
}

body .button.middle.light
{
  color: var(--popup-page-background);

  /* border: 1px solid var(--popup-page-background); */
  background: var(--gold-color) !important;
}

body .button.disable
{
  color: var(--disable-color)!important;

  background: var(--disable-background)!important;
}

body .small-button,
body .button.small
{
  height: 7vw;
  font-size: 95%;

  border-radius: 1.8vw;

  margin-left: 0.5vw;
  margin-right: 0.5vw;
}

body .button.small svg,
body .button.small img
{
  width: 3.5vw;
  height: 3.5vw;
}

body .button.small.square
{
  width: 7vw;
}



body .buttons .waiting
{
  font-size: 120%;
}


body .page .element.alert
{
  color: var(--alert-color);
}
body .page .element.alert .image img
{
  border-color: var(--alert-border-color);
}



body input, body textarea
{
  color: var(--base-text-color);
  background: #EBF0F3;

  border: 1px solid #6273D9!important;
  /* color: var(--base-text-color);
  background: var(--tile-background);

  border: 1px solid var(--gold-border-light); */
}
body input:focus-visible{
  border: 1px solid #6273D9!important;
}

body input
{
  height: 6vw;

  padding: 3px 5px;

  font-size: 100%;

  border-radius: 10px;

  text-align: center;
}

body .detail input
{
  text-align: left;
}

body .form
{
  margin: 10px 0px;
}

body .form.page-block
{
  margin: 10px 5vw;
}

body .form .row
{
  display: flex;
  align-items: center;

  justify-content: center;

  gap: 1.5vw;

  padding: 1.5vw 0px;
}

body .form .row:has(input[type=radio])
{
  justify-content1: left;
}

body .form .row .name
{
  width: 35vw;
}

body .form .row .val
{
  width: 100%;
}

body .form .row .input-group
{
  display: flex;
  align-items: center;

  justify-content: center;

  gap: 0.5vw;
}

body .form .row .input-group.column
{
  flex-direction: column;
}

body .form .row .input-group.w-100
{
  width: 100%;
}

body .form input
{
  width: 20vw;
}

body .form input[type=radio]
{
  width: auto;
  height: auto;

  padding: 0px;
  margin: 0px;
}

body .form input.link, body .form .row .val input.w-100
{
  width: calc(100% - 14px);
}

body .form input.phone
{
  width: 60vw;
}

body .form input.count
{
  width: 10vw;
}

body .form svg.coin, body .form img.coin
{
  width: 22px;
  height: 22px;
}

body .form .total
{
  font-size: 120%;
  font-weight: bold;

  text-decoration: none !important;
}

body .form .alert
{
  color: var(--alert-color);
}

body .form .value-control
{
  display: flex;

  gap: 5px;

  align-items: center;
}

body .form .value-control .value-place
{
  display: flex;

  gap: 5px;

  align-items: center;
}

body .form .value-control a
{
  display: flex;

  width: 18px;
  height: 18px;

  align-items: center;
  justify-content: center;

  background: var(--app-bg-color);

  border-radius: 1vw;
}

body .form .value-control input
{
  width: 35px;

  padding: 0px;

  border: none;

  background: none;

  outline: none;
}

/* Loader */

body .scene.loaded, body .qr-place.loaded
{
  display: block;
}

body .thumbnail-place
{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-image: url('/src/logoThumb2.jpg') !important;
  background-size: cover;
  background-position: center;
  /* margin: 0px 41px; */
  background-repeat: no-repeat !important;
  z-index: 9999;
/*
  background-image1: url("/src/thumbnail1.jpg");
  background-size1: cover; */
}

body .loading
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

body .loading img
{
   width: 100vw;
   display: none;
   /* margin-top: 15vh; */
}

body .tip
{
  height: calc(50vh - 140px);
  text-align: center;
}

body .tip img
{
   max-width: 90vw;
}

body .thumbnail-place.loaded, body .hide-till-lang
{
  display: none;
}

body .load-screen-title
{
  font-size: 120%;

  text-align: center;

   margin-bottom: 2vw;
}

body .load-screen-text
{
  position: fixed;
  bottom: 150px;

  width: 85%;

  display: flex;
  padding: 0px 10px;
}

body .load-screen-text ul li
{
  list-style-type: none;

  font-size: 90%;

  padding: 3px 0px;
}




body .qr-place
{
  display: none;

  text-align: center;

  color: #FFFFFF;
}

body .overlay
{
  display: none;

  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  z-index: 20;
}

body .overlay.alert-style
{
  z-index: 21;
}

body .annonce
{
  display: none;

  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;
  height: 100%;

  background: var(--annoce-bg-color);

  z-index: 1000;
}

body .annonce .annonce-content
{
  padding: 25% 15%;
}

body .annonce .annonce-content .title
{
  font-size: 110%;
  font-weight: bold;
}


.scroll-container {
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;

  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* scene layout */
body .scene
{
  position: relative;

  display: none;

  max-width: 600px;
  /* min-height: 100vh; */

  margin: 0px auto 0px auto;
  padding: 60px 0px 90px 0px;

  color: #fff;
}

body .scene .scene-container
{
  width: calc(100% - 80px);
  min-width: 320px;

  margin-left: auto;
  margin-right: auto;
}

body .main-page
{
  min-height: 100vh;

  color: var(--base-text-color);
}



/* pages layout */

body .bottom-slide
{
  position: fixed;

  left: -2px;

  width: calc(100% + 1px);

  overflow: hidden;

  border-radius: 40px 40px 0px 0px;

  border-top: 1px solid var(--gold-color-light);
  border-left: 1px solid var(--gold-color-light);
  border-right: 1px solid var(--gold-color-light);

  box-shadow1: 0px 1px 9px rgb(255 234 177 / 70%);

  background: var(--popup-page-background);
}

body .bottom-slide .pages, body .bottom-slide .pages .pages-content
{
  height: 100%;
}

body .bottom-slide.open .pages
{
  padding-top: 15px;

  background: var(--popup-page-background);
}

body .bottom-slide .pages .pages-content
{
  overflow-y: auto;
}

body .bottom-slide .pages .pages-content .page
{
  min-height: calc(100% - 125px);

  padding-bottom: 125px;

  background: var(--popup-page-background);
}


body .pages-data
{
  display: none;

  position: relative;

  overflow: hidden;
}

body .pages-data.loaded
{
  display: block;
}

body .page
{
  display: none;

  /* padding-top: 2vw; */

  color: var(--base-text-color);
}

body .page.active
{
  display: block;
}

body .page .page-title
{
  font-size: 125%;
  color: #fff;
  font-weight: var(--title-font-weight);

  padding: 15px 15px 10px 15px;

  text-align: center;
}

body .page .page-title1
{
  font-size: 110%;
  font-weight: var(--title-font-weight);

  padding: 1vw 4vw 1vw 4vw;

  text-align: center;
}

body .page .page-title2
{
  display: flex;

  gap: 2vw;

  align-items: center;
  justify-content: center;

  font-size: 100%;
  font-weight: var(--title-font-weight);

  padding: 1vw 4vw 1vw 4vw;

  text-align: center;
}

body .page .page-title2 svg,
body .page .page-title2 img
{
  width: 6vw;
  height: 6vw;
}

body .page .page-title3
{
  font-size: 95%;
  font-weight: var(--title-font-weight);

  padding: 1vw 4vw 1vw 4vw;

  text-align: center;
}

body .page .page-image
{
  text-align: center;
  padding: 0px 5px 10px 0px;

  height: 25vw;
}
body .page .page-image img,
body .page .page-image svg
{
  max-height: 25vw;
}

body .page .page-image.big-round svg,
body .page .page-image.big-round img
{
  width: 25vw;
  height: 25vw;
  max-height: none;


  border-radius: 15vw;

  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.3);
}

body .page .page-text
{
  font-size: 90%;

  padding: 0px 15px 10px 15px;

  text-align: center;
}
body .page .page-text-warning
{
  font-size: 100%;
  font-weight: bold;
  padding: 0px 15px 10px 15px;

  text-align: center;
}


body .page .page-block
{
  margin: 0vw 0vw 4vw 0vw;
}

body .page .page-block .page-block
{
  padding-top: 4vw;
}

body .page .page-block.middle
{
  margin-left: 4vw;
  margin-right: 4vw;
}


body .page .page-block a
{
  /* text-decoration: underline; */
}

body .page .top-filters
{
  display: flex;

  justify-content: space-between;

  gap: 5vw;
}


body .page .steps ul,
body .page .steps ol
{
  margin: 1vw 6vw;
  padding: 0px;
}

body .page .steps li
{
  padding: 2.5vw 0vw;
}

body .page .content
{
  padding: 15vw 10px 30vw 10px;
}

body .page .content.hold
{
  padding: 2vw 25px;
}
body .page .content.hold2
{
  padding: 0px
}

body .page .content .top-tabs-menu
{
  padding-top: 3vw;
  margin-bottom: 0px;
}

body .page .content .title
{
  font-size: 110%;
  font-weight: var(--title-font-weight);

  margin-bottom1: 10px;
}

body .page .content .page_text
{
  font-size: 90%;

  text-align: center;

  margin: 0px 0px 20px 0px;
}

body .page .tabs
{
  margin: 15px 10px 10px 10px;
}

body .page .tabs .page-tab, body .page .page-tab-group
{
  display: none;
}

body .page .tabs .page-tab.active, body .page .page-tab-group.active
{
  display: block;
}

body .page .tabs .page-tab
{
  text-align: center;
}


/* clist */

body .page .list
{
  display: flex;

  gap: 2vw;

  flex-direction: column;

  margin: 10px 0px 20px 0px;
}

body .page .list .element
{
  display: flex;

  /* gap: 2.5vw; */

  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  padding: 9px 9px;

  border-radius: 10px;
  background: var(--tile-background);
}

body .page .list .element.disable
{
  filter: grayscale(1);
  opacity: 0.5;
}

body .page .list .element .title
{
  width: 100%;

  font-size: 100%;
  font-weight: normal;
  margin: 0px;
}

body .page .list .element .avatar
{
  width: 8vw;
  height: 8vw;
}
body .page .list .element .avatar img
{
  width: 8vw;
  height: 8vw;

  border-radius: 4px;
}


body .page .list .element .id
{
  width: 5vw;
}

body .page .list .element .sum
{
  width: 20vw;
}

body .page .list .element .sum.flex
{
  display: flex;

  width: auto;

  gap: 1vw;

  align-items: center;
}

body .page .list .element .date
{
  width: 20vw;
}


body .page .list .element .hint
{
  width: 100%;

  font-size1: 100%;
  margin: 4px 0px 0px 0px;

  text-align: left;
}

body .page .list .element .hint.center
{
  text-align: center;
}

body .page .list .element .bottom_text
{
  font-size: 95%;
}

body .page .list .element .link
{
  color1: var(--hint-color);
  width: 90%;

  font-size: 82%;
  margin: 0px;

  overflow: hidden;
}

body .page .list .element .link span
{
  color: var(--base-text-color);
  font-size: 120%;
  display: block;

  margin-bottom: 3px;
}

body .page .list .element .link a
{
  display: block;
  color: var(--hint-color);
  text-decoration: none;
}


body .page .list .element textarea
{
  color: var(--base-text-color);

  width: 100%;
  font-size: 100%;

  border: none;
  background: var(--tile-background);
}

body .page .list .element .icon
{
  display: block;

  min-width: 10vw;
  height: 10vw;

  overflow: hidden;

  padding: 3px;

  line-height: 0px;

  border-radius: 8px;
  border1: 1px solid var(--gold-border-light);
}

body .page .list .element .icon img
{
  max-height: 100%;
}

body .page .list .element .main-info
{
  width: 100%;
}

body .page .content .list .element .coins
{
  display: flex;

  font-size: 100%;

  justify-content: right;
  align-items: center;
}

body .page .content .list .element .coins.prize
{
  font-size: 100%;
  font-weight: var(--title-font-weight);
}

body .page .content .list .element .coins a
{
  display: flex;

  align-items: center;
  text-decoration: none;
}

body .page .content .list .element .coins svg,
body .page .content .list .element .coins img
{
  width: 20px;
  height: 20px;

  margin: 0px 5px;
}

body .page .list .element .empty
{
  padding: 4vh 1vw;
}

/* cpoups */

body .popup
{
  position: fixed;

  bottom: -100vh;

  z-index: 21;

  width: 100vw;

  font-size: 90%;

  color: var(--base-color);

  box-sizing: border-box;

  overflow-x: hidden;
}

body .popup.alert-style
{
  display: none;

  position: absolute;

  top: 0px;
  bottom: inherit;

  width: 96vw;
  max-width: 400px;

  margin-left: 2vw;

  z-index: 21;
}

body .popup .popup-content
{
  position: relative;

  left: 0px;

  width: calc(100% + 0px);

  padding: 20px 20px 65px 20px;

  /* background: var(--popup-page-background); */

  border-top: 2px solid transparent;
  /* border-left: 2px solid transparent; */
  /* border-right: 2px solid transparent; */
  background: linear-gradient(#000, #000) padding-box, var(--gradient-main) border-box;

  border-radius: 40px 40px 0px 0px;

  box-sizing: border-box;

  box-shadow: 0px 1px 5px rgba(246, 190, 41, 0.4);
}

body .popup.alert-style .popup-content
{
  padding: 20px;

  border: 1px solid rgba(98, 115, 217, 1);

  border-radius: 40px;
}

body .popup .popup-content .popup-scroll
{
  max-height: calc(100vh - 290px);

  overflow-y: auto;
}

body .popup .popup-content .popup-block
{
  margin: 3vw 0vw 3vw 0vw;
}


body .popup .block
{
  margin: 0vw 0vw 5vw 0vw;
}
body .popup .block .buttons
{
  margin: 2vw 5vw;
}

body .popup .popup-block
{
  margin: 3vw 1.5vw;
}

body .popup .popup-block.middle
{
  margin-left: 4vw;
  margin-right: 4vw;
}

body .popup .popup-block a
{
  text-decoration: underline;
}


body .popup .share
{
  position: absolute;

  right: 15px;
  top: 15px;
}

body .popup  .title
{
  padding-bottom: 15px;
      font-size: 170%;
      text-align: center;
      color: #e9c77b;
}

body .popup .share + .title
{
  margin-left: 30px;
  margin-right: 30px;
}

body .popup .popup-content .text
{
  margin-top: 5px;
  margin-bottom: 5px;

  text-align: center;

  font-size: 105%;

  line-height: 1.3;
}

body .popup .popup-content .text ul,
body .popup .popup-content .text ol
{
  text-align: left;

  padding: 0px;

  margin: 1vw 0vw 1vw 0vw;
}

body .popup .popup-content .image
{
  min-height: 100px;

  margin-bottom: 10px;

  text-align: center;
}

body .popup .popup-content .image img
{
  width: 45vw;

  max-height: none;
}

body .popup .popup-content .image .qr
{
  display: flex;

  justify-content: center;
}

body .popup .popup-content .image .qr
{
  min-height: 32vw;
}

body .popup .popup-content .image .qr img,
body .popup .popup-content .image .qr canvas
{
  width: 28vw;
  height: 28vw;

  border-radius: 0px;

  border: 2vw solid #FFF;
}

body .popup .popup-content .input
{
  text-align: center;
}

body .popup .popup-content .input textarea
{
  width: 90%;
  height: 15vw;

  font-size: 100%;

  border-radius: 10px;
}

body .popup .popup-content .buttons1
{
  margin: 0px 10% 15px 10%;
}

body .popup .buttons,
body .popup .sub-buttons
{
  display: flex;
  gap: 10px;

  flex-direction: row;

  padding: 3vw 5vw 3vw 5vw;

  text-align: center;
}

body .popup .sub-buttons
{
  margin-top: 0px;
}

body .popup .button
{
  width: 100%;
  height: auto;
  padding: 10px 10px;
  /* font-size: 115%; */
  font-weight: 400;
}

body .popup .button.middle
{
  width: auto;
}

body .popup .button.small
{
  width: auto;
}

body .popup .popup-content .link_preview
{
  font-size: 100%;
}

body .popup .attach-file-place
{
}

body .popup .attach-file-place label
{
  display: flex;

  padding: 10px 15px;
  margin: 0px auto;

  background: var(--tile-background);

  border-radius: 10px;

  font-size: 115%;

  text-align: left;

  justify-content: space-between;
  align-items: center;

  line-height: 1.2;
}

body .popup .attach-file-place label svg
{
  width: 17px;
  height: 17px;

  margin-left: 2vw;
}

body .popup .days
{

}

body .popup .days .day
{
  display: inline-block;

  width: 75px;

  text-align: center;

  padding: 0px;

  border-radius: 15px;
  margin: 5px;

  overflow: hidden;

  border-width: 1px;
  border-style: solid;
  border-color: var(--gold-color);
}

body .popup .days .day .day-icon
{
  width: 100%;
  height: 70px;
}

body .popup .days .day .count
{
  font-size: 80%;
  color: var(--button-color);

  padding: 1px 3px 1px 3px;

  border-radius: 4px;

  background: #F6BE29;
}

body .popup .hint
{
  margin: 5px 30px;
}


body .popup .coins
{
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  text-align: center;

  font-size: 140%;
  font-weight: var(--title-font-weight);
}

body .popup .coins.small
{
  font-size: 100%;
  font-weight: normal;
}

body .popup .coins svg
{
  width: 22px;
  height: 22px;
}

body .popup .coins.small svg
{
  width: 16px;
  height: 16px;

  margin: 0;
}

/* cinfo */

body .info
{
  display: flex;

  gap: 10px;

  margin: 2vw 5vw;

  flex-direction: row;
  justify-content: center;
}

body .info .block
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vh;
  width: 100%;

  font-size: 100%;
  font-weight: normal;

  padding: 2vw;
  margin: 0px;

  border-radius: 10px;

  background: var(--tile-background);

  text-align: center;
}

body .info .block .hint
{
  padding: 0vw;
}

body .info .block svg,
body .info .block img
{
  width: 4.5vw;
  height: 4.5vw;
}



.d-none
{
  display: none;
}

.d-none-important
{
  display: none!important;
}

*[data-animation-type]
{
  position: relative;
}


/* ctiles */

body .page .content .tiles
{
  display: flex;

  gap: 10px;

  justify-content: flex-start;

  align-items: top;

  flex-wrap: wrap;
}

body .page .content .tiles .tile
{
  display: flex;
  justify-content: center;
  width: calc(50% - 30px);

  padding: 10px 12px;

  border-radius: 10px;

  background: var(--tile-background);
  /* border: 1px solid #6273D9; */
}

body .page .content .tiles .tile .coins
{
  display: flex;
  align-items: center;

  gap: 2px;

  font-weight: bold;
}

body .page .content .tiles .tile .coins svg
{
  width: 20px;
  height: 20px;

  margin-right: 3px;
}



/* cfilters */

body .filter
{
  margin-bottom: 10px;
}

body .filter.line-style
{
  display: flex;

  gap: 5px;

  flex-wrap: wrap;

  justify-content: space-between;
}

body .filter > a
{
  display: inline-block;

  padding: 5px 7px;

  font-size: 80%;
}

body .filter > a.active
{
  border-radius: 5px;

  background: var(--popup-page-background);
}



/* chints */

body .page .content .hint
{
  color: var(--hint-color);

  font-size: 80%;

  padding-bottom: 2px;
}

body .page .content .hint b
{
  color: var(--gold-color-light);
}



/* calerts */

body .alerts
{
  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;

  color: var(--base-text-color);
  opacity: 0.9;

  z-index: 22;
}

body .alerts .alert
{
  position: relative;

  width: 94%;

  padding: 3px 4px;
  margin: 5px 3%;

  border-radius: 10px;

  background: var(--app-bg-color);

  box-sizing: border-box;
}

body .alerts .alert.load
{
  position: absolute;
}

body .alerts .alert .wrapper
{
  display: flex;

  gap: 5px;

  align-items: center;

}

body .alerts .alert .wrapper .data
{
  width: 100%;
  gap: 3px;

  font-size: 100%;

  display: flex;

  align-items: center;
}

body .alerts .alert .wrapper .data .icon
{
  width: 26px;
  text-align: center;
}

body .alerts .alert .wrapper .data .icon svg
{
  width: 16px;
  height: 16px;
}

body .alerts .alert .close
{
}

body .alerts .alert .close a
{
  cursor: pointer;

  display: flex;
  align-items: center;
}

body .alerts .alert .close svg
{
  width: 26px;
  height: 26px;
}


/* cflyeffect */

body .fly-effect-item
{
  position: absolute;

  width: 30px;
  height: 30px;

  z-index: 5;
}

body .fly-effect-item svg
{
  max-width: 100%;
  max-height: 100%;
}

/* ctabs */

body .tabs_list
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 2vw;

  margin: 0px auto 20px auto;
}


body .link_preview
{
  font-size: 85%;

  margin: 2vw 0vw;
  /* padding: 2vw; */

  /* border-radius: 3vw; */

  /* background: var(--tile-background); */
  text-align: center;
  /* border: 1px solid #6273d9; */
}

body .text_preview
{
  height: 20vw;
  overflow-y: scroll;

  font-size: 85%;

  margin: 2vw 0vw;
  padding: 2vw;

  border-radius: 3vw;

  background: var(--tile-background);
}

body .img_preview
{
  font-size: 85%;

  margin: 2vw 0vw;
  padding: 4vw 2vw;

  border-radius: 3vw;

  /* background: var(--tile-background); */
  border: 1px solid #6273d9;
  text-align: center;
}

body .img_preview img
{
  max-width: 45vw;
}

body .page .qr .page-block
{
  position: relative;
}

body .page .qr .page-block .page-title, body .page .qr .page-block .page-text
{
  position: absolute;

  z-index: 1;
}

body .page .qr .page-block .page-title
{
  top: 2vh;
}

body .page .qr .page-block .page-text
{
  bottom: 2vh;
}

body .page .qr .page-block .scan-area
{
  width: 94vw;
  height: calc(100vh - 200px);
}

body .center-page-container
{
  display: flex;

  flex-direction: column;

  height: 100vh;

  justify-content: center;

  align-items: center;
}

body .center-page-container.login-style
{
  gap: 5vh;
}

body .center-page-container .logo
{
  text-align: center;
}

.position-relative{
  position: relative;
}

.notice{
  position: absolute;
/* top: 2px; */
right: -8px;
top: -8px;
background: red;
border-radius: 50%;
width: 20px;
height: 20px;
}

.bg-light{
  background: var(--light-color)!important;
}

.text-dark{
  color: black!important;
}

.img-shadow-circle{
  position: absolute;
  border-radius: 100%;
  width: 146vw;
  height: 71vw;
  background: #ffffff;
  z-index: -1;
  background: radial-gradient(circle, rgba(98, 115, 217, 1) 0%, rgba(98, 115, 217, 0) 56%);
  filter: blur(33px);
}

.friends-pattern{
  background: url('../src/pattern.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 110%;
}

.my-30{
  margin: 30px 0px!important;
}

.my-15{
  margin: 15px 0px!important;
}

.mb-30{
  margin-bottom: 30px!important;
}

.mb-15{
  margin-bottom: 15px!important;
}

.mt-10{
  margin-top: 10px!important;
}

.mt-15{
  margin-top: 15px!important;
}

.mt-25{
  margin-top: 25px!important;
}

.mt-50{
  margin-top: 50px!important;
}

.mt-5{
  margin-top: 5px!important;
}

.m-0{
  margin: 0!important;
}

.mb-0{
  margin-bottom: 0!important;
}

.pb-0{
  padding-bottom: 0!important;
}
.pb-50{
  padding-bottom: 50px!important;
}
.pb-40{
  padding-bottom: 40px!important;
}
.pb-30{
  padding-bottom: 30px!important;
}
.pb-20{
  padding-bottom: 20px!important;
}
.pt-20{
  padding-top: 20px!important;
}
.pt-30{
  padding-top: 30px!important;
}
.pt-40{
  padding-top: 40px!important;
}

.mx-0{
  margin-right: 0!important;
  margin-left: 0!important;
}
.mx-5{
  margin-right: 5px!important;
  margin-left: 5px!important;
}
.mr-5{
  margin-right: 5px!important;
}
.mr-20{
  margin-right: 20px!important;
}
.mr-3{
  margin-right: 3px!important;
}
.ml-5{
  margin-left: 5px!important;
}

.px-0{
  padding-right: 0!important;
  padding-left: 0!important;
}

.text-primary{
  color: #fff!important;
}

.friends-lines-tab{
  background: #ebf0f3;
  padding: 9px 11px;
  border-radius: 8px;
}

.flex-column{
  flex-direction: column;
}

.justify-content-between{
  justify-content: space-between!important;
}

.justify-content-end{
  justify-content: flex-end!important;
}

.justify-content-start{
  justify-content: start!important;
}

.align-items-start{
  align-items: start!important;
}

.align-items-center{
  align-items: center!important;
}

.align-items-end{
  align-items: flex-end!important;
}

.fs-14{
  font-size: 14px!important;
}

.fs-11{
  font-size: 11px!important;
}

.bg-primary{
  background-color: #6273D9!important;
}
.bg-transparent{
  background-color: transparent!important;
}
.bg-light{
  background-color: #EBF0F3!important;
}
.text-white{
  color: white!important;
}
.text-dark{
  color: #000!important;
}

.test-cart{
  padding: 6px 5px;
  border-radius: 5px;
  border: 1px solid #6273D9;
  display: flex;
  align-items: center;
}
.test-cart-container{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/* body .page .market {
  padding: 0px!important;
} */
#market-content{
  padding: 5vw 25px 0vw 25px!important;
}
.splide__pagination__page.is-active {
    background: #6273d9!important;
}
body .page .main-tap-block .product-buttons .button.center{
  left: 35% !important;
      top: 10px;
}

.balance-main {
    background: rgba(0, 0, 0, 0.6)!important;
    color: #fff !important;
    font-size: 24px !important;
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important;
    height: fit-content !important;
    padding: 6px 10px;
    border-radius: 10px;

}
.balance-main span svg{
  width: 35px;
  height: 35px;
}

.small-text-balance{
  font-size: 16px!important;
  background: rgba(0, 0, 0, 0.6);
border-radius: 8px;
}

.text-decoration-none{
  text-decoration: none;
}

.control {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.control input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

.control label {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.control input[type="checkbox"]:checked + label {
  background-color: #6273d9;
  border-color: #6273d9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.control:hover label {
  border-color: #999;
}

.control input[type="checkbox"]:focus + label {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}


.check-place {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.check-place input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  z-index: 2;
}

.check-place label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.check-place label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  background: white;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.check-place input[type="checkbox"]:checked + label::before {
  background-color: #6273d9;
  border-color: #6273d9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.check-place:hover label::before {
  border-color: #999;
}

.check-place input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
  outline: none;
}

.announcement_style{
  padding: 10px 15px;
border-radius: 5px;
}

/* .select-race-bg{
  background: url('../src/raceSelectBg.png');
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} */
.image-container2 {
    width: 100%;
    height: 100vh;
    display: block;
}
.parent {
    max-width: 100vw;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.p-0{
  padding: 0px!important;
}

.race-page-content{
  padding: 0px!important;
  height: 100vh
}

.city-page-content{
  padding: 0px!important;
  height: 100vh
}

.world-page-content{
  padding: 0px!important;
  height: 100vh
}
.arena-page-content{
  /* padding: 0px!important; */
  height: 100vh
}
.race_select_info_small_text{
  /* display: flex; */
      /* align-items: start; */
      /* justify-content: center; */
      width: 100%;
      height: 100%;
      border-radius: 15px;
      padding: 14px 16px;
      /* box-sizing: border-box; */
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 16px;
      text-align: start;
      cursor: pointer;
      line-height: 1.3;
}
.race_select_header{
  /* display: flex; */
      /* align-items: start; */
      /* justify-content: center; */
      width: 100%;
      height: 100%;
      border-radius: 15px;
      padding: 14px 16px;
      /* box-sizing: border-box; */
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 16px;
      text-align: start;
      cursor: pointer;
      line-height: 1.3;
}

#race-selected, #home-page{
  overflow-x: hidden;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      height: 100vh;
      position: relative;
}
.curent_race_container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 30px;
}
.curent_race_header{
  font-size: 16px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box, var(--gradient-main) border-box;
}

.curent_race_header span{
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.city_label_map{
  width: fit-content;

  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 4px 7px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box, var(--gradient-main) border-box;
}

.city_label_map span{
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page_label_map{
  width: fit-content;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 4px 7px;
  border-radius: 10px;
  border: 2px solid #000;
  background: var(--gradient-main);
}

.page_label_map span{
  color: #000;
}

.race_label_map{
      width: fit-content;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 6px 6px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box, var(--gradient-main) border-box;
}

.race_label_map span{
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.world_race_logo{
  width: 20px;
  height: 20px;
}

.curent_race_logo{
  width: 60px;
  height: 60px;
  margin: 11px 0px;
}

.w-100{
  width: 100%;
}

.curent_race_descr{
  font-size: 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.6;
}

.curent_race_galery{
  display: flex;
  gap:25px;
  margin-top: 25px;
  align-items: center;
  justify-content: center;
}

.curent_race_card{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
      background-color: #000;
  border: 2px solid #b78d4f;
  border-radius: 10px;
  padding: 12px;
}

.btn_group{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:10px;
  margin-top: 25px;
  width: 100%;
}


.btn_new {
  width: -webkit-fill-available;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: linear-gradient(#000, #000) padding-box, var(--gradient-main) border-box;
}

.btn_new span {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#race-all, #race-selected {
    transition: all 0.4s ease-in-out;
}

.parent {
    position: relative;
}

#race-all, #race-selected {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.character_container{
  display: flex;
  position: relative;
  height: -webkit-fill-available;
      min-height: 78vh;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0vw 3vw;
  margin-top: 55px;
}
.character_info{
  display: flex;
    flex-direction: column;
}
.character_row{
  display: flex;
  width: 100%;
  gap: 20px;
  z-index: 20;
}
.lineX_info{
  z-index: 19;

}
.hp_block{
  display: flex;
  width:100%;
  font-size: 8px;
  align-items: center;
}
.hp_bar{
  width: -webkit-fill-available;
  height: 12px;
  display: flex
;
  justify-content: center;
  align-items: center;
  background: #000000;
  border-radius: 10px;
}
.mana_block{
  display: flex;
  width:100%;
  font-size: 8px;
  align-items: center;
}
.mana_bar{
  width: -webkit-fill-available;
  height: 12px;
  display: flex
;
  justify-content: center;
  align-items: center;
  background: #000000;
  border-radius: 10px;
}

.stats_block{
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  padding: 3px 5px;
}
.main-character-container{
  height: 100vh;
}

.character_img {
    position: absolute;
    height: 90vh;
}

.hero{
  position: absolute;
  /* width: -webkit-fill-available; */
  height: -webkit-fill-available;
  transform: scale(0.70);
      padding-top: 30px;
      top: 5%;
}

.circle{
  /* position: absolute;
  bottom: 25px;
  width: -webkit-fill-available;
  transform: scale(0.8); */
  position: absolute;
  top: 67%;
  width: 100vw;
  transform: scale(0.8);
}
.logo_main{
  width: auto;
  height: 85px;
  margin-top: 30px !important;

}
.logo_top{
  background: url(../src/ui_main_general/logo_header_character2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: -webkit-fill-available;
  height: 13vh;
}
/* .line3_info{
  background: url(../src/ui_main_general/logo_header_character2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: inherit;
} */

.header_city{
  position: absolute;
  display: flex;justify-content: center; width: 100%;
  z-index: 20;
}

.gem_slot{
  width: 12px;
  height: 12px;
}
.gem_slot_container{
  position: absolute;

}
.right_side_gem_slot{
  right:-5px;
}
.left_side_gem_slot{
  left:-5px;
}
.middle_container{
  position: relative;
  width: -webkit-fill-available;
  /* background-image: url('../src/ui_main_general/exp_place.png');
  background-position: center;
  background-size: initial;
  background-repeat: no-repeat; */
}
.exp_main{
  position: absolute;
}
.logo_energy img, .logo_energy2 img{
  width: 50px;
}
.logo_energy {
  position: absolute;
  left: 45%;
  transform: translateX(-50%);
  z-index: 21;
}
.logo_energy2 {
  position: absolute;
  left: 35%;
  transform: translateX(-50%);
  z-index: 21;
}

.energy_block{
  padding: 6px 8px;
    font-size: 12px;
    color: white;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 7px;
}

.main_btn_4{
  width: 15vw;
      height: auto;
}
.main_btn_1{
  left: -55px;
}
.main_btn_2{
  left: -33px;
  top: -33px;
}
.main_btn_3{
  top: -55px;
}

.main_btn_1, .main_btn_2, .main_btn_3{
  position: absolute;
      width: 9vw;
      height: auto;
}

.main_coin2{
  width: 20px;
  height: 20px;
}

.test_content_style{
  background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
margin-top: 10px !important;
}

.btn-new-mage{
  display: flex;
  width: -webkit-fill-available;
  justify-content: center;
  font-size: 14px;
      text-transform: uppercase;
      padding: 10px 12px;
      border-radius: 10px;
      border: 2px solid transparent;
      background: linear-gradient(#000, #000) padding-box, var(--gradient-main) border-box;
}
.btn-new-mage span {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-new-mage svg, .btn-new-mage img{
  margin-left: 6px;
  width: 4.5vw;
height: 4.5vw;
}

.card_black_bg{
  background: rgba(0, 0, 0, 0.6);
border-radius: 6px;
}
.p-5{
  padding: 15px 10px;
}

.link-fix{
  font-size: 10px;
  padding: 5px 10px;
  width: fit-content;
  align-items: center;
  /* color: #bf9756; */
}
.link-fix a{
  text-decoration: none!important;
}
.link-fix svg{
  margin-right: 6px;
}

.slot_image_active{
  position: absolute;
}

.slot_image, .slot_image_active{
  width: 10vw;
  height: auto;
}
/* .slot_block{
  width: 100%;
height: auto;
object-fit: cover;
} */

.tile_items{
  position: relative;
  display: flex;
  max-width: calc(27% - 1vw);
  gap: 1vw;
  flex-direction: column;
  background: var(--dark-background);
  padding: 2vw 2vw;
  border-radius: 2.5vw;
  transition: transform 0.3s ease-in-out;
  height: -webkit-fill-available;
    justify-content: space-between;
}
.tile_items .image-place{
  display: contents;
}

.tile_items .name{
  font-size: 120%;
  margin-bottom: 10px
}

.tile_items_avail{
  position: relative;
  display: flex
;
  max-width: calc(18% - 1vw);
  gap: 0vw;
  flex-direction: column;
  background: var(--dark-background);
  padding: 2vw 2vw;
  border-radius: 2.5vw;
  transition: transform 0.3s
ease-in-out;
  height: -webkit-fill-available;
  justify-content: space-between;
}

.tile_items_avail .name{
  font-size: 80%;
  margin-bottom: 10px
}
.rarity_item{
  font-size: 80%;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 10px;
  background: blueviolet;
}
.tile_items_avail .rarity_item{
  font-size: 60%;
  width: fit-content;
  padding: 4px 6px;
  border-radius: 10px;
  background: blueviolet;
}

.my-items .list{
  gap: 10px;
  flex-wrap: wrap;

}

.active-item .list{
  gap: 10px;
}

.my-items .subtitle, .active-item .subtitle{
  text-align: center;
}

.image-place img{
  width: -webkit-fill-available;
}

.tile_new{
  position: relative;
  display: flex
;
  max-width: calc(19% - 1vw);
  gap: 1vw;
  flex-direction: column;
  background: var(--dark-background);
  padding: 2vw 2vw;
  border-radius: 2.5vw;
  transition: transform 0.3s
ease-in-out;
  height: -webkit-fill-available;
  justify-content: space-between;
}

.tile_new_inventory{
  position: relative;
  display: flex
;
  max-width: calc(19% - 1vw);
  gap: 1vw;
  flex-direction: column;
  background: var(--dark-background);
  padding: 2vw 2vw;
  border-radius: 2.5vw;
  transition: transform 0.3s
ease-in-out;
  height: -webkit-fill-available;
  justify-content: space-between;
}
.tile_new_inventory .name{
font-size: 70%;
}
.tile_new .name{
font-size: 70%;
}

.chest_container{
  padding: 5vw 7vw 5vw 7vw;
}

.disabled{
  pointer-events: none;
  opacity: 0.7;
}

.quantity-badge{
  position: absolute;
  bottom: -8px;
  right: -8px;
  background: brown;
  padding: 5px;
  width: 12px;
  height: 12px;
  font-size: 85%;
  border-radius: 50%;
}
.choosing_fight_block{
  display: flex
  ;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding-left: 10px;
      padding-right: 10px;
      flex-wrap: wrap;
}
.choosing_mob_block{
  display: flex
  ;
      justify-content: center;
      align-items: center;
      gap: 10px;
}

.img-fluid{
  width: 100%;
  height: auto;
}
.mob_card{
  height: -webkit-fill-available;
padding: 20px;
}
/* .reward_mob_list img{
  width: 30px;
  height: 30px;
} */

.fight_page-page-content{
  height: -webkit-fill-available;
}

#tap-game{
  height: 100%;
}



#fight_page-page{
  height: 100vh
}

polygon[onclick] {
  cursor: pointer;
  pointer-events: all;
}

.overflow-hidden{
  overflow: hidden;
}

.hp-container {
  position: relative;
  padding: 10px;
  text-align: center;
  z-index: 2;
}

.hp-bar {
  width: 100%;
  height: 20px;
  background: #333;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px;
}

.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff0000, #ff6a00);
  transition: width 0.3s ease;
}

.hp-text {
  color: white;
  font-weight: bold;
  font-size: 14px;

  position: absolute;
left: 42%;
top: 23%;
}

#main-mob-container .image-place img {
  transition: transform 0.2s ease-in-out;
  transform-origin: center center;
}
#main-mob-container .image-place img.mob-tap-animation {
  transform: scale(1.1);
}
#main-mob-container .image-place img.mob-tap-animation {
  animation: mobTap 0.2s ease-in-out;
}


#reward_info{
  position: absolute;
  width: 100%;
  top: 40%;
  z-index: 2;
  height: fit-content;
}

.header_reward{
  font-size: 120%;
    font-weight: bold;
}