#mapContainer{
  position: fixed;
  top:0px;
  left:0px;
  
	width: 100%;
	height: 100%; 
  
  overflow:hidden; 
}
#see{
  position absolute;
	width: 5000px;
	height: 5000px; 
	background-image:url("/img/map/PNG/rpgTile029.png");
  background-repeat: repeat; 
  background-position: center; 
}
#mapTable{ 
  position: absolute;
	width: 4000px;
	height: 4000px;
  border-collapse: collapse;
  
  background-image: url("/img/map/PNG/rpgTile013.png"),
                    url("/img/map/PNG/rpgTile014.png"),
                    url("/img/map/PNG/rpgTile032.png"),
                    url("/img/map/PNG/rpgTile031.png"),                        
                    url("/img/map/PNG/rpgTile045.png"),
                    url("/img/map/PNG/rpgTile028.png"),
                    url("/img/map/PNG/rpgTile011.png"),
                    url("/img/map/PNG/rpgTile030.png"),
                    url("/img/map/PNG/rpgTile040.png"); 
    
  background-position: left top,right top,right bottom,left bottom,top center,right center,bottom center,left center,center; 
                     
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-y,repeat-x,repeat-y,repeat;
 
      
  Top:500px;
  left:500px;
}
#mapTable img{
	max-width: 100%;
	max-height: 100%;
}
#mapTable td{
  border: 1px solid black;
  padding: 0px;
}   
#mapTable tr:first-child td {
  border-top: 0;
}
#mapTable tr:last-child td {
  border-bottom: 0;
}
#mapTable tr td:first-child,
#mapTable tr th:first-child {
  border-left: 0;
}
#mapTable tr td:last-child,
#mapTable tr th:last-child {
  border-right: 0;
}

.mapBox1{
	background-color: rgba(255,255,255,0);
}
.mapBox3{
	background-color: rgba(255,255,255,0);
}    
.mapBox4{
	background-color: rgba(255,255,255,0);
}
.mouseOver:hover{
  background-color: rgba(255,255,255,0.4);
  filter: brightness(1.3);
}

#controlPanel{
  position:fixed;
  width:450px;
  right:0px;

  margin:0px;
  padding:2px;
}
.ControlPanelElement{
  margin-top:10px;
  padding:5px;
  margin-right:-10px;
  background: rgba(60,60,60,0.4);
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;   
}
#playerStats {
  pointer-events: visible;
  
  margin:2px;
  margin-right:-10px;
  margin-top:-10px;
  padding:5px;
  
  color: black;
  font-weight: bold;
  font-size:1.2em; 
  text-shadow: 1px 1px 1px rgba(255,255,255,0.25);  
  
  z-index:2;

}
.panel{
  padding:5px;
}
#base {
  pointer-events: visible;

  margin:-5px;
  margin-top:2px;
  padding:5px;
  padding-right:10px;
  
  z-index:3;
} 
#whoList {
   max-height:50vh;
   overflow:auto;
}
#whoList::-webkit-scrollbar-track{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.2);
}
#whoList::-webkit-scrollbar{
	width: 8px;
}
#whoList::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.4);
}


.baseBox{
	padding: 2px;
  margin: 2px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;      
	background-color: rgba(255,255,255,0.8);	
}

#cellInfo{
  position:fixed;
  width:400px;
  
  background: rgba(200,200,200,0.8);
  border: 2px dashed transparent;
  box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.25);
  border-radius: 7px;
  -webkit-border-radius: 4px;  
  z-index:2;
  
  pointer-events: visible;
  display:none;
}
#timer{
  padding:5px;
  font-size:1.4em; 
  border-radius: 7px;
  -webkit-border-radius: 7px;  
  background-color: rgba(255,255,255,0.8);   
}

.control{
  pointer-events: visible;  
  position:fixed;
  float: left; 
  
  margin:2px;
  margin-left:-13px;
  margin-top:-13px;
  padding:5px;
  
  z-index:2;
  
  color: black;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.25);

  background: rgba(60,60,60,0.4);
  border: 2px dashed transparent;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  border-radius: 7px;
  -webkit-border-radius: 7px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;  
}
#shortcutButton{ 
  padding:5px;
  font-size:1.4em; 
  border-radius: 7px;
  -webkit-border-radius: 7px;
  background-color: rgba(255,255,255,0.8);  
}
#shortcutButton:hover{ 
  background-color: rgba(255,255,255,0.4);  
}
#gameLeaderBoard{
  margin-top:2px;
  padding:10px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  background-color: rgba(255,255,255,0.8);    
}

