/*
@font-face {
	font-family: 'Russo One';
	font-style: normal;
	font-weight: 400;
	src: local('Russo One'), local('RussoOne-Regular'), url(russo.woff) format('woff');
  }
*/

@font-face {
  font-family: "color-emoji";
  src: local("Segoe UI Emoji"), 
       local("Segoe UI Symbol"),
       local("Apple Color Emoji"),
       local("Noto Color Emoji");
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  /*font-family: 'Russo One';*/
  cursor:url('../images/cursor.png'), auto;
  overflow-x: hidden;
  /*touch-action: none;*/
  -webkit-text-size-adjust: none;
  -ms-overflow-style: none; /* IE 11 */
  scrollbar-width: none; /* Firefox 64 */

font-family: Impact, Charcoal, sans-serif;
}

body {
  position: relative;
}

html ::-webkit-scrollbar, body ::-webkit-scrollbar {
  width: 0px;  /* remove scrollbar space */
  background: transparent;  /* optional: just make scrollbar invisible */
}

#canvasGame {
  background: black;
  position:fixed;
  top:0;
  left:0;
  right:0;
  margin:0 auto;	
  z-index:0;

  touch-action: none;
  overflow: hidden;

  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
  
#gameContainer {
  overflow: hidden;
  touch-action: none;
  display:none;
  opacity:0;
  
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  margin:0 auto;	
  z-index:1;

cursor:default;
pointer-events:none;

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
#gameContainer .darkness
{
z-index:1;
position:absolute;
width:100%;
height:100%;
}



#gameContainer .status
{
position:relative;
font-size:12px;
margin:0 auto;
margin-top:7px;
width:40vw;
height:1vw;
z-index:10;
}

@media screen and (orientation:portrait) {
  #gameContainer .status {
    width:80vw !important;
    font-size:12px !important;
  }
 }

#gameContainer .status .experienceBar
{
width:100%;
height:15px;
font-weight:bold;
border:1px solid white;
 background-color:white;
 font-size:13px;
 text-align:center;
 z-index:10;
}

#gameContainer .status .waterBar
{
margin:0 auto;
margin-top:2px;
width:100%;
height:15px;
font-weight:bold;
border:1px solid white;
 background-color:white;
 font-size:12px;
 text-align:center;
 z-index:10;
}

#gameContainer .status .oxygenBar
{
margin:0 auto;
margin-top:2px;
width:100%;
height:15px;
font-weight:bold;
border:1px solid white;
 background-color:white;
 font-size:12px;
 text-align:center;
 z-index:10;
}

#gameContainer .status .skillRight
{
margin:0 auto;
margin-top:2px;
margin-left:2px;
width:100%;
padding-bottom: 100%;
font-weight:bold;
background-color:white;
font-size:12px;
text-align:center;
z-index:10;
background-size:100% 100%;
position: relative;
pointer-events: auto;
}


#gameContainer .status .skillRightDescription
{
position: absolute;
width:100%;
margin-top:2px;
background:white;
padding:1px;
font-size:13px;
display:none;
z-index:1;
}


#gameContainer .status .skillRight .arrow
{
position:absolute;
left:0;
bottom:-90%;
width:100%;
height:100%;
pointer-events:none;
display:none;
}


#gameContainer .status .skillRight>.bar
{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  text-align: center;
  font-size: 12px;
  background: rgba(0,0,0,0.8);
  height: 0%;
  /*text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;*/
}

#gameContainer .textMsg
{
position:fixed;
font-size:1.4vw;
width:100%;
bottom:6%;
left:0;
z-index:10;
text-align:center;
pointer-events:none;
user-select: none;
}

#gameContainer .status .skillRight>.rclick
{
  width:23%;
  height:28%;
  position: absolute;
  right:1px;
  bottom:1px;
  background-image: url('../images/rclick.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display:none;
}

#gameContainer .status .guide
{
	display:none;
width:100%;
 z-index:10;
}


#gameContainer .status .youEat
{
width:100%;
text-align:center;
z-index:10;
user-select: none;
}

#gameContainer .status .youEat .item
{
display: inline-block;
height: 1.6vw;
min-height: 4.5vh;
position: relative;
user-select: none;
}

@media screen and (orientation:portrait) {
  #gameContainer .status .youEat .item{
    height: 3.1vh !important;
    min-height: 4.6vw !important;
  }
 }

