/*
**************************************************************
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: rgb(56,166,91);
	background: radial-gradient(circle, rgba(56,166,91,1) 0%, rgba(8,69,148,1) 100%);
}

@font-face {
	font-family: 'mfont-1';
	src: url("../fonts/Roboto-Regular.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: #5EA953;}

#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;
}

.avisook{font-size: 1em; font-weight: bold; color: #2B8557; background-color: #C6FFE9; text-align: center; margin-bottom: 10px; padding: 10px; box-shadow: 0px 0px 5px #49B67E;}
.avisonot{font-size: 1em; font-weight: bold; color: #A33838; background-color: #EBD247; text-align: center; margin-bottom: 10px; padding: 10px;}

#OpenVent{
	display: none;
	background-color: #fff;
	border: 5px solid #008e89;
	border-radius: 20px;
	position: absolute; left: 50%;
	margin-left:-200px; top:50px;
	width: 400px; min-height: 400px;
	padding:20px;
	color: #000;
	z-index: 2;
}
#OpenVent .title{width: 100%; background-color: #1b262c; color: #fff; font-size: 11pt; font-weight: bold; padding: 5px; border-radius: 20px; text-align: center;}
#OpenVent .subtitle{color: #000; font-weight: bold; font-size: 13px;}

#msjreg{
	display: none;
	background-color: #fff;
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	overflow: hidden;
	padding: 10px;
	margin-bottom: 20px;
}
#msjreg .regok{color: #3A973E;}
#msjreg .regnot{color: #d45d79;}

#alert{font-size: 11pt; display: none; color: red; font-weight: bold; margin-bottom: 20px; text-align: center;}
	#alert .ok{background-color: green; color: #fff;}
	#alert .error{background-color: red; color: #fff;}

#msjregval{
	display: none;
	position: fixed;
	background-color: #fff;
	width: 400px;
	left: 50%; top: 50%;
	margin-left: -200px;
	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;
}

.botons{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.botons input[type="checkbox"]{position: absolute;left: 20px;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #B9B9B9;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.spaceh-lg{width: 100%; height: 120px; clear: left;}
.spaceh-mld{width: 100%; height: 100px; clear: left;}
.spaceh-msd{width: 100%; height: 80px; clear: left;}
.spaceh-md{width: 100%; height: 60px; clear: left;}
.spaceh-mc{width: 100%; height: 45px; 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: #C32B2B;}

nav{background-color: #008E89; padding: 20px; box-shadow: 0px 2px 10px #191919;}
	nav img{width: 70px; height: 70px; border-radius: 100%; border-bottom: 4px solid #2AA6E0;}
	nav .title{font-size: 1.4em; font-weight: bold; color: #fff; text-shadow: 0px 2px 2px #000;}
	nav .subtitle{font-size: 1.3em; font-weight: bold; color: #fff; text-shadow: 0px 2px 2px #000;}
	nav .subtitle-cargo{font-size: 1.1em; font-weight: bold; color: yellow; text-shadow: 0px 2px 2px #000;}

.container{border-radius: 0 0 20px 20px;}
	.container section#login{width: 800px; height: 100%; margin: 0 auto;}
		.container section#login #head-log{background-color: #245953; height: 100%; font-size: 20px; color: #fff; text-align: center; padding: 20px;}
			.container section#login #head-log img#logohz{width: 180px; height: 100px;}
			.container section#login #head-log img{width: 200px; height: 180px;}
			.container section#login #head-log .log1{font-size: 1.2em; text-shadow: 0px 3px 2px #000; text-align: center;}
				.container section#login #head-log .log1 #title{font-size: 0.85em; color: #FFFFFF;}
		.container section#login #bodys-log{height: 100%; background-color: rgba(255,255,255,0.8); padding: 20px;}
			.container section#login #bodys-log .menu{text-align: center;}
				.container section#login #bodys-log .menu .subtitle{font-size: 2em; font-weight: bold; color: #309859; text-shadow: 0px 2px 1px #fff;}
				.container section#login #bodys-log .menu .title{font-size: 1.3em; text-shadow: 0px 3px 2px #fff; text-align: center; color: #000;}
	
	.container #menu-pag{padding: 20px;}
		.container #menu-pag #head-one{position: relative; margin-top: 60px; padding: 20px; background-color: rgba(255, 255, 255, 0.9); text-align: center; border-radius: 20px;}
			.container #menu-pag #head-one img{position: absolute; width: 200px; height: 180px; top: -100px; left: 50%; margin-left: -100px;}
				.container #menu-pag #head-one h3{margin-top: 100px; font-weight: bold; text-shadow: 0px 1px 1px #000; color: #309859; font-size: 2em;}
		.container #menu-pag #head-two{padding: 20px 10px; background-color: #fff; text-align: center; border-radius: 20px; text-shadow: 1px 1px 1px #000;}
			.container #menu-pag #head-two .group{padding: 20px; border-radius: 100%; background-color: #159895; font-size: 0.75em; color: #fff; font-weight: bold;}
				.container #menu-pag #head-two .group .folderdata{width: 55px; height: 55px; margin-bottom: 5px;}
			.container #menu-pag #head-two .group:hover{background-color: yellowgreen; color: #000; text-shadow: 1px 1px 1px #fff;}

	.container #body-pag{height: 100%;}
		.container #body-pag #register{background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 30px; color: #000; min-height: 610px;}
			.container #body-pag #register .enabled .group{padding: 15px; border-radius: 20%; background-color: #159895; font-size: 0.8em; color: #fff; font-weight: bold; text-align: center;}
				.container #body-pag #register .enabled .group .folderdata{margin-bottom: 5px;}
			.container #body-pag #register .disabled .group{padding: 15px; border-radius: 20%; background-color: #A1A1A1; font-size: 0.8em; color: #fff; font-weight: bold; text-align: center;}
				.container #body-pag #register .disabled .group .folderdata{margin-bottom: 5px;}
			.container #body-pag #register .enabled .group:hover{background-color: yellowgreen; color: #000;}
			.container #body-pag #register .titlediv{font-size: 1.2em; font-weight:bold; line-height: 30px;}
			.container #body-pag #register table tbody tr:hover{background-color: #BDE7E6;}
			.container #body-pag #register i.icon-users1{font-size: 45px; color: #272500;}
			.container #body-pag #register i.icon-grid{font-size: 45px; color: #272500;}
			.container #body-pag #register i.icon-progress-two{font-size: 45px; color: #272500;}
			.container #body-pag #register i.icon-times-circle{font-size: 25px; color: red; cursor: pointer;}
			.container #body-pag #register i.icon-thumbs-down{font-size: 25px; color: #C98B18; cursor: pointer;}
			.container #body-pag #register i.icon-check-circle{font-size: 25px; color: green; cursor: pointer;}
			.container #body-pag #register .circproces{display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 100%; background-color: #dc3545; color: #fff;}
			.container #body-pag #register .circprocesok{display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 100%; background-color: #28a745; color: #fff;}
				/*.container #body-pag #register .circproces:hover{background-color: #fff; color: #000; cursor: pointer; border: 1px solid #4F4F4F; transition-duration: 0.4s;}*/
			.container #body-pag #register #msjestado{position: absolute; top: -20px; right: 30px; width: 120px; line-height: 15px; border-radius: 20px; padding: 10px; font-size: 0.9em;font-weight: bold; text-align: center;}
				.container #body-pag #register #msjestado.obs{background-color: orange; color: #000;}
				.container #body-pag #register #msjestado.env{background-color: #3AB3DB; color: #000;}
				.container #body-pag #register #msjestado.apr{background-color: green; color: #fff;}
				.container #body-pag #register #msjestado.fin{background-color: green; color: #fff;}
			.container #body-pag #register #archiveie{position: absolute; top: 20px; left: 30px;}
				.container #body-pag #register #archiveie img{width: 40px;}
			.container #body-pag #register .variables{display: none;}

		.container #body-pag #report{background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 20px; color: #000; min-height: 610px;}
			.container #body-pag #report .group{padding: 15px; border-radius: 20%; background-color: #159895; font-size: 0.8em; color: #fff; font-weight: bold; text-align: center;}
				.container #body-pag #report .group .folderdata{margin-bottom: 5px;}
			.container #body-pag #report .group:hover{background-color: yellowgreen; color: #000;}

		.container #body-pag #config{background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 20px; color: #000; min-height: 610px;}
			.container #body-pag #config .title{font-size: 1.3em; font-weight: bold;}
			.container #body-pag #config .group{padding: 15px; border-radius: 20%; background-color: #159895; font-size: 0.8em; color: #fff; font-weight: bold; text-align: center;}
				.container #body-pag #config .group .folderdata{margin-bottom: 5px;}
			.container #body-pag #config .group:hover{background-color: yellowgreen; color: #000;}
			.container #body-pag #config .config-edit{}
				.container #body-pag #config .config-edit .title{font-size: 1.3em; font-weight: bold;}
				.container #body-pag #config .config-edit .icon-pencil{font-size: 20px; color: #17a2b8; cursor: pointer;}
				.container #body-pag #config .config-edit .icon-times-circle{font-size: 20px; color: #B81717; cursor: pointer;}

		.container #body-pag #home{background-color: #fff; border-radius: 20px; padding: 20px; color: #000; min-height: 400px;}
			.container #body-pag #home img{width: 100%; height: 100%;}

		.container #body-pag #cargos{background-color: #fff; border-radius: 20px; padding: 20px; color: #000; min-height: 400px;}
			.container #body-pag #cargos #msjestado{position: absolute; top: -20px; right: 30px; width: 120px; line-height: 15px; border-radius: 20px; padding: 10px; font-size: 0.9em;font-weight: bold; text-align: center;}
				.container #body-pag #cargos #msjestado.obs{background-color: orange; color: #000;}
				.container #body-pag #cargos #msjestado.env{background-color: #3AB3DB; color: #000;}
				.container #body-pag #cargos #msjestado.apr{background-color: green; color: #fff;}
				.container #body-pag #cargos #msjestado.fin{background-color: green; color: #fff;}

		.container #body-pag #archives{background-color: #fff; border-radius: 20px; padding: 20px; color: #000; min-height: 400px;}
			.container #body-pag #archives a .grouparchive{background-color: #159895; color: #fff; border-radius: 20px; border: 2px solid #464646; padding: 10px; text-align: center; font-size: 0.8em; font-weight: bold;}
			.container #body-pag #archives a .grouparchive img{width: 40px; margin-bottom: 10px;}
			.container #body-pag #archives a .grouparchive:hover{background-color: #9acd32; color: #000; cursor: pointer;}

