.tooltip {
  text-align: left;
  max-width: 50%;
} 


.button {
  align-items: center;
  background-color: transparent;
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  border: none;
  border-radius: 4px;
  color: var(--primary-color);
  cursor: pointer;
  display: flex;
  font-family: var(--font-family);
  justify-content: center;
  outline: none;
  position: relative;
  text-align: center;
  white-space: pre-line;
}

.button-default {
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0;
  font-size: var(--h4);
  min-width: 296px;
  min-height: 128px;
}

.long-button {
  font-size: var(--h3);
  padding: 12px 16px;
}

.icon-button {
  filter: brightness(1.05);
  flex-direction: column;
  font-size: var(--h6);
  font-style: italic;
  margin-bottom: 20px;
  width: 100%;
}

.icon-button-img {
  height: 44;
  width: auto;
}

.button-screw {
  image-rendering: -webkit-optimize-contrast;
  height: 10px;
  position: absolute;
}

.imgbutton {
  cursor: pointer;
  height: auto;
  margin-bottom: 20px;
  width: 162;
}


.button:hover,
.imgbutton:hover,
.icon-button:hover {
  filter: brightness(1.15);
}

.disable-highlight:hover {
  /*This is the default brightness */
  filter: brightness(1.05);
}


.volume-container {
  position: relative;
  top: 65;
  left: 250;
}

.volume {
  position: absolute;
  top: -20;
  padding: 12 16;
  width: auto;
}

.volume-bar {
  position: absolute;
  left: -76;
  top: -50;
  padding: 8px 16px;
  border-radius: 25px;
}

@media screen and (max-height: 600px) {
  .button-default {
    min-width: 164px;
    min-height: 72px;
  }

  .long-button {
    padding: 3px 16px;
  }
  .icon-button {
    padding: 3px 16px;
    margin-bottom: 8px;
  }
  .icon-button-img {
    height: 20;
    width: auto;
  }

  .button-screw {
    height: 7px;
  }

  .volume-container {
    top: 28;
    left: 124;
  }

  .volume {
    top: 0;
    padding: 8 12;
  }

  .volume-bar {
    left: -36;
    top: -20;
    padding: 4px;
  }

  .volume-bar-input {
    width: 112 !important;
    height: 6px !important;
  }
}

#center_console_root {
  display: flex;
  height: calc(100% - 88px);
  justify-content: center;
  margin: auto;
  top: 88px;
  position: relative;
  width: 100%;
  max-width: 1366;
}

.center_login {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: -88;
  flex-direction: column;
}

.center_login img {
  width: 320;
}

.center_login button {
  font-size: var(--title);
  min-width: 248;
}

.center_console_img {
  max-height: 488;
  top: 48;
  bottom: 0;
  position: absolute;
  max-width: 940;
}

#logout-btn {
  bottom: 40;
  cursor: pointer;
  height: 28;
  position: absolute;
  right: 64;
  width: auto;
  z-index: 10;
}

.container_centered {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: max-content;
}

.loading {
  color: white;
  left: 1262 / 2 - 279 / 3;
  position: absolute;
  top: 330;
  z-index: 1;
}

@media screen and (max-height: 600px) {
  #center_console_root {
    height: calc(100% - 44px);
    top: 44px;
  }

  .center_console_img {
    height: 84%;
    max-width: 84%;
    top: 28;
    width: auto;
  }

  #logout-btn {
    bottom: 20;
    height: 16;
    right: 32;
  }
}

.modal-container {
  position: fixed;
  inset: 0px;
  background-color: rgba(0, 0, 0, 0.64);
  z-index: 200;
  display: flex;
  justify-content: center;
}

.modal {
  align-items: center;
  background-color: var(--light);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--primary-color);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  height: 80%;
  justify-content: center;
  margin: auto;
  padding: 60 20 12;
  position: relative;
  width: 72%;
}

.modal-close {
  background-color: var(--primary-color);
  border: none;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--h5);
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 60;
}

.modal-title {
  background-color: var(--secondary-color);
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
  box-sizing: border-box;
  border-radius: 8px;
  color: white;
  font-size: var(--h2);
  width: calc(100% - 48px);
  min-height: 72;
  top: -36;
  margin-bottom: 20;
  overflow: hidden;
  padding: 8px 16px;
  position: absolute;
}

