:root 
{
  --base-text-color: #212529;
  --light-text-color: #999999;
  --gold-color: #FFFFFF;
  --gold-color-light: #6273D966;
  --warning-color: #de0000;
  --hints-color: #666666;
  --title-font-weight: bold;
  --light-background: #FFFFFF;
  --light-background-transparent: #FFFFFFaa;
  --middle-background: #EBF0F3;
  --middle-background-transparent: #EBF0F3CC;
  --dark-background: #EBF0F3;
  --dark-background-transparent: #EBF0F3EE;

  --button-background: #6273D9;
  --button-color: #FFFFFF;

  --button-gold-background: #FFD700;
  --button-gold-color: #000000;

  --border-light-background: border-image-source: linear-gradient(89.85deg, #7F4FD6 1.17%, #6A84CD 19.31%, #57A5CD 40.99%, #4BD7BF 63.17%, #589DCF 81.9%, #607BD6 99.74%);

  --border-weight: 3px;
  --border-radius-big: 3.5vw;
  --border-radius-middle: 3vw;
  --border-radius-small: 2vw;
  --border-radius-extra-small: 1vw;

  --input-padding: 6px 5px;
  --input-border-radius: 5px;

  --input-disable-background: #bebebe;

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

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

  font-family: Arial;

  box-sizing: border-box;

  background: var(--dark-background);

  border: none!important;

  cursor: default;
}

@media (min-width: 290px)
{
  body, html
  {
    font-size: 12px;
  }
}

@media (min-width: 320px)
{
  body, html
  {
    font-size: 14px;
  }
}

@media (min-width: 420px)
{
  body, html
  {
    font-size: 16px;
  }
}

body.tips-mode
{
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;
}

body.tips-mode::after
{
  position: absolute;

  content: "";

  display: block;

  top: 0px;
  left: 0px;

  width: 100%;
  height: 100%;

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

  z-index: 1000;
}

body.tips-mode.tips-opacity::after
{
  background: none;
}

body.tips-mode .tips-now
{
  z-index: 1001!important;
}

body.tips-mode .tips-container
{
  position: absolute;

  z-index: 1002;

  width: 100vw;
}

body.tips-mode .tips-container .skip
{
  position: absolute;

  top: -50px;

  width: 100%;

  text-align: center;
}

body.tips-mode .tips-container .tips-container-wrapper::before
{
  content: "";

  position: absolute;

  display: block;

  z-index: -1;

  background-position: center top;
  background-repeat: no-repeat;
}

body.tips-mode .tips-container.style1 .tips-container-wrapper::before
{
  left: calc(50% + 7vw);

  margin-top: -120px;

  width: 114px;
  height: 186px;

  background-image: url('/src/tips/style1.png?v2');
}

body.tips-mode .tips-container.style2 .tips-container-wrapper::before
{
  width: 121px;
  height: 193px;

  margin-top: 40px;
  margin-left: 10vw;

  background-image: url('/src/tips/style2.png?v3');

  z-index: 1;
}

body.tips-mode .tips-container.style2 .tips-content
{
  background-position: calc(50% + 11vw) top;
}

body.tips-mode .tips-container.style2 .tips-content .tips-title,
body.tips-mode .tips-container.style2 .tips-content .tips-text
{
  padding-left: 22vw;
  padding-right: 0px;
}

body.tips-mode .tips-container.style2 .tips-control
{
  left: calc(50% + 21vw);
}

body.tips-mode .tips-container.style3 .tips-container-wrapper::before
{
  margin-top: -100px;
  margin-left: 35px;

  width: 131px;
  height: 190px;

  background-image: url('/src/tips/style3.png?v2');
}

body.tips-mode .tips-container.style4 .tips-container-wrapper::before
{
  left: calc(50% - 57px);

  margin-top: -95px;

  width: 114px;
  height: 180px;

  background-image: url('/src/tips/style4.png?v2');
}

body.tips-mode .tips-container.style5 .tips-container-wrapper::before
{
  left: calc(50% - 125px);

  margin-top: 210px;

  width: 114px;
  height: 180px;

  background-image: url('/src/tips/style5.png?v2');
}

body.tips-mode .tips-container.style6 .tips-container-wrapper::before
{
  margin-top: -175px;
  margin-left: 30px;

  width: 142px;
  height: 190px;

  background-image: url('/src/tips/style6.png?v2');
}

body.tips-mode .tips-container .tips-container-wrapper
{
  position: relative;

  z-index: 2;
}

body.tips-mode .tips-content
{
  min-height: 251px;

  background-image: url('/src/tips/background.png?v2');
  background-position: center top;
  background-repeat: no-repeat;

  text-align: left;
}

body.tips-mode .tips-content .tips-inner-data
{
  width: 260px;

  padding-top: 6vw;

  margin: 0px auto;
}

body.tips-mode .tips-content .tips-title
{
  padding-left: 8vw;
  padding-right: 8vw;
  padding-bottom: 2vw;

  font-weight: var(--title-font-weight);
  font-size: 4vw;

  color: var(--button-background);

  text-transform: uppercase;

  text-align: center;
}

body.tips-mode .tips-content .tips-text
{
  padding: 0px 8vw;

  font-size: 3.8vw;
}

body.tips-mode .tips-control
{
  position: absolute;

  bottom: 20px;

  left: calc(50% + 50px);
}

body.tips-mode .header-place
{
  position: absolute;

  z-index: inherit;
}

body.tips-mode .scroll-container, body.open-page .scroll-container, body.open-popup .scroll-container
{
  overflow: hidden;
}

body.tips-mode .index-view
{
  z-index: inherit!important;
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 
{
  -webkit-appearance: none;

  margin: 0;
}

input[type=number] 
{
  -moz-appearance:textfield
}

body
{
  max-width: 100vw;
  min-height: 100vh;

  position: relative;

  overflow: hidden;
}

body .overflow
{
  overflow: hidden;
}

body .light-text
{
  color: #FFFFFF;
}

body .text-small
{
  font-size: 90%;
}

body .d-none
{
  display: none;
}

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

body .d-flex
{
  display: flex;
}

body .d-flex.center
{
  justify-content: center;

  align-items: center;
}

body .w-100
{
  width: 100%;
}

body .lowercase
{
  text-transform: lowercase;
}

body .bold
{
  font-weight: bold;
}

body a.link, body .link a, body .link-style
{
  text-decoration: underline;

  cursor: pointer;
}

body .line-list
{
  display: flex;

  flex-direction: column;

  gap: 2vw;

  justify-content: center;

  align-items: center;
}

body .pages-data
{
  display: none;

  padding-bottom: 0vw;

  position: relative;

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

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

  padding-top1: 14vw;
}

body .system-message
{
  position: absolute;

  top: 40vh;
  left: 10%;
  
  width: 80%;
  padding: 20px;

  text-align: center;
  
  background: var(--dark-background-transparent);

  border-radius: var(--border-radius-small);
  
  box-sizing: border-box;

  font-size: 120%;

  z-index: 2;
}


body .lottery-page, body.premium_lottery-page
{

}

body.lottery-page .big-coin img, body.premium_lottery-page .big-coin img
{
  max-width: 85%;
}

body.lottery-page .giveaway, body.premium_lottery-page .giveaway
{
  display: flex;

  flex-direction: column;

  padding: 2vw 0;

  text-align: center;

  gap: 10px;
}

body.tips-mode.lottery-page .giveaway.tips-now, body.premium_lottery-page .giveaway.tips-now
{
  position: relative;

  background: #FFF;
}

body.lottery-page .giveaway .big, body.premium_lottery-page .giveaway .big
{
  font-size: 110%;

  font-weight: bold;
}

body.lottery-page .giveaway .date .val, body.lottery-page .giveaway .prize .val, body.premium_lottery-page .giveaway .date .val, body.premium_lottery-page .giveaway .prize .val
{
  font-weight: bold;
}

body.lottery-page .giveaway .prize .val, body.premium_lottery-page .giveaway .prize .val
{
  font-size: 140%;
}

body.lottery-page .giveaway .sum, body.premium_lottery-page .giveaway .sum
{
  display: flex;

  justify-content: center;

  align-items: center;

  padding-top: 5px;

  gap: 10px;
}

body.lottery-page .giveaway .sum img, body.premium_lottery-page .giveaway .sum img
{
  max-width: 30px;
  max-height: 30px;
}

body.lottery-page .giveaway .list, body.premium_lottery-page .giveaway .list
{
  margin: 2vw 0vw!important;
  padding: 0px!important;

  gap: 3vw 2vw;

  font-size: 90%;

  background: none!important;

  justify-content: center;
}

body.lottery-page .giveaway .list .tile.compact img, body.premium_lottery-page .giveaway .list .tile.compact img
{
  max-width: 14vw;
  max-height: 14vw;
}

body.lottery-page .tickets, body.premium_lottery-page .tickets
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  gap: 2vw;
}

body.lottery-page .tickets .element, body.premium_lottery-page .tickets .element
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  gap: 2vw;

  width: calc(50% - 7vw);

  background: var(--dark-background);

  padding: 1.5vw 3vw;

  border-radius: 2.5vw;
  box-shadow: 0px -3px 3px 0px #6D777EB2 inset;
}

body.lottery-page .tickets .element.disable, body.premium_lottery-page .tickets .element.disable
{
  filter: grayscale(1);
}

body.lottery-page .tickets .element .name, body.premium_lottery-page .tickets .element .name
{
  font-size: 90%;
}

body.lottery-page .tickets .element .coins, body.premium_lottery-page .tickets .element .coins
{
  font-size: 90%;

  display: flex;
  align-items: center;

  gap: 1vw;
}

body.lottery-page .tickets .element svg,
body.premium_lottery-page .tickets .element svg
{
  width: 5vw;
  height: 5vw;

  margin: 0px;
}

body.lottery-page .tickets .element img, 
body.premium_lottery-page .tickets .element img
{
  height: 5vw;
  width: auto;

  margin: 0px;
}

body.lottery-page .giveaway > .total, body.premium_lottery-page .giveaway > .total
{
  font-size: 110%;
  font-weight: var(--title-font-weight);
}

body.lottery-page .giveaway > .total.coins, body.premium_lottery-page .giveaway > .total.coins
{
  justify-content: center;
}

/* cpages */

