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

body, form, p, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
body {
	height: 100%;
	background: #5b7a16 url(../images/bg_green.jpg) no-repeat top center;
	background-size: cover;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
}
body.dash{
	background-position: center 115px;
	background-size: auto;
}
.page {
	height: 100%;
	width: 100%;
}
.login {
	border: 2px solid #a4ca39;
	background:#FFF;
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	box-shadow: 1px 1px 10px #333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 15px;
	font-family:  Arial, Helvetica, sans-serif;
	color: #4e4e4e;
}
.widPages {
	margin: 0 auto;
}
.loginlogo{
	display:inline-block;
	vertical-align:top;
	width: 48%;
}
.loginlogo img{
	width: 100%;
	height: auto;
}
.userpass{
	display: inline-block;
	vertical-align:top;
	width: 48%;
	text-align:right;
	overflow: hidden;
}
aside.logoCl {
	margin-bottom: 10px;
}
aside.logoCl img{
	width: 100%;
}
.userpass label{
	font-size: 15px;
	text-transform:uppercase;
	display: block;
	margin: 5px 3px;
}
.userpass input[type="text"], .userpass input[type="password"] {
	display: inline-block;
	width: 80%;
	padding: 5px 3px;
	color: #999;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #c2c2c2;
	margin-bottom: 5px;
	
}
.userpass input[type="submit"]{
	display: inline-block;
	background:#404040;
	border: 0;
	padding: 5px 10px;
	width: 40%;
	color: #e2e2e2;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-transform:uppercase;
	font-size:12px;
}
header{
	background:#242424 url(../images/fnd_gray.jpg) repeat-x;
	border-bottom: 2px solid #0f898f;
	/*height: 114px;*/
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	box-shadow: 1px 1px 10px #333;
	width: 100%;
	position:relative;
	z-index:20;
}
header a.logo{
	width: 12%;
	padding: 8px 0 0 39px;
	display:inline-block;
	vertical-align: top;
}
nav{
	display: inline-block;
	vertical-align: top;
	padding-top:35px;
	width: 70%;
}
nav ul{
	list-style: none;
	padding:0;
	margin:0;
}
nav ul li{
	display: inline-block;
	vertical-align: top;
	margin: 0;
}
nav ul li a{
	display:block;
	color: #a3aaae;
	font-size:13px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration:none;
	padding: 10px 15px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
nav ul li.submenu{
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}
nav ul li a:hover{
	background:#363636;
	color:#aacd36;
}
/*submenu*/
.submenu{
	position:relative;
	transition: all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition: all 0.5s; /* Safari and Chrome */
	-o-transition: all 0.5s; /* Opera */

}
.submenu:hover{
	background:#363636;
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	box-shadow: 1px 1px 10px #333;
}
.submenu:hover ul{
	opacity: 1;
	filter: alpha(100);
	visibility: visible;
}
.submenu ul{
	position:absolute;
	
	background:  #363636;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	
	-moz-border-radius-bottomleft: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px;
	
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
	
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	box-shadow: 1px 1px 10px #333;
	
	transition: all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition: all 0.5s; /* Safari and Chrome */
	-o-transition: all 0.5s; /* Opera */
	opacity: 0;
	padding: 0 1px 10px 1px;
	filter: alpha(0);
	visibility: hidden;
	width: 180px;
}
.submenu li{
	display:block;
}
.submenu li a{
	font-size: 12px;
	padding: 8px 0 8px 20px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
.submenu li a:hover{
	background: #089597;
	color: #fff;
}
/**/
.logout{
	display: inline-block;
	width: 5%;
}
a.logout{
	width: 46px;
	display:block;
	background:url(../images/salirX.png) no-repeat center right;
	padding: 5px 22px 5px 0;
	text-align:right;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	font-size: 14px;
	text-transform: uppercase;
	color: #86a929;
	text-decoration:none;
	margin-top:5px;
	margin-left: 25px;
}
a.logout:hover{
	background:#363636 url(../images/salirX.png) no-repeat center right;
}
.lineclient{
	padding-top: 2%;
	position: relative;
}
.logoCliente a img{
	width: 100%;
	margin: 0 0 10px 10px;
}
.dashcontent{
	width: 82%;
	background:#FFF;
	border: 2px solid #a5ca36;
	padding: 4%;
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	box-shadow: 1px 1px 10px #333;
}
footer{
	width: 100%;
	background: #1b1b1b;
	margin-top: 15px;
	font-family: Arial, Helvetica, sans-serif;
}
footer aside{
	display:inline-block;
	font-size:10px;
	color: #6f7c7d;
	padding:4px;
	width: 45%;
}
.design{
	text-align: right;
}
.design a{
	color: #089597;
	text-decoration:none;
}
.titleSec{
	padding-bottom: 15px;
	border-bottom: 1px dashed #999;
	margin-bottom: 20px;
	overflow:hidden;
}
.titleSec .titles{
	display: inline-block;
}
.titleSec .titles h1{
	color: #089597;
	font-size: 26px;
	font-weight:normal;
	text-transform:uppercase;
}
.titleSec .titles h3{
	color: #999;
	font-size: 15px;
	font-weight:normal;
	text-transform:uppercase;
}
.titleSec .titSaldo{
	display: inline-block;
	float: right;
	text-transform:uppercase;
	text-align: right;
	font-size: 14px;
    padding-left: 10px;
}
.titleSec .titSaldo strong{
	color: #86a929;
	font-weight:normal;
	font-size:30px;
}
.fieldcharts fieldset{
	border: #CCC 1px solid;
	margin: 2% 0;
}
.fieldcharts fieldset input[type="submit"]{
	display: inline-block;
	border: 0;
	padding: 5px 10px;
	color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-transform:uppercase;
	font-size:12px;
    background-color: #049695;
    cursor:pointer;
}
.fieldcharts fieldset input[type="submit"]:hover{
    background-color: #353535;
}
.registro{
	background: #049695;
}
.registro:hover{
	background: #353535;
}
.fieldcharts fieldset legend{
	font-size: 13px;
	color: #999;
	padding: 5px 10px;
	text-transform: uppercase;
}
.fieldcharts .chart{
	display: inline-block;
	margin: 0.2% 0.2%;
	/*overflow: auto;*/
	padding: 5px;
	width: 48%;
}
.fieldcharts .chart iframe{
	width: 100%;
    height:280px;
}
.buscar{
	right: 0;
	position: absolute;
	top: -177px;
	width: 250px;
	z-index: 15;
	transition: all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition: all 0.5s; /* Safari and Chrome */
	-o-transition: all 0.5s; /* Opera */
}
.buscar .formBus{
	background: #fff;
	border: 2px solid #bdcc2e;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 25px 10px 5px 10px;
	-moz-border-radius-bottomright: 0px;
	-webkit-border-bottom-right-radius: 0px;
	border-bottom-right-radius: 0px;

}
.buscar .formBus label{
	display:inline-block;
	color: #4e4e4e;
	width: 70px;
	font-size: 12px;
	text-transform:uppercase;
	text-align:right;
	padding: 3px 5px;
	margin: 5px 0;
}
.buscar .formBus input[type="text"]{
	display:inline-block;
	margin: 5px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #c2c2c2;
	padding: 4px 5px;
	color: #666;
}
.buscar .desBusqueda{
	background: #FFF;
	bottom: -33px;
	-moz-border-radius-bottomleft: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border: 2px solid #bdcc2e;
	border-top: 0;
	height: 25px;
	padding: 4px;
	position: absolute;
	right: 0;
	text-align:center;
	width: 60%;
}
.buscar .desBusqueda a{
	color: #089596;
	display:block;
	padding: 5px;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration:none;
}

/*busca paso1*/
.paso1bus{
	padding: 25px 10px 5px 10px;
}
.paso1bus label{
	display:inline-block;
	color: #4e4e4e;
	width: 70px;
	font-size: 12px;
	text-transform:uppercase;
	text-align:right;
	padding: 3px 5px;
	margin: 5px 0;
}
.paso1bus input[type="text"]{
	display:inline-block;
	margin: 5px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #c2c2c2;
	padding: 4px 5px;
	color: #666;
}
.paso1bus input[type="button"] {
	margin: 5px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border:0;
	padding: 5px 8px;
	color: #fff;
	background: #089597;
	text-transform:uppercase;
	font-size:11px;
	cursor:pointer;
	margin-left: 85px;
}
.paso1bus input[type="submit"] {
	margin: 5px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border:0;
	padding: 5px 8px;
	color: #fff;
	background: #089597;
	text-transform:uppercase;
	font-size:11px;
	cursor:pointer;
	margin-left: 85px;
}


.btnbuscar{
	display: inline-block;
	background:url(../images/btn_buscar.png) no-repeat 0 0;
	border: 0;
	width: 23px;
	height: 23px;
	overflow: hidden;
	text-indent: 50px;
	cursor:pointer;
	text-decoration:none;
}
.btnbuscar:hover{
	background:url(../images/btn_buscar.png) no-repeat -29px 0px;
}
.subtitle{
	color: #6f7c7d;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight:normal;
	letter-spacing: -1px;
}
.paso1{
	background:url(../images/ico_busqueda.jpg) no-repeat;
	padding: 0 0 0 45px;
}
.paso1 strong{
	color: #a2c836;
	font-weight:normal;
	font-size:16px;
	
}
.paso2{
	background: url(../images/ico_usuarios.jpg) no-repeat;
	padding: 0 0 0 45px;
}
.paso2 strong{
	color: #169698;
	font-weight:normal;
	font-size:16px;
	
}
.grid_usuario{
	width: 98%;
	margin: 0 auto;
}
.grid_usuario table th{
	padding: 8px 4px;
	background: #099497;
	color: #fff;
	text-transform:uppercase;
	font-size:12px;
	font-weight:normal;
}
.grid_usuario table td{
	color: #666;
	font-size: 12px;
	line-height: 18px;
}
.grid_usuario table tr:nth-of-type(odd) { 
	background: #eaeaea; 
}
/*Estilo consultar reporte sorteo por Pablo Quirós Chacón*/
.ViewDraw
{
	background:url(../images/sorteo_logo.png) no-repeat;
	display:block;
	width: 36px;
	height: 27px;
	overflow:hidden;
	text-indent: -50px;	
}
.editarUser{
	background:url(../images/ico_edit_usuario.png) no-repeat;
	display:block;
	width: 36px;
	height: 27px;
	overflow:hidden;
	text-indent: -50px;	
}
/*estilo de paginacion grid por Joseph*/
.pager td {
    background-color:#fff;
}
.pager a {
	display: block;
	background:#a2c93a;
	padding:5px 8px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 11px;
	color: #fff;
	text-decoration:none;
}

.pager span {
	display: block;
	background:#333;
	padding:5px 8px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 11px;
	color: #fff;
	text-decoration:none;
}
.pager a:hover{
	background:#333;
}
/*termina - estilo de paginacion grid por Joseph*/

.paginacion{
	padding: 8px 4px;
}
.paginacion ul{
	list-style: none;
	margin:0;
	padding:0;
}
.paginacion ul li{
	display: inline-block;
}
.paginacion ul li a{
	display: block;
	background:#a2c93a;
	padding:5px 8px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 11px;
	color: #fff;
	text-decoration:none;
}
.paginacion ul li a:hover{
	background:#333;
}
.paginacion ul li.next a{
	background:  url(../images/arrows.png) no-repeat 0 0;
	width: 26px;
	height: 20px;
	padding: 0;
}
.paginacion ul li.next a:hover{
	background:  url(../images/arrows.png) no-repeat -32px 0;
	width: 26px;
	height: 20px;
	padding: 0;
}
.paginacion ul li.back a{
	background:  url(../images/arrows.png) no-repeat 0 -21px;
	width: 26px;
	height: 20px;
	padding: 0;
}
.paginacion ul li.back a:hover{
	background:  url(../images/arrows.png) no-repeat -31px -21px;
	width: 26px;
	height: 20px;
	padding: 0;
}
.actionmenu{
	margin: 10px 0;
	padding:0;
	margin:0;
	list-style: none;
}
.actionmenu li{
	display: inline-block;
	vertical-align: top;
	margin: 10px;
}
.actionmenu li a{
	display: block;
	text-decoration:none;
	overflow:hidden;
	position:relative;
	height: 85px;
}
.act_perfil{
	width: 109px;
	background:url(../images/actualizar_perfil.jpg) no-repeat 0 0;
}
.act_perfil:hover, .act_perfil_activado{
	width: 109px;
	background:url(../images/actualizar_perfil.jpg) no-repeat -109px 0;
}
.reg_tarjeta{
	width: 125px;
	background: url(../images/registrotarjeta.jpg) no-repeat 0 0;
}
.reg_tarjeta:hover, .reg_tarjeta_activado{
	width: 125px;
	background:url(../images/registrotarjeta.jpg) no-repeat -122px 0;
}
.reg_contactos{
	width: 140px;
	background: url(../images/registrocontacto.jpg) no-repeat 0 0;
}
.reg_contactos:hover, .reg_contactos_activado{
	width: 140px;
	background:url(../images/registrocontacto.jpg) no-repeat -140px 0;
}
.estado_cuenta{
	width: 113px;
	background: url(../images/estado_cuenta.jpg) no-repeat 0 0;
}
.estado_cuenta:hover, .estado_cuenta_activado{
	width: 113px;
	background:url(../images/estado_cuenta.jpg) no-repeat -113px 0;
}
.boni{
	width: 85px;
	background: url(../images/bonificaciones.jpg) no-repeat 0 0;
}
.boni:hover, .boni_activado{
	width: 85px;
	background: url(../images/bonificaciones.jpg) no-repeat -95px 0;
}
.canjes{
	width: 118px;
	background: url(../images/canjes_premios.jpg) no-repeat 0 0;
}
.canjes:hover, .canjes_activado{
	width: 118px;
	background: url(../images/canjes_premios.jpg) no-repeat -118px 0;
}
.datospers figure {
    display: inline-block;
    width: 15%;
    vertical-align: top;
    font-weight: bold;
    font-size: 14px;
    color: #8BCA15;
    text-align: center;
}
.datospers .datos {
    display: inline-block;
    vertical-align: top;
    width: 75%;
    color: #808080;
}
.datospers {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 22px;
	color: #353535;
    text-transform:uppercase;
}
.datospers .datos label{
	display: inline-block;
	width: 15%;
	vertical-align:top;
	margin-left: 3%;
}
/*estilos para muestra de datos por Joseph Quiros*/
.datospers .datos strong, .datosadic strong{
    font-size:14px;
    color: #089597;
}
.datospers .datosadic {
    display: inline-block;
    vertical-align: top;
    width: 98%;
    color: #808080;
    margin-left: 5%;
}
.datospers .datosadic h3 {
    color: #8BCA15;
}
.datospers hr {
    color: #999999;
    width: 92%;
}
.datospers .datosadic label {
    min-width:200px;
    display:inline-block;
}
.datospers .tapp {
    font-weight: bold;
    color: #FF6600;
}
.datostarjeta {
    font-weight: bold;
    font-size: 14px;
    color: #8BCA15;
    margin-bottom:0.5em;
}
/*Termina - estilos para muestra de datos por Joseph Quiros*/
/*Estilo para botones por Joseph Quiros*/
.boton {
	display: inline-block;
	border: 0;
	padding: 5px 10px;
	color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-transform:uppercase;
	font-size:12px;
    background-color: #049695;
}
.boton:hover {
    background-color: #353535;
}
/*Termina - Estilo para botones por Joseph Quiros*/
.forms{
	width: 90%;
	margin: 0px auto;
	color: #666;
	font-size: 13px;
}
.forms label{
	display: inline-block;
	width: 20%;
	vertical-align:top;
	margin-left: 3%;
}
.forms h4{
	color: #333;
	font-size: 15px;
	margin: 10px 0;
	text-transform:uppercase;
}
.forms p{
	margin-bottom: 25px;
	font-size: 14px;
}
.forms select, .forms textarea{
	display: inline-block;
	vertical-align:top;
	margin-left: 3%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #CCC;
	padding: 5px 10px;
}
.guardarea{
	margin-left: 25%;
}
.forms input[type="submit"],.forms input[type="reset"]{
	display: inline-block;
	color: #fff;
	font-size: 11px;
	text-transform:uppercase;
	border:0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	text-align:center;
	padding: 10px;
	backgroud:#049695;
	cursor:pointer;
	margin: 15px 10px;
}
/*Estilos para formularios por Joseph Q*/
.fieldcharts .datospers .datosadic select, .fieldcharts .datospers .datosadic textarea, .fieldcharts .datospers .datosadic input[type="text"], .fieldcharts .datospers .datos select, .fieldcharts .datospers .datos textarea, .fieldcharts .datospers .datos input[type="text"] {
	display: inline-block;
	vertical-align:top;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #CCC;
	padding: 2px 2px;
}
/*Termina - Estilos para formularios por Joseph Q*/
/*Estilos generales por Joseph Q*/
.UpdateProgress {
    font-size:11px;
}
/* Popup Extender */
.modal
{
	background-color: Gray;
	filter: alpha(opacity=70);
	opacity: 0.7;
}
.modalpopup
{
	background-color: powderblue;
}
.no_display
{
	display:none;
}
.inhabilitaTarjeta{
	background:url(../images/inac_tarjeta.png) no-repeat;
	display:block;
	width: 35px;
	height: 28px;
	overflow:hidden;
	text-indent: -50px;	
}
.agregarCriterio{
	background:url(../images/add.png) no-repeat;
	display:inline-block;
	width: 15px;
	height: 15px;
	overflow:hidden;
	text-indent: -50px;	
}
.deleteCriterio{
	background:url(../images/delete.png) no-repeat;
	display:block;
	width: 15px;
	height: 15px;
	overflow:hidden;
	text-indent: -50px;	
}
.verTransaccion{
	background:url(../images/receipt.png) no-repeat;
	display:block;
	width: 23px;
	height: 29px;
	overflow:hidden;
	text-indent: -50px;	
}
/*Termina - Estilos generales por Joseph Q*/

@media screen and (max-width:320px) {
.acomod {
	width:100%;
	display: inline-block;
	height:auto;
}
.izq {
	float:left;
	width:100%;
	display:block;
	height:auto;
}
.der {
	float:left;
	width:100%;
	display:block;
	height:auto;
}
.widPages {
	width: 95%;
}
.login {
	width: 95%;
	margin: 30px auto 0 auto;
}
.loginlogo img{
	width: 50%;
	height: auto;
	margin: 0 auto;
	display:block;
}
.userpass{
	width: 95%;
	margin: 10px auto;
	text-align:center;
}
aside.logoCl img{
	width: 80%;
}
.userpass input[type="submit"]
{
	width: 60%;
	margin: 10px auto;
}
header a.logo{
	width: 50%;
	padding:0;
	display:block;
	margin: 0 auto;
}
nav{
	padding-top:15px;
	width:95%;
}
nav ul li{
	width: 100%;
	text-align:center;
}
nav ul li a{
	padding: 5px 15px;
}
.loginlogo{
	width: 95%;
}
.dashcontent{
	width: 90%;
}
.fieldcharts .chart{
	width: 95%;
}
.submenu ul{
	visibility: hidden;
	display:none;
}
.logoCliente{
	width: 90%;
	margin: 10px auto;
}
.datospers .datos{
	width: 95%;
}
.datospers .datos label{
	width: 25%;
}
.guardarea{
	margin-left: 10%;
}
}
@media screen and (min-width:320px) and (max-width:768px) {
.acomod {
	width:100%;
	display: inline-block;
	height:auto;
}
.izq {
	float:left;
	width:100%;
	display:block;
	height:auto;
}
.der {
	float:left;
	width:100%;
	display:block;
	height:auto;
}
.widPages {
	width: 92%;
}
.login {
	width: 70%;
	margin: 30px auto 0 auto;
}

.userpass input[type="submit"]
{
	width: 50%;
	margin: 10px auto;
}

header a.logo{
	width: 25%;
	padding: 8px 0 0 10px;
}
.logoCliente{
	width: 35%;
}
.dashcontent{
	width: 90%;
}
nav{
	padding:10px 0;
}
.fieldcharts .chart{
	width: 95%;
}
.submenu ul{
	visibility: hidden;
	display:none;
}
.grid_usuario{
	width: 100%;
}
.grid_usuario table,.grid_usuario tbody,.grid_usuario th,.grid_usuario td,.grid_usuario tr{
	display:block;
	font-size: 11px;
}
.grid_usuario thead tr{
	position: absolute;
	top: -9999px;
	left: -9999px;
}
/*agregado por Joseph*/
.grid_usuario tr th{
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.grid_usuario tr{
	 border: 1px solid #ccc;
	 padding: 8px 2px;
}
.grid_usuario td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 40%;
		font-size: 11px;
		padding-top: 1%;
		padding-bottom: 1%;
	}
.grid_usuario td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		/*top: 6px;*/
		left: 6px;
		width: 45%; 
		padding-right: 10px;
		white-space: nowrap;
		font-size: 11px;
	}
	.grid_usuario table.user td:nth-of-type(1):before { content: "Tarjeta"; }
	.grid_usuario table.user td:nth-of-type(2):before { content: "Identificacion"; }
	.grid_usuario table.user td:nth-of-type(3):before { content: "Nombre"; }
	.grid_usuario table.user td:nth-of-type(4):before { content: "Telefono"; }
	.grid_usuario table.user td:nth-of-type(5):before { content: "Email"; }
	.grid_usuario table.user td:nth-of-type(6):before { content: "Direccion"; }
	.grid_usuario table.user td:nth-of-type(7):before { content: "Puntos Disponibles"; }
	.grid_usuario table.user td:nth-of-type(8):before { content: "Funciones"; }
	
	.grid_usuario table.regTar td:nth-of-type(1):before { content: "Número de Tarjeta"; }
	.grid_usuario table.regTar td:nth-of-type(2):before { content: "Activa?"; }
	.grid_usuario table.regTar td:nth-of-type(3):before { content: "Fecha Activación"; }
	.grid_usuario table.regTar td:nth-of-type(4):before { content: "Fecha Inactivación"; }
	.grid_usuario table.regTar td:nth-of-type(5):before { content: "Inactivada por"; }
	.grid_usuario table.regTar td:nth-of-type(6):before { content: "Razón de inactivación"; }
	.grid_usuario table.regTar td:nth-of-type(7):before { content: "Clic para Inactivar"; }

	.grid_usuario table.regCon td:nth-of-type(1):before { content: "Fecha"; }
	.grid_usuario table.regCon td:nth-of-type(2):before { content: "Tipo de Contacto"; }
	.grid_usuario table.regCon td:nth-of-type(3):before { content: "Asunto"; }
	.grid_usuario table.regCon td:nth-of-type(4):before { content: "Acción"; }
	.grid_usuario table.regCon td:nth-of-type(5):before { content: "Comentario"; }
	.grid_usuario table.regCon td:nth-of-type(6):before { content: "Usuario creación"; }

    .grid_usuario table.regSalesPoints td:nth-of-type(1):before { content: "Fecha"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(2):before { content: "# Ticket"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(3):before { content: "Total Compra";}
    .grid_usuario table.regSalesPoints td:nth-of-type(4):before { content: "Puntos Obtenidos"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(5):before { content: "Tienda"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(6):before { content: "Cod. Caja"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(7):before { content: "Cod. Cajero"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(8):before { content: "Status"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(9):before { content: "detallar"; }

    .grid_usuario table.regBonusPoints td:nth-of-type(1):before { content: "Fecha"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(2):before { content: "Usuario"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(3):before { content: "Tipo"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(4):before { content: "Descripción"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(5):before { content: "Puntos Obtenidos"; }

    .grid_usuario table.regExchangePoints td:nth-of-type(1):before { content: "Fecha"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(2):before { content: "# Ticket"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(3):before { content: "Producto Canjeado"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(4):before { content: "Puntos Redimidos"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(6):before { content: "Tienda"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(7):before { content: "Cod. Caja"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(8):before { content: "Cod. Cajero"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(9):before { content: "Status"; }

    .grid_usuario table.regExch td:nth-of-type(1):before { content: "Canje"; }
    .grid_usuario table.regExch td:nth-of-type(2):before { content: "Tienda"; }
    .grid_usuario table.regExch td:nth-of-type(3):before { content: "Cantida"; }
    .grid_usuario table.regExch td:nth-of-type(4):before { content: "Pts. Canjeados"; }
    .grid_usuario table.regExch td:nth-of-type(5):before { content: "Fecha"; }

    .grid_usuario table.regTran td:nth-of-type(1):before { content: "Cantidad"; }
    .grid_usuario table.regTran td:nth-of-type(2):before { content: "Código"; }
    .grid_usuario table.regTran td:nth-of-type(3):before { content: "Producto"; }
    .grid_usuario table.regTran td:nth-of-type(4):before { content: "Sub Total"; }
    .grid_usuario table.regTran td:nth-of-type(5):before { content: "Puntos"; }

    .grid_usuario table.regCrit td:nth-of-type(1):before { content: "Parentesis"; }
    .grid_usuario table.regCrit td:nth-of-type(2):before { content: "Campo"; }
    .grid_usuario table.regCrit td:nth-of-type(3):before { content: "Condicion"; }
    .grid_usuario table.regCrit td:nth-of-type(4):before { content: "Parentesis"; }
    .grid_usuario table.regCrit td:nth-of-type(5):before { content: "Operador"; }
    .grid_usuario table.regCrit td:nth-of-type(6):before { content: "Agregar"; }

    .grid_usuario table.regCriteria td:nth-of-type(1):before { content: "Parentesis"; }
    .grid_usuario table.regCriteria td:nth-of-type(2):before { content: "Campo"; }
    .grid_usuario table.regCriteria td:nth-of-type(3):before { content: "Condicion"; }
    .grid_usuario table.regCriteria td:nth-of-type(4):before { content: "Valor"; }
    .grid_usuario table.regCriteria td:nth-of-type(5):before { content: "Parentesis"; }
    .grid_usuario table.regCriteria td:nth-of-type(6):before { content: "Operador"; }
    .grid_usuario table.regCriteria td:nth-of-type(7):before { content: "Eliminar"; }

    .grid_usuario table.regSegment td:nth-of-type(1):before { content: "Segmento"; }
    .grid_usuario table.regSegment td:nth-of-type(2):before { content: ""; }

	.datospers .datos{
	width: 95%;
}
.datospers .datos label{
	width: 35%;
}
.guardarea{
	margin-left: 23%;
}
}
@media screen and (min-width:768px) and (max-width:1024px) {
.acomod {
	width:100%;
	display: inline-block;
	height:auto;
}
.izq {
	float:left;
	width:70%;
	display:block;
	height:auto;
}
.der {
	float:right;
	width:30%;
	display:block;
	height:auto;
}
.widPages {
	width: 90%;
}
.login {
	width: 60%;
	margin: 90px auto 0 auto;
}
body{
	background-size: 130%;
}
body.dash{
	background-position: center 115px;
	background-size: 130%;
}
.logoCliente{
	width: 30%;
}
.fieldcharts .chart{
	width: 85%;
}
.grid_usuario table,.grid_usuario tbody,.grid_usuario th,.grid_usuario td,.grid_usuario tr{
	display:block;
	font-size: 11px;
}
.grid_usuario thead tr{
	position: absolute;
	top: -9999px;
	left: -9999px;
}
/*agregado por Joseph*/
.grid_usuario tr th{
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.grid_usuario tr{
	 border: 1px solid #ccc;
	 padding: 8px 2px;
}
.grid_usuario td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 40%;
		font-size: 11px;
		padding-top: 1%;
		padding-bottom: 1%;
	}
.grid_usuario td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		/*top: 6px;*/
		left: 6px;
		width: 45%; 
		padding-right: 10px;
		white-space: nowrap;
		font-size: 11px;
	}
	.grid_usuario table.user td:nth-of-type(1):before { content: "Tarjeta"; }
	.grid_usuario table.user td:nth-of-type(2):before { content: "Identificacion"; }
	.grid_usuario table.user td:nth-of-type(3):before { content: "Nombre"; }
	.grid_usuario table.user td:nth-of-type(4):before { content: "Telefono"; }
	.grid_usuario table.user td:nth-of-type(5):before { content: "Email"; }
	.grid_usuario table.user td:nth-of-type(6):before { content: "Direccion"; }
	.grid_usuario table.user td:nth-of-type(7):before { content: "Puntos Disponibles"; }
	.grid_usuario table.user td:nth-of-type(8):before { content: "Funciones"; }
	
	.grid_usuario table.regTar td:nth-of-type(1):before { content: "Número de Tarjeta"; }
	.grid_usuario table.regTar td:nth-of-type(2):before { content: "Activa?"; }
	.grid_usuario table.regTar td:nth-of-type(3):before { content: "Fecha Activación"; }
	.grid_usuario table.regTar td:nth-of-type(4):before { content: "Fecha Inactivación"; }
	.grid_usuario table.regTar td:nth-of-type(5):before { content: "Inactivada por"; }
	.grid_usuario table.regTar td:nth-of-type(6):before { content: "Razón de inactivación"; }
	.grid_usuario table.regTar td:nth-of-type(7):before { content: "Clic para Inactivar"; }

	.grid_usuario table.regCon td:nth-of-type(1):before { content: "Fecha"; }
	.grid_usuario table.regCon td:nth-of-type(2):before { content: "Tipo de Contacto"; }
	.grid_usuario table.regCon td:nth-of-type(3):before { content: "Asunto"; }
	.grid_usuario table.regCon td:nth-of-type(4):before { content: "Acción"; }
	.grid_usuario table.regCon td:nth-of-type(5):before { content: "Comentario"; }
	.grid_usuario table.regCon td:nth-of-type(6):before { content: "Usuario creación"; }

    .grid_usuario table.regSalesPoints td:nth-of-type(1):before { content: "Fecha"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(2):before { content: "# Ticket"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(3):before { content: "Total Compra";}
    .grid_usuario table.regSalesPoints td:nth-of-type(4):before { content: "Puntos Obtenidos"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(5):before { content: "Tienda"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(6):before { content: "Cod. Caja"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(7):before { content: "Cod. Cajero"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(8):before { content: "Status"; }
    .grid_usuario table.regSalesPoints td:nth-of-type(9):before { content: "detallar"; }

    .grid_usuario table.regBonusPoints td:nth-of-type(1):before { content: "Fecha"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(2):before { content: "Usuario"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(3):before { content: "Tipo"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(4):before { content: "Descripción"; }
    .grid_usuario table.regBonusPoints td:nth-of-type(5):before { content: "Puntos Obtenidos"; }

    .grid_usuario table.regExchangePoints td:nth-of-type(1):before { content: "Fecha"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(2):before { content: "# Ticket"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(3):before { content: "Producto canjeado"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(4):before { content: "Puntos Redimidos"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(6):before { content: "Tienda"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(7):before { content: "Cod. Caja"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(8):before { content: "Cod. Cajero"; }
    .grid_usuario table.regExchangePoints td:nth-of-type(9):before { content: "Status"; }

    .grid_usuario table.regExch td:nth-of-type(1):before { content: "Canje"; }
    .grid_usuario table.regExch td:nth-of-type(2):before { content: "Tienda"; }
    .grid_usuario table.regExch td:nth-of-type(3):before { content: "Cantida"; }
    .grid_usuario table.regExch td:nth-of-type(4):before { content: "Pts. Canjeados"; }
    .grid_usuario table.regExch td:nth-of-type(5):before { content: "Fecha"; }

    .grid_usuario table.regTran td:nth-of-type(1):before { content: "Cantidad"; }
    .grid_usuario table.regTran td:nth-of-type(2):before { content: "Código"; }
    .grid_usuario table.regTran td:nth-of-type(3):before { content: "Producto"; }
    .grid_usuario table.regTran td:nth-of-type(4):before { content: "Sub Total"; }
    .grid_usuario table.regTran td:nth-of-type(5):before { content: "Puntos"; }

    .grid_usuario table.regCrit td:nth-of-type(1):before { content: "Parentesis"; }
    .grid_usuario table.regCrit td:nth-of-type(2):before { content: "Campo"; }
    .grid_usuario table.regCrit td:nth-of-type(3):before { content: "Condicion"; }
    .grid_usuario table.regCrit td:nth-of-type(4):before { content: "Parentesis"; }
    .grid_usuario table.regCrit td:nth-of-type(5):before { content: "Operador"; }
    .grid_usuario table.regCrit td:nth-of-type(6):before { content: "Agregar"; }

    .grid_usuario table.regCriteria td:nth-of-type(1):before { content: "Parentesis"; }
    .grid_usuario table.regCriteria td:nth-of-type(2):before { content: "Campo"; }
    .grid_usuario table.regCriteria td:nth-of-type(3):before { content: "Condicion"; }
    .grid_usuario table.regCriteria td:nth-of-type(4):before { content: "Valor"; }
    .grid_usuario table.regCriteria td:nth-of-type(5):before { content: "Parentesis"; }
    .grid_usuario table.regCriteria td:nth-of-type(6):before { content: "Operador"; }
    .grid_usuario table.regCriteria td:nth-of-type(7):before { content: "Eliminar"; }

    .grid_usuario table.regSegment td:nth-of-type(1):before { content: "Segmento"; }
    .grid_usuario table.regSegment td:nth-of-type(2):before { content: ""; }
}
@media screen and (min-width:1024px) and (max-width:1280px) {
.acomod {
	width:100%;
	display: inline-block;
	height:auto;
}
.izq {
	float:left;
	width:80%;
	display:block;
	height:auto;
}
.der {
	float:right;
	width:20%;
	display:block;
	height:auto;
}
.widPages {
	width:90%;
}
.login {
	width: 45%;
	margin: 192px auto 0 auto;
}
body{
	background-size: 120%;
}
body.dash{
	background-position: center 115px;
	background-size: 120%;
}
.logoCliente{
	width: 20%;
}
footer{
	position:fixed;
	bottom:0;
}
.fieldcharts .chart{
	width: 48%;
}
.grid_usuario table td{
	padding: 8px 4px;
}
}

@media screen and (min-width:1224px) and (max-width:2560px) {
.acomod {
	width:100%;
	display: inline-block;
	height:auto;
}
.izq {
	float:left;
	width:80%;
	display:block;
	height:auto;
}
.der {
	float:right;
	width:20%;
	display:block;
	height:auto;
}
.widPages {
	width: 80%;
}
.login {
	width: 35%;
	margin: 192px auto 0 auto;
}
footer{
	position:fixed;
	bottom:0;
}
.fieldcharts .chart{
	width: 48%;
}
.logoCliente{
	width: 12%;
}
.grid_usuario table td{
	padding: 8px 4px;
}
}