* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

html {
  font-size: 10px;
}

@font-face {
  font-family: "GameFont";
  src: url("../assets/fonts/PressStart2P-Regular.ttf");
  font-weight: 400;
}
/*@font-face {
    font-family: 'GameFont1';
    src: url('../assets/fonts/SpaceGrotesk-Regular.ttf');
    font-weight: 400;
}*/
@font-face {
  font-family: "GameFont1";
  src: url("../assets/fonts/FIRAGO.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "Pixeled";
  src: url("../assets/fonts/Pixeled.otf");
  font-weight: 400;
}
@font-face {
  font-family: "Victor";
  src: url("../assets/fonts/victor-pixel.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "GameFont4";
  src: url("../assets/fonts/SpaceMono-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "RetroComputer";
  src: url("../assets/fonts/RetroComputer.otf");
  font-weight: 400;
}
@font-face {
  font-family: "Pixel";
  src: url(../assets/fonts/Pixel.TTF);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DIGIB";
  src: url(../assets/fonts/DS-DIGIB.TTF);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "numberFont";
  src: url(../assets/fonts/numberFont.otf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "PIXELOPERATOR";
  src: url(../assets/fonts/PIXELOPERATORHB8.TTF);
  font-weight: normal;
  font-style: normal;
}
/*@font-face {
    font-family: "Aldrich";
    src: url(../assets/fonts/Aldrich-Regular.TTF);
    font-weight: normal;
    font-style: normal;
}

*/
/*@font-face {
    font-family: "joystix";
    src: url(../assets/fonts/joystixmonospace.otf);
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "adobeDia";
    src: url(../assets/fonts/AdobeDia.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "BitPotion";
    src: url(../assets/fonts/BitPotion.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "BitPotionExt";
    src: url(../assets/fonts/BitPotionExt.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "minecraftPia";
    src: url(../assets/fonts/Minecraftia-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}*/
#buyBonusBackdrop {
  display: none;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-family: GameFont;
  /* #buyBonusClose {
      position: fixed;
      top: 3vh;
      right: 3vw;
      height: 20px;
      width: 20px;
      cursor: pointer;
  }

  #buyBonusHeader {
      position: fixed;
      top: 3vh;
      text-align: center;
      color: white;
      font-family: GameFont;
      font-size: 22px;
      pointer-events: none;
  }*/
}
#buyBonusBackdrop.active {
  display: flex;
}
#buyBonusBackdrop #pickContainer {
  /*   display: none;*/
  position: absolute;
  opacity: 1;
  overflow: hidden;
  transition: 0ms;
  pointer-events: none;
  transform: scale(0);
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 30px 15px 30px;
  height: 320px;
  width: 316px;
  font-family: "gameFont";
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button {
  font-family: "gameFont";
}
#buyBonusBackdrop #pickContainer.ka {
  font-family: "retroComputer";
}
#buyBonusBackdrop #pickContainer.ka #pickButtonContainer button {
  font-family: "retroComputer";
}
#buyBonusBackdrop #pickContainer > * {
  font-family: inherit;
}
#buyBonusBackdrop #pickContainer.active {
  transition: 200ms;
  display: flex;
  flex-direction: column;
  transform: scale(1);
  pointer-events: unset;
}
#buyBonusBackdrop #pickContainer img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}
#buyBonusBackdrop #pickContainer h1, #buyBonusBackdrop #pickContainer #pickedPrice {
  text-align: center;
  color: #FFFFFF;
  text-shadow: -1px -1px 0 #050234, 1px -1px 0 #050234, -1px 1px 0 #050234, 1px 1px 0 #050234;
}
#buyBonusBackdrop #pickContainer h1 {
  font-size: 19px;
  line-height: 30px;
}
#buyBonusBackdrop #pickContainer #pickedPrice {
  font-size: 20px;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button {
  background: transparent;
  color: #804AB7;
  width: 135px;
  height: 58px;
  font-size: 16px;
  transition: 200ms;
  height: 50px;
  position: relative;
  border: 0;
  cursor: pointer;
  text-shadow: -1px -1px 0 #050234, 1px -1px 0 #050234, -1px 1px 0 #050234, 1px 1px 0 #050234;
  /*&:hover {
      background: rgba(214, 219, 255, 0.2);
      cursor: pointer;
  }*/
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitFalse {
  color: #50D2FB;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitFalse .hover {
  display: none;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitFalse:hover {
  color: #9DE6FD;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitFalse:hover .default {
  display: none;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitFalse:hover .hover {
  display: unset;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitTrue {
  color: #FF9800;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitTrue .hover {
  display: none;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitTrue:hover {
  color: #FFB13E;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitTrue:hover .default {
  display: none;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button#pickSubmitTrue:hover .hover {
  display: unset;
}
#buyBonusBackdrop #pickContainer #pickButtonContainer button img {
  position: absolute;
  height: 100%;
  width: 100%;
}
#buyBonusBackdrop #buyBonusContainer {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  #buyBonusBackdrop #buyBonusContainer {
    height: 950px;
  }
}
#buyBonusBackdrop #buyBonusContainer.hide {
  display: none;
}
#buyBonusBackdrop #buyBonusContainer #changeBetOptionText {
  color: white;
  font-size: 22px;
  width: 100%;
  text-align: center;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#buyBonusBackdrop #buyBonusContainer #changeBetOptionText.ka {
  font-family: retroComputer;
}
#buyBonusBackdrop #buyBonusContainer .betOption {
  width: 100%;
  height: 100px;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#buyBonusBackdrop #buyBonusContainer .betOption #buyBonusBetContainer {
  width: 350px;
  height: 65px;
  background: #FDE230;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
}
#buyBonusBackdrop #buyBonusContainer .betOption #buyBonusBetContainer #buyBonusBet {
  font-size: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow {
  height: 72px;
  width: 72px;
  cursor: pointer;
}
#buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow .up, #buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow .down, #buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow .upActive, #buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow .downActive {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
#buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow .upActive, #buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow .downActive {
  display: none;
}
#buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow:hover .upActive, #buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow:hover .downActive {
  display: inline-block;
}
#buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow:hover .up, #buyBonusBackdrop #buyBonusContainer .betOption .buyBonusArrow:hover .down {
  display: none;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions {
  display: flex;
  height: 328px;
  gap: 25px;
}
@media (max-width: 768px) {
  #buyBonusBackdrop #buyBonusContainer #bonusOptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption {
  font-family: GameFont;
  width: 320px;
  height: 328px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
  transition: 200ms;
  position: relative;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption .buyBonusBg, #buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption .buyBonusBgHover {
  width: 320px;
  height: 328px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption .buyBonusBgHover {
  display: none;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption .buyBonusTxt {
  top: 50%;
  transform: translateY(-100%);
  object-fit: contain;
  position: absolute;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption .priceOption {
  font-size: 30px;
  color: #9DE6FD;
  text-shadow: -2px -2px 0 #050234, 2px -2px 0 #050234, -2px 2px 0 #050234, 2px 2px 0 #050234;
  z-index: 1;
  position: absolute;
  bottom: 17%;
  display: flex;
  align-items: center;
  height: 60px;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption:hover {
  transform: scale(1.1);
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption:hover .priceOption {
  color: #3AF4BC;
  text-shadow: -2px -2px 0 #240655, 2px -2px 0 #240655, -2px 2px 0 #240655, 2px 2px 0 #240655;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption:hover .buyBonusBg {
  display: none;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption:hover .buyBonusBgHover {
  display: unset;
}
#buyBonusBackdrop #buyBonusContainer #bonusOptions .bonusOption.hide {
  opacity: 0.5;
  pointer-events: none;
}

#restrictionNotifications {
  width: 100%;
  position: absolute;
  text-align: center;
  transition: all 0.4s ease-out;
  bottom: 0;
  font-family: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  min-height: 140px;
  opacity: 0;
}
#restrictionNotifications.active {
  bottom: 145px;
  z-index: 20;
  opacity: 1;
}
#restrictionNotifications .notifications-container {
  display: flex;
  width: max-content;
  height: max-content;
  flex-direction: column-reverse;
  justify-content: stretch;
  align-items: center;
}
#restrictionNotifications .notifications-container .notification-box {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 0;
  width: auto;
  height: auto;
  margin: 10px auto;
  background-color: #141414;
}
#restrictionNotifications .notifications-container .notification-box.DisplayNone {
  display: none !important;
}
#restrictionNotifications .notifications-container .notification-box .body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
}
#restrictionNotifications .notifications-container .notification-box .body span {
  font-size: 14px;
  font-weight: 400;
  line-height: unset;
  padding: 10px;
  font-family: "GameFont1";
  font-style: normal;
  color: white;
}

.autoPlayBackdrop {
  width: 100vw;
  height: 100vh;
  display: none;
}
.autoPlayBackdrop.active {
  display: block;
}
@media (min-width: 2000px) {
  .autoPlayBackdrop {
    height: 1080px;
    width: 1920px;
  }
}