#gameContainer .status .youEat .info
{
position: absolute;
height:100%;
width:100%;
background:white;
opacity:0;
pointer-events: auto;
transition: opacity 1s;
border-radius: 0.2vw;
display: table;
z-index:5;
}

#gameContainer .status .youEat .info:hover{
  opacity:1;
}

#gameContainer .status .youEat .info span
{
  pointer-events: auto;
  display: table-cell;
  vertical-align: middle;
}

#gameContainer .status .youEat .item img
{
height:100%;
}

#gameContainer .leaderboard {
  font-size:1.7vh;
  position:absolute;
  top:4px;
  left:4px;
  color:white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top:4px;
  opacity:0.9;
  
  z-index:10;
  padding:5px;
  overflow: hidden;
  max-width:20%;
  text-shadow:
  -1px -1px 0 #000,  
   1px -1px 0 #000,
   -1px 1px 0 #000,
    1px 1px 0 #000;
}

@media screen and (orientation:portrait) {
  #gameContainer .leaderboard {
    display:none;
  }
 }

#gameContainer .leaderboard img{
  height:1.8vh;
  position: relative;
  top:0.1vh;
}


#gameContainer .debugInfo {
  font-size:0.8vw;
  position:absolute;
  top:4px;
  right:4px;
  color:black;
  z-index:10;
  text-align: right;
}

@media screen and (orientation:portrait) {
  #gameContainer .debugInfo {
    display:none;
  }
}

  
#gameContainer .spectators {
  position:absolute;
  bottom:8px;
  left:8px;
  color:black;
  z-index:10;
  text-align: right;
  display: none;
}

#gameContainer .spectators img{
  height:2.5vh;
  float:left;
}

#gameContainer .skinChanger {
  position:fixed;
  display: none;
  background:rgba(0,0,0,0.5);
  padding:5px;
  left:50%;
  top:31%;
  transform: translate(-50%, -50%);
  border-radius: 1vh;
  z-index:100;
}

#gameContainer .skinChanger img {
  cursor: pointer;
  height:15vh;
  pointer-events: auto;
  margin: 0px 1px;
}

@media screen and (orientation:portrait) {
  #gameContainer .skinChangerButton {
    top: 2vh !important;
    left: 2vw !important;
    display: block;
  }

  #gameContainer .skinChangerButton img{
    float:left;
  }
}


#gameContainer .skinChangerButton {
  position:absolute;
  bottom:8px;
  right:8px;
  color:black;
  z-index:10;
  text-align: right;
  opacity:0.6;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 1s;
  display: none;
}


#gameContainer .skinChangerButton:hover{
  opacity:1;
}

#gameContainer .skinChangerButton img{
  height:6vw;
  float:right;
}

#gameContainer .minimap {
  width:100%;
  height:calc(100px - 1px);
  max-height: 25vh;
  position: absolute;
  bottom:0px;
  left:0;
  border-top: 1px solid #ff7600;
  transition: transform 0.7s;
  transform:translate(0,100%);
}

#gameContainer .minimap .button {
  width: 40px;
  position: absolute;
  top: -40px;
  height: 40px;
  left: 50%;
  transform: translate(-50%,0);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.3;
  transition:opacity 1s;
}

@media screen and (orientation:portrait) {
  #gameContainer .minimap .button {
    display:none;
  }
}

#gameContainer .minimap .button img{
  transition:transform 1s;
}

#gameContainer .minimap .button:hover{
  opacity: 1;
}

#gameContainer .minimap img {
  width:100%;
  height:100%;
  opacity:0.66;
  position:relative;
}

#gameContainer .minimap .line {
  width:3px;
  height:100%;
  background-color: red;
  position: absolute;
  top:0;
  left:0;
}





