/*
**************************************************************
ESAT SYSTEM
Especialistas en Sistemas y Aplicaciones Tecnológicas

http://www.esatsystem.net
Facebook and Twitter >> @esatsystem
YouTube >> esat system

By: Rashta Vidal Miguel Angel
**************************************************************
*/

/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400i&display=swap');*/

body{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family:Arial, Helvetica, sans-serif;
	background-image: url('../../Images/background.jpg');
	background-size: 100% 100%;
}

@font-face {
	font-family: 'mfont-1';
	src: url("../fonts/OpenSans-RegularItalic.ttf");
}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none; color: #74C059;}
a:active {text-decoration: none;}
a{color: #85D45E;}

#mask {
	display: none;
	background: #000000; 
	position: fixed; left: 0; top: 0; 
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 1;
}

#carga{
	display: none;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #000;
	text-align:center;
	position: fixed; left: 50%; top: 50%;
	margin-left:-75px; margin-top:-40px;
	width: 150px; height: 80px;
	padding:10px;
	z-index: 3;
}

#alert{font-size: 11pt; display: none; font-weight: bold;}
	#alert .out{color: #A33838;}
	#alert .ok{color: #54A338;}

#msjreg{
	display: none;
	position: fixed;
	background-color: #fff;
	width: 300px;
	left: 50%; top: 50%;
	margin-left: -150px;
	border-radius: 20px;
	border: 3px solid #d45d79;
	color: #d45d79;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	overflow: hidden;
	padding: 10px;
	z-index: 2;
	box-shadow: 0px 0px 4px #d45d79;
}

#WinConfig{
	display: none;
	background-color: #fff;
	border-radius: 20px;
	width: 660px; overflow: 100%;
	position: absolute; left: 50%; top: 50px;
	margin-left:-330px;
	padding: 15px;
	z-index: 2;
	font-size: 14px;
	box-shadow: 0px 0px 4px #fff;
}

#listinst{position: absolute; width: 100%; padding: 10px; margin-top: 42px; display: none; background-color: #fff; border: 1px solid #B7B7B7; max-height: 250px; overflow-y: auto; z-index: 1;}
	#listinst .fonts{font-size: 7pt; color: #7C7C7C;}
	#listinst table td{line-height: 25px; border-bottom: 1px solid #DADADA; padding: 0 1%; font-size: 8pt;}
	#listinst table tr.cabcel{background-color: #EECF3C; color: #000; font-weight: bold;}
	#listinst table tr.scel:hover{background-color: #CADADE; cursor: pointer;}

#WinConfig .title{width: 100%; background-color: #1b262c; color: #fff; font-size: 11pt; font-weight: bold; padding: 5px; border-radius: 20px; text-align: center;}
#WinConfig .msgerrordoc{color: #C33F3F; font-weight: bold; font-size: 14px;}
#WinConfig #closed{position: absolute; border-radius: 50%; background-color: #000; color: #fff; right: -8px; top: -8px; line-height: 22px; width: 26px; font-size: 15px; text-align: center; border: 2px solid #fff; cursor: pointer;}
#WinConfig #listinst{position: absolute; width: 100%; padding: 5px; margin-top: 42px; display: none; background-color: #fff; border-radius: 10px; border: 1px solid #B7B7B7; max-height: 330px; overflow-y: auto; z-index: 1;}
	#WinConfig #listinst .fonts{font-size: 7pt; color: #7C7C7C;}
	#WinConfig #listinst table td{line-height: 25px; border-bottom: 1px solid #DADADA; padding: 0 1%; font-size: 8pt;}
	#WinConfig #listinst table tr.cabcel{background-color: #EECF3C; color: #000; font-weight: bold;}
	#WinConfig #listinst table tr.scel:hover{background-color: #CADADE; cursor: pointer;}

