:root {
  --botbar-height: 45px;
  --right-ads-width: 300px;
  --game-height: 765px; /* calc(100vh - var(--topbar-height) - var(--banner-height) - 10px); */

  --dark-bg-color: #33363f;
  --page-bg-color: #000;
}

.page {
  background-color: var(--page-bg-color);
}

.game-container {

}

.game-container-ads {
  position: relative;
  width: calc(100vw - var(--right-ads-width) * 2 + 20px);
  left: 280px;
  height: var(--game-height);
  max-height: calc(min(83vh, 60vw));
  min-height: 600px;
  min-width: 660px;
}

.game-container-noads {
}

.game-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5px 0px 0px 5px;
}

.gamerun {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.game-bottom {
  height: var(--botbar-height);
  position: relative;
  left: 280px;
  width: calc(100vw - var(--right-ads-width) * 2 - 5px + 20px);
  margin: 0px 5px 0px 5px;
  background-color: var(--dark-bg-color);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  min-width: 660px;
}

.promo-bottom {
  display: flex;
  height: calc(((100vw - 50px) / 5 - 25px) * 0.5 + 10px);
  width: calc(100vw - var(--right-ads-width) - 5px);
  background-color: var(--page-bg-color);
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  align-items: center;
  overflow-y: clip;
  margin: 5px;
}

.big-light-text {
  color: var(--button-text-color);
  font-size: larger;
  font-weight: bold;
  display: flex;
  margin: 2px 0 2px 0;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.small-light-text {
  color: var(--button-text-color);
}

.game-actions {
  display: flex;
  min-width: 350px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
}

.game-action-name {
  width: 350px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px;
  height: 48px;
  background-color: unset !important;
}

.action-icon {
  background-color: var(--dark-bg-color);
  padding: 0px;
}

.action-divider {
  background-image: url("/images/vert.svg");
  background-position: center;
  background-repeat: no-repeat;
  padding: 0px;
  width: 4px;
  height: 40px;
}

/* info panel */

.info-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-left: 10px;
}

.info-left {
  width: var(--banner-width);
}

.info-mid {
  padding: 0px 30px 0px 30px;
  width: calc(100vw - (var(--banner-width) * 2));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.mute-text {
  color: var(--text-color-mute);
}

.info-data {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}

.data-left {
  width: 200px;
}

.data-right {
  width: calc(100vw - 280px - var(--banner-width) * 2);
  color: var(--button-text-color);
}

.data-mid {
  border-style: none;
  width: auto;
  height: calc(var(--banner-width) * 0.2);
  margin: 10px 10px 10px 0;
}

.data-name {
  background-color: var(--round-button-color);
  border-radius: 30px;
  padding: 10px 20px 10px 15px;
  margin: 10px 10px 10px 0;
  height: 40px;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  color: var(--text-color-mute) !important;
}


.block-system {
  padding: 0px !important;
}