#gameContainer .spectators .count{
  margin-left:0.3vh;
  font-size:2.5vh;
  float:left;
}

#gameContainer .endGame {
  font-size:3vw;
  position:absolute;
  display:none;
  left:0;
  right:0;
  margin:0 auto;	
  text-align:center;
  color:#272727;
  transition: opacity 1s;
  transform: translate(0, -50%);
  z-index:15;
}

#gameContainer .endGame .btnPlayAgain{
/*font-family: 'Russo One';*/
font-family: Impact, Charcoal, sans-serif;
font-size:2vw;
background:#e57a45;
padding:2px 5px 2px;
border:none;
display:none;
opacity:0;
pointer-events: auto;
}

@media screen and (orientation:portrait) {
  #gameContainer .endGame {
    font-size:7vw;
  }
  #gameContainer .endGame .btnPlayAgain{
    font-size:7vw;
  }

}

 #gameContainer .endGame .endGameTextBonus{
/*color:#e5bb45; */
 }

  #gameContainer .endGame .btnPlayAgainBonus{
/*font-family: 'Russo One';*/
font-family: Impact, Charcoal, sans-serif;
font-size:2vw;
background:#e5bb45;
padding:2px 5px 2px;
border:none;
display:none;
opacity:0;
pointer-events: auto;
}

#gameContainer .mobileControls {
  position:fixed;
  top:calc(100vh - 14vw - 1vh);
  left:0;	  
  z-index:10;
  width:100%;
  font-size:18px;
  user-select: none;
}

#gameContainer .mobileControls button{
  height:16vw;
  width:16vw;
  pointer-events: auto;
  border-radius:45vw;
  border:1px solid black;
  opacity:0.6;
  outline:none;
  background:rgb(211, 211, 211);
  font-size:18px;
  touch-action: none;
}

@media screen and (orientation:portrait) {
  #gameContainer .mobileControls button:not(.zoom):not(.emotes){
    width:30vw !important;
    height:30vw !important;
    position: relative;
    bottom:14vw !important;
  }

  #gameContainer .mobileControls #skillButton{

    bottom:77vw !important;
  }
}

  /*
  #gameContainer .mobileControls .zoom, #gameContainer .mobileControls .emotes{
  width:7vw !important;
  height:7vw !important;
  bottom:0 !important;
  }
 }*/

#gameContainer .mobileControls button:active{
  opacity:1;
}


#gameContainer .mobileControls .zoom{
  position:fixed;
  top:4vw;
  right:0vw;
  width:7vw;
  height:7vw;
  font-size:2vw;
  opacity:1;
}

#gameContainer .mobileControls .emotes{
  position:fixed;
  top:11.5vw;
  right:0vw;
  width:7vw;
  height:7vw;
  font-size:2vw;
  opacity:1;
}







#uiContainer {
  width: 100%;
  height: 100%;
  margin: 0;

}

#uiContainer .centerUi {
  z-index:5;
  width: 700px;
  position: absolute;
  top:55px;
  left: calc(50% - 350px);
}

#uiContainer .gameStartBox {
height:24px;
border:1px solid black;

}
#uiContainer .gameStartBox .yourNameInput{
/*font-family: 'Russo One';*/
font-family: Impact, Charcoal, sans-serif;
font-size:17px;
background:white;
height:100%;
width: 38%;
text-indent: 10px;
padding:0px;
border:none;
float:left;
}

#uiContainer .gameStartBox .showFlag{
  background:#e6e6e6;
  height:100%;
  width: calc(7% - 1px);
  text-indent: 10px;
  padding:0px;
  border:none;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left:1px solid #8f8f8f;
  }

  #uiContainer .gameStartBox .showFlag img{
    width:45%;
    margin:0;
    padding:0;
    margin-left: 10%;
    }

    #uiContainer .gameStartBox .showFlag input{
     width:35%;
     margin:0;
     padding:0;
     border:none;
     margin-left:5%;
      }

