@font-face {
  font-family: 'fontawesome';
  src: url('/css/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
*{
	font-size: 1em;
	font-family: Arial;
}
html, body{
    height: 100%;
    max-width: 100%;
    min-width: 430px;
    overflow: hidden;
}
body{
    background: #f5f5f5;
    margin: 0;
}
*{
     transition: filter 0s !important;
}
button{
    color: #353535;
    padding: 0;
}
.acceso button, .acceso button:hover, .acceso button:active, .acceso button:focus, .acceso button:visited{
    background: #fff;
    border: 1px solid #dcdcdc;
}
.pagina button, .pagina button:hover, .pagina button:active, .pagina button:focus, .pagina button:visited{
    background: none;
    border: none;
}
.acceso{
	text-align: center;
	margin: 0;
}
.acceso .error{
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0 0 10px #777;
    background: #fff;
    color: red;
    font-size: 1.2em;
}
.acceso .aviso{
	top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0 0 10px #777;
    background: #fff;
    color: green;
    font-size: 1.2em;
}
.acceso form.test{
    width: 90%;
    cursor: pointer;
}
.acceso form{
    width: 44%;
    margin: 1%;
    text-align: center;
    display: inline-block;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px #777;
    box-sizing: border-box;
}
@media (max-width: 800px) {
    .acceso form{
        width: 90%;
    }
}
.acceso input, .acceso button{
	margin: 5px 0;
	padding: 5px;
	width: 100%;
    height: 40px;
	box-sizing: border-box;
    cursor: pointer;
}
.aviso{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(119, 119, 119, 0.5);
    z-index: 1000;
}
.aviso .contenido{
    width: 400px;
    margin: auto;
    text-align: center;
    padding: 25px 50px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px #777;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-top: 1%;
    font-size: 1.4em;
}
.aviso.mostrar{
    display: block;
}
#avisoTemp{
    transition: 0.5s all;
    position: fixed;
    text-align: center;
    color: #fff;
    background: #000;
    width: 265px;
    padding: 5px;
    left: 0;
    right: 0;
    bottom: -40px;
    margin: auto;
    border-radius: 10px;
    opacity: 0.7;
    z-index: 100;
}
#avisoTemp.mostrar{
    bottom: 5px;
}
.confirmar{
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(119, 119, 119, 0.5);
    z-index: 100;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}
.confirmar label.etq2{
    font-size: 0.8em;
}
.confirmar .contenido,
.nuevo .contenido{
    position: relative;
    width: max-content;
    min-width: 800px;
    max-width: 95%;
    max-height: 95%;
    overflow-y: auto;
    margin: auto;
    padding: 25px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px #777;
    margin-top: 1%;
    box-sizing: border-box;
}
.nuevo .contenido{
    padding: 35px 25px 25px 25px;
}
.nuevo .contenido .fontHistory{
    position: absolute;
    right: 25px;
    text-decoration: none;
    color: #000;
    top: 15px;
}
.confirmar .contenido{
    text-align: center;
    font-size: 1.2em;
}
.confirmar.mostrar{
    display: block;
}
.confirmar label{
    display: block;
}
.confirmar button, .nuevo button{
    margin-top: 10px;
    padding: 5px 8px;
}
.nuevo .botones,
.confirmar .botones{
    height: 40px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    display: block;
}
.nuevo button,
.confirmar button,
.nuevo button label,
.confirmar button label{
    cursor: pointer;
    display: inline-block;
}
.nuevo .botones button:nth-child(1),
.confirmar .botones button:nth-child(1){
    float: left;
}
.nuevo .botones button:nth-child(2),
.confirmar .botones button:nth-child(2){
    float: right;
}
.nuevo{
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(119, 119, 119, 0.5);
    z-index: 1000;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}
.nuevo.nobg{
    background: none;
}
.nuevo .cerrarGrupo{
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 2px 5px;
    cursor: pointer;
}
#inputNuevo{
    margin: 10px 0;
    box-sizing: border-box;
    padding: 8px 30px 5px 5px;
    min-width: 100%;
    max-width: 100%;
    min-height: 50px;
    max-height: 250px;
    height: 50px;
    box-sizing: border-box;
    resize: none;
    overflow: auto;
}
.nuevo.mostrar{
	display: block;
}
.nuevo #avisoNuevo, .nuevo #avisoNuevo label.red{
    position: relative;
    color: red;
}
.nuevo #avisoNuevo label{
    display: block;
    width: calc( 100% - 35px );
    min-height: 30px;
    line-height: 30px;
    color: black;
    word-break: break-word;
}
.nuevo #avisoNuevo label span,
.nuevo #avisoNuevo .small{
    font-size: 0.8em;
    font-style: italic;
    min-height: 20px;
    height: 20px;
    line-height: 20px;
}
.nuevo #avisoNuevo table{
    color: #000;
    margin: auto;
    border-top: 1px solid #ccc;
    width: 90%;
    margin-top: 10px;
    padding-top: 10px;
}
.nuevo #avisoNuevo table tr:nth-child(odd) {
    background: hsla(0, 0%, 60%, 0.1);
}
.nuevo #avisoNuevo table td {
    padding: 1px 5px;
    word-break: break-word;
}
.nuevo #avisoNuevo table td .iconEscuchar{
    background-size: 20px;
    height: 20px;
    width: 20px;
}
.nuevo #avisoNuevo .iconEscuchar.flota{
    position: absolute;
    margin-top: -30px;
    right: 0;
}
.nuevo #avisoNuevo .iconEscuchar.ponerArriba{
    top: -55px;
    margin-top: 0;
}
.nuevo #avisoNuevo .iconEscuchar.no{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
}
.nuevo #avisoNuevo label.menosFrecuentes{
    width: 100%;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}