.start-autoplay-dialogue {
  height: 361px;
  width: 302px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5019607843);
  left: 50%;
  bottom: 180px;
  transform: translate(-50%, 0);
  z-index: 15;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  box-shadow: 0 0 50px 10px black;
  align-items: end;
  border-radius: 12px;
  z-index: 10;
}
.start-autoplay-dialogue img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}
.start-autoplay-dialogue .autoPlayBet {
  position: absolute;
  height: 36px;
  width: 230px;
  display: flex;
  align-items: center;
  top: 105px;
}
.start-autoplay-dialogue .autoPlayBet #autoPlayBetContainer {
  width: 158px;
  max-width: 158px;
  height: 36px;
  border: 2px solid black;
  background: #FDE230;
  display: flex;
  align-items: center;
  justify-content: center;
}
.start-autoplay-dialogue .autoPlayBet #autoPlayBetContainer #autoPlayBetText {
  font-size: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: numberFont;
}
.start-autoplay-dialogue .autoPlayBet .autoPlayArrow {
  height: 100%;
  min-width: 36px;
  cursor: pointer;
  position: relative;
}
.start-autoplay-dialogue .autoPlayBet .autoPlayArrow img {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.start-autoplay-dialogue .autoPlayBet .autoPlayArrow .up, .start-autoplay-dialogue .autoPlayBet .autoPlayArrow .down, .start-autoplay-dialogue .autoPlayBet .autoPlayArrow .upActive, .start-autoplay-dialogue .autoPlayBet .autoPlayArrow .downActive {
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.start-autoplay-dialogue .autoPlayBet .autoPlayArrow .upActive, .start-autoplay-dialogue .autoPlayBet .autoPlayArrow .downActive {
  display: none;
}
.start-autoplay-dialogue .autoPlayBet .autoPlayArrow:hover .upActive, .start-autoplay-dialogue .autoPlayBet .autoPlayArrow:hover .downActive {
  display: inline-block;
}
.start-autoplay-dialogue .autoPlayBet .autoPlayArrow:hover .up, .start-autoplay-dialogue .autoPlayBet .autoPlayArrow:hover .down {
  display: none;
}

.start-bundle-title {
  position: absolute;
  top: 13px;
  text-align: center;
  width: 100%;
  color: #F0DBBC;
  font-family: "RetroComputer";
  text-transform: uppercase;
  font-size: 16px;
}

.start-bundle-description {
  position: absolute;
  top: 54px;
  font-size: 10px;
  width: 100%;
  color: #F0DBBC;
  font-family: "RetroComputer";
  text-align: center;
  text-transform: none;
}

.start-autoplay-bundles {
  height: 170px;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: absolute;
  bottom: 30px;
}

.bundle-group {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  font-size: 16px;
}

.bundle-cont {
  height: 60px;
  width: 60px;
  color: #F0DBBC;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  display: flex;
  font-family: "RetroComputer";
  border-radius: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: #F0DBBC;
  transition: all 200ms ease-in-out;
}

.bundle-cont:hover {
  background: rgba(1, 175, 254, 0.2509803922);
}

.bundle-container-close {
  font-family: "Victor";
  font-size: 30px;
  color: #F0DBBC;
  height: 40px;
  width: 35px;
  position: absolute;
  top: 5px;
  right: 0;
  cursor: pointer;
  text-align: start;
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.bottomPanel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  width: 100vw;
  height: max-content;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 0 28px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  user-drag: none;
  -webkit-user-drag: none;
  z-index: 0;
}
@media only screen and (min-width: 768px) {
  .bottomPanel {
    padding: 0 calc((100vw - 600px) / 2);
  }
}
.bottomPanel #backgroundGradient {
  position: absolute;
  height: 400px;
  bottom: 0px;
  width: 200vw;
  left: 50%;
  transform: translate(-50%, 50%);
  background: radial-gradient(at 50% bottom, rgb(0, 11, 23) 60%, rgba(0, 11, 23, 0.96) 52%, rgba(0, 11, 23, 0.6) 64%, transparent 70%, transparent);
  z-index: 0;
}
.bottomPanel .winCounter {
  width: fit-content;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}
.bottomPanel .winCounter.active {
  display: inline-block;
}
.bottomPanel .winCounter div {
  position: relative;
  color: #F9E101;
  font-family: retroComputer;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 170px;
}
.bottomPanel .winCounter div img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .bottomPanel .winCounter div {
    width: 100%;
  }
}
.bottomPanel .winCounter div p {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}
.bottomPanel .winCounter p, .bottomPanel .winCounter span {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .bottomPanel .winCounter p, .bottomPanel .winCounter span {
    font-size: 15px;
  }
}
.bottomPanel .winCounter span {
  text-shadow: 2px 2px #2DB2E8;
  /* -webkit-text-stroke: 0.3px black;*/
  font-size: 20px;
}
.bottomPanel__information {
  z-index: 1;
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information {
    width: 100%;
    height: 42px;
  }
}
.bottomPanel__information__content {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 25% 2fr 25%;
  width: 100%;
}
.bottomPanel__information__content .totalBet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
}
.bottomPanel__information__content .totalBet__title {
  font-family: "RetroComputer";
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
  font-family: "RetroComputer";
  color: white;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .totalBet__title {
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
  }
}
.bottomPanel__information__content .totalBet__amount {
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  font-family: "RetroComputer";
  color: #FFF;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .totalBet__amount {
    font-size: 16px;
  }
}
.bottomPanel__information__content .spins-wins {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  /*  visibility: hidden;*/
}
.bottomPanel__information__content .spins-wins #spinAmount {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  font-family: "RetroComputer";
  color: #FFF;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .spins-wins #spinAmount {
    font-size: 14px;
  }
}
.bottomPanel__information__content .spins-wins #bonusSpinAmount {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  font-family: "RetroComputer";
  color: #FFF;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .spins-wins #bonusSpinAmount {
    font-size: 14px;
  }
}
.bottomPanel__information__content .spins-wins #winAmount {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  font-family: "RetroComputer";
  color: #F9E101;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .spins-wins #winAmount {
    font-size: 14px;
  }
}
.bottomPanel__information__content .spins-wins #winAmount, .bottomPanel__information__content .spins-wins #spinAmount, .bottomPanel__information__content .spins-wins #bonusSpinAmount {
  display: none;
}
.bottomPanel__information__content .spins-wins.showSpins #spinAmount {
  display: inline-block;
}
.bottomPanel__information__content .spins-wins.showWin #winAmount {
  display: inline-block;
}
.bottomPanel__information__content .spins-wins.showBonusSpins #bonusSpinAmount {
  display: inline-block;
}
.bottomPanel__information__content .playerBalance {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
}
.bottomPanel__information__content .playerBalance__title {
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
  font-family: "RetroComputer";
  color: white;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .playerBalance__title {
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
  }
}
.bottomPanel__information__content .playerBalance__amount {
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  font-family: "RetroComputer";
  color: #FFF;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information__content .playerBalance__amount {
    font-size: 16px;
  }
}
.bottomPanel__information .blue_border {
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__information .blue_border {
    width: 100%;
    height: 2px;
    transform: unset;
  }
}
.bottomPanel__information .blue_border img {
  width: 100%;
  height: 100%;
}
.bottomPanel__content {
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 175px;
  padding: 10px 0;
}
@media only screen and (min-width: 768px) {
  .bottomPanel__content {
    height: 182px;
  }
}
.bottomPanel__content .leftSide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0;
  width: max-content;
  height: 100%;
}
.bottomPanel__content .leftSide .autoPlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0 17.65px 0 0;
  cursor: pointer;
}
.bottomPanel__content .leftSide .autoPlay .enabled {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay .disabled {
  display: block;
}
.bottomPanel__content .leftSide .autoPlay .enabled-pushed {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay .disabled-pushed {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay img {
  width: 63.28px;
  height: 60px;
  margin-bottom: 2px;
}
.bottomPanel__content .leftSide .autoPlay span {
  font-family: "RetroComputer";
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
  color: #6D6D6D;
}
.bottomPanel__content .leftSide .autoPlay.active .enabled {
  display: block;
}
.bottomPanel__content .leftSide .autoPlay.active .disabled {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.active .enabled-pushed {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.active .disabled-pushed {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.active-pushed .enabled {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.active-pushed .disabled {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.active-pushed .enabled-pushed {
  display: block;
}
.bottomPanel__content .leftSide .autoPlay.active-pushed .disabled-pushed {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.disabled-pushed .enabled {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.disabled-pushed .disabled {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.disabled-pushed .enabled-pushed {
  display: none;
}
.bottomPanel__content .leftSide .autoPlay.disabled-pushed .disabled-pushed {
  display: block;
}
.bottomPanel__content .leftSide .burgerMenu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
.bottomPanel__content .leftSide .burgerMenu .disabled {
  display: block;
}
.bottomPanel__content .leftSide .burgerMenu .enabled {
  display: none;
}
.bottomPanel__content .leftSide .burgerMenu.enabled .disabled {
  display: none;
}
.bottomPanel__content .leftSide .burgerMenu.enabled .enabled {
  display: block;
}
.bottomPanel__content .leftSide .burgerMenu img {
  width: 40px;
  height: 40px;
}
.bottomPanel__content .rightSide {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  width: max-content;
  height: 100%;
}
.bottomPanel__content .rightSide .fastPlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0 0 0 17.65px;
  cursor: pointer;
}
.bottomPanel__content .rightSide .fastPlay .level1 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay .level1-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay .level2 {
  display: block;
}
.bottomPanel__content .rightSide .fastPlay .level2-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay .level3 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay .level3-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay img {
  width: 65px;
  height: 65px;
}
.bottomPanel__content .rightSide .fastPlay span {
  font-family: "RetroComputer";
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
  color: #6D6D6D;
}
.bottomPanel__content .rightSide .fastPlay.level1 .level1 {
  display: block;
}
.bottomPanel__content .rightSide .fastPlay.level1 .level1-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1 .level2 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1 .level2-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1 .level3 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1 .level3-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1-pressed .level1 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1-pressed .level1-pressed {
  display: block;
}
.bottomPanel__content .rightSide .fastPlay.level1-pressed .level2 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1-pressed .level2-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1-pressed .level3 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level1-pressed .level3-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2 .level1 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2 .level1-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2 .level2 {
  display: block;
}
.bottomPanel__content .rightSide .fastPlay.level2 .level2-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2 .level3 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2 .level3-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2-pressed .level1 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2-pressed .level1-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2-pressed .level2 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2-pressed .level2-pressed {
  display: block;
}
.bottomPanel__content .rightSide .fastPlay.level2-pressed .level3 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level2-pressed .level3-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3 .level1 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3 .level1-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3 .level2 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3 .level2-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3 .level3 {
  display: block;
}
.bottomPanel__content .rightSide .fastPlay.level3 .level3-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3-pressed .level1 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3-pressed .level1-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3-pressed .level2 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3-pressed .level2-pressed {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3-pressed .level3 {
  display: none;
}
.bottomPanel__content .rightSide .fastPlay.level3-pressed .level3-pressed {
  display: block;
}
.bottomPanel__content .rightSide .sound {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
.bottomPanel__content .rightSide .sound .enabled {
  display: block;
}
.bottomPanel__content .rightSide .sound .disabled {
  display: none;
}
.bottomPanel__content .rightSide .sound img {
  width: 40px;
  height: 40px;
}
.bottomPanel__content .rightSide .sound.muted .enabled {
  display: none;
}
.bottomPanel__content .rightSide .sound.muted .disabled {
  display: block;
}
.bottomPanel__content .goButton {
  width: 152px;
  height: 140px;
  min-width: 152px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.bottomPanel__content .goButton #goDefault {
  opacity: 1;
}
.bottomPanel__content .goButton #gopressed, .bottomPanel__content .goButton #plusPressed, .bottomPanel__content .goButton #minusPressed {
  opacity: 0;
}
.bottomPanel__content .goButton #goDefault, .bottomPanel__content .goButton #gopressed, .bottomPanel__content .goButton #plusPressed, .bottomPanel__content .goButton #minusPressed {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
}
.bottomPanel__content .goButton.GoButtonactive #gopressed {
  opacity: 1;
}
.bottomPanel__content .goButton.GoButtonactive #goDefault, .bottomPanel__content .goButton.GoButtonactive #plusPressed, .bottomPanel__content .goButton.GoButtonactive #minusPressed {
  opacity: 0;
}
.bottomPanel__content .goButton.PlusButtonactive #plusPressed {
  opacity: 1;
}
.bottomPanel__content .goButton.PlusButtonactive #goDefault, .bottomPanel__content .goButton.PlusButtonactive #gopressed, .bottomPanel__content .goButton.PlusButtonactive #minusPressed {
  opacity: 0;
}
.bottomPanel__content .goButton.MinusButtonactive #minusPressed {
  opacity: 1;
}
.bottomPanel__content .goButton.MinusButtonactive #goDefault, .bottomPanel__content .goButton.MinusButtonactive #gopressed, .bottomPanel__content .goButton.MinusButtonactive #plusPressed {
  opacity: 0;
}
.bottomPanel__content .goButton__minus {
  position: absolute;
  top: 48%;
  right: auto;
  bottom: auto;
  left: 23%;
  width: 70px;
  height: 135px;
  transform: translate(-50%, -50%);
  border-radius: 200px 0 0px 200px;
  cursor: pointer;
}
.bottomPanel__content .goButton__plus {
  position: absolute;
  top: 48%;
  right: 23%;
  bottom: auto;
  left: auto;
  width: 70px;
  height: 135px;
  transform: translate(50%, -50%);
  border-radius: 0 200px 200px 0;
  cursor: pointer;
}
.bottomPanel__content .goButton__play {
  position: absolute;
  top: 35%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
}

@keyframes hideButtonRight {
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(40px);
    scale: 0.5;
  }
  to {
    opacity: 0;
    scale: 0;
    transform: translateY(100vw);
  }
}
@keyframes hideButtonLeft {
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(40px);
    scale: 0.5;
  }
  to {
    opacity: 0;
    scale: 0;
    transform: translateY(100vw);
  }
}
#popUp {
  position: fixed;
  width: 300px;
  height: 78px;
  transition: 400ms;
  transition-timing-function: ease-in-out;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}
#popUp.active {
  transform: translate(-50%, 20%);
}
#popUp img {
  height: 100%;
  width: 100%;
  position: relative;
}
#popUp p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
  font-size: 12px;
  color: #D6DBFF;
  font-family: "Pixeled";
  white-space: nowrap;
  padding-bottom: 2%;
}