#uiContainer .gameStartBox .selectServer{
  /*font-family: 'Russo One';*/
  font-family: Impact, Charcoal, sans-serif;
  font-size:15px;
  background:white;
  height:100%;
  width: calc(30% - 1px);
  text-indent: 10px;
  padding:0px;
  border:none;
  float:left;
  border-left:1px solid #8f8f8f;
  margin:0;
  }

#uiContainer .gameStartBox .btnStartGame{
/*font-family: 'Russo One';*/
font-family: Impact, Charcoal, sans-serif;
font-size:20px;
background:#e57a45;
height:100%;
padding:0px;
width:calc(25% + 1px);
border:none;
float:left;
height:24px;
position:absolute;
}



#uiContainer .name{
/*font-family: 'Russo One';*/
height:75px;

}
 
#uiContainer .footer-right {
font-size:16px;
position:fixed;
right:0px;
bottom:2px;
z-index:1001;
text-align:right;
}
  
#uiContainer .footer-right span{
margin-right:2px;
margin-left:2px;
}

#uiContainer .footer-left {
font-size:13px;
position:fixed;
left:3px;
bottom:3px;
z-index:1;
background: rgba(255,255,255,0.4);
  border-radius: 3px;
  border: 1px solid black;
  padding: 2px;
text-align:center;
}

#uiContainer .footer-left span{
margin-left:3px;
}

#uiContainer .overlay{
  background:black;
  opacity:0.7;
  width:100%;
  height:100%;
  position:fixed;
  left:0;
  top:0;
  display:none;
  z-index:1500;
}
  
#uiContainer .loginRegisterBox{
display: inline-block;
background:white;
border-radius:6px;
padding:6px;
font-size:13px;
position:fixed;
left:50%;
top:15%;
transform: translate(-50%, 0%);
display:none;
z-index:1501;
}

#uiContainer .loginRegisterBox input[type="text"],input[type="password"]{
float:right;
border:1px black solid;
width:8vw;
margin-left:0.1vw;
}	

#shop{
  display: inline-block;
  background:white;
  border-radius:6px;
  padding:6px;
  font-size:13px;
  position:fixed;
  left:50%;
  top:1%;
  transform: translate(-50%, 0%);
  display:none;
  z-index:2501;
  width:800px;
  max-width: 95%;
  max-height: calc(98% - 12px);
  overflow-y: auto;
}
#shop .close{
  position:absolute;
  top:4px;
  right:6px;
  font-size:20px;
  cursor: pointer;
}

#shop .balance{
  font-size:17px;
}

#shop .getInfo{
  font-size:11px;
}

#shop .shop-title{
font-size:32px;
}

#shop .tablinkshop{
  background-color:#8e177a;
    border:1px solid #000000;
    border-radius:0.2vw;
    font-size:22px;
    color:white;
    cursor:pointer;
    padding:1px 10px;
    margin-top:4px;
}

#shop .tablinkshop.active{
  background-color:#c523aa;

}

#shop .tabcontentshop{

  display: none;
}


#shop .offer{
  position: relative;
  border:#a682ff 2px solid;
  border-radius:3px;
  width:calc(25% - 4px - 2px);
  margin:2px 1px 0px;
  background:#9c41ff;
  float:left;
  padding-bottom:3px;
  user-select: none;
  height:156px;
  }


#shop .offer.skinSelected{
  background:#24d441;
  border-color:#1e9e33;
}

#shop .premium{
    border:#ff8181 2px solid;
    background:#ff4f46;
  }

#shop .skin{
background: #008fb3;
border-color: #007896;
}

#shop .text-owned{
  height:20px;
  padding-top: 8px;
  color:#00ff00;
  text-transform: uppercase;
}

#shop .offer .offer-title{
  font-size:15px;
  color:white;
  width:100%;
  text-transform:capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#shop .offer .offer-title img{
  height:16px;
  position: relative;
  top:2px;
  margin-left:2px;
}

#shop .offer .buy-gems{
  background-color:#009fda;
    border:1px solid #000000;
    border-radius:0.2vw;
    font-size:16px;
    color:white;
    cursor:pointer;
    padding:1px 10px;
    margin-top:4px;
}

