@charset "utf-8";
/* CSS Document */
.borde{
	border:1px solid #03C;
}
body,td,th{
	margin-bottom:0;
	margin-top:0;
	margin-left:0;
	margin-right:0;
	user-select:none;
	box-sizing:border-box; 
	font-family:Arial, Helvetica, sans-serif; 
}
/********************index********************/
.cuadro_index{
	width:320px;
	height:370px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:0;
	box-sizing:border-box;
	font-family:Arial, Helvetica, sans-serif; 

}
.cindex1{
	border:1px solid #666;
}
.cindex2{
	background-color:#8DC53E;
	text-align:right;
	border:1px solid #666;
}
.centrado{
	text-align:center;
}
.derecha{
	text-align:right;
}
.sangria{
	padding-left:10%;
}
.altura1{
	height:30px;
	line-height:30px;
}
.texto2{
	font-size:12px;
	color:#666;
	text-decoration:none;
}
/********************index********************/

/********************cabecera*****************/
.cabecera{
	display:table;
	margin:auto;
	width:900px;
}
.cabecera_logo{
	display:table-cell; 
	width:15%; 
	vertical-align:middle;
}
.cabecera_cuerpo_titulo{
	display:table-cell; 
	width:85%; 
	vertical-align:middle; 
	height:80px;
}
.titulo_principal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	color: rgba(255,255,255,1);
	display:inline-block; 
	width:90%;
}

.fondo_titulo {
	height:25px;
	padding: 5px; 
	background-color: #3b1151;
	background-repeat: no-repeat;
	border-radius: 15px;
	text-decoration: none;
	color: #ffffff;
	
	}
.texto_cabecera {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: rgba(51,51,51,1);
	display:inline-block; 
	width:33%; 
	box-sizing:border-box;
	line-height:20px;
}
/********************cabecera*****************/
/********************cabecera 2*****************/
.cabecera2{
	//display:table;
	margin:auto;
	width:900px;
}
.cabecera2_c1{
	width:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-style:italic;
}
.cabecera2_c2{
	width:110px;
	text-decoration:none;
}
.fondo_titulo2 {
	height:20px;
	padding: 5px; 
	background-color: #3b1151;
	background-repeat: no-repeat;
	border-radius: 10px;
	text-decoration: none;
	color:#FF0;
	
	}
/********************cabecera 2*****************/

/*****************menu principal**************/
#tabla1{
	width:900px;
}
#menu1{
	width:500px;
	height:400px;
}
#menu_titulo{
	width:302px;
	height:25px;
	padding-left:10%;
	padding-right:10%;
}
.botones{
	padding-left:10%;
	padding-right:10%;
}
.botones a {
text-align: left;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: 300px;
height:15px;
padding: 5px; 
background-color: #3b1151;
background-repeat: no-repeat;
float: left;
border-radius: 5px;
text-decoration: none;
color: #ffffff;

}
.botones a:hover {
	text-align: left;
	vertical-align: middle;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	width: 300px;
	height:15px;
	padding: 5px; 
	background-color: #ffffff;
	background-repeat: no-repeat;
	float: left;
	text-decoration: none;
	color: #3b1151;
	vertical-align: text-middle;
}


.botones_link {
	padding-left:10%;
	padding-right:10%;
}
.botones_link {
color: #ffffff;
background-color: #006633;
background-repeat: no-repeat;
border-radius: 5px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
height:15px;
padding: 5px;
transition: all 0.5s ease !important;
/*text-align: left;
width: 300px;
*/
}
.botones_link:hover {
	background-color: #CCC;
	background-repeat: no-repeat;
	color: #3b1151;
}

.salir_sistema{
	display:table;
	width:100%;
	vertical-align:middle;
}
.salir_sistema_c1{
	display:table-cell;
	width:90%;
	text-align:right;
}
.salir_sistema_c2{
	display:table-cell;
	width:10%;
}
#salir_sistema{
	display:table-cell;
	text-decoration:none;
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
	vertical-align:middle;
}
/*****************menu principal**************/