#botonFocus{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
}
select{
    height: 40px;
    max-width: 150px;
    margin: 3px 0;
    box-sizing: border-box;
    vertical-align: middle;
}
.arriba{
    transition: 0.5s all;
    position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	min-width: 430px;
    height: 50px;
	background: #fff;
	top: 0;
	left: 0;
    box-sizing: border-box;
	box-shadow: 0 0 10px #777;
    z-index: 10;
}
body.invertir .arriba.iframe, .arriba.iframe{
    box-shadow: 0 0 10px blue;
}
.arriba.scroll{
    top: -50px;
}
.comandos{
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 28px;
    border-radius: 0 0 10px 0;
    box-shadow: 0 0 5px #000;
}
.comandos:active{
    box-shadow: inset 0 0 10px #000;
}
.botonNotas{
    font-family: 'fontawesome';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    right: 51px;
    z-index: 99;
    padding: 15px 13px 11px 13px;
    cursor: pointer;
    color: #353535;
}
.botonNotas:before{
    content: "\f044";
    font-size: 24px;
}
#numNotas{
    background: #fff;
    border-radius: 50px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    position: absolute;
    top: 4px;
    left: 2px;
    border: 1px solid;
    cursor: pointer;
}
.botonServidor{
    font-family: 'fontawesome';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
    z-index: 99;
    padding: 13px;
    cursor: pointer;
    color: #353535;
}
.botonServidor.src{
    border-bottom: 2px solid #000;
}
.botonServidor.conectado{
    background-color: rgba(0, 128, 0, 0.3);
}
.pulso{
    animation-name: pulsoColor;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.botonServidor:before{
    content: "\f0E5";
    font-size: 24px;
}

.pulsoVerde{
    animation-name: pulsoVerde;
    animation-duration: 1s;
    animation-iteration-count: 1;
    border-radius: 10px;
}

.pulsoGris{
    animation-name: pulsoGris;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

@keyframes pulsoColor{
  0% {
    background-color: rgba(0, 128, 0, 0.6);
    box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.3);
  }
  50% {
    background-color: rgba(0, 128, 0, 0.3);
    box-shadow: 0 0 0 12px rgba(0, 128, 0, 0);
  }
  100% {
    background-color: rgba(0, 128, 0, 0.3);
    box-shadow: 0 0 0 0 rgba(0, 128, 0, 0);
  }
}

@keyframes pulsoVerde{
  0% {
    box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 128, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 128, 0, 0);
  }
}