#shop .offer .buy-premium{
  background-color:#dc0000;
    border:1px solid #000000;
    border-radius:0.2vw;
    font-size:16px;
    color:white;
    cursor:pointer;
    padding:1px 10px;
    margin-top:4px;
    height:24px;
}

#shop .offer .buy-premium:disabled{
  background-color:grey;
  opacity:0.4;
  cursor: not-allowed;
} 

#shop .offer .buy-premium img{
  height:16px;
  position: relative;
  top:2px;
  margin-left:2px;
}


#shop .offer .offer-image{  
height:100px;
}


#shop .tab-title{
  margin-top:10px;
  font-size:25px;
  text-transform:capitalize;
  clear:both;
}


.buy-start-points{
  background-color:#dc0000;
    border:1px solid #000000;
    border-radius:0.2vw;
    font-size:16px;
    color:white;
    cursor:pointer;
    padding:1px 10px;
    margin-top:4px;
    height:24px;
}

.buy-start-points img{
  height:16px;
  position: relative;
  top:2px;
  margin-left:2px;
}

.buy-start-points:disabled{
  background-color:grey;
  opacity:0.4;
  cursor: not-allowed;
} 

#initJoin{
display: inline-block;
background:white;
border-radius:6px;
padding:6px;
font-size:20px;
position:fixed;
left:50%;
top:15%;
transform: translate(-50%, 0%);
display:none;
z-index:1501;
width:500px;
 max-width: 95%;
}

#initJoin .offer{
  border:#c74200 2px solid;
  border-radius:3px;
  width:calc(50% - 4px - 2px);
  margin:0 1px;
  background:#ff5400;
  float:left;
  padding-bottom:3px;
  padding:15px 0px 15px;
  color:white;
  font-size:15px;
  cursor:pointer;
  }

#uiContainer .userBox{
background:white;
border-radius:0.2vw;
padding:2px 6px 10px;
width:calc(100% - 14px);
margin-top:2px;
font-size:14px;
position:relative;
border:1px solid black;
}

  #uiContainer .howToPlay{
background:white;
border-radius:0.2vw;
padding:4px;
margin-top:2px;
font-size:15px;
position:relative;
border:1px solid black;
text-align:center;
}

#uiContainer .quests{
  background:white;
  border-radius:0.2vw;
  padding:3px 4px 3px;
  width:calc(100% - 10px);
  margin-top:2px;
  font-size:14px;
  position:relative;
  border:1px solid black;
  }

 #uiContainer .quests .quest{
    border-right:1px solid #8f8f8f;
    width:calc((100% / 3) + (1px / 3));
    float:left;
    min-height:110px;
    position:relative;
    margin-right:-1px;
  } 

  #uiContainer .quests .onlyPremium{
    opacity:1;
  } 
  

  #uiContainer .quests .quest .timer{
    position: relative;
    top: 26px;
    font-size: 30px;
  } 

  #uiContainer .quests .quest .object-image{
    height:50px;
  } 

#uiContainer .quests .quest .progressBar{
  width:calc(90% - 2px);
  height:15px;
  font-weight:bold;
  border:1px solid black;
  font-size:13px;
  text-align:center;
  margin-bottom:2px;
  }

  @keyframes claimBlink { 
    50% { background-color:#ff4c4c; } 
 }

  #uiContainer .quests .quest .claim{
    background-color:#1488ff;
    border:1px solid #000000;
    border-radius:0.2vw;
    font-size:14px;
    color:white;
    cursor:pointer;
    padding:1px 10px;
    /* animation: claimBlink .8s step-end infinite alternate; */
    
   } 

  #uiContainer .quests .quest .claim:disabled{
    background-color:grey;
    opacity:0.4;
    cursor: not-allowed;
    animation:none;
  } 

#uiContainer .userBox .info{
font-size:15px;
}

#uiContainer .userBox .accountExperienceBar{
width:calc(100% - 2px);
height:15px;
font-weight:bold;
border:1px solid black;
font-size:13px;
text-align:center;
position:relative;
background:#e6e6e6;
}

