:root 
{
  --app-bg-color: #2C303E;
  --app-bga-color: #2C303EEE;
  --tile-background: #2C303EA0;
  --popup-page-background: #314A68;
  --dark-background: #35485d;

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

  --base-text-color: #F2f2f2;
  --alert-color: #ff0000;
  --alert-border-color: #ff333350;
  --alert-border-color2: #ff333380;
  --success-color: #55DD55;
  --success-border-color: #55dd5580;

  --gold-color: #F7D79C;
  --gold-color-light: #F7D79C;
  --gold-border-light: #f7d79c50;
  --hint-color: #ABAAAA;

  --title-font-weight: bold;

  --border-radius-small: 2vw;
}

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

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

  font-family: Arial;
  font-size: 14px;

  box-sizing: border-box;

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

  border: none!important;
}

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.7);

  z-index: 1000;
}

body.tips-mode .tips-now
{
  position: relative;

  z-index: 1001;
}

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

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

  z-index: inherit;
}

body blockquote 
{
  margin: 0px;
}

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

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

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

body
{
  max-width: 100vw;

  position: relative;

  overflow: hidden;
}

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

  text-decoration: none;

  outline: none;

  cursor: default;
}


/* elements */

body .title
{
  color: var(--base-text-color);
  font-size: 120%;
  font-weight: bold;
}

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

body .text ul,
body .text ol
{

}

body .text ul li,
body .text ol li
{
  margin: 0px 0px 2vw 0px;
}

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

  width: 15px;
  height: 15px;

  border-radius: 11px;

  padding: 0px 2px;

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

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

  text-align: center;
}

body .hint
{
  display: flex;
  align-items: center;
  
  margin: 1vw 5vw;
}

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


/* buttons */

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

  gap: 10px;
}

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

  gap: 1vw;
}

body .buttons-filter
{
  margin-bottom: 2vw;
}

body .buttons-block .row2
{
  width: 100%;

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

  gap: 1vw;
}

body .buttons-block .row2 .button
{
  width: 50% !important;
  margin: 0px !important;
}

body .button
{
  position: relative;

  height: 9vw;

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

  gap: 1.5vw;

  font-size: 105%;

  padding: 0.2vw 5vw;

  border-radius: 10px;
  border: 1px solid var(--gold-border-light);

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

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

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

  vertical-align: middle;
}

body .button.minus,
body .button.plus
{
  height: 7vw;
  padding: 0.2vw 3vw;
}

body .button.minus svg,
body .button.plus svg
{
  width: 3vw;
  height: 3vw;
}

body .button .badges
{
  position: absolute;

  font-size: 60%;
}

body .button .badges.top-right
{
  top: -5px;
  right: -5px;
}

body .button .badges .unit
{
  display: flex;

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

  width: 15px;
  height: 15px;

  border-radius: 50%;

  border: 1px solid var(--base-text-color);
  background: var(--dark-background);
}

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

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

body .button .badges .unit.warning
{
  color: var(--base-text-color)!important;

  border: 1px solid var(--alert-border-color)!important;

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

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

  border: none !important;
  background: none !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.big
{
  font-size: 140%;
}

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

  padding: 0.4vw 2.5vw;
}
body .button.middle.light
{
  color: var(--popup-page-background);

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


body .small-button,
body .button.small
{
  height: 6vw;
  font-size: 90%;

  border-radius: 1.8vw;

  margin-left: 0.3vw;
  margin-right: 0.3vw;

  padding-left: 2.4vw;
  padding-right: 2.4vw;
}

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

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

body .button.plus.small svg,
body .button.plus.small img,
body .button.minus.small svg,
body .button.minus.small img
{
  width: 2.5vw;
  height: 2.5vw;
}

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

  padding-left: 0vw;
  padding-right: 0vw;
}

body .page .icon-buttons a
{
  display: inline-block;

  height: inherit;

  padding: 1vw 1.5vw;

  color: var(--button-color);
  background: var(--button-background);

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

  text-align: center;

  line-height: 0;
}

body .page .icon-buttons a svg, body .page .icon-buttons a img
{
  max-width: 14px;
  max-height: 14px;
}

body .page .icon-buttons > span
{
  display: block;

  width: 14px;

  padding: 1vw 1.5vw;
}



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


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



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

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

body input
{
  height: 6vw;

  padding: 3px 5px;

  font-size: 100%;

  border-radius: 10px;

  text-align: center;
}

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

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

  justify-content: center;

  gap: 1.5vw;

  margin: 1.5vw 0px;
}

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

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

  justify-content: center;

  gap: 0.5vw;
}

body .form input
{
  width: 20vw;
}

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

  padding: 0px;
  margin: 0px;
}

body .form input.link
{
  width: 100%;
}

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

body .form input.count-wide
{
  width: 15vw;
}

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



/* Loader */

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

