:root 
{
  --app-bg-color: #2C303E;
}

/*  Catalog Style */

body .page .catalog
{
  display: flex;

  gap: 4vw;

  flex-direction: column;
}

body .page .catalog .scrollup
{
  display: none;

  opacity: 0;
}

body .page .catalog .scrollup.show
{
  position: fixed;

  bottom: 100px;
  right: 10px;

  display: flex;

  z-index: 1;
}

body .page .catalog .element
{
  padding: 0px 0px;

  text-align: center;
}

body .page .catalog .element .image
{
  overflow: hidden;
}

body .page .catalog .element .image img
{
  max-width: calc(100% - 2px);

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

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


/* cgames */

body #main-content
{
  padding-top: 0px;
  position: relative;
  top: -1vw;
}

body .page .catalog_header
{
  position: relative;
}

body .page .catalog_header .search
{
  display: flex;

  align-items: center;

  gap: 15px;

  margin: 2vw 0vw 2.5vw 0vw;
}

body .page .catalog_header.move .search
{
  position: fixed;

  left: 0px;

  width: calc(100% - 10px);

  padding: 3vw 3vw 2.5vw 3vw;
  margin-top: -2vw;

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

  box-sizing: border-box;

  z-index: 1;
}

body .page .catalog_header .search input
{
  width: 30vw;

  height: auto;
  padding-top: 1.2vw;
  padding-bottom: 1.2vw;

  text-align: left;
}

body .page .catalog_header .search .clear
{
  display: none;
}

body .page .catalog_header .search.active .clear
{
  position: relative;

  display: block;

  width: 16px;
  height: 16px;

  cursor: pointer;

  padding: 2vw;
  left: -2.5vw;
}

body .page .catalog_header .search.active .clear:before, body .page .catalog_header .search.active .clear:after 
{
  content: "";

  position: absolute;

  width: 3px;
  height: 16px;

  background: #de0000;

  transform-origin: center;
}

body .page .catalog_header .search.active .clear:before 
{
  transform: rotate(45deg);
}

body .page .catalog_header .search.active .clear:after 
{
  transform: rotate(-45deg);
}

body .page .catalog.games .element 
{
  padding: 1vw 0vw 3vw 0vw;
}

body .page .catalog.games .element .line
{
  display: flex;

  margin: 0px 5px 0px 5px;
}

body .flex-wrap
{
  flex-wrap: wrap;
}

body .page .catalog.games .element .line .name, 
body .page .catalog.games .element .line .tags
{
  
}

body .page .catalog.games .element .line .name
{
  padding-right: 5px;
  font-size: 110%;
  font-weight: 500;
  color: var(--base-text-color);
  text-align: left;
}

body .page .catalog.games .element .line .tags
{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--hint-color);
  font-size: 85%;
  text-align: right;
  line-height: 1;
  padding-top: 1px;
}

body .page .catalog.games .element .line .tags .tag
{
  display: flex;
  align-items: center;
}

body .page .catalog.games .element .line .tags .tag-name
{
  padding-left: 5px;
}

body .page .catalog.games .element .top_line .silent
{
  display: none;
}

body .page .catalog.games .element .bottom_line
{
  display: none;
}

body .page .catalog.games .element .top_line,
body .page .catalog.games .element.show_play .bottom_line
{
  width: calc(100% - 3.2vw);
  position: absolute;

  display: flex;
  flex-direction: row;

  padding: 0px 1.6vw;
}

body .page .catalog.games .element.show_play .top_line .silent
{
  display: flex;
}

body .page .catalog.games .element.show_play .top_line .next_claim
{
  display: flex;
  align-items: center;
}

body .page .catalog.games .element .top_line
{
  justify-content: space-between;
  margin-top: 1.2vw;
}

body .page .catalog.games .element.show_play .item
{
  color1: var(--popup-page-background);
  color: var(--base-text-color);
  font-size: 80%;

  padding: 4px 5px;
  right: 0px;
  top: 0px;
  border-radius: 8px;
  border: 0.5px solid var(--gold-color-light);

  background: var(--popup-page-background);
  background1: var(--gold-color-light);
  box-shadow: 0px 3px 4px rgb(0 0 0 / 70%);
}