.modal-content {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding-right: 12px;
  width: calc(100% - 24px);
}

.modal-button {
  line-height: var(--h3);
  margin-top: 20px;
  padding: 12px 20px;
}

@media screen and (max-height: 600px) {
  .modal {
    height: 80%;
    margin: auto;
    padding: 32 12 12;
    width: 72%;
  }

  .modal-close {
    width: 32;
  }

  .modal-title {
    min-height: 40;
    top: -24;
  }

  .modal-content {
    width: calc(100% - 40px);
  }

  .modal-button {
    margin-top: 12px;
    padding: 8px 12px;
  }
}

.damagecrack {
  position: absolute;
  width: 200px;
  height: 200px;
}

#damage-text {
  text-align: center;
  font-size: var(--header);
  font-family: var(--font-family);
  position: absolute;
  z-index: 100;
  color: var(--light);
  right: -100;
  -webkit-text-stroke: 5px var(--light-primary);
  -webkit-text-fill-color: var(--light);
}

.damage-fade {
  animation: damageFade 2s;
  opacity: 0;
}

@keyframes damageFade {
  from {
    top: 20px;
    opacity: 1;
  }
  to {
    top: -50px;
    opacity: 0;
  }
}

/* Firefox < 16 */
@-moz-keyframes damageFade {
  from {
    top: 20px;
    opacity: 1;
  }
  to {
    top: -50px;
    opacity: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes damageFade {
  from {
    top: 20px;
    opacity: 1;
  }
  to {
    top: -50px;
    opacity: 0;
  }
}

/* Internet Explorer */
@-ms-keyframes damageFade {
  from {
    top: 20px;
    opacity: 1;
  }
  to {
    top: -50px;
    opacity: 0;
  }
}

/* Opera < 12.1 */
@-o-keyframes damageFade {
  from {
    top: 20px;
    opacity: 1;
  }
  to {
    top: -50px;
    opacity: 0;
  }
}

.countdown_timer,
.message_frame {
  color: var(--primary-color);
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.special_frame {
  min-height: 128px;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0;
  min-width: 296px;
  min-height: 128px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (max-height: 600px) {
  .special_frame {
    min-width: 164px;
    min-height: 72px;
  }
}

.special_frame_button {
  min-height: auto;
}

.message_frame_custom {
  z-index: 5;
}

.countdown_timer label {
  cursor: pointer;
  font-size: var(--h3);
  line-height: var(--h3);
}

.countdown_text {
  line-height: 25px;
  text-align: center;
}

.countdown_timer_button {
  flex-direction: column;
}

.message_frame_maintext {
  font-size: var(--h1);
}

.message_frame_subtext {
  font-size: var(--label);
  position: relative;
  top: -8;
  white-space: pre-line;
}

.no-cursor {
  cursor: default;
}

.no-cursor:hover {
  filter: brightness(1);
}

.event_message {
  font-family: sans-serif;
  font-size: var(--caption);
}

#event_panel,
#notice_panel {
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  padding: 8px 4px;
  position: relative;
}

#event_panel {
  background-color: #000000d9;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.4);
  margin-right: 16px;
  height: calc(100% - 40px);
  flex: 30%;
}

#notice_panel {
  height: 100%;
  flex: 70%;
}

.event_content {
  height: calc(100% - 16px);
  margin: 8;
  padding-right: 4;
  overflow: auto;
}

.notice_content {
  box-shadow: 5px 5px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.notice_text {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: var(--body);
  height: calc(100% - 16px);
  justify-content: space-around;
  margin: 8;
  padding-bottom: 8;
  position: relative;
  text-align: center;
  z-index: 5;
}

#crash_art_display {
  background-color: black;
  filter: brightness(70%);
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  position: absolute;
  width: 100%;
  z-index: 1;
}

@media screen and (max-height: 600px) {
  #event_panel {
    height: calc(100% - 40px);
  }

  #notice_panel {
    height: 100%;
  }

  .event_content,
  .notice_content {
    margin: 4;
  }
}

@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 1s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.06),
      rgba(0, 255, 0, 0.02),
      rgba(0, 0, 255, 0.06)
    );
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/*We don't use these but just saving these for future references

.crt {
  animation: textShadow 1.6s infinite;
  
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
}

*/