@keyframes borderLineAnimation {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}
.UIcloneImage, .UIcloneImageChild {
  position: absolute;
  cursor: pointer;
}

#goButtonClone img {
  opacity: 0;
}
#goButtonClone.go-default img.go-default {
  opacity: 1;
}
#goButtonClone.go-pressed img.go-pressed {
  opacity: 1;
}
#goButtonClone.minus-pressed img.minus-pressed {
  opacity: 1;
}
#goButtonClone.plus-pressed img.plus-pressed {
  opacity: 1;
}

#autoButtonClone img {
  opacity: 0;
}
#autoButtonClone.autoplay-disabled-blue img.autoplay-disabled-blue {
  opacity: 1;
}
#autoButtonClone.autoplay-disabled-pushed-blue img.autoplay-disabled-pushed-blue {
  opacity: 1;
}
#autoButtonClone.autoplay-enabled img.autoplay-enabled {
  opacity: 1;
}
#autoButtonClone.autoplay-enabled-pushed img.autoplay-enabled-pushed {
  opacity: 1;
}

#speedButtonClone img {
  opacity: 0;
}
#speedButtonClone.speed-level-1 img.speed-level-1 {
  opacity: 1;
}
#speedButtonClone.speed-level-1-pressed img.speed-level-1-pressed {
  opacity: 1;
}
#speedButtonClone.speed-level-2 img.speed-level-2 {
  opacity: 1;
}
#speedButtonClone.speed-level-2-pressed img.speed-level-2-pressed {
  opacity: 1;
}
#speedButtonClone.speed-level-3 img.speed-level-3 {
  opacity: 1;
}
#speedButtonClone.speed-level-3-pressed img.speed-level-3-pressed {
  opacity: 1;
}

#menuBackdrop {
  display: none;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
@media (max-height: 700px) and (max-width: 1000px) and (orientation: portrait) {
  #menuBackdrop {
    align-items: start;
  }
}
#menuBackdrop.active {
  display: flex;
}
@media (max-width: 320px) {
  #menuBackdrop {
    width: 100%;
  }
}

#menuBody {
  width: 800px;
  height: 660px;
  font-family: retroComputer;
  overflow: hidden;
}
#menuBody .loading {
  display: none;
}
@media (max-height: 700px) {
  #menuBody {
    align-items: start;
  }
}
#menuBody .webImage, #menuBody .mobileImage {
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
}
#menuBody .mobileImage {
  display: none;
}
#menuBody #menuHeader {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 65px;
  font-size: 13px;
  position: relative;
}
#menuBody #menuHeader #closeMenu {
  font-family: "Victor";
  font-size: 30px;
  color: #F0DBBC;
  height: 40px;
  width: 35px;
  position: absolute;
  top: 12px;
  right: 0;
  cursor: pointer;
  text-align: start;
}
#menuBody #menuHeader p {
  color: #FFFFFF;
  opacity: 0.5;
  transition: 200ms;
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
}
#menuBody #menuHeader p:hover {
  opacity: 1;
}
#menuBody #menuHeader p.active {
  opacity: 1;
  color: #F46906;
}
#menuBody #menuContainer {
  width: 100%;
  height: calc(100% - 60px);
}
#menuBody #menuContainer .menuSwitch {
  background: transparent;
  border: 1px solid #68748E;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}
