@import url('https://fonts.googleapis.com/css2?family=Jura:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crushed&display=swap');

* {
  padding: 0;
  margin: 0;
  font-family: 'Jura', sans-serif;
}

.loadingScreen {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #130F18;
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
                    url('https://img.huffingtonpost.com/asset/56fb949e1e000087007059fe.jpeg?cache=olltrspfyg&ops=1778_1000');
  background-position: center;
  background-size: cover;
  z-index: 700;
}

.letter-holder {
  padding: 16px;
}

.letter {
  float: left;
  font-size: 24px;
  color: #CFDF55;
}

.load-6 .letter {
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}

.l-1 {
  animation-delay: 0.48s;
}
.l-2 {
  animation-delay: 0.6s;
}
.l-3 {
  animation-delay: 0.72s;
}
.l-4 {
  animation-delay: 0.84s;
}
.l-5 {
  animation-delay: 0.96s;
}
.l-6 {
  animation-delay: 1.08s;
}
.l-7 {
  animation-delay: 1.2s;
}
.l-8 {
  animation-delay: 1.32s;
}
.l-9 {
  animation-delay: 1.44s;
}
.l-10 {
  animation-delay: 1.56s;
}

@keyframes loadingF {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.preroll {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.gameadsbanner {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 115px;
  border-radius: 0;
  z-index: 600;
}

.gameLeadersBlock {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 200px;
  height: auto;
  z-index: 600;
}

.gameLeadersName {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  color: #CFDF55;
  font-size: 14px;
}

.gameLeaders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 200px;
  height: auto;
  margin: 10px 0 0 0;
  padding: 3px 0 5px 0;
  color: #CFDF55;
  background-color: rgba(189, 216, 93, 0);
}

.leaderResult {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 10px);
  height: 18px;
  margin-top: 2px;
  color: #CFDF55;
  font-size: 12px;
  background-color: rgba(61, 61, 61, 0.5);
}

.leaderPlaceNumber {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 18px;
  height: 100%;
  padding-left: 7px;
}

.leaderNickname {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 5px;
}

.leaderHks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50px;
  height: 100%;
  padding-right: 7px;
}

.io-2077_970x250 {
  position: fixed;
  left: calc((100% - 970px) / 2);
  bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 970px;
  height: 250px;
  z-index: 600;
}

.bottomMenu {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  height: 24px;
  border-top-left-radius: 10px;  
  overflow: hidden;
  z-index: 550;
}

.bottomMenuButton {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: auto;
  height: 100%;
  padding: 0 10px 2px 10px;
  color: #e7e7e7;
  font-size: 14px;
  border: none;
  background-color: #e0e24696;
  outline: none;
  cursor: pointer;
  transition: .5s;
}

.bottomMenuButton:hover { 
  color: #ffffff;
  background-color: #a9ac2896;
  transition: .5s;
}

.langMenu {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 24px;
  border-top-right-radius: 10px;  
  overflow: hidden;
  z-index: 540;
}

.langMenuButton {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: auto;
  height: 100%;
  padding: 0 10px 2px 10px;
  color: #e7e7e7;
  font-size: 14px;
  border: none;
  background-color: #e0e24696;
  outline: none;
  cursor: pointer;
  transition: .5s;
}

.langMenuButton:hover { 
  color: #ffffff;
  background-color: #a9ac2896;
  transition: .5s;
}

.loginScreen {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  background-color: #130F18;
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
                    url('https://vk.vkfaces.com/851036/v851036167/1bbc3e/-05FwgcVey4.jpg');
  background-position: center;
  background-size: cover;
  z-index: 200;
}

.logoBlock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: calc(100% - 20px);
  min-height: 120px;
  height: 20%;
  margin: 10px 0 0 0;
}

.gameLogotype {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 400px;
  height: 120px;
  border-radius: 6px;
  color: #D0E05A;
  font-size: 80px;
  font-family: 'Odibee Sans', cursive;
  font-family: 'Press Start 2P', cursive;
  font-family: 'Crushed', cursive;
}

.hintsBlock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 700px;
  height: 50px;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.oneHint {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: rgb(195, 195, 195);
  font-size: 16px;
  opacity: 0;  
}