footer{position: relative;}
	footer .footlat2{background-color: #111111; padding: 20px; color: #fff; text-align: center; font-size: 0.8em;}
	footer .footlat1{color: #000; text-align: center; font-size: 0.8em;}
		footer .footlat1 a{color: #2C6F2E;}
	footer #msjalert{position: fixed; width: 250px; height: 90px; padding: 20px; font-size: 1.2em; bottom: 20px; right: 20px; background-color: orange; color: #000; text-shadow: 1px 1px 1px #fff; border-radius: 50px; display: flex; align-items: center; text-align: center; box-shadow: 0px 3px 4px #000;}

/********************************************************************************************************************************************************************************************/
#documento{margin:0 auto; width:1100px;}
	#documento .title{font-size: 1em; font-weight: bold;}
	#documento .spaceh{width: 100%; height: 10px;}
	#documento .portada{position:relative; width:100%; text-align: center;}
	#documento .descrip{position:relative; width:100%;}
		#documento .descrip .titu_con{font-size: 1em; font-weight: bold;}
		#documento .descrip .titulo{position:relative; text-align:center; padding-top:10px;}
			#documento .descrip .titulo .font_titu{font-size: 2em; 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: 100%; margin-bottom: 20px}
			#documento .descrip .datec .titu_con{font-size:12pt; font-weight: bold;}
		#documento .descrip .aviso{font-size: 8pt; text-align: right;}
		#documento .descrip .rubrica{text-align: center; font-size: 8pt;}

/********************************************************************************************************************************************************************************************/
@media(max-width: 576px){
	.ocult{display: block;}
	.visible{display: none;}
}

@media(min-width: 1500px){
	
}

@media all {
   div.saltopagina{
      display: none;
   }
}
   
@media print{
   div.saltopagina{
      display: block;
      page-break-before: always;
   }
}