#menuBody #menuContainer .menuSwitch::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 8px;
  height: 8px;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  transition: 200ms;
}
#menuBody #menuContainer .menuSwitch.active {
  background: #F46906;
  border: 2px solid #F46906;
}
#menuBody #menuContainer .menuSwitch.active::before {
  left: 16px;
  right: 0px;
  height: 17px;
  width: 17px;
}
#menuBody #menuContainer #volumeRange {
  appearance: none;
  -webkit-appearance: none;
  width: 226px;
  height: 20px;
  background-color: transparent;
  border-radius: 9px;
  border: 2px solid #68748E;
  cursor: pointer;
  overflow: hidden;
  margin-left: 70px;
}
#menuBody #menuContainer #volumeRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: -205px 0 0 200px #F46906;
}
#menuBody #menuContainer #settings {
  justify-content: center;
  padding: 50px 197px 150px 197px;
}
#menuBody #menuContainer #settings #volumeIndicator {
  font-family: gameFont1;
  width: 23px;
  text-align: center;
}
#menuBody #menuContainer #settings > div {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  border-bottom: dashed #F0DBBC;
}
#menuBody #menuContainer #settings > div:last-child {
  border: 0;
}
#menuBody #menuContainer #information {
  font-family: gameFont1;
  align-items: start;
  padding: 30px 106px 30px 106px;
  gap: 70px;
  overflow-y: scroll;
  height: 95%;
}
#menuBody #menuContainer #information::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
#menuBody #menuContainer #information > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#menuBody #menuContainer #information > div .title {
  color: #F46906;
  font-family: retroComputer;
  font-size: 13px;
}
#menuBody #menuContainer #information > div .description {
  color: #ABABAB;
  font-size: 15px;
}
#menuBody #menuContainer #information #introduction p:nth-child(3) {
  opacity: 1;
  color: white;
  font-weight: bold;
}
#menuBody #menuContainer #information #plinkoMultipliers {
  display: flex;
  gap: 9px;
  justify-items: center;
  min-height: 45px;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
}
#menuBody #menuContainer #information #plinkoMultipliers img {
  height: 45px;
}
#menuBody #menuContainer #information #plinkoMultipliers > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
#menuBody #menuContainer #information #plinkoMultipliers > div p {
  font-size: 14px;
}
#menuBody #menuContainer #information #gameMechanics {
  /*.mixedWeight {
      opacity: 1;

      span {
          opacity: 0.6;
      }

      .boldText {
          opacity: 1;
          font-weight: bold;
      }
  }*/
}
#menuBody #menuContainer #information #gameMechanics #piContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 13px;
}
#menuBody #menuContainer #information #gameMechanics #piContainer img {
  width: 70px;
  height: 70px;
}
#menuBody #menuContainer #information #gameMechanics #piContainer p {
  font-weight: bold;
  font-size: 14px;
}
#menuBody #menuContainer #information #gameMechanics #plinkoPinsContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#menuBody #menuContainer #information #gameMechanics #plinkoPinsContainer img {
  width: 70%;
}
#menuBody #menuContainer #information #gameMechanics p img {
  height: 20px;
  width: 20px;
  transform: translateY(4px);
  margin: 0 5px;
}
#menuBody #menuContainer #information #autoplayMode p span {
  height: 0px;
  width: 25px;
  margin: 0 5px;
  position: relative;
  display: inline-block;
}
#menuBody #menuContainer #information #autoplayMode p span img {
  height: 25px;
  width: 25px;
  position: absolute;
  bottom: -9px;
  left: 0;
}
#menuBody #menuContainer #information #bonusStage {
  width: 100%;
}
#menuBody #menuContainer #information #bonusStage #slotImageContainer {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
#menuBody #menuContainer #information #bonusStage #slotImageContainer .lowNumbers, #menuBody #menuContainer #information #bonusStage #slotImageContainer .highNumbers {
  flex-direction: row;
  display: flex;
  gap: 5px;
  justify-content: center;
}
#menuBody #menuContainer #information #bonusStage #slotImageContainer .lowNumbers > div, #menuBody #menuContainer #information #bonusStage #slotImageContainer .highNumbers > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
#menuBody #menuContainer #information #bonusStage #slotImageContainer .lowNumbers > div img, #menuBody #menuContainer #information #bonusStage #slotImageContainer .highNumbers > div img {
  width: 50px;
  aspect-ratio: 1/1;
}
#menuBody #menuContainer #information #bonusStage #slotImageContainer .lowNumbers > div p, #menuBody #menuContainer #information #bonusStage #slotImageContainer .highNumbers > div p {
  font-size: 14px;
}
#menuBody #menuContainer #information #bonusStage .menuBonusProgress {
  width: 100%;
}
#menuBody #menuContainer #information #doubleChanceFeature {
  width: 100%;
}
#menuBody #menuContainer #information #additionalInformation p:nth-child(3), #menuBody #menuContainer #information #additionalInformation p:nth-child(4), #menuBody #menuContainer #information #additionalInformation p:nth-child(5) {
  opacity: 1;
  color: white;
  font-weight: bold;
}
#menuBody #menuContainer #information #gameMenu {
  width: 100%;
}
#menuBody #menuContainer #information #gameMenu #UIInformation {
  display: flex;
  flex-direction: column;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  height: 111px;
  border-bottom: dashed 1px #F0DBBC;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div:last-child {
  border: 0;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div p {
  width: 45%;
  color: #949cae;
  font-size: 12px;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div p span {
  font-weight: bold;
  color: white;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: 15px;
  width: 100%;
  height: 125px;
  gap: 8px;
  justify-content: start;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div:first-child p {
  width: 100%;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div .uiImageContainer {
  width: 55%;
  display: flex;
  gap: 10px;
}
#menuBody #menuContainer #information #gameMenu #UIInformation > div .uiImageContainer img {
  width: 70px;
  height: 70px;
}
#menuBody #menuContainer .history {
  width: 100%;
  height: 100%;
  padding: 25px 18px 8px 48px;
  flex-direction: column;
  align-items: center;
  display: none;
}
#menuBody #menuContainer .history .active {
  display: flex;
}
#menuBody #menuContainer .history__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#menuBody #menuContainer .history__content__switch {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  min-height: 20px;
  font-family: gameFont1;
  font-size: 12px;
}
#menuBody #menuContainer .history__content__switch #showAllSwitch {
  background: transparent;
  border: 1px solid #68748E;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
}
#menuBody #menuContainer .history__content__switch #showAllSwitch::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 8px;
  height: 8px;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  transition: 200ms;
}
#menuBody #menuContainer .history__content__switch #showAllSwitch.active {
  background: #F46906;
  border: 1px solid #F46906;
}
#menuBody #menuContainer .history__content__switch #showAllSwitch.active::before {
  left: 16px;
  right: 0px;
  height: 17px;
  width: 17px;
}
#menuBody #menuContainer .history__content__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  width: 100%;
  height: max-content;
  padding-right: 18px;
  min-height: 48px;
}
#menuBody #menuContainer .history__content__header > div {
  flex-grow: 1;
  display: flex;
  justify-content: start;
  align-items: center;
}
#menuBody #menuContainer .history__content__header > div:nth-child(1) {
  width: 9%;
}
#menuBody #menuContainer .history__content__header > div:nth-child(2) {
  width: 13%;
}
#menuBody #menuContainer .history__content__header > div:nth-child(3) {
  width: 17%;
}
#menuBody #menuContainer .history__content__header > div:nth-child(4) {
  width: 15%;
}
#menuBody #menuContainer .history__content__header > div:nth-child(5) {
  width: 13%;
}
#menuBody #menuContainer .history__content__header > div:nth-child(6) {
  min-width: 24%;
}
#menuBody #menuContainer .history__content__body {
  width: 100%;
  overflow-y: scroll;
  padding-right: 14px;
}
#menuBody #menuContainer .history__content__body::-webkit-scrollbar {
  width: 4px;
}
#menuBody #menuContainer .history__content__body::-webkit-scrollbar-thumb {
  background: rgba(136, 162, 255, 0.2);
}
#menuBody #menuContainer .history__content__body::-webkit-scrollbar-thumb:hover {
  background: rgba(136, 162, 255, 0.5);
}
#menuBody #menuContainer .history__content__body__item {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  font-size: 1.2em;
  font-family: "GameFont1";
  min-height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