body.lottery-page, body.premium_lottery-page
{
  background-image: url('/src/pages/base/lottery.png?v1') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.account-page
{
  background-image: url('/src/pages/base/account.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.market-page
{
  background-image: url('/src/pages/base/shop.png?v1') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.earn-page
{
  background-image: url('/src/pages/base/earn.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.friends-page
{
  background-image: url('/src/pages/base/livingroom.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.wallet-page
{
  background-image: url('/src/pages/base/wallet.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.kitten-page
{
  background-image: url('/src/pages/base/kitten2.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.city-page
{
  background-image: url('/src/pages/base/city3.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.city-page.night-mode
{
  background-image: url('/src/pages/base/city3_night.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.home-page
{
  background-image: url('/src/pages/base/home.png') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.exhibition-page
{
  background-image: url('/src/pages/base/exhibition.jpg?v=1') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.commands-page
{
  background-image: url('/src/pages/base/commands.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.liteups-page, body.liteup-page
{
  background-image: url('/src/pages/base/liteup.png?v=1.12') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.liteups-page.full-tree, body.liteup-page.full-tree
{
  background-image: url('/src/pages/base/liteup_.png?v=1.12') !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

body.nursery-page.rareness1
{
  background-image: url('/src/pages/base/nursery1.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.nursery-page, body.nursery-page.rareness2
{
  background-image: url('/src/pages/base/nursery.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.nursery-page.rareness3
{
  background-image: url('/src/pages/base/nursery3.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.nursery-page.rareness4
{
  background-image: url('/src/pages/base/nursery4.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.collection-page
{
  background-image: url('/src/pages/base/collection.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.pantry-page
{
  background-image: url('/src/pages/base/pantry.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.kitchen-page
{
  background-image: url('/src/pages/base/kitchen.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.mart-page
{
  background-image: url('/src/pages/base/mart.png') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

body.petstore-page
{
  background-image: url('/src/pages/base/petstore.png?v=1.01') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

/* cpage */

body .page,
body .hide-till-lang
{
  display: none;

  height: 100vw;

  padding-top: 24vw;

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

body .page.full-height
{
  padding-top: 0px;
}

body .page.active
{
  display: block;
}

body #main-page
{
  padding-top: 0vw;
}


/* ccontent */

body .page .content
{
  padding: 0vw 6vw 34vw 6vw;
}

body .page.full-height .content
{
  padding: 0;
}

body .page .content .page-section
{
  margin-bottom: 6vw;
}

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

  margin-bottom: 8px;

  text-align: center;
}

body .page .content .title.label-style
{
  margin: 0px;
}

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

  display: flex;
  flex-direction: column;
  align-items: center;

  font-size: 140%;
  font-weight: bold;

  padding: 0vw 5vw 3vw 5vw;

  text-align: center;
}

body .page .content .inline-form .page-title
{
  font-size: 100%;
  font-weight: inherit;
}

body .page .content .inline-form .page-title .view
{
  font-size: 140%;
  font-weight: bold;
}

body .page .content .page-title::after
{
  content: "";

  position: relative;
  top: -2.5vw;
  width: 50%;

  box-shadow: 0px 0px 50px 30px #00000099;

  z-index: -1;
}

body .page .content .page-title1, body .popup-content .page-title1
{
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 2vw;

  font-size: 110%;

  padding: 0vw 5vw 3vw 5vw;

  text-align: center;
}

body .popup-content .page-title1
{
  font-size: 120%;
  font-weight: var(--title-font-weight);
}

body .page .content .page-title1.full-width, body .popup-content .page-title1.full-width
{
  padding-left: 0;
  padding-right: 0;
}

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

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

  gap: 2vw;

  font-size: 100%;

  padding: 0vw 5vw 1vw 5vw;

  text-align: center;
}

body .page .content .text .big
{
  font-size: 140%;
}

body .page .content .page-inner-block
{
  padding-bottom: 2vw;
}

body .page .content .page-inner-block:last-child
{
  padding: 0;
}

body .page .content .page-inner-block .image.icon img
{
  max-width: 125px;
  max-height: 125px;
}

body .page .content .page-block
{
  padding: 4vw;

  margin: 0vw 0vw 4vw 0vw;

  background: var(--middle-background-transparent);
  border-radius: var(--border-radius-big);
}

body .page .content .page-block.tips-now
{
  position: relative;
}

body .page .content .page-block.top-style
{
  margin: 2vw 0vw 2vw 0vw;
}

body .page .content .page-block .page-title
{
  color: var(--base-text-color);
}

body .page .content .page-block .page-title::after
{
  top: unset;
  position: unset;
  box-shadow: none;
}

body .page .content .page-block .hint
{
  text-align: center;
}

body .page .content .page-block .hint p
{
  margin: 0px;
}

body .page .content .page-text
{
  text-align: center;

  margin: 2vw 5vw 2vw 5vw;
}

body .page .content .page-text ul
{
  text-align: left;
  margin: 0vw 2vw 2vw 2vw;
  padding: 0vw;
}

body .page .content .page-text ul li
{
  text-align: left;
  list-style-type: none;

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

body .page .content .page-hint
{
  font-size: 80%;
  text-align: center;

  margin: 2vw 5vw 2vw 5vw;
}

body .page .content .page-block .page-image
{
  text-align: center;
}

body .page .content .page-block .page-image.big-round img
{
  width: 20vw;
  height: 20vw;
}

body .page .content .page-block .block
{
  display: flex;
  flex-direction: row;
  gap: 2vw;

  padding: 1vh 3vw 2vw 3vw;

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

  background: var(--middle-background);
  border-radius: 1.7vw;

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;
}

body .page .content .page-block .qr
{
  margin-top: 4vw; 
}

body .page .content .qr-code
{
  display: flex;

  justify-content: center;
}

body .page .content .qr-code img,
body .page .content .qr-code canvas
{
  max-width: 45vw;

  border: 8px solid #FFF;
}

body .page .content .title.center
{
  text-align: center;
}

body .page > .content .big-coin, 
body .page > .content .big-image
{
  margin: 0vw 0vw 3vw 0vw;

  text-align: center;

  line-height: 0;
}

body .page > .content .big-coin svg,
body .page > .content .big-image img
{
  width: 30vw;
  height: 30vw;

  background: var(--dark-background);
  border: var(--border-weight) solid var(--border-light-background);
  border-radius: 30vw;
}

body .page .content .inline-form .view > *
{
  vertical-align: middle;
}

body .page .content .inline-form .view a
{
  margin-left: 5px;
}

body .page .content .inline-form .view a svg
{
  width: 25px;
  height: 25px;

  vertical-align: middle;
}


/* clist */

body .page > .content .list, body .popup-content .list.page-style
{
  display: block;

  margin: 7vw 0vw;
  padding: 3vw 2vw;

  border-radius: var(--border-radius-middle);
  background: var(--middle-background-transparent);
}

body .page > .content .list.simple, body .popup-content .list.page-style.simple
{
  margin: 2vw 0vw;

  border-radius: 0;

  background: none;
}

body .page > .content .list.simple.hold, body .popup-content .list.page-style.simple.hold
{
  padding: 0;
}

body .popup-content .list.page-style.simple
{
  padding: 3vw 0;
}

body .page > .content .list.compact, body .popup-content .list.page-style.compact
{
  margin: 7vw 0vw 2vw 0vw;
}

body .page .content .list .element, body .popup-content .list.page-style .element
{
  display: flex;

  width: auto;
  max-width: 100%;

  gap: 10px;

  align-items: center;

  border-radius: var(--border-radius-middle);
  opacity: 0px;

  background: var(--dark-background);

  padding: 2vw 2vw;
  margin: 1vw 0px 1vw 0px;

  box-shadow: 0px -2px 2px 1px #6D777E4d inset;
}

body .page .content .page-block .list .element
{
  background: var(--dark-background-transparent);
}

body .page .content .list .element.disable, body .popup-content .list.page-style .element.disable
{
  filter: grayscale(1);
}

body .page .content .list .element.waiting, body .popup-content .list.page-style .element.waiting
{
  color: #808080;
}

body .page .content .list .element.cancel, body .popup-content .list.page-style .element.cancel
{
  color: #DE0000;
}

body .page .content .list .element.success, body .popup-content .list.page-style .element.success
{
  color: #0d730d;
}

body .page > .content .list.simple .element
{
  padding: 1vw 2vw;

  border-radius: 0;

  background: none;
  box-shadow: none;
}

body .page .content .list.compact .element, body .popup-content .list.page-style.compact .element
{
  padding: 0 2vw;

  border-radius: 0;

  background: none;
  box-shadow: none;
}

body .page > .content .list + .list.simple
{
  margin-top: 0;
  padding-top: 0;

  margin-bottom: 0;
  padding-bottom: 0;
}

body .page .content .list .element .main_info .name
{
  font-size: 90%;
  font-weight: bold;

  padding: 0px;
  margin: 0px 0px 2px 0px;

  text-align: left;
}

body .page .content .list .element .coins.flex, body .page .content .list .element .tickets.flex, body .page .content .list .element .sum.flex, body .popup-content .list.page-style .element .sum.flex
{
  display: flex;

  min-width: 60px;

  gap: 5px;

  align-items: center;
}

body .page .content .list .element .sum.flex, body .page .content .list .element .tickets.flex, body .popup-content .list.page-style .element .sum.flex
{
  justify-content: end;
  align-items: center;
}

body .page .content .list .element .icon, body .page .content .list .element .avatar, body .popup-content .list.page-style .element .avatar, body .popup-content .list.page-style .element .icon
{
  width: 30px;

  min-width: 30px;
  max-width: 30px;
}

body .page .content .list .element .icon.small
{
  width: 20px;

  min-width: 20px;
  max-width: 20px;
}

body .page .content .list .element .icon img, body .page .content .list .element .icon svg, 
body .page .content .list .element .avatar img, body .popup-content .list.page-style .element .avatar img, body .popup-content .list.page-style .element .icon img
{
  max-height: 30px;
  max-width: 30px;

  border-radius: var(--border-radius-middle);
}

body .page .content .list .element .icon.small img, body .page .content .list .element .icon.small svg
{
  max-height: 20px;
  max-width: 20px;
}

body .page .content .list .element .main_info
{
  width: 100%;
}

body .page .content .list .element .main_info .hint
{
  font-size: 80%;
  padding: 0px;
}

body .page .content .list .element .main_info .timer.small
{
  padding-top: 2px;

  font-size: 90%;
}

body .popup-content .list.page-style .element .buttons
{
  margin: 0;

  justify-content: end;
}

body .popup-content .list.page-style .element .buttons .button
{
  height: inherit;

  padding: 1.5vw 4vw;

  font-size: 95%;
  font-weight: normal;
}

body .page .content .list .element .buy
{
  font-size: 95%;
  width: 100px;
  
  font-weight: var(--title-font-weight);
}

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

  align-items: center;

  justify-content: end;
}

body .page .content .list .element .buy.prices a
{
  flex-direction: column;

  gap: 5px;

  align-items: initial;
}

body .page .content .list .element .buy.prices a > span
{
  display: flex;

  justify-content: end;
}

body .page .content .list .element .buy svg,
body .page .content .list .element .balance svg
{
  width: 20px;
  height: 20px;

  margin: 0px 5px;
}

body .page .content .list .element .buy img,
body .page .content .list .element .balance img
{
  max-width: 20px;

  margin: 0px 5px;
}

body .page .content .list .element .balance
{
  display: flex;
  flex-direction: column;
  justify-content: right;

  gap: 1.5vw;

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

  text-align: right;
  padding-right: 1vw;
}

body .page .content .list .element .balance .small
{
  font-size: 75%;
  font-weight: normal;
}

body .page .content .list .element .nowrap
{
  white-space: nowrap;
}

body .page .content .list .rate
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  gap: 1vw;

  font-size: 90%;
  white-space: nowrap;
}

body .page .content .list .rate.center
{
  justify-content: center;
}

body .page .content .list .line .rate img
{
  width: 4vw;
  height: 4vw;
}

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

  gap: 5px;

  margin: 10px 0px 25px 0px;

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

body .page .content .line.step-top
{
  margin: 10px 0px 0px 0px;
}

body .pages-data .line .element
{
  text-align: center;

  padding: 0px;

  border-radius: var(--border-radius-big);

  overflow: hidden;
}

body .pages-data .line .element.disable
{
  filter: grayscale(1);
}

body .pages-data .line .element.cooldown
{
  color: #727272;
}

body .pages-data .line .element.cooldown .icon
{
  position: relative;

  overflow: hidden;

  border-radius: var(--border-radius-middle);
}

body .pages-data .line .element.cooldown .icon .cooldown-overlay
{
  position: absolute;

  bottom: 0px;
  left: 0px;

  display: flex;

  width: 100%;
  height: 100%;

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

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

body .pages-data .line .element.cooldown .icon .cooldown-timer
{
  position: absolute;

  top: 50%;

  width: 100%;

  color: #fff;
  font-size: 0.8em;

  text-align: center;
}

body .pages-data .line .element img
{
  max-width: 100%;

  border-radius: var(--border-radius-middle);
}

body .pages-data .line .element .count
{
  font-weight: bold;

  padding: 1px 3px 1px 3px;
  
  border-radius: var(--border-radius-small);

  background1: #F6BE29;
}

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

  text-decoration: none;

  outline: none;

  cursor: default;
}

body .d-none
{
  display: none;
}

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

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

body .text-center.flex-line
{
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;
}

body .text-center.flex-line.middle-step
{
  gap: 20px;
}

body .empty
{
  padding: 20px 0px;

  text-align: center;
}

body .container
{
  width: calc(100% - 40px);
  min-width: 330px;

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

body .small-label
{
  font-weight: normal;

  color: #8C8C8C;
}


body .scroll-container
{
  height: 100vh;

  overflow-y: auto;
  overflow-x: hidden;
  
  box-sizing: border-box;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

body .scroll-container::-webkit-scrollbar 
{
  width: 0px;
  height: 0px;
}

body .scene
{
  position: relative;

  display: none;

  max-width: 600px;
  min-height: calc(100vh - 14vw);

  margin: 0px auto;
}

body .scene .with-icon
{
  display: flex;

  gap: 5px;

  align-items: center;

  justify-content: center;
}

body .scene .skills-value
{
  font-weight: bold;
}

body .scene .boosts-value
{
  font-weight: bold;
}


body .scene .info-icon
{
  width: 14px!important;
  height: 14px!important;
}

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

body .thumbnail-place
{
  position: absolute;

  top: 0px;

  width: 100%;
  height: 100vh;

  background-image: url("/src/pages/base/loader.png?v=1.1");
  background-position: center center;
  background-size: cover;

  z-index: 10;
}

body .thumbnail-place.style2
{
  background-image: url("/src/pages/base/loader.png?v=1.1");
}

body .thumbnail-place .loading
{
  width: 100vw;
  height: 100vh;

  background-position: 50% 50%;
}

body .thumbnail-place .greeting
{
  position: absolute;

  display: flex;
  flex-direction: column;

  top: 0px;
  left: 0px;

  width: 100vw;
  height: 100vh;

  justify-content: space-between;

  text-align: center;
}

body .thumbnail-place .greeting .text
{
  color: #FFF;

  font-size: 22px;
  font-weight: 700;

  text-shadow: 2px 2px rgba(0, 0, 0, 1);
}

body .thumbnail-place .greeting .top
{
  padding-top: 30px;
}

body .thumbnail-place .greeting .top .logo
{
  padding-bottom: 10px;
}

body .thumbnail-place .greeting .top .logo svg
{
  width: 292px;
  height: 55px;
}

body .thumbnail-place .greeting .bottom
{
  padding-bottom: 30px;
}

body .thumbnail-place .thumbnail-data-place
{
  position: absolute;

  bottom: 5vw;
  right: 0;
}

body .thumbnail-place .thumbnail-data-place .thumbnail-data, body .pages-data .system-data
{
  display: flex;

  flex-direction: column;

  gap: 5px;

  max-width: 70vw;

  padding: 20px 5vw;
  margin: 0px 20px;

  border-radius: 15px;

  background: rgba(255, 255, 255, 0.7);

  font-size: 90%;
}

body .loading
{
  background: url("/src/loader4.svg");
  background-repeat: no-repeat;
  background-position: center center;

  box-shadow: 0px 1px 7px rgb(0 0 0 / 10%);
}

body .thumbnail-place.loaded
{
  display: none;
}

body .scene .scene-container
{
  width: calc(100% - 12vw);
  min-width: 280px;

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

body .scene .small-scene-container
{
  width: calc(100% - 20vw);
  min-width: 250px;

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


/* cheader */

body .header-place
{
  position: fixed;

  top: 0px;

  width: 100%;

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

  z-index: 6;
}

body .header-place .header
{
  position: relative;

  width: 100vw;
  height: 22vw;

  display: flex;

  padding: 0vw 3vw 9vw 4vw;

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

  gap: 10px;

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

  box-sizing: border-box;

  background-image: url('/src/header-bg1.png?v=1.01');
  background-position: center bottom;
  background-size: 100% auto;
}

body .header-place .header .user
{
  width: 100vw;
  display: flex;

  gap: 2vw;

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

body .header-place .header .user .avatar
{
  width: 6.5vw;
  height: 6.5vw;

  border-radius: var(--border-radius-small);

  overflow: hidden;
}

body .header-place .header .user .avatar img
{
  max-width: 100%;
}

body .header-place .header .user-data
{
  display: flex;

  flex-direction: column;

  align-items: end;
}

body .header-place .header .user-data .premium
{
  padding: 1px 2px;

  color: var(--light-background);

  background: var(--disable-background);

  border-radius: 3px;

  text-transform: uppercase;

  font-size: 8px;
}

body .header-place .header .user-data .premium.active
{
  background: #6273D9;
}

body .header-place .header .user .name
{
  max-width: 25vw;
  overflow: hidden;
  font-size: 90%;
  text-align: left;

  word-wrap: nowrap;
  white-space: nowrap;
}

body .header-place .header .user .name.holder
{
  min-width: 100px;
  min-height: 20px;

  border-radius: var(--border-radius-small);
}

body .header-place .header .holder
{
  background: var(--light-background);
}

body .header-place .header .logo
{
  position: relative;

  top: -10vw;

  width: 0vw;
  height: 0vw;
}

body .header-place .header .logo a
{
  display: block;
  width: 25vw;
  height: 25vw;
}

body .scroll-container .header-place .header .controls
{
  width: 100vw;

  display: flex;

  gap: 1vw;

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

body .scroll-container .header-place .header .controls.tips-now a
{
  color: #FFF;
}

body .header-place .header .controls .item
{
  display: flex;
  align-items: center;

  padding: 0px;
}

body .header-place .header .item a
{
  display: block;

  line-height: 0;

  padding: 1vw 0.5vw;
}

body .header-place .header .item a.wallet, body .header-place .header .item a.tokens
{
  display: flex;

  font-size: 95%;

  gap: 1vw;

  align-items: center;
}


body .header-place .header .item svg,
body .header-place .header .item img
{
  width: 5vw;
  height: 5vw;
}

body .header-place .header .item img
{

}



body .scene .item
{
  padding: 6px;

  align-self: center;

  text-align: center;
}

body .scene .info
{
  display: flex;

  gap: 20px;

  justify-content: space-between;
} 

body .scene .info .item
{
  position: relative;

  padding: 7px 5px 11px 5px;

  border-radius: var(--border-radius-middle);

  font-weight: bold;
}

body .scene .info .item.large
{
  width: 100%;
}

body .scene .info .item svg, body .scene .info .item img
{
  width: 15px;
  height: 15px;
}

body .scene .info .item .label
{
  display: flex;

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

  font-size: 75%;
}

body .scene .info .item .data
{
  display: flex;

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

  gap: 1vw;

  font-size: 75%;
}

body .scene .info .item .boost
{
  position: absolute;

  top: -3px;
  right: -3px;
  
  font-size: 75%;
  
  color: #F7DE61;
}

body .scene .top-data .finance, body .scene .top-data .tickets
{
  width: 100vw;

  display: flex;
  justify-content: center;

  position: absolute;
  top: 25vw;

  z-index: 2;
}

body .scene .top-data .tickets
{
  top: 36vw;
}

body .scene .top-data .finance.tips-now .tickets
{
  z-index: 0;
}

body .scene .top-data .finance .tile, body .scene .top-data .tickets .tile
{
  display: inline-block;
  padding: 1.3vw 1.8vw 1.6vw 1.8vw;

  align-self: start;

  background: var(--middle-background);
  border-radius: 2vw;

  box-shadow: 0px -2px 2px 0px #6D777EB2 inset;
}

body .scene .top-data .tickets .tile
{
  display: flex;

  gap: 2vw;
}

body .scene .top-data .tickets .ticket
{
  display: flex;

  align-items: center;

  font-size: 90%;
  font-weight: bold;

  gap: 1.5vw;

  justify-content: center;

  text-wrap: nowrap;
}

body .scene .top-data .tickets .ticket .lottery-tickets-place
{
  text-wrap: nowrap;
  white-space: nowrap;
}

body .scene .top-data .tickets .ticket img
{
  width1: 8vw;
  height: 4vw;
}


body .scene .top-data .finance .coins
{
  display: flex;

  align-items: center;

  font-size: 110%;
  font-weight: bold;

  gap: 1.5vw;

  padding: 0px 2px 0px 2px;

  justify-content: center;
}

body .scene .top-data .finance .coins svg, body .scene .top-data .finance .coins img
{
  width: 6vw;
  height: 6vw;
}

body .scene .top-data .tickets .ticket svg
{
  width: 8vw;
  height: 5vw;
}

body .scene .game
{
  cursor: default;

  text-align: center;
}

body .scene .game .slider .arrows
{
  position: absolute;
  width: 100vw;

  top: 18vw;

  z-index: 3;
}

body[data-popup] .scene .game .slider .arrows
{
  z-index: 2;
}

body .scene .game .slider .arrows .arrow
{
  position: absolute;

  padding: 3vh 0vw;

  z-index: 2;
}

body .scene .game .slider .arrows .arrow div
{
  padding: 4vw 0vw;

  line-height: 0px;
}

body .scene .game .slider .arrows .arrow img
{
  width: 10vw;
  height: 10vw;
}

body .scene .game .slider .arrows .arrow.prev
{
  left: 4vw;
}

body .scene .game .slider .arrows .arrow.prev img
{
  transform: scale(-1, 1);
}

body .scene .game .slider .arrows .arrow.next
{
  right: 4vw;
}

body .scene .game .slider .arrows .arrow.disable
{
  filter: grayscale(.5);
  opacity: 50%;
}


/* ccharacter */

body .scene .game .characters-container
{
  position: relative;

  display: flex;

  gap: 10px;
}

body .scene .game .character
{
  position: relative;

  width: 100%;
  min-width: 100%;
}

body .scene .game .character .next-stage 
{
  display: flex;

  gap: 5px;

  margin-bottom: 10px;

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

  font-weight: var(--title-font-weight);
}

body .scene .game .character .next-stage svg
{
  width: 26px;
  height: 24px;
}

body .scene .game .character .next-stage .value
{
  font-size: 110%;

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

body .scene .game .character .page-menu.left
{
  display: flex;

  flex-direction: column;

  gap: 5px;
}




body.character-background
{
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center bottom;

  transition: background 0.3s;

  z-index: -2;
}

body[class$="-page"] 
{
  transition: background 0.3s;
  background-position: bottom center;
}

body.character1
{
  background-image: url('/src/levels/base/bg0.png?v=1.06');
}

body.level-background.level1
{
  background-image: url('/src/levels/base/bg1.png?v=1.06');
}

body.level-background.level2
{
  transition: none;

  background-image: url('/src/levels/base/bg2.png?v=1.06');
}

body.level-background.level2.started
{
  background-image: url('/src/levels/base/bg2_2.png?v=1.06');
}

body.level-background.level3
{
  background-image: url('/src/levels/base/bg3.png?v=1.06');
}

body.level-background.level4
{
  background-image: url('/src/levels/base/bg4.png?v=1.06');
}

body.level-background.level5
{
  background-image: url('/src/levels/base/bg5.png?v=1.06');
}

body.level-background.level6
{
  background-image: url('/src/levels/base/bg6.png?v=1.06');
}

body.level-background.level7
{
  background-image: url('/src/levels/base/bg7.png?v=1.06');
}

body.level-background.level8
{
  background-image: url('/src/levels/base/bg8.png?v=1.06');
}

body.level-background.level9
{
  background-image: url('/src/levels/base/bg9.png?v=1.06');
}

body.level-background.level10
{
  background-image: url('/src/levels/base/bg10.png?v=1.06');
}







body[class*="character"] *[class*="character-layer"]
{
  position: relative;

  width: 100vw;
  height: 70vh;

  padding-top: 0vh;
  padding-bottom: 0vh;
}

body[class*="character"] *[class*="character-layer"]::before
{
  display: none;
  content: "";

  position: absolute;

  bottom: 0px;
  left: 0px;

  width: 100vw;
  height: 100vh;

  background-repeat: no-repeat;
  background-position: center 42vh;
  background-size: 66vw auto;

  transition: all 0.4s;

  opacity: 0;
}
body .scene .game .characters-container .character.active *[class*="character-layer"]::before
{
  opacity: 1;
}

body .scene .tap .characters-container .character.active *[class*="character-layer"]::before
{
  background-size: 60vw auto;
}



body[class*="character"] .character-layer1::before
{
  background-image: url('/src/characters/1/character1.png?v=1.21');
  bottom: 48vw;
  background-size: 45% auto;
  background-position: 14vw bottom;
}
body .scene .tap .characters-container .character.active .character-layer1::before
{
  background-size: 51% auto;
}


body[class*="character"] .character-layer2::before
{
  background-image: url('/src/characters/2/character2.png?v=1.21');
  bottom: 32vw;
  background-size: 42% auto;
  background-position: 26vw bottom;
}
body .scene .tap .characters-container .character.active .character-layer2::before
{
  background-size: 48% auto;
}


body[class*="character"] .character-layer3::before
{
  background-image: url('/src/characters/3/character3.png?v=1.21');
  bottom: 45vw;
  background-size: 50% auto;
  background-position: 17vw bottom;
}
body .scene .tap .characters-container .character.active .character-layer3::before
{
  background-size: 56% auto;
}


body[class*="character"] .character-layer4::before
{
  background-image: url('/src/characters/4/character4.png?v=1.21');
  bottom: 33vw;
  background-size: 51% auto;
  background-position: 11vw bottom;
}
body .scene .tap .characters-container .character.active .character-layer4::before
{
  background-size: 56% auto;
}


body .scene .game .characters-container .character.disable
{
  filter: grayscale(1);
}

body .scene .game .characters-container .character .tap-area
{
  position: relative;

  min-height: 100vh;
}

body .scene .game .characters-container .character .tap-area img
{
  max-width: 100%;
  max-height: 50vh;
}

body .scene .game .characters-container .character .tap-area .levels-container
{
  position: relative;

  display: flex;

  height: 47vh;
  width: 100vw;

  gap: 10px;
}

body .scene .game .characters-container .character .tap-area .levels-container .level
{
  position: relative;

  width: 100%;
  min-width: 100%;

  height: 100vh;
}

body .scene .game .characters-container .character .tap-area .levels-container .level.locked
{
  overflow: hidden;
}

body .scene .game .characters-container .character .tap-area .levels-container .level.locked::before
{
  content: "";

  position: absolute;

  top: 0px;
  left: 0px;

  width: 100vw;
  height: 100vh;

  z-index: 2;

  background: rgba(0, 0, 0, 0.7);
}

body .scene .game .characters-container .character .tap-area .levels-container .level video
{
  position: fixed;

  width: 100vw;

  left: 0px;
  bottom: 0px;

  z-index: -1;
}

body .scene .game .characters-container .character .tap-area .levels-container .level .level-action
{
  position: absolute;
  
  width: 100%;
  bottom: 210px;

  z-index: 10000000;
}

body .scene .game .characters-container .character .tap-area .levels-container .level .level-action .button
{
  font-size: 120%;
}

body .scene .game .characters-container .character .tap-area .levels-container .level.locked.level8 > .gamebox,
body .scene .game .characters-container .character .tap-area .levels-container .level.locked.level9 > .gamebox,
body .scene .game .characters-container .character .tap-area .levels-container .level.locked.level10 > .gamebox
{
  opacity: .7;

  z-index: 2;
}

body .scene .game .characters-container .character .character-menu
{
  position: absolute;
  display: flex;
  flex-direction: column;

  gap: 1vw;

  z-index: 2;

  top: 26vh;

  width: 20vw;
  padding: 0vh 6vw;

  display: none;
}

body .scene .game .boost.active
{
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
}

body .scene .game .boost.active.hyper_tap
{
  background-image: url('/src/hyper_tap_boost_bg.png');
}

body .scene .game .point, body .scene .game .coin, body .scene .game .crystal
{
  position: absolute;

  font-size: 4vw;
  font-weight: var(--title-font-weight);

  color: #FFF;

  z-index: 2;
  text-shadow: 0px 1px 9px rgb(0 0 0 / 70%);

  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
   user-select: none;
}

body .scene .game .point, body .scene .game .coin
{
  display: flex;

  gap: 2px;

  align-items: center;

  flex-direction: column;
}

body .scene .game .point img, body .scene .game .coin img
{
  width: 5.5vw;
}

body .scene .game .point svg, body .scene .game .coin svg
{
  width: 5.5vw;
  height: 5.5vw;
}

body .scene .game .point .icon, body .scene .game .coin .icon
{
  line-height: 0px;
}

body .scene .game .crystal svg
{
  width: 40px;
  height: 32px;
}

body .scene .game .coin
{
  min-width: 25px;

  background-position: top center;
  background-size: 25px auto;
  background-repeat: no-repeat;
  background-image: url('/src/coin.svg');
}

body .scene .game .coin > span
{
  display: inline-block;

  padding-top: 25px;
}

body .scene .bottom-container .block
{
  display: flex;

  padding-bottom: 10px;

  justify-content: space-between;

  gap: 20px;
}

body .scene .energy
{
  position: absolute;
  bottom: 26vw;

  font-size: 90%;

  width: 100%;
  display: flex;
  justify-content: center;
}

body .scene .energy .block
{
  padding: 0.4vw 1.8vw;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;
}

body .scene .bottom-container .energy-value svg
{
  width: 15px;
  height: 25px;
}

body .scene .bottom-container .block img
{
  max-width: 9vw;
}


body .scene .character-items, body .node-detail .character-items
{
  display: flex;
  flex-direction: row;
  gap: 2vw;

  position: absolute;

  z-index: 1;
}

body .scene .character-items.left-items
{
  left: 2vw;
  margin-top: -1vw;
}
body .scene .character-items.right-items
{
  right: 2vw;
  margin-top: -1vw;
}

body .scene .character-items .slot, body .node-detail .character-items .slot
{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 10vw;
  height: 10vw;

  color: #00000044;
  font-size: 7vw;

  background: var(--middle-background);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% auto;
  border-radius: var(--border-radius-small);

  box-shadow: 0px -1px 3px 0px #6D777EB2 inset;
}

body .scene .character-items .slot img, body .node-detail .character-items .slot img
{
  max-width: 75%;
  max-height: 75%;
}

body .scene .character-items .slot:has(img), body .node-detail .character-items .slot:has(img)
{
  background-image: none!important;
}

body .scene .character-items .slot.slot0, body .node-detail .character-items .slot.slot0
{
  background-image: url('/src/slots/rod.svg');
}

body .scene .character-items .slot.slot1, body .node-detail .character-items .slot.slot1
{
  background-image: url('/src/slots/crock.svg');
}

body .scene .character-items .slot.slot2, body .node-detail .character-items .slot.slot2
{
  background-image: url('/src/slots/hook.svg');
}

body .scene .character-items .slot.slot3, body .node-detail .character-items .slot.slot3
{
  background-image: url('/src/slots/line.svg');
}

body .scene .character-items .slot.slot4, body .node-detail .character-items .slot.slot4
{
  background-image: url('/src/slots/bucket.svg');
}

body .scene .character-items .slot.slot5, body .node-detail .character-items .slot.slot5
{
  background-image: url('/src/slots/bait.svg');
}

body .scene .character-items .slot.slot6, body .node-detail .character-items .slot.slot6
{
  background-image: url('/src/slots/medal.svg');
}

body .scene .character-items .slot.slot6
{
  position: absolute;
  
  right: 0;
  top: -12vw; 
}

body .scene .handbook
{
  position: absolute;
  
  bottom: 18vw;
  left: 0;

  width: 88vw;
  
  padding: 0vh 6vw;
}

body .scene .handbook .info
{
  justify-content: center;
}

body .scene .handbook .info.tips-now
{
  position: relative;
}

body .scene .handbook .info .tile
{
  padding: 1.3vw 2vw;

  font-weight: normal;

  gap: 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  align-self: start;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;
}

body .scene .handbook .tab-profit
{
  display: flex;
  flex-direction: row;

  gap: 1vw;
}

body .scene .handbook .tab-profit .data
{
  gap: 0.5vw;
}




body .footer-place
{
  position: fixed;

  display: flex;

  bottom: 0px;

  width: 100vw;
  height: 25vw;

  justify-content: center;

  background-image: url('/src/footer-bg1.png?v=1.01');
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;

  z-index: 6;
}

body .footer-place .footer
{
  position: relative;

  width: 100%;

  display: flex;

  padding-left: 1vw;
  padding-right: 1vw;
  padding-bottom: 2vw;
  padding-top: 6vw;

  justify-content: space-between;

  gap: 10px;

  box-sizing: border-box;
}

body .bottom-menu
{
  display: flex;
  align-items: baseline;

  width: 100%;
  height: 20vw;

  padding-bottom: 2vw;

  justify-content: space-between;

  gap: 0vw;

  border-radius: var(--border-radius-middle);

  z-index: 1;
}

body .bottom-menu .item
{
  position: relative;
  display: flex;

  width: 15vw;
  padding: 2vw;

  flex-direction: column;

  gap: 2px;

  border-radius: var(--border-radius-middle);

  justify-content: center;

  text-align: center;

  font-size: 80%;

  cursor: default;
}

body .bottom-menu .item span
{
  height: 0px;
}

body .bottom-menu .item.active
{
}

body .bottom-menu .item svg
{
  align-self: center;

  width: 10.5vw;
  height: 10.5vw;
}

body .bottom-menu .item:nth-child(1)
{
}

body .bottom-menu .item:nth-child(1) svg
{
}

body .bottom-menu .item:nth-child(2)
{
}

body .bottom-menu .item:nth-child(2) svg
{
}

body .bottom-menu .item:nth-child(3)
{
  width: 20vw;
  height: 0vw;

  bottom: 10.4vw;
}

body .bottom-menu .item:nth-child(3) div
{
  position: relative;

  width: 23.8vw;
  min-height: 23.8vw;
  bottom: 1.8vw;
  left: -1.65vw;
  background: url('/src/game-button-bg1.png?v=1.01');
  background-size: 100% auto;
  background-repeat: no-repeat;

}
body .bottom-menu .item:nth-child(3) svg
{
  position: relative;

  width: 13.2vw;
  height: 13.2vw;

  top: 6.7vw;

  background: var(--middle-background);
  box-shadow: 0px -1px 5px 0px #6D777EB2 inset;

  border-radius: 13.2vw;
}
body .bottom-menu .item:nth-child(3) div span
{
  position: relative;
  top: 11.5vw;

  display: block;

  font-size: 120%;
}


body .bottom-menu .item:nth-child(4) span
{
}

body .bottom-menu .item:nth-child(4)
{
}

body .bottom-menu .item.active:nth-child(4)
{
}
body .bottom-menu .item:nth-child(4) svg
{
}


body .bottom-menu .item:nth-child(5)
{
}
body .bottom-menu .item:nth-child(5) svg
{
}


body .bottom-slide
{
  position: absolute;

  left: -2px;

  width: calc(100% + 2px);

  overflow: hidden;

  border-radius: var(--border-radius-big) var(--border-radius-big) 0px 0px;

  border-top: 1px solid rgba(246, 190, 41, 0.4);
  border-left: 1px solid rgba(246, 190, 41, 0.4);
  border-right: 1px solid rgba(246, 190, 41, 0.4);

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

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

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

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

  background1: var(--light-background);
}

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

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

  padding-bottom: 125px;

  background1: var(--light-background);
}

body .qr-place
{
  display: none;

  text-align: center;

  color: #FFFFFF;
}

body .qr-place.loaded
{
  position: absolute;

  width: 100%;

  z-index: 10;

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

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

body .qr-place.loaded .qr-data
{
  max-width: 70vw;

  padding: 40px 10vw;
  margin: 0px auto;

  border-radius: 15px;

  background: rgba(255, 255, 255, 0.7);
}

body .qr-place.loaded .qr-start
{
  display: flex;

  margin-top: 15px;

  justify-content: center;
}

body .qr-place.loaded .qr-start img,
body .qr-place.loaded .qr-start canvas
{
  max-width: 45vw;

  border: 8px solid #FFF;
}

body .overlay
{
  display: none;

  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;
  height: 100%;

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

  z-index: 2;
}


/* cpopup cpoup */

body .popup
{
  position: absolute;

  bottom: -100vh;

  z-index: 3;

  width: 100vw;

  font-size: 90%;

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

  box-sizing: border-box;

  overflow-x: hidden;
}

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

  left: 0px;

  width: calc(100%);

  padding: 10vw 7vw 30vw 7vw;

  background: var(--dark-background-transparent);

  border-top: var(--border-weight) solid var(--border-light-background);
  border-left: var(--border-weight) solid var(--border-light-background);
  border-right: var(--border-weight) solid var(--border-light-background);

  border-radius: var(--border-radius-big) var(--border-radius-big) 0px 0px;

  box-sizing: border-box;

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

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

  padding: 0 3vw;

  overflow-y: auto;
}

body .popup .popup-content .popup-section
{
  margin-bottom: 15px;
}

body .popup .popup-content .popup-section.hidden
{
  display: none;
}

body .popup .popup-content .popup-section.opacity
{
  opacity: 0;
}

body .popup .popup-content .popup-section.profit-items
{
  min-height: 79px;
}

body .popup .popup-content .popup-section:last-child
{
  margin: 0;
}

body .popup .popup-content .title
{
  padding-bottom: 15px;

  font-size: 135%;

  text-align: center;
}

body .popup .popup-content .subtitle
{
  padding-bottom: 15px;

  font-size: 120%;

  text-align: center;
}

body .popup .popup-content .gallery
{
  padding-bottom: 1em;
}

body .popup .popup-content .gallery .splide
{
  padding-bottom: 2em;
}

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

  margin-bottom: 10px;

  text-align: center;
}

body .popup .popup-content .img-big .image
{
  margin-top: 15px;
  margin-bottom: 15px;

  position: relative;

  height: 25vh;
}

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

  max-height: 100%;
  height: 25vw;

  border-radius: var(--border-radius-middle);
}

body .popup .popup-content .img-big .image > img
{
  position: relative;

  max-width: 100%;
  height: inherit;
}

body .popup .popup-content .image .slide
{
  position: absolute;

  top: 0;

  display: none;

  width: 100%;
  height: 100%;
}

body .popup .popup-content .timer
{
  margin: 20px 0px 20px 0px;

  font-size: 140%;

  text-align: center;
}

body .popup .popup-content .timer.hold-top
{
  margin-top: 0;
}

body .popup .popup-content .text
{
  margin-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;

  text-align: center;

  font-size: 120%;

  line-height: 1.2;
}

body .popup .popup-content .text p, body .popup .popup-content .text > .row
{
  margin: 0px 0px 10px 0px;
}

body .popup .popup-content .text > .row.middle
{
  margin: 0px 0px 5px 0px;
}

body .popup .popup-content .text ul
{
  text-align: left;
  margin: 0vw 2vw 0vw 2vw;
  padding: 0vw;
}

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

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

body .popup .popup-content .text .profits
{
  text-transform: lowercase;
}

body .popup .popup-content .conditions
{
  margin-bottom: 15px;

  font-size: 130%;

  line-height: 1.5;

  text-align: center;
}

body .popup .popup-content .error
{
  margin-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  
  text-align: center;

  font-size: 120%;
  font-weight: bold;

  line-height: 1.5;
}

body .popup .popup-content .days
{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1vw;
}

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

  width: calc(33% - 15px);

  text-align: center;

  padding: 0px;

  border-radius: var(--border-radius-big);
  margin: 5px;

  overflow: hidden;

  background: var(--middle-background);

  filter: grayscale(0);
}

body .popup .popup-content .days .day .day-icon
{
  height: 30vw;
}

body .popup .popup-content .days .day .day-icon svg
{
  width: 15vw;
  height: 15vw;
}

body .popup .popup-content .days .day .day-icon.coin svg
{
  width: 12vw;
  height: 12vw;
}



body .popup .popup-content .days .day .num
{
  padding: 2vw 0vw;
}

body .popup .popup-content .days .day.active, body .popup .days .day.done
{
  filter: grayscale(1);
  opacity: 0.3;
}

body .popup .popup-content .days .day.done
{
  filter: blur(2px);
}

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

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

  padding: 1vw 3px 1vw 3px;

  background: #F6BE2988;
}

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

  padding-bottom: 5px;

  font-size: 90%;

  text-align: center;
}


body .popup .popup-content .buttons .button, body .levels-container .level .level-action .button
{
  max-width: 75%;

  display: flex;

  padding: 2.5vw 4vw;

  font-size: 140%;

  font-weight: var(--title-font-weight);

  background: var(--button-background);

  color: var(--button-color);

  align-items: center;

  justify-content: center;

  border-radius: var(--border-radius-small);
}

body .popup .popup-content .buttons .button.w-100
{
  max-width: 100%;
}

body .popup .popup-content .buttons .button.small
{
  padding: 1.5vw 2vw;

  font-size: 110%;
}


/* cwallet */

body.wallet-page .wallet
{

}


body.wallet-page .wallet .element .buttons
{
  min-width: 27%;

  justify-content: flex-end;

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

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

  box-shadow: none;
  background: var(--button-background);

  padding: 1vw 2vw;
}

body.wallet-page .wallet .buttons.hidden
{
  display: none;
}

body.wallet-page .wallet .tab
{
  display: none;
}

body.wallet-page .wallet .tab ul
{
  padding: 0vw 2vw;
  margin: 2vw 0vw 0vw 0vw;
}

body.wallet-page .wallet .tab ul li
{
  list-style-type: none;
  padding: 0.5vw 0vw 0.5vw 0vw;
}

body.wallet-page .wallet .tab .form
{
  margin: 2vw 2vw;
}

body.wallet-page .wallet .tab.coming
{
  padding: 2vw 10vw;

  text-align: center;
}

body.wallet-page .wallet .ton-wallet-connect
{
  display: flex;

  justify-content: center;
}

body.wallet-page .wallet .ton-wallet-connect > div
{
  margin-top: 5px;
  margin-bottom: 10px;
}

body.wallet-page .wallet .tab .address
{
  max-width: 60vw;

  margin: 0vw;
  
  font-size: 110%;
  
  word-wrap: break-word;
  
  text-align: center;
}

body .alerts
{
  position: absolute;

  top: 5px;
  left: 0px;

  width: 100%;

  z-index: 7;
}

body .alerts .alert
{
  position: relative;

  width: 92%;

  padding: 2px 8px;
  margin: 5px 4%;

  border: 2px solid;
  border-radius: var(--border-radius-small);

  background: var(--light-background);

  box-sizing: border-box;
}

body .alerts .alert.success
{
  border-color: rgba(0, 128, 0, 0.5);
}

body .alerts .alert.warning
{
  border-color: rgba(136, 8, 8, 0.5);
}

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

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

  gap: 5px;

  align-items: center;
}

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

  width: 100%;
  
  gap: 10px;
  
  align-items: center;
}

body .alerts .alert .wrapper .data .icon
{
  line-height: 0;
}

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

body .alerts .alert .close
{
  line-height: 0;

  cursor: pointer;
}

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

body .popup .prices
{
  display: flex;

  flex-direction: column;

  margin-bottom: 10px;

  gap: 5px;

  text-align: center;
}

body .popup .prices .price.top
{
  margin-bottom: 10px;
}

body .popup .prices .price .label
{
  font-size: 140%;
  font-weight: 700;
}

body .popup .stake-control-form
{
  display: flex;

  margin: 0px 15px;

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

  gap: 25px;

  font-size: 160%;
}

body .popup .stake-control-form .stake-control .plus, body .popup .stake-control-form .stake-control .minus
{
  display: block;

  width: 36px;

  padding: 0px 10px;

  background: var(--button-background);

  border-radius: var(--border-radius-middle);

  color: var(--button-color);

  font-size: 140%;

  line-height: 1.2;

  text-align: center;

  box-sizing: border-box;
}

body .popup .stake-control-form .stake-value
{
  text-align: center;
}

body .popup .stake-control-form .stake-value input
{
  max-width: 150px;

  margin: 0px auto;

  color: var(--gold-color);

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

  background: none;
  border: none;

  outline: none;

  text-align: center;
}

body .popup .icon-data
{
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  text-align: center;

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

  line-height: 1;
}

body .popup .icon-data + .icon-data
{
  margin-top: 10px;
}

body .popup .flex-line .icon-data + .icon-data
{
  margin: 0px;
}

body .popup .icon-data svg
{
  width: 26px;
  height: 26px;
}

body .popup .icon-data img
{
  max-width: 26px;
}

body .popup .icon-data > *
{
  display: inline-block;

  vertical-align: middle;
}


/* cbuttons */

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

  gap: 10px;

  margin: 2vw;
}

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

body .buttons.no-flex
{
  display: block;
}

body .buttons.step-top
{
  margin-top: 3vh;
}

body .buttons a.disable, body .buttons.disable a, body .standart-button.disable, body .disable .standart-button
{
  color: var(--hints-color)!important;

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

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;

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

  box-sizing: border-box;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;
}

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

body .button.light
{
  color: var(--gold-color);
  background: var(--button-background) !important;
}

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(--gold-color);
  background: var(--button-background) !important;
}

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

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

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

  font-size: 90%;

  border-radius: 1.8vw;

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

  padding: 1.5vw 2vw;

  height: 7vw;
}

body .button.small.auto
{
  height: auto;
}

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

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

body .button.extra-small
{
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 90%;

  border-radius: 1.8vw;

  margin-left: 0.2vw;
  margin-right: 0.2vw;

  padding: 0.5vw 1.5vw;

  height: 7vw;
}

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

body .button.tip
{
  display: inline-block;

  font-size: 100%;

  border-radius: 1.8vw;

  margin-left: 0.2vw;
  margin-right: 0.2vw;

  padding: 1.5vw 3vw;

  height: auto;
}


body .popup .attach-file-place
{
  width: 100%;
}

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

  width: 80%;

  padding: 0px 20px;
  margin: 0px auto;

  background: #23282B;

  border-radius: var(--border-radius-big);

  font-size: 140%;
  line-height: 2.5;

  text-align: left;

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

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

body .popup .popup-content .img-list .item:hover
{
  transform: scale(1.05);

  background: rgba(0, 0, 0, 0.25);
}

body .splash
{
  position: absolute;

  display: none;

  top: 0px;
  left: 0px;

  z-index: 3;

  width: 100vw;
  height: 100vh;

  box-sizing: border-box;

  overflow: hidden;

  background: rgba(0, 0, 0, 0.9);
}

body .splash-content
{
  display: flex;

  height: 100%;

  padding: 30px 50px;
  
  align-items: center;
  justify-content: center;

  font-size: 120%;
  font-weight: 700;

  color: #FFF;

  text-align: center;
}

body .pages-data .system-data
{
  position: absolute;

  bottom: 4.5vw;
  left: 2vw;

  margin: 0px;

  padding: 5px;

  font-size: 80%;

  border-radius: var(--border-radius-small);
}

body .page #boosts-content  .title
{
  text-align: center;
}

body .pages-data .line.boosts
{
  position: absolute;

  display: flex;

  bottom: 2.5vw;
  left: 2vw;

  width: calc(100% - 4vw);

  gap: 8px;

  justify-content: space-between;

  flex-direction: row-reverse;
}

body .pages-data .line.boosts .elements
{
  display: flex;

  gap: 8px;

  max-width: 120px;

  flex-wrap: wrap;

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

body .pages-data .line.boosts .element
{
  overflow: unset;
}

body .pages-data .line.boosts .element .icon
{
  line-height: 0;
}

body .pages-data .line.boosts .element .icon img
{
  width: 10vw;
  height: 10vw;
  box-shadow: 0px 0px 12px 2px var(--gold-color-light);
}


body .pages-data .line.boosts .element .count
{
  color: var(--gold-color);
  font-size: 80%;

  text-shadow: 0vw 0vw 3px var(--base-text-color);
}






body .pages-data .line.boosts .level
{
  width: 80px;

  text-align: left;
}

body .pages-data .line.boosts .list
{
  margin-left: 0px;
  margin-right: 0px;
}


/* ctabs */
body .page .tabs_list
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  margin: 0px auto 20px auto;
}

body .page .tabs_list .button.small
{
  min-height: 7vw;
  height: auto;

  font-size: 80%;
}

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


/* cfriends */

body .page .content.friends
{

}

body .page.friends
{
  text-align: center;
}

body .page.friends .page-block.info
{

}

body .page.friends .page-block.info .block
{
  width1: 50%;
}

body .page.friends .page-block.info .block .button
{
  background: var(--button-background);
}

body .page.friends .page-block.info .block img,
body .page.friends .page-block.info .block svg
{
  width: 5vw;
  height: 5vw;
}


body .page.friends .page-block .percents
{
  justify-content: center;

  margin: 0vw 0vw 3vw 0vw;
}

body .page.friends .page-block .percents .block
{
  flex-direction: column;
}

body .page.friends .page-block .list
{
  padding: 0px;

  background: none;

  border-radius: 0px;

  box-shadow: none;
}

body .page.friends .page-block .list .element .one-line-link
{
  display: inline-block;
  
  max-height: 1.3em;
  
  overflow: hidden;

  line-height: 1.3em;
}

body .page.friends .page-block .list .element .date
{
  font-size: 90%;
  font-style: italic;
}

body .page.friends .tabs
{
  margin: 0;
}

body .page .content .tiles-place .profit
{
  margin-bottom: 5vw;

  font-size: 90%;

  text-align: center;
}

body .page .content .tiles-place .profit:last-child
{
  margin-bottom: 0;
}

body .page .content .tiles,
body .page .content .tiles3,
body .page .content .tiles4,
body .popup .popup-content .tiles,
body .popup .popup-content .tiles3,
body .popup .popup-content .tiles4
{
  display: flex;

  gap: 5px;

  justify-content: center;

  align-items: start;

  flex-wrap: wrap;
}

body .page .content .tiles .tile,
body .popup .popup-content .tiles .tile
{
  width: calc(50% - 5px);

  padding: 1vw;

  border: 0px solid var(--border-light-background);

  background: var(--middle-background);

  border-radius: var(--border-radius-big);

  box-sizing: border-box;
}

body .page .content .tiles.tiles3 .tile,
body .popup .popup-content .tiles.tiles3 .tile
{
  width: calc(33% - 5px);

  padding: 0px;
}

body .page .content .tiles.tiles4 .tile,
body .popup .popup-content .tiles.tiles4 .tile
{
  width: calc(25% - 5px);

  padding: 0px;
}

body .page .content .tiles.compact .tile
{
  width: calc(16.5% - 5px);

  padding: 0px;

  background: none;

  border-radius: 0px;
}

body .page .content .tiles .tile.disable,
body .popup .popup-content .tiles .tile.disable
{
  filter: grayscale(1);
  opacity: 50%;
}

body .page .content .tiles .tile .line,
body .popup .popup-content .tiles .tile .line
{
  display: flex;

  gap: 5px;

  margin: 0px;

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

body .page #friends-content .list
{
  margin-left: 0px;
  margin-right: 0px;
}

body .page #friends-content .line
{
  gap: 6px;
}

body .page #friends-content .copy, 
body .page #friends-content .send,
body .page #friends-content .invite
{
  width: 20px;

  text-align: center;
}

body .page #friends-content .copy img, 
body .page #friends-content .send img,
body .page #friends-content .invite img
{
  width: 20px;
}




body .page .content .skills .title
{
  text-align: center;
  font-weight: 300;
  font-weight: var(--title-font-weight);
}

body .page .content .skills .combo
{
}

body .page .content .skills .combo .combo-panel
{
  display: flex;
  flex-direction: row;
  align-items: center;

  min-height: 20px;

  padding: 8px;

  margin-bottom: 2vw;

  border-radius: var(--border-radius-middle);
  background: var(--dark-background);
}

body .page .content .skills .combo .combo-panel .left-block,
body .page .content .skills .combo .combo-panel .right-block
{
  font-size: 105%;
  width: 50%;
}

body .page .content .skills .combo .combo-panel .right-block
{
  text-align: right;
}

body .page .content .skills .combo .combo-panel svg
{
  position: relative;
  margin-bottom: -3px;

  width: 4vw;
  height: 4vw;
}

body .page .content .skills .combo-skills
{
  display: flex;

  flex-direction: row;
  gap: 10px;

  margin-bottom: 2vw;

  align-items: stretch;
  justify-content: space-evenly;
}

body .page .content .skills .combo-skills .combo-skill
{
  overflow: hidden;
  width: calc(33% - 7px);

  border-radius: var(--border-radius-middle);

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

body .page .content .skills .combo-skills .combo-skill .secret
{
  display: flex;

  height: calc(100% - 20px);

  padding: 10px 0px;

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

  text-align: center;
}

body .page .content .skills .combo-skills .combo-skill .secret img
{
  width: 60%;
}

body .page .content .skills .combo-skills .combo-skill .skill
{
  font-size: 100%;

  padding: 15px;
  text-align: center;
}

body .page .content .skills .combo-skills .combo-skill .skill img
{
  width: 70%;
  margin-bottom: 3px;

  border-radius: var(--border-radius-small);
}


body .page .content .skills .skill-type-group .specials-type-group
{
  padding-bottom: 15px;
}

body .page .content .skills .skill-type-group .specials-type-group:last-child
{
  padding: 0px;
}

body .page .content .skills .tiles .tile .name
{
  font-size: 95%;

  padding-top: 1vw;
  padding-bottom: 1vw;

  text-align: center;
}

body .page .content .skills .tiles .tile .header
{
  display: flex;

  gap: 5px;

  align-items: center;
}

body .page .content .skills .tiles .tile .header .icon
{
  width: 18vw;
  height: 18vw;

  padding: 0px 5px;

  text-align: left;

  font-size: 70%;
}

body .page .content .skills .tiles .tile .header .icon img
{
  max-width: 25vw;
  position: absolute;
  margin-top: -3vw;
  margin-left: -3vw;

  line-height: 0px;
  border-radius: var(--border-radius-small);
}

body .page .content .skills .tiles .tile .data
{
  font-size: 85%;

  line-height: 1.3;
}

body .page .content .skills .tiles .tile .data .level
{
  padding-bottom: 5px;
}

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

  font-size: 80%;
}

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

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

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

body .page .content .skills .tiles .tile
{
  margin-bottom: 8px;
}

body .page .content .skills .tiles .tile .coins .value
{
  display: flex;

  gap: 5px;

  font-size: 100%;

  align-items: center;
}

body .page .content .skills .tiles .tile .coins .value svg, body .page .content .skills .tiles .tile .coins .value img
{
  width: 12px;
  height: 12px;
}

body .page .content .skills .tiles .tile .footer
{
  padding-top: 5px;

  font-size: 90%;
}

body .page .content .skills .tiles .tile .footer .disable
{
  font-size: 90%;

  line-height: 130%;
}

body .page .content .skills .tiles .tile .footer .skill-timer
{
  color: #FFF;

  animation: pulse 3.5s linear infinite;
}

body .page .content .skills .skill-type-group .specials-type-group .tile
{
  border-radius: var(--border-radius-middle);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.disable
{
  filter: grayscale(1);
  opacity: 50%;
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color1
{
  background: linear-gradient(180deg,#F85C5B  0%, #803130 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color2
{
  background: linear-gradient(180deg, #09DAF7 0%, #274E56 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color3
{
  background: linear-gradient(180deg, #9747FF 0%, #44335A 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color4
{
  background: linear-gradient(180deg, #1CF1D7 0%, #347571 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color5
{
  background: linear-gradient(180deg, #542CF5 0%, #2A3145 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color6
{
  background: linear-gradient(180deg, #F57519 0%, #522B10 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color7
{
  background: linear-gradient(180deg, #1ABE48 0%, #263D2C 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile.color8
{
  background: linear-gradient(180deg, #F85C5B 0%, #803130 100%);
}

body .page .content .skills .skill-type-group .specials-type-group .tile,
body .page .content .skills .skill-type-group .specials-type-group .tile a
{
  color: #FFFFFF;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .name
{
  padding-top: 10px;
  padding-bottom: 10px;

  text-align: center;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .header
{
  flex-direction: column;

  gap: 10px;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .header .icon img
{
  max-width: 60%;

  border-radius: var(--border-radius-middle);
}

body .page .content .skills .skill-type-group .specials-type-group .tile .header .data
{
  width: 100%;

  display: flex;
  
  flex-direction: column-reverse;
  
  gap: 5px;

  text-align: center;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .header .data .level
{
  padding: 0px;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .coins
{
  display: flex;
  
  gap: 5px;
  
  align-items: center;
  justify-content: center;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .coins .value
{
  justify-content: center;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .hint
{
  padding: 0px;

  color: #fff;
}

body .page .content .skills .skill-type-group .specials-type-group .tile .footer
{
  padding-top: 10px;
}

body .content .map-area, body .content .liteup-area, body .content .map-area, body .content .home-area
{
  position: absolute;

  width: 100vw;
  height: 100%;

  left: 0px;
  top: 0px;
}

body .content .map-area svg, body .content .home-area svg
{
  width: 100%;
  height: 100%;
}

body .content .map-area polygon, body .content .home-area polygon
{
  opacity: 0;
}

body .content .map-area .labels, body .content .home-area .labels
{
  position: relative;
}

body .content .map-area .labels .label, body .content .home-area .labels .label
{
  position: absolute;

  padding: 4px 1vw;

  color: var(--light-background);

  background: #6273D9;
  border-radius: var(--border-radius-extra-small);

  font-size: 80%;

  text-transform: uppercase;

  box-shadow: 0px -1.5px 1.5px 0px rgba(232, 232, 232, 0.8) inset;
  box-shadow: 0.8px 0px 1.5px 0px rgba(232, 232, 232, 0.8) inset;
  box-shadow: -0.8px 0px 1.5px 0px rgba(232, 232, 232, 0.8) inset;
}

body .content .map-area .labels .label.commands
{
  top: 200px;
  left: 25px;
}

body .content .map-area .labels .label.petstore
{
  top: 360px;
  left: 10px;
}

body .content .map-area .labels .label.fishing
{
  top: 510px;
  left: 185px;
}

body .content .map-area .labels .label.library
{
  top: 310px;
  left: 90px;
}

body .content .map-area .labels .label.lottery
{
  top: 390px;
  left: 170px;
}

body .content .map-area .labels .label.premium-lottery
{
  top: 270px;
  left: 180px;
}

body .content .map-area .labels .label.market
{
  top: 395px;
  right: 50px;
}

body .content .map-area .labels .label.mart
{
  top: 450px;
  right: 25px;
}

body .content .map-area .labels .label.exhibition
{
  top: 155px;
  right: 25px;
}

body .content .map-area .labels .label.earn
{
  top: 320px;
  right: 15px;
}

body .content .map-area .labels .label.square
{
  top: 515px;
  left: 290px;
}

body .content .map-area .labels .label.flag
{
  padding: 0;

  background: none;

  box-shadow: none;
}

body .content .map-area .labels .label.flag a
{
  display: inline-block;

  width: 30px;
  height: 30px;

  background-size: 100% auto;
  background-repeat: no-repeat;
}

body .content .map-area .labels .label.chat-ru
{
  top: 540px;
  left: 275px;
}

body .content .map-area .labels .label.chat-ru a
{
  background-image: url('/src/chat_ru.png?v=1.1');
}

body .content .map-area .labels .label.chat-en
{
  top: 540px;
  left: 305px;
}

body .content .map-area .labels .label.chat-en a
{
  background-image: url('/src/chat_en.png?v=1.1');
}

body .content .map-area .labels .label.chat-ua
{
  top: 540px;
  left: 335px;
}

body .content .map-area .labels .label.chat-ua a
{
  background-image: url('/src/chat_ua.png?v=1.1');
}

body .content .map-area .labels .label.tree
{
  top: 400px;
  left: 105px;
}

body .content .home-area .labels .label.legendary
{
  top: 208px;
  left: 35px;
}

body .content .home-area .labels .label.simple
{
  top: 205px;
  right: 35px;
}

body .content .home-area .labels .label.rare
{
  top: 272px;
  left: 35px;
}

body .content .home-area .labels .label.collection
{
  top: 292px;
  right: 35px;
}

body .content .home-area .labels .label.unusual
{
  top: 344px;
  left: 35px;
}

body .content .home-area .labels .label.living
{
  top: 380px;
  right: 35px;
}

body .content .home-area .labels .label.pantry
{
  top: 438px;
  left: 35px;
}

body .content .home-area .labels .label.kitchen
{
  top: 525px;
  right: 35px;
}

/* CLands */

body .page .content .skills .skill-type-group
{

}

body .page .content .lands .areas,
body .popup .popup-content .img-list
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;

  gap: 10px;

  margin-bottom: 15px;
}

body .page .content .lands .areas .area,
body .popup .popup-content .img-list .item
{
  width: calc(33% - 24px);
  padding: 8px 7px;

  background: var(--dark-background);
  border-radius: var(--border-radius-small);

  transition: transform .3s;
}

body .page .content .lands .areas .area.disable,
body .popup .popup-content .img-list .item.disable
{
  filter: grayscale(.5);
  opacity: 50%;
}

body .page .content .lands .areas .area.denied,
body .popup .popup-content .img-list .item.denied
{
  filter: grayscale(1);
  opacity: 75%;
}

body .page .content .lands .areas .area img,
body .popup .popup-content .img-list .item img
{
  max-width: 100%;
  border-radius: var(--border-radius-middle);

  padding-bottom1: 2vw;
}

body .popup .popup-content .img-list .item .label.small
{
  font-size: 70%;

  text-align: center;
}

body .areas .area .labels, body .page .content .cards-list .card .labels
{
  display: flex;

  flex-direction: column;

  gap: 5px;

  align-items: center;
}

body .areas .area .labels-group, body .cards-list .card .labels-group
{
  display: flex;

  flex-direction: column;

  gap: 10px;
}

body .areas .area .labels .label, body .cards-list .card .labels .label
{
  display: flex;

  gap: 5px;

  align-items: center;
}

body .areas .area .label.small svg, body .areas .area .label.small img
{
  width: 16px;
  height: 16px;

  vertical-align: middle;
}

body .page .content .lands .areas .area .label.small,
body .page .content .cards-list .card .label.small
{
  padding-bottom1: 5px;

  font-size: 75%;

  text-align: center;
}

body .img-list .item .label.small svg,
body .cards-list .card .label.small svg
{
  width: 20px;
  height: 20px;

  vertical-align: middle;
}


body .page .content .skills .skill-type-group .cards, body .page .content .cards-list
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;

  gap: 10px;

  margin-bottom: 15px;
}

body .page .content .cards-list
{
  margin-top: 15px;
}

body .page .content .skills .skill-type-group .cards .card, body .page .content .cards-list .card
{
  display: flex;

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

  flex-direction: column;

  width: calc(25% - 24px);

  padding: 3vw;

  background: var(--dark-background);
  border-radius: var(--border-radius-middle);
}

body .page .content .cards-list.columns3 .card
{
  width: calc(33% - 24px);
}

body .page .content .cards-list.columns2 .card
{
  width: calc(50% - 8vw);
}

body .page .content .cards-list .title
{
  font-size: 90%;
  font-weight: normal;
  margin: 0vw 0vw 3vw 0vw;
}

body .page .content .cards-list .profit
{
  margin-bottom: 3vw;
}

body .page .content .cards-list .card .labels .label svg, body .page .content .cards-list .card .labels .label img
{
  width: 16px;
  height: 16px;
}

body .page .content .skills .skill-type-group .cards .card.backlight, body .page .content .cards-list .card.backlight
{
  border: 1px solid var(--gold-color);
}

body .page .content .skills .skill-type-group .cards .card img, body .page .content .cards-list .card img
{
  max-width: 100%;
  border-radius: var(--border-radius-middle);
}


body .popup .popup-content .land
{

}

body .popup .popup-content .land .image
{
  height: 220px;
}

body .popup .popup-content .land .labels
{
  display: flex;

  flex-direction: column;

  padding-top: 10px;

  gap: 5px;
}

body .popup .popup-content .land .labels .label
{
  display: flex;

  gap: 5px;

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

body .popup .popup-content .land .labels .label svg, body .popup .popup-content .land .labels .label img
{
  width: 25px;
  height: 25px;
}

body .popup .labels-group
{
  display: flex;

  flex-direction: column;

  gap: 10px;
}

body .popup .labels .label
{
  font-size: 120%;
  font-weight: var(--title-font-weight);
}

body .popup .labels .label.warning
{
  color: var(--warning-color);
}

/* CAuction */

body .auctions
{

}

body .auctions .card
{

}

body .auctions .card .name
{

  font-size: 95%;
  text-align: center;

  margin-top: 5px;
  margin-bottom: 5px;
}

body .auctions .card .lable.small
{
  padding: 0px;
}


body .auctions .card .stake
{
  margin-top: 10px;
}

body .auctions .card .timer
{
  margin-top: 5px;
}




body .compact .sub-buttons
{
  margin-bottom: 0;
}

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

  gap: 10px;

  margin: 2vw 5vw;
}

body .sub-buttons.column
{
  flex-direction: column;

  align-items: center;
}

body .sub-buttons a
{
  display: flex;

  height: 8vw;

  padding: 2.5vw 4vw;

  gap: 5px;

  font-size: 140%;

  font-weight: var(--title-font-weight);

  background: var(--button-background);

  color: var(--button-color);

  align-items: center;

  justify-content: center;

  border-radius: var(--border-radius-small);

  box-sizing: border-box;
}

body .sub-buttons a.small
{
  height: auto;

  padding: 1.5vw 2vw;

  font-size: 110%;
}

body .standart-button.gap-15
{
  gap: 15px;
}

body .standart-button > span
{
  display: flex;

  gap: 3px;

  align-items: center;
}

body .standart-button svg, body .standart-button img, body .sub-buttons svg, body .sub-buttons img
{
  width: 20px;
  height: 20px;
}




body .filter
{
  padding: 4px;

  margin-bottom: 15px;

  font-size: 120%;

  border-radius: var(--border-radius-middle);

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

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

  gap: 1vw;

  flex-wrap: wrap;

  justify-content: center;
}

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

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

  font-size: 80%;

  text-align: center;

  padding: 7px 4.5vw;

  align-items: center;

  gap: 1.2vw;
}

body .filter > a.active
{
  border-radius: var(--border-radius-small);

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

body .filter > a img
{
  max-width: 5vw;
  max-height: 5vw;
}

@keyframes pulse 
{
  0% 
  {
    transform: scale(0.85);
    opacity: 0.5;
  }

  25% 
  {
    transform: scale(0.95);
    opacity: 1;
  }

  50% 
  {
    transform: scale(1.05);
    opacity: 1;
  }

  75% 
  {
    transform: scale(0.95);
    opacity: 1;
  }

  100% 
  {
    transform: scale(0.85);
    opacity: 0.5;
  }
}


/* Earn Page */

body #earn-content
{

}

/* Earn Page */


.levels-container .level .gameboxes,
.kitten-detail .gameboxes
{
  position: absolute;
  top: 43vw;

  display: flex;
  flex-direction: column;

  gap: 2vw;

  z-index: 0;
}


.levels-container .level .level-title
{
  position: absolute;
  top:16vw;
  right: 4vw; 

  display: inline-block;
  padding: 0.4vh 2vw 1vw 2vw;

  align-self: start;

  background: var(--middle-background);
  border-radius: 1.7vw;

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;
}


.levels-container .level .gamebox0,
.kitten-detail .gameboxes .gamebox0
{
  position: absolute;
  top: 35vh;
  width: 100vw;
  height: 40vw !important;
}

.levels-container .level .gamebox0 .boxskin,
.kitten-detail .gameboxes .gamebox0 .boxskin
{
  width: 30vw !important;
  height: 40vw !important;
}


.levels-container .level .locked-title
{
  position: absolute;
  
  top: 50vh;
  
  width: 96vw;

  margin: 0 2vw;

  color: #FFFFFF;
  
  font-size: 6vw;

  text-align: center;

  z-index: 3;
}
.levels-container .level .locked-title .button
{
  font-size: 6vw;
  padding: 0.5vh 3vw 1.5vw 3vw;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -3px 3px 0px #6D777EB2 inset;
}

.levels-container .level .locked-hint
{
  position: absolute;
  top: 57vh;
  width: 70vw;

  color: #FFFFFF;
  font-size: 3vw;

  text-align: center;

  margin: 0vw 15vw 0vw 15vw;

  z-index: 2;
}


.levels-container .level.locked .gameboxes
{
  opacity: 0.90;

  z-index: 2;
}

.levels-container .level .gameboxes.left-gameboxes,
.kitten-detail .gameboxes.left-gameboxes
{
  left: 2vw;
}

.levels-container .level .gameboxes.right-gameboxes,
.kitten-detail .gameboxes.right-gameboxes
{
  right: 2vw;
}

.levels-container .level .gamebox,
.kitten-detail .gamebox
{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5vw;

  height: 29vw;
}

.levels-container .level .gamebox.closed,
.kitten-detail .gamebox.closed
{
  opacity: 0.5;
}


.levels-container .level .gamebox .name,
.kitten-detail .gamebox .name
{
  max-width: 15vw;
  overflow: hidden;

  height: 3vw;
  padding: 0.5vh 1.5vw 1.5vw 1.5vw;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;

  font-size: 2.5vw;

  text-align: center;
}

.levels-container .level .gamebox .boxskin,
.kitten-detail .gamebox .boxskin
{
  width: 18vw;
  height: 26vw;

  margin: 0vw auto;

  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;

  z-index: 2;
}
.levels-container .level .gameboxes.right-gameboxes .gamebox .boxskin,
.kitten-detail .gameboxes.right-gameboxes .gamebox .boxskin
{
  transform: scale(-1, 1);
}

.levels-container .level .gamebox0 .boxskin,
.kitten-detail .gameboxes .gamebox0 .boxskin,
.kitten-detail .gameboxes .gamebox0 .boxskin,
.boxpopup .gamebox1 .boxskin
{
  background-image: url('/src/gameboxes/gamebox0.png?v=1.02');
}

.levels-container .level .gamebox2 .boxskin,
.levels-container .level .gamebox3 .boxskin,
.kitten-detail .gameboxes .gamebox2 .boxskin,
.kitten-detail .gameboxes .gamebox3 .boxskin,
.boxpopup .gamebox2 .boxskin,
.boxpopup .gamebox3 .boxskin
{
  background-image: url('/src/gameboxes/gamebox1.png?v=1.02');
}

.levels-container .level .gamebox2.open .boxskin,
.levels-container .level .gamebox3.open .boxskin,
.kitten-detail .gameboxes .gamebox2.open .boxskin,
.kitten-detail .gameboxes .gamebox3.open .boxskin,
.boxpopup .gamebox2.open .boxskin,
.boxpopup .gamebox3.open .boxskin
{
  background-image: url('/src/gameboxes/gamebox1_opened.png?v=1.02');
}

.levels-container .level .gamebox4 .boxskin,
.levels-container .level .gamebox5 .boxskin,
.kitten-detail .gameboxes .gamebox4 .boxskin,
.kitten-detail .gameboxes .gamebox5 .boxskin,
.boxpopup .gamebox4 .boxskin,
.boxpopup .gamebox5 .boxskin
{
  background-image: url('/src/gameboxes/gamebox2.png?v=1.02');
}

.levels-container .level .gamebox4.open .boxskin,
.levels-container .level .gamebox5.open .boxskin,
.kitten-detail .gameboxes .gamebox4.open .boxskin,
.kitten-detail .gameboxes .gamebox5.open .boxskin,
.boxpopup .gamebox4.open .boxskin,
.boxpopup .gamebox5.open .boxskin
{
  background-image: url('/src/gameboxes/gamebox2_opened.png?v=1.02');
}

.levels-container .level .gamebox6 .boxskin,
.levels-container .level .gamebox7 .boxskin,
.kitten-detail .gameboxes .gamebox6 .boxskin,
.kitten-detail .gameboxes .gamebox7 .boxskin,
.boxpopup .gamebox6 .boxskin,
.boxpopup .gamebox7 .boxskin
{
  background-image: url('/src/gameboxes/gamebox3.png?v=1.02');
}

.levels-container .level .gamebox6.open .boxskin,
.levels-container .level .gamebox7.open .boxskin,
.kitten-detail .gameboxes .gamebox6.open .boxskin,
.kitten-detail .gameboxes .gamebox7.open .boxskin,
.boxpopup .gamebox6.open .boxskin,
.boxpopup .gamebox7.open .boxskin
{
  background-image: url('/src/gameboxes/gamebox3_opened.png?v=1.02');
}


/* ckittens */

.levels-container .level .kittens,
.liteup-nodes-container .trees
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: flex-start;
  align-items: start;

  gap: 2vw;

  margin: calc(100vh - 21vw) 2vw 0vw 2vw;

  padding-bottom: 30vw;
}

.kittens-list
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: flex-start;
  align-items: start;

  gap: 2vw;

  margin: 2vw 2vw 0vw 2vw;
}

.kittens-list.hold
{
  margin-left: 0;
  margin-right: 0;
}

.kittens-list.kittens-prize-list
{
  gap: 0;

  align-items: center;

  justify-content: center;
}

.levels-container .level .kittens .kitten,
.liteup-nodes-container .trees .tree
{
  padding: 1.5vw;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;

  font-size: 2.5vw;

  width: 11.325vw;
}

.levels-container .level .kittens .kitten, .kittens-list .kitten
{
  position: relative;
}

.levels-container .level .kittens .kitten .label, .kittens-list .kitten .label, body .page .content .catalog .tile .top-data .label
{
  position: absolute;
}

.levels-container .level .kittens .kitten .label svg
{
  max-width: 15px;
  max-height: 15px;
}

.levels-container .level .kittens .kitten .label.top, .kittens-list .kitten .label.top
{
  top: 2px;
}

.levels-container .level .kittens .kitten .label.left, .kittens-list .kitten .label.left
{
  left: 2px;
}

.levels-container .level .kittens .kitten .label.right, .kittens-list .kitten .label.right
{
  right: 2px;
}

.kittens-list .kitten
{
  padding: 1.5vw;

  background: var(--middle-background);
  border-radius: var(--border-radius-small);

  box-shadow: 0px -2px 3px 0px #6D777EB2 inset;

  font-size: 3vw;

  width: 16.5vw;

  text-align: center;
}

.kittens-list .kitten .label svg
{
  max-width: 17px;
  max-height: 17px;
}

.kittens-list.compact .kitten
{
  width: 14.5vw;
}

.kittens-list.kittens-prize-list .kitten
{
  position: relative;

  width: 25vw;

  background: none;

  box-shadow: none;

  border-radius: none;
}

.kittens-list.kittens-prize-list .kitten .kitten-skin
{
  height: 33vw;
}

.kittens-list.kittens-prize-list .kitten .kitten-info-place
{
  position: absolute;

  top: 0px;

  width: 100%;
}

.kittens-list.kittens-prize-list .kitten .kitten-info
{
  position: relative;

  display: inline-block;

  padding: 1vw 1.5vw;

  background: rgba(255, 255, 255, .9);

  border-radius: 2vw;
}

.kittens-list.kittens-prize-list .kitten .kitten-info .name
{
  padding: 0px;
}

.levels-container .level .kittens .kitten .boxes,
.kittens-list .kitten .boxes,
.liteup-nodes-container .trees .tree .boxes
{
  font-size: 110%;
  color: var(--light-text-color);

  display: flex;
  justify-content: space-between;

  position: relative;
  height: 0vw;
  top: -11vw;
}

.levels-container .level .kittens .kitten .boxes .left,
.kittens-list .kitten .boxes .left,
.liteup-nodes-container .trees .tree .boxes .left
{
  margin-left: -0.75vw;
}

.levels-container .level .kittens .kitten .boxes .right,
.kittens-list .kitten .boxes .right,
.liteup-nodes-container .trees .tree .boxes .right
{
  margin-right: -0.75vw;
}

.levels-container .level .kittens .kitten .boxes .center,
.levels-container .level .kittens .kitten .items .center,
.kittens-list .kitten .items .center,
.liteup-nodes-container .trees .tree .boxes .center
{
  width: 100%;
}

.levels-container .level .kittens .kitten .items,
.kittens-list .kitten .items
{
  font-size: 115%;
  color: var(--light-text-color);

  display: flex;
  justify-content: space-between;

  position: relative;
}

.levels-container .level .kittens .kitten .items .gold,
.kittens-list .kitten .items .gold
{
  color: #FFAA1D!important;
}

.levels-container .level .kittens .kitten .items .right,
.levels-container .level .kittens .kitten .items .left,
.kittens-list .kitten .items .right,
.kittens-list .kitten .items .left
{
  white-space: nowrap;
}

.levels-container .level .kittens .kitten .items .left,
.kittens-list .kitten .items .left
{
  margin-left: -0.5vw;
}

.levels-container .level .kittens .kitten .items .right,
.kittens-list .kitten .items .right
{
  margin-right: -0.5vw;
}

.levels-container .level .kittens .kitten .name,
.kittens-list .kitten .name
{
  max-width: 100%;
  max-height: 12px;

  overflow: hidden;
  
  line-height: 12px;
}

.kittens-list .kitten .name
{
  padding-top: 5px;

  max-height: 14px;

  line-height: 14px;
}

.kittens-list .kitten .name.hold
{
  padding: 0;
}

.kittens-list .kitten .owner, .kittens-list .kitten .command
{
  max-width: 100%;
  max-height: 12px;

  overflow: hidden;

  line-height: 12px;

  font-size: 2.5vw;

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

.kittens-list .kitten .command
{
  max-height: inherit;

  line-height: inherit;

  font-size: 2.2vw;
}

.levels-container .level .kittens .kitten.sync
{
  
}

.levels-container .kittens .kitten .kitten-skin,
.kittens-list .kitten .kitten-skin,
.liteup-nodes-container .trees .tree .tree-skin
{
  display: flex;

  width: 100%;
  height: 12vw;

  margin-bottom: 0vw;

  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat; 
}

.kittens-list .kitten .kitten-skin
{
  height: 16vw;
}

.kittens-list.compact .kitten .kitten-skin
{
  height: 14vw;
}

.levels-container .level .kittens .kitten.r2, 
.kittens-list .kitten.r2,
.levels-container .level .kittens .kitten.r2 .boxes,
.levels-container .level .kittens .kitten.r2 .items
{
  color: #7bc390;
}

.levels-container .level .kittens .kitten.r3, 
.kittens-list .kitten.r3,
.levels-container .level .kittens .kitten.r3 .boxes,
.levels-container .level .kittens .kitten.r3 .items
{
  color: #6f9bfb;
}

.levels-container .level .kittens .kitten.r4, 
.kittens-list .kitten.r4,
.levels-container .level .kittens .kitten.r4 .boxes,
.levels-container .level .kittens .kitten.r4 .items
{
  color: #bb8add;
}

.levels-container .level0 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l0 .kitten-skin,
.levels-container .level0 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten1m.png');
}

.levels-container .level0 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten1f.png');
}

.levels-container .level0 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten2m.png');
}

.levels-container .level0 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten2f.png');
}

.levels-container .level0 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten3m.png');
}

.levels-container .level0 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten3f.png');
}

.levels-container .level0 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten4m.png');
}

.levels-container .level0 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l0 .kitten-skin
{
  background-image: url('/src/cats/0/kitten4f.png');
}



.levels-container .level1 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l1 .kitten-skin,
.levels-container .level1 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten1m.png');
}

.levels-container .level1 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten1f.png');
}

.levels-container .level1 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten2m.png');
}

.levels-container .level1 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten2f.png');
}

.levels-container .level1 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten3m.png');
}

.levels-container .level1 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten3f.png');
}

.levels-container .level1 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten4m.png');
}

.levels-container .level1 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l1 .kitten-skin
{
  background-image: url('/src/cats/1/kitten4f.png');
}


.levels-container .level2 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l2 .kitten-skin,
.levels-container .level2 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten1m.png');
}

.levels-container .level2 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten1f.png');
}

.levels-container .level2 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten2m.png');
}

.levels-container .level2 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten2f.png');
}

.levels-container .level2 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten3m.png');
}

.levels-container .level2 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten3f.png');
}

.levels-container .level2 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten4m.png');
}

.levels-container .level2 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l2 .kitten-skin
{
  background-image: url('/src/cats/2/kitten4f.png');
}


.levels-container .level3 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l3 .kitten-skin,
.levels-container .level3 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten1m.png');
}

.levels-container .level3 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten1f.png');
}

.levels-container .level3 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten2m.png');
}

.levels-container .level3 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten2f.png');
}

.levels-container .level3 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten3m.png?v=1.1');
}

.levels-container .level3 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten3f.png?v=1.1');
}

.levels-container .level3 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten4m.png?v=1.1');
}

.levels-container .level3 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l3 .kitten-skin
{
  background-image: url('/src/cats/3/kitten4f.png?v=1.1');
}



.levels-container .level4 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l4 .kitten-skin,
.levels-container .level4 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten1m.png');
}

.levels-container .level4 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten1f.png');
}

.levels-container .level4 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten2m.png');
}

.levels-container .level4 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten2f.png');
}

.levels-container .level4 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten3m.png');
}

.levels-container .level4 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten3f.png');
}

.levels-container .level4 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten4m.png');
}

.levels-container .level4 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l4 .kitten-skin
{
  background-image: url('/src/cats/4/kitten4f.png');
}


.levels-container .level5 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l5 .kitten-skin,
.levels-container .level5 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten1m.png');
}

.levels-container .level5 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten1f.png');
}

.levels-container .level5 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten2m.png');
}

.levels-container .level5 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten2f.png');
}

.levels-container .level5 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten3m.png');
}

.levels-container .level5 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten3f.png');
}

.levels-container .level5 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten4m.png');
}

.levels-container .level5 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l5 .kitten-skin
{
  background-image: url('/src/cats/5/kitten4f.png');
}


.levels-container .level6 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l6 .kitten-skin,
.levels-container .level6 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten1m.png');
}

.levels-container .level6 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten1f.png');
}

.levels-container .level6 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten2m.png');
}

.levels-container .level6 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten2f.png');
}

.levels-container .level6 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten3m.png');
}

.levels-container .level6 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten3f.png');
}

.levels-container .level6 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten4m.png');
}

.levels-container .level6 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l6 .kitten-skin
{
  background-image: url('/src/cats/6/kitten4f.png');
}


.levels-container .level7 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l7 .kitten-skin,
.levels-container .level7 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten1m.png');
}

.levels-container .level7 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten1f.png');
}

.levels-container .level7 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten2m.png');
}

.levels-container .level7 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten2f.png');
}

