:root {
  --main-bgcolor: white;
  --xogo-bgcolor:#b4e1ff;
  --titulo-bgcolor: #34344a;
  --titulo-txcolor:#ffffff;
  --btaxuda-bgcolor:#c1ff9b;
  --btaxuda-txcolor:#333333;
  --base-bgcolor:#b4e1ff;
  --cadro-bgcolor:#c39bd3;
  --cadro-txcolor:#333333;
  --enun-bgcolor:#b4e1ff;
  --enun-txcolor:#333333;
  --control-bgcolor: #c1ff9b;
  --botonera-bgcolor:#b4e1ff;
  --botonera-txcolor:#333333;
  --mensaC-bgcolor:#DAF7A6 ;
  --mensaC-txcolor:#333333;
  --mensaN-bgcolor: #DAF7A6 ;
  --mensaN-txcolor:#333333;
  --boton-bgcolor:  #d6eaf8;
  --imaxe2-av:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-right-lines" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle r="18.611015" cy="20.117407" cx="20.117407" style="fill:#0044aa;fill-opacity:1;fill-rule:nonzero;stroke:#333333;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-3v-6h3z"></path><path d="M3 9v6"></path><path d="M6 9v6"></path></svg>');
 --imaxe-av:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 9v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-3v-6h3z"></path><circle r="11" cy="12" cx="12" /> </svg>');
}
  .xogo{	
  position:relative;
	 margin: auto;
  width:820px;
  height:490px;	
  border:4px solid #333333;
 background-color:var(--fondo-bgcolor);
    flex-wrap: wrap ;
	 resize: horizontal;
  overflow: auto;
  border-radius:10px;
  min-width:460px;


}
.tapa{
  position: absolute;
  top: 38px;
  left: 0;
  bottom:0;
  width:100%;
	background-color:white;
	z-index:1000;
text-align:center;
background-image: var(--imaxe-av);
background-size: 30%;                    
    background-repeat:   no-repeat;
    background-position: center center;	
 cursor: pointer;
}

.informe{
  position: absolute;
  top: 78px;
  left: 0;
  bottom:0;
      right: 0;
	background-color:white;
	z-index:999;
display:none;
opacity:0;
transition: all 1s ease-in-out;
 overflow: scroll;
}
.axuda{
  position: absolute;
  top:40px;
  left: 0;
    right: 0;
      bottom:0;
	background-color:white;
	z-index:1002;
display:none;
opacity:0;
transition: all 1s ease-in-out;
}
.vis{
display:block;
opacity:1;
}
.base {

  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;  
  padding: 0;
  margin: 0;
  list-style: none;
    width:100%;
  height:200px;
  flex-wrap: wrap;
  overflow: visible;
margin-top:10px;  
  background:var(--base-bgcolor);
  z-index:989;
}
.cadro{
position:relative;
  margin: 1px;
  color: white;
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
  flex-grow:1;
  padding:10px;
    display: flex;
  justify-content: center;
  align-items: center;
border-radius: 5px;
opacity:1;
transition: opacity 1s;
 cursor: pointer;
 border:0px;	
 background-color:var(--cadro-bgcolor);
  color:var(--cadro-txcolor);
  overflow: hidden;
  box-shadow: inset 0 -5px 1px #5a5e11;
}

.base-2 {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  width:100%;
  height:300px;
  flex-wrap: wrap;
  ----overflow: scroll;

   
}

.cadro-2{
	  flex-basis: 30%;
 background: tomato;
   width:150px;
  margin: 1px;
  color: white;
  font-weight: bold;
  font-size: 1.4em;
  text-align: center;
  padding:10px;
    display: flex;
  justify-content: center;
  align-items: center;
border-radius: 5px;
flex-grow: 1;
}
.superior{
position:relative;
	 background: var(--titulo-bgcolor);
	 	 color: var(--titulo-txcolor);
	 height:32px;
	   font-weight: bold;
	   text-indent:10px;
	   padding-top:5px;
}
.titulo{
	font-size:1.2em;
	 	 color: var(--titulo-txcolor);
	   font-weight: bold;
	   text-indent:10px;
}
.btaxuda{
	font-size:1.6em;
	 	 background: var(--btaxuda-bgcolor);
	 	 color: var(--btaxuda-txcolor);
	   font-weight: bold;
	   position:absolute;
right:5px;
top:5px;
width:28px;
height:28px;
text-align:center;
border-radius:50%;
line-height:0.8em;
border:0px;
 cursor: pointer;
}
.botonera{
display: flex;
	font-size:1.2em;
	 height:36px;
	 border-top:2px solid #333333;
	 	 border-bottom:2px solid #333333;
	 	  background-color:var(--botonera-bgcolor);
  color:var(--botonera-txcolor);
justify-content: flex-end;
}