#menuBody #menuContainer .history__content__body__item.active .dropDownArrow {
  transform: rotate(-180deg);
}
#menuBody #menuContainer .history__content__body__item__info {
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: space-between;
  align-items: start;
}
#menuBody #menuContainer .history__content__body__item__info > p {
  height: 100%;
  display: flex;
  width: 100%;
  align-items: center;
  text-align: start;
}
#menuBody #menuContainer .history__content__body__item__info > p:nth-child(1) {
  width: 9%;
  opacity: 0.4;
}
#menuBody #menuContainer .history__content__body__item__info > p:nth-child(2) {
  width: 13%;
  opacity: 0.7;
}
#menuBody #menuContainer .history__content__body__item__info > p:nth-child(3) {
  width: 17%;
}
#menuBody #menuContainer .history__content__body__item__info > p:nth-child(4) {
  width: 15%;
}
#menuBody #menuContainer .history__content__body__item__info > p:nth-child(5) {
  width: 13%;
}
#menuBody #menuContainer .history__content__body__item__info__panel {
  min-width: fit-content;
  width: 24%;
  display: flex;
  padding-right: 8px;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  position: relative;
}
#menuBody #menuContainer .history__content__body__item__info__panel p {
  color: #01AFFE;
}
#menuBody #menuContainer .history__content__body__item__info__panel span.FreeSpinIcon {
  display: none;
}
#menuBody #menuContainer .history__content__body__item__info__panel.isFreeSpin {
  justify-content: space-between;
  padding-right: 3px;
}
#menuBody #menuContainer .history__content__body__item__info__panel.isFreeSpin span.FreeSpinIcon {
  display: block;
  color: #FECD07;
  font-size: 10px;
  padding: 1px 2px;
  background: #4E5C7A;
}
#menuBody #menuContainer .history__content__body__item__info__panel .dropDownArrow {
  position: absolute;
  right: 5px;
  transition: 200ms;
  visibility: hidden;
}
#menuBody #menuContainer .history__content__body__item__info__panel .dropDownArrow.active {
  visibility: unset;
}
#menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon {
  gap: 10px;
  display: none;
  align-items: center;
  margin-right: 16px;
}
#menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon > p {
  border: 1px solid #01AFFE;
  padding: 1px 2px 2px 2px;
  color: #01AFFE;
  font-size: 10px;
  font-family: retroComputer;
}
#menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon .wonGameText {
  position: relative;
}
#menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon .wonGameText.maxWin {
  color: transparent !important;
  border: 0 !important;
  background-image: url("../assets/images/menu/maxWin.svg");
  background-size: cover;
  height: 17px;
}
#menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon.active {
  display: flex;
}
#menuBody #menuContainer .history__content__body__item.isBonusHistory .history__content__body__item__info__panel p {
  color: #FECD07;
}
#menuBody #menuContainer .history__content__body__item.isBonusHistory .history__content__body__item__info__panel .wonGameIcon > p {
  border: 1px solid #FECD07;
  color: #FECD07;
}
#menuBody #menuContainer .history__content__body__item__data {
  flex-direction: column;
  display: none;
}
#menuBody #menuContainer .history__content__body__item__data .fills {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  gap: 3px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info {
  width: 100%;
  display: flex;
  height: fit-content;
  background: #322E57;
  padding: 15px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__header {
  min-width: 11%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__header__count {
  font-family: retroComputer;
  font-size: 11px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__header__FreeRollCount {
  font-family: retroComputer;
  font-size: 8px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__String {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 65%;
  gap: 5px;
  padding: 0 20px 0 0;
  font-family: "gameFont1";
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__String > div {
  display: flex;
  align-items: center;
  gap: 3px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__String img {
  height: 25px;
  width: 25px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__String .mergeArrow {
  width: 11px;
  height: 9px;
  margin-top: 0px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__level {
  font-family: GameFont;
  text-shadow: 2px 2px #F25837;
  color: #F9F500;
  min-width: 26%;
  justify-content: center;
  display: flex;
  padding-left: 17px;
  align-items: center;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__winContainer {
  display: flex;
  justify-content: space-between;
  min-width: 24%;
  padding-right: 13px;
  padding-left: 8px;
  font-family: gameFont1;
  align-items: center;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__winContainer > p {
  font-size: 10px;
  font-family: retroComputer;
}
#menuBody #menuContainer .history__content__body__item__data .fills__info__multiplication {
  display: flex;
  align-items: center;
  justify-content: center;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer {
  display: flex;
  align-items: center;
  min-width: 26%;
  /*min-height: 48px;*/
  flex-direction: column;
  gap: 3px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data {
  background: rgba(255, 164, 94, 0.1);
  display: flex;
  width: 100%;
  padding-right: 23px;
  padding-left: 15px;
  align-items: center;
  min-height: 48px;
  width: 100%;
  justify-content: center;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data.piSum {
  background: rgba(255, 164, 94, 0.1);
  color: #F8BA01;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data.piSum img {
  width: 22px;
  padding-bottom: 1px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data:first-child {
  justify-content: space-between;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data:first-child .fills__sumContainer__data__sumIcon {
  align-items: center;
  border: 1px solid #01AFFE;
  padding: 1px 4px 2px 4px;
  color: #01AFFE;
  font-size: 10px;
  font-family: retroComputer;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data:last-child {
  margin-bottom: 3px;
}
#menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data.firstRolls {
  justify-content: center;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info {
  background: rgba(255, 164, 94, 0.1);
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info__header {
  justify-content: start;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info__header__FreeRollCount {
  color: #F8BA01;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info__String {
  opacity: 0.8;
  align-items: flex-start;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info__String img {
  margin-top: -2px;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info__winContainer {
  align-items: start;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__sumContainer {
  align-items: start;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__sumContainer .bonusSum {
  gap: 5px;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__sumContainer__data p {
  color: #F8BA01;
}
#menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__sumContainer__data__sumIcon {
  border: 1px solid #F8BA01;
}
#menuBody #menuContainer .history__content__body__item.active .history__content__body__item__data {
  display: flex;
  height: max-content;
}
#menuBody #menuContainer .history__pegination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 12px;
}
#menuBody #menuContainer .history__pegination .content {
  padding-bottom: 1px;
}
#menuBody #menuContainer .history__pegination .leftButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}
#menuBody #menuContainer .history__pegination .leftButton svg {
  width: 10px;
  height: 10px;
  transform: rotate(90deg);
}
#menuBody #menuContainer .history__pegination .rightButton {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}
#menuBody #menuContainer .history__pegination .rightButton svg {
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
}
#menuBody #menuContainer > div {
  display: none;
}
#menuBody #menuContainer > div.active {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media (max-width: 1000px) {
  #menuBody {
    width: 320px;
    height: 423px;
  }
  #menuBody .mobileImage {
    display: block;
  }
  #menuBody .webImage {
    display: none;
  }
}
@media (max-width: 1000px) and (max-height: 700px) and (max-width: 1000px) and (orientation: portrait) {
  #menuBody {
    position: fixed;
    max-width: 400px;
    top: 10px;
    width: calc(100vw - 10px);
    max-height: 423px !important;
  }
}
@media (max-width: 1000px) {
  #menuBody #menuHeader {
    justify-content: space-between;
    transform: translateX(-15px);
    padding: 0px 7%;
    gap: 10px;
    height: 27px;
    width: 100%;
  }
}
@media (max-width: 1000px) and (orientation: landscape) {
  #menuBody #menuHeader {
    justify-content: center;
    gap: 65px;
    height: 40px;
  }
}
@media (max-width: 1000px) {
  #menuBody #menuHeader p {
    font-size: 10px;
    white-space: nowrap;
  }
  #menuBody #menuHeader p:first-child {
    margin-left: 30px;
  }
}
@media (max-width: 1000px) and (max-height: 700px) {
  #menuBody #menuHeader p {
    font-size: 8px;
  }
}
@media (max-width: 1000px) {
  #menuBody #menuHeader #closeMenu {
    right: -20px;
    top: 0px;
    font-size: 25px;
  }
}
@media (max-width: 1000px) and (orientation: landscape) {
  #menuBody #menuHeader #closeMenu {
    top: 8px;
    transform: scale(0.8);
  }
}
@media (max-width: 1000px) {
  #menuBody #menuContainer {
    height: calc(100% - 20px);
  }
}
@media (max-width: 1000px) and (max-height: 700px) {
  #menuBody #menuContainer {
    height: calc(100% - 20px);
  }
}
@media (max-width: 1000px) {
  #menuBody #menuContainer #settings {
    justify-content: start;
    padding: 5px 30px 5px 30px;
    padding: 25px;
    justify-content: center;
  }
  #menuBody #menuContainer #settings #volume input {
    margin-left: 20px;
    margin-right: 10px;
  }
}
@media (max-width: 1000px) {
  #menuBody #menuContainer #information {
    padding: 15px 30px 0 30px;
    gap: 40px;
  }
  #menuBody #menuContainer #information #plinkoMultipliers {
    display: flex;
    gap: 9px;
    justify-items: center;
    min-height: 35px;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }
  #menuBody #menuContainer #information #plinkoMultipliers img {
    height: 35px;
  }
  #menuBody #menuContainer #information #plinkoMultipliers > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  #menuBody #menuContainer #information > div .title {
    font-size: 10px;
  }
  #menuBody #menuContainer #information > div .description {
    font-size: 12px;
  }
  #menuBody #menuContainer #information > div > p:last-child {
    font-size: 12px;
  }
  #menuBody #menuContainer #information #bonusStage #slotImageContainer .lowNumbers, #menuBody #menuContainer #information #bonusStage #slotImageContainer .highNumbers {
    flex-wrap: wrap;
  }
  #menuBody #menuContainer #information #bonusStage #slotImageContainer .lowNumbers > div img, #menuBody #menuContainer #information #bonusStage #slotImageContainer .highNumbers > div img {
    width: 35px;
  }
  #menuBody #menuContainer #information #gameMenu {
    gap: 0;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div {
    min-height: 90px;
    gap: 15px;
    width: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: center !important;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div:first-child {
    gap: 2px;
    margin-top: 5px;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div:first-child .uiMenuImageContainer .img {
    width: 10vw;
    height: 10vw;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div:first-child p {
    font-size: 12px;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div img {
    width: 10vw;
    height: 10vw;
    max-width: 40px;
    max-height: 40px;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div > img {
    transform: translateY(4px);
    width: 12vw;
    height: 10vw;
    max-height: 35px;
    max-width: 40px;
  }
  #menuBody #menuContainer #information #gameMenu #UIInformation > div p {
    width: 100%;
  }
}
@media (max-width: 1000px) {
  #menuBody #menuContainer .history {
    padding: 12px 5px 4px 12px;
  }
  #menuBody #menuContainer .history__content__switch {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0px;
    min-height: 20px;
    font-family: gameFont1;
    font-size: 6px;
  }
  #menuBody #menuContainer .history__content__switch #showAllSwitch {
    transform: scale(0.5);
  }
  #menuBody #menuContainer .history__content__header {
    font-size: 4.7px;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(1) {
    width: 9%;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(2) {
    width: 10%;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(2) h4 {
    max-width: 25px;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(3) {
    width: 16%;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(4) {
    width: 12%;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(5) {
    width: 9%;
  }
  #menuBody #menuContainer .history__content__header div:nth-child(6) {
    width: 20%;
  }
  #menuBody #menuContainer .history__content__body {
    padding-right: 4px;
  }
  #menuBody #menuContainer .history__content__body__item {
    font-size: 0.7em;
  }
  #menuBody #menuContainer .history__content__body__item__info > p {
    /*                                    &:nth-child(2){
        max-width: 3%;
        white-space: break-spaces;
    }*/
  }
  #menuBody #menuContainer .history__content__body__item__info > p:nth-child(2) {
    min-width: unset;
  }
  #menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon {
    font-size: 0.6em;
    margin-right: 4px;
    gap: 3px;
  }
  #menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon .wonGameText {
    font-size: 4px;
    padding: 1px 2px 1px 2px;
  }
  #menuBody #menuContainer .history__content__body__item__info__panel .wonGameIcon .wonGameText.maxWin {
    color: transparent !important;
    border: 0 !important;
    background-image: url("../assets/images/menu/maxWin-min.png");
    background-size: cover;
    height: 13px;
    width: 19px;
  }
  #menuBody #menuContainer .history__content__body__item__info__panel .dropDownArrow {
    transform: scale(0.7);
  }
  #menuBody #menuContainer .history__content__body__item__info__panel.isFreeSpin {
    justify-content: center;
    flex-direction: column;
    align-items: start;
    gap: 3px;
  }
  #menuBody #menuContainer .history__content__body__item__info__panel.isFreeSpin span.FreeSpinIcon {
    color: #FECD07;
    font-size: 5px;
    padding: 1px 2px;
    background: #4E5C7A;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__header {
    min-width: 14%;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__header__count {
    font-size: 5px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__header__FreeRollCount {
    font-size: 4px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__String img {
    width: 13px;
    height: 13px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__winContainer {
    padding-right: 1px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__winContainer > p {
    font-size: 4px;
    padding-top: 1px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__info__level {
    text-shadow: 1px 1px #F25837;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__sumContainer {
    padding-right: 0px;
    padding-left: 0px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data {
    padding-right: 12px;
    padding-left: 6px;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data.piSum {
    padding: 0;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills__sumContainer__data .fills__sumContainer__data__sumIcon {
    font-size: 4px !important;
    padding: 1px 2px !important;
  }
  #menuBody #menuContainer .history__content__body__item__data .fills.bonusFill .fills__info .fills__info__String img {
    margin-top: -2px;
  }
  #menuBody #menuContainer .history__pegination {
    transform: scale(0.8);
    margin-bottom: 3px;
  }
}

#backDrop {
  font-family: "Pixeled";
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none;
}
#backDrop * {
  font-family: inherit;
}
@media (min-width: 2000px) {
  #backDrop {
    height: 1080px;
    width: 1920px;
  }
}
#backDrop.active {
  display: inline-flex;
}
#backDrop #modalContainer {
  opacity: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  padding: 40px 30px 50px 30px;
  height: 320px;
  width: 316px;
  animation-duration: 400ms;
  animation-name: fadein;
  animation-iteration-count: 1;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#backDrop #modalContainer .modalImage {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
#backDrop #modalContainer #mainTextContainer {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 63%;
}
#backDrop #modalContainer #mainTextContainer #mainText, #backDrop #modalContainer #mainTextContainer #extraText {
  text-align: center;
  color: #d6dbff;
  text-align: start;
  width: 100%;
}
#backDrop #modalContainer #mainTextContainer #mainText {
  font-size: 10px;
  line-height: 30px;
}
#backDrop #modalContainer #mainTextContainer #extraText {
  font-size: 15px;
  line-height: 25px;
}
#backDrop #modalContainer #buttonContainer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: fit-content;
}
#backDrop #modalContainer #buttonContainer #modalButton, #backDrop #modalContainer #buttonContainer #modalSecondButton {
  background: transparent;
  color: #d6dbff;
  width: 115px;
  height: 58px;
  border: 1px solid #D6DBFF;
  font-size: 10px;
  transition: 200ms;
}
#backDrop #modalContainer #buttonContainer #modalButton:hover, #backDrop #modalContainer #buttonContainer #modalSecondButton:hover {
  background: rgba(214, 219, 255, 0.2);
  cursor: pointer;
}
#backDrop #modalContainer #buttonContainer #modalSecondButton {
  display: none;
}
#backDrop #modalContainer.showBonusModal .modal1 {
  display: block;
}
#backDrop #modalContainer.finishedFreeBits, #backDrop #modalContainer.wonFreeBits, #backDrop #modalContainer.bonusStage, #backDrop #modalContainer.bonusGameStarted, #backDrop #modalContainer.somethingWentWrong, #backDrop #modalContainer.disconnected, #backDrop #modalContainer.openInAnotherWindow, #backDrop #modalContainer.unfinishedBonusGame, #backDrop #modalContainer.bonusGameFinished {
  padding: 0;
  justify-content: center;
  width: fit-content;
  height: 200px;
  position: relative;
}
#backDrop #modalContainer.finishedFreeBits #mainTextContainer #mainText, #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText, #backDrop #modalContainer.bonusStage #mainTextContainer #mainText, #backDrop #modalContainer.bonusGameStarted #mainTextContainer #mainText, #backDrop #modalContainer.somethingWentWrong #mainTextContainer #mainText, #backDrop #modalContainer.disconnected #mainTextContainer #mainText, #backDrop #modalContainer.openInAnotherWindow #mainTextContainer #mainText, #backDrop #modalContainer.unfinishedBonusGame #mainTextContainer #mainText, #backDrop #modalContainer.bonusGameFinished #mainTextContainer #mainText {
  color: #94F9FF;
  text-align: center;
}
#backDrop #modalContainer.finishedFreeBits #buttonContainer, #backDrop #modalContainer.wonFreeBits #buttonContainer, #backDrop #modalContainer.bonusStage #buttonContainer, #backDrop #modalContainer.bonusGameStarted #buttonContainer, #backDrop #modalContainer.somethingWentWrong #buttonContainer, #backDrop #modalContainer.disconnected #buttonContainer, #backDrop #modalContainer.openInAnotherWindow #buttonContainer, #backDrop #modalContainer.unfinishedBonusGame #buttonContainer, #backDrop #modalContainer.bonusGameFinished #buttonContainer {
  justify-content: center;
  position: absolute;
  top: 100%;
  height: 20vh;
}
#backDrop #modalContainer.finishedFreeBits #buttonContainer #modalButton, #backDrop #modalContainer.wonFreeBits #buttonContainer #modalButton, #backDrop #modalContainer.bonusStage #buttonContainer #modalButton, #backDrop #modalContainer.bonusGameStarted #buttonContainer #modalButton, #backDrop #modalContainer.somethingWentWrong #buttonContainer #modalButton, #backDrop #modalContainer.disconnected #buttonContainer #modalButton, #backDrop #modalContainer.openInAnotherWindow #buttonContainer #modalButton, #backDrop #modalContainer.unfinishedBonusGame #buttonContainer #modalButton, #backDrop #modalContainer.bonusGameFinished #buttonContainer #modalButton {
  border: 0;
  color: white;
  font-size: 12px;
  width: unset;
  white-space: nowrap;
  animation: lightChange 1000ms infinite;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.finishedFreeBits #buttonContainer #modalButton, #backDrop #modalContainer.wonFreeBits #buttonContainer #modalButton, #backDrop #modalContainer.bonusStage #buttonContainer #modalButton, #backDrop #modalContainer.bonusGameStarted #buttonContainer #modalButton, #backDrop #modalContainer.somethingWentWrong #buttonContainer #modalButton, #backDrop #modalContainer.disconnected #buttonContainer #modalButton, #backDrop #modalContainer.openInAnotherWindow #buttonContainer #modalButton, #backDrop #modalContainer.unfinishedBonusGame #buttonContainer #modalButton, #backDrop #modalContainer.bonusGameFinished #buttonContainer #modalButton {
    font-size: 2.5vw;
  }
}
#backDrop #modalContainer.finishedFreeBits #buttonContainer #modalButton:hover, #backDrop #modalContainer.wonFreeBits #buttonContainer #modalButton:hover, #backDrop #modalContainer.bonusStage #buttonContainer #modalButton:hover, #backDrop #modalContainer.bonusGameStarted #buttonContainer #modalButton:hover, #backDrop #modalContainer.somethingWentWrong #buttonContainer #modalButton:hover, #backDrop #modalContainer.disconnected #buttonContainer #modalButton:hover, #backDrop #modalContainer.openInAnotherWindow #buttonContainer #modalButton:hover, #backDrop #modalContainer.unfinishedBonusGame #buttonContainer #modalButton:hover, #backDrop #modalContainer.bonusGameFinished #buttonContainer #modalButton:hover {
  background: unset;
}
@keyframes lightChange {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
#backDrop #modalContainer.bonusStage {
  height: 330px;
}
#backDrop #modalContainer.bonusStage #mainTextContainer {
  width: fit-content;
  height: 100%;
}
#backDrop #modalContainer.bonusStage #mainTextContainer #mainText {
  font-size: 20px;
}
#backDrop #modalContainer.bonusStage #mainTextContainer #mainText {
  color: #94F9FF;
}
#backDrop #modalContainer.bonusStage #mainTextContainer #extraText {
  text-align: center;
  padding: 0;
  color: white;
  font-size: 14px;
  line-height: 40px;
}
#backDrop #modalContainer.bonusStage #mainTextContainer #extraText span {
  font-size: 25px;
}
#backDrop #modalContainer.bonusStage #mainTextContainer .additionalText {
  width: 100%;
  color: #94F9FF;
  font-size: 16px;
  text-align: center;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.bonusStage #mainTextContainer .additionalText {
    font-size: 12px;
  }
}
#backDrop #modalContainer.bonusGameStarted #mainTextContainer {
  padding: 0;
}
#backDrop #modalContainer.bonusGameStarted #mainTextContainer #mainText {
  font-size: 16px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.bonusGameStarted #mainTextContainer #mainText {
    font-size: 12px;
  }
}
#backDrop #modalContainer.bonusGameStarted #mainTextContainer #extraText {
  padding-top: 25px;
  line-height: unset;
  text-align: center;
  color: white;
  font-size: 20px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.bonusGameStarted #mainTextContainer #extraText {
    font-size: 13px;
  }
}
#backDrop #modalContainer.bonusGameFinished {
  height: fit-content;
}
#backDrop #modalContainer.bonusGameFinished #mainTextContainer {
  padding: 0;
}
#backDrop #modalContainer.bonusGameFinished #mainTextContainer #mainText {
  font-size: 22px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.bonusGameFinished #mainTextContainer #mainText {
    font-size: 4vw;
  }
}
#backDrop #modalContainer.bonusGameFinished #mainTextContainer #extraText {
  padding-top: 25px;
  line-height: unset;
  text-align: center;
  color: white;
  font-size: 14px;
}
#backDrop #modalContainer.bonusGameFinished #mainTextContainer #extraText span {
  font-size: 22px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.bonusGameFinished #mainTextContainer #extraText span {
    font-size: 5vw;
  }
}
@media (max-width: 500px) {
  #backDrop #modalContainer.bonusGameFinished #mainTextContainer #extraText {
    font-size: 3.6vw;
  }
}
#backDrop #modalContainer.openInAnotherWindow #mainTextContainer {
  justify-content: center;
}
#backDrop #modalContainer.openInAnotherWindow #mainTextContainer #mainText {
  font-size: 20px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.openInAnotherWindow #mainTextContainer #mainText {
    font-size: 16px;
  }
}
#backDrop #modalContainer.disconnected #mainTextContainer {
  justify-content: center;
}
#backDrop #modalContainer.disconnected #mainTextContainer #mainText {
  font-size: 20px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.disconnected #mainTextContainer #mainText {
    font-size: 16px;
  }
}
#backDrop #modalContainer.somethingWentWrong #mainTextContainer {
  justify-content: center;
}
#backDrop #modalContainer.somethingWentWrong #mainTextContainer #mainText {
  font-size: 20px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.somethingWentWrong #mainTextContainer #mainText {
    font-size: 16px;
  }
}
#backDrop #modalContainer.wonFreeBits {
  height: fit-content;
}
#backDrop #modalContainer.wonFreeBits #mainTextContainer {
  justify-content: center;
  gap: 55px;
  height: 100%;
}
#backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  gap: 30px;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 16px;
  }
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 22px;
  }
}
#backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText span {
  font-size: 25px;
  height: 40px;
  display: inline-block;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText span {
    font-size: 22px;
  }
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText span {
    font-size: 28px;
  }
}
@media (max-width: 500px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 16px;
  }
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 18px;
  }
}
#backDrop #modalContainer.wonFreeBits #mainTextContainer #extraText {
  font-size: 9px;
  text-align: center;
  color: #94F9FF;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.wonFreeBits #mainTextContainer #extraText {
    font-size: 8px;
  }
}
#backDrop #modalContainer.finishedFreeBits {
  height: fit-content;
}
#backDrop #modalContainer.finishedFreeBits #mainTextContainer {
  justify-content: center;
  gap: 55px;
  height: 100%;
}
#backDrop #modalContainer.finishedFreeBits #mainTextContainer #mainText {
  font-size: 18px;
  color: #94F9FF;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #mainText {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #mainText {
    font-size: 16px;
  }
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #mainText {
    font-size: 22px;
  }
}
#backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText {
  font-size: 22px;
  text-align: center;
  display: flex;
  gap: 30px;
  flex-direction: column;
  color: #94F9FF;
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText {
    gap: 40px;
  }
}
#backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText span {
  font-size: 25px;
  color: white;
  height: 40px;
  display: inline-block;
}
@media (max-width: 500px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText span {
    font-size: 22px;
  }
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText span {
    font-size: 36px;
  }
}
@media (max-width: 500px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText {
    font-size: 16px;
  }
}
@media (min-width: 2000px) {
  #backDrop #modalContainer.finishedFreeBits #mainTextContainer #extraText {
    font-size: 28px;
  }
}
#backDrop #modalContainer.unfinishedBonusGame #mainTextContainer {
  justify-content: center;
}
#backDrop #modalContainer.unfinishedBonusGame #mainTextContainer #mainText {
  font-size: 16px;
}
#backDrop #modalContainer.showBonusModal #mainTextContainer {
  justify-content: start;
  gap: 35px;
}
#backDrop #modalContainer.showBonusModal #mainTextContainer #mainText {
  text-align: center;
  font-size: 12px;
}
#backDrop #modalContainer.showBonusModal #mainTextContainer #extraText {
  text-align: center;
  font-size: 18px;
}
#backDrop #modalContainer.showBonusModal #buttonContainer #modalSecondButton {
  display: block;
}
#backDrop.ka {
  font-family: "retroComputer" !important;
}
#backDrop.ka #modalContainer #buttonContainer button {
  font-size: 12px !important;
}
#backDrop.ka #modalContainer.bonusStage #mainTextContainer #mainText {
  font-size: 22px;
}
#backDrop.ka #modalContainer.bonusStage #mainTextContainer #extraText {
  font-size: 16px;
}
#backDrop.ka #modalContainer.bonusStage #mainTextContainer #extraText span {
  font-size: 27px;
}
#backDrop.ka #modalContainer.bonusStage #mainTextContainer .additionalText {
  font-size: 18px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.bonusStage #mainTextContainer .additionalText {
    font-size: 14px;
  }
}
#backDrop.ka #modalContainer.showBonusModal #mainTextContainer {
  gap: 35px;
}
#backDrop.ka #modalContainer.showBonusModal #mainTextContainer #mainText {
  font-size: 16px;
}
#backDrop.ka #modalContainer.showBonusModal #mainTextContainer #extraText {
  font-size: 18px;
}
#backDrop.ka #modalContainer.unfinishedBonusGame #mainTextContainer #mainText {
  font-size: 20px;
}
#backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #mainText {
  font-size: 20px;
  color: #94F9FF;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #mainText {
    font-size: 18px;
  }
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #mainText {
    font-size: 18px;
  }
}
@media (min-width: 2000px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #mainText {
    font-size: 24px;
  }
}
#backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #extraText {
  font-size: 24px;
}
#backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #extraText span {
  font-size: 27px;
  color: white;
  height: 40px;
  display: inline-block;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #extraText span {
    font-size: 24px;
  }
}
@media (min-width: 2000px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #extraText span {
    font-size: 38px;
  }
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #extraText {
    font-size: 10px;
  }
}
@media (min-width: 2000px) {
  #backDrop.ka #modalContainer.finishedFreeBits #mainTextContainer #extraText {
    font-size: 30px;
  }
}
#backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText {
  font-size: 20px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 18px;
  }
}
@media (min-width: 2000px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 24px;
  }
}
#backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText span {
  font-size: 27px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText span {
    font-size: 24px;
  }
}
@media (min-width: 2000px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText span {
    font-size: 30px;
  }
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 18px;
  }
}
@media (min-width: 2000px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #mainText {
    font-size: 20px;
  }
}
#backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #extraText {
  font-size: 11px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.wonFreeBits #mainTextContainer #extraText {
    font-size: 10px;
  }
}
#backDrop.ka #modalContainer.disconnected #mainTextContainer #mainText {
  font-size: 22px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.disconnected #mainTextContainer #mainText {
    font-size: 18px;
  }
}
#backDrop.ka #modalContainer.somethingWentWrong #mainTextContainer #mainText {
  font-size: 22px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.somethingWentWrong #mainTextContainer #mainText {
    font-size: 18px;
  }
}
#backDrop.ka #modalContainer.openInAnotherWindow #mainTextContainer #mainText {
  font-size: 22px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.openInAnotherWindow #mainTextContainer #mainText {
    font-size: 19px;
  }
}
#backDrop.ka #modalContainer.bonusGameFinished #mainTextContainer #mainText {
  font-size: 24px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.bonusGameFinished #mainTextContainer #mainText {
    font-size: 6vw;
  }
}
#backDrop.ka #modalContainer.bonusGameFinished #mainTextContainer #extraText {
  font-size: 16px;
  line-height: 40px;
}
#backDrop.ka #modalContainer.bonusGameFinished #mainTextContainer #extraText span {
  font-size: 24px;
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.bonusGameFinished #mainTextContainer #extraText span {
    font-size: 6vw;
  }
}
@media (max-width: 500px) {
  #backDrop.ka #modalContainer.bonusGameFinished #mainTextContainer #extraText {
    font-size: 4.6vw;
  }
}

