@font-face {
      font-family: 'Roboto';
      font-display: auto;
      src: local('Roboto'), url(./../google_fonts/roboto-v18-latin-regular.woff2) format('woff2');
    }
    
       
     html,body{
        margin:0px;
        height:100%;
        background-color: #FFFFFF;
	}	
    
    body {
		font-family: 'Roboto', sans-serif;
		color:#262626;
		font-size: 18px;
		margin:0;
		padding:0;
	}
    
	
/* EN MOVIL  */	
@media all and (max-width: 480px) {
				
			#todo{width:100%}
			
			.contenedor{	
				height: auto;
			}
			
			.entrada{
				height: auto;
				width: 100%;
			}
			
			#cuerpo {
				clear:both;
				float:left;		
				width: 100%;
			}
			
			#encabezado {
				float: left;
				width: 100%;
				/*background-image: url(./../../img/banner_superior.png);*/
				background-size: 100% 100%;
				/*background-repeat: no-repeat;*/
				z-index: 10;
				position: absolute;
				height: 45px;
			}
			
			.div_recordar{width: 64px;}
			
			#agenda{padding-top: 65px}
			
			 
}


/* EN PC */
@media screen and (min-width: 780px) {
	
	html,body{
        background:#FFFFFF;
	}
	
	
	body{ 
		font-size: 14px;
	}
	
	
	#todo_permisos{width:37%; margin:auto}
	
	#encabezado {
		display:none;
	}
	#logo_m {
		position: absolute;
		top: 10px;
		left: 15px;
	}
		
		#todo{width:1000px; margin:auto}		

		.contenedor{
			width: 278px;
			height: 560px;
			margin: auto;
			position: relative;
			overflow: hidden;
			border-radius: 25px;
			font-size: 14px;	  
		}
		
		.entrada{
			padding: 0px;
			width: 276px;
			height: 560px;
			overflow: hidden;
			margin-top: 5px;
			border-radius: 25px;
		}
		
			
		#cuerpo{
			width: 275px;
			height: 560px;
			padding: 34px 25px 70px 12px;
			margin: 30px 0px 0px 30px;
			background:	url(../../img/movil_completo.gif) left top no-repeat;
			border-radius: 25px;
			float: left;
		}
		
		.div_recordar{width: 54px;}
		
		#agenda{padding-top: 20px}
		
		
	
}   
    
    a {outline: none;}
    
    .titulo{    	 
         color: #DADADA;
         
    }
    	
    .titulo_formulario{    	 
        color: #387002;
		clear:both; 
		float:right ; 
		margin: 0 45px 5px 30px; 
    }
	#imagen_colegio_index{background-image: none}
	
	.responsive-image {
		height: auto;
		width: 100%;
	}
	

	
	#div_pc {
		display:none;
	}
	
	#div_pc img{
		width:0;
		height:0;
	}
	
	#cuerpo .entrada #mensaje {
		height:20px
        
	}
    
    #div_mensaje {
        height: 100%;
        width: 50%;
        float: left;
        display: flex;
        justify-content: center;
        flex-direction: column;
        
	}
    .blink {
          animation: blink-animation 2s steps(7, start) infinite;
          -webkit-animation: blink-animation 2s steps(7, start) infinite;
    }
	@keyframes blink-animation {
          to {
            visibility: hidden;
    	}
    }
    	@-webkit-keyframes blink-animation {
          to {
            visibility: hidden;
          }
    }
	
	#cuerpo .toda_semana {
		/*margin:0 -10px -10px;*/
	}
	
	#cuerpo .semana {
		/*margin: 10px 0 0 0;*/
	}
    
    #cuerpo .horarios_comidas {
    clear: both;
    margin: 10px 0 0 0;
    font-size: .8em;
    display: none;
    background: #fff;
    }   
    
	.dia_semana {
        padding: 10px;
        text-decoration: none;
        color: #1A2030;
        font-weight: bold;
        background-color: #FFFFFF;	
    }	
	
	.nombre_dia div:nth-child(1) {
        float:left;
        margin-left: 10px;
		}
	.nombre_dia div:nth-child(2) {		
        float:right;
        margin-right: 10px;
		}   
		
	.dia_reserva {
		float: left;
		clear_both;		
		width: 100%;
		color: #689f38 !important;
		background-color: #fff !important;
   		padding: 7px 0 4px 0 !important;
   		margin-bottom: 0 !important;
    } 
	        	 
	#cuerpo .horarios_comidas {
		clear:both;
		margin:10px 0 0 0;
		font-size:.8em;
		display:none;
		background:#fff;
	}
	
	#cuerpo #horarios_comidas td {
		text-align:center;
		/*border:solid 1px #ccc;*/
		border-collapse:collapse
	}		      	 
		      	       	       	 
	#cuerpo .horarios_comidas {
		clear:both;
		margin:10px 0 0 0;
		font-size:.8em;
		display:none;
		background:#fff;
	}
	#cuerpo #horarios_comidas td {
		text-align:center;
		/*border:solid 1px #ccc;*/
		border-collapse:collapse
	}
	#aviso_codigo {
		clear:both;
		height:30px;
	}
	#b_comidas {
		clear:both;
	}
	#b_comidas .btn {
		width:98%;
		margin:10px 0
	}
    
    .info {font-size:.9em; padding:10px 0}
    .info p{margin:4px 2px}
	.info span{margin: 0 0 0 17px; display:block}
	.info blockquote{margin:5px 0 5px 15px; }
   
    .div_info ul.tabs{
        margin: 0px;
        padding: 0px;
        list-style: none;
        background-color:#FFFFFF;
    }
    .div_info ul.tabs li{
        background: #516396;
        color: #fff;
        display: inline-block;
        padding: 6px;
        margin-right:10px;
        cursor: pointer;
        -webkit-border-radius: 8px 8px 0 0;
        
    }
    
    .div_info ul.tabs li.current{
        background: #FFFFFF;
        color:#222;
        font-weight:bold;
    }
    
    .div_info .tab-content{
        display: none;
        background: #FFFFFF;
        float:left;
        width: 100%;
        
    }
    
    .div_info .tab-content.current{
        display: inherit;
    }
    
    
    
	/*para cambiar los colores de acuerdo con el colegio mayor ///// DESDE AQUI HASTA .....*/
	
	#cuerpo .semana .dia_semana .nombre_dia {
		background-color: #819974;
		display: block;
		float: left;
		padding: 7px;
		width: 100%;
		color:  #FFFFFF;
		box-sizing: border-box;
		width: 100%;	
	}
    #titulo_form_entrada{
    	color: #689f38;
    }
    
    .fondo_form{
        margin-top:45px;
        background-color: #FFFCED;
    }
	
	.btn {
		padding: .8em .8em;
		border: 1px solid #689f38;
		-webkit-border-radius: 9px;
		border-radius: 9px;
		text-decoration: none;
		text-align: center;
		font-size: 1em;
		line-height: 1em;
		color: #fff;
		background: #689f38;		
		margin: 5px .5% 5px .5%;
		cursor: pointer;
		width: 100%;
		box-shadow: 1px 3px 3px 0 #0000004d;
       	outline:0px !important;
        		
	}

    
    .gris {background-color: #999}

	.btn:hover, .btn:active {
		background: #387002;
		border:1px solid #387002;
		outline:0px !important;
	}
    
	.btn a {
		color:#fff;
		text-decoration:none;
		outline:0px !important;
	}

	.btn_2 {
		padding: .7em .7em;
		border: 1px solid #F9760B;
		-webkit-border-radius: 9px;
		border-radius: 9px;
		text-decoration: none;
		text-align: center;
		font-size: 1em;
		line-height: 0.5em;
		color: #fff;
		background: #F9760B;		
		margin: 5px .5% 5px .5%;
		cursor: pointer;
		width: 100%;
		box-shadow: 1px 3px 3px 0 #0000004d;
       	outline:0px !important;
        		
	}
   
    .btn_panel{width: 31% !important; outline:0px !important;}

	.btn_2:hover, .btn_2:active {
		background: #E56906;
		border:1px solid #E56906;
		outline:0px !important;
	}
    
	.btn_2 a {
		color:#fff;
		text-decoration:none;
		outline:0px !important;
	}
	
	.btn_menu{
		border: 1px solid #4B8DF0;
		background: #4B8DF0;
		outline:0px !important;
	}
	
	.btn_menu:hover, .btn_menu:active {
		border: 1px solid #1B6FEC;
		background: #1B6FEC;
		outline:0px !important;		
	}

	label {
		font-size:.8em
		
	}
  
   .label_coche_reserva {
		width: 78% !important;
		margin: 5px !important;
		padding: 3px 2px !important;
		text-align: center;
       	height: 23px !important;
       	font-size: .85em !important;
    }
   
	input, select {
		background-color: #fff !important;
		border: 1px solid #689f38;
		border-radius: 4px;
		font-size: 1em;
		margin: 4px 3px;
		padding: 8px;
		width: 94%;
	}

	
	textarea {
		font-family: 'arial', PT Sans Caption, sans-serif;
		background-color: #fff !important;
		border: 1px solid #689f38;
		border-radius: 4px;
		font-size: 1em;
		margin: 10px 3px;
		padding: 10px;
		width: 94%;
	}
	input[type=checkbox] {
		display:none
	}
	input[type=checkbox] + label {
		color: #A8A8A8;
		background-color: #fff;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
		border-radius: 5px;
		border: 1px solid #4B8DF0;
		display: inline-block;
		position: relative;
		width: auto;
   		height: auto;
		line-height: 1em;
		font-size: .8em;
		padding: 8px 10px;
		font-weight: normal;

	}
	
	input[type=checkbox]:checked + label {
		color:#FFF;	
		background-color:#4B8DF0;		
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
		box-shadow: 0 1px 2px rgba(0,0,0,.5);
		border-radius: 5px;
		border: none;
		border: 1px solid #4B8DF0;
	}
	
	a:focus{
		outline:0px;
	}
	
	.opcion {
		width: 64% !important;
	}
  
  .campo_radio   {
		 position : absolute ;
		 visibility: hidden;
	}
	
	.campo_radio + label {
		color: #A8A8A8;
		background-color: #fff;
		-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
		box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
		border-radius: 5px;
		display: inline-block;
		position: relative;
		width: 25px;
		height: 25px;
		line-height: 2em;
		font-size: .8em;
		padding: 3px;

	} 
   
    .campo_radio:checked + label { 
    	color:#FFF;	
		background-color:#4B8DF0;		
		-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
		box-shadow: 0 1px 2px rgba(0,0,0,.5);
     }
    
    ::-webkit-input-placeholder { color:#B2B2B2; }
    ::-moz-placeholder { color:#B2B2B2; } /* firefox 19+ */
    :-ms-input-placeholder { color:#B2B2B2; } /* ie */
    input:-moz-placeholder { color:#B2B2B2; }
    
    .placeholder{ color:#B2B2B2; }
    
	
   .cuerpo_orden{ 
		background-color:#FFFFFF;
	}
	
	/*////////... HASTA AQUÍ  */
	
	/* quitar flechas campo type number */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		
		-webkit-appearance: none;
		-moz-appearance: none;
		margin: 0;
	}
	input[type=number] {-moz-appearance: textfield;}
	
	.que_label{
		clear:both;
		width:100%;
		color: #343434;
		font-family:Tahoma, Geneva, sans-serif;
		font-size:.82em;
		text-align:center;
		padding: 5px 0 0 0;	
	}

	.sombra{
		-moz-box-shadow: 0 2px 6px rgba(0,0,0,.40);
		-webkit-box-shadow: 0 2px 6px rgba(0,0,0,.40);
		box-shadow: 0 2px 6px rgba(0,0,0,.40);			
	}
    
   
	.esconde{ 
		display:none;	
	}
	
	.muestra{ 
		display:block;	
	}
    .div_entrada_panel{    
		width: 80%;
    	height: 150px;
        font-size:.8em;
       	margin:0;
	}
   
    
    .img_responsive {
      height: auto;
      width: 100%;
    }
    
   .tabla_izq {width: 100%;}
    
   .tabla_izq tr td{text-align: left !important;}
   
   .entrada{
		overflow: hidden;
		padding: 0px;		
    }
    
    #banderas {
    	background-color:#FFFFFF;
   		width: 86%; 		
		clear:both; 
		margin: 0;
    	padding: 9px 0 9px 0 ;
    	float: left; 
    	text-align: rigth;
		display: none;
   		font-size: .9em;
    }
    
    #banderas a{
		color:#4B8DF0;
		margin:0 3px;
		text-decoration: none;    
    }
    
    	/*TABS*/
	ul.tabs {
		margin: 0;  padding: 0;  
		float: left;  
		list-style: none;  
		height: auto;  
		width: 100%;
	}
	ul.tabs li {
		float: left;  
		margin-left: 0px;  
		padding: 0;
		overflow: hidden; 
		position: relative; 
		background: rgba(240, 240, 240, 0.64); 
		border-left:0px;		
	}
	ul.tabs li a{
		text-decoration: none;
		color: #689f38;
		display: block;
		font-size: 14px;
		font-weight: bold;
		padding: 10px 20px;
		width: 57px;
	}
	
	ul.tabs li a:hover {
		background: #EBEBEB;
	}
	
	ul.tabs li.active, html ul.tabs li.active a:hover{
		background: #FFF;
		margin-bottom:-2px;
	}
	 
	.informacion_home{
		border-top: none; 
		overflow: hidden; 
		clear: both; 
		float: left;
		background: #FFF;
		width: 530px;
		height:538px;

	}
	
	#tabs_dias ul{
		height: auto;		
	}	
	#tabs_dias ul li a{
		padding: 9.3px;		
	}


/*antes en bonaigua2_pc.css*/	
.sombra_principal {
    background-color: #FFF;
	border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    width: 100%;
	padding:20px;
	
}

   
.label_reserva {
		width: 27% !important;
		margin: 5px !important;
		padding: 8px 2px!important;
		text-align: center;
    }
.label_coche_reserva {
		width: 78% !important;
		margin: 5px !important;
		padding: 4px 2px!important;
		text-align: center;
		height: 22px !important;;
    }
    
     
.label_coche_uso {
		border: solid 1px #689f38 !important;
    }

#popup_clave {
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:1001
}