.levels-container .level7 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten3m.png');
}

.levels-container .level7 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten3f.png');
}

.levels-container .level7 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten4m.png');
}

.levels-container .level7 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l7 .kitten-skin
{
  background-image: url('/src/cats/7/kitten4f.png');
}

.levels-container .level8 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l8 .kitten-skin,
.levels-container .level8 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten1m.png');
}

.levels-container .level8 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten1f.png');
}

.levels-container .level8 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten2m.png');
}

.levels-container .level8 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten2f.png');
}

.levels-container .level8 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten3m.png');
}

.levels-container .level8 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten3f.png');
}

.levels-container .level8 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten4m.png');
}

.levels-container .level8 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l8 .kitten-skin
{
  background-image: url('/src/cats/8/kitten4f.png');
}


.levels-container .level9 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l9 .kitten-skin,
.levels-container .level9 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten1m.png');
}

.levels-container .level9 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten1f.png');
}

.levels-container .level9 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten2m.png');
}

.levels-container .level9 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten2f.png');
}

.levels-container .level9 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten3m.png');
}

.levels-container .level9 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten3f.png');
}

.levels-container .level9 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten4m.png');
}

.levels-container .level9 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l9 .kitten-skin
{
  background-image: url('/src/cats/9/kitten4f.png');
}