#tokens-container {
  color: var(--light-primary);
  text-align: center;
  width: 100%;
  font-size: var(--h5);
}

.nft_rewards_container {
  text-align: center;
  position: relative;
  padding-top: 5px;
  height: 275px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.imageDiv img {
  box-shadow: 1px 1px 10px #999;
  margin: 2px;
  max-height: 50px;
  cursor: pointer;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: top;
}

.nft_card {
  min-width: 200px;
  height: 275px;
  display: inline-block;
}

.container_row {
  display: flex;
  align-items: center;
  flex-direction: row;
  /* height: calc(100% - 88px - 128px); */
  justify-content: center;
  width: 100%;
  aspect-ratio: 235/122;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-sizing: border-box;
  padding: 88px 80px 64px;
  margin-top: -80px;
  max-width: 940;
}

/* UNPLAYABLE SCREEN */
.alert_container {
  background-color: #000000d9;
  border-radius: 8px;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.4);
  color: var(--tertiary-color);
  font-family: var(--font-family);
  letter-spacing: 0.5px;
  padding: 40 16;
  position: relative;
  z-index: 100;
}

.alert_header {
  font-size: var(--h1);
  margin-bottom: 8;
}

.alert_subtext {
  color: white;
  font-size: var(--body);
  margin-bottom: 20;
}

.alert_subtext span {
  color: var(--tertiary-color);
}

.alert_link {
  color: inherit;
  font-size: var(--label);
  margin-bottom: 20;
}

.notice_larger {
  font-size: var(--h1);
}

.notice_large {
  font-size: var(--h2);
}

.notice_medium {
  font-size: var(--h5);
}

.nextRound_equipped {
  display: flex;
  text-align: center;
}

.nextRound_equipped img {
  margin: 0 8 !important;
  width: calc(208px * 0.7) !important;
}

.nextRound_rank {
  font-size: var(--h5);
}

.nextRound_rank span {
  margin-left: 8;
}

.winner_first {
  font-size: var(--title);
}

.winner_first span {
  font-size: var(--h3);
}

.battle_screen_icons {
  width: 1em;
}

.rewardpool_container {
  top: 44;
  left: -250;
  position: relative;
}

.rewardpool,
.ingame-marketplace {
  flex-direction: row;
  padding: 8 16;
  position: absolute;
  width: auto;
  font-style: normal;
}

.rewardpool {
  left: -64;
}

.ingame-marketplace_container {
  top: 80;
  position: relative;
  align-self: flex-start;
  left: -112;
}

@media screen and (max-height: 600px) {
  .container_row {
    max-width: 72%;
    height: auto;
    padding: 52px 52px 40px;
    margin-top: -52px;
  }

  .nextRound_equipped img {
    margin: 0 8 !important;
    width: calc(92px * 0.7) !important;
  }

  .nextRound_rank {
    font-size: var(--h6);
  }

  .rewardpool_container {
    top: 28;
    left: -116;
  }

  .ingame-marketplace_container {
    top: 40;
    left: -64;
  }
}

.exchange-title {
  color: var(--primary-color);
  font-family: var(--font-family);
  font-size: var(--h4);
}

.exchange-input {
  padding: 8 24;
  font-family: var(--font-family);
  font-size: var(--h2);
  width: 80%;
}

.exchange-buttons {
  display: flex;
  flex-direction: row;
}

.exchange-buttons button {
  min-width: 220;
  margin-right: 12;
}

.claims-title {
  color: var(--light-primary);
  font-size: var(--h2);
  position: "absolute";
  left: 170;
  top: 75;
}

@media screen and (max-height: 600px) {
  .exchange-input {
    padding: 8;
  }

  .exchange-buttons button {
    min-width: 120;
  }
}

.btn {
  cursor: pointer;
}

.selected_display {
  background-color: var(--light);
  height: 100%;
  display: flex;
  color: white;
  font-family: var(--font-family);
  margin-right: 24;
}