@keyframes pulsoGris{
  0% {
    background-color: rgba(126, 126, 126, 0.3);
  }
  50% {
    background-color: rgba(126, 126, 126, 0);
  }
  100% {
    background-color: rgba(126, 126, 126, 0);
  }
}
.capaCambioGrupo{
    display: none;
    position: fixed;
    background: rgba(119, 119, 119, 0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}
.capaCambioGrupo .contenido{
    background: #fff;
    width: max-content;
    max-width: 100%;
    min-width: 430px;
    margin: 2% auto;
    padding: 10px 20px 20px 20px;
    line-height: 40px;
    border-radius: 10px;
    box-shadow: 0 0 20px #777;
    overflow: hidden;
    box-sizing: border-box;
}
.capaCambioGrupo .contenido .cambioGrupo{
    margin-top: 35px;
}
.capaCambioGrupo .cerrar{
    float: right;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    cursor: pointer;
}
.capaCambioGrupo .contenido h2{
    margin-bottom: 0;
}

.login{
    position: relative;
	font-size: 1em;
    display: block;
    margin: 10px 0 0 0;
}
.login button{
    height: auto;
    cursor: pointer;
    height: 30px;
}
.login .botonLogin{
    float: right;
}
.contenedorMenuGrupos{
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.menuGrupos{
    display: none;
    position: absolute;
    min-width: 150px;
    text-align: left;
    background: #fff;
    top: 0px;
    left: 0px;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 0 5px #777;
    overflow: hidden;
    z-index: 5;
}
.opciones{
    display: none;
    position: absolute;
    min-width: 150px;
    text-align: left;
    background: #fff;
    top: 35px;
    right: 5px;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 0 5px #777;
    overflow: hidden;
    z-index: 5;
}
.optLinea{
    display: none;
    position: absolute;
    width: 200px;
    text-align: left;
    background: #fff;
    top: 40px;
    right: 50px;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 0 5px #777;
    overflow: hidden;
    z-index: 5;
}
.submenu{
    display: none;
    overflow: hidden;
    height: 190px;
    background: rgba(236, 236, 236, 0.53);
    box-shadow: inset 0 0 20px #b9b9b9;
}
.menuOcultar{
    display: none;
    position: absolute;
    min-width: 170px;
    text-align: left;
    background: #fff;
    top: 45px;
    right: 0px;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 0 5px #777;
    overflow: hidden;
    z-index: 10;
}
.menuOcultarMultiple{
    display: none;
    position: absolute;
    min-width: 195px;
    text-align: left;
    background: #fff;
    top: 45px;
    right: 0px;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 0 5px #777;
    overflow: hidden;
    z-index: 10;
}
.menuGrupos a,
.menuOcultar a,
.menuOcultarMultiple a,
.opciones a,
.optLinea a,
.capaCambioGrupo a{
    text-decoration: none;
    color: #000;
    line-height: 15px;
    display: block;
    padding: 15px 20px;
}
.optLinea .submenu a{
    padding-left: 40px;
}
.menuGrupos a.disable,
.menuOcultar a.disable,
.menuOcultarMultiple a.disable,
.opciones a.disable,
.optLinea a.disable{
    cursor: default;
    pointer-events: none;
    opacity: 0.4;
}
.menuGrupos .fontIcon:before,
.menuOcultar .fontIcon:before,
.menuOcultarMultiple .fontIcon:before,
.opciones .fontIcon:before,
.optLinea .fontIcon:before{
    width: 20px;
    height: 20px;
    padding-right: 5px;
}
.menuGrupos a label,
.menuOcultar a label,
.menuOcultarMultiple a label,
.opciones a label,
.optLinea a label{
    width: 20px;
    height: 20px;
    background-size: 20px;
}
.menuGrupos hr,
.menuOcultar hr,
.menuOcultarMultiple hr,
.opciones hr,
.optLinea hr,
.capaCambioGrupo hr{
    margin: -2px auto;
    border-width: 0.5px;
    border-style: solid;
    border-color: #ccc;
    width: 80%;
}
.menuGrupos a:hover,
.menuOcultar a:hover,
.menuOcultarMultiple a:hover,
.opciones a:hover,
.optLinea a:hover,
.capaCambioGrupo a:hover{
    background: #b2c3d4;
}
.login .botonLogin:after,
#tabla .optLinea .extender:after{
    content: "\f107";
    padding-left: 5px;
    float: right;
}
.login.mostrar .botonLogin:after,
#tabla .optLinea.mostrarSubmenu .extender:after{
    content: "\f106";
}
.arriba .colores{
    display: none;
    text-decoration: none;
    vertical-align: middle;
    padding-left: 8px;
    border-radius: 5px;
}
#tabla tr .optLinea .colores:has(span){
    cursor: default;
    display: flex;
    justify-content: space-around;
}
#tabla tr .optLinea span, .arriba .colores span{
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50px;
    border: 2px solid #000;
    cursor: pointer;
}
#tabla tr .optLinea span.marcado{
    border: 2px solid #03a300 !important;
}
#tabla tr .optLinea span.white, .arriba .colores span.white{
    background: rgba(255, 255, 255, 90%);
}
#tabla tr .optLinea span.red, .arriba .colores span.red{
    background: rgba(255, 0, 0, 60%);
}
#tabla tr .optLinea span.green, .arriba .colores span.green{
    background: rgba(0, 255, 0, 60%);
}
#tabla tr .optLinea span.blue , .arriba .colores span.blue{
    background: rgba(0, 0, 255, 60%);
}
.arriba .datos{
    position: relative;
    width: 100%;
    min-width: 430px;
    max-width: 1200px;
    height: 50px;
    margin: auto;
    padding: 0 10px;
    box-sizing: border-box;
}
.addWord label{
    cursor: pointer;
}
.addWord label:after{
    content: 'Hide';
}
.addWord.ocultar label:after{
    content: 'Add';
}
.vaciarCampos{
    opacity: 0;
    transition: 0.5s all;
}
.vaciarCampos.mostrar{
    opacity: 0.5;
}
.oculto{
    display: none;
}
input#palabra,
input#significado,
input#ejemplo{
    width: 49.5%;
    box-sizing: border-box;
    padding: 5px;
    height: 40px;
    margin: 3px 0;
}
input#palabra{
    padding-right: 30px;
}
input#significado{
    float: right;
}
input#ejemplo{
	width: 100%;
}
.escucharPalabra{
    opacity: 0;
    margin-left: -30px;
    transition: 0.5s all;
}
.escucharPalabra2{
    position: absolute;
    opacity: 1;
    margin-left: -30px;
    top: 55px;
}
.escucharPalabra.mostrar{
    opacity: 1;
}
.botonTraductor{
    margin-top: 5px;
    display: inline-block;
}
.tuberia{
    display: inline-block;
    height: 35px;
    width: 1px;
    background: #000000;
    vertical-align: middle;
}
.botonesOcultar{
    display: inline-block;
    position: relative;
    margin-top: 5px;
}
.opcionesMultiple{
    display: none;
    position: relative;
    margin-top: 5px;
}
body.check .botonesOcultar{
    display: none;
}
body.check .opcionesMultiple, body.check .arriba .colores{
    display: inline-block;
}
.botonesOcultar.ocultar, .opcionesMultiple.ocultar{
    display: none;
}