body .page .catalog.games .element .top_line.show_play .next_claim
{
  display: flex;
  align-content: center;
  flex-wrap: wrap;

  height: 5vw;

  font-size: 3vw;
  padding: 0px 2.5vw;
}

body .page .catalog.games .element .top_line .next_claim
{
  display: none;
}

body .page .catalog.games .element.alert.show_play .top_line .next_claim,
body .page .catalog.games .element.alert .play .button1
{
  color: var(--alert-color);
}


body .page .catalog.games .element .bottom_line
{
  display: none;

  position: relative;

  margin-top: -9.5vw;
}


body .page .catalog.games .element .bottom_line .left_buttons,
body .page .catalog.games .element .bottom_line .play,
body .page .catalog.games .element .bottom_line .right_buttons
{
  width: 33.33%;

  display: flex;

  gap: 1.5vw;

  flex-direction: row;
  align-items: center;
}

body .page .catalog.games .element .bottom_line .left_buttons
{
  justify-content: flex-start;
}
body .page .catalog.games .element .bottom_line .right_buttons
{
  justify-content: flex-end;
}


body .page .catalog.games .element.show_play .play
{
  display: block;
}

body .page .catalog.games .element.show_play .play .button
{
  position: relative;
  bottom: 4vw;

  font-size: 110%;

  padding-top: 1.7vw;
  padding-bottom: 1.7vw;
}