.selection_panel {
  display: grid;
  grid-gap: 1rem 0.5rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.selection_cell {
  max-width: 151px;
}

.selection_cell .btn {
  align-items: center;
  justify-content: center;
  height: 100%;
}

.selection_panel_container {
  scrollbar-color: var(--primary-color) var(--light);
  scrollbar-width: 10px;
}

.selection_panel a {
  display: flex;
  position: relative;
  float: left;
  width: 100%;
}

.selection_panel a.active {
  background-color: var(--light-red);
}

.selection_panel a.selected {
  /*background-color: var(--secondary-color);*/
}

.selection_panel a span {
  display: none;
  color: white;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #a9a9a9;
  position: absolute;
  left: 4px;
  z-index: 99999;
  width: calc(100% - 8px);
  padding: 6px 8px;
  text-align: center;
  -webkit-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.4);
  font-family: var(--font-family);
}

.selection_panel a span.stats {
  bottom: 5;
}

.selection_panel a span.state {
  top: 5;
}

.selection_panel a:hover span.stats,
.selection_panel a.active span.stats,
.selection_panel a.selected span.stats,
.selection_panel a.active span.state,
.selection_panel a.selected span.state {
  display: block;
}

.selection_panel a.selected > .selection_img {
  /* outline: 4px solid #c36531; */
  outline-offset: -4px;
}

.selection_img {
  /*background-color: black; removed black bg, so our loading img is visible*/
  height: 200;
  min-width: 140;
  margin: 4;
  object-fit: contain;
  width: calc(100% - 8px);
}

.multiple_select {
  height: 90%;
  overflow-y: auto;
  text-align: center;
  width: 168;
  padding: 12 0 32;
}

.panel_container {
  box-sizing: border-box;
  overflow: auto;
  height: 100%;
  background-color: black;
  padding: 12;
  width: 100%;
}

.selection_img_smaller {
  height: 160;
}

.nft_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
}

.nft_info_display_container {
  width: auto;
  height: 400;
}

.nft_img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

.nft_info {
  background-color: var(--secondary-color);
  min-width: 153px;
}

.nft_text_container {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgb(195, 101, 49, 0.8);
  box-sizing: border-box;
  text-align: center;
  padding: 4;
  font-size: var(--body);
}

.nft_text_name {
  background-color: var(--light-red);
  text-align: center;
  font-size: var(--body);
}

.nft_text_item {
  text-align: center;
}

.selection_modal_header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  font-size: var(--h5);
  color: white;
  justify-content: space-between;
  background-color: var(--primary-color);
  font-family: var(--font-family);
  text-align: center;
}

.selection_spot {
  cursor: pointer;
  position: relative;
}

.selection_spot_thumbnail {
  height: 140;
  width: 100;
}

.selection_spot_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selection_spot span {
  bottom: 0;
  color: white;
  font-size: var(--label);
  left: 0;
  margin: 0 auto;
  right: 0;
  width: 83;
}

#car_selection_spot {
  position: relative;
  cursor: pointer;
  height: 288;
  width: 208;
  margin: 0 32px;
}

#car_selection_spot span {
  box-sizing: border-box;
  left: 0;
  margin: 0 auto;
  right: 0;
  width: 208;
  z-index: 1;
}

#car_selection_spot span.car_name {
  font-family: var(--font-family);
  font-size: var(--body);
  top: 0;
  color: var(--tertiary-color);
}

#car_selection_spot span.switch_label {
  font-size: var(--h5);
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@media screen and (max-height: 600px) {
  .selection_panel_container {
    scrollbar-width: 4px;
  }

  .panel_container .selection_panel {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .panel_container .selection_img {
    height: auto;
    width: calc(100% / 3);
    min-width: 80;
  }

  #car_selection_spot,
  .selection_spot_thumbnail {
    height: 156;
    width: 112;
  }
  #car_selection_spot {
    margin: 0 16px;
  }

  .nft_info {
    min-width: unset;
  }

  .multiple_select {
    width: 100;
  }

  .multiple_select .selection_img {
    min-width: 80;
    height: 80;
  }
}

.main_lobby {
  flex-wrap: nowrap;
  margin-top: 16px;
}

.side_buttons {
  width: 160;
}

.side_buttons .icon-button-img {
  padding-top:7.5px;
}

.main_lobby_center {
  flex-wrap: nowrap;
  margin: 0 32 16;
  width: auto !important;
}

.selection_large .selection_spot_thumbnail {
  height: 288;
  width: 208;
}

.main_lobby_upgrades {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  row-gap: 8px;
  column-gap: 8px;
  width: auto;
}

.close-container {
  margin: 4px auto;
  height: 111;
  z-index: 5;
}