#popup_reglas {
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:1001
}

#popup_baja {
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:1001
}

.content-popup {
    margin:0 auto;
    margin-top:140px;
    position:relative;
    padding:10px;
    width:80%;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-color:#fff;
    -webkit-box-shadow:0 2px 5px #666;
    box-shadow:0 2px 5px #666;
}
.content-popup h2 {
    color:#48484b;
    border-bottom:1px solid #48484b;
    margin-top:0;
    padding-bottom:4px;
    font-size:.9em
}
.content-popup .close a {
	position: absolute;
	right: -15px;
	top: -16px;
}
.popup-overlay {
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:999;
    display:none;
    background-color:#777;
    cursor:pointer;
    opacity:.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70)
}

#pie_movil {
	text-align:right; 
	margin:10px; 
	font-size:0.7em;
	color:#999;
	display: block;
}

#pie_pc {
	text-align:right; 
	margin_top:15px; 
	font-size:0.7em;
	color:#999;
	display: none;
}

	#div_clave_der{width:100%; float:left; }
	
	#div_clave_izq{width:100%; float:left; }

	#div_entrada_permiso{
		width:93%;	
		margin-left: 10px;
	}
	

#todo_permisos{width:100%;}

#t_sugerencias{	
	width: 100%;
}


.celda_cena{width: 123px;}