.opcionMultiple{
    display: none;
    position: relative;
    margin-top: 5px;
}
body.traductor .botonesOcultar, body.anchoMovil .opcionesMultiple, body.traductor .opcionesMultiple{
    display: none;
}
body.check.anchoMovil:not(.traductor) .opcionMultiple{
    display: inline-block;
}
.arriba button, .botonesOcultar button, .opcionesMultiple button{
	padding: 5px 8px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
}
#contadorPracticar{
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #353535;
    color: #353535;
}
#contadorPracticar.rojo{
    background: rgba(255, 0, 0, 30%);
}
#contadorPracticar.amarillo{
    background: rgba(255, 255, 0, 30%);
}
#contadorPracticar.verde{
    background: rgba(0, 255, 0, 30%);
}
.pestanas{
    display: none;
    position: relative;
    margin-top: 5px;
}
body.traductor .pestanas{
    display: inline-block;
}
.pestanas div{
    display: inline-block;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 9px 10px;
    margin: 0 3px;
    cursor: pointer;
}
.pestanas div.mostrar{
    background: #ccc;
}
.pestanas div *{
    vertical-align: middle;
}
.cabecera{
    padding: 0 5px;
}
.cabecera table{
    width: 100%;
}
.cabecera .inputFila, .cabecera .conjuntoPalabras{
    display: none;
}
.cabecera .botonGrupos{
    display: inline-block;
}
.cabecera .botonGrupos button{
    cursor: pointer;
}
.cabecera .primeraFila td{
    width: 50%;
    box-sizing: border-box;
    margin-top: 10px;
    padding: 10px 0;
    line-height: 0px;
}
.cabecera .segundaFila .busqueda{
    width: 60%;
    box-sizing: border-box;
    padding: 5px 0;
}
.cabecera .segundaFila .paginacion{
    text-align: right;
    width: 40%;
    box-sizing: border-box;
    padding: 5px 0;
}
.cabecera .segundaFila .busqueda button{
    cursor: pointer;
    height: 30px;
}
.cabecera .segundaFila .busqueda .contenedorBuscar{
    display: none;
    position: relative;
    width: 100%;
}
.cabecera .segundaFila .busqueda input{
    margin: 3px 0;
    padding: 5px;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
}
.cabecera .segundaFila .busqueda #quitarBusqueda{
    display: none;
    position: absolute;
    top: 3px;
    right: 0px;
    padding: 10px;
    opacity: 0.5;
    cursor: pointer;
}
.cabecera .segundaFila .busqueda #quitarBusqueda.mostrar{
    display: block;
}
.cabecera .segundaFila .busqueda #selectColor{
    background: #fff;
    width: 125px;
    text-align: center;
    vertical-align: baseline;
    border-radius: 5px;
    margin-left: 10px;
}
.cabecera .segundaFila.busqueda .total{
    margin-top: 5px;
    font-style: italic;
}
.cabecera, #tabla{
    max-width: 1200px;
    margin: auto;
}
#tabla{
    display: block;
}
#tabla table.datos{
    width: 100%;
    vertical-align: top;
    border-spacing: 0;
    border: 1px solid #ccc;
    margin-bottom: 80px;
}
#tabla table.datos td{
    position: relative;
	padding: 5px;
    height: 30px;
}
#tabla table.datos td[rowspan="2"]{
	text-align: center;
	padding: 0;
}
#tabla .palabras .grupo{
    font-size: 0.8em;
    font-style: italic;
    padding: 0;
    margin-left: 20px;
}
#tabla .palabras label,
#tabla .significados label,
#tabla .ejemplos label{
    height: 20px;
    display: block;
    padding: 15px 0;
    overflow: hidden;
}
#tabla .palabras input,
#tabla .significados input{
    display: none;
    width: 90%;
    height: 30px;
    margin: auto;
    border-style: solid;
    border-width: 1px;
}
#tabla .palabras input.verde,
#tabla .significados input.verde{
    background: #65d095;
    border-color: green;
}
#tabla .palabras input.rojo,
#tabla .significados input.rojo{
    background: #e04f5f;
    border-color: red;
}
#tabla .palabras input.grabando,
#tabla .significados input.grabando{
    opacity: 0.7;
    border: 1px solid #000 !important;
    animation-name: pulsoBorde;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes pulsoBorde{
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
#tabla .botones button{
    display: block;
    padding: 2px 5px;
    margin: 5px auto;
    height: 30px;
    overflow: hidden;
    cursor: pointer;
    box-sizing: content-box;
}
#tabla.ocultar1 tr *:not(.botones):not(input),
#tabla.ocultar2 tr *:not(.botones):not(input){
	cursor: pointer;
}
#tabla.ocultar1 table.datos td.iniciales label{
    visibility: hidden;
}
#tabla.ocultar1 table.datos td.palabras label,
#tabla.ocultar2 table.datos td.significados label{
    display: none;
}
#tabla.ocultar1 table.datos td.ejemplos label,
#tabla.ocultar2 table.datos td.ejemplos label{
    opacity: 0;
}
#tabla.ocultar1 table.datos td.iniciales.palabramostrar label,
#tabla.ocultar2 table.datos td.iniciales.signmostrar label,
#tabla.ocultar1 table.datos td.ejemplos.palabramostrar label,
#tabla.ocultar2 table.datos td.ejemplos.signmostrar label{
    opacity: 1;
}
#tabla.ocultar1 table.datos td.palabras input,
#tabla.ocultar1 table.datos td.palabras .iconMicro,
#tabla.ocultar2 table.datos td.significados input,
#tabla.ocultar2 table.datos td.significados .iconMicro{
    display: block;
}
#tabla table.datos tr.mostrar td.iniciales label,
#tabla table.datos tr.mostrar td.palabras label,
#tabla table.datos tr.mostrar td.significados label{
    display: block;
}
#tabla table.datos tr.mostrar td.palabras input,
#tabla table.datos tr.mostrar td.palabras .iconMicro,
#tabla table.datos tr.mostrar td.significados input,
#tabla table.datos tr.mostrar td.significados .iconMicro{
    display: none;
}
#tabla table.datos tr.mostrar td.ejemplos label{
    opacity: 1;
}
#tabla table.datos tr.lineaPar td{
    background: rgba(237, 241, 247, 0.6);
}
#tabla table.datos tr.lineaImpar td{
    background: rgba(217, 225, 234, 0.6);
}
#tabla table.datos tr td.iniciales{
    background: rgba(195, 203, 212, 0.6);
    width: 35px;
}
#tabla table.datos tr td.iniciales .checkbox{
    display: none;
    margin: auto;
    transform : scale(1.5);
    pointer-events: none;
}
body.check #tabla table.datos tr td.iniciales label{
    display: none;
}
body.check #tabla table.datos tr td.iniciales .checkbox{
    display: block;
}

