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

@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,900&family=Poppins:wght@500&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(90deg, #e2e2e2, #c9d6ff);
  color: #3D434A;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

/*  CSS STILES PARA DAR ESPACIO ENTRE CLASS O DIV  */
.separator {display: flex; justify-content: center; margin-top: 100px;}
 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;}
/* END CSS STILES PARA DAR ESPACIO ENTRE CLASS O DIV  */


/*  CSS STYLOS PARA CLASES DE FONDOS  */
.bgalert {background-color:#eafaf1;	border-radius:8px; padding: 15px; height:auto; margin-top: 5px;margin-bottom: 10px;border: 0.5px solid #ddd;}
.bgwarning {background-color:#FFCA2C; padding: 5px; font-size:20px;}
/*  END CSS STYLOS PARA CLASES DE FONDOS  */



/* CSS STYLES PARA BOTONES */
.btn_blue{background-color:#268FFF;	border-radius:5px; border:1px solid #268FFF; display:inline-block;	cursor:pointer;
	color:#FFF;	font-size: 16px; padding:10px; text-align:center; text-decoration:none;	width:auto;}
.btn_bluefor{background-color:#2A5B83;	border-radius:5px; border:1px solid #268FFF; display:inline-block;	cursor:pointer;
	color:#FFF;	font-size: 16px; padding:10px; text-align:center; text-decoration:none;	width:auto;}	

.btn_warning {background-color:#FFC107; border-radius:5px; border:1px solid #FFC107; display:inline-block; cursor:pointer; color:#333;
	font-size: 16px; padding:10px; text-align:center; text-decoration:none;	width:auto;}



	
.btn_greendicon{background-color:#28A745; border-radius:5px; display:inline-block; cursor:pointer; color:#FFF;
	font-size: 12px; padding: 5px;	text-align:center;	text-decoration:none; width: 40px;}
.btn_redicon{background-color:#DC3545; border-radius:5px; display:inline-block; cursor:pointer; color:#FFF;
	font-size: 12px; padding: 5px;	text-align:center;	text-decoration:none; width: 40px;}	
	
/* END CSS STYLES PARA BOTONES */	

.txttitle {font-family: "Merriweather", serif; font-weight: 900; font-size: 20px; color:#2A5B83}
.textred {font-family: "Merriweather", serif; font-weight: 900; font-size: 28px; margin-bottom: 50px; color:#E55947;}



/* CSS STYLES PARA FORMULARIOS Y LOGIN */
.wrap {width: 100%;	height: 100%; display: flex; justify-content: center; align-items: center;  background-size: cover;	margin-top: 20px;}
.cardlogin {width: 350px; background-color: #fff; color:#3D434A; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;}
.cardwhite{background:#fff;color:#333;border-radius:8px;padding: 20px;height:auto;margin-top: 5px;border-top-width: 0.5px;
border-right-width: 0.5px;border-bottom-width: 0.5px;border-left-width: 0.5px;border-top-style: solid;border-right-style: solid;
	border-bottom-style: solid;	border-left-style: solid;border-top-color: #DDD;border-right-color: #DDD;border-bottom-color: #DDD;
	border-left-color: #DDD;margin-bottom: 10px;}  
.checkbox {width:15px; height:15px;}
.form-header{ text-align: center;  margin-bottom : 2rem;}
.form-group{ margin-bottom: 1rem;}
input{ background-color: #fff; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 100%; color: #333; outline: none;  	
       border-radius: 5px;}
.inputset {background-color: #ecececdd; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 100%; color: #333;
  outline: none; border-radius: 5px;}	   
.inputlok {background-color:#666; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 100%; color: #FFF; outline: none;
       border-radius: 5px;}
.inputcant {background-color:#fff; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 40px; color: #3D434A; outline: none;
       border-radius: 5px;}	  
/* END CSS STYLES PARA FORMULARIOS Y LOGIN */





/** CSS STYILE ICONO O LOGO RENDONDO AL INCIAR SESION */
.clasicono {border: 2px solid #E55947; border-radius: 5px; background:#FFFFFF; -moz-border-radius: 50%; -webkit-border-radius: 50%;
    		padding: 5px; width: 80px; height: 80px; vertical-align: middle;  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.clasicono:hover {border: 2px solid #5EC2A0; box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); opacity: 1.0; } /* For IE8 and earlier */
/** END CSS STYILE ICONO O LOGO RENDONDO AL INCIAR SESION */


/* CSS STYLES PARA ADAPTAR IMAGENES*/
.imgicon  { font-size: 48px; color: #00A6E2;}
.imgdrop { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%; vertical-align: middle;}
.imglogo{width:200px; height:122px;} /* CSS coloca la imagen con este tamaño*/
.imgbgray {filter: grayscale(1); max-width: 100%} /* CONVIERTE LA IMGEN DE COLOR A GRIS */
.imgresp {max-width: 100%; }/* CSS acomoda la imagen con tamaño de acuerdo al DIV o CLASS */
.imgbor {max-width: 100%; border-radius:5px;} /* CSS acomoda la imagen y redondea el borde con tamaño de acuerdo al DIV o CLASS */
img.txtcenter{ max-width: 100%; vertical-align: middle;} /* CSS centra la imagen con el texto */
/* END CSS STYLES PARA ADAPTAR IMAGENES*/


/* CSS STYLE ANIMACIONES E IMAGENES ESPECIALES */
.moveanimation {position: relative; max-width: 100%; -webkit-animation: move-animation 2s ease-in-out infinite; animation: move-animation 2s 
             ease-in-out infinite; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
@-webkit-keyframes move-animation {0% {top: 3px;} 50% {top: -3px;} 100% {top: 3px;}}
.moveanimat {position: relative; max-width: 100%; -webkit-animation: move-animation 2s ease-in-out infinite; animation: move-animation 2s              ease-in-out infinite;}
@-webkit-keyframes move-animation {0% {top: 3px;} 50% {top: -3px;} 100% {top: 3px;}}
/* END CSS STYLE ANIMACIONES E IMAGENES ESPECIALES */


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

.cl10 {float: left; width: 10%; padding: 5px;}
.cl14 {float: left; width: 14%; 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, .cl14, .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 Stylo para 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: #f5f9fc;}
#customers th {padding-top: 10px; padding-bottom: 10px; text-align: left; background-color: #428BCA; color: white;}
/* END CSS Stylo para tablas responsivas */



h3 {
  display: inline-block;
  position: relative;
  text-align: center;
  font-size: 1.5em;
  color: #cecece;
}
h3:before {
  content: "\25C0";
  position: absolute;
  left: -50px;
  -webkit-animation: leftRight 2s linear infinite;
  animation: leftRight 2s linear infinite;
}
h3:after {
  content: "\25b6";
  position: absolute;
  right: -50px;
  -webkit-animation: leftRight 2s linear infinite reverse;
  animation: leftRight 2s linear infinite reverse;
}
@-webkit-keyframes leftRight {
  0%    { -webkit-transform: translateX(0)}
  25%   { -webkit-transform: translateX(-10px)}
  75%   { -webkit-transform: translateX(10px)}
  100%  { -webkit-transform: translateX(0)}
}
@keyframes leftRight {
  0%    { transform: translateX(0)}
  25%   { transform: translateX(-10px)}
  75%   { transform: translateX(10px)}
  100%  { transform: translateX(0)}
}