.oneHint[data-shown="true"] {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: rgb(195, 195, 195);
  font-size: 16px;
  z-index: 5;
  animation: textFadeIn 10s infinite;
}

@keyframes textFadeIn {
  0%   {opacity: 0;}
  10%  {opacity: 0;}
  20%  {opacity: 1;}
  30%  {opacity: 1;}
  40%  {opacity: 1;}
  50%  {opacity: 1;}
  60%  {opacity: 1;}
  70%  {opacity: 1;}
  80%  {opacity: 1;}
  90%  {opacity: 0;}
  100% {opacity: 0;}  
}

.hintStartButton, .loginSetButton, .leadersButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
}

.loginBlock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 40px;
  margin: 0;
}

.loginMessage {
  position: absolute;
  top: 60%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0;
  margin: 0;
  color: #ffffff;
  font-size: 0;
  opacity: 0;
  transition: .2s;
}

.loginMessage[data-shown="true"] {
  position: absolute;
  top: 120%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26px;
  margin: 0;
  border-radius: 5px;
  color: #ffffff;
  font-size: 14px;
  background-color: rgba(231, 61, 61, 0.452);
  opacity: 1;
  transition: .2s;
}

input[class="playerName"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  color: #000000;
  font-size: 20px;
  border: 2px solid #ffffff;
  border-radius: 0;
  background-color: rgba(255, 255, 255, .5);
  cursor: default;
  outline: none;
  transition: .3s;
}

input[class="playerNameRed"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  color: #000000;
  font-size: 20px;
  border: 2px solid rgb(250, 100, 100);
  border-radius: 0;
  background-color: rgba(255, 255, 255, .5);
  cursor: default;
  outline: none;
  transition: .3s;
  animation: redBorder 2s forwards;
}

@keyframes redBorder {
  0%   {box-shadow: 0 0 8px 2px rgba(250, 100, 100, 0);}
  25%  {box-shadow: 0 0 8px 2px rgb(250, 100, 100);}
  50%  {box-shadow: 0 0 8px 2px rgba(250, 100, 100, 0);}
  75%  {box-shadow: 0 0 8px 2px rgb(250, 100, 100);}
  100% {box-shadow: 0 0 8px 2px rgba(250, 100, 100, 0);}
}

input[class="playerName"]:focus {
  box-shadow: 0 0 4px 1px rgb(255, 255, 255);
}

input[class="playerName"]::placeholder, 
input[class="playerNameRed"]::placeholder {
  color: rgb(80, 80, 80);
}

.gameStartButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 44px;
  margin: 0 0 0 10px;
  font-size: 20px;
  border: 2px solid #eaf551;
  border-radius: 0;
  background-color: #e9e648cb;
  cursor: pointer;
  outline: none;
  transition: .3s;
}

.gameStartButton:hover {
  color: #ffffff;
  box-shadow: 0 0 4px 1px rgb(255, 255, 255);
  transition: .3s;
}

.resultScreen {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  background-color: #130F18;
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
                    url('https://vk.vkfaces.com/851036/v851036167/1bbc3e/-05FwgcVey4.jpg');
  background-position: center;
  background-size: cover;
  z-index: 100;
}

.resultBlock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
}

.results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 300px;
  height: 88px;
  border-radius: 0;
  /* background-color: rgba(120, 134, 31, 0.3); */
}

.resultElement {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 290px;
  height: 20px;
  margin-top: 2px;
  font-size: 14px;
  color: #d3d3d3;
  animation: elementFadeIn 1s forwards;
}

@keyframes elementFadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

.continueButton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 44px;
  padding: 0 15px; 
  margin: 0 0 0 10px;
  font-size: 20px;
  border: 2px solid #eaf551;
  border-radius: 0;
  background-color: #e9e648cb;
  cursor: pointer;
  outline: none;
  transition: .3s;
}

.continueButton:hover {
  color: #ffffff;
  box-shadow: 0 0 4px 1px rgb(255, 255, 255);
  transition: .3s;
}

.resultBlock[data-shown='true'] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 500px;
  height: 600px;
  border-radius: 15px;
  font-size: 30px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, .8);
  transition: .5s;
}

