/*Estilo Gereral del Software*/
body{font-family:Arial,Helvetica,sans-serif;
	font-size:13px;
	line-height:1.4;
	color:#333;
	background-color:#fff
	}
/*Tipo de letra*/
@font-face { 
  font-family: "Ionicons"; 
  src: url("fonts/ionicons.eot?v=1.5.2");
  src: url("fonts/ionicons.eot?v=1.5.2#iefix") format("embedded-opentype"), 
       url("fonts/ionicons.ttf?v=1.5.2") format("truetype"), 
       url("fonts/ionicons.woff?v=1.5.2") format("woff"), 
       url("fonts/ionicons.svg?v=1.5.2#Ionicons") format("svg"); 
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Conv_Champignon';
  src: url('../css/fonts/Champignon.eot');
  src: local('☺'), url('../css/fonts/Champignon.woff') format('woff'), 
  url('../css/fonts/Champignon.ttf') format('truetype'), 
  url('../css/fonts/Champignon.svg') format('svg');
  font-weight: bold;
  font-style: normal;
  padding:0px;
}
/*--------------------------------------------*/

.mini_eslogan{
  font-family:'Conv_Champignon',Sans-Serif;
  font-size: 60px;
  padding-bottom:0px;
  padding-left:10px;
  position:relative;
  color: #009CD5;
}
.mini_eslogan_up{
  font-family:'Conv_Champignon',Sans-Serif;
  font-size: 40px;
  padding-bottom:0px;
  padding-left:10px;
  position:relative;
}
input,button,select,textarea{
	font-family:inherit;
	font-size:inherit;
	line-height:inherit}
