@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	/*background:url(bg.jpg) #F0F0F0;*/
	/*background: #B85C00;*/
	/*background-size:cover;*/
		font-family: Oswald, Arial;
	color:#fff;
	font-size: 16px;
}
    header{
        background: #0F5100; /*#54A5FA; /* #FFBB48 ; /*red*/
        border: 1px solid blue ;
        border-radius: 5px;        
        /*height: 8vh;*/
        position: sticky;
        top: 0px;         
        /*height: calc(20rem+50vh);*/
        z-index: 2;
        margin: 0 5px 0 5px;
          justify-content: center;    
    }
.contenedor_cabecera{
	background: red;
	height: calc(1rem+20vh);
	
}


   .titulo{
       background: grey;
       display:flex;
	   flex-wrap: nowrap;
       justify-content: center;
	   
	font-family: Oswald, Arial;
	text-align: center;
	font-size: calc(1.2rem + 1vh); /*50px*1.5em*/
	/*margin-bottom: 0.3125rem;*/
	/*margin-bottom: 5px;*/
	/*background: black ; /*rgba(0,0,0,.5)*/

	padding: 3px;
	width: 100vw; /*100%*/	   
	   
	   
    }

   .titulo2{
	   background: black;
       display:flex;
	   flex-wrap: nowrap;
       justify-content: center;
	   font-family: Oswald, Arial;
	   text-align: center;
	   font-size: calc(1.2rem + 1vh);
	   
	  /* background: black ; /*rgba(0,0,0,.5)*/
	   color:yellow;
	   padding: 3px;
	   width: 100%; /*100%*/	   
	   
	   
    }

.contenedor_tabla{
	background:#948C8C;
	display:block;
	position: relative;
		
    /*top: calc(1rem + 1vh);*/
}

.tabla_asistencia{
	/*width: 100vw;*/

/*font-size: calc(0.8rem + 1vh);
line-height: calc(0.8rem + 1vh);*/
	position: relative;
padding: 0;
margin: auto;
	  width: 80%;
}

.tabla_asistencia thead{
	background: orange;
/*	position: sticky;
    top: calc(1rem + 20vh);*/
}
.tabla_asistencia tr{
	/*background: yellow;
	height: calc(5rem + 1vh);*/
}


.tabla_asistencia thead tr{
  display: block;
  position: relative;
	width: 98%;
}
.tabla_asistencia tbody{
  display: block;
  overflow: auto;

  height: 70vh;
width: 100%;
}

.tabla_asistencia th{
	background: #111168;
	/*font-size: calc(0.8rem + 0.3vh);*/
	font: italic calc(0.8rem + 0.3vh) Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
	height: calc(2rem + 1vh);
	
	
}
.tabla_asistencia td{
	background: #24269C ;
	height: calc(1rem + 1vh);
	padding: 0;
	font: Normal calc(0.8rem + 0.3vh) Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}


.tabla_asistencia th button{
	/*font-size: calc(0.8rem + 0.3vh);*/
	font: bold calc(0.8rem + 0.3vh) Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";  
/*font-size: calc(1rem + 1.5vw);
line-height: calc(1.5rem + 1vh);
	height: calc(1rem + 1vh);*/
	/*height: auto;*/
	height: inherit;
	
	/*color: yellow;*/ /*es del texto*/
padding: 0;
margin: 0;
}
.tabla_asistencia td button{
	font: Normal calc(0.8rem + 0.3vh) Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";	
	height: 100%;
	width: 100%;
	/*color: yellow;*/ /*es del texto*/
padding: 0;
margin: 0;

	color: white;
}

.tabla_asistencia img{
width: calc(1rem + 1vw);
	height: calc(1rem + 1vh);
}

.tabla_asistencia th:nth-child(1){
	width: calc(1rem + 5vw);
	text-align: center;		
}
.tabla_asistencia td:nth-child(1){ /*Nro de orden*/
	width: calc(1.5rem + 5vw);
	text-align: center;	
}
.tabla_asistencia th:nth-child(2){
	width: calc(1rem + 5vw);
	text-align: center;		
}
.tabla_asistencia td:nth-child(2){ /*icono*/
	width: calc(1.5rem + 5vw);
	text-align: center;		
}
.tabla_asistencia th:nth-child(3){ /*Apellidos y nombres*/
	width: 45vw;
	text-align: center;	
}
.tabla_asistencia td:nth-child(3){ /*Apellidos y nombres*/
	width: 50vw;
}
.tabla_asistencia th:nth-child(4), .tabla_asistencia td:nth-child(4){ /*boton asistió*/
	width: 7vw;
	text-align: center;	
}
.tabla_asistencia th:nth-child(5), .tabla_asistencia td:nth-child(5){ /*boton faltó*/
	width:7vw;
	text-align: center;	
}
.tabla_asistencia th:nth-child(6), .tabla_asistencia td:nth-child(6){ /*boton tarde*/
	width: 7vw;
	text-align: center;	
}
.tabla_asistencia th:nth-child(7), .tabla_asistencia td:nth-child(7){ /*observaciones*/
	width: 21vw;
}