.nombre_comida{
	font-size: .8em;
	font-weight: normal;
	text-align: right;
	width: 24%;
	height: 50px;
	padding-right: 2px;
}

/*BOTON ON OFF*/
	
.tgl {
  position: relative;
  display: inline-block;
  height: 25px;
  cursor: pointer;
  color: #A8A8A8;
  background-color: transparent !important;
    box-shadow: none !important;
    
    border: none !important; 
   
}
.tgl > input {
  position: absolute;
  opacity: 0;
  z-index: -1;
  /* Put the input behind the label so it doesn't overlay text */
  visibility: hidden;
}
.tgl .tgl_body {
  width: 50px;
  height: 25px;
  background: white;
  border: 1px solid #dadde1;
  display: inline-block;
  position: relative;
  border-radius: 50px;
}
.tgl .tgl_switch {
  width: 25px;
  height: 25px;
  display: inline-block;
  background-color: white;
  position: absolute;
  left: -1px;
  top: -1px;
  border-radius: 50%;
  border: 1px solid #ccd0d6;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
  -moz-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, -moz-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -o-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, -o-transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -webkit-transition: left cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform cubic-bezier(0.34, 1.61, 0.7, 1);
  -webkit-transition-delay: 250ms, 250ms;
  transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, transform cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  z-index: 1;
}
.tgl .tgl_track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 50px;
}
.tgl .tgl_bgd {
  position: absolute;
  right: -14px;
  top: 0;
  bottom: 0;
  width: 53px;
  -moz-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, right cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -o-transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, right cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  -webkit-transition: left cubic-bezier(0.34, 1.61, 0.7, 1), right cubic-bezier(0.34, 1.61, 0.7, 1);
  -webkit-transition-delay: 250ms, 250ms;
  transition: left cubic-bezier(0.34, 1.61, 0.7, 1) 250ms, right cubic-bezier(0.34, 1.61, 0.7, 1) 250ms;
  background: #439fd8 url("../../img/tgl_check.png") center center no-repeat;
}
.tgl .tgl_bgd-negative {
  right: auto;
  left: -35px;
  background: white url("../../img/tgl_x.png") center center no-repeat;
}
.tgl:hover .tgl_switch {
  border-color: #b5bbc3;
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}
.tgl:active .tgl_switch {
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
}
.tgl > :not(:checked) ~ .tgl_body > .tgl_switch {
  left: 25px;
}
.tgl > :not(:checked) ~ .tgl_body .tgl_bgd {
  right: -35px;
}
.tgl > :not(:checked) ~ .tgl_body .tgl_bgd.tgl_bgd-negative {
  right: auto;
  left: -13px;
}