.close-container img {
  height: 100%;
  margin: 0;
  width: auto;
}

.join-entries {
  color: #955917;
}

.join-entries input {
  border: none;
  border-radius: 4px;
  font-size: var(--label);
  margin-inline: 4px;
  outline: none;
  padding: 4 8;
  text-align: center;
  width: 100;
}

.joins-controls {
  background-color: #821f19;
  color: white;
  border: none;
  padding: 4 8;
  border-radius: 4px;
  cursor: pointer;
}

@media screen and (max-height: 600px) {
  .main_lobby {
    margin-top: 8px;
  }

  .main_lobby_center {
    margin: 0 16 8;
  }

  .side_buttons {
    width: 92;
  }

  .selection_large .selection_spot_thumbnail {
    height: 156;
    width: 112;
  }

  .main_lobby_upgrades {
    row-gap: 4px;
    column-gap: 4px;
    grid-auto-rows: 70px;
  }

  .main_lobby_upgrades .selection_spot_thumbnail {
    height: 70;
    width: auto;
  }

  .join-entries input {
    padding: 0 2;
    width: 60;
  }

  .joins-controls {
    padding: 0 6;
  }

  .close-container {
    height: 56;
  }
}

/* INVENTORY HEADER */
.inventory-header {
  align-items: center;
  background-color: black;
  box-sizing: border-box;
  color: white;
  display: flex;
  font-family: var(--font-family);
  height: 88;
  justify-content: space-between;
  left: 0;
  margin: 0 auto;
  max-width: 1136;
  padding: 0 20px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 20;
}

.inventory-title {
  font-size: var(--h1);
}

.inventory-buttons {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.inventory-header button {
  font-size: var(--body);
  min-height: 73;
}


.inventory-header-return {
  font-style: normal;
  padding: 0 20px;
  margin-bottom: 0;
  margin-left: 8px;
}

@media screen and (max-height: 600px) {
  .inventory-header {
    height: 44;
    max-width: calc(100% - 16px);
  }

  .inventory-header button {
    min-height: 33;
  }
}

#total-stats {
  color: white;
  font-family: var(--font-family);
  font-size: var(--h5);
  height: 100%;
  width: 24%;
}

#total-stats hr {
  margin: 4px 0;
}

#stats-title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  font-size: var(--h4);
  align-items: center;
  margin-bottom: 8px;
}

.stat_definition {
  color: var(--secondary-color);
}

.stat_question {
  cursor: pointer;
  border: 3px solid;
  font-size: var(--h6);
  font-weight: 900;
  padding: 1 12;
  border-radius: 50%;
}

.stat_definition {
  background-color: rgba(245, 222, 179, 0.6);
  margin: 8px 0 28px;
  padding-inline: 12px;
  border-radius: 16px;
  padding-block: 12px;
  position: relative;
}

.stat_title {
  margin-left: 32px;
  margin-top: 0px;
  font-size: var(--h6);
  padding-bottom: 2px;
}

.stat_help_icons,
.stat_panel_icons {
  position: absolute;
  left: 0px;
  width: 28px;
}
.stat_panel_icons {
  left: 2px;
  top: -1px;
  width: 21.5px;
}

.stat-detail {
  position: relative;
}

.stat-detail-value {
  position: relative;
  left: 30px;
}

@media screen and (max-height: 600px) {
  .stat_question {
    border: 2px solid;
    padding: 1 8;
  }

  .stat_title {
    margin-left: 24px;
  }

  .stat_definition {
    margin: 8px 0 24px;
    border-radius: 8px;
  }

  .stat_help_icons,
  .stat_panel_icons {
    width: 16px;
  }

  .stat_panel_icons {
    width: 10px;
  }
}

.nft_slot {
  position: relative;
  z-index: 3;
  cursor: pointer;
  width: auto;
}

.nft_slot_label {
  position: absolute;
  bottom: 0;
  width: auto;
  right: -4;
  font-size: var(--h6);
}

.nft_slot_label img {
  width: 40px;
}

.nft_slot_card_display {
  height: 100%;
  display: flex;
  object-fit: contain;
  width: 100%;
}

@media screen and (max-height: 600px) {
  .nft_slot_label img {
    width: 32px;
  }
}

