@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Nunito+Sans:opsz,wght@6..12,300&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');


*{
	font-family: "Roboto", sans-serif;
	margin: 0px;
}

::-webkit-scrollbar {
      width: 5px;
}
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
}

a{text-decoration: none; color: #000000;}
a:link{text-decoration: none; color: #000000;}
a:active{text-decoration: none; color: #000000;}
a:hover{text-decoration: none; color: #000000;}
a:visited{text-decoration: none; color: #000000;}


th{
	border: 1px solid #000000;
	padding: 5px;
	color: #FFFFFF;
	background-color: #5095B6;
}

td{
	border: 1px solid #000000;
	padding: 5px;
}

tr:hover{
	cursor: pointer;
	background-color: #FFFFD7;
}

body{
	background-size: cover;
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url(../imagen/fondo.jpg);
}


.toolbar{
	position: fixed;
	top: 0px;
	width: 100%;
	height: 60px;
	/*background-color: #5095B6;*/
	background-color: #FFFFFF;
	box-shadow: 0px 3px 5px #919191;
	z-index: 20;
}

.logo{
	position: fixed;
	height: 40px;
	margin-top: 10px;
	margin-left: 5px;
	cursor: pointer;

}

.numero{
	display: inline-flex;
	vertical-align: top;
	align-content: center;
	align-items: center;
	margin-top: 10px;
}

.icono{
	height: 40px;
	margin-right: 5px;
}


/*sesion*/

.sesion{
	width: 300px;
	height: 400px;
	background-color: #FFFFFF;
	box-shadow: 0px 7px 20px #919191;
	margin-top: 80px;
}

.imagenlogo{
	height: 100px;
	margin-top: 20px;
}

.sesion input[type=text]{
	padding: 7px;
	border: none;
	border-bottom: 1px solid #000000;
	margin: 7px;
	width: 80%;
}

.sesion input[type=password]{
	padding: 7px;
	border: none;
	border-bottom: 1px solid #000000;
	margin: 7px;
	width: 80%;
}

.sesion input[type=submit]{
	padding: 7px;
	border: none;
	margin: 7px;
	background-color: #5095B6;
	cursor: pointer;
	color: #FFFFFF;
}

.sesion input[type=submit]:hover{
	background-color: #FFFFFF;
	color: #5095B6;
	border: 1px solid #5095B6;
}

.sesion input[type=submit]:active{
	background-color: #5095B6;
	color: #FFFFFF;
}

/*menu*/

.menu{
	height: 40px;
	margin: 10px;
	cursor: pointer;
}

.division{
	border-bottom: 1px solid #000000;
	margin-bottom: 2px;
	padding-left: 10px;
	padding-bottom: 4px;
	cursor: default;
}

.cuerpomenu{
	position: fixed;
	top: 60px;
	left: -320px;
	width: 300px;
	height: 95%;
	background-color: #FFFFFF;
	box-shadow: 7px 10px 20px #919191;
	z-index: 20;
	overflow-y: auto;
}

.itemico{
	height: 20px;
	width: 20px;
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	float: left;
	margin-right: 5px;
}

.item{
	padding: 15px;
	cursor: pointer;
}
.item:hover{
	cursor: pointer;
	background-color: #f0f0f0;
}


/*cuerpo del sistema*/

.portada{
	margin-top: 60px;
	height: 500px;
	background-color: rgba(5, 29, 84, 0.9);
	color: #FFFFFF;
	align-content: center;
	align-items: center;
	text-align: center;
	font-size: 25pt;
	padding: 10px;
	font-family: "Titillium Web", serif;
	font-style: italic;
}

.espacio{
	height: 300px;
}

.cuarpomini{
	min-height: 400px;
	background-color: #FFFFFF;
	padding: 10px;
	text-align: center;
}

.producto{
	width: 320px;
	height: 380px;
	border: 1px solid #000000;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 10px;
	display: inline-block;
	vertical-align: top;
	background-size: cover;
	background-origin: content-box;
	background-repeat: no-repeat;
	box-shadow: 0px 0px 18px #a5a5a5;
	border-radius: 3px;
	text-align: left;
	overflow: hidden;
}

.producto .titulo{
	position: absolute;
	width: 310px;
	padding: 5px;
	min-height: 40px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #FFFFFF;
}


.piepagina{
	min-height: 300px;
	background-color: #333333;
	color: #FFFFFF;
	padding: 15px;
	align-content: center;
	text-align: center;
}

.cuadrante{
	width: 335px;
	min-height: 270px;
	/*border: 1px solid #FFFFFF;*/
	display: inline-block;
	vertical-align: top;
	padding: 5px;
	text-align: justify;
}

.itemredes{
	padding: 5px;
}

.itemredes a{
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	align-content: center;
	margin-left: 25px;
	margin-bottom: 10px;
}

.itemredes a img{
	margin-right: 10px;
}

.cuerpocontenido{
	margin-top: 60px;
	padding: 10px;
}

.tabla{
	width: 95%;
}

.minitool{
	width: 95%;
	text-align: right;
	margin-bottom: 10px;
}

.minipie{
	width: 95%;
	text-align: left;
	margin-bottom: 10px;
}


.btnsys{
	border: none;
	background-color: #5095B6;
	color: #FFFFFF;
	padding: 7px;
	cursor: pointer;
	border: 1px solid #FFFFFF;
	margin-bottom: 5px;
}

.btnsys:hover{
	background-color: #FFFFFF;
	color: #5095B6;
	border: 1px solid #5095B6;
}

.btnsys:active{
	background-color: #5095B6;
	color: #FFFFFF;
}


.btnsysb{
	border: none;
	background-color: #ADBED4;
	color: #000000;
	padding: 7px;
	cursor: pointer;
	border: 1px solid #FFFFFF;
	margin-bottom: 5px;
}

.btnsysb:hover{
	background-color: #FFFFFF;
	border: 1px solid #ADBED4;
}

.btnsysb:active{
	background-color: #ADBED4;
	color: #000000;
}

.caja-200{
	width: 200px;
	padding: 5px;
	margin-bottom: 5px;
}

.caja-100{
	width: 100px;
	padding: 5px;
	margin-bottom: 5px;
}

.caja-50{
	width: 50px;
	padding: 5px;
	margin-bottom: 5px;
}

.selector{
	padding: 6px;
	margin-bottom: 5px;
}

.area-200{
	width: 200px;
	height: 100px;
	padding: 5px;
	margin-bottom: 5px;
}

.area-total{
	width: 95%;
	height: 100px;
	padding: 5px;
	margin-bottom: 5px;
}




/*panel*/

.panelfrom{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 21;
	align-content: center;
	display: none;
}

.box-dialog{
	width: 330px;
	height: 570px;
	background-color: #FFFFFF;
	padding: 10px;
}

.cargador{
	position: fixed;
	bottom: 10px;
	left: 10px;
	font-size: 20pt;
	color: #ADBED4;
	font-weight: bold;
	display: none;
	z-index: 22;
}

.cuadroestudiantes{
	width: 95%;
	height: 400px;
	border: 1px solid #000000;
	overflow-y: auto;
}

.btnitem{
	padding: 7px;
	cursor: pointer;
	text-align: left;
}

.btnitem:hover{
	background-color: #ADBED4;
	color: #FFFFFF;
}