.gradoseccion {
	font-family: Oswald, Arial;
	text-align: center;
	font-size:calc(1rem + 1vh); /*50px*1.5em*/
	/*margin-bottom: 0.3125rem;*/
	/*margin-bottom: 5px;*/
	background: red ; /*rgba(0,0,0,.5)*/
	padding:2px;
	width: 50%; /*100%*/
}
.grado{
	font-family: Oswald, Arial;
	font-size:calc(1rem + 1vh); 
	background: yellow ;
	padding: 1px;
	width: auto;
	border-radius: 5px;
}
.fecha_hora_actual{
	display: flex;
}
.fecha_actual{
	display: flex;
	font-size: calc(0.8rem + 0.5vh);
}
.reloj {
	display: flex;
	font-family: Oswald, Arial;
	/*width: 50%;*/
	/*padding: 2px; /*20px*/
	font-size: calc(0.8rem + 0.5vh); /*4em*/
	text-align: center;
	background: purple; /*rgba(0,0,0,.5)*/
}

.reloj .caja-segundos {
	/*display: inline-block;*/
	display: flex;
}

.reloj .segundos{
	font-size: calc(0.7rem + 0.5vh);
	display: block;
	line-height: calc(1rem + 0.5vh);

}

.reloj .ampm {
	font-size: calc(0.8rem + 0.5vh);
	display: block;
	line-height: calc(1rem + 0.5vh);
}


@media only screen and (max-width: 600px) {
   .titulo{
       background: grey;
       display:flex;
	   flex-wrap: nowrap;
       justify-content: center;
	   
	font-family: Oswald, Arial;
	text-align: center;
	font-size:1.5rem; /*50px*1.5em*/
	/*margin-bottom: 0.3125rem;*/
	/*margin-bottom: 5px;*/
	/*background: black ; /*rgba(0,0,0,.5)*/

	padding: 3px;
	   width:600px
	/*width: 100%; /*100%*/	   
	   
	   
    }
}



 .cabecera_principal{
        /*background: blue;*/
    display:flex;
	flex-wrap: nowrap;
    justify-content: space-between;
    }

   .cabecera_principal p{
    margin: 2px;
    padding: 2px 2px;
    border-radius: 5px;
	  
    font: normal calc(0.8em+1vw) Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";   
}
.datoscabecera{
    /*background: green;*/
    display: block;
    padding: 0px 10px;
}
.datoscabecera p{
    padding: 0px 0 0 0;
    margin: 0px 0 0 0;
    /*background: yellow;*/
    display: inline-block;
    vertical-align: middle;
    font: normal calc(0.8em+1vw) Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";   

    }

.datoscabecera img{
    display: inline-block;
    width: 60px;
    height: 45px;
    padding: 0px 5px;
    margin: 5px 0px;
    /*background: red;*/
    vertical-align: middle;
            transition-duration:0.2s;

}
.datoscabecera img:last-child:hover{
      	transform:scale(1.2); 
}
    .nav_filtro{
        background:#F6DFF9; /*green;*/
        /*background:#C7ECF4;
        background:#CAF4C9;*/

        border: 1px solid blue;
        border-radius: 5px;
        margin: 5px;
        float:left;
        position: sticky;
        /*top: 8vh;*/
        top: 55px;
/*        min-width: 290px;*/
        height: 90vh;
        width: 290px;     
        overflow-y: auto;        
    }




/*VENTANAS MODALES*/
/*modal 2 y 3*/
.aviso_jc1{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.81);
    display:none;
    z-index: 20;
    /*margin-top: 55px;*/
    padding-top: 60px;
    align-items: center;
    justify-content: center;
    
}
.modal_jc3{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.81);
    display:none;
    z-index: 20;
    /*margin-top: 55px;*/
    padding-top: 60px;
    align-items: center;
justify-content: center;
    
}

.aviso_jc1 .contendor_modal_jc1{
    background: red;
    border: 0px solid #0015FD;
    border-radius: 5px;
    width: 50vw;
    height: 300px;
    position: absolute;
        top:50vh;
        left: 50vw;           
      	margin-top: -25vh;
        margin-left: -25vw;
    padding: 0px;
	text-align: center;
	
    /*font: normal 0.9em Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    align-items: center;
   justify-content: center;
    
        vertical-align: middle;*/
}