.playerResult {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 480px;
  height: 50px;
  margin: 1px;
  border-radius: 8px;
  font-size: 24px;
  color: #ffffff;
  background-color: #3B3B29;
  animation: blockGrow .3s forwards;
}

.botResult {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 480px;
  height: 50px;
  margin: 1px;
  border-radius: 8px;
  font-size: 24px;
  color: #ffffff;
  background-color:#282C3A;
  animation: blockGrow .3s forwards;
}

@keyframes blockGrow {
  0%   {transform: scale(0);}
  100% {transform: scale(1);}
}

.playerPlace {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 10%;
  height: 100%;
  margin: 0 0 0 20px;
}

.playerName {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 70%;
  height: 100%;
  margin: 0 0 0 20px;
}

.playerPoints {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 20%;
  height: 100%;
  margin: 0 20px 0 20px;
}

.hackerTournament {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background-color: #130F18;
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
                    url('https://vk.vkfaces.com/851036/v851036167/1bbc3e/-05FwgcVey4.jpg');
  background-position: center;
  background-size: cover;
  z-index: 0;
}

.gameWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1020px;
}

.header {
  display: flex;  
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  margin: 0;
}

.hackerData {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  color: #D0E05A;
}

.hackerRecords {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  color: #D0E05A;
}

.abortGameButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 30px;
  margin: 0 0 0 10px;
  font-size: 16px;
  border: 2px solid #eaf551;
  border-radius: 0;
  background-color: #e9e648cb;
  cursor: pointer;
  outline: none;
  transition: .3s;
}

.abortGameButton:hover {
  color: #ffffff;
  box-shadow: 0 0 4px 1px rgb(255, 255, 255);
  transition: .3s;
}

.gameField {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 1020px;
  height: 580px;
  margin: 0;
  border: 1px solid #D0E05A;
}

.topBlock {
  display: flex;  
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 30px;  
  color: #D0E05A;
}

.topBlockText {
  display: flex;  
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: 40px;
  margin-left: 45%;
  color: #D0E05A;
}

.gameBlock {
  display: flex; 
  align-items: flex-start;
  justify-content: flex-start;
  width: 1000px;
  height: 523px;
}

.statusBlock {
  display: flex;
  flex-grow: 1; 
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 20px);
  color: #D0E05A;
  font-size: 14px;
}

.status {
  display: flex;
  flex-grow: 1; 
  align-items: center;
  justify-content: flex-start;
  margin: 0 10px;
}

.statusIndicatorWrapper {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(120, 134, 31, 0.3);
  
}

.statusIndicator {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  /* box-shadow: 0 0 4px 1px rgb(255, 255, 255); */
}

.statusIndicator[data-color="yellow"] {
  background-color: #D0E05A;
}

.statusIndicator[data-color="red"] {
  background-color: #ec3f3f;
}

.statusIndicator[data-color="green"] {
  background-color: #50b432;
}

.leftConsole {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 523px;
}

.paramsBlock {
  display: flex; 
  align-items: center;
  justify-content: center;
  width: 340px;
  height: 40px;
  /* background-color: rgba(120, 134, 31, 0.3); */
}

.pointsBlock, .hacksBlock {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px;
  border: 1px solid #D0E05A;
  /* background-color: rgba(120, 134, 31, 0.3); */
}

.hacksBlock {
  margin-left: 10px;
}

.pointsName, .hacksName {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 5px;
  color: #CFDF55;
  font-size: 14px;
}

.points, .hacks {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 30px;
  margin: 0 0 0 10px;
  /* border-radius: 5px; */
  font-size: 22px;
  color: #ffffff;
  /* border: 1px solid #CFDF55; */
  background-color: rgba(0, 0, 0, .7);  
}

.infoConsole {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  justify-content: flex-start;
  width: 340px;
  margin-top: 10px;
}

.infoConsoleName {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 40px);
  height: 30px;
  padding-left: 40px;
  background-color: #CFDF55;
}

.infoConsoleBlock {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(100% - 2px);
  border: 1px solid #CFDF55;
  overflow: hidden;
}

.infoConsoleMessages {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  align-items: flex-start;
  justify-content: flex-start;
  transition: .3s
}