body .error-place.loaded
{
  display: flex;
}

body .error-place .error-notice
{
  padding: 0px 25px;

  font-size: 140%;

  line-height: 1.5;
}

body .thumbnail-place
{
  margin-top: 70px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  background-image1: url("/src/thumbnail1.jpg");
  background-size1: cover;
}

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

body .loading img
{
   max-height: 20vh;
}

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

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

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

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

  text-align: center;

   margin-bottom: 2vw;
}

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

  width: 85%;

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

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

  font-size: 90%;

  padding: 3px 0px;
}




body .qr-place
{
  display: none;

  text-align: center;

  color: #FFFFFF;
}

body .error-place
{
  position: absolute;

  top: 0px;

  display: none;

  text-align: center;

  color: #FFFFFF;

  height: 100vh;
  width: 100%; 
  
  align-items: center;
  justify-content: center;
}

body .overlay
{
  display: none;

  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;
  height: 100%;

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

  z-index: 1;
}

body .annonce
{
  display: none;

  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;
  height: 100%;

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

  z-index: 1000;
}

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

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


body .scroll-container
{
  max-height: 100vh;

  overflow-y: auto;

  padding-bottom: 20px;

  box-sizing: border-box;
}

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

  display: none;

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

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

  color: #fff;
}

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

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

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

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



/* pages layout */

body .bottom-slide
{
  position: fixed;

  left: -2px;

  width: calc(100% + 2px);

  overflow: hidden;

  border-radius: 25px 25px 0px 0px;

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

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

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

  z-index: 1;
}

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

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

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

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

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

  padding-bottom: 125px;

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


body .pages-data
{
  display: none;

  position: relative;

  overflow: hidden;
}

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

body .page
{
  display: none;

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

body .page .footer
{
  display: block;

  margin: 2.5vw 0vw;

  text-align: center;
}

body .page.active
{
  display: block;
}

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

  padding: 0px 15px 10px 15px;

  text-align: center;
}

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

  padding: 1vw 4vw 1vw 4vw;

  text-align: center;
}

body .page .page-title2
{
  font-size: 100%;
  font-weight: var(--title-font-weight);

  padding: 1vw 4vw 1vw 4vw;

  text-align: center;
}

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

  padding: 1vw 4vw 1vw 4vw;

  text-align: center;
}

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

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

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


  border-radius: 15vw;

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

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

  padding: 0px 15px 10px 15px;

  text-align: center;
}

body .page .page-text.hint
{
  display: block;

  text-align: left;
  line-height: 120%;

  padding: 0px;
}

body .page .content .page-text ul,
body .page .content .page-text ol
{
  margin: 0vw 4vw 2vw 4vw;
  padding: 0vw;
}

body .page .content .page-text li
{
  text-align: left;

  margin: 0px 0px 2vw 0px;
}

body .page .content .page-text .coins
{
  line-height: 20px;

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


body .page .content .page-text .coins svg,
body .page .content .page-text .coins img
{
  width: 20px;
  height: 20px;

  margin: 0px 5px;
}



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

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


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


body .page .steps,
body .page .steps ul,
body .page .steps ol
{
  margin: 1vw 0;
  padding: 0px;
  list-style-position: inside;
}

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



body .page .content
{
  padding: 2vw 3vw;
}

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

  margin-bottom: 10px;
}

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

  text-align: center;

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


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

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

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

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


/* clist */

body .page .list
{
  display: flex;

  gap: 2vw;

  flex-direction: column;

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

body .page .list.compact
{
  gap: 1vw;
}

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

  gap: 2.5vw;

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

  padding: 9px 9px;

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

body .page .list.columns3
{
  flex-direction: row;

  flex-wrap: wrap;
}

body .page .list .element.column
{
  flex-direction: column;
}

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

body .page .list .element.success
{
  color: #00FF00;
}

body .page .list .element.fail
{
  color: #DE0000;
}

body .page .list.columns3 .element
{
  width: calc(33vw - 9vw);
}

body .page .list.compact .element
{
  padding-top: 6px;
  padding-bottom: 6px;
}

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

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

  text-align: left;
}

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

  border-radius: 4px;
}


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

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

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


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

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

  text-align: left;
}

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

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

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

  text-align: left;

  overflow: hidden;
}

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

  margin-bottom: 3px;
}

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


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

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

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

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

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

  overflow: hidden;

  padding: 3px;

  line-height: 0px;

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

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

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

body .page .content .list .element .count
{
  width: 25%;

  text-align: right;
}

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

  font-size: 100%;

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

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

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

  align-items: center;
}

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

  margin: 0px 5px;
}


/* cpoups */