#uiContainer .userBox .accountExperienceBar .bar{
  width:0%;
  height:100%;
  background:#4caaec;
  position:absolute;
  z-index:0;
  }

#uiContainer .userBox .accountExperienceBar span{
  z-index:1;
  position:relative;
  pointer-events: none;
  }

  #uiContainer .userBox .accountExperienceBar .exp-left{
    z-index:1;
    position:absolute;
    left: 50%;
    transform: translate(-50%,0);
    display: none;
    pointer-events: none;
    }


#uiContainer .loginButton{

background-color:#ffcfcf;
border:1px solid #000000;
border-radius:0.2vw;
font-size:13px;
color:black;
cursor:pointer;
font-family: Impact, Charcoal, sans-serif;
}

#top-left-container{
position:fixed;
left:3px;
top:3px;
width:350px;
}

#changelog{
width:calc(100% - 6px);
max-height:350px;
overflow-y:auto;
font-size:12px;
z-index:5;
background: rgba(255,255,255,0.4);
border:1px solid black;
padding:2px;
line-height:14px;
}

#highscores{
width:calc(100% - 6px);
max-height:550px;
font-size:12px;
z-index:5;
background: white;
border:1px solid black;
padding:2px;
line-height:14px;
margin-top:3px;
overflow: hidden;
}

#shareContainer{
  margin:0 auto;
  text-align:center;
  position:fixed;
  bottom:2px;
  width:100%;
  
}
#loading{
position:fixed;
left:0%;
top:0%;
z-index:1000;
width:100%;
height:100%;
background:#3b5998;
}


#loading .loadingText{
/* position:fixed;
left:50%;
bottom:5%;
transform: translate(-50%, -50%); */
color:white;
font-size:3vh;
z-index:1000;
text-align:center;
margin-top:1vh;
width:100%;
}

#loading .logo{
width:60vh;
margin:0 auto;
position:relative;
left:50%;
transform:translate(-50%,0);
margin-top:1vh;
max-width:90vw;
}

#loading .tip{
  width:45vh;
  height:30vh;
  margin-right:1%;
  display:inline-table;
}

#loading .tip img{
  width:100%;
  height:100%;
  display: block;
}

#loading .tip>.description{
background: white;
font-size: 2.2vh;
white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#loading>.loadingBar{
  width:95%;
  margin:0 auto;
  height:1.5vh;
  font-weight:bold;
  border:1px solid black;
  font-size:13px;
  text-align:center;
  position:relative;
  background:#e6e6e6;
  }
  
  #loading>.loadingBar .bar{
    width:0%;
    height:100%;
    background:#00c300;
    position:absolute;
    z-index:0;
    }
  
  #loading>.loadingBar span{
    z-index:1;
    position:relative;
    }


#kick{
  position:fixed;
  left:0%;
  top:0%;
  z-index:2000;
  width:100%;
  height:100%;
  background:#c54545;
  display:none;
  }
  
#kick .kickText{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  color:white;
  font-size:1.3vw;
  z-index:1000;
  }

#forceFullScreen{
  position:fixed;
  left:0%;
  top:0%;
  z-index:5000;
  width:100%;
  height:100%;
  background:#3b5998;

  }
  
#forceFullScreen .forceFullScreenText{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  color:white;
  font-size:1.3vw;
  z-index:1000;
  }


#adsOwnerMsg {
  position:fixed;
  left:0.5vw;
  top:0.5vw;
  padding:0.5vw;
  border-radius:0.2vw;
  z-index:10000;
  background-color:#ff3434;
  width:25vw;
  font-size:0.8vw;
  display:none;
}


#adsOwnerMsg .title{
  font-size:1.2vw;
}

#adsOwnerMsg .close{
  position:absolute;
  right:0.3vw;
  top:0;
  font-size:1.2vw;
  cursor:pointer;
}

#adsOwnerMsg textarea{
  resize: none;
  width:calc(100% - 0.25vw);
  font-size:0.7vw;
}