.levels-container .level10 .kittens .kitten .kitten-skin,
.kittens-list .kitten.l10 .kitten-skin,
.levels-container .level10 .kittens .kitten.kitten1m .kitten-skin,
.kittens-list .kitten.kitten1m.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten1m.png');
}

.levels-container .level10 .kittens .kitten.kitten1f .kitten-skin,
.kittens-list .kitten.kitten1f.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten1f.png');
}

.levels-container .level10 .kittens .kitten.kitten2m .kitten-skin,
.kittens-list .kitten.kitten2m.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten2m.png');
}

.levels-container .level10 .kittens .kitten.kitten2f .kitten-skin,
.kittens-list .kitten.kitten2f.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten2f.png');
}

.levels-container .level10 .kittens .kitten.kitten3m .kitten-skin,
.kittens-list .kitten.kitten3m.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten3m.png');
}

.levels-container .level10 .kittens .kitten.kitten3f .kitten-skin,
.kittens-list .kitten.kitten3f.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten3f.png');
}

.levels-container .level10 .kittens .kitten.kitten4m .kitten-skin,
.kittens-list .kitten.kitten4m.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten4m.png');
}

.levels-container .level10 .kittens .kitten.kitten4f .kitten-skin,
.kittens-list .kitten.kitten4f.l10 .kitten-skin
{
  background-image: url('/src/cats/10/kitten4f.png');
}