#speedChangeBackdrop {
  font-family: "Pixeled";
  background: rgba(0, 0, 0, 0);
  /*  backdrop-filter: blur(15px);*/
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none;
}
@media (min-width: 2000px) {
  #speedChangeBackdrop {
    height: 1080px;
    width: 1920px;
  }
}
#speedChangeBackdrop.active {
  display: inline-flex;
}
#speedChangeBackdrop img {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
#speedChangeBackdrop #speedChangeContainer {
  opacity: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 30px 25px;
  height: 320px;
  width: 316px;
  animation-duration: 400ms;
  animation-name: fadein;
  animation-iteration-count: 1;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#speedChangeBackdrop #speedChangeContainer .modalImage {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
#speedChangeBackdrop #speedChangeContainer .changeSpeed {
  text-align: center;
  color: #E5C80C;
  font-family: "PIXELED";
  text-align: start;
  font-size: 17px;
  text-align: center;
}
#speedChangeBackdrop #speedChangeContainer #chooseTurbo {
  display: flex;
  gap: 20px;
}
#speedChangeBackdrop #speedChangeContainer #chooseTurbo button {
  font-family: "PIXELED";
  background: transparent;
  color: #E5C80C;
  width: 115px;
  height: 58px;
  border: 1px solid #E5C80C;
  font-size: 10px;
  transition: 200ms;
}
#speedChangeBackdrop #speedChangeContainer #chooseTurbo button:hover {
  background: rgba(214, 219, 255, 0.2);
  cursor: pointer;
}
#speedChangeBackdrop #speedChangeContainer #chooseTurbo button#acceptTurbo {
  background: rgba(229, 200, 12, 0.15);
}
#speedChangeBackdrop #speedChangeContainer #chooseTurbo button#acceptTurbo:hover {
  background: rgba(214, 219, 255, 0.3);
}