.market_panel_container {
  position: absolute !important;
  scrollbar-color: var(--primary-color) var(--light);
  scrollbar-width: 10px;
  overflow: auto;
}

.market_panel {
  display: grid;
  grid-gap: 1rem 0.5rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 0.5rem 1rem 1rem;
}

.market_cell {
  align-items: center;
  background-color: var(--secondary-color);
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  padding: 12px;
  text-align: center;
  width: calc(100% - 4px);
}

.market_name {
  background-color: white;
  border-radius: 2px;
  color: var(--light-primary);
  height: 48;
  margin-bottom: 8;
  padding: 4;
  text-decoration: none;
  width: 100%;
}

.market_img {
  box-sizing: border-box;
  height: 240;
  width: 100%;
  border-radius: 2px;
  object-fit: contain;
  background-color: #000000d9;
  margin-bottom: 8;
  padding: 4 8;
}

.market_left {
  color: white;
  letter-spacing: 1;
  margin-bottom: 8;
}

.market_button {
  font-size: var(--label);
  min-height: 48;
  width: 100%;
}
.market-tabs {
  align-items: center;
  display: flex;
  flex-direction: row;
  font-style: normal;
  padding: 0px;
  margin-bottom: 0;
  margin-left: 8px;
  flex-wrap: wrap;
}

.market-tabs .highlight-on {
  filter: brightness(1.15);
  text-decoration: underline;
}

.market-tabs .long-button,
.market-wallet-display {
  font-size: var(--h6);
}

.market-tabs .inventory-header-return {
  margin-bottom: 8px;
}

.market-top-button {
  cursor: auto;
  flex-direction: row;
  margin-left: 8px;
  margin-bottom: 0;
  padding: 4px 16px;
}

.market-top-button .icon-button-img {
  width: 32px;
  height: 32px;
}

@media screen and (max-height: 600px) {
  .market_name {
    height: 32;
  }

  .market_img {
    height: 164;
  }

  .market_button {
    font-size: var(--label);
    min-height: 40;
    width: 100%;
  }

  .market-top-button .icon-button-img {
    width: 20px;
    height: 20px;
  }
}

.return-btn {
  background-color: var(--light-primary);
  border: white solid;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  font-family: var(--font-family);
  padding: 4 24;
}

#backdrop {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
}

.inventory-container {
  background-color: black;
  box-sizing: border-box;
  height: calc(100vh - 112px);
  max-width: 1136;
  padding: 20;
  position: relative;
  top: 12px;
  width: 100%;
  z-index: 20;
}

.inventory-details {
  display: flex;
  height: 40%;
  margin-bottom: 12;
  justify-content: space-between;
  width: 100%;
  max-height: 200;
}

.inventory-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 8;
  width: 100%;
}

#stat-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 16px;
  row-gap: 8px;
  column-gap: 8px;
}

.stat-detail {
  font-size: var(--body);
}

#equipped {
  max-width: 140px;
}

#equipped img {
  height: 100%;
  width: auto;
}

#left-stat-buttons {
  display: flex;
  flex-direction: column;
  justify-content: end;
  max-width: 170;
  width: 100%;
}

#left-stat-buttons button {
  font-size: var(--body);
  line-height: var(--h6);
  width: 100%;
}

.inventory-upgrades {
  grid-auto-rows: calc((100% / 2) - 4px);
  max-width: 144;
}

.inventory-upgrades .selection_spot_thumbnail,
.inventory-upgrades .selection_spot_thumbnail img {
  height: 100%;
  width: auto;
}

.inventory-slots {
  display: flex;
  justify-content: space-between;
  height: calc(60% - 8px);
  width: 100%;
}

.inventory_left,
.inventory_right {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  row-gap: 12px;
  column-gap: 12px;
  max-width: calc(70% - 32px);
  max-width: 40%;
}

.inventory_left {
  grid-template-columns: repeat(3, 1fr);
  max-width: 30%;
}

@media screen and (max-height: 600px) {
  .inventory-container {
    height: calc(100vh - 64px);
    padding: 12;
    top: 8;
    width: calc(100% - 16px);
  }

  .inventory-details {
    margin-bottom: 8;
  }

  #left-stat-buttons {
    max-width: 112;
  }

  #stat-container {
    grid-auto-rows: 8px;
    row-gap: 4px;
    column-gap: 4px;
  }

  .inventory_left,
  .inventory_right {
    grid-auto-rows: calc(100% / 2);
    row-gap: 4px;
    column-gap: 4px;
  }
}