#uiContainer .gameplays{
  width:350px;
  border:1px solid black;
  position:fixed;
  right:0;
  top:0;
}



#uiContainer .gameplays .header{
  font-size:12px;
  text-align:center;
  width:100%;
  border-bottom:1px solid grey;
}

 #uiContainer .gameplays .footer{
  font-size:12px;
  text-align:center;
  width:100%;
  background:yellow;
  clear:both;
}

#uiContainer .gameplays .header .close{
  position:absolute;
  right:5px;
  top:0;
  cursor:pointer;
}

#uiContainer .gameplays .content{
  text-align:center;
  width:100%;
  background:white;
}

#uiContainer .gameplays .content .title{
  width:100%;
  font-size:12px;
  color:white;
  background:#ff0000;
  clear:both;

}

#uiContainer .gameplays .content .video{
  width:calc(50% - 0.5px);
  text-align:center;
  line-height:0;
  float:left;
  position:relative;
  opacity:1;
  transition: opacity 1s;
}

  #uiContainer .gameplays .content .video:hover{
  opacity:0.7;
}

 #uiContainer .gameplays .content .video .videoTitle{
width: calc(100% - 4px);
padding: 0 2px;
position: absolute;
bottom: 0;
left: 0;
z-index: 5;
text-align: center;
font-size: 9px;
background: rgba(123,123,123,0.6);
color:white;
height: 11px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height:11px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
}

 #uiContainer .gameplays .content .video .videoViews{

padding: 1px;
padding-right: 2px;
position: absolute;
top: 1px;
left: 1px;
z-index: 5;
text-align: center;
font-size: 9px;
background: #b7b7b7;
height: 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height:9px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif; 
opacity:0.9;
border-radius:3px;
}


#uiContainer .gameplays .content .video img{
  width:100%;
}
  
  
  
#forceLandscape{
position:fixed;
z-index:10000;
width:100%;
height:100%;
background: black;
text-align:center;
display:none;
font-size:10vw;
color:white;
}

#forceLandscape span{
display: block;
}

#forceLandscape i{
font-size:40vh;
margin-top:10vh;
}

#preroll {
position: fixed;
/*left: 50%;
top: 50%;
transform: translate(-50%, -50%);*/
}

#centerDiv{
padding:3px;
display: inline-block;
background:white;
border-radius:3px;
border:1px solid black;
margin-top:20px;


}

#shareBtnFb{
font-size:14px;
text-align:center;
background-color: #3b5998;
  border-radius: 3px;
  color: white;
  padding: 2px 5px 2px;
}


@media screen and (orientation:portrait) {
#forceLandscape{
display:inline;	
}
}  
  
  
  
a{
  text-decoration:none;
  color:black;
}

a:visited{
  text-decoration:none;
  color:black;
}

input {
/*-webkit-appearance: none;
-moz-appearance: none;
appearance: none;*/
border-radius: 0;
}

select {
border-radius: 0;
}


@media (max-width:1135px) { 
#divBottom{
  display:none;
  /*width:468px !important;
  height:60px !important;
  left:calc(50% - 234px) !important;*/
}
}

/*
@media (max-width:860px) { 
#adBottom{
  width:320px !important;
  height:50px !important;
  left:calc(50% - 160px) !important;
}
}

@media (max-width:710px) { 
#adBottom{
  display:none;
}
}
*/

@media (max-width:1450px) { 
  #uiContainer .gameplays{
  width:258px;
  }
  
#top-left-container{
  width:250px;
}
}

@media (max-height:750px) { 
#uiContainer .gameplays{
width:280px;
}
}

@media (max-width:1270px) { 
#top-left-container{
display:none;
}
.gameplays{
  display:none;
  }
}

@media (max-width:700px) { 
.centerUi{
 left:0 !important;
 width:100% !important;
}
}

@media (max-height:680px) { 
#changelog{
max-height:300px;
  }
}

@media (max-height:628px) { 
#changelog{
max-height:165px;
  }
}

@media (max-height:490px) { 
#changelog{
  display:none;
  }
}