/* ckitten-detail */
body .page .content .kitten-detail
{

}

body .page .content .kitten-detail .page-title
{
  margin: 0vw 3vw 2vw 3vw;
}

body .page .content .kitten-detail .page-title::after
{
  width: 80%;
}

body .page .content .kitten-detail .image
{
  margin-top: 35vw;
}

body .page .content .kitten-detail .image img
{
  width: 40vw;
}

body .page .content .kitten-detail .rareness,
body .page .content .kitten-detail .profits
{
  color: var(--gold-color);

  text-align: center;
}

body .page .content .kitten-detail .rareness
{
  padding-bottom: 1vw;

  font-size: 120%;
}

/* Levels Page */

/* cmarket */

body .page .content .catalog-groups 
{
  display: flex;

  flex-direction: column;

  gap: 15px;
}

body .page .content .catalog-groups .catalog-group
{
  padding: 15px;

  background: var(--dark-background-transparent);

  border-radius: var(--border-radius-big);
}

body .page .content .catalog.tiles,
body .popup .popup-content .catalog.tiles
{
  gap: 10px;
}

body .page .content .tiles.compact
{
  gap: 6px;
}

body .page .content .catalog.tiles.tiles3,
body .popup .popup-content .catalog.tiles.tiles3,
body .page .content .catalog.tiles.tiles4,
body .popup .popup-content .catalog.tiles.tiles4
{
  gap: 5px;
}