.infoConsoleInput {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 12px);
  height: 24px;
  padding: 0 5px;
  color: #CFDF55;
  font-size: 14px;
  border: 1px solid #CFDF55;
  border-top: none;
  background-color: #282C3A;
}

.consoleCommand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 5px;
  font-size: 14px;
  color: #CFDF55;
}

.consoleCommand[data-symbol="true"] {
  font-size: 16px;
  color: #ffffff;
}

.consoleMessage[data-color="white"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 12px);
  height: 18px;
  padding: 0 6px 0 6px;
  color: #c3c4c2;
  font-size: 12px;
}

.consoleMessage[data-color="yellow"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 12px);
  height: 18px;
  padding: 0 6px 0 6px;
  color: #CFDF55;
  font-size: 12px;
}

.consoleMessage[data-color="red"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 12px);
  height: 18px;
  padding: 0 6px 0 6px;
  color: #ec6e65;
  font-size: 12px;
}

.consoleMessage[data-color="green"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 12px);
  padding: 0 6px 0 6px;
  height: 18px;
  color: #54df66;
  font-size: 12px;
}

.leaderBoard {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, .1);
  transition: .3s;
}

.intermediateResult {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  color: #ffffff;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0);
}

.intermediateResult[data-player="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  color: #ffffff;
  font-size: 12px;
  background-color: rgba(108, 128, 21, .3);
}

.intermediatePlaceNumber {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 18px;
  height: 100%;
  padding-left: 7px;
}

.playerNickname {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 5px;
}

.intermediatePoints {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50px;
  height: 100%;
  padding-right: 7px;
}

.rightConsole {
  display: flex;
  flex-direction: column;  
  align-items: center;
  justify-content: flex-start;
  width: 650px;
  height: auto;
  margin: 0 0 0 10px;
}

.indicators {
  display: flex;  
  flex-direction: column;  
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 2px);
  height: auto;
  border: 1px solid #D0E05A;
  background-color: rgba(120, 134, 31, 0.3);
}

.timeBlock {
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: 10px 0;
}

.timeParams {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 600px;
  height: auto;
}

.timeText {
  display: flex;
  flex-grow: 1;  
  align-items: center;
  justify-content: flex-start;
  height: 20px;
  color: #CFDF55;
}

.timeCounterBlock {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 20px;
  font-size: 22px;
}

.timeCounter {
  display: flex;  
  align-items: center;
  justify-content: flex-end;
  width: 39px;
  height: 20px;
  font-size: 18px;
}

.counterNumber {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
  height: 100%;
  color: #CFDF55;
}

.timeScale {
  display: flex;  
  align-items: center;
  justify-content: flex-start;
  width: 600px;
  height: 4px;
  margin: 5px 0 0 0;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, .7);
  overflow: hidden;
}

.timeIndicator {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 0;
  height: 4px;
  border-radius: 2px;
  background-color: rgb(233, 207, 61);
}

.timeIndicator[data-process="true"] {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-color: rgb(233, 207, 61);
  animation: timeCountDown linear 120s forwards;
}

@keyframes timeCountDown {
  0%   {transform: translate(0);}
  100% {transform: translate(-100%, 0);}
}

.startCountDown {
  display: flex;
  width: 50px;
  height: 20px;
  border: none;
}

.symbolOrder {
  display: flex;  
  align-items: center;
  justify-content: center;
  width: 600px;
  height: auto;
  margin: 0 0 10px 0;
  color: #CFDF55;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, .7);
}

.symbolOrderboard {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  height: 60px;
  margin: 0;
}

.orderBoardCell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 5px;
  color: #ffffff;
  border-radius: 3px;
  /* border: 1px dotted #5F6627; */
  box-shadow: 0 0 4px 0 #7caedd;  
}

.orderBoardCell[data-first="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 5px;
  color: #ffffff;
  font-size: 22px;
  border-radius: 3px;
  /* border: 1px solid #ffffff; */
  background-color: rgba(255, 255, 255, .1);
  box-shadow: 0 0 6px 2px #ffffff;
  transition: .2s;
  /* animation: firstCell .3s forwards;   */
}

@keyframes firstCell {
  0%   {transform: scale(1)}
  100% {transform: scale(1.1)}
}