*:focus {
  outline: none;
  box-shadow: none;
}

body {
  width: 100%;
  overflow: hidden;
  background-color: black;
  overflow: hidden;
  padding: 0;
  margin: 0;
  height: 100vh;
  position: relative;
  /*    &.mainGame::before {
      z-index: -1;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center;
      background-image: url("../assets/images/mainBackground.gif");
  }

  &.bonusGame::before {
      z-index: -1;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("../assets/images/bonusBackground.gif");
      background-size: cover;
      background-position: center;
      animation-name: rotation;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
      transform-origin: center;
  }*/
}

@keyframes rotation {
  0% {
    transform: rotate(8deg) scale(1.25);
  }
  100% {
    transform: rotate(-8deg) scale(1.25);
  }
}
canvas {
  display: block;
  margin: 0 auto;
}

#domContainer {
  position: center;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#domContainer > div {
  transform-origin: unset !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

#domContainer > div > div {
  transform: unset !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.visiblityHidden {
  visibility: hidden;
}

@keyframes rotateTheDevice {
  0% {
    transform: rotate(90deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  33% {
    transform: rotate(90deg);
    opacity: 1;
  }
  66% {
    transform: rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg);
    opacity: 0;
  }
}
@keyframes rotateTheArrows {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  33% {
    transform: rotate(0deg);
    opacity: 1;
  }
  66% {
    transform: rotate(-90deg);
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
  100% {
    transform: rotate(-90deg);
    opacity: 0;
  }
}
.landscape-alert {
  display: none;
  height: 100%;
  width: 100%;
  background-color: #000F20;
  position: absolute;
  z-index: -2;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
  left: 0;
}
.landscape-alert .landscape-alert-background {
  position: absolute;
  height: 50px;
  width: 100%;
  background-image: url(../assets/images/rotate-img.png);
  background-repeat: no-repeat;
  background-size: 26px;
  background-position: 50% 50%;
  animation: rotateTheDevice 2s infinite;
  animation-timing-function: cubic-bezier(0.52, 0.1, 0.56, 1.27);
}
.landscape-alert .landscape-alert-arrows {
  position: relative;
  margin: 30px;
  height: 100px;
  width: 100%;
  background-image: url(../assets/images/rotate-arrows.svg);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position: 50% 50%;
  animation: rotateTheArrows 2s infinite;
  animation-timing-function: cubic-bezier(0.52, 0.1, 0.56, 1.27);
}
.landscape-alert .landscape-alert-text {
  position: relative;
  color: white;
  font-family: RetroComputer;
  font-size: 12px;
  height: fit-content;
  width: 100vw;
  text-align: center;
  transition: 400ms;
  opacity: 0;
}
.landscape-alert .landscape-alert-text-2 {
  position: relative;
  color: white;
  font-family: GameFont1;
  font-size: 12px;
  height: fit-content;
  width: 100vw;
  text-align: center;
  transition: 400ms;
  opacity: 0;
}

.maintenance-alert {
  display: none;
  height: 100%;
  width: 100%;
  background-color: #000F20;
  position: absolute;
  z-index: 5;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
  left: 0;
}
.maintenance-alert.active {
  display: unset;
}
.maintenance-alert .maintenance-text-container {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
}
@media (min-aspect-ratio: 2/1) {
  .maintenance-alert .maintenance-text-container {
    gap: 3vh;
  }
}
.maintenance-alert .maintenance-text-container img {
  height: 20vw;
  width: 20vw;
}
@media (max-width: 1000px) {
  .maintenance-alert .maintenance-text-container img {
    height: 50vw;
    width: 50vw;
  }
}
@media (min-aspect-ratio: 2/1) {
  .maintenance-alert .maintenance-text-container img {
    height: 30vh;
    width: 30vh;
    gap: 3vh;
  }
}
.maintenance-alert .maintenance-text-container .maintenance-alert-text {
  color: white;
  font-family: "GameFont1";
  font-size: 3vw;
  height: fit-content;
  width: 42vw;
  text-align: center;
  font-weight: 600;
}
@media (max-width: 1000px) {
  .maintenance-alert .maintenance-text-container .maintenance-alert-text {
    width: 75vw;
    font-size: 5vw;
  }
}
@media (min-aspect-ratio: 2/1) {
  .maintenance-alert .maintenance-text-container .maintenance-alert-text {
    width: 75vh;
    font-size: 5vh;
  }
}
.maintenance-alert .maintenance-text-container .maintenance-alert-text-2 {
  color: white;
  font-family: "GameFont1";
  font-size: 1.6vw;
  height: fit-content;
  width: 100vw;
  text-align: center;
}
@media (max-width: 1000px) {
  .maintenance-alert .maintenance-text-container .maintenance-alert-text-2 {
    font-size: 3.2vw;
  }
}
@media (min-aspect-ratio: 2/1) {
  .maintenance-alert .maintenance-text-container .maintenance-alert-text-2 {
    font-size: 3.2vh;
  }
}

@media screen and (pointer: none) and (orientation: landscape) and (max-width: 1025px), screen and (pointer: coarse) and (orientation: landscape) and (max-width: 1025px) {
  .landscape-alert {
    z-index: 100;
    display: flex;
  }
  .landscape-alert .landscape-alert-text {
    opacity: 1;
    transition: 0;
    transition-delay: 600ms;
  }
  .landscape-alert .landscape-alert-text-2 {
    opacity: 1;
    transition: 0;
    transition-delay: 1400ms;
  }
}
#parent > div {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #000000;
  animation: fadeIn 0.5s ease-in;
  position: fixed;
  top: 0;
  left: 0;
  gap: 8%;
}
.loader__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 800px;
  height: fit-content;
}
.loader__content__video {
  width: 100vw;
  min-height: 100px;
}
@media only screen and (max-width: 1366px) {
  .loader__content__video {
    width: 100vw;
  }
}
@media only screen and (max-width: 1000px) {
  .loader__content__video {
    width: 140vw;
  }
}
@media only screen and (max-width: 768px) {
  .loader__content__video {
    width: 160vw;
  }
}
.loader .box {
  height: 12px;
  width: 181px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  margin-bottom: 15vw;
  margin-top: -15vw;
}
@media only screen and (min-width: 1920px) {
  .loader .box {
    transform: scale(1);
  }
}
@media only screen and (min-width: 2560px) {
  .loader .box {
    transform: scale(2.2);
  }
}
@media only screen and (min-width: 3840px) {
  .loader .box {
    transform: scale(2.5);
  }
}
@media only screen and (max-width: 1366px) {
  .loader .box {
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 1000px) {
  .loader .box {
    transform: scale(0.8);
    margin-bottom: 20vw;
    margin-top: -20vw;
  }
}
@media only screen and (max-width: 768px) {
  .loader .box {
    transform: scale(0.6);
    margin-bottom: 30vw;
    margin-top: -30vw;
  }
}
.loader .box__progress {
  width: 179px;
  height: 10px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 2px;
}
.loader .box__progress__slot {
  height: 8px;
  min-width: 16px;
  background: white;
}
.loader .box__line {
  position: absolute;
  background: rgb(255, 255, 255);
}
.loader .box__line--top, .loader .box__line--bottom {
  height: 2px;
  width: 100%;
}
.loader .box__line--top {
  top: -2px;
}
.loader .box__line--bottom {
  bottom: -2px;
}
.loader .box__line--left, .loader .box__line--right {
  width: 2px;
  height: 100%;
}
.loader .box__line--left {
  left: -2px;
}
.loader .box__line--right {
  right: -2px;
}

body.login_failed {
  background-color: black;
}
body.login_failed .loader {
  width: 400px;
  height: 220px;
  background: url("../assets/images/login-failed.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  cursor: pointer;
}
@media only screen and (max-width: 450px) {
  body.login_failed .loader {
    width: 350px;
    height: 200px;
  }
}
@media only screen and (max-width: 390px) {
  body.login_failed .loader {
    width: 250px;
    height: 180px;
  }
}
body.login_failed .loader.clicked {
  background: url("../assets/images/login-failed-click.png") no-repeat;
  background-size: contain;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.UIcloneImage {
  pointer-events: none;
  position: absolute;
  cursor: pointer;
}

/* PROMO BUTTON OVERRIDES — beats lib .promo-button via body-scoped specificity */
body .promo-button {
  top: 10px;
  left: 115px;
  right: auto;
  width: 105px;
  height: 105px;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

@media (max-width: 1000px) and (orientation: landscape) {
  body .promo-button {
    top: 12px;
    left: 12px;
    right: auto;
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 1000px) and (orientation: portrait) {
  body .promo-button {
    top: 3px;
    left: 1px;
    right: auto;
    width: 70px;
    height: 70px;
  }
}

/* Keep the promo popup above the button: while the overlay is open, drop the
   button below the overlay (z-index 100000) so the popup overlaps it instead of
   the icon covering the popup content (notably on small mobiles). */
body:has(.promo-iframe-overlay[style*="flex"]) .promo-button {
  z-index: 1 !important;
}