/* ESTOS SON LOS BOTONES DEL MENU PRINCIPAL => inicioGeneral.phtml */
/* ESTOS SON LOS BOTONES DEL MENU PRINCIPAL => inicioGeneral.phtml */

.recuadroBotonEncabezado 
{
		
							border:1px solid #FFFFFF;
							border-radius:10px;
							font-family:Tahoma,Geneva,Arial,sans-serif;
							padding:5px 10px 0px 35px; /* arriba, derecha, abajo, izquierdo*/
							cursor: pointer;
							display: block;	
							overflow:auto; /*  funciona como width ajustable*/
							height: 30px;
							float: right;
						}
						
.recuadroBotonEncabezado-inicio	
{
	background:#FFFFFF url('./encabezado-inicio.png') no-repeat 1px 1px; 
}

.recuadroBotonEncabezado-mismaterias	
{
	background:#FFFFFF url('./encabezado-mismaterias.png') no-repeat 1px 1px; 
}

.recuadroBotonEncabezado-miscalificaciones
{
	background:#FFFFFF url('./encabezado-miscalificaciones.png') no-repeat 1px 1px; 
}

.recuadroBotonEncabezado-mismensajes
{
	background:#FFFFFF url('./encabezado-mismensajes.png') no-repeat 1px 1px; 
}
 
.recuadroBotonEncabezado-titularidad
{
	background:#FFFFFF url('./encabezado-titularidad.png') no-repeat 1px 1px; 
}

.recuadroBotonEncabezado-salir
{
	background:#FFFFFF url('./encabezado-salir.png') no-repeat 1px 1px; 
}

.recuadroBotonEncabezado span 
{
									font-weight:bold;
									font-size:10px;
									color: #7A7C7C;
									cursor: pointer;
								}
								
.recuadroBotonEncabezado label 
{
									font-weight:bold;
									font-size:8px;
									color: #FA2828;
									cursor: pointer;
								}

.recuadroBotonEncabezado:hover 
{
    opacity: 1.8;
	border: 1px solid #64FE2E;
}

/* MENU VERTICAL FIJO PARA TODAS LAS OPCIONES DEL ALUMNO, PROFESOR Y TITULAR */
/* MENU VERTICAL FIJO PARA TODAS LAS OPCIONES DEL ALUMNO, PROFESOR Y TITULAR */

#menuVertical01 
{
					border: 1px solid gray;
					padding: 2px 2px 2px 5px;
					width: 170px;
					border-radius:5px;
				}

#menuVertical01 div
{
						border-bottom: 2px solid #DDDBDB;
						padding: 2px 2px 2px 5px;
						width: 165px;
						
						border-radius:0px;
						cursor: pointer;
						background: #FFFFFF;
						margin-top: 5px;
					}

#menuVertical01 div:hover 
{
								background: #BDBDBD;
							}

#menuVertical01 div label
{
							font-size: 	15px;
							color: 		#585858;
							cursor: 	pointer;
						}

/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA TODAS LAS OPCIONES DEL ALUMNO Y PROFESOR EN MODO RESPONSIVE */
/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA TODAS LAS OPCIONES DEL ALUMNO Y PROFESOR EN MODO RESPONSIVE */


ul#menuVertical02 	/* los bordes */
{	

					  margin: 0;
					  border: 0 none;
					  padding: 0;
					  width: 38px;
					  list-style: none;
					  height: 0px;
					  border:1px solid #FFC990; /*color de la rayita de arriba */
					  padding-bottom:0px;
 
					}

ul#menuVertical02 li 	/*hace que se vea todo horizontal*/
{	
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 20px;
}

ul#menuVertical02 ul 	/*esta parte oculta los submenus, y sus propiedades*/
{	
  margin: 0;
  padding: 0;
  width: 200px;
  list-style: none;
  display: none;
  position: absolute;
  top: 25px;
  left: 10px;
  background: #F6FAF6;
  border: 0 none;
  opacity: 0.9;
 
}

ul#menuVertical02 a 	/* el cuerpo, todo */
{	
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #0C5971;  /*COLOR DEL TEXTO DE LAS OPCIONES */
  text-decoration: none;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  border-bottom: 2px solid #FFC990;

}

ul#menuVertical02 a:hover	/*pone de otro el link color cuando se pasa el puntero sobre un menu*/
{
	background: white;
	}
	