.orderBoardCell[data-completed="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 5px;
  color: #CFDF55;
  border-radius: 5px;
  box-shadow: 0 0 4px 0 #CFDF55;
  /* border: 1px dotted #5F6627; */
  /* box-shadow: 0 0 4px 0 #0db11a; */
  transition: .2s;
}

.matrix {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 2px);
  height: auto;
  margin-top: 10px;
  border: 1px solid #CFDF55;
}

.matrixRestart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 30px;
  background-color: rgba(120, 134, 31, 0.3);
}

.matrixRestartText {
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  height: 26px;
  line-height: 26px;
  padding: 0 0 0 20px;
  font-size: 14px;
  color: #ffffff;
}

.matrixRestartText[data-loading="true"] {
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  height: 26px;
  line-height: 26px;
  padding: 0 0 0 20px;
  font-size: 14px;
  color: #ffffff;
  animation: redShine linear 2s infinite;
}

@keyframes redShine {
  0%   {background-color: rgba(236, 40, 40, 0);}
  50%  {background-color: rgba(236, 40, 40, 0.4);}
  100% {background-color: rgba(236, 40, 40, 0);}
}

.matrixRestartScale {
  display: flex;
  width: 100%;
  height: 4px;
  /* background-color: rgba(120, 134, 31, 0.3); */
  overflow: hidden;
}

.matrixRestartIndicator[data-loading="true"] {
  display: flex;
  width: 100%;
  height: auto;
  background-color: rgb(233, 207, 61);
  animation: mriLoading linear 5s forwards;
}

@keyframes mriLoading {
  0%   {transform: translate(-100%, 0);}
  100% {transform: translate(0);}
}

.matrixText {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 40px);
  height: 30px;
  padding-left: 40px;
  background-color: #CFDF55;
}

.matrixBlock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  margin: 15px 0 15px 0;
}

.cubes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 120px;
  height: 300px;
  /* border: 1px solid #D0E05A; */
  /* background-color: rgba(120, 134, 31, 0.3); */
}

.cube_left, .cube_right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: none;
}

.cube_left[data-color="true"], .cube_right[data-color="true"]{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: rgba(120, 134, 31, 0.6);
}

/* .cube:hover {
  background-color: rgba(255, 255, 255, 0.322);
} */

.matrixSymbolField_6x6 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 360px;
  height: 300px;
  margin: 0 10px 0 10px;
  /* margin: 15px 0 15px 0; */
}

.matrixCell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #CFDF55;
  font-size: 18px;
  border: 1px solid #b3b8891e;
  background-color: inherit;
  outline: none;
}

.matrixCell[data-shine="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #CFDF55;
  font-size: 18px;
  border: 1px solid #b3b8891e;
  background-color: rgb(72, 72, 97);
  outline: none;
  animation: blueShine 1s infinite;
}

.matrixCell[data-shine="true"][data-selected="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #000000;
  font-size: 18px;
  border: 1px solid #b3b8891e;
  outline: none;
  animation: blueShine 1s infinite;
}

@keyframes blueShine {
  0%   {background-color: rgb(19, 15, 24);}
  50%  {background-color: rgb(72, 72, 97);}
  100% {background-color: rgb(19, 15, 24);}
}

.matrixCell[data-possible="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #ffffff;
  font-size: 18px;
  border: 1px solid #b3b8891e;
  background-color: #282C3A;
  /* animation: shine linear 2s infinite; */  
  cursor: pointer;
  outline: none;
}

.matrixCell[data-selected="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: rgba(0, 0 , 0, 0);
  font-size: 18px;
  border: 1px solid #b3b8891e;
  background-color: inherit;  
  cursor: default;
  outline: none;
}

.matrixCell[data-possible="true"][data-selected="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: rgba(0, 0 , 0, 0);
  font-size: 18px;
  border: 1px solid #b3b8891e;
  background-color: #282C3A;  
  cursor: default;
  outline: none;
} 

/* .matrixCell[data-hover="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #CFDF55;
  font-size: 18px;
  border: 1px solid #CFDF55;
  background-color: #1F1E1B;
  outline: none;
} */