#dashboard {
  align-items: center;
  background-color: #000000d9;
  box-sizing: border-box;
  color: white;
  display: flex;
  height: 88;
  left: 0;
  margin: 0 auto;
  max-width: 1136;
  padding: 0 20px;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 10;
}

#account-name {
  font-size: var(--h5);
  padding-right: 76px;
}

#refresh-btn-container {
  display: flex;
  cursor: pointer;
}

#refresh-btn {
  height: auto;
  padding-right: 6px;
  width: 22px;
}

.acct_stats {
  display: flex;
  align-items: center;
  padding-right: 40px;
}

.energy-icon {
  padding-right: 4px;
  width: 20px;
}

.add-energy-btn {
  cursor: pointer;
  padding-left: 4px;
  width: 16px;
}

.dashboard_logo {
  bottom: 0;
  height: calc(100% - 12px);
  image-rendering: -webkit-optimize-contrast;
  margin: auto 0;
  position: absolute;
  right: 8;
  top: 0;
  width: auto;
}

.continuously-rotate {
  animation: rotation 1s infinite linear;
}

/* refresh animation */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.rotatedon {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transition: transform 1s ease-in-out;
}
.rotatedoff {
  transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transition: transform 1s ease-in-out;
}

.showdashboard {
  transition: top 1s;
  top: 0px;
}

.hidedashboard {
  transition: top 1s;
  top: -88px;
}

.loading_screen {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading_screen img {
  width: 25%;
}

#main_loading_text {
  color: white;
  font-size: var(--header);
  letter-spacing: 15;
  margin: 0;
  text-align: center;
  width: 100%;
  z-index: 2;
}

@media screen and (max-height: 600px) {
  #dashboard {
    height: 44;
    max-width: 680px;
    width: calc(100% - 16px);
  }

  #account-name {
    padding-right: 32px;
  }

  #refresh-btn {
    padding-right: 4px;
    width: 12px;
  }

  .acct_stats {
    padding-right: 20px;
  }

  .energy-icon {
    padding-right: 2px;
    width: 12px;
  }

  .add-energy-btn {
    width: 10px;
  }
}

@font-face {
  font-family: "Phosphate-Solid";
  font-display: swap;
  src: url("/Phosphate-Solid.32ee56ff.woff") format("woff");
}

@font-face {
  font-family: "Phosphate-Inline";
  font-display: swap;
  src: local("myfont"),
    url("/Phosphate-Inline.d023b7f1.woff") format("woff");
}

:root {
  --font-family: "Phosphate-Solid";
  --primary-color: #821f19;
  --secondary-color: #c36531;
  --tertiary-color: #ffb452;
  --light-primary: #d8352a;
  --light: #f5e7be;
  --header: 90px;
  --title: 72px;
  --h1: 60px;
  --h2: 44px;
  --h3: 40px;
  --h4: 32px;
  --h5: 28px;
  --h6: 24px;
  --body: 20px;
  --label: 16px;
  --caption: 12px;
}

body {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: var(--font-family);
  font-size: var(--body);
  max-height: 657;
}

.container,
.container-row,
.column-centered,
.row-centered {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 1136;
  width: 100%;
}

.container-row,
.column-centered,
.row-centered {
  max-width: unset;
  justify-content: center;
}

.container-row,
.row-centered {
  flex-direction: row;
}

@media screen and (max-height: 600px) {
  :root {
    --header: 64px;
    --title: 44px;
    --h1: 32px;
    --h2: 24px;
    --h3: 24px;
    --h4: 20px;
    --h5: 17px;
    --h6: 14px;
    --body: 10px;
    --label: 9px;
    --caption: 8px;
  }

  body {
    background-size: cover;
  }

  .container {
    max-width: calc(100% - 16px);
  }
}

/*
    SCROLLBAR STYLES
*/

::-webkit-scrollbar {
  width: 10px;
}

@media only screen and (max-width: 1136px) {
  ::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
}

/* Track */
::-webkit-scrollbar-track {
  background-color: rgb(255, 250, 203);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(195, 101, 49);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(195, 101, 49);
}


/*# sourceMappingURL=/source.a045e646.css.map */