/*****************cabeceras tablas******************/
   .cabecera_tabla {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: rgba(255,255,255,1);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,438c38+83,008900+100 */
	background: rgb(180,221,180); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(67,140,56,1) 83%, rgba(0,137,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(67,140,56,1) 83%,rgba(0,137,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(67,140,56,1) 83%,rgba(0,137,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#008900',GradientType=0 ); /* IE6-9 */
 }
 .cabecera_tabla3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: rgba(255,255,255,1);
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
 }
.cabecera_tabla2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color:#000;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,438c38+83,008900+100 */
	background: rgb(180,221,180); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(67,140,56,1) 83%, rgba(0,137,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(67,140,56,1) 83%,rgba(0,137,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(67,140,56,1) 83%,rgba(0,137,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#008900',GradientType=0 ); /* IE6-9 */
 }
.filtro1{
	background-position: left center;
	background-image: url(imagenes/flecha4.png);
	background-repeat: no-repeat;
		}
.filtro2{
	background-position: right center;
	background-image: url(imagenes/ojo2.png);
	background-repeat: no-repeat;
		}
.texto-href {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	text-decoration: none;
}
/*****************cabeceras tablas******************/


/******************botones ***********************/
input[type=submit]{
	color:white;
	padding:5px;
	background-color: #063;
	border-radius:3px;
	border:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top:2px;
}
input:hover[type=submit]{
	color:#063;
	padding:5px;
	background-color:#CCC;
	transition: all 0.5s ease !important;
	border-radius:3px;
	border:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top:2px;
}
input[type=button]{
	color:white;
	padding:5px;
	background-color:#063;
	border-radius:3px;
	border:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top:2px;
}
input:hover[type=button]{
	color:#063;
	padding:5px;
	background-color:#CCC;
	transition: all 0.5s ease !important;
	border-radius:3px;
	border:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top:2px;
}
button[type=button]{
	color:white;
	padding:3px;
	background-color: #063;
	border-radius:3px;
	border:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
	margin-top:2px;
}
button:hover[type=button]{
	color:#063;
	padding:3px;
	background-color:#CCC;
	transition: all 0.5s ease !important;
	border-radius:3px;
	border:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin-top:2px;	
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number]{
  -moz-appearance:textfield;
}

/******************botones ***********************/


/**************listados ********************/
#menu{
	display:none;
}
#menu_botones{
	display:block;
}
#listado{
	font-size:10px;
}
#fin_lista{
	text-align:center;
	font-size:14px;
}

.borde_imagen {
display:block;
background-color: #F5F5F5;
border: 5px solid #FFFFFF;
box-shadow: 0 0 22px #111111;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
position: relative;
}
.borde_x{
background-color: #F5F5F5;
/*border: 2px solid #FFFFFF;*/
height: 15px;
padding-top:2px;
position: relative;
width: 15px;
border-radius:25px;	
}
#imagen_producto {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-200px;
  display: none;
}
#div_img{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-200px;
  display: none;
}
#div_detalle{
  position: absolute;
  top: 20%;
  left: 50%;
  margin-left:-300px;
  display: none;
  width:600px;
  height:300px;
  border:1px solid #F00;
  background-color:#CCC;
  border-radius:5px;
  overflow:scroll;
  
}

.titulo1 {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	/*background-color: rgba(255,255,255,1);*/
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a {
  position: relative;
}
a{ cursor:pointer; }




/**************listados ********************/
/******************formulario********************/
#tabla_principal {  
   z-index:500;  
   top:300px;
   left:37%;
   right:23%;
   width:100%;
   border: 1px solid #33CCFF;  
   background:#F8F4D8; 
   border:solid 1px #000000; 
   padding:20px;
	border:4px solid #ccc;
	-moz-border-radius: 20px;
	-webkit-border-radius:20px;
	-khtml-border-radius:20px;
   }           
input[type=text]{
}         
input[type=number]{
}
.tabla_img{
	width:100%;
}
.tabla_img1{
	display:inline-block;
	box-sizing:border-box !important;
	width:49% !important;
}
.tabla_img2{
	display:inline-block;
	box-sizing:border-box !important;
	width:49% !important;
}
.tabla_img3{
	display:inline-block;
	box-sizing:border-box !important;
	width:100% !important;
}
/******************formulario********************/


@media screen and (min-width: 1200px) 
	{

	}
@media screen and (min-width: 992px) and (max-width: 1199px) 
	{

	}
@media screen and (min-width: 771px) and (max-width: 991px) 
	{
/********************cabecera*****************/
.cabecera{
	width:700px;
}
.titulo_principal {
	font-size: 20px;
}
.fondo_titulo {
	height:20px;
	padding: 5px; 
	border-radius: 15px;
	}
/********************cabecera*****************/
/********************cabecera 2*****************/
.cabecera2{
	width:700px;
}
.cabecera2_c1{
	font-size:15px;
}
/********************cabecera 2*****************/
/*****************menu principal**************/
#tabla1{
	width:700px;
}
#menu1{
	width:400px;
	height:330px;
}
.botones a {
	font-size: 14px;
	width: 100%;
	height:15px;
	padding: 5px; 
	border-radius: 5px;
}
.botones a:hover {
	font-size: 14px;
	width: 100%;
	height:15px;
	padding: 5px; 
}

/*****************menu principal**************/
/******************formulario********************/
#tabla_principal {  
}
input[type=text]{
	width:80%;
}
input[type=number]{
	width:80%;
}
/******************formulario********************/

	}
@media screen and (max-width: 770px) 
	{
/********************cabecera*****************/
.cabecera{
	width:550px;
}
.titulo_principal {
	font-size: 18px;
}
.fondo_titulo {
	height:18px;
	padding: 4px; 
	border-radius: 12px;
	}
/********************cabecera*****************/
/********************cabecera 2*****************/
.cabecera2{
	width:550px;
}
.cabecera2_c1{
	font-size:13px;
}
.fondo_titulo2 {
	height:17px;
	padding: 5px; 
	border-radius: 7px;
	}
/********************cabecera 2*****************/
/*****************menu principal**************/
#tabla1{
	width:550px;
}
#menu1{
	width:400px;
	height:320px;
}
.botones a {
	font-size: 14px;
	height:15px;
	padding: 5px; 
	border-radius: 5px;
}
.botones a:hover {
	font-size: 14px;
	height:15px;
	padding: 5px; 
}