body .popup
{
  position: fixed;

  bottom: -100vh;

  z-index: 3;

  width: 100vw;

  font-size: 90%;

  color: var(--base-color);

  box-sizing: border-box;

  overflow-x: hidden;
}


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

  left: 0px;

  width: calc(100% + 0px);

  padding: 20px 20px 70px 20px;

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

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

  border-radius: 25px 25px 0px 0px;

  box-sizing: border-box;

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

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

  overflow-y: auto;
}

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

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

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

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

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

body .popup .popup-content .popup-block .block-title
{
  font-size: 115%;
  font-weight: bold;

  margin-top: 2vw;
  margin-bottom: 2vw;
}

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

body .popup .buttons div
{
  width: 100%;
}

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

  flex-direction: row;

  margin: 3vw 5vw 3vw 5vw;

  text-align: center;
}

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


body .popup .button
{
  font-weight: 400;
}



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

  font-size: 130%;

  text-align: center;
}

body .popup  .popup-title1
{
  font-size: 120%;

  text-align: center;
}

body .popup  .popup-title2
{
  font-size: 110%;

  text-align: center;
}


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

  text-align: center;

  font-size: 105%;

  line-height: 1.3;
}

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

  padding: 0vw 5vw;

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

body .popup .popup-content .image
{
  margin-top: 2vw;
  margin-bottom: 2vw;

  height: 100px;

  text-align: center;
}

body .popup .popup-content .img-mid .image
{
  margin-top: 10px;
  margin-bottom: 10px;

  position: relative;

  height: 30vh;
}

body .popup .popup-content .img-big .image
{
  display: flex;

  margin-top: 15px;
  margin-bottom: 30px;

  position: relative;

  height: inherit;

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

body .popup .popup-content .image img
{
  max-height: 100%;

  border-radius: 15vw;

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

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

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

  font-size: 100%;

  border-radius: 10px;
}

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

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


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

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

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

  background: var(--tile-background);

  border-radius: 10px;

  font-size: 115%;

  text-align: left;

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

  line-height: 1.2;
}

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

body .popup .days
{

}

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

  width: 75px;

  text-align: center;

  padding: 0px;

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

  overflow: hidden;

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

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

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

  padding: 1px 3px 1px 3px;
  
  border-radius: 4px;

  background: #F6BE29;
}

body .popup .hint
{
  margin: 2vw 5vw;

  justify-content: center;
}


body .popup .coins
{
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  text-align: center;

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

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

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

  gap: 10px;

  justify-content: center;
}

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

  justify-content: center;

  align-items: center;

  gap: 5px;

  text-align: center;

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

body .popup .icons-data.flex .icon-data
{
  margin: 0!important;
}

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

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

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

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

  vertical-align: middle;
}


/* cinfo */

body .info
{
  display: flex;

  gap: 1.8vw;

  margin: 1.8vw 5vw;

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

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

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

  padding: 10px 20px;
  margin: 0px;

  height: 4vw;

  border-radius: 10px;

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

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

.flex-1
{
  flex: 1;
}

.d-none
{
  display: none;
}

.ml-0
{
  margin-left: 0;
}

.mr-auto
{
  margin-right: auto;
}

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

.mt-3
{
  margin-top: 8vw !important;
}

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


/* ctiles */

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

  gap: 10px;

  justify-content: space-between;

  align-items: top;

  flex-wrap: wrap;
}

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

  padding: 10px 12px;

  border-radius: 10px;

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

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

  gap: 2px;

  font-weight: bold;
}

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

  margin-right: 3px;
}



/* cfilters */

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

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

  gap: 5px;

  flex-wrap: wrap;

  justify-content: space-between;
}

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

  padding: 5px 7px;

  font-size: 80%;
}

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

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



/* chints */

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

  font-size: 80%;

  padding-bottom: 2px;
}

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



/* calerts */

body .alerts
{
  position: absolute;

  top: 0px;
  left: 0px;

  width: 100%;

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

  z-index: 5;
}

body .alerts .alert
{
  position: relative;

  width: 94%;

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

  border-radius: 10px;

  background: var(--app-bg-color);
  border: 1px solid var(--gold-border-light);

  box-sizing: border-box;
}

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

body .alerts .alert.success
{
  border-color: var(--success-border-color);
}

body .alerts .alert.warning
{
  border-color: var(--alert-border-color2);
}

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

  gap: 5px;

  align-items: center;

}

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

  font-size: 100%;

  display: flex;
  
  align-items: center;
}

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

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

body .alerts .alert .wrapper .data .text
{
  color: var(--gold-color);
}

body .alerts .alert .close
{
}

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

  display: flex;
  align-items: center;
}

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


/* cflyeffect */

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

  width: 30px;
  height: 30px;

  z-index: 5;
}

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

/* ctabs */

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

  gap: 0.75vw;

  margin: 0px auto 20px auto;
}


body .link_preview
{
  font-size: 85%;

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

  border-radius: 3vw;

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

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

  font-size: 85%;

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

  border-radius: 3vw;

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