.chatBox{
margin-left:50px;
}
#chat{
  position: fixed;
  width:40vw;
  bottom:0px;
  left:0px;
  z-index:2;
  pointer-events: visible;  
}
#chatButtons{
  width:auto;
  padding:3px;
  margin-bottom:-2px;
  background: rgba(60,60,60,0.4);
  border: 2px dashed transparent;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  border-top-right-radius: 7px;
  -webkit-border-top-right-radius: 7px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;   
}
.msg{
  margin-left:10px;
  z-index:2; 
}
#chatBox{
  margin:2px;
  margin-left:-10px;
  margin-bottom:-3px;
  
  z-index:2;
  
  color: black;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.25);

  background: rgba(60,60,60,0.4);
  border: 2px dashed transparent;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  border-top-right-radius: 7px;
  -webkit-border-top-right-radius: 7px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;    
}
.messages{
	padding: 1px;
  margin:5px;
  margin-left: 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;      
	background-color: rgba(255,255,255,0.8);	

    height:30vh;
    word-wrap: break-word;
    overflow-y: auto;
}
.messages::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.2);
}

.messages::-webkit-scrollbar
{
	width: 8px;
}

.messages::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.4);
}
#chatInputContainer{
  padding:3px;
  margin-right:1px;
  margin-top:-1px;
  background: rgba(60,60,60,0.4);
  border: 2px dashed transparent;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.15);
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;   
}

#notify{
  position: fixed;
  width:40vw;
  bottom: calc(100vh - 80px);
  right:30vw;
  left:30vw;
  padding:5px;
  z-index:2;
  pointer-events: visible;
}
#hack{
  color:white;
  background: #c10000;
  
  width:100%;
  height:100%;
}

.window{
  position:fixed;
  top:10%;
  left:10%;
  width:80%;
  height:80%;
  background-color: rgba(255,255,255,0.8);
  border: 2px solid black;
  z-index:100;
  pointer-events: visible;
}
.helpKey{
    background:rgba(0,0,0,0.4);
    padding:2px;
    margin:2px;
}

.popover-content {
    background:rgba(0,0,0,0);
    width:250px;
    height:auto;
    padding: 0px;
    margin: 0px;
    border:0px;
}
.popover {
    background:rgba(0,0,0,0);
    width:200px;
    height:auto;
    padding: 0px;
    margin: 0px;
    border:0px;
}

#skinList::-webkit-scrollbar{
	width: 8px;
}
#skinList::-webkit-scrollbar-track{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.2);
}
#skinList::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.4);
}

#backList::-webkit-scrollbar{
	width: 8px;
}
#backList::-webkit-scrollbar-track{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.2);
}
#backList::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background-color: rgba(0,0,0,0.4);
}


.legendarySkin:hover {
  -webkit-animation: orange 1.5s ease-in-out infinite alternate;
  -moz-animation: orange 1.5s ease-in-out infinite alternate;
  animation: orange 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes orange {
  from {box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #FF9900, 0 0 14px #FF9900, 0 0 16px #FF9900, 0 0 20px #FF9900, 0 0 30px #FF9900;}
  to {box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #FF9900, 0 0 7px #FF9900, 0 0 8px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;}
}
@-moz-keyframes orange {
  from {box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #FF9900, 0 0 14px #FF9900, 0 0 16px #FF9900, 0 0 20px #FF9900, 0 0 30px #FF9900;}
  to {box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #FF9900, 0 0 7px #FF9900, 0 0 8px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;}
}
@keyframes orange {
  from {box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #FF9900, 0 0 14px #FF9900, 0 0 16px #FF9900, 0 0 20px #FF9900, 0 0 30px #FF9900;}
  to {box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #FF9900, 0 0 7px #FF9900, 0 0 8px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;}
}

.epicSkin:hover {
  -webkit-animation: purple 1.5s ease-in-out infinite alternate;
  -moz-animation: purple 1.5s ease-in-out infinite alternate;
  animation: purple 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes purple {
  from {box-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #ff00de, 0 0 3px #ff00de, 0 0 4px #ff00de, 0 0 5px #ff00de, 0 0 7px #ff00de;}
  to {box-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 2px #ff00de, 0 0 2px #ff00de, 0 0 3px #ff00de;}
}
@-moz-keyframes purple {
  from {box-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #ff00de, 0 0 3px #ff00de, 0 0 4px #ff00de, 0 0 5px #ff00de, 0 0 7px #ff00de;}
  to {box-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 2px #ff00de, 0 0 2px #ff00de, 0 0 3px #ff00de;}
}
@keyframes purple {
  from {box-shadow: 0 0 0px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #ff00de, 0 0 3px #ff00de, 0 0 4px #ff00de, 0 0 5px #ff00de, 0 0 7px #ff00de;}
  to {box-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 1px #ff00de, 0 0 1px #ff00de, 0 0 2px #ff00de, 0 0 2px #ff00de, 0 0 3px #ff00de;}
}