/*****************menu principal**************/
/************cabeceras tablas***************/
.cabecera_tabla{
	font-size:9px !important;
	font-weight:normal !important;
}
/************cabeceras tablas***************/
/**************listados ********************/
#fin_lista{
	font-size:10px;
}
/**************listados ********************/
/******************formulario********************/
#tabla_principal {
	padding:2px;
	font-size:10px;  
}
input[type=text]{
	width:80%;
}
input[type=number]{
	width:80%;
}
/******************formulario********************/

	}
@media screen and (max-width: 600px) 
	{
/********************cabecera*****************/
.cabecera{
	width:450px;
}
.titulo_principal {
	font-size: 14px;
}
.fondo_titulo {
	height:16px;
	padding: 3px; 
	border-radius: 10px;
	}
.texto_cabecera {
	width:100%;
	text-align:left;
	line-height:12px;
	text-indent:2%;
}
.cabecera_cuerpo_titulo{
	height:60px;
}
/********************cabecera*****************/
/********************cabecera 2*****************/
.cabecera2{
	width:450px;
}
.cabecera2_c1{
	font-size:11px;
}
.fondo_titulo2 {
	height:14px;
	padding: 5px; 
	border-radius: 7px;
	}
/********************cabecera 2*****************/
/*****************menu principal**************/
#tabla1{
	width:450px;
}
#menu1{
	width:300px;
	height:250px;
}
#menu_titulo{
	width:212px;
	height:auto; 
}
.botones a {
	font-size: 12px;
	width: 100%;;
	height:15px;
	padding: 5px; 
	border-radius: 5px;
}
.botones a:hover {
	font-size: 12px;
	width: 100%;;
	height:15px;
	padding: 5px; 
}
/*****************menu principal**************/

/******************botones ***********************/
input[type=submit]{
	width:100%;
}
input:hover[type=submit]{
	width:100%;
}
input[type=button]{
	width:100%;
}
input:hover[type=button]{
	width:100%;
}
/******************botones ***********************/
/************cabeceras tablas***************/
.cabecera_tabla{
	font-size:8px !important;
	font-weight:normal !important;
}
/************cabeceras tablas***************/

/**************listados ********************/
#menu{
	display:block;
}
#menu_botones{
	display:none;
}
#listado{
	font-size:8px;
}
/**************listados ********************/
/******************formulario********************/
#tabla_principal {
	padding:2px;
	font-size:10px;  
}
input[type=text]{
	width:80%;
}
input[type=number]{
	width:80%;
}
/******************formulario********************/

	}
@media screen and (max-width: 450px) 
	{
/********************cabecera*****************/
.cabecera{
	width:100%;
}
.titulo_principal {
	font-size: 12px;
}
.fondo_titulo {
	height:16px;
	padding: 3px; 
	border-radius: 10px;
	}
.texto_cabecera {
	width:100%;
	text-align:left;
	line-height:12px;
	text-indent:2%;
}
.cabecera_cuerpo_titulo{
	height:60px;
}
/********************cabecera*****************/
/********************cabecera 2*****************/
.cabecera2{
	width:100%;
}
.cabecera2_c1{
	width:auto;
}
.cabecera2_c2{
	width:110px;
}
/********************cabecera 2*****************/
/*****************menu principal**************/
#tabla1{
	width:100%;
}
#menu1{
	width:80%;
}
#menu2{
	width:80%;
}
#menu_titulo{
	width:80%;
	height:auto; 
}
.botones a {
	font-size: 10px;
	width: 100%;
	height:10px;
	padding: 5%; 
	border-radius: 5px;
}
.botones a:hover {
	font-size: 10px;
	width: 100%;
	height:10px;
	padding: 5%; 
}
.botones{
	width:80%;
}
.salir_sistema_c1{
	display:table-cell;
	width:auto;
	text-align:right;
}
.salir_sistema_c2{
	display:table-cell;
	width:30%;
}

/*****************menu principal**************/
/******************formulario********************/
#tabla_principal {
	padding:2px;
	font-size:10px;  
}
input[type=text]{
	width:80%;
}
input[type=number]{
	width:80%;
}
/******************formulario********************/

/******************listado***********************/

.borde_imagen {
  height:100%;
  width:90%;
}

#div_img{
  position: absolute;
  width:100%;
  height:200px;
  box-sizing:border-box;
  top: 50%;
  left: 0px;
  margin:0px;
  display: none;
}
.cabecera_tabla{
	font-size:8px !important;
	font-weight:normal !important;
}
/******************listado***********************/


	}
.contenedor_firma {
	border: 2px solid #ccc;
	width: 95%;
	height: 200px;
	overflow-y: scroll;
	right: 0px;
	position: relative;
	border-radius:10px;
	background-color: #ffffff;
}
#canvas_firma{
	background-color:#FFF;
}
.custom-file-input {
  color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Tomar Foto';
  color: black;
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
  margin-left:33%;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active {
  outline: 0;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
}