a{color:#15c}
a:hover,a:focus{color:#15c}
	.img-rounded{border-radius:4px}
	.img-thumbnail{display:inline-block;height:auto;max-width:100%;padding:0;line-height:1.4;background-color:#fff;border:3px solid #fff;border-radius:0;-webkit-box-shadow:0 0 0 1px #aaa;box-shadow:0 0 0 1px #aaa;-webkit-transition:none;transition:none}
	.text-primary{color:#4d90fe}
	.text-primary:hover{color:#1a70fe}
	.text-warning{color:#333}
	.text-warning:hover{color:#1a1a1a}

code{padding:2px 4px;font-size:90%;border-radius:0}

pre{padding:9px;margin:0 0 9px;font-size:12px;line-height:1.4;border-radius:0}

.menucenter
{
  width: 70%;
  height: 98%;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border-radius: 30px;
  border: 2px solid #00A784;
  
  display: flex;
  flex-direction:row;
  justify-content:center; 
  text-align: center;  
  flex-wrap:wrap;
  
}

.elementosmenu
{
  color: #fff;
  text-align: center;  
  background: #00A784;
  width: 200px;
  height: 100px;
  border-radius: 30px;
  border: 1px solid #fff;
  font-size: 15px; 
  font-family: verdana ; 
  margin:10px auto;
  padding: 3px;
  line-height: 100px;
 text-decoration: none;  
}
.elementosmenu div
{
 text-decoration: none; 
 color: #fff;
}

.elementosmenu div:hover 
{ 
  display: block;
  background: #D0932A;
  color: #fff;
  border-radius: 30px;
  border: 1px solid #fff; 

}
.elementosmenu a
{
 text-decoration: none; 
 color: #fff;
}

.elementosmenu a:hover 
{ 
  display: block;
  background: #fff;
  color: #000;
  border-radius: 30px;
  border: 1px solid #fff; 

}
 
.cabecera 
{
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    background:#286af0;
    padding:10px;
    flex-wrap: wrap;
    border-radius: 10px;  
}
/* esta clase solo funciona para LOGIN*/
.cont
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow:hidden; 
    background-image: url('../images/bg_poseidon3.png'); 
    /*background-repeat: no-repeat; */
    /*width: 100%; 
    height: 100%;*/
    background-size: cover; 
}
.cuerpo
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;    
}
.cuerpo_checkin
{	margin-left:-65px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 1430px;
}
#info_folio{
	border:none;
	background: none repeat scroll 0 0 #00A784;
	color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 0px;
    text-shadow: 1px 1px 1px #AAA;
    width: 20%;
	display:none;
}
/*==Responsive formulario==*/
.responsive_chk_hp{
  display: flex;
  flex-direction: row;
  align-content: space-between; 
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:0px;  
  list-style-type: none;
  border-radius: 15px ;
  border: 2px solid #00A784;
  flex-wrap: wrap;
  text-align: center;
}
.responsive_chk{
  display: flex;
  flex-direction: row;
  align-content: space-between; 
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:10px;  
  list-style-type: none;
  border-radius: 15px ;
  border: 2px solid #00A784;
  flex-wrap: wrap;
  text-align: center;
}
.responsive_chk ul {
    width:auto;
    list-style-type:none;
    margin:0px;
    
    padding:0px;
}
.responsive_chk li
{
	padding:12px; 
    position:relative;
}

.responsive_chk label 
{
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 2px;
    width: 70px;
	margin-left:30px;
	margin-top:9x;
	margin-right:15px;
}

 
.responsive_chk button 
{
    margin-left:0px;
	margin-right:30px;
	margin-top:0px;
	margin-bottom:0px;
}


/*----- estilos visuales de los elementos --------*/
/*Input*/
.responsive_chk input
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:10px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
	height:25px; 
    width:150px; 
    padding:5px 8px; 
	margin-left:0px;
}

/* === Estilos de Validacion === */   
.responsive_chk input:focus{
	box-shadow: 0 0 5px #d45252;
	color: #000;
	border-color: #fff;
	border-radius:0px; 
	background: #EEE; 
	border:1px solid #555; 
	padding-right:30px;
 }

 .responsive_chk input:[readonly='readonly'] {
	box-shadow: 0 0 5px #d45252;
	color: #000;
	border-color: #fff;
	border-radius:0px; 
	background: #EEE; 
	border:1px solid #555; 
	padding-right:30px;
 
 }

/*Select*/
.responsive_chk select
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:0px;
	padding-left:0px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
	width:165px;
	height:35px;
	margin-left:0px;	

}
.responsive_chk select:focus
 {
    background: #EEE; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:0px;
	border-radius:10px;
	
}
 
.responsive_chk input:required:valid, .responsive_chk textarea:required:valid, .responsive_chk select:required:valid {
    box-shadow: 0 0 5px #00A784;
    background: #FAFFBD;
    border-color: #00A784;
    border-radius:10px;
}
.responsive_chk input:focus:invalid, .responsive_chk textarea:focus:invalid, .responsive_chk select:focus:invalid {
   box-shadow: 0 0 5px #d45252;
   background: #FAFFBD;
   color: #000;
   border-color: #fff;
   border-radius:10px;
 } 
 /*=Fin responsive=*/


ul.log
{

  display: flex;
  flex-direction: column;
  justify-content: center;    
  flex-wrap: wrap;
  padding: 15px;
  background: #fff;  
  width: 330px;
  border-radius: 15px;
  border: 2px solid #00A784;
  list-style-type: none;
  position: absolute;
  top: 50%; 
  left: 50%;
  height: 320px;
  transform: translate(-50%, -50%);


}
 .formu 
{   
  display: flex;
  flex-direction: row;
  align-content: space-between; 
  padding: 5px; 
  list-style-type: none;
  border-radius: 15px ;
  border: 2px solid #00A784;
  flex-wrap: wrap;
  text-align: center;
}

 
 .boton
{   
  display: flex;
  flex-direction: row;  
  justify-content: center;  
  list-style-type: none;
   flex-wrap: wrap;
}
/* esta clase solo funciona para LOGOUT*/

.user
{
  position:relative;
    color: #fff;
  margin-left:-170px;
    text-decoration: none;
    font-size: 12px; 
    font-family: verdana ; 
}


footer {
   display: flex;
   flex-wrap:wrap;
   clear: both;
   background: #286af0;
   text-align: center;
   color: #fff;
   font-family: verdana ; 
   justify-content:center;
   border-radius: 10px;  
   margin: 10px auto;
 }

figure 
{
    margin: 0 auto;
    padding: 5px;
}
/*Caja contenedora*/   
#men 
{   
    display:flex;
    flex-direction:row;
    justify-content:center;
    font-size: 0.9em; 
    width: 80%;
    padding: 10px;
	z-index: 20000;
    list-style-type: none;
    font-family: sans-serif;
    flex-wrap: wrap;
 }

 /*formularios en general*/
 

/* Estilos que crean el menú desplegable */
/*Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar { padding:0; margin:0; }

/*Elementos items principales de menú que se muestran siempre*/
#navbar li 
{   list-style: none; 
    float: left; 
    color: #fff;
    margin:5px;
    border: 2px solid #fff;
    background: #00A784;
    padding: 5px;
    border-radius: 10px;  
    text-shadow: 1px 1px 1px #AAA;
}
   
#navbar li a 
{
   display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
   padding: 0px 8px; 
   color: #fff;
   text-decoration: none; 
   font-size: 100%;  

}

/*Listas de subitems de menú*/   
#navbar li ul {
   display: none;    /*La lista inicialmente no se muestra debido a display:none; */

  
}
#navbar li:hover ul {
   font-size: 12px;
   display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
   position: absolute; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/
   margin: 5px; padding: 0px; /*Anulamos margin y padding que por defecto introducen navegadores*/
}
#navbar li:hover li 
{ 
    float: none; /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */
   
} 
/*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a 
{   
   color: #000; 
}

/*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/   
#navbar li li a:hover 
{ 
    
   background: #00A784;
   color: #fff; 
}

   
.limpiador
{
  padding:0; 
  border-style:none; 
  clear:both; 
} /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/

/*Formulario */
h2 
{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    text-shadow: 1px 1px 1px #AAA;
    width: 90%;
}
h2._2 
{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    text-shadow: 1px 1px 1px #AAA;
    width: 99%;
}
h2._3
{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 4px;
    text-shadow: 1px 1px 1px #AAA;
    width: 100%;

}