body .page .content .catalog .tile,
body .popup .popup-content .catalog .tile
{
  position: relative;

  width: calc(50% - 5px);

  padding: 10px;

  box-sizing: border-box;

  background: none;
}

body .page .content .catalog .tile .top-data
{
  position: relative;

  padding: 5px;
  margin-bottom: 10px;

  background: #fff;

  border-radius: var(--border-radius-big);

  box-shadow: 0px -2px 2px 0px #6D777E4d inset;
}

body .page .content .catalog.tiles4 .tile .top-data
{
  border-radius: var(--border-radius-small);
}

body .page .content .tiles.compact .tile .top-data
{
  padding: 3px;
  margin-bottom: 0px;

  background: none;

  box-shadow: none;

  border-radius: 0;
}

body .page .content .catalog .tile .top-data .label.top
{
  top: 4px;
}

body .page .content .catalog .tile .top-data .label.left
{
  left: 4px;
}

body .page .content .catalog .tile .top-data .label.right
{
  right: 4px;
}

body .page .content .catalog .tile .top-data .label svg
{
  max-width: 20px;
  max-height: 20px;
}

body .page .content .catalog .tile .image-place,
body .popup .popup-content .catalog .tile .image-place
{
  text-align: center;
}

body .page .content .catalog .tile .image-place img,
body .popup .popup-content .catalog .tile .image-place img
{
  max-width: 95%;
  max-height: 145px;

  margin-bottom: 10px;

  border-radius: var(--border-radius-small);
}