.boton{
width:90px;
	height:33px;
	border:1px solid #333333;
	margin-top:1px;
	 cursor: pointer;
	 	 	 background: var(--boton-bgcolor);
	 	 color: var(--boton-txcolor);
	 	 margin-right:2px;
}

.enun{
display: flex;

  align-items: center;
	position:relative;
	width:98%;
	height:158px;
 background-color:var(--enun-bgcolor);
  color:var(--enun-txcolor);
 	margin-top:10px;
	padding-left:2%;
	font-size:1.6em;
	line-height:1em;
	border-top: 2px solid #333333;

}
.control{
	width:100%;
	height:30px;
	 background-color:var(--control-bgcolor);
	  border-top:2px solid #333333;	
	  display: flex;
	  justify-content:  flex-end;
}
.mensa{
	position:absolute;
	top:80px;
 transition: opacity .3s;
display: none;
opacity:0;
  width: 100%;
  height:220px;
font-size:8em;
  z-index:990;
text-align:center;
}
.mensa > span{
font-size:40px;
padding:20px;
}
.correcto{
	background: var(--mensaC-bgcolor);
    color: var(--mensaC-txcolor);

}

.nocorrecto{
	background: var(--mensaN-bgcolor);
    color: var(--mensaN-txcolor);
}

.ben{
 ----background-color:#c39bd3;	
 ----color:#c39bd3;
----background-color:#ffffff;	
----color:#ffffff;
opacity:0.4;
cursor: not-allowed;

}
.visible{
display: block;
opacity: 1;
}
.novisible{
  opacity: 0;
}
.desactivado{
  display:none;	
}


.avanza{
	position:absolute;
		width:90px;
	height:90px;
	right:5px;
	border-radius:50%;
	bottom:5px;
	background-image: var(--imaxe-av);
background-size: 90%;                      
    background-repeat:   no-repeat;
    background-position: center center;
    	border:0px solid #333333;
	 cursor: pointer;
	 font-size:16px;
    }
.mensaxefinal{
  position: absolute;
  top: 80px;
  left: 0;
  bottom:0;
  right:0;
	background-color:white;
	z-index:992;
padding:10px;
display:none;
opacity:1;
}

.cadro span {
  position: absolute;
  background: var(--mensaC-bgcolor);
  transform: translate(-50%,-50%);
  pointer-events: none;
  border-radius: 50%;
animation: efecto 1s linear;
  transition: 1s;
  font-size:3.4em;

}
.cadro:focus{
border:2px solid blue;
}

@keyframes efecto {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
    50% {
        width: 100px;
    height: 100px;
    opacity: 1;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}
input[type="checkbox"].swit{

	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	width: 30px;
	height: 30px;


	position: relative;
	cursor: pointer;
	outline: none;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;

  }
  
  input[type="checkbox"].swit:checked{
	---background: #0ebeff;
  }
  
  input[type="checkbox"].swit:after{
	position: absolute;
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
	        box-shadow: 0 0 .25em rgba(0,0,0,.3);
	-webkit-transform: scale(.7);
	        transform: scale(.7);
	left: 0;
	top:0;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
  }
  
  input[type="checkbox"].swit:checked:after{
	---left: calc(100% - 1.5em);
	background: #333333;
  }

.activo{
background: #DAF7A6;
color:#333333;
}
.full{
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-aspect-ratio" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/>  <path d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M7 12v-3h3" />  <path d="M17 12v3h-3" />');
            
    background-repeat:   no-repeat;
    background-position: center center;	
</svg>
}
.ancho{
width:96%;
}
.clletra{
position:absolute;
left:5px;
top:5px;
font-size:12px;
width:16px;
height:16px;
background-color:#ffffff;
line-height:14px;
text-align:center;
border-radius:50%;
}
.infBase{
list-style-type: none;
width:90%;
font-size:1.2em;
}
.infPal{
font-weight: bold;
}
.infText
{
border-bottom:2px solid #aaaaaa;
margin-bottom:10px;
}