@media (max-height:480px) { 
.footer-right{
display:none;
}  
}

@media (max-height:655px) { 

  #newGame{
display:none;
}

}

@media (max-width:1220px) { 

  #newGame{
display:none;
}

}


@media (max-height:804px) { 
.centerUi{
top:2px !important;
}

#uiContainer .name{
  height:20px;
  }

#getonmobile{
display:none;
}
}



@media (max-height:708px) { 
#divBottom{
display:none;
}
}

@media (max-height:808px) and (max-width:1050px) { 
.footer-left{
display:none;
}
}

@media (max-height:620px) and (max-width:1110px) { 
.footer-right{
display:none;
}
}


::-webkit-scrollbar {
width: 8px;
background:rgb(59, 59, 59);
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
  background: #e57a45; 

}



.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
text-align:center;
}

.tab button {
outline: none;
cursor: pointer;
padding: 3px 5px;
transition: 0.3s;
font-size: 12px;
border: 1px solid #dcdcdc;
background-color: #eaeaea;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 3px 6px;
border: 1px solid #ccc;
border-top: none;
text-align:center;
font-size:12px;
}
.tabcontent img{
  height:12px;
  position: relative;
}



@keyframes blinkBorder { 
   50% { border-color: #9c41ff; } 
}
.blinkBorder{ /*or other element you want*/
    animation: blinkBorder .4s step-end infinite alternate;
}

@keyframes blinkText { 
   50% { color: #ffbe00; } 
}
.blinkText{ /*or other element you want*/
    animation: blinkText .4s step-end infinite alternate;
}


.emotesMenu{
  position: absolute;
  top:calc(50% - 100px);
  left:calc(50% - 24px);
  z-index: 100;
  pointer-events: none;
}


.wheel-button {
  position: relative;
}

.wheel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px; /* this will determine the diameter of the circle  */
  height: 200px; /* this will determine the diameter of the circle  */
  visibility: hidden;
  position: relative;
  display: none;
}

.wheel li {
  overflow: hidden;
  float:left;
  cursor:pointer;
  pointer-events: auto;
  border-radius: 50px;
  text-align: center;
  width: 40px;
  height: 40px;

  background: black;

  border: 1px solid black;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.5);
  color: white;
  -moz-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  opacity:0;
  font-family: monospace, color-emoji;
}

.wheel li a {
  display: block;
}

.wheel li a>img{
  margin-top:15%;
  width:70%;
  height: 70%;
}
  
.wheel-button, .wheel-button:visited {
  background: transparent; 
  padding: 10px 11px;
  text-align: center;
  border-radius: 50px;
  width: 20px;
  height: 20px;
  color: white;
  display: block;
  margin: 80px auto 20px;
  cursor:pointer;
  pointer-events: none;
  opacity:0;
}

.wheel-button:hover{ 
  color: white;
}

.wheel-button i, .wheel li i {
  position: relative;
  width: 20px;
  height: 20px;
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  display: block;
  line-height: 140%;
}

.wheel-button.active i{
  transform: rotate(135deg);
  -ms-transform: rotate(135deg); /* IE 9 */
  -webkit-transform: rotate(135deg); /* Safari and Chrome */
}

.wheel li a, .wheel li a:visited{
  font-size:28px;
  width:100%;
  height:100%;

}

.wheel li:hover{
  background: rgba(0,0,0,0.8);
}






#info-new-name{
position: fixed;
left:50%;
top:50%;
transform: translate(-50%,-50%);
max-width:420px;
z-index:2000;
background: white;
border:1px solid black;
border-radius: 5px;
padding:5px;
text-align: center;
font-size: 13px;
max-height: 100vh;
overflow-y:scroll;
}

#info-new-name button{
  border:1px solid black;
  border-radius: 2px;
  font-size: 200%;
  margin:10px 10px;
  font-weight: bold;
  cursor: pointer;
}
#info-new-name .accept{
  background:#45ec45
}

#info-new-name .reject{
  background:#ff5d5d;
  font-size:10px;
}