.h2_login 
{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #AAA;
    width: 90%;
}


._2 .form
{
  text-align: center;
  padding-right: 0px;
  padding-left: 1224px; 
}

h3 
{
    color: #FF0000;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    text-shadow: 1px 1px 1px #AAA;
    width: 90%;
    text-align: center;
    
}

h4
{
  font-size: 15px;
}
/*--- estilos para los ul y li del formulario ---*/
.contact_form .ap
{
   height:25px; 
    width:50px; 
}
.contact_form .consul
{
   height:25px; 
    width:350px; 
}
.contact_form .consul_2
{
   height:31px; 
    width:260px; 
}
.contact_form .ap_2
{
   height:30px; 
    width:150px; 
}
.resultado
{
border:1px solid #fff; 
color: #000;
font-family: sans-serif;
text-align: center;
}
label 
{
   /* color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px ;
	margin-right: 2px;
    padding: 2px;
    width: 100px;
	*/
  
}
._label_2 
{
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px ;
    padding: 2px;
    width: 100px;
  
}

/*Formato para formulario*/
.contact_form .can
{
   height:25px; 
    width:30px; 
}
.contact_form ul {
    width:90%;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.contact_form li
{
    padding:12px; 
    position:relative;
}

.contact_form label 
{
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px ;
    padding: 2px;
    width: 100px;
}

.contact_form input
{
    height:25px; 
    width:200px; 
    padding:5px 8px;      
}
.contact_form select
{
    height:30px; 
    width:200px; 
    padding:5px 8px;
    
}

.contact_form textarea 
{
    padding:8px; 
    width:300px;

}

.contact_form .checkbox
{
    height:18px; 
    width:18px;
  margin-left:16px;
  margin-right:-16px
}

.contact_form button 
{
    margin-left:35px;
	margin-right:0px;
}

/*----- estilos visuales de los elementos --------*/
.contact_form input, .contact_form textarea, .contact_form select
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus, .contact_form select
 {
    background: #EEE; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:80px;
    border-radius:10px;

}
/* === Estilos de Validacion === */    
 
.contact_form input:required:valid, .contact_form textarea:required:valid, .contact_form select:required:valid {
    box-shadow: 0 0 5px #00A784;
    background: #FAFFBD;
    border-color: #00A784;
    border-radius:10px;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid, .contact_form select:focus:invalid {
   box-shadow: 0 0 5px #d45252;
   background: #FAFFBD;
   color: #000;
   border-color: #fff;
   border-radius:10px;
 }


 /* == Boton de camara para fomrularios ==*/
 .btn_camara {
	background-image: url("../images/camera.png");
	background-size: 23px 20px;
	background-position: 10px 7px;	
	background-repeat: no-repeat; 
	-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
	-moz-background-clip: padding;     /* Firefox 3.6 */
	background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */	
	padding: 11px 33px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #444;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
	text-align: right;
	background-color: #FAFFBD;
	border: 1px solid #f1f1f1;
	border-radius: 10px;
	box-shadow: 0 0 5px #00A784;
	border-color: #00A784;
	cursor: pointer;
	margin-right:0px;	
}

 .btn_huella {
	background-image: url("../images/finger.png");
	background-size: 23px 20px;
	background-position: 10px 7px;	
	background-repeat: no-repeat; 
	-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
	-moz-background-clip: padding;     /* Firefox 3.6 */
	background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */	
	padding: 11px 33px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #444;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
	text-align: right;
	background-color: #FAFFBD;
	border: 1px solid #f1f1f1;
	border-radius: 10px;
	box-shadow: 0 0 5px #00A784;
	border-color: #00A784;
	cursor: pointer;
	margin-right:0px;	
}

 .btn_camara_hp { 
	background-image: url("../images/camera.png");
	background-size: 15px 12px;
	background-position: 6px 4px;	
	background-repeat: no-repeat; 	
	-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
	-moz-background-clip: padding;     /* Firefox 3.6 */
	background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */	
	padding: 4px 11px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #444;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
	text-align: right;
	background-color: #FAFFBD;
	border: 1px solid #f1f1f1;
	border-radius: 7px;
	box-shadow: 0 0 5px #00A784;
	border-color: #00A784;
	cursor: pointer;
	margin-right:0px;
	
}
 .btn_huella_hp{ 
	background-image: url("../images/finger.png");
	background-size: 15px 12px;
	background-position: 6px 4px;	
	background-repeat: no-repeat; 	
	-webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
	-moz-background-clip: padding;     /* Firefox 3.6 */
	background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */	
	padding: 4px 11px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	line-height: 1;
	color: #444;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
	text-align: right;
	background-color: #FAFFBD;
	border: 1px solid #f1f1f1;
	border-radius: 7px;
	box-shadow: 0 0 5px #00A784;
	border-color: #00A784;
	cursor: pointer;
	margin-right:0px;
}
.checked_info {
	padding-top:0px;
	padding-bottom:0px;
	margin-top:-30px;
	margin-right:0px;
	margin-left:0px;
	display:none;
	position: relative;
}
.checked_info_chk {
	padding-top:0px;
	padding-bottom:0px;
	margin-top:-30px;
	margin-right:0px;
	margin-left:288px;
	display: block; 
	position: fixed;
}
.checked_info_apto {
  padding-top:60px;
  padding-bottom:0px;
  margin-top:-90px;
  margin-right:0px;
  margin-left:315px;
  display: block; 
  position: fixed;
}
.btn_delete_{
	/*background:#E40000;
	color:#fff;
	font-weight:bold;*/
}
.btn_delete{
	/*background:#E40000;
	color:#fff;
	font-weight:bold;*/
} 
 
/* === Clase para Formulario para inputs/  LOGIN === */ 
  .div_formu 
{   
  display: flex;
  flex-direction: row;
  align-content: space-between; 
  padding: 5px; 
  list-style-type: none;
  border-radius: 8px ;
  border: 2px solid #00A784;
  flex-wrap: wrap;
  text-align: center;
  width:100%;
}
 .div_form.can
{
   height:300px; 
    width:30px; 
	 
}
.div_form h2{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    text-shadow: 1px 1px 1px #AAA;
    width: 90%;
}

.div_form ul {
    width:90%;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.div_form li
{
    padding:12px; 
    position:relative;
}
.ul_hp_checkin {	  
	font-size: 12px;
	display: block; 
	position: fixed; 
	text-align:left; 
	padding: 0px; 
	z-index:99999999999999999999; 
	background: #FFAA33;
	color: #fff;
	font-weight: bold;
	border-radius: 6px ;
	border: 1px solid #00A784;
  width: 100%;
	
}
.ul_hp_checkin :hover{
	
	background: #FAFFBD;
	color: #000;
	font-weight: bold;
	border-radius: 6px ;
}
.ul_hp_adc {    
  font-size: 12px;
  display: block; 
  position: relative; 
  text-align:left; 
  padding: 0px; 
  z-index:9999; 
  background: #FFAA33;
  color: #fff;
  font-weight: bold;
  border-radius: 0px 6px 6px 0px ;
  border: 1px solid #00A784;
  width: 30%;
  margin-left: 95px;
  height: 19px;
  
}
/*.ul_hp_adc :hover{
  
  background: #FAFFBD;
  color: #000;
  font-weight: bold;
  height: 19px;
  border-radius: 0px 6px 6px 0px ;
}*/

.div_form label 
{
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 2px;
    width: 70px;
	margin-left:30px;
	margin-top:9x;
	margin-right:15px;
}

.div_form .checkbox
{
	height:18px; 
	width:18px;
	margin-left:16px;
	margin-right:-16px
}

.div_form button 
{
    margin-left:0px;
	margin-right:30px;
	margin-top:0px;
	margin-bottom:0px;
}


.long_input
{
	width:200px; 
}

/*----- estilos visuales de los elementos --------*/
/*Input*/
.div_form input
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:10px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
	height:25px; 
    width:150px; 
    padding:5px 8px; 
	margin-left:0px;
}

/* === Estilos de Validacion === */   
.div_form input:focus{
	box-shadow: 0 0 5px #d45252;
	color: #000;
	border-color: #fff;
	border-radius:0px; 
	background: #EEE; 
	border:1px solid #555; 
	padding-right:30px;
 }

 .div_form input:[readonly='readonly'] {
	box-shadow: 0 0 5px #d45252;
	color: #000;
	border-color: #fff;
	border-radius:0px; 
	background: #EEE; 
	border:1px solid #555; 
	padding-right:30px;
 
 }

/*Select*/
.div_form select
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:0px;
	padding-left:0px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
	width:165px;
	height:35px;
	margin-left:0px;	

}
.div_form select:focus
 {
    background: #EEE; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:0px;
	border-radius:10px;
	
}
 
.div_form input:required:valid, .div_form textarea:required:valid, .div_form select:required:valid {
    box-shadow: 0 0 5px #00A784;
    background: #FAFFBD;
    border-color: #00A784;
    border-radius:10px;
}
.div_form input:focus:invalid, .div_form textarea:focus:invalid, .div_form select:focus:invalid {
   box-shadow: 0 0 5px #d45252;
   background: #FAFFBD;
   color: #000;
   border-color: #fff;
   border-radius:10px;
 } 
 /* === Clase para Fotmulario Checkin === */
 .div_checkin{
	width:99%;
	border-radius: 9px;
	border: 3px solid #00A784;
	background-color: #FDFDFB;
	font-family: Helvetica, Arial, sans-serif;
	text-align:justify;
	margin-top: 0px	 
	}
/*Botones footer de checkin inicial*/
.btn_chk{
	padding-top:20px;
	padding-bottom:60px;
	margin-right:20px;
}
.clear{
	padding-left:20px;
}

.div_checkin.can
{
   height:225px; 
    width:30px; 
	 
}
.div_checkin h2{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    display: flex;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    text-shadow: 1px 1px 1px #AAA;
    width: 90%;
}

.div_checkin ul {
    width:90%;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.div_checkin li
{
    padding:12px; 
    position:relative;
}

.div_checkin label 
{
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 2px;
    width: 80px;
	margin-left:10px;
	margin-top:10px;
}

.div_checkin select
{
    height:30px; 
    width:230px; 
    
}

.div_checkin .checkbox
{
	height:18px; 
	width:18px;
	margin-left:16px;
	margin-right:-16px
}

.div_checkin button 
{
    margin-left:44px;
	margin-right:30px;
	margin-top:30px;
	margin-bottom:12px;
}

.div_checkin input
{
    height:25px; 
    width:200px; 
    padding:5px 8px; 
	margin-left:10px;
}

/*----- estilos visuales de los elementos --------*/
.div_checkin input, .div_checkin textarea, .div_checkin select
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.div_checkin input:focus, .div_checkin textarea:focus, .div_checkin select
 {
    background: #EEE; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:40px;
	border-radius:10px;
	
}
/* === Estilos de Validacion === */   
.div_checkin input:focus{
   box-shadow: 0 0 5px #d45252;
   background: #FAFFBD;
   color: #000;
   border-color: #fff;
   border-radius:10px;
 } 
 
.div_checkin input:required:valid, .div_checkin textarea:required:valid, .div_checkin select:required:valid {
    box-shadow: 0 0 5px #00A784;
    background: #FAFFBD;
    border-color: #00A784;
    border-radius:10px;
}
.div_checkin input:focus:invalid, .div_checkin textarea:focus:invalid, .div_checkin select:focus:invalid {
   box-shadow: 0 0 5px #d45252;
   background: #FAFFBD;
   color: #000;
   border-color: #fff;
   border-radius:10px;
 } 
 
 
/* === Clase para Formulario para inputs/  Caja y los Reportes === */
 /*----- estilos visuales de los elementos --------*/
.contact_form_2 input, .contact_form_2 textarea, .contact_form_2 select
{ 
    border:1px solid #286af0; 
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:10px;
    color: #000;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
 .contact_form_2 ul {
    width:90%;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.contact_form_2 li
{
    padding:12px; 
    position:relative;
}

.contact_form_2 label 
{
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-top: 2px ;
    padding: 2px;
    width: 100px;
}

.contact_form_2 input
{
    height:25px; 
    width:200px; 
    padding:5px 8px;      
}
.contact_form_2 input:required:valid, .contact_form textarea:required:valid, .contact_form select:required:valid {
    box-shadow: 0 0 5px #00A784;
    background: #FAFFBD;
    border-color: #00A784;
    border-radius:10px;
}
.contact_form_2 input:focus:invalid, .contact_form_2 textarea:focus:invalid, .contact_form_2 select:focus:invalid {
   box-shadow: 0 0 5px #d45252;
   background: #FAFFBD;
   color: #000;
   border-color: #fff;
   border-radius:10px;
 }
.contact_form_2 select
{
    height:30px; 
    width:200px; 
    padding:5px 8px;
    
}
/*fin clase añadida*/

 
 button.submit {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.submit:hover {
    opacity:.90;
    cursor: pointer; 
    color: #00A784;
}
 button.clean {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #096FF0;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.clean:hover {
    opacity:.90;
    cursor: pointer; 
    color: #286AF0;
} 
button.chk_ok {
   padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #237423;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.chk_ok:hover {
    opacity:.90;
    cursor: pointer; 
    color: #38AB4A;
}

button.alerta:hover {
    opacity:.90;
    cursor: pointer; 
    color: #00A784;
}
button.alerta {
   padding: 6px 6px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   margin-bottom: 10px;
   margin-top: 10px;
}
button.alerta:hover {
    opacity:.90;
    cursor: pointer; 
    color: #00A784;
}
 button.finger {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.finger:hover {
    opacity:.90;
    cursor: pointer; 
    color: #fff;
}
input.submit {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
input.submit:hover {
    opacity:.90;
    cursor: pointer; 
    color: #00A784;
}

button.submit:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset; 
}
button.submit2 {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #FFF;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff0000), to(#fF0000));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FF0000);
   background-color: #fff;
   border: 2px solid #fF0000;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
button.submit2:hover {
    opacity:.90;
    cursor: pointer; 
    color: #FFFF00;
}
button.submit2:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset; 
}
/*css para div de notificacion*/
.contact_form div .notificacion {
  margin-left: 29px;
  margin-top:-3px;
  top:  77px; 
  left: 143px;
   padding:12px; 
    position:absolute;

}

.consecutivo
{

color: #ff0000;
font-family: sans-serif;
font-size: 30px;
font-weight: bold;
margin-top: 2px ;
padding: 2px;
width: 50%;
display: flex;
}

.consecutivo_2
{

color: #0000ff;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-top: 2px ;
padding: 2px;
width: 50%;
display: flex;
}
h5 
{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    font-family: sans-serif;
    font-size: 14px;
    padding: 5px;
    text-shadow: 1px 1px 1px #AAA;
    width: 89%;
    text-align: center;
	margin-top:-10px;
	
}
.checkin_h5 
{
    background: none repeat scroll 0 0 #00A784;
    border-radius: 10px;
    color: #FFF;
    font-family: sans-serif;
    font-size: 14px;
    padding: 8px;
    text-shadow: 1px 1px 1px #AAA;
    width: 100%;
    text-align: left;
	margin-top:-8px;
	margin-left:-7px;
	
}
#historial{
	width:1475px;
	height:300px;
	overflow:auto;	
	border-radius: 5px;
	border: 2px solid #00A784;
	background-color: #F7F4E6;
	font-family: Helvetica, Arial, sans-serif;
	padding-left:14px;
	text-align:justify;
	 margin-top: 2px
	
	}
	.load{
	  position: absolute;
	  top: 50%; 
	  left: 50%;
	  transform: translate(-50%, -50%);
	}	

	#contenedor_mensaje{
	width:1475px;
	border-radius: 5px;
	border: 2px solid #00A784;
	background-color: #F7F4E6;
	font-family: Helvetica, Arial, sans-serif;
	text-align:justify;
	 margin-top: 0px	 
	}
	
	#contenedor_mensaje_bd{
	width:auto;
	height:auto;
	border-radius: 5px;
	border: 2px solid #00A784;
	background-color: #FFF;
	font-family: Helvetica, Arial, sans-serif;
	padding:2px 40px 0px 0px;
	text-align:justify;
	margin-top: 5px
	}
	
	#caja_msg_bd{
	padding:2px 0px 10px 10px;
	width:1360px;
	word-wrap: break-word;
	text-align:justify;
	 margin-left: 0px;
	 margin-right: 0px;
	}
.input_chat{
	border:1px solid #286af0; 
	box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
	border-radius:0px;
	color: #000;
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	padding-right:30px;
	-moz-transition: padding .25s; 
	-webkit-transition: padding .25s; 
	-o-transition: padding .25s;
	transition: padding .25s;
	
	height:25px;
	-moz-box-shadow: 0px 0px 10px #F5B82A; 
	-webkit-box-shadow: 0px 0px 10px #F5B82A; 
	box-shadow: 0px 0px 10px #F5B82A;
	min-width: 10%;
	max-width: 90%;
	width: 80%; padding: .3em 1em;
	
}
/*Estilo para Labels en Checkin*/

.btn {
  display: inline-block;
  background: transparent url(../URL_imagen.png) repeat-x 0 0;
  border: 1px solid rgba(0,0,0,0.4);
  padding: 5px 10px 6px 10px;
  font-weight: 8px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  -moz-border-radius: 20px;
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

.orange { background-color: #fff; color: #141414;font-size:12px; height: 25px; }
.orange:hover { background-color: #f8c46d; color: #FFF; }

.black { background-color: #000; color: #141414;font-size:12px; height: 25px;}
.black:hover { background-color: #f8c46d; color: #000; }


.rotate_canvas{
filter: FlipH;
border-radius: 0px;

}

.div_image{
  text-align: center;
  border-radius: 0px;
//border: 2px solid #00A784;
width:650px;
border-width:auto;
width:650px; 
height:440px;
}

.no_line{
  outline: none;
}