#WinFloat{
	display: none;
	background-color: #fff;
	border-radius: 20px;
	width: 700px; overflow: 100%;
	/*position: fixed;*/ position: absolute; left: 50%; top: 40px;
	margin-left:-350px;
	padding: 15px;
	z-index: 2;
	font-size: 14px;
	box-shadow: 0px 0px 4px #fff;
}
#WinFloat .title{width: 100%; padding: 7px; background-color: #1b262c; color: #fff; font-size: 11pt; font-weight: bold; border-radius: 20px; text-align: center;}
#WinFloat input{font-size: 14px;}
#WinFloat select{font-size: 14px;}
#WinFloat .msgerrordoc{color: #C33F3F; font-weight: bold; font-size: 14px;}
#WinFloat #closed{position: absolute; border-radius: 50%; background-color: #000; color: #fff; right: -8px; top: -8px; line-height: 22px; width: 26px; font-size: 15px; text-align: center; border: 2px solid #fff; cursor: pointer;}

#FloatAreas{
	display: none;
	background-color: #BEBEBE;
	border-radius: 20px;
	width: 700px; overflow: 100%;
	/*position: fixed;*/ position: absolute; left: 50%; top: 40px;
	margin-left:-350px;
	padding: 15px;
	z-index: 2;
	font-size: 14px;
	box-shadow: 0px 0px 4px #fff;
}