body .page .content .catalog .tile .name, 
body .page .content .catalog .tile .prices, 
body .page .content .catalog .tile .profits,
body .popup .popup-content .catalog .tile .name,
body .popup .popup-content .catalog .tile .profits
{
  font-size: 2.8vw;

  padding-bottom: 2vw;

  text-align: center;
}

body .page .content .catalog .tile .stat,
body .popup .popup-content .catalog .tile .stat
{
  font-size: 2.8vw;

  text-align: center;
}

body .page .content .catalog .tile .profits,
body .popup .popup-content .catalog .tile .profits
{
  display: flex;

  flex-direction: column;

  gap: 5px;

  text-transform: lowercase;
}

body .page .content .catalog .tile .profits .profit,
body .popup .popup-content .catalog .tile .profits .profit
{
  font-weight: var(--title-font-weight);
}

body .page .content .catalog .tile .level,
body .popup .popup-content .catalog .tile .level
{
  padding-bottom: 2vw;

  text-align: center;

  font-size: 3vw;
}

body .page .content .catalog .tile .prices
{
  display: flex;

  justify-content: space-around;

  flex-direction: column;

  gap: 5px;
}

body .page .content .catalog .tile .price
{
  display: flex;

  gap: 5px;

  justify-content: center;

  align-items: center;
}

body .page .content .catalog .tile .price svg, body .page .content .catalog .tile .price img
{
  width: 16px;
  height: 16px;
}

body .page .content .catalog .tile .buttons
{
  margin-top: 0vw;
}

body .page .content .catalog .tile .button
{
  color: var(--light-background);
  background: var(--button-background);
}

body .detail .prices, body .detail .sums
{
  display: flex;

  flex-direction: column;

  gap: 10px;

  padding: 10px 0px 20px 0px;
  margin: 0px;

  font-size: 18px;

  justify-content: center;

  align-items: center;
}

body .detail .sums
{
  padding: 20px 0px 10px 0px;
}

body .detail .price, body .detail .sums .sum
{
  display: flex;

  gap: 5px;

  align-items: center;
}

body .detail .price svg, body .detail .price img, body .detail .sums .sum svg, body .detail .sums .sum img
{
  width: 24px;
  height: 24px;
}

body .detail .profits, body .popup .popup-content .node-detail .profits
{
  display: flex;

  flex-direction: column;

  padding-bottom: 20px;

  gap: 5px;

  font-weight: var(--title-font-weight);

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

  text-transform: lowercase;
}

body .node-detail .kitten-items-container
{
  display: flex;

  gap: 1vw;

  justify-content: center;

  margin-bottom: 15px;
}

body .node-detail .character-items
{
  position: inherit;

  gap: 1vw;
}

body .detail .profits .profit
{
  font-size: 14px;

  text-align: center;
}

body .detail .available
{
  margin-bottom: 3vw;

  font-size: 16px;

  text-align: center;
}

body .detail .count-control-form
{
  display: flex;

  gap: 10px;

  justify-content: center;

  align-items: center;
}

body .detail .count-control-form .count-control-button a
{
  display: flex;

  width: 15px;
  height: 15px;

  padding: 5px 10px;

  font-size: 160%;
  line-height: 0;

  font-weight: var(--title-font-weight);

  background: var(--button-background);

  color: var(--button-color);

  align-items: center;

  justify-content: center;

  border-radius: var(--border-radius-small);
}

body .detail .count-control-form .count-value input
{
  width: 70px;

  border: none;

  background: none;

  outline: none;

  text-align: center;

  font-size: 160%;

  font-weight: var(--title-font-weight);
}

body .detail .sub-buttons a svg, body .detail .sub-buttons a img
{
  width: 4.5vw;
  height: 4.5vw;
}

body .detail .badges
{
  position: absolute;

  gap: 3px;

  display: flex;

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

  color: var(--button-color);

  z-index: 1;

  font-size: 130%;
}

body .detail.compact .badges
{
  font-size: 75%;
}

body .detail .badges.top-right
{
  top: -5px;
  right: -5px;
}

body .detail .badges.bottom-right
{
  bottom: -5px;
  right: -5px;
}

body .detail.compact .badges.top-right
{
  top: -4px;
  right: -1px;
}

body .detail.medium .badges.top-right
{
  top: -8px;
  right: -5px;

  font-size: 95%;
}

body .detail .badges .unit
{
  display: flex;

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

  padding: 3px;

  border-radius: 3px;

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

body .detail .badge.circle
{
  width: 13px;
  height: 13px;

  border-radius: 50%;
}

body .detail .badges .unit.circle
{
  width: 13px;
  height: 13px;

  border-radius: 50%;
}

body .detail.compact .badges .unit.circle
{
  width: 10px;
  height: 10px;
}

body .detail.medium .badges .unit.circle
{
  width: 15px;
  height: 15px;
}

body .detail .image
{
  display: inline-block;
}

body .detail .main-image
{
  margin-bottom: 15px;

  text-align: center;
}

body .detail .main-image .img
{
  max-width: 90%;
  max-height: 200px;
}

body .detail .line-list .line.step
{
  padding-bottom: 15px!important;
}

body .detail .data .line-list .line, body .line-list .line.hold
{
  margin: 0px;
}

.rain-page-effect-item
{
  position: absolute;

  z-index: 2;
}

.rain-page-effect-item svg, .rain-page-effect-item img
{
  width: 17px;
  height: 17px;
}

canvas.effect
{
  position: absolute;

  display: none;

  top: 0;
  left: 0px;

  width: 100%;
  height: 100%;
}


/* cboxpopup */

body .popup .boxpopup
{

}

body .popup .boxpopup .title
{
  font-size: 4vw;
}

body .popup .boxpopup .message
{
  padding: 2vh 0;

  font-size: 4vw;

  text-align: center;
}

body .popup .boxpopup .rewards .title
{
  font-size: 3.8vw;
  margin: 2vw;
  padding: 0px;
}

body .popup .boxpopup .rewards .list
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2vw;

  margin: 2vw 10vw;
}

body .popup .boxpopup .rewards div
{
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 3.95vw;

  gap: 1vw;
}

body .popup .boxpopup .rewards .coins svg,
body .popup .boxpopup .rewards .coins img
{
  width: 5vw;
  height: 5vw;
}

body .popup .boxpopup .rewards .boxes img, body .popup .boxpopup .texts .lines .line img
{
  width: 7vw;
}

body .popup .boxpopup .texts
{
  margin: 20px 0px;
}

body .popup .boxpopup .texts .lines
{
  max-width: 90%;

  margin: 0px auto;

  text-align: left;
}

body .popup .boxpopup .texts .text
{
  margin-bottom: 5px;
}

body .popup .boxpopup .texts .text.lowercase
{
  text-transform: lowercase;
}

body .popup .boxpopup .texts .text img
{
  vertical-align: middle;
}

body .popup .boxpopup .texts .text img.middle
{
  display: block;

  max-width: 45vw;
  max-height: 45vw;

  margin: 2vw auto 0 auto;
}

body .popup .boxpopup .button
{
  font-size: 110%;

  padding: 3vw 10vw;
}


body .popup .boxpopup .gamebox, body .popup .boxpopup .toy
{
  display: flex;
  justify-content: center;

  margin: 0vw 0vw 3vw 0vw;
}