#tabla table.datos tr.subrayar2 .iniciales{
    background: rgba(121, 149, 177, 0.6);
    color: #fff;
}
#tabla table.datos tr.subrayar .iniciales{
    background: rgba(121, 149, 177, 0.6);
    color: #fff;
}
#tabla table.datos .iniciales.practicarmal label:after{
    display: block;
    font-family: fontawesome;
    content: "\f00d";
    color: rgb(128 0 0);
    visibility: visible;
}
#tabla table.datos .iniciales.practicar label:after{
    display: block;
    font-family: fontawesome;
    content: "\f00c";
    color: rgb(0 128 0);
    visibility: visible;
}
#tabla table.datos tr.subrayar2,
#tabla table.datos tr.subrayar2 .palabras,
#tabla table.datos tr.subrayar2 .significados,
#tabla table.datos tr.subrayar2 .ejemplos,
#tabla table.datos tr.subrayar2 .botones{
    background: rgba(203, 214, 226, 0.6);
}
#tabla table.datos tr.subrayar .palabras,
#tabla table.datos tr.subrayar .significados,
#tabla table.datos tr.subrayar .ejemplos,
#tabla table.datos tr.subrayar .botones{
/*    filter: brightness(0.9);*/
    background: rgba(178, 195, 212, 0.6) !important;
}
#tabla table.datos tr .significados{
    border-left: 1px solid #fff;
}
#tabla table.datos tr .ejemplos{
    padding-left: 25px;
    font-size: 0.9em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 4px 5px;
}
#tabla table.datos tr .ejemplos span{
    float: right;
}
#tabla table.datos td.botones{
    position: relative;
    width: 45px;
    border-left: 1px solid #fff;
}
#tabla table.datos tr.cargandoTabla td{
    text-align: center;
    font-size: 1.4em;
    background: #8898a9;
    color: #fff;
    height: 50px;
    animation-name: parpadeoCarga;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes parpadeoCarga {
  0% { background: #c3cbd4; }
   50% { background: #8898a9; }
  100% { background: #c3cbd4; }
}
#diccionario, .cards{
    position: absolute;
    display: inline-block;
    width: 100%;
    min-width: 430px;
    background: url(/img/fondo.jpg);
    overflow-x: hidden;
    overflow-y: scroll;
    vertical-align: top;
    box-sizing: border-box;
    z-index: 1;
}
#diccionario{
    padding-top: 50px;
}
body.traductor #diccionario{
    z-index: 0;
}
iframe.traductores{
    position: absolute;
    display: inline-block;
    width: 100%;
    background: #f5f5f5;
    overflow-x: hidden;
    overflow-y: scroll;
	vertical-align: top;
    border: 0;
    box-sizing: border-box;
    z-index: 0;
}
.cards{
    display: none;
    height: 100% !important;
    top: 0;
    overflow: hidden;
    z-index: 0;
}
.cards .moverCards{
    display: inline-block;
    width: calc( 100% - 85px );
    height: 40px;
    vertical-align: top;
    margin: 0;
    padding: 10px 40px;
    box-sizing: border-box;
    cursor: grab;
    background: #444;
}
.cards.noMin .moverCards{
    width: calc( 100% - 40px );
}
.cards .minimizarCards{
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: top;
    text-align: center;
    line-height: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: #fff;
    background: #999;
    margin-right: 5px;
}
.cards.noMin .minimizarCards{
    display: none;
}
.cards .cerrarCards{
    display: inline-block;
    width: 40px;
    height: 40px;
    vertical-align: top;
    text-align: center;
    line-height: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: #fff;
    background: #999;
}
.cards iframe{
    width: 100%;
    height: calc( 100% - 40px );
    overflow: scroll;
    border: 0;
    box-sizing: border-box;
    z-index: 1;
}
.cards .cerrar{
    top: 10px;
    position: absolute;
    right: 10px;
    border-radius: 3px;
}
.cards.mostrar{
    z-index: 100;
    display: block;
}
body.traductor iframe.traductores{
    z-index: 1;
}