/* .matrixCell[data-hover="true"][data-selected="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #000000;
  font-size: 18px;
  border: 1px solid #CFDF55;
  background-color: #1F1E1B;
  outline: none;
} */

.focusedCell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #CFDF55;
  font-size: 18px;
  border: 1px solid #ffffff9f;
  background-color: rgba(255, 255, 255, .2);
  outline: none;
}

.focusedCell[data-possible="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #ffffff;
  font-size: 18px;
  border: 1px solid #ffffff;
  background-color: #282C3A;
  box-shadow: 0 0 5px 2px rgb(255, 255, 255);
  cursor: pointer;
  outline: none;
  z-index: 10;
}


.focusedCell[data-selected="true"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: rgba(0, 0 , 0, 0);
  font-size: 18px;
  border: 1px solid #ffffff9f;
  background-color: #292929;
  outline: none;
}

.selectedCell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 50px;
  color: #000000;
  font-size: 18px;
  border: 1px solid #CFDF55;
  background-color: #282C3A;
  cursor: default;
  outline: none;
}

@keyframes shine {
  0%   {background-color: #282C3A;}
  50%  {box-shadow: 0 0 2px 0px rgb(200,200,200);
        background-color: #515668;}
  110% {background-color: #282C3A;}
}

.messageBlockName {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 15px 0 0 0;
  color: #CFDF55;
  font-size: 14px;
}

.messageBlock {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  width: calc(100% - 20px);
  margin: 10px 0 0 0;
  padding: 0 10px;
  font-size: 16px;
  border: 1px solid #CFDF55;
}

.messageBlock[data-mistake="red"] {
  display: flex;  
  align-items: center;
  justify-content: center;
  text-align: center;
  width: calc(100% - 20px);
  color: #ffffff;
  border-radius: 0;
  animation: redShine linear 2s infinite;
}

.messageBlock[data-mistake="green"] {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: calc(100% - 20px);
  color: #ffffff;
  border-radius: 0;
  animation: greenShine linear 2s infinite;
}

@keyframes greenShine {
  0%   {background-color: rgba(28, 107, 34, 0);}
  50%  {background-color: rgba(28, 107, 34, .4);}
  100% {background-color: rgba(28, 107, 34, 0);}
}


.policyScreen {
  position: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100vh;
  color: #CFDF55;
  background-color: #130F18;
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
                    url('https://www.globalfleet.com/sites/default/files/hacker.jpg');
  background-position: center;
  background-size: cover;
  overflow-y: scroll;
}

.policyText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 60px);
  height: auto;
}

.aboutScreen {
  position: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100vh;
  color: #CFDF55;
  background-color: #130F18;
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), 
                    url('https://www.globalfleet.com/sites/default/files/hacker.jpg');
  background-position: center;
  background-size: cover;
  overflow-y: scroll;
}

.aboutText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: calc(100% - 60px);
  height: auto;
}

.aboutText p {
  padding: 10px 0;
}

.aboutGameBlock {
  position: fixed;
  top: 15vh;
  left: calc((100% - 450px) / 2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 450px;
  height: 70vh;
  animation: hideAbout .3s forwards;
}

@keyframes hideAbout {
  0%   {top: 15vh;
        opacity: 1;}
  100% {top: 25vh;
        opacity: 0;}
}

.aboutGameBlock[data-shown="true"] {
  position: fixed;
  top: 15vh;
  left: calc((100% - 450px) / 2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 450px;
  height: 70vh;
  animation: showAbout .3s forwards;
}

@keyframes showAbout {
  0%   {top: 5vh;
        opacity: 0;}
  100% {top: 15vh;
        opacity: 1;}
}

.aboutHideButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 24px;
  font-size: 18px;
  color: #CFDF55;
  border: 1px solid #CFDF55;
  background-color: rgba(0, 0, 0, 0);
  outline: none;
  cursor: pointer;
}

.aboutGame {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 10px 0 0 0;
  color: #CFDF55;
  background-color: #000000;
  overflow-y: scroll;
}

.aboutGame p {
  display: flex;
  width: (100% - 20px);
  height: auto;
  padding: 10px;
}

#aipBranding {
    display: none !important;
}


@media (max-height: 500px) {
	.io-2077_970x250 {
		display: none;
	}
}