body .page .catalog.games .element .button
{
  color1: var(--gold-color-light);
  color: var(--base-text-color);

  font-size: 105%;
  padding: 6px 10px;

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

  border: 0.5px solid var(--gold-color-light);

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

body .page .catalog.games .element .button:active
{
  color: var(--popup-page-background);;

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


body .page .catalog.games .element .button.skip
{
  font-size: 92%;
}


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


body .page .catalog.games .element .share-buttons
{
  display: flex;

  gap: 1.5vw;

  flex-direction: row;
}

body .page .catalog.games .element .button
{
  height: 4vw;

  display: flex;

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

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

  text-wrap: nowrap;

  padding: 6px 10px;

  border-radius: 7px;

  text-align: center;
}

body .page .catalog.games .element .button.square
{
  width: 3.5vw;
  height: 3.5vw;

  padding: 1.5vw;
}

body .page .catalog.games .element .button.square.avail-cpc
{
  margin-right: 5px;
}

body .page .catalog.games .element .button.square.add
{
  padding-left: 5vw;
  padding-right: 5vw;
}

body .page .catalog.games .element .button svg,
body .page .catalog.games .element .button img
{
  max-width: 100%;
  max-height: 100%;
}

body .page .catalog.games .element .button .tcp
{
  margin-left: 5px;
}

  /* cgamespoup */

body .popup .popup-content .games .text
{
  padding-left: 0px;
  padding-right: 0px;
}

body .popup .popup-content .games.cryptoplaycenter .popup-block
{
  padding-left: 1.5vw;
  padding-right: 1.5vw;
}

body .popup .popup-content .games .image
{
  height: auto;
}

body .popup .popup-content .games .image img
{
  width: 100%;
  height: auto;

  max-height: none;

  border-radius: 8px;

  box-shadow: none;
}

body .popup .popup-content .games.cryptoplaycenter .buttons .button
{
  width: 100%;
}



/** RoadMap  Page **/

body .page .roadmap
{
}

body .roadmap .road_line
{
  background-image: url('/src/road1.png');
  background-repeat: repeat-y;
  background-position: center;
  background-size: 8%;
}

body .roadmap .stages
{
  display: flex;
  flex-direction: column;

  gap: 1vw;

  width: 100%;
}

body .roadmap .stages .stage
{
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;

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

body .roadmap .stages .stage1
{
  flex-direction: row-reverse;
}

body .roadmap .stages .stage .text
{
  width: 46%;
  padding: 5px 0px 5px 14px;
  margin: 0px;

  text-align: left;
}
body .roadmap .stages .stage0 .text
{
  text-align: right;
  padding: 5px 14px 5px 0px;
}
body .roadmap .stages .ready
{
  opacity: 40%;
}

body .roadmap .stages .stage .state
{
  width: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body .roadmap .stages .stage .state img
{
  max-width: 100%;
}

body .roadmap .stages .stage .side
{
  width: 46%;
  padding: 5px 7px;
}


/* cbalance */


body .balance .tiles.buttons
{
  margin-bottom: 20px;
}

body .balance .tiles.buttons .tile
{
  font-size: 110%;

  gap: 5px;

  background: none;

  padding: 0px;
  width: calc(50% - 16px);

  margin-top: 6px;
  padding: 0px 4px;
}

body .balance .tiles.buttons .tile .button
{
  font-weight: normal;
  width: 100%;
}

body .page .connect-wallet
{
  display: flex;
  
  width: 100%;

  justify-content: center;
}

body .balance .form input
{
  width: 15vw;
}


/* cearn page  */

#earn-content .list .element .icon
{
  padding: 0px;

  border-radius: 50px;

  box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.4);
}





/* ctoken page */

body .token-page .element
{

}

body .token-page .element.free
{
  color: var(--success-color);
  font-weight: var(--title-font-weight);
}

body .token-page .element .number
{
  width: 10px;
}

body .token-page .element .nickname
{
  width: 100%;
}

body .token-page .element .count
{
  width: 100px;
}

body .token-page .element .percent
{
  width: 100px;
}

body .token-page .form input
{
  width: 15vw;
}

/** End Token  Page **/


/** Start News Page **/

body .news .list .element .date
{
  text-align: left;

  align-self: start;

  font-size: 90%;
}

body .news .list .element .image img
{
  max-width: 100%;

  border-radius: 10px;
}

body .news .list .element .overflow
{
  max-height: 60px;

  overflow: hidden;

  line-height: 1.3;
}

body .news .list .element .overflow.full
{
  max-height: inherit;
}

body .news .list .element .detail
{
  align-self: end;

  text-align: right;
}

body .news .list .element .buttons
{
  margin-top: 2vh;
}

body .news .list .element .detail a
{
  font-size: 100%;
  font-weight: var(--title-font-weight);
}

/** End News Page **/

/** Start Codes Page **/

body .codes .list .element .image img
{
  max-width: 100%;

  border-radius: 10px;
}

body .codes .list .element .text
{
  width: 100%;

  align-self: start;
}

body .codes .list .element .text .code
{
  display: block;

  padding-top: 10px;

  text-align: center;

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

/** End Codes Page **/


/* Share Page */

body .page #share-content .list .element .icon
{
  min-width: 8vh;
  min-height: 8vh;

  max-width: 8vh;
  max-height: 8vh;

  padding: 0px;
}

body .page #share-content .list .element .icon img
{
  border-radius: 4px;
  height: 100%;
  width: 100%;
}


body .page #share-content .list .element .share-buttons
{
  display: flex;

  gap: 1.5vw;

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

body .page #share-content .list .element .share-buttons .button
{
  height: 4vw;

  display: flex;

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

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

  text-wrap: nowrap;

  padding: 2vw;

  border-radius: 8px;

  text-align: center;
}

body .page  #share-content .list .element .share-buttons .button.square
{
  width: 4vw;
  height: 4vw;

  padding: 2vw;
}

body .page  #share-content .list .element .share-buttons .button svg,
body .page  #share-content .list .element .share-buttons .button img
{
  max-width: 100%;
  max-height: 100%;
}

body .page  #share-content .list .element .share-buttons .button .tcp
{
  margin-left: 5px;
}




/* cfriends page */

body .friends-page .buttons
{
  display: flex;
}

body .friends-page .buttons .button
{
  width1: 100%;
}


/** Market page **/

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: 25px;
  height: 25px;

  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-control-button a.disable
{
  background: var(--button-disable-background);
}

body .detail .count-control-form .count-value input
{
  width: 100px;

  border: none;

  background: none;

  outline: none;

  text-align: center;

  font-size: 140%;

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

body .detail .price
{
  display: flex;

  gap: 10px;

  padding: 20px 0px 10px 0px;

  font-size: 120%;

  justify-content: center;
}

body .detail .price span 
{
  display: flex;

  gap: 5px;

  align-items: center;
}

body .detail .price span svg
{
  width: 24px;
  height: 24px;
}

body .detail .available
{
  padding: 10px 0px 5px 0px;

  text-align: center;

  font-size: 120%;
}

/** Market page **/