.spaceh-lg{width: 100%; height: 130px; clear: left;}
.spaceh-md{width: 100%; height: 60px; clear: left;}
.spaceh-ms{width: 100%; height: 30px; clear: left;}
.spaceh-nh{width: 100%; height: 20px; clear: left;}
.spaceh-ns{width: 100%; height: 10px; clear: left;}
.spaceh-mx{width: 100%; height: 5px; clear: left;}
.ocult{display: none;}
.visible{display: block;}
.asterisk{color: #BF3535;}
#check-val{font-size: 20px; color: #468C4B; text-shadow: 0px 0px 1px #38E665; font-weight: bold;}

.container-fluid{position: relative;}
	.container-fluid #loguers{position: absolute; bottom: 10px; right: 15px; color: #eeeded; font-weight: bold; font-size: 14px;}

#headpage{background-color: #003400; color: #eeeded; overflow: hidden; padding: 10px 0px; border-bottom: 2px solid #dd9866; display: flex; justify-content: center; align-items: center;}
	#headpage img{width: 200px; height: 105px;}
	#headpage #titlehead{font-size: 1.2em; font-weight: bold; text-align: center;}
	#headpage #subtitlehead{font-size: 20pt; color: #f5b461; font-weight: bold;}

#bodypage{}
	#bodypage #mensj{font-size: 10pt; text-align: justify; color: #2D515C;}
	#bodypage #mensjalert{font-size: 10pt; text-align: justify; color: #2E7B35;}
	#bodypage .menubody{background-color: #003400; overflow: hidden; padding: 20px 20px 30px 20px; border-radius: 20px;}
		#bodypage .menubody img#loguerconfig{width: 150px; height:150px; border-radius: 10%; margin-bottom: 5px;}
		#bodypage .menubody #title{font-size: 1em; font-weight: bold; color: #fff; text-align: center;}
		#bodypage .menubody .subtitle{font-size: 1em; color: #fff;}
		#bodypage .menubody hr{border-color: #dd9866;}
		#bodypage .menubody .item{width: 100%; line-height: 40px; border-bottom: 1px solid #dd9866; padding-left: 10px; color: #9D9D9D;}
			#bodypage .menubody .item .circle{border-radius: 50%; width: 30px;line-height: 30px; background-color: #fff; color: #000; text-align: center; position: absolute; right: 5px; top: 5px; font-size: 0.9em; font-weight: bold;}
		#bodypage .menubody a .item{width: 100%; line-height: 40px; border-bottom: 1px solid #dd9866; padding-left: 10px; color: #F2F2F2;}
		#bodypage .menubody a .item:hover{background-color: #eeeded; color: #000; cursor: pointer; transition: 0.3s;}
			#bodypage .menubody a .item:hover .circle{background-color: #000; color: #fff;}
		#bodypage .menubody i.icon-user-circle{font-size: 80px; color: #fff;}
	#bodypage .infoindex{min-height: 630px; overflow: hidden; padding: 0 30px; text-align: center;}
		#bodypage .infoindex img{width: 100%; height: 570px;}
		#bodypage #titlehead{text-shadow: 0px 2px 2px #fff; font-size: 1.3em; font-weight: bold;}
		#bodypage #subtitlehead{text-shadow: 0px 2px 2px #fff; font-size: 2.5em; font-weight: bold;}
	#bodypage .infobody{min-height: 650px; overflow: hidden; padding: 0 30px; font-size: 0.9em;}
		#bodypage .infobody #titlereg{color: #325567; font-size: 14pt; text-align: center;}
		#bodypage .infobody .adv{color: #305F83; font-size: 7pt;}
		#bodypage .infobody #btns{width: 100%; text-align: center;}
		#bodypage .infobody .title{line-height: 30px; color: #5c6e91; font-weight: bold; font-size: 1.2em; text-align: center;}
		#bodypage .infobody .titlesub{line-height: 30px; background-color: #ff896b; color: #000; font-weight: bold; font-size: 14px; text-align: center;}	
			#bodypage .infobody table td{font-size: 12px;}
			#bodypage .infobody table td i.icon-pencil{font-size: 1.3em; cursor: pointer; color: #17a2b8;}
			#bodypage .infobody table td i.icon-times{font-size: 1.3em; cursor: pointer; color: #dc3545;}
			#bodypage .infobody table td i.icon-ban{font-size: 1.3em; cursor: pointer; color: #dc3545;}
			#bodypage .infobody table td i.icon-thumbs-up{font-size: 1.3em; cursor: pointer; color: #21BC4D;}
			#bodypage .infobody table .subtitle{line-height: 30px; color: #000; font-weight: bold;}
			#bodypage .infobody table .EditR{color: #1F4C7E; cursor: pointer; font-size: 14px;}
			#bodypage .infobody table .ElimR{color: #1F4C7E; cursor: pointer; font-size: 14px;}
			#bodypage .infobody table #others-text{display: none; margin-top: 10px;}
				 #bodypage .infobody table #others-text input{background-color: #ECFAFF;}
		#bodypage .infobody #bodydescrip{text-align: left; font-size: 1.2em; color: #263f44;}
			#bodypage .infobody #bodydescrip i{font-size: 80px;}
		#bodypage .infobody #listdescrip .listesp{border-bottom: 1px solid #881b62;color:#000;font-size: 0.8em;padding: 5px;}
			#bodypage .infobody #listdescrip .listesp:hover{background-color: #003400; color: #fff;}

		#bodypage .infobody .Stadistic{}
			#bodypage .infobody .Stadistic img{width: 30px; height: 30px;}
			#bodypage .infobody .Stadistic .title{overflow: hidden; background-color: transparent; color: #000; font-weight: bold; font-size: 14pt; text-align: center;}
			#bodypage .infobody .Stadistic #tabletot td{font-size: 15pt;}
				#bodypage .infobody .Stadistic #tabletot .titletr{background-color: #74CE58; font-size: 9pt; font-weight: bold;}
			#bodypage .infobody .Stadistic .sreport1{}
				#bodypage .infobody .Stadistic .sreport1 table td{font-size: 11px; border-bottom: 1px solid #6C6C6C;}
				#bodypage .infobody .Stadistic .sreport1 table .titletr{background-color: #58BCCE; font-size: 11px; font-weight: bold;}
			#bodypage .infobody .Stadistic .sreport2{padding: 0 2%;}
			#bodypage .infobody .Stadistic .excel{width: 100%; text-align: left; font-size: 15px;}
				#bodypage .infobody .Stadistic .excel a{color: #316B31;}
			#bodypage .infobody .Stadistic .excelnow{width: 100%; text-align: left; font-size: 15px;}
				#bodypage .infobody .Stadistic .excelnow a{color: #961616;}

		#bodypage .infobody #Config{}
			#bodypage .infobody #Config a .icon-config{padding: 10px; border: 2px solid #003400; border-radius: 10px; background-color: #fff; color: #003400; text-align: center; font-size: 1.2em; font-weight: bold;}
			#bodypage .infobody #Config .icon-disabled{padding: 10px; border: 2px solid #3D3D3D; border-radius: 10px; background-color: #ddd; color: #3D3D3D; text-align: center; font-size: 1.2em; font-weight: bold;}
				#bodypage .infobody #Config a:hover .icon-config{background-color: #003400; color: #fff; transition: 0.3s;}
				#bodypage .infobody #Config a i{font-size: 50px;}
				#bodypage .infobody #Config .icon-disabled i{font-size: 50px;}
			#bodypage .infobody #Config .menu{border: 1px solid #003400; border-radius: 10px; padding: 10px;}
				#bodypage .infobody #Config .menu #title{color: #000; font-weight: bold; font-size: 1.2em; text-align: center;}

		#bodypage .infobody .msj-seg{color: #305F83; font-size: 20pt; text-align: center;}
			#bodypage .infobody .msj-seg i.icon-cloud-download{font-size: 120px; margin-bottom: 10px;}
			#bodypage .infobody .msj-seg #alert{font-size: 11pt; color: #A33838; display: none;}

	#bodypage .infohorary{min-height: 650px; overflow: hidden; padding: 0 30px; font-size: 0.9em;}
		#bodypage .infohorary .title{line-height: 30px; color: #5c6e91; font-weight: bold; font-size: 1.2em; text-align: center;}
		#bodypage .infohorary .cabec{background-color: #17a2b8; color: #fff; font-weight: bold;}
		#bodypage .infohorary .infohour{background-color: #3E5255; color: #fff; font-weight: bold; min-height: 60px; height: 100%;}
		#bodypage .infohorary .infocre{background-color: #ffc107; color: #000; font-weight: bold; line-height: 43px; font-size: 2em;letter-spacing: 2em;}
		#bodypage .infohorary .subtitle{font-size: 1.3em; font-weight: bold; color: #242424;}
		#bodypage .infohorary .infoday{font-weight: bold; cursor: pointer; min-height: 60px; height: 100%;}
			#bodypage .infohorary .infoday:hover{background-color: #81D4D5;}
			#bodypage .infohorary .infoday.hok{background-color: #81D4D5;}
		#bodypage .infohorary .infosection{position: relative; font-weight: bold; background-color: #FEC8C8; color: #000; font-size: 0.8em;}
				#bodypage .infohorary .infosection.hok{background-color: #81D593;}
				#bodypage .infohorary .infosection.hin{background-color: #F0D688;}
			#bodypage .infohorary .btncheck{position: absolute; top:-5px; right: -5px; border-radius: 100%; background-color: green; color: #fff; text-align: center; line-height: 20px; width: 20px;}
			#bodypage .infohorary .btntimes{position: absolute; top:-5px; right: -5px; border-radius: 100%; background-color: red; color: #fff; text-align: center; line-height: 20px; width: 20px;}

	#bodypage .present-mat{min-height: 650px; overflow: hidden; padding: 0 30px;}
		#bodypage .present-mat .title{font-size: 20pt; font-weight: bold; color: #2C69A2;}
		#bodypage .present-mat .subtitle{font-size: 18pt; color: #242424;}
		#bodypage .present-mat img{width: 400px; height: 200px;}

#bodypage .infobody #listinst{position: absolute; width: 100%; padding: 5px; margin-top: 42px; display: none; background-color: #fff; border-radius: 10px; border: 1px solid #B7B7B7; max-height: 330px; overflow-y: auto; z-index: 1;}
	#bodypage .infobody #listinst .fonts{font-size: 7pt; color: #7C7C7C;}
	#bodypage .infobody #listinst table td{line-height: 25px; border-bottom: 1px solid #DADADA; padding: 0 1%; font-size: 8pt;}
	#bodypage .infobody #listinst table tr.cabcel{background-color: #EECF3C; color: #000; font-weight: bold;}
	#bodypage .infobody #listinst table tr.scel:hover{background-color: #CADADE; cursor: pointer;}

#coleinfo aside #menues{background-color: #1c1c1c; color: #fff; line-height: 40px; font-size: 20px; font-weight: bold; border-radius: 15px 15px 0 0; text-align: center;}
#coleinfo aside{text-align: center;}
	#coleinfo aside section{background-color: #003400; color: #fff; overflow: hidden; padding: 15px; font-size: 13px; box-shadow: 0px 8px 8px -8px #000;}
		#coleinfo aside section #colelist{border: 1px solid #17a2b8; overflow-y: auto; max-height: 400px; padding: 10px;}
		#coleinfo aside #listinst{position: absolute; width: 100%; padding: 10px; margin-top: 10px; display: none; background-color: #fff; border: 1px solid #B7B7B7; max-height: 250px; overflow-y: auto; z-index: 1; color: #000;}
			#coleinfo aside #listinst .fonts{font-size: 7pt; color: #7C7C7C;}
			#coleinfo aside #listinst table td{line-height: 25px; border-bottom: 1px solid #DADADA; padding: 0 1%; font-size: 8pt;}
			#coleinfo aside #listinst table tr.cabcel{background-color: #EECF3C; color: #000; font-weight: bold;}
			#coleinfo aside #listinst table tr.scel:hover{background-color: #CADADE; cursor: pointer;}
		#coleinfo #colelist .infie{border-bottom: 1px solid #000; padding: 5px; font-size: 0.87em;}
		#coleinfo #colelist .infie:hover{background-color: #548CA8; color: #fff; cursor: pointer;}
#coleinfo section #textcole{background-color: rgba(255,255,255, 0.7); box-shadow: 0px 8px 8px -8px #000; border-radius: 15px; padding: 25px; min-height: 700px;}
	#coleinfo section #textcole .icon-search{font-size: 50px;}
	#coleinfo section #textcole #nivels{overflow: hidden; min-height: 125px; border: 1px solid #17a2b8; padding: 10px; border-radius: 5px; font-size: 0.9em;}
	#coleinfo section #textcole h3{color: #003400;}
	#coleinfo section #textcole .border-info{font-size: 0.9em;}

#documento{margin:0 auto; width:700px;}
	#documento .spaceh{width: 100%; height: 10px;}
	#documento .portada{position:relative; width:100%; text-align: center;}
	#documento .descrip{position:relative; width:100%;}
		#documento .descrip .titulo{position:relative; text-align:center; padding-top:10px;}
			#documento .descrip .titulo .font_titu{font-size: 11pt; font-weight: bold;}
			#documento .descrip .titulo .font_subtitu{font-size:10pt;}
		#documento .descrip .datep{width: 100%; text-align: right; font-size: 9pt; padding: 5px 0;}
		#documento .descrip .datec{width: 90%; font-size: 10pt; background-color: #DFDFDF; padding: 5%; border-radius: 10px; margin-bottom: 20px;}
			#documento .descrip .datec .titu_con{font-size:12pt; font-weight: bold;}
			#documento .descrip .datec #table-inst{font-size: 9pt;}
				#documento .descrip .datec #table-inst .titletd{font-weight: bold;}
			#documento .descrip .datec #table-mod{font-size: 8pt;}
				#documento .descrip .datec #table-mod .headtitle{background-color: #BEBEBE; color: #000; height: 30px; font-size: 10pt; font-weight: bold; border-top: 1px solid #000;}
					#documento .descrip .datec #table-mod .headtitle td{text-align: center; border-top: 1px solid #000; font-weight: bold;}
				#documento .descrip .datec #table-mod tr{height: 25px;}
					 #documento .descrip .datec #table-mod tr td{border-bottom: 1px solid #000;}
		#documento .descrip .entidad{width: 100%;}
			#documento .descrip .entidad #table-respon{font-size: 8pt;}
				#documento .descrip #table-respon .headtitle{background-color: #BEBEBE; color: #000; height: 30px; font-size: 10pt; font-weight: bold; border-top: 1px solid #000;}
					#documento .descrip .entidad #table-respon .headtitle td{text-align: center; border-top: 1px solid #000; font-weight: bold;}
				#documento .descrip #table-respon tr{height: 25px;}
					 #documento .descrip #table-respon tr td{border-bottom: 1px solid #000;}
		#documento .descrip .aviso{font-size: 8pt;}

footer{background-color: #1c1c1c; color: #fff; text-align: center; padding: 15px 0; box-shadow: 0px -1px 6px #454545;}
	footer .footlat1{text-align: center; font-size: 0.8em;}
		footer .footlat1 img{width: 320px; height: 100px;}

@media(max-width: 576px){
	.ocult{display: block;}
	.visible{display: none;}
	#bodypage .infoindex img{height: 250px;}

	#headpage img{width: 230px; height: 125px;}
	#headpage #titlehead{font-size: 15px;}
	#headpage #subtitlehead{font-size: 18px;}

	#bodypage .present-mat .title{font-size: 15pt;}
	#bodypage .present-mat .subtitle{font-size: 14pt;}
	#bodypage .present-mat img{width: 60%; height: 100px;}

	footer{padding: 40px 0;}
		footer .footlat1 img{width: 320px; height: 100px;}
}