wbody { overflow-x:hidden; overflow-y:hidden; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; }
body { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; overflow-y:hidden; overflow-x:hidden; font-family: arial;
transform: scale(1);
}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none; }
*{margin: 0; padding: 0;}
:root{ --magico: 1; }


#nombres{
height: 16px; width: 100%; background-color: #333;
margin-left: auto; margin-right: auto;
filter: alpha(opacity=80);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.8;
}

.globo{
width:80px; height: 0px; min-height: 10px; max-height: 80px;
position: absolute;
left: -20px; top: -190px; 
bottom: 0;
border: 1px solid #000;
color: #000;
word-wrap: break-word;
padding: 5px;
display: block;
overflow: hidden;
text-shadow: none;
border-radius: 11px;
background: #FFF;
filter: alpha(opacity=80);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.8;
zoom: 1;
font-weight: bold;
font-size: 14px;
transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
}

input{ background: #EBE18C; }

.mipj{
width: 50px; height: 100px; background-color: none;
background-image: url('imgs/matrizpj.png');
background-size: 1600px 200px;
position: absolute;
top:220px; z-index:8;
}
.mipj2{
width: 50px; height: 100px; background-color: none;
background-image: url('imgs/matrizpj.png');
background-size: 1600px 200px;
position: absolute;
top:220px; z-index:1;
}

#contenedor{
width:100%;
max-width: 350px;
border: 0px solid red;
margin-left: auto;
margin-right: auto;
margin-top:0px;

}

#log{
width: 350px; height: 470px; background-color: #868CDB;
position: relative; 
//margin-left: 360px; margin-top:-470px;
z-index:4;
transition: transform 0s, margin-left 0.2s, margin-top 0.2s;
-webkit-transition: -webkit-transform 0s, margin-left 0.2s, margin-top 0.2s;
margin-left: auto;
margin-right: auto;
border: 0px solid #7B76AE;
margin-top:-299vh;
height: 99vh;
}

#cargando{
width: 350px; height: 470px; background-color: #242947;
position: absolute; 
z-index:5;
transition: transform 0s, margin-left 0.2s, margin-top 0.2s;
-webkit-transition: -webkit-transform 0s, margin-left 0.2s, margin-top 0.2s;
margin-left: auto;
margin-right: auto;
border: 0px solid #7B76AE;
top:0;
height: 99vh;
left: 0;
right: 0;
}

#paisaje{ 
width: 350px; height: 470px; background: rgb(100,55,80); max-width: 99%; position: relative;
background-image: url('imgs/paisaje.png');
background-size: 350px 470px;
z-index:3;

}

#debug{
color:#FFF; font-size: 14px; font-family: arial; width: 447px; max-width: 99%;
word-wrap: break-word; border: 1px solid grey; 
margin-left: 1px;
height:100px;
overflow: auto;
background: #000;
}

.block{ width:50px; height: 100px; border: 0px solid red; top:220px; position: absolute; z-index:1000;}
.block:hover{ cursor:pointer; }
.blockx:hover{ background-color:rgba(64, 90, 106, 0.5); cursor:pointer; }


.chatBox{
width:345px; height: 25px;
font-family: Verdana; font-size: 16px;
max-width: 99%;
}

.userBox{
height: 47px; 
font-family: Verdana; font-size: 23px;
width: 85%;
margin-left: auto;
margin-right: auto;
}

.actuar{
color: red;
font-style: italic;
}

.pjname{
color: #CAFFEA; top: 100px; font-size: 10px; font-family: verdana; position: absolute;
text-shadow: 1px 2px 5px #000,-2px -2px 5px #000;
width: 50px; text-align: center;
}

.pjname2{
color: #FFF; top: 100px; font-size: 10px; font-family: verdana; position: absolute;
text-shadow: 2px 2px 10px #000,-2px -2px 10px #000;
width: 50px; text-align: center;
}

#llama {
background: none; height: 50px; width: 30px; left: 215px; top: 230px; position: absolute;
background-image: url('imgs/llama.png'); background-position: 0px 0px;
z-index:0;
}

#botonera_panel{
width: 100%; border: 0px solid red;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}

.boton{
width: 30px; height: 30px; background-color: #EBE18C; border-radius: 10px; border: 1px solid #555;
cursor:pointer; margin-left: 5px; margin-right: 5px; margin-top: 15px; margin-bottom: 5px;
text-align: center; font-size: 16px; font-family: arial;
}

.boton:hover{
background-color: #CDBE01;
}

.botonElegir{
width: 50px; height: 35px; background-color: #EBE18C; border-radius: 10px; border: 1px solid #555;
cursor:pointer; 
text-align: center; font-size: 25px; font-family: arial; font-weight: bold;
}

.botonElegir:hover{
background-color: #CDBE01;
}

.botonElegirP{
width: 30px; height: 30px; background-color: #EBE18C; border-radius: 10px; border: 1px solid #555;
cursor:pointer; 
text-align: center; font-size: 25px; font-family: arial; font-weight: bold;
}

.botonElegirP:hover{
background-color: #CDBE01;
}

.botonErase{
width: 50px; height: 35px; background-color: #EBE18C; border-radius: 10px; border: 1px solid #555;
cursor:pointer; 
text-align: center; font-size: 25px; font-family: arial; font-weight: bold;

background-image: url('imgs/matrizpjvector.png');
background-size: 700px 700px;
background-position: -40px -635px;
}

.botonErase:hover{
background-color: #CDBE01;
}

.cabezagenerica{

background-image: url('imgs/matrizpjvector.png');
background-size: 700px 700px;
width:38px; height: 33.8px; background-position: -5px -635px;
border: 0px solid grey;
}


.selector{
width: 85%;
height: 50px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
text-align: center;
background: #EBE18C;
}

.selector2{
width: 85%;
height: 30px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
text-align: center;
background: #EBE18C;
}

#panel_chat{
margin-top:265px;
}

#cookiesForm{
margin-left: auto; margin-right: auto; width: 90%; border: 0px solid white;
text-align: center; padding: 10px;
}