ul#menuVertical02 .selected	/*el color del titulo del menu*/
{			
	color: gray;
}

ul#menuVertical02 li:hover ul, #menuVertical02 li.over ul /*con eso mostramos los submenus... mandamos llamar javascript*/
{	
   display:block;
}

ul#menuVertical02 span {
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #FC462A;
  text-decoration: none;
  font-weight: bold;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  font-weight:bold;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  border-bottom: 4px solid #7CA2BA;
  background-color: #D0D0D0;

}

/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA LAS OPCIONES DEL ALUMNO DESDE TITULARIDAD */
/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA LAS OPCIONES DEL ALUMNO DESDE TITULARIDAD */

ul#menuVertical03 	/* los bordes */
{	
					  margin: 0;
					  padding: 0;
					  width: 140px;
					  list-style: none;
					  height: 0px;
					  border:1px solid #000797; /*color de la rayita de arriba */
					  padding-bottom:0px;
 
					}

ul#menuVertical03 li 	/*hace que se vea todo horizontal*/
{	
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 20px;
}

ul#menuVertical03 ul 	/*esta parte oculta los submenus, y sus propiedades*/
{	
  margin: 0;
  padding: 0;
  width: 200px;
  list-style: none;
  display: none;
  position: absolute;
  top: 25px;
  left: 10px;
  background: #F6FAF6;
  border: 0 none;
  opacity: 0.9;
 
}

ul#menuVertical03 a 	/* el cuerpo, todo */
{	
  padding: 5px 15px 5px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #0C5971;  /*COLOR DEL TEXTO DE LAS OPCIONES */
  text-decoration: none;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  border-bottom: 2px solid #000797;

}

ul#menuVertical03 a:hover	/*pone de otro el link color cuando se pasa el puntero sobre un menu*/
{
	background: white;
	}
	
ul#menuVertical03 .selected	/*el color del titulo del menu*/
{			
	color: gray;
}

ul#menuVertical03 li:hover ul, #menuVertical03 li.over ul /*con eso mostramos los submenus... mandamos llamar javascript*/
{	
   display:block;
}

/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA TODAS LOS USUARIOS CONECTADOS DE LA PANTALLA INICIAL*/
/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA TODAS LOS USUARIOS CONECTADOS DE LA PANTALLA INICIAL*/


ul#menuVertical04 	/* los bordes */
{	
					  margin: 			0;
					  border: 			0 none;
					  padding: 			0;
					  width: 			170px;
					  list-style: 		none;
					  height: 			0px;
					  border:			0px solid #FFFFFF; /*color de la rayita de arriba */
					  padding-bottom:	0px;
 
					}

ul#menuVertical04 li 	/*hace que se vea todo horizontal*/
{	
  margin:	 	0;
  border: 		0 none;
  padding: 		0;
  float: 		left; /*For Gecko*/
  display: 		inline;
  list-style: 	none;
  position: 	relative;
  height: 		10px;
}

ul#menuVertical04 ul 	/*esta parte oculta los submenus, y sus propiedades*/
{	
  margin: 		0;
  padding: 		0;
  width: 		170px;
  list-style: 	none;
  display: 		none;
  position: 	absolute;
  top: 			15px;
  left: 		10px;
  background: 	#F6FAF6;
  border: 		0 none;
  opacity: 		0.9;
 
}

ul#menuVertical04 a 	/* el cuerpo, todo */
{	
  padding: 			2px 12px 2px;
  float: 			none !important; /*For Opera*/
  float: 			left; /*For IE*/
  display: 			block;
  color: 			#555;  /*COLOR DEL TEXTO DE LAS OPCIONES */
  text-decoration: 	none;
  font-family:		Tahoma,Geneva,Arial,sans-serif;
  font-size:		9px;
  text-decoration: 	none;
  height: 			auto !important;
  height: 			1%; /*For IE*/
  border-bottom: 	0px solid blue; /*  NADA DE RAYITA ABAJO   */

}

ul#menuVertical04 a:hover	/*pone de otro el link color cuando se pasa el puntero sobre un menu*/
{
	background: white;
	}
	
ul#menuVertical04 .selected	/*el color del titulo del menu*/
{			
	color: gray;
}

ul#menuVertical04 li:hover ul, #menuVertical04 li.over ul /*con eso mostramos los submenus... mandamos llamar javascript*/
{	
   display:block;
}