body.invertir{
    background: #000;
}
body.invertir,
body.invertir #tabla .optLinea{
    filter: invert(90%);
}
body.invertir .arriba,
body.invertir .arriba .ojo,
body.invertir .arriba .pestanas .iconSalir,
body.invertir .arriba .menuOcultarMultiple,
body.invertir .flechaScroll,
body.invertir .fontPasado:before,
body.invertir .fontAyuda:before,
body.invertir .fontSalir:before,
body.invertir .fontNuevo:before,
body.invertir .fontBorrar:before,
body.invertir .fontEscuchar:before,
body.invertir .fontWordreference:before,
body.invertir .fontReverso:before,
body.invertir .fontLinguee:before,
body.invertir .fontGoogletranslate:before,
body.invertir .iconWordreference,
body.invertir .iconReverso,
body.invertir .iconLinguee,
body.invertir .iconGoogletranslate,
body.invertir .cabecera .iconAjustes,
body.invertir .iconSi,
body.invertir .iconNo,
body.invertir .iconEscuchar,
body.invertir .iconMicro,
body.invertir .iconRecargar,
body.invertir .optLinea .colores,
body.invertir .cards,
body.invertir #tabla,
body.invertir #diccionario a:hover,
body.invertir .select2-container--default .select2-results__option--highlighted[aria-selected] {
    filter: invert(1);
}
body.invertir .arriba .iconWordreference,
body.invertir .arriba .iconReverso,
body.invertir .arriba .iconLinguee,
body.invertir .arriba .iconGoogletranslate,
body.invertir .fontPasado:hover::before,
body.invertir .fontAyuda:hover::before,
body.invertir .fontSalir:hover::before,
body.invertir .fontNuevo:hover::before,
body.invertir .fontBorrar:hover::before,
body.invertir .fontEscuchar:hover::before,
body.invertir .fontWordreference:hover::before,
body.invertir .fontReverso:hover::before,
body.invertir .fontLinguee:hover::before,
body.invertir .fontGoogletranslate:hover::before{
    filter: invert(0);
}

body.invertir .arriba button,
body.invertir .arriba button:before,
body.invertir .arriba #contadorPracticar,
body.invertir .arriba .botonServidor,
body.invertir .arriba .pestanas,
body.invertir .arriba .botonNotas{
    color: #cacaca;
}
body.invertir .arriba, body.invertir .arriba #numNotas, body.invertir .pestanas div{
    background: #191919;
}
body.invertir .arriba .tuberia{
    background: #cacaca;
}
body.invertir .arriba #contadorPracticar{
    border: 1px solid #cacaca;
}
body.invertir .pestanas div.mostrar{
    background: #575757;
}

body.invertir .nuevo .contenido, body.invertir .aviso .contenido, body.invertir .confirmar .contenido{
    background: #e7e7e7;
}

body.invertir input, body.invertir textarea{
    background: #d5d5d5;
    border: 1px solid #c5c5c5;
}
body.invertir input::placeholder, body.invertir textarea::placeholder {
    color: #757575;
}
body.invertir .comandos{
    box-shadow: 0 2px 8px #e5e5e5;
    background: rgba(255, 255, 255, 0.6);
}
body.invertir .comandos:active{
    box-shadow: inset 0 2px 8px #e5e5e5;
}

body.invertir #tabla tr .optLinea span, body.invertir .arriba .colores span{
    border: 2px solid #fff;
}

body.invertir #tabla table.datos {
    border: 1px solid #000;
}
body.invertir #tabla table.datos tr .significados,
body.invertir #tabla table.datos td.botones {
    border-left: 1px solid #000;
}
body.invertir #tabla table.datos tr .ejemplos {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
body.invertir #tabla table.datos tr.lineaPar td{
    background: rgba(57, 61, 67, 0.6);
    color: #e6e6e6;
}
body.invertir #tabla table.datos tr.lineaImpar td{
    background: rgba(34, 41, 45, 0.6);
    color: #e6e6e6;
}
body.invertir #tabla table.datos tr td.iniciales{
    background: rgba(15, 23, 32, 0.6);
    color: #e6e6e6;
}
body.invertir ::selection{
    background: #4B2A00;
    color: #fff;
}
body.invertir #tabla ::selection {
    background: #B4D5FF;
    color: #000;
}
body.invertir .opciones,
body.invertir .menuGrupos,
body.invertir .menuOcultarMultiple,
body.invertir .optLinea{
    box-shadow: 0 0 10px #fff;
}
body.invertir .menuOcultarMultiple,
body.invertir .opciones,
body.invertir .menuGrupos{
    background: #e7e7e7;
}
body.invertir .arriba{
    box-shadow: 0 0 10px #000;
}