body .popup .boxpopup .gamebox .boxskin, body .popup .boxpopup .toy .toyskin
{
  width: 45vw;
  height: 45vw;

  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

body .popup .boxpopup .gamebox.open .boxskin, body .popup .boxpopup .toy.open .toyskin
{
  width: 36vw;
  height: 46vw;

  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

body .popup .boxpopup .gamebox3,
body .popup .boxpopup .gamebox6,
body .popup .boxpopup .gamebox7
{
  transform: scale(-1, 1);
}

body .popup .boxpopup .text b
{
  font-size: 110%;
}




/* cmy-items */
body .my-items
{

}

body .my-items .active
{
  margin: 0vw 0vw 4vh 0vw;
}

body .my-items .active.step-top
{
  margin-top: 2vh;
  margin-bottom: 0;
}

body .my-items .active .tile
{
  position: relative;
}

body .my-items .active .name
{
  padding-bottom: 5px;

  font-size: 5vw;

  text-align: center;
}

body .my-items .active .image-place
{
  margin: 2vh 0vw;

  text-align: center;
}

body .my-items .active .image-place img
{
  width: 40vw;
}

body .my-items .active .image-place.medium img
{
  width: 25vw;
}

body .my-items .active .profit
{
  font-size: 3.5vw;
  font-weight: bold;
  text-align: center;
  text-transform: lowercase;
}

body .my-items .list
{
  display: flex!important;

  gap: 4vw 2vw;

  flex-wrap: wrap;
}

body .my-items.line-style .list
{
  position: relative;

  margin-top: -10px;
  padding: 10px 0px;

  flex-wrap: nowrap;

  overflow-x: auto;
}

body .my-items .list .tile, body .hide-items .tile
{
  position: relative;

  display: flex;

  max-width: calc(30% - 3vw);

  gap: 1vw;
  
  flex-direction: column;

  background: var(--dark-background);

  padding: 2vw 2vw;

  border-radius: 2.5vw;
  box-shadow: 0px -3px 3px 0px #6D777EB2 inset;

  transition: transform 0.3s ease-in-out;

  justify-content: center;
}

body .my-items .list .tile.scaled, body .hide-items .tile.scaled
{
  transform: scale(0.7);
}

body .my-items .list .tile.compact, body .hide-items .tile.compact
{
  padding: 1vw;

  border-radius: 1vw;

  box-shadow: 0px -2px 2px 0px #6D777EB2 inset;
}

body .my-items .list .tile.disable, body .hide-items .tile.disable
{
  filter: grayscale(100%);
  opacity: 50%;
}

body .my-items .tile .badge, body .popup .popup-content .kittens .kitten .badge, body .popup .popup-content .image-elements-list .element .badge, body .hide-items .tile .badge, body .page .content .tiles .tile .badge
{
  position: absolute;

  display: flex;

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

  padding: 3px;

  border-radius: 3px;

  background: var(--button-background);

  color: var(--button-color);

  font-size: 85%;
}

body .my-items .tile .badges, body .hide-items .tile .badges, body .page .content .tiles .tile .badges
{
  position: absolute;

  gap: 3px;

  display: flex;

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

  color: var(--button-color);

  font-size: 85%;

  z-index: 1;
}

body .my-items .tile.compact .badges, body .hide-items .tile.compact .badges, body .page .content .tiles.tiles4 .tile .badges
{
  font-size: 75%;
}

body .my-items .tile .badges.top-right, body .hide-items .tile .badges.top-right, body .page .content .tiles .tile .badges.top-right
{
  top: -5px;
  right: -5px;
}

body .my-items .tile .badges.bottom-right, body .hide-items .tile .badges.bottom-right, body .page .content .tiles .tile .badges.bottom-right
{
  bottom: -5px;
  right: -5px;
}

body .my-items .tile .badges.bottom-center, body .hide-items .tile .badges.bottom-center, body .page .content .tiles .tile .badges.bottom-center
{
  width: calc(100% - 10px);

  bottom: -5px;

  text-align: center;
}

body .page .content .tiles.compact .tile .badges.bottom-center
{
  width: calc(100% - 5px);

  bottom: 4px;

  text-align: center;

  font-size: 80%;
}

body .my-items .tile.compact .badges.top-right, body .hide-items .tile.compact .badges.top-right
{
  top: -4px;
  right: -1px;
}

body .my-items .tile.medium .badges.top-right, body .hide-items .tile.medium .badges.top-right
{
  top: -8px;
  right: -5px;

  font-size: 95%;
}

body .my-items .tile .badges .unit, body .hide-items .tile .badges .unit, body .page .content .tiles .tile .badges .unit
{
  display: flex;

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

  padding: 3px;

  border-radius: 3px;

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

body .page .content .tiles .tile .badges.compact
{
  font-size: 70%;
}

body .page .content .tiles .tile .badges.compact .unit
{
  padding: 1px 2px;
}

body .page .content .tiles .tile .badges.square.compact .unit
{
  border-radius: 1px;
}

body .my-items .tile .badge.circle, body .popup .popup-content .kittens .kitten .badge.circle, body .popup .popup-content .image-elements-list .element .badge.circle, body .hide-items .tile .badge.circle, body .page .content .tiles .tile .badge.circle
{
  width: 13px;
  height: 13px;

  border-radius: 50%;
}

body .my-items .tile .badges .unit.circle, body .hide-items .tile .badges .unit.circle, body .page .content .tiles .tile .badges .unit.circle
{
  width: 13px;
  height: 13px;

  border-radius: 50%;
}

body .my-items .tile.compact .badges .unit.circle, body .hide-items .tile.compact .badges .unit.circle
{
  width: 10px;
  height: 10px;
}

body .my-items .tile.medium .badges .unit.circle, body .hide-items .tile.medium .badges .unit.circle
{
  width: 15px;
  height: 15px;
}

body .my-items .tile .badge.top-right, body .popup .popup-content .kittens .kitten .badge.top-right, body .popup .popup-content .image-elements-list .element .badge.top-right, body .hide-items .tile .badge.top-right
{
  top: -5px;
  right: -5px;
}

body .my-items .list .tile .image-place, body .hide-items .tile .image-place
{
  text-align: center;
}

body .my-items .list .tile img, body .hide-items .tile img
{
  width: 15vw;
}

body .my-items .list .tile.compact .badges + .image-place, body .hide-items .tile.compact + .image-place
{
  margin-top: 3vw;
}

body .my-items .list .tile.compact img, body .hide-items .tile.compact img
{
  max-width: 9.6vw;
  max-height: 9.6vw;
}

body .my-items .list .tile .profits, body .hide-items .tile .profits
{
  max-width: 80px;

  text-align: center;

  text-transform: lowercase;

  font-size: 85%;
}

body .my-items .list .tile.compact .profits, body .hide-items .tile.compact .profits
{
  font-size: 70%;
}

body .my-items .list .tile.medium .profits, body .hide-items .tile.medium .profits
{
  font-size: 100%;
}

body .my-items .list .tile .name
{
  font-size: 85%;

  text-align: center;
}

body .popup .popup-content .node-detail
{

}

body .popup .popup-content .node-detail.r2
{
  color: #7bc390;
}

body .popup .popup-content .node-detail.r3
{
  color: #6f9bfb;
}

body .popup .popup-content .node-detail.r4
{
  color: #bb8add;
}

body .popup .popup-content .node-detail .image
{
  height: unset;
  max-height: unset;
}

body .popup .popup-content .node-detail .image img
{
  width: 40vw;
  max-width: unset;

  height: unset;
  max-height: unset;
}

body .popup .popup-content .node-detail .lines .line.title
{
  padding-bottom: 5px;
}

body .popup .popup-content .node-detail .rareness
{
  padding-bottom: 5px;

  font-size: 120%;
}

body .popup .popup-content .node-detail .rating
{
  padding-bottom: 15px;

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

body .popup .popup-content .node-detail .attention
{
  padding: 10px 0px;

  font-size: 130%;

  text-align: center;
}

body .popup .popup-content .node-detail .profits
{
  padding-bottom: 10px;
}

body .popup .popup-content .node-detail.kitten-list .profits
{
  padding-bottom: 20px;

  text-align: center;
}

body .popup .popup-content .node-detail .profits .profit
{
  font-size: 110%;
}

body .popup .popup-content .node-detail.kitten-list .owner
{
  padding-bottom: 10px;

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

body .popup .popup-content .node-detail .my-items
{
  color: var(--base-text-color);
}

body .popup .popup-content .node-detail.kitten-list .total.profits
{
  padding-top: 4vw;
}

body .popup .popup-content .kittens, body .popup .popup-content .image-elements-list
{
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

body .popup .popup-content .boxes.image-elements-list
{
  margin: 0px 5px;
}

body .popup .popup-content .kittens .kitten, body .popup .popup-content .image-elements-list .element .element-container
{
  position: relative;
}

body .popup .popup-content .kittens .kitten .image, body .popup .popup-content .image-elements-list .element .image
{
  max-width: 12vw;
  max-height: 12vw;
}

body .popup .popup-content .boxes.image-elements-list .element .image
{
  max-width: 20vw;
  max-height: 20vw;

  background-image: url('/src/gameboxes/gamebox3.png?v=1.02');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

body .popup .popup-content .boxes.image-elements-list .element.open .image
{
  background-image: url('/src/gameboxes/gamebox1_opened.png?v=1.02');
}

body .popup .popup-content .boxes.image-elements-list.size2 .element
{
  width: 45%;
}

body .popup .popup-content .boxes.image-elements-list.size3 .element
{
  width: 30%;
}

body .popup .popup-content .boxes.image-elements-list.size2 .element .image,
body .popup .popup-content .boxes.image-elements-list.size3 .element .image
{
  max-width: 100%;
  max-height: inherit;
}

body .popup .popup-content .kittens .kitten .image img, body .popup .popup-content .image-elements-list .element .image img
{
  max-width: 100%;
}

body .popup .popup-content .image-elements-list .element .hide-items > div, body .popup .popup-content .image-elements-list .element .hide-data
{
  display: none;
}

body .popup .popup-content .image-elements-list .element .hide-items .migrate-item, body .popup .popup-content .image-elements-list .element .hide-data
{
  position: absolute;

  top: 0px;
  left: calc(50% - 23px);

  z-index: 1;
}

body .popup .popup-content .image-elements-list .element .hide-items .migrate-item img
{
  max-width: 100%;
}

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

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

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

  justify-content: center;

  flex-direction: row!important;

  gap: 1.5vw;

  padding: 1.5vw 0px;
  margin: 0;
}

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

body .form .row.buttons .button
{
  width: auto;
}

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 .value-control-form
{
  display: flex;

  flex-direction: row;

  gap: 6px;

  align-items: center;
}

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

  gap: 5px;

  align-items: center;
}

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

  width: 6vw;
  height: 6vw;

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

  background: var(--button-background);

  color: var(--button-color);

  border-radius: var(--border-radius-small);
}

body .form input[type=text], body .form input[type=number]
{
  width: 20vw;

  padding: var(--input-padding);

  border: none;

  border-radius: var(--input-border-radius);

  font-size: 1.1em;
}

body .form input[type=text][readonly=readonly]
{
  border: none;

  background: var(--input-disable-background);

  outline: none;
}

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

  padding: 0px;
  margin: 0px;
}

body .form input.link
{
  width: 100%;

  box-sizing: border-box;
}

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 ul
{
  margin: 0;
  padding: 0;

  list-style: none;
}

body .form ul.columns.columns2
{
  display: flex;

  flex-wrap: wrap;

  gap: 5px;
}

body .form ul.columns.columns2 li
{
  width: calc(50% - 10px);
}

body .form label.radio
{
  display: inline-block;

  width: 7px;
  height: 7px;

  border: 3px solid #6273D9;

  border-radius: 50%;

  vertical-align: middle;
}

body .form input[type=radio]:checked + label.radio
{
  background: #6273D9;
}

body .form label.middle
{
  font-size: 110%;
}

body .coins 
{
  display: flex;

  align-items: center;
}

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

  margin: 0px 5px;
}

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

  vertical-align: top;
} 

/* pages */

body #exhibition-page .kittens-prize-list,
body #command-page .kittens-prize-list
{
  margin-bottom: 6vw;

  padding-bottom: 30vw;

  background-image: url('/src/stand.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

body #exhibition-page .kittens-prize-list .kitten:nth-child(2n + 1),
body #command-page .kittens-prize-list .kitten:nth-child(2n + 1)
{
  position: relative;

  top: 16vw;
}

body .detail.market .title
{
  font-weight: var(--title-font-weight);
}

body .detail.market .text
{
  padding-left: 0px;
  padding-right: 0px;

  font-size: 100%;
}

body .detail.market .text.middle, body .detail.market .prizes
{
  font-size: 110%;
}

body .detail.market .text.gap
{
  display: flex;

  flex-direction: column;

  gap: 5px;
}

body .detail.market .text .free
{
  padding: 10px 0px;
}

body .detail.market .gallery
{
  text-align: center;
}

body .detail.market .hint p
{
  margin: 0px;
}

body .detail.market .hint + .hint
{
  margin-top: 2vw;
}

body .page .content.full-width
{
  padding-left: 0px;
  padding-right: 0px;
}

body .content .liteup-area .toys
{
  position: fixed;

  width: 70%;
  
  margin: 0 15%;
}

body .content .liteup-area .toys .toys-container
{
  position: relative;

  width: 100%;
  height: 100vh;
}

body .content .liteup-area .toys .toy
{
  position: absolute;

  display: flex;

  flex-direction: column;

  gap: 5px;

  text-align: center;

  align-items: center;
}

body .content .liteup-area .toys .toy.closed
{
  opacity: 0.8;
}

body .content .liteup-area .toys .toy .icon
{
  width: 90px;
  height: 90px;

  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

body .content .liteup-area .toys .toy .label
{
  position: relative;

  display: inline-block;

  padding: 3px 8px;

  margin-top: -10px;

  background: #FFFFFF;

  border-radius: var(--border-radius-small);

  font-size: 90%;
}

body .content .liteup-area .toys .toy:nth-child(1)
{
  top: 80px;
  left: calc(50% - 57px);
}

body .content .liteup-area .toys .toy:nth-child(1) .icon
{
  width: 110px;
  height: 110px;

  background-image: url('/src/pages/base/lite_up/toy1.png?v=1.14');
}

body .popup .boxpopup .toy1 .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy1.png?v=1.14');
}

body .content .liteup-area .toys .toy.open:nth-child(1) .icon, body .popup .boxpopup .toy1.open .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy1_.png?v=1.14');
}

body .content .liteup-area .toys .toy:nth-child(2)
{
  top: 220px;
  left: 16%;
}

body .content .liteup-area .toys .toy:nth-child(2) .icon,
body .popup .boxpopup .toy2 .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy2.png?v=1.12');
}

body .content .liteup-area .toys .toy.open:nth-child(2) .icon, 
body .popup .boxpopup .toy2.open .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy2_.png?v=1.12');
}

body .content .liteup-area .toys .toy:nth-child(3)
{
  top: 220px;
  right: 16%;
}

body .content .liteup-area .toys .toy:nth-child(3) .icon,
body .popup .boxpopup .toy3 .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy3.png?v=1.12');
}

body .content .liteup-area .toys .toy.open:nth-child(3) .icon,
body .popup .boxpopup .toy3.open .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy3_.png?v=1.12');
}

body .content .liteup-area .toys .toy:nth-child(4)
{
  top: 340px;
  left: 6%;
}

body .content .liteup-area .toys .toy:nth-child(5)
{
  top: 340px;
  right: 8%;
}

body .content .liteup-area .toys .toy:nth-child(4) .icon, 
body .content .liteup-area .toys .toy:nth-child(5) .icon
{
  width: 95px;
  height: 95px;
}

body .content .liteup-area .toys .toy:nth-child(4) .icon, 
body .content .liteup-area .toys .toy:nth-child(5) .icon,
body .popup .boxpopup .toy4 .toyskin,
body .popup .boxpopup .toy6 .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy4.png?v=1.12');
}

body .content .liteup-area .toys .toy.open:nth-child(4) .icon, 
body .content .liteup-area .toys .toy.open:nth-child(5) .icon,
body .popup .boxpopup .toy4.open .toyskin,
body .popup .boxpopup .toy6.open .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy4_.png?v=1.12');
}

body .content .liteup-area .toys .toy:nth-child(6)
{
  top: 460px;
  left: -2%;
}

body .content .liteup-area .toys .toy:nth-child(7)
{
  top: 455px;
  right: 1%;
}

body .content .liteup-area .toys .toy:nth-child(6) .icon, 
body .content .liteup-area .toys .toy:nth-child(7) .icon
{
  width: 100px;
  height: 100px;
}

body .content .liteup-area .toys .toy:nth-child(6) .icon, 
body .content .liteup-area .toys .toy:nth-child(7) .icon,
body .popup .boxpopup .toy5 .toyskin,
body .popup .boxpopup .toy7 .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy5.png?v=1.14');
}

body .content .liteup-area .toys .toy.open:nth-child(6) .icon, 
body .content .liteup-area .toys .toy.open:nth-child(7) .icon,
body .popup .boxpopup .toy5.open .toyskin,
body .popup .boxpopup .toy7.open .toyskin
{
  background-image: url('/src/pages/base/lite_up/toy5_.png?v=1.14');
}

body .content .liteup-area .boxes
{
  position: absolute;

  display: flex;

  top: 71vh;
  
  width: 92%;

  margin: 0 4%;
  
  align-items: center;
  justify-content: space-between;
}

body .content .liteup-area .boxes .box
{
  display: block;

  width: 96px;
  height: 120px;

  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 100% auto;

  cursor: pointer;
}

body .content .liteup-area .boxes .box:first-child
{
  background-image: url('/src/pages/base/lite_up/box1.png?v=1.12');
}

body.full-tree .content .liteup-area .boxes .box:first-child
{
  background-image: url('/src/pages/base/lite_up/box1_.png?v=1.12');
}

body .content .liteup-area .boxes .box:last-child
{
  background-image: url('/src/pages/base/lite_up/box2.png?v=1.12');
}

body.full-tree .content .liteup-area .boxes .box:last-child
{
  background-image: url('/src/pages/base/lite_up/box2_.png?v=1.12');
}

.liteup-stats
{
  position: absolute;

  top: 16vw;

  width: 100%;
}

.liteup-stats .stats-container
{
  position: absolute;

  max-width: 30vw;

  padding: 7px;

  background: #F7FBFC;

  border-radius: 8px;

  box-shadow: -1px -2px 2px 0px #6D777EB2 inset;
  box-shadow: 1px -2px 2px 0px #6D777EB2 inset;
}

.liteup-stats .stats-container.left
{
  left: 3vw;
}

.liteup-stats .stats-container.right
{
  right: 3vw;
}

.liteup-stats .stats-container .line-list
{
  gap: 0.5vw;
}

.liteup-stats .stats-container .line-list .line
{
  font-weight: 600;
  font-size: 90%;
}

.liteup-stats .stats-container.right .line-list .line
{
  font-size: 80%;
}

.liteup-stats .stats-container.right .line-list .line .coin
{
  width: 3.5vw;
  height: 3.5vw;
}

body .content .liteup-area .cats
{
  position: absolute;

  display: flex;

  top: 75vh;
  
  width: 95%;
  
  align-items: center;
  justify-content: center;
}

body .content .liteup-area .cats .cat
{
  display: block;

  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

body .content .liteup-area .cats .cat:first-child
{
  width: 83px;
  height: 87px;

  background-image: url('/src/pages/base/lite_up/cat1.png?v=1.12');
}

body .content .liteup-area .cats .cat:last-child
{
  width: 65px;
  height: 88px;

  background-image: url('/src/pages/base/lite_up/cat2.png?v=1.12');
}

.liteup-nodes-container .trees
{
  position: relative;

  margin: calc(100vh - 41vw) 2vw 0vw 2vw;

  padding-bottom: 0;

  z-index: 1;
}

body .content .liteup-nodes-container .trees .tree
{
  display: flex;

  flex-direction: column;

  gap: 2px;

  text-align: center;
}

.liteup-nodes-container .trees .tree .tree-skin
{
  background-image: url('/src/pages/base/lite_up/tree.png');
}

body .popup .boxpopup .toy .toyskin
{
  background-position: center center!important;
}

body .content .fishing-area
{
  max-height: 93vh; 

  overflow: hidden;
}

/* pages */