ul#menuVertical04 span {
  padding: 			2px 5px 2px;
  float: 			none !important; /*For Opera*/
  float: 			left; /*For IE*/
  display: 			block;
  color: 			#555;
  text-decoration: 	none;
  font-family:		Arial, Helvetica, sans-serif;
  font-size:		10px;
  text-decoration: 	none;
  height: 			auto !important;
  height: 			1%; /*For IE*/
  border-bottom: 	1px solid #7CA2BA;
  background-color: #D0D0D0;

}

/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA LOS CHATS ACTIVOS, DENTRO DE LA VENTANA EMERGENTE DEL CHAT*/
/* MENU VERTICAL DESPLEGABLE, LO OCUPO PARA LOS CHATS ACTIVOS, DENTRO DE LA VENTANA EMERGENTE DEL CHAT*/


ul#menuVertical05 	/* los bordes */
{	
					  margin: 			0;
					  border: 			0 none;
					  padding: 			0;
					  width: 			380px;
					  list-style: 		none;
					  height: 			0px;
					  border:			0px solid #FFFFFF; /*color de la rayita de arriba */
					  padding-bottom:	0px;
 
					}

ul#menuVertical05 li 	/*hace que se vea todo horizontal*/
{	
  margin:	 	0;
  border: 		0 none;
  padding: 		0;
  float: 		left; /*For Gecko*/
  display: 		inline;
  list-style: 	none;
  position: 	relative;
  height: 		10px;
}

ul#menuVertical05 ul 	/*esta parte oculta los submenus, y sus propiedades*/
{	
  margin: 		0;
  padding: 		0;
  width: 		380px;
  list-style: 	none;
  display: 		none;
  position: 	absolute;
  top: 			15px;
  left: 		10px;
  background: 	#F6FAF6;
  border: 		0 none;
  opacity: 		0.9;
 
}

ul#menuVertical05 a 	/* el cuerpo, todo */
{	
  padding: 			2px 12px 2px;
  float: 			none !important; /*For Opera*/
  float: 			left; /*For IE*/
  display: 			block;
  color: 			#555;  /*COLOR DEL TEXTO DE LAS OPCIONES */
  text-decoration: 	none;
  font-family:		Tahoma,Geneva,Arial,sans-serif;
  font-size:		12px;
  text-decoration: 	none;
  height: 			auto !important;
  height: 			1%; /*For IE*/
  border-bottom: 	0px solid blue; /*  NADA DE RAYITA ABAJO   */

}

ul#menuVertical05 a:hover	/*pone de otro el link color cuando se pasa el puntero sobre un menu*/
{
	background: #fac067;
	}
	
ul#menuVertical05 .selected	/*el color del titulo del menu*/
{			
	color: gray;
}

ul#menuVertical05 li:hover ul, #menuVertical04 li.over ul /*con eso mostramos los submenus... mandamos llamar javascript*/
{	
   display:block;
}

ul#menuVertical05 span {
  padding: 			2px 5px 2px;
  float: 			none !important; /*For Opera*/
  float: 			left; /*For IE*/
  display: 			block;
  color: 			#555;
  text-decoration: 	none;
  font-family:		Arial, Helvetica, sans-serif;
  font-size:		13px;
  text-decoration: 	none;
  height: 			auto !important;
  height: 			1%; /*For IE*/
  border-bottom: 	1px solid #7CA2BA;
  background-color: #D0D0D0;

}




/* UN TIPO MENU VERTICAL OCULTO, ACCORDION, LO OCUPO EN ALUMNOS BUSCAR, O MENU TITULARIDAD  */
/* UN TIPO MENU VERTICAL OCULTO, ACCORDION, LO OCUPO EN ALUMNOS BUSCAR, O MENU TITULARIDAD  */