body.invertir select, body.invertir .select2-selection{
    background: #b5b5b5;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
body.invertir .select2-container--default .select2-selection--single .select2-selection__rendered{
    color: #191919;
}

#descarga, #archivo{
	display: none;
}
#history, #ayuda{
	display: none;
    position: fixed;
    background: rgba(119, 119, 119, 0.7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
}
#history .contenido,
#ayuda .contenido{
    background: #fff;
    width: 90%;
    height: 93%;
    margin: 2% auto;
    padding: 20px;
    line-height: 40px;
    border-radius: 10px;
    box-shadow: 0 0 20px #777;
    overflow: hidden;
    box-sizing: border-box;
}
#history .contenido h1,
#ayuda .contenido h1{
	text-align: center;
	font-size: 24px;
    margin: 0;
}
#history .contenido .cerrar,
#ayuda .contenido .cerrar{
	float: right;
    text-align: center;
    line-height: 33px;
    font-size: 20px;
    cursor: pointer;
}
#history .contenido table{
    display: block;
    width: 100%;
    height: calc( 100% - 40px );
    overflow-y: auto;
}
#history .contenido table tr:nth-child(even){
    background: #f5f5f5;
}
#history .contenido table td{
    padding: 0 10px;
    width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20px;
}
#history .contenido label{
    cursor: pointer;
}
#ayuda .contenido .lista{
    height: calc( 100% - 40px );
    overflow-y: scroll;
}
#ayuda .contenido .icon{
    width: 20px;
    height: 20px;
    background-size: 20px;
    margin: 0;
    cursor: default;
}
#ayuda ul{
    padding-left: 20px;
}
#letraScroll{
    transition: 0.5s top;
    position: fixed;
    top: 60px;
    right: 10px;
    z-index: 0;
    background: #fff;
    padding: 5px 9px;
    border-radius: 5px;
}
#letraScroll.scroll{
    top: 10px;
}
.parpadea {
  animation-name: parpadeo;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes parpadeo {
  0% { background: #fff; }
   50% { background: #92a7bd; }
  100% { background: #fff; }
}
.iconEscuchar{
    display: inline-block;
    background-image: url(/img/escuchar.png);
    background-repeat: no-repeat;
    background-size: 30px;
    vertical-align: middle;
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.iconMicro{
    position: absolute;
    display: none;
    vertical-align: middle;
    height: 30px;
    width: 30px;
    cursor: pointer;
    text-align: center;
    margin-top: -32px;
    right: 5%;
}

.iconMicro:after{
    font-family: 'fontawesome';
    content: "\f130";
    font-size: 25px;
    line-height: 32px;
    text-align: center;
    opacity: 0.5;
    color: #333;
}

#tabla input.grabando ~ .iconMicro:after{
    opacity: 1;
    color: #ff1919;
}

#diccionario #tabla table.datos tr.red td.iniciales{
    background: rgba(255, 0, 0, 35%);
}

#diccionario #tabla table.datos tr.green td.iniciales{
    background: rgba(0, 255, 0, 35%);
}

#diccionario #tabla table.datos tr.blue td.iniciales{
    background: rgba(0, 0, 255, 35%);
}

.iconOptDown{
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-image: url(/img/iconos.png);
    background-position: -4px -220px;
    background-repeat: no-repeat;
}

.iconOptUp{
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-image: url(/img/iconos.png);
    background-position: -4px -340px;
    background-repeat: no-repeat;
}

.iconReverso{
    display: inline-block;
    background-image: url("/img/reverso.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.iconWordreference{
    display: inline-block;
    background-image: url("/img/wordreference.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}


.iconLinguee{
    display: inline-block;
    background-image: url("/img/linguee.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.iconGoogletranslate{
    display: inline-block;
    background-image: url("/img/googleTranslate.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.iconSalir{
    display: inline-block;
    background-image: url("/img/salir.png");
    background-size: 15px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.iconMover{
    display: inline-block;
    background-image: url("/img/mover.png");
    background-size: 30px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.iconEditar{
    display: inline-block;
    background-image: url("/img/editar.png");
    background-size: 25px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.iconBorrar{
    display: inline-block;
    background-image: url("/img/borrar.png");
    background-size: 25px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.iconVacio{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.iconCerrar{
    display: inline-block;
    background-image: url("/img/cerrar.png");
    background-size: 30px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

button.iconRecargar, button.iconRecargar:hover, button.iconRecargar:focus{
    background-image: url("/img/recargar.png");
    background-size: 25px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 0 5px;
}

button.iconRecargar{
    display: inline-block;
}

button.iconRecargar.mostrar{
    display: inline-block;
}

.iconSi{
    display: inline-block;
    background-image: url("/img/si.png");
    background-size: 25px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.iconNo{
    display: inline-block;
    background-image: url("/img/no.png");
    background-size: 25px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.iconAjustes{
    display: inline-block;
    background-image: url("/img/ajustes.png");
    background-size: 30px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.arriba button span, .botonesOcultar button span, .opcionesMultiple button span{
    font-size: 1em;
    vertical-align: middle;
}

.botonTraductor button .ojo, #btnOcultar .ojo, .menuOcultar a .ojo, .botonesOcultar button .ojo{
    display: inline-block;
    background-image: url("/img/invisible.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.botonTraductor button .ojo, .menuOcultar a.botonPulsado .ojo, .botonesOcultar button.botonPulsado .ojo{
    display: inline-block;
    background-image: url("/img/visible.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.opcionMultiple .iconMenu{
    display: inline-block;
    background-image: url("/img/menu.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.opcionesMultiple .iconCerrar2, .opcionMultiple .iconCerrar2{
    display: inline-block;
    background-image: url("/img/cerrar2.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.opcionesMultiple .iconCheckbox, .opcionMultiple .iconCheckbox{
    display: inline-block;
    background-image: url("/img/checkbox.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.opcionesMultiple .iconBorrar2, .opcionMultiple .iconBorrar2{
    display: inline-block;
    background-image: url("/img/delete.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.opcionesMultiple .iconCambiar, .opcionMultiple .iconCambiar{
    display: inline-block;
    background-image: url("/img/change.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.iconFlechaArriba{
    display: inline-block;
    background-image: url("/img/flechaArriba.png?p=p");
    background-size: 45px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 45px;
    height: 45px;
    cursor: pointer;
    opacity: 0.5;
}
.iconFlechaArriba:hover{
    opacity: 1;
}

.flechaScroll{
    transition: 0.5s all;
    position: fixed;
    padding: 5px;
    bottom: -100px;
    right: 10px;
    cursor: pointer;
    z-index: 10;
}

.select2{
    text-align: center;
}

.select2[data-select2-id='1']{
    min-width: calc( 100% - 51px );
    max-width: calc( 100% - 51px );
}

.select2[data-select2-id='3']{
    min-width: calc( 100% - 89px );
    max-width: calc( 100% - 89px );
}

.select2 .select2-selection{
    height: 35px;
    padding: 3px 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 32px;
}

.select2-container--default .select2-results>.select2-results__options{
    max-height: none;
}

body.scroll .flechaScroll{
    bottom: 10px;
}

.pestanas div label{
    cursor: pointer;
}

.pestanas .iconSalir{
    margin-left: 10px;
}

::-webkit-scrollbar {
    width: 5px;
    background: gainsboro;
}

::-webkit-scrollbar-thumb {
    background: gray;
}

.fontIcon:before, .fontIcon:after{
    display: inline-block;
    font-family: fontawesome;
    font-size: 18px;
    text-align: center;
    width: 20px;
    height: 20px;
    color: #333;
}

.fontEscuchar:before{
    content: "";
    display: inline-block;
    background-image: url("/img/escuchar.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fontTraductores:before{
    content: "\f1ab";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fontReverso:before{
    content: "";
    display: inline-block;
    background-image: url("/img/reverso.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fontWordreference:before{
    content: "";
    display: inline-block;
    background-image: url("/img/wordreference.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fontLinguee:before{
    content: "";
    display: inline-block;
    background-image: url("/img/linguee.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fontGoogletranslate:before{
    content: "";
    display: inline-block;
    background-image: url("/img/googleTranslate.png");
    background-size: 20px;
    background-repeat: no-repeat;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.fontListado:before{
    content: "\f0ca";
}

.fontPasado:before{
    content: "\f02b";
    color: #e4a64a;
}

.fontImportar:before{
    content: "\f0ed";
    color: #5995f6;
}

.fontImportar:before{
    content: "\f0ed";
    color: #5995f6;
}

.fontExportar:before{
    content: "\f0ee";
    color: #5995f6;
}

.fontJugar:before{
    content: "\f11b";
}

.fontColor:before{
    content: "\f042";
}

.fontHistory:before{
    content: "\f017";
}

.fontAyuda:before{
    content: "\f059";
    color: #71b16d;
}

.fontSalir:before{
    content: "\f011";
    color: #e4596a;
}

.fontNuevo:before{
    content: "\f067";
    color: #71b16d;
}

.fontEditar:before{
    content: "\f040";
}

.fontCambiar:before{
    content: "\f079";
}

.fontCompartir:before{
    content: "\f1e0";
    color: #5995f6;
}

.fontBorrar:before{
    content: "\f057";
    color: #e4596a;
}

.fontOpciones:before{
    content: "\f0c9";
}

.fontAjustes:before{
    content: "\f013";
}

.fontBorrar2:before{
    content: "\f057";
}

.fontMarcarTodos:before{
    content: "\f046";
}

.fontCancelar:before{
    content: "\f00d";
}

.fontVaciar:before{
    content: "\f00d";
    padding-right: 5px;
}

.fontAdd:before{
    content: "\f067";
    padding-right: 5px;
}

.fontBuscar:before{
    content: "\f002";
    padding-right: 5px;
}

.fontIzq:before{
    content: "\f104";
}

.fontDer:before{
    content: "\f105";
}

body.cargando .loading{
    z-index: 10000;
    opacity: 1;
}

.loading{
    transition: 0.5s all;
    position: fixed;
    background-color: rgba(255,255,255,0.4);
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

.loading::after {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 3em;
    height: 3em;
    border-style: solid;
    border-color: black;
    border-top-color: transparent;
    border-width: 3px;
    border-radius: 50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.loader {
  font-size: 10px;
  text-indent: -9999em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: #000;
  background: -moz-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #000 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #000;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #fff;
  width: 85%;
  height: 85%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media (max-width: 500px) {
    .cabecera .primeraFila select{
        max-width: 100px;
    }
    .cabecera .primeraFila .titulo{
        display: none;
    }
    .select2[data-select2-id='3']{
        min-width: calc( 100% - 50px );
        max-width: calc( 100% - 50px );
    }
}

@media(max-width: 515px){
    .botonTraductor button span,
    .botonesOcultar button span,
    .opcionesMultiple button span,
    .opcionMultiple button span,
    .pestanas div span,
    .login button,
    select,
    input,
    .cabecera .titulo,
    .cabecera .busqueda,
    .cabecera .paginacion,
    .menuOcultarMultiple a,
    .menuOcultar a,
    .opciones a,
    .menuGrupos a,
    .optLinea a,
    .confirmar button,
    .pedirDato button,
    #history .contenido .tabla,
    #ayuda .contenido .lista,
    #tablaPalabras td label{
        font-size: 0.8em;
    }
    #selectColor, .select2[data-select2-id='5']{
        width: 110px !important;
    }
    #tabla .palabras .grupo{
        font-size: 0.7em;
    }

    .login button:after{
        font-size: 16px;
    }
    #history .contenido h1,
    #ayuda .contenido h1{
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    #history .contenido,
    #ayuda .contenido,
    .nuevo .contenido,
    .confirmar .contenido,
    .aviso .contenido,
    .capaCambioGrupo .contenido{
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }

    #history .contenido,
    #ayuda .contenido{
        height: 100%;
    }
    .capaCambioGrupo hr{
        width: 95%;
    }

}

@media (max-width: 770px) {
    .pestanas div span,
    .pestanas div .iconSalir{
        display: none;
    }
}

@media (max-width: 1220px) {
    .comandos{
        top: auto;
        bottom: 0;
        border-radius: 0 10px 0 0;
    }
    body.check .comandos{
        display: none;
    }
    #letraScroll{
        right: auto;
        left: 3px;
    }
}