/********************** REDEFINICION ESTILOS BOOSTRAP ****************************/
	body {
		/*min-height: 175rem;*/
		/*padding-top: 43px;*/
		/*background-color:#eee;*/
			
	}

	.pieIOS {
 		margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
 		margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
	}
	
	.contenedorBody {
		max-width:768px;
		margin: 0 auto
	}
	
	.navbar {
	    padding: .2rem 1rem;
	}
	
	.navbar-nav {
        border-top: 1px solid white;
	}
	
	.navbar-toggler {
		padding: .25rem .15rem;
	}
	
	.navbar-dark .navbar-brand {
		color: #fff;
		width: 100%;
	}	

	.navbar-brand {
    	margin-right: 0;
	}	
	
	
	.navbar-dark .navbar-toggler {
		color: rgba(255,255,255,.5);
		border-color: rgb(156, 39, 176);
	}
		
	.bg-dark {
		/*background-color: #3636AD!important;*/
		/* background-color: #ff6200!important; */
		/*background-color: rgb(156, 39, 176)!important;*/
		background-color: rgb(206, 77, 206)!important;
	}
	
	.card {
		margin-bottom:8px;
	}
	.card-body {
		padding: 0.5rem;
	}
	
	.card-body-fecha {
		padding: 0.5rem 0.5rem 0.5rem 0.1rem;
	}
	
	.btn {
		padding: .175rem .75rem;
	}
	
	.table td, .table th {
		padding: .5rem;
	}
	
	.table td, .table th {
		padding: .5rem;
	}	
	
	.dropdown-item {
		font-weight:500;
		color:#555;
	}
	
	
	
	/**************************ESTILOS PARA LA TOOLBAR ********************************/
		

	.toolbar1 {
		width: 100%;
		max-width: 768px;
		/*background-color: #555;*/
		/*background-color: rgb(156, 39, 176);*/
		/*background-color: #555;*/
		/* background-color: #989696;*/
		/* background-color: #b5b2b2; */
		background: #FFF;
		border-top: 2px solid #bbb;
		overflow: auto;
		position: fixed;
		bottom: -37px;
		height: 83px;		
	}

	.toolbar1 .tbi {
		float: left;
		width: 20%;
		text-align: center;
		transition: all 0.3s ease;
		color: #777;
		
	}

	.toolbar1 .tbactive{
		color: rgb(156, 39, 176);
	}

	.toolbar1 .tbicon{
		padding-top: 2px;
		font-size: 16px;
	}

	.toolbar1 .tbtext {
		font-size: 10px;
		padding:0px;
	}


	/********************** ESTILOS PROPIOS PARA COSAS PARTICULARES ****************************/

	/* Colores */
	.verde {color: green; }
	.rojo {color : #800000;}
	.red {color: #FF0000;}
	.azul {color: #3636AD;}
	.azulEM {color: #007bff;}
	.amarillo {color: #ffc107;}
	.naranja  {color: #FFBF00;}
	.lila  {color: #F38CE2;}	
	.morado  {color: rgb(156, 39, 176);}	
	.gris {color:#666;}
	.bcmorado {background-color: rgb(156, 39, 176);}
	
	
	
	.n4 {
		width:25%;
		text-align:center;
		font-size:2.0rem;
		font-weight:800;
		float:left;		
	}
	.n4peq {
		font-size:1.4rem;
		padding-top: 0.5rem;
	}	
	.n3 {
		width:33.33%;
		text-align:center;
		font-size:2.0rem;
		font-weight:800;
		float:left;		
	}	
	
	.n3peq {
		font-size:1.4rem;
		padding-top: 0.5rem;
	}
	
	.cardVerde {
	    border-left-color: green;
		border-left-style: solid;
		border-left-width: 4px;
	}
	
	.cardRojo {
	    border-left-color: #800000;
		border-left-style: solid;
		border-left-width: 4px;
	}	
	
	.cardNaranja {
	    border-left-color: #FFBF00;
		border-left-style: solid;
		border-left-width: 4px;
	}	
	
	.cardLila {
	    border-left-color: #F38CE2;
		border-left-style: solid;
		border-left-width: 4px;
	}	
	

	.cardMorada {
	    border-left-color: #A569BD;
		border-left-style: solid;
		border-left-width: 4px;
	}	
	
	
	.cardAzul {
	    border-left-color: #3636AD;
		border-left-style: solid;
		border-left-width: 4px;
	}
	
	.cardAzulEM {
	    border-left-color: #007bff;
		border-left-style: solid;
		border-left-width: 4px;	
	}
	
	.cardDoradaSM {
	    border-left-color: #aa8800;
		border-left-style: solid;
		border-left-width: 4px;	
	}	
	
	.cardIconoJuego {
		float:left;
		width:40px;
	}
	
	.cardTextoJuego {
		float:left;
		border-left-style: solid;border-left-width: 1px;
		padding-left:8px;
		width:calc(100% - 40px);
	}	

	.cardTextoJuego10px {
		float:left;
		padding-left:8px;
		width:calc(100% - 10px);
	}	
		
	
	
	.cardFechaIzquierda {
		float:left;
		width:60px;
		text-align:center;
		font-weight:bold;
		font-size:0.9rem;			
	}
	
	.cardFechaIzquierdaTexto {
		float:left;
		border-left-style: solid;border-left-width: 1px;
		padding-left:8px;
		width:calc(100% - 60px);
	}	
	
	/* clase para el tamaño el icono de la card de lista */
	.cardIcono {
		width:32px;padding-top:10px
	}
	
	
	
	.fontFecha {
		font-size:14px;
		line-height:24px;
		color: #007bff;
	}
	
	.fontEnlacePeque {
		font-size:12;
	}
	
	.fontBote {
		color:#666;
		font-size:12px;
	}
	
	.fontSerie {
		float:right;width:50px;font-size: 1rem;line-height:1rem;text-align:center;margin-top: 0;margin-bottom: .5rem;
	}
	

	.contenedorPrincipal {
	   padding:5px;
	 }
	 
    .card-header-green {
        /*background-color: #3636AD;*/
		background-color:green;
		color:#FFF;
   }	
   
    .card-header-red {
        /*background-color: #3636AD;*/
		background-color:red;
		color:#FFF;
   }

    .card-header-rojo {
        /*background-color: #3636AD;*/
		background-color: #800000;
		color:#FFF;
   }	
   
   .card-header-azul {
		background-color: #3636AD;
		color:#FFF;
   }
   
   .card-header-azulEM {        
		background-color:#007bff;
		color:#FFF;
   }	   
   
   .card-header-grey {
		background-color: #282f28;
		color:#FFF;
	}
	
   .card-header-doradaSM {
		background-color: #aa8800;
		color:#FFF;
	}	 
	
   .card-header-naranja {
		background-color: #FFBF00;
		color:#FFF;
	}	
	
   .card-header-morada {
		background-color: #A569BD;
		color:#FFF;
	}	
	
   .card-header-lila {
		background-color: #F38CE2;
		color:#FFF;
	}	

	
	
	.th-titulo {padding: .5rem;font-size:14px}
	

	/* tipo de letra de los números premiados */
	.txtNumeros {
	    font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}

	.txtNumeros15 {
	    font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}	

	.txtNumeros145 {
	    font-size: 1.45rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}	

	.txtNumeros08 {
	    font-size: 0.8rem;
		font-weight: 500;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;	
	}	
	
	.txtTituloJuego {
		font-size : 1em
	}
	
	
	/* Numeros complementario y reintegros */
	.txtNumerosCR {
	    font-size: 1.2rem;
		font-weight: 500;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}


	 
	.cr {
		font-size:11px;
		color:#333;
	}
	
	
	/* Iconos 1 y 2 de los números de lotería */
	img.ico-num  {
		width:.8rem;
		padding-bottom:2px;
	}
	
	img.ico-num9rem  {
		width:.9rem;
		padding-bottom:2px;
	}	
	img.ico-num12rem {
    	width: 1.2rem;
    	padding-bottom: 8px;
	}	
	
	.div-btn-comprobar {
		padding-top:2px;
		padding-left:5px
	}
	
	.iconoApp {
		background:url(../svg/logo_app.svg) no-repeat top right;
		/* background-size: 32px 38px;		*/
		background-size: 45px 45px;
	    padding-bottom: 6px;
	    margin-top: -3px;
	}

	
	/* Formulario de comprobar */
	.form-control-50 {
	    display: inline;
		width: 7rem;
	}
	.btn-50 {
	    padding: .27rem .75rem;
	}
	
	/* Paginas lista de paises con banderas */
	.div-bandera {
		width:40px;
		float:left
	}

	.div-bandera > img {
		width:32px;
		padding-top:5px
	}
	
	.div-pais {
		float:left;
		border-left-style: solid;
		border-left-width: 1px;
		padding-left:8px;
		width:calc(100% - 40px);
	}
	
	
	.div-enlace-externo {
		padding:0 1em
	}


	/********************** Estilos para la comprobacion de QR *******************/
	.cqrTituloJuego {
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.2;
        margin-top: 0;
		margin-bottom: .5rem;
	}



	/* Para marcar el número o complementario premiado */
	.cqrPremiado {
		color:red;
	}

	.cqrCajaPremio {
		background-color: #dff0d8;
		border: 1px solid #d6e9c6;
		color: #3c763d;
		padding:0.2rem;
		margin: 0.5rem 1rem;
		font-size: 1rem;
	}

	.cqrCajaSinPremio {
		background-color: #fcf8e3;
		border: 1px solid #faebcc;
		color: #8a6d3b;
		padding:0.2rem;
		margin: 0.5rem 1rem;
		font-size: 1rem;
	}

	.cqrCajaPremioTotal {
		font-size: 2.25rem;
		font-weight: 700;
	}


	
	
	/********************** ESTILOS PROPIOS GENERICOS ****************************/
	.txtBold {
		font-weight: 800;
	}
	 
	.underline {
		text-decoration: underline;
	}

	.al-right {
		text-align:right;
	}
	
	.center {
		text-align:center;
	}
	
	.fright {float:right;}
	.fleft {float:left;}
	
	.clearfix::after {
		content: "";
		clear: both;
		display: table;
	}
	
	.ws-nw {
		white-space: nowrap;
	}
	
	.w100 {width: 100%}	
	.w32px {width: 32px}
	.w4em {width: 4em}
	
	.lh04rem {line-height:0.4rem}
	.lh06rem {line-height:0.6rem}
	.lh08rem {line-height:0.8rem}
	.lh10rem {line-height:1rem}
	.lh12rem {line-height:1.2rem}	
	.lh20rem {line-height:2.0rem}	
	.lh22rem {line-height:2.2rem}	
	
	/* Margenes */
	.mb-05rem {margin-bottom:0.5rem;}	
	.mb-22rem {margin-bottom:2.2rem;}	
	.mr-05rem {margin-right:0.5rem;}
	.ml-2em {margin-left:2em}
	.ml-05em {margin-left:0.5em}
	.mt-05rem {margin-top:0.5rem;}	
	.mt-2 {margin-top:2px;}
	.mt-8 {margin-top:8px;}
	.mt-10 {margin-top:10px;}
	
	/* Paddings */
	.pt-3px {padding-top: 3px}
	.pt-05rem {padding-top: 0.5rem}
	.pb-05rem {padding-bottom:0.5rem}
    .plr01rem {padding-left: 0.1rem; padding-right: 0.1rem}		
    .plr02rem {padding-left: 0.2rem; padding-right: 0.2rem}	
    .plr03rem {padding-left: 0.3rem; padding-right: 0.3rem}
    .plr05rem {padding-left: 0.5rem; padding-right: 0.5rem}	
    .plr2rem {padding-left: 2rem; padding-right: 2rem}
    .plr1rem {padding-left:1rem;padding-right:1rem}
    .pr05rem {padding-right: 0.5rem}
	
	.fzise08rem { font-size:0.8rem;}
	.fzise10rem { font-size:1.0rem;}
	.fsize12rem { font-size:1.2rem;}
	.fsize14rem { font-size:1.4rem;}
	.fsize16rem { font-size:1.6rem;}
	.fsize18rem { font-size:1.8rem;}
	.fsize20rem { font-size:2.0rem;}
	.fsize25rem { font-size:2.5rem;}
	
	.fw700 {font-weight: 700}
	.fw800 {font-weight: 800}
	
	
	hr.mb5 {margin-top: 0px;margin-bottom: 5px;}
	hr.mt5 {margin-top: 0px;margin-top: 5px;}
	hr.mtb5 {margin-top: 5px;margin-bottom: 5px;}
	hr.m10-0 {margin:10px 0;}
	
	tr.gris {background-color:#eee}
	
.visible {display:block}
.oculto {display:none}
.inicial {display:initial}
	
#loading-overlay {
    position: fixed;
    width: 100%;
    height:100%;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    background-color: #000;
    z-index: 999;
    opacity: 0.5;
}
.fontFechaAzul {
    font-size: 14px;
    line-height: 24px;
	font-style: italic;
   color: #007bff;
}

#msgAviso {
    visibility: hidden;
    min-width: 200px;
    /*margin-left: -125px;*/
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 20px;
    bottom: 30px;
    font-size: 17px;
}

#msgAviso.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}