button.accordion /*solo para buscar alumnos*/
{
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover 
{
    background-color: #ccc; 
}

div.panel 
{
    padding: 0px 0px 0px 0px;
    display: none;
    background-color: white;
}

button.accordionMenu /* solo para el menu de titularidad que oculta las opciones de cada menu*/
{
    background-color: #FFFFFF;
    color: #444;
    cursor: pointer;
    padding: 5px 5px 5px 5px;
    width: 160px;
    border: 1px solid #DBDBDB ;
	border-radius: 10px;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
	margin-bottom:5px;
	
}

button.accordionMenu.active, button.accordionMenu:hover 
{
    background-color: #DBDBDB;; 
}

/* PARA MIS RECUADROS DE ERROR, OK, ATENCION */
/* PARA MIS RECUADROS DE ERROR, OK, ATENCION */

.alert /* Le da formato al contorno, le pone borders curveados */
{	
	color:#555;		/*color del texto, ya sea titulo y descripcion */
	border-radius:10px;
	font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
	padding:10px 36px;
	margin:10px;
	display: block;
		
}

.alert span /* en esta parte va el titulo (ERROR, OK , ATENCION), lo convierte a mayusculas y lo pone en negrito */
{
	font-weight:bold;
	text-transform:uppercase;
}
	
.alert a 
{
	font-weight:bold;
	text-transform:uppercase;
	color: blue;
}

.msError
{
	background:#FFFFFF url('ms-error.png') no-repeat 1px 1px;
	border:1px solid #FC0E03;
}

.msOK
{
	background:#FFFFFF url('ms-ok.png') no-repeat 1px 1px;
	border:1px solid #1DAE3C;
}	

.msAtencion
{
	background:#FFFFFF url('ms-atencion.png') no-repeat 1px 1px;
	border:1px solid #EE9229;
}

/*AHORA VIENEN LOS RECUADROS DE MIS MATERIAS (CHAT Y CONTENIDOS) */
/*AHORA VIENEN LOS RECUADROS DE MIS MATERIAS (CHAT Y CONTENIDOS) */

.recuadroBotonMisMaterias {
		
		border:1px solid #7A7C7C;
		border-radius:10px;
		font-family:Tahoma,Geneva,Arial,sans-serif;
		padding:10px 10px 0px 50px; /* arriba, derecha, abajo, izquierdo*/
		cursor: pointer;
		display: block;	
		width: %;
		min-width:300px;
		height: 28px;
		clear: left;
		clear: both;
	}
	
/*.recuadroBotonMisMaterias-MisMaterias
{
	background:#FFFFFF url('./misMaterias-Materias.png') no-repeat 1px 1px; 
	padding: 10px 0px 0px 0px;
}
*/
.recuadroBotonMisMaterias-Chat
{
	background:#FFFFFF url('./encabezado-chat.png') no-repeat 1px 1px; 
}

.recuadroBotonMisMaterias-Contenidos
{
	background:#FFFFFF url('./encabezado-contenidos.png') no-repeat 1px 1px; 
}

.recuadroBotonMisMaterias span 
{
		font-weight:bold;
		font-size:9px;
		color: #7A7C7C;
		
	}
	
.recuadroBotonMisMaterias:hover 
{
    opacity: 1.8;
	border: 1px solid #64FE2E;
}

.recuadroBotonMisMaterias label 
{
		font-weight:bold;
		font-size:11px;
		color: #7A7C7C;
		cursor: pointer;
	}

/* AHORA VIENEN MIS RECUADROS PARA LA SALA DE CHAT */
/* AHORA VIENEN MIS RECUADROS PARA LA SALA DE CHAT */
	
.recuadroTitulo {
		
		border:0px solid #2ECEF9;
		border-radius:10px;
		font-weight:bold;
		font-family:Tahoma,Geneva,Arial,sans-serif;
		font-size:11px;
		padding: 5px 60px; /* el primero afecta el alto y el segundo el margen izquierdo*/
		color: #54A0CB;
		display: block;	
		min-width: 200px;
		margin-bottom: 0px;
	}
	
.recuadroTitulo-Chat
{
	/*background:#FFFFFF url('chat.png') no-repeat 1px 1px; */
	background:#FFFFFF url('./encabezado-chat.png') no-repeat 1px 1px; 
}
	
/* en esta parte va el titulo, lo convierte a mayusculas y lo pone en negrito */
.recuadroTitulo span {
		
		font-size:10px;
		font-family:Tahoma,Geneva,Arial,sans-serif;
		color: #7A7C7C;
	}

.botonChat /*es mas pequeño porque tiene menos padding*/
{
	width: 	 			40px;
	border: 			0px solid grey;
	background: 		#FFFFFF;
	padding: 			0px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	
	
	
	}	

.botonChat:hover 
{
    opacity: 			0.8;
	cursor: pointer;
	background: grey;
	
}
	

/* PARA MIS RECUADROS DE "OPCIONES DE BUSQUEDA"  => fieldset y legend */
/* PARA MIS RECUADROS DE "OPCIONES DE BUSQUEDA"  => fieldset y legend */

.fieldset01
{
	border: 1px solid #7696B0 ;
	border-radius: 10px;
	margin-bottom: 5px;
	background-color: #F6F6F6;
	
}

.legend01
{
	color:#555;
	font-family: Tahoma,Geneva,Arial,sans-serif;
	font-size:   11px;
	font-weight: bold;
	display:     block;
	text-align:  right;
	
}

.legend02
{
	color:#555;
	font-family: Tahoma,Geneva,Arial,sans-serif;
	font-size:   9px;
	font-weight: bold;
	display:     block;
	text-align:  left;
	
}

/* TABLA 2, PARA CAPTURA DE EVALUACIONES   */
/* TABLA 2, PARA CAPTURA DE EVALUACIONES   */

tabla2
{	
	 border-collapse: collapse;
	 border-radius:10px;
	 border:       0px solid #886A08;
    /*width: 100%;*/
}

.tabla2 th
{
	background-color: #EFF8FB;
	border:         0px solid #886A08; /*#DF0101;*/	
	border-radius:  0px;
	padding-left:   5px;
	padding-right:  3px;
	padding-top:    7px;
	padding-bottom: 7px;
	color:          #555;
	font-family:    Arial narrow;
	font-size:      13px;

}

.tabla2 td
{
	border:         0px solid #886A08; /*#DF0101;*/	
	padding-left:   5px;
	padding-right:  5px;
	padding-top:    0px;
	padding-bottom: 0px;
	color:          #000000;
	font-family:    Arial;
	font-size:      10px;
}

.tabla2 tr:nth-child(even) {
    background-color: #dddddd;
}


/* TABLA 2021 */
/* TABLA 2021 */
#Tabla2021 tr:first-child:hover
{
    background: #F5DFCC !important;	
	
}

#Tabla2021 th 
{
	background: #D4D4D4;
	border: 2px solid #FFFFFF;
	border-radius:10px;
}

#Tabla2021 th label
{
	font-family: Tahoma,Geneva,Arial,sans-serif;
	font-size:   11px;
	color:       #555;
	font-weight: bold;
	margin:      5px;
}

#Tabla2021 td label
{
	font: 11px Arial narrow; 
	color: 	#2A0A0A; 
	margin: 5px; 
}

.vinculo1Tabla2021		/*por ejemplo, para la visualizar documentos escaneados (Ver...) */
{
	
	color: #0992D2;
	font-family: 'Agency FB', 'Bahnschrift Condensed';
	font-size:11px;	
}

.vinculo1Tabla2021:hover
{
	cursor:          pointer;
}

.vinculo2Tabla2021		/*para publicar, eliminar, dentro de los renglones ocultos de cada renglos con informacion */
{
	
	color: #787C7E;
	font-family: 'Agency FB', 'Bahnschrift Condensed';
	font-size:11px;
	
}

.vinculo2Tabla2021:hover
{
	cursor:          pointer;
}

/* TABLA 2022 */
/* TABLA 2022 */

#Tabla2022 tr:first-child:hover
{
    background: #F5DFCC !important;	
	
}

#Tabla2022 th 
{
	background: #F2F2F2;
	border: 2px solid #FFFFFF;
	border-radius:10px;
}

#Tabla2022 th label
{
	font-family: Tahoma,Geneva,Arial,sans-serif;
	font-size:   11px;
	color:       #555;
	font-weight: bold;
	margin:      5px;
}

#Tabla2022 td label
{
	font: 	12px Arial narrow; 
	color: 	#2A0A0A; 
	margin: 5px; 
}

.vinculo1Tabla2022		/*por ejemplo, para la visualizar documentos escaneados (Ver...) */
{
	
	color: #0992D2;
	font-family: 'Agency FB', 'Bahnschrift Condensed';
	font-size:16px;	
}

.vinculo1Tabla2022:hover
{
	cursor:          pointer;
}

.vinculo2Tabla2022		/*para publicar, eliminar, dentro de los renglones ocultos de cada renglos con informacion */
{
	
	color: #787C7E;
	font-family: 'Agency FB', 'Bahnschrift Condensed';
	font-size:16px;
	
}

.vinculo2Tabla2022:hover
{
	cursor:          pointer;
}

/* VENTANA EMERGENTE MODAL  */
/* VENTANA EMERGENTE MODAL  */


.modalbtn1 /* Extra styles for the cancel button */
{
    background-color:	#BDBDBD;
    color: 				414B60;
    padding: 			14px 20px;
    margin: 			8px 0;
    cursor: 			pointer;
    border: 			1px solid #81BEF7;
	border-radius:      10px 3px 3px 3px;
}

.modalbtn1:hover 
{
    opacity: 		0.8;
	border: 		1px solid #64FE2E;
	border-radius: 	10px 3px 3px 3px;
}

.modaltitulo /* Center the image and position the close button */
{
    text-align: center;
    margin:     0px 0px 0px 0px;
    position:        relative;
	background-color:#7CA2BA;
	padding: 16px;
	
}

.modalcontainer 
{
    padding: 16px;
}

span.psw 
{
    float: right;
    padding-top: 16px;
}

.modal /* The Modal (background) */
{
    /*display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content /* Modal Content/Box */
{
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 400px; /* Could be more or less, depending on screen size */
}

.modalclose /* The Close Button (x) */
{
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.modalclose:hover, .modalclose:focus 
{
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.modalanimate 
{
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom 
{
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom 
{
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

.modalLabel1 
	{
	
	font: 18px arial;
	color: #FFFFFF;
	}



/* VENTANA EMERGENTE MODAL 2 */
/* VENTANA EMERGENTE MODAL 2 */


.modal2btn1 
{
    background-color:	#BDBDBD;
    color: 				414B60;
    padding: 			14px 20px;
    margin: 			8px 0;
    cursor: 			pointer;
    border: 			1px solid #81BEF7;
	border-radius:      10px 3px 3px 3px;
}

.modal2btn1:hover 
{
    opacity: 		0.8;
	border: 		1px solid #64FE2E;
	border-radius: 	10px 3px 3px 3px;
}

.modal2titulo 	/* Center the image and position the close button */
{	
    text-align: center;
    margin:     0px 0px 0px 0px;
    position:        relative;
	background-color:#7CA2BA;
	padding: 16px;
	
}

.modal2container 
{
    padding: 16px;
}

.modal2 /* The Modal (background) */
{
    /*display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 0px;
}

.modal2-content /* Modal Content/Box */
{
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 750px; /* Could be more or less, depending on screen size */
}

.modal2animate /* Add Zoom Animation */
{
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

.modal2Label1 
{
	font: 18px arial;
	color: #FFFFFF;
}




/* VARIAS ETIQUETAS, INPUTS, COMBOS, BOTONES Y TEXTO ENCERRADO EN BOLITA VERDE */
/* VARIAS ETIQUETAS, INPUTS, COMBOS, BOTONES Y TEXTO ENCERRADO EN BOLITA VERDE */

.modificarCursor:hover {
	cursor:          pointer;
	
}

.bolitaVerde		/* LO OCUPAR PARA ENUMERAR TODOS LOS AVISOS 		*/
{
  background: #5EA226;
  border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
  cursor:pointer;
	
}

.bolitaGris
{
  background: #C6C5C5;
  border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 15px;
  text-align: center;
  width: 1.6em; 
  cursor:pointer;
	
}

.tituloAvisos2		/* EN CADA AVISO (o nota de conducta), ESTE ES EL FORMATO DEL TITULO 	*/
{
	color:        #0B243B;
	font-family: 'Agency FB', 'Bahnschrift Condensed';
	
	font-size:    20px;
	/*font-weight:bold;*/
	
}

.vinculoMensajes2	/* VINCULO PARA CONFIRMAR O CANCELAR LA ELIMINACION DE UN AVISO, tambien para crear, historico de avisos, tareas foros */
{
	
	color: #787C7E;
	font-family: 'Agency FB', 'Bahnschrift Condensed';
	font-size:14px;
	cursor: pointer;
	
	
}

.etiqueta1
{
	color:#555;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:9px;
	font-weight:bold;
	
}

.etiqueta2
{
	color:black;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
}

.etiqueta3
{
	color:red;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
}

.etiqueta4
{
	color:green;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
}

.etiqueta5
{
	color:#8A0829;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
}

.etiqueta01 
{
	color: #0B243B;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:11px;
}

.etiqueta01300 
{
	color: #0B243B;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:11px;
	width: 300px;
}

.etiqueta02
{
	color: #610B0B;
	font-family: bold Tahoma,Geneva,Arial,sans-serif;
	font-size:11px;
}

.etiqueta03
{
	color: #610B0B;
	font-family: bold Tahoma,Geneva,Arial,sans-serif;
	font-size:14px;
}

.etiqueta04
{
	color: #030303;
	font-family: bold Arial,sans-serif;
	font-size:11px;
}

.etiqueta05
{
	color: #030303;
	font-family: Arial,sans-serif;
	font-size:11px;
}

.etiqueta06
{
	color: #030303;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:8px;
}

.etiqueta07
{
	color: #030303;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:7px;
}

.etiqueta08
{
	color: #030303;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:8px;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}

.etiqueta09
{
	color: #030303;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:9px;
}

.labelEliminar 
{
	color: #610B0B;
	font-family: bold Tahoma,Geneva,Arial,sans-serif;
	font-size:14px;
}

.inputs1 
{
	width: 40px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
}
	
.inputs1b 
	{
	width: 40px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	background:          #D3D3D3;
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs1c 
	{
	width: 17px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
	
.inputs2
	{
	width: 90px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs2b
	{
	width: 110px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}

.inputs3 
	{
	width: 130px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs3b
	{
	width: 190px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs3c
	{
	width: 160px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs3d
	{
	width: 150px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs3e
	{
	width: 140px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs3f
	{
	width: 210px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs4
	{
	width: 260px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	

.inputs5 
	{
	width: 320px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs5b 
	{
	width: 360px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs6	
	{
	width: 420px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs8 
	{
	width: 500px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}
	
.inputs9 
	{
	width: 580px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
	}


.boton2 /*se va poder usar en varios casos se autoajusta*/
{
	background-color: 	#BDBDBD;
    color: 				#414B60;
    padding: 			14px 20px;
    margin: 			8px 0;
    cursor: 			pointer;
	border: 			1px solid #81BEF7;
	border-radius:      10px 3px 3px 3px;
	}	

.boton2:hover 
{
    opacity: 		0.8;
	border: 		1px solid #64FE2E;
	border-radius: 	10px 3px 3px 3px;
}

.boton3 /*es mas pequeño porque tiene menos padding*/
{
	background-color: 	#BDBDBD;
    color: 				#414B60;
    padding: 			5px 5px;
    margin: 			8px 0;
    cursor: 			pointer;
	border: 			1px solid #81BEF7;
	border-radius:      10px 3px 3px 3px;
	}	

.boton3:hover 
{
    opacity: 	0.8;
	border: 	1px solid #64FE2E;
	border-radius:      10px 3px 3px 3px;
}

.boton4 /*es mas pequeño porque tiene menos padding*/
{
	background-color: 	#46CA34;
    color: 				#414B60;
    padding: 			5px 5px 5px 5px;
    
    cursor: 			pointer;
	border: 			1px solid #81BEF7;
	border-radius:      3px 3px 3px 3px;
	
	font:  bold 12px monospace;
	}	

.boton4:hover 
{
    opacity: 	0.8;
	border: 	1px solid #64FE2E;
	border-radius:      3px 3px 3px 3px;
}


.textEditable /* en evaluaciones */
{	
	font: 11px Arial narrow;
	color: black;
	
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;

}

.textBloqueado /* en evaluaciones*/
{	
	font: 11px Arial narrow;
	color: black;
	background: #D8D8D8;
	
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;

}

.textBloqueado2 /* en evaluaciones, para el examen final cuando ya existe algo en el segundo examen final (solo unam)*/
{	
	font: 11px Arial narrow;
	color: black;
	background: #F36A4D;
	
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;

}


/* unicamente para la pantalla de login */

.loginParrafo
		{
			width: 100%;
			border-radius: 15px 15px 15px 15px;	
			font: 18px arial;
			color: #0B243B;
			background: #FFFFFF;
			border: 0px solid #DF0101;
			padding: 3px 6px 3px 6px;
			min-width: 320px;
			max-width: 320px;
			max-height: 80px;
		}
		
.loginCeldas 
		{
			background:#F2F2F2; /* gris */
		}
		
.loginEtiquetas 
		{
			font: bold 12px arial;
			color: #0B243B;
		}
		
.loginBoton 
		{
			background-color: #BDBDBD;
			color: #414B60;
			padding: 14px 20px;
			margin: 8px 0;
			cursor: pointer;
			width: 100%;
			border: 1px solid #81BEF7;		
		}	

.loginBoton:hover {
    opacity: 0.8;
	border: 1px solid #64FE2E;
}

		
.loginInputs1
		{
			width: 260px;
			font:  bold 11px monospace;
			color: #0B243B;
			
			border-radius:       3px 3px 3px 3px;
			border-top-width:    1px;
			border-right-width:  1px;
			border-bottom-width: 1px;
			border-left-width:   1px;
			
			background-color: #FFFFFF;
		}
		
		
.loginInputs2
{
	width: 255px;
	font:  bold 11px monospace;
	color: #0B243B;
	
	border-radius:       3px 3px 3px 3px;
	border-top-width:    1px;
	border-right-width:  1px;
	border-bottom-width: 1px;
	border-left-width:   1px;
	
	background-color: #FFFFFF;
}


/*  Estilos solo para control escolar */
/*  Estilos solo para control escolar */
/*  Estilos solo para control escolar */

/* MENU OPCIONES DEL ENCABEZADO */

div.scrollmenu2 {
 
	background-color:									#FFFFFF;
    overflow: 											auto;
    white-space: 										nowrap;
	border: 											0px solid #0B610B;
	border-top: 										0px solid #0B610B;
	border-radius:										10px;
	text-align: 										right;
	min-width:											420px;
}

div.scrollmenu2 a {
    display: 											inline-block;
    text-align: 										center;
    padding: 											1px;
    text-decoration: 									none;
	font-family: 										'Agency FB', 'Bahnschrift Condensed';
	font-size:											14px;
	color: 												#979595;
}

div.scrollmenu2 a:hover {
    background-color: 									#BCF5A9;
}


/*MENU VERTICAL QUE SE OCULTA*/
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 50px;
}

.sidenav a {
    padding: 4px 8px 4px 30px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #df0202;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/* ESTILO TAB,  PARA DATOS PERSONALES*/
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 20px;
  transition: 0.3s;
  
	color: black;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	/*font-weight:bold;*/
  
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}



/* VARIAS */

.bodyPrincipal  /* solo el body de inicio y el body de principal*/
{
    width:100%;
    margin-top:   0px;
	margin-left:  0px;
	margin-right: 0px;
	background-color: #FFFFFF;
}



.etiqueta01Kardex   /*  Texto ya impreso en el kardex */
{
	color:        #000000;
	font:         7px arial;
}

.etiqueta02Kardex	/*  respuesta al texto */
{
	color:        #000000;
	font:         8px arial; /* original 7, pero muy pequeña*/
	font-weight:  bold;
}

.etiqueta03Kardex  /* texto ya impreso en el kardex, un poco mas grande */
{
	color:        #000000;
	font:         10px arial;
}

.etiqueta04Kardex /*texto ya impreso en el kardex, muy pequeña (curp) */
{
	color:        #000000;
	font:         6px arial; /* original 5 pero muy pequeña*/
}

.etiqueta05Kardex /* etiqueta vertical*/
{
	color: #000000;
	font:  7px arial;
	writing-mode: vertical-lr;
	transform: rotate(180deg); 
}

.etiqueta06Kardex	/*  respuesta al texto en color rojo*/
{
	color:        #FF0000;
	font:         7px arial;
	font-weight:  bold;
}


.etiquetaEncabezado1
{
	color:#FFFFFF;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:9px;
	font-weight:bold;
	
}

.etiquetaEncabezado2
{
	color: #FFBF00;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
}

.etiquetaEncabezado3
{
	color: #FFBF00;
	font-family:Tahoma,Geneva,Arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration: underline #FFBF00;
}

.etiquetaEncabezado3:hover {
	cursor:          pointer;
	
}

.alert-titulos {
		color:#555;
		border-radius:10px;
		font-family:Tahoma,Geneva,Arial,sans-serif;
		font-size:11px;
		padding:3px 10px;
		margin:0px;
		background:#FFFFFF;
		border:0px solid #f5aca6;
		font-weight:bold;
		text-transform:uppercase;  
		width: 350px;
	}
	

/*  la imagen que parpadea, cuando hay chat sin leer */
.imgChatParpadeante:hover {
	cursor:          pointer;
	
}