@charset "utf-8";
/* CSS Document */

/*  CSS TIPO DE FUENTE WORD ADD GESTION DE CONTENIDOS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  text-decoration: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background:url(../bg/bgage.jpg);
}
/*  END CSS TIPO DE FUENTE WORD ADD GESTION DE CONTENIDOS */


/*  CSS STILES ENLACES ESPECIALES COLORES AZUL, BLANCO Y GRIS DEFINIDO  */
A.navwhite, A.navwhite:VISITED, A.navwhite:ACTIVE, A.navwhite:FOCUS, A.navwhite:LINK{
  font-size:16px;color: #fff; text-decoration: none; list-style-image: none; list-style-type: none;}
A.navgray, A.navgray:VISITED, A.navgray:ACTIVE, A.navgray:FOCUS, A.navgray:LINK{
  font-size:16px; color:#3D434A; text-decoration: none; list-style-image: none; list-style-type: none;}
/*  END CSS STILES ENLACES ESPECIALES COLORES AZUL, BLANCO Y GRIS DEFINIDO  */


	

/** CSS STYLOS DE FONDOS PARA MENSAJES O ALERTAS */
 hr {margin-top: 5px; margin-bottom: 5px; border-top-width: 1px; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;
	border-top-style: solid; border-top-color: #eee;}
.bgalert { background-color:#eafaf1; padding: 5px;}
.bgwarning { background-color:#FFCA2C; padding: 5px; font-size:20px;}
/** END CSS STYLOS DE FONDOS PARA MENSAJES O ALERTAS */	

/** CSS STYILE ICONO O LOGO RENDONDO AL INCIAR SESION */
.clasicono {border: 4px solid #268FFF; border-radius: 2px; background:#FFF; -moz-border-radius: 50%; -webkit-border-radius: 50%;
    		padding: 8px; width: 100px; height: 100px; vertical-align: middle;  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.clasicono:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); opacity: 1.0; filter: alpha(opacity=100); }
/** END CSS STYILE ICONO O LOGO RENDONDO AL INCIAR SESION */



.cardwhite{background:#fff; color:#333; border-radius:8px;	padding: 15px; height:auto;	margin-top: 5px; margin-bottom: 10px; 
border: 0.5px solid #ddd; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.cardcal { background-color: #fff; padding: 10px; margin-top: 10px; border: 1px solid #09C; border-radius: 5px;}
.cardform {background-color: #eee; padding: 10px; margin-top: 10px; border: 1px solid #09C; border-radius: 5px;}
.titulosblue{color: #273C53; font-size:24px;}


/* CSS STYLES PARA CAJAS DE TEXTOS Y FORMS PARA FORMULARIOS */
.wrap {width: 100%;	height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 20px;}
.login-form{ width: 350px; color:#fff;  margin: 0 auto;	text-decoration:none; border-radius:5px; padding: 2rem; background:#58616B;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.Fields {background-color: #E9E9E9;	border: 0px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px;}	
.form-group{ margin-bottom: 1rem;}
.form-header{text-align: center; margin-bottom : 2rem;}
.form-inputcal{ background: #fff; border: 1px solid #09C; padding: 10px; width: 58px; border-radius:5px;}
.form-input{ background: #fff; border: 1px solid #09C; padding: 10px; width: 100%; border-radius:5px;}
.inputlok{ background-color: #3D434A; color:#fff; padding: 10px; width: 100%; border-radius:5px;}
/* END CSS STYLES PARA CAJAS DE TEXTOS Y FORMS PARA FORMULARIOS */


/* CSS STYLES PARA BOTONES DE INICIO DE SESION */
.btn_warning {background-color:#FFCA2C; border-radius:5px; border:1px solid #FFCA2C; display:inline-block; cursor:pointer; color:#333;
	font-family: 'Poppins', sans-serif;	font-size: 16px; padding:10px; text-align:center; text-decoration:none;	width:auto;}
.btn_blue{background-color:#268FFF;	border-radius:5px; border:1px solid #268FFF; display:inline-block; cursor:pointer; color:#FFF;
	font-family: 'Poppins', sans-serif;	font-size: 16px; padding:10px; text-align:center; text-decoration:none;	width:auto;}
.btn_red{background-color:#ec7063; border-radius:5px; border:1px solid #ec7063; display:inline-block; cursor:pointer; color:#FFF;
	font-family: 'Poppins', sans-serif;	font-size: 16px; padding:10px;	text-align:center; text-decoration:none; width:auto; }
.btn_green{background-color:#52BE80; border-radius:5px; border:1px solid #52BE80; display:inline-block;	cursor:pointer;	color:#FFF;
	font-family: 'Poppins', sans-serif;	font-size: 16px; padding:10px; text-align:center; text-decoration:none;	width:auto;}	
.btn_greenform{background-color:#52BE80; border-radius:5px;	border:1px solid #52BE80; display:inline-block;	cursor:pointer; color:#FFF;
	font-family: 'Poppins', sans-serif;	font-size: 12px; padding: 10px;	text-align:center; text-decoration:none; width: 50px;}	
.btn_redform{background-color:#F00;	border-radius:5px; border:1px solid #F00; display:inline-block; cursor:pointer;	color:#FFF;
	font-family: 'Poppins', sans-serif;	font-size: 12px; padding: 10px;	text-align:center; text-decoration:none; width: 50px;}
.btn_blueform{background-color:#268FFF;	border-radius:5px; border:1px solid #268FFF; display:inline-block; cursor:pointer; color:#FFF;
	font-family: 'Poppins', sans-serif;	font-size: 12px; padding: 10px;	text-align:center; text-decoration:none; width: 50px;}	
/* END CSS STYLES PARA BOTONES DE INICIO DE SESION */


/* CSS STYLES ANCHO FIJO WEB Y COLUMNAS RESPONSIVAS VARIOS TAMAÑOS */
#webcont{width: 1150px; margin: 0 auto;}
@media (max-width: 840px){#webcont{width: 100%;}}

#contesp{width: 1200px; margin: 0 auto;}
@media (max-width: 840px){#contesp{width: 100%;}}

.cl10 {float: left; width: 10%; padding: 5px;}
.cl15 {float: left; width: 15%; padding: 5px;}
.cl16 {float: left; width: 16.6%; padding: 5px;}
.cl20 {float: left; width: 20%; padding: 5px;}
.cl25 {float: left; width: 25%; padding: 5px;}
.cl30 {float: left; width: 30%; padding: 5px;}
.cl33 {float: left; width: 33.33%; padding: 5px;}
.cl40 {float: left; width: 40%; padding: 5px;}
.cl45 {float: left; width: 45%; padding: 5px;}
.cl50 {float: left; width: 50%; padding: 5px;}
.cl60 {float: left; width: 60%; padding: 5px;}
.cl70 {float: left; width: 70%; padding: 5px;}
.cl75 {float: left; width: 75%; padding: 5px;}
.cl80 {float: left; width: 80%; padding: 5px;}
.cl100 {float: left; width: 100%; padding: 5px;}
.cont:after {content: ""; display: table; clear: both;}
@media screen and (max-width:600px) {.cl10, .cl15, .cl16, .cl20, .cl25, .cl30, .cl33, .cl40, .cl45, .cl50, .cl60, .cl70, .cl80, .cl75, .cl100 {width: 100%;}}
/* END CSS STYLES ANCHO FIJO WEB Y COLUMNAS RESPONSIVAS VARIOS TAMAÑOS */



/* CSS BARRA DE NAVEGACION VERTICAL O SIDEBAR */
.show {display: block;}
.content{ margin: 20px; background: #eee; border-radius:5px; padding: 5px; line-height: 28px;}
.wrapper .sidebar{background:#273C53; position:absolute; color:#fff; top: 0; left: 0; width: 225px;	height: 2000px;	transition: all 0.5s ease;
	margin-top: 0px; padding-top: 20px; padding-right: 0;	padding-bottom: 20px; padding-left: 0;  
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.wrapper .section{ width: calc(100% - 225px); margin-left: 225px;}
.wrapper .section .top_navbar{ background: #fff; color:#163E58; height: 60px; display: flex; align-items: center; padding: 0 30px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
.wrapper .section .container{ margin: 20px; background: #fff; color: 163E58; border-radius:5px; padding: 10px; line-height: 28px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.wrapper .section .containt{ margin: 20px; padding: 5px; line-height: 28px;}
body.active .wrapper .sidebar{left: -225px;}
body.active .wrapper .section{ margin-left: 0; width: 100%;}
/* CSS STYLO DE MENUS DENTRO DEL SIDEBAR */
.subtitulo{text-align:center; background:#D3942E; border-radius:5px; margin: 10px;}
.navigation { width: 225px;}
.mainmenu, .submenu { list-style: none; padding: 0; margin: 0;}
.mainmenu a {display: block; background-color: #273C53; text-decoration: none; padding: 10px; color: #fff;}
.mainmenu a:hover {background-color: #333;}
.mainmenu li:hover .submenu {display: block; max-height: 400px;}
.submenu a {background-color: #333;}
.submenu a:hover {background-color: #273C53;}
.submenu {overflow: hidden; max-height: 0; -webkit-transition: all 0.5s ease-out;}
/* END CSS STYLO DE MENUS DENTRO DEL SIDEBAR */



/* CSS ESTILOS PARA LAS TABLAS RESPONSIVAS */
#customers { border-collapse: collapse; width: 100%;}
#customers td, #customers th { border: 1px solid #ddd; padding: 8px;}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th { padding-top: 10px; padding-bottom: 10px; text-align: left; background-color: #273C53; color: white;}
/* END CSS ESTILOS PARA LAS TABLAS RESPONSIVAS */