.contenedor_titulo_aviso_jc1 {
  /*display: flex;*/
	height: 80px;
  	display: flex;
  	justify-content: space-between;
	background: green;
	border-radius: 5px 5px 0px 0px;
	border-bottom: 5px solid black;
}
.contenedor_titulo_aviso_jc1 h1{
	font-size: 30px;
	width: 46vw;
	/*background: blue;*/
	color: yellow;
	text-align: center;
	padding-top: 2vh;
}
.contenedor2 {
  /*display: flex;*/
	height: 270px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: grey;
	border-radius: 0px 0px 5px 5px;
	/*border-bottom: 5px solid black;	  */
}
.contenedor2 h1{
	font-size: 26px;
	width: 46vw;
	/*background: blue;*/
	color: darkslateblue;
	text-align: left;
	padding-top: 2vh;
	padding-left: 2vw;
}
.contenedor2 p{
	font-size: 20px;
	width: 46vw;
	/*background: blue;*/
	color: white;
	text-align: justify;
	padding-top: 1vh;
	padding-left: 2vw;
}
.contenedor2 button{
	font-size: 24px;
	background: green;
	color: yellow;
	padding: 5px;
	padding-top: 1vh;
	margin-bottom: 1vh;
	border-radius: 5px 5px 5px 5px;
	cursor: pointer;
}
.contenedor2 button:hover{
	background: yellow;
	color: green;
}

.cerrar_aviso{
	border: 5px solid black;
	font-size: 28px;
	font-weight: bold;
	margin: 1px;
	padding: 2px 5px;
	background: red;
	color:black;
}
.cerrar_aviso:hover{
	cursor:pointer;
	background: blue;
	color: white;
	border: 5px solid white;
}

.hijo{
	/*background: pink;*/

}
.titulo_aviso{
	/*width: 50vw*/
		
}



.aviso_jc1 div form img, .mensaje_error form img{
    justify-content: center;
    margin-top: 20px;
    width: 80px;
    
}
.aviso_jc1 div form img:hover, .mensaje_error form img:hover {
    cursor:pointer;
  	transform:scale(1.1);
}

.aviso_jc1 div form a{
    display: inline-block;
    background: #5dade2;
    margin: 15px;
    padding:10px;
    color: white;
    border:0;
    cursor: pointer;
    font-size: 15pt;
    font-style: bold;
    text-decoration: none;
    border-radius: 15px
}
.aviso_jc1 div form a:hover{
    color: #095C92;
    background: #1087DD;
}

.mensaje_error{
    background: #FFB9A9;
    border: 0px solid #0015FD;
    border-radius: 15px;
    width: 250px;
    height: 180px;
    position: absolute;
        top:50%;
        left: 50%;           
        margin-top: -100px;
        margin-left: -100px;
    padding: 5px;    
    font: normal 0.9em Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mensaje_error h1{
    display: block;
    font: bold 1.5em Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    letter-spacing: 1px;
    width: auto;
    margin:0;
    padding: 15px;
/*    background: #2980b9;*/
    border-radius: 10px 10px 0px 0px;
    /*text-transform: uppercase;*/
}

/*FINAL VENTANAS MODALES*/



/*TABLA HORARIO*/

.contenedor_horario{
	width: 90%;
	text-align: center;
	/*max-width: 1000px;*/
	margin:auto;
	padding-bottom: 2em;
}
.tabla_horario{
	margin:0 auto;
	text-align: center;
	border-collapse: collapse;
	background: #627301;
	/*border: red 3px solid;*/
}
.tabla_horario th, .tabla_horario td{
  border: black 3px solid;
	padding: 10px;
}

.celda_cabecera{
  	background: #333C00;
}


.celda_cursor{
	/*background: yellow;*/
	/*font-size:1.5em; /*1.5em*/
	font-size: calc(1em + 1vw);
line-height: 1em;
padding: 1em;
margin: 1em;
	cursor: pointer;
	-webkit-transition:-webkit-transform 0.3s ease-in-out 0.1s;
	-moz-transition:-moz-transform 0.3s ease-in-out 0.1s;
	-ms-transition:-ms-transform 0.3s ease-in-out 0.1s;
	-o-transition:-o-transform 0.3s ease-in-out 0.1s;
}
.celda_cursor:hover{
	background: #002A00;
	color: #F5FF5B;
 	transform:scale(1.1);
}
.celda_hora{
	/*font-size:30px; /*1.5em*/
		font-size: calc(1em + 1vw);
line-height: 1em;
padding: 1em;
margin: 1em;
}

.tabla_horario p{
font-size: 0.5em;
line-height: 1.5em;
padding: 0;
margin: 0;
}

/*FIN TABLA HORARIO */



/*TABLA RELOJ*/
.wrap {
	width: 100%;
	/*max-width: 1000px;*/
	margin:auto;
	justify-content:center ;
}

.widget {
	width: 100%; /*40%*/
	
	display: flex;
	/*margin:32px; */
}

.widget p {
	
	display: inline-block; /*inline-block*/
	line-height: 0.5em;
}