@charset "utf-8";

/* CSS Document */

body {
    margin: 25px;
    font: 11px Verdana, Arial;
    background: #eee
}
.trselected {
    background: #f2f2f2;
}
.search_boton_imei {
    width: 20px;
    height: 20px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    float: right;
    vertical-align: middle;
    margin: 1px 0px 4px 4px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background: #d4d4d4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
.imei_nro {
    position: unset;
    float: left;
    /*background:#ffffff;*/
    width: 12%;
    height: 20px;
}
#contenido {
    background: #ffffff;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
#barrasuperior {
    z-index: 1;
    background: #d6d6d6;
    height: 70px;
    width: 100%;
    position: absolute;
    text-align: center;
}
#capa_sup_user {
    position: absolute;
    text-align: left;
    vertical-align: middle;
    left: 0px;
    width: 400px;
    height: 100px;
}
#capa_sup_user img {
    padding-top: 20px;
    padding-left: 20px;
    width: 40px;
    height: 40px;
    margin-left: 0px;
    vertical-align: middle;
    float: left;
    padding-right: 4px;
}
#capa_logo {
    position: absolute;
    right: 5px;
}
#capa_logo img {
    padding-top: 5px;
    width: 30%;
    height: 70%;
    margin-left: 0px;
    vertical-align: middle;
    float: right;
    padding-right: 4px;
}
#capa_sup_acciones {
    padding-top: 18px;
    position: absolute;
    right: 0px;
    width: calc(100% - 350px);
    height: 80px;
    text-align: left;
    vertical-align: middle;
}

/*-------------------------------BOTONES BARRA SUPERIOR-------------------------------------*/


/*Por útimo, definimos los colores, aquí algunos ejemplos:*/

.accion1 {
    width: 130px;
    height: 40px;
    border-radius: 1px 1px 1px 1px;
    font-size: 15px;
    vertical-align: middle;
    margin: 2px 25px 8px 4px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}

.rojo1 {
    background-color: #cd5257;
}
.rojo1:hover {
    background-color: #f08080;
}
.verde1 {
    background-color: #22b573;
}
.verde1:hover {
    background-color: #66dcaa;
}

#capa_sup_acciones .accion {
    width: 130px;
    height: 40px;
    border-radius: 1px 1px 1px 1px;
    font-size: 15px;
    vertical-align: middle;
    margin: 2px 25px 8px 4px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
#capa_sup_acciones .plomo {
    background-color: #707172;
}
#capa_sup_acciones .plomo:hover {
    background-color: #a9a9a9;
}
#capa_sup_acciones .rojo {
    background-color: #cd5257;
}
#capa_sup_acciones .rojo:hover {
    background-color: #f08080;
}
#capa_sup_acciones .verde {
    background-color: #22b573;
}
#capa_sup_acciones .verde:hover {
    background-color: #66dcaa;
}
#capa_sup_acciones .negro {
    background-color: #000000;
}
#capa_sup_acciones .negro:hover {
    background-color: #477979;
}
#capa_sup_acciones .accion:active {
    background-color: #cd5257;
    /*efecto click*/
}

/*-------------------------------------IZQUIERDA----------------------------*/


/*IMAGEN PRODUCTO*/

#imagen_producto {
    position: absolute;
    width: 284px;
    height: 200px;
    bottom: 380px;
    left: 20px;
}
#tabla_img {
    position: absolute;
    width: 100%;
    height: 100%;
}
#tabla_img .td,
tr {
    text-align: center;
}
#nombre_pro {
    width: 70%;
}
#precio_pro {
    width: 30%;
}

/*FIN IMAGEN PRODUCTO*/

#botones_izquierda {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 0px 0px 0px 0px;
    width: 320px;
    height: 380px;
}
#barraizquierda {
    position: absolute;
    background: #ffffff;
    left: 0%;
    top: 0px;
    height: 100%;
    width: 320px;
    border-right-style: solid;
    border-right-color: #dedede;
    border-right-width: 2px;
    text-align: left;
    line-height: 100%;
}
#numpad button:hover,
#numpad .selected-mode {
    border: none;
    color: white;
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#696969), to(#808080));
    background: -moz-linear-gradient(#696969, #808080);
    background: -ms-linear-gradient(#696969, #808080);
    background: linear-gradient(#696969, #808080);
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.21);
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
}

/*del no hver*/

#numpad {
    padding: 8px 8px 8px 8px;
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 8px;
    /*background:#808080;*/
}
#numpad button {
    width: 48px;
    height: 56px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    vertical-align: middle;
    margin: 2px 2px 2px 2px;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: -moz-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: -ms-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: -o-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: linear-gradient(to bottom, #f2f2f2, #ffffff);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
#numpad .opciones {
    width: 120px;
    height: 56px;
    border-radius: 3px 3px 3px 3px;
    font-size: 18px;
    vertical-align: middle;
    margin: 2px 2px 2px 2px;
    cursor: pointer;
    font-family: sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #707070;
    text-decoration: none;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: -moz-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: -ms-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: -o-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: linear-gradient(to bottom, #F7F7F7, #ffffff);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
#numpad .opciones_activo {
    width: 120px;
    height: 56px;
    font-size: 18px;
    vertical-align: middle;
    margin: 2px 2px 2px 2px;
    cursor: pointer;
    font-family: sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: white;
    text-decoration: none;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#696969), to(#808080));
    background-image: -webkit-linear-gradient(top, #696969, #808080);
    background-image: -moz-linear-gradient(top, #696969, #808080);
    background-image: -ms-linear-gradient(top, #696969, #808080);
    background-image: -o-linear-gradient(top, #696969, #808080);
    background-image: linear-gradient(to bottom, #696969, #808080);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
#facturar {
    position: absolute;
    height: 120px;
    width: 320px;
    bottom: 0px;
    left: 0;
    padding: 0px 0px 0px 0px;
    /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;*/
}
.button,
.button:visited {
    /* botones genéricos */
    border: none;
    height: 100px;
    width: 286px;
    left: 18px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    background: #222 url(URL_overlay.png) repeat-x;
    /*display: inline-block;*/
    color: #FFF;
    position: absolute;
    cursor: pointer
}
.facturar.button:active {
    /*el efecto click */
    top: 1px;
}

/* botones pequeños */

.facturar.button,
.facturar.button:visited {
    font-size: 40px;
}

/*Por útimo, definimos los colores, aquí algunos ejemplos:*/

.verde.button {
    background-color: #22b573;
}
.verde.button:hover {
    background-color: #66dcaa;
}

/*-----------------------------DERECHA----------------------------*/

#barraderecha {
    background: #FFFFFF;
    ;
    top: 6%;
    height: 94%;
    width: 80%;
    left: 20%;
    position: absolute
}

/*inicio css logo*/

#branding {
    position: absolute;
    display: table-cell;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-right: 1px solid #373737;
    text-align: left;
    line-height: 100%;
    vertical-align: middle;
}
#branding img {
    padding-top: 5px;
    width: 35%;
    height: 75%;
    margin-left: 0px;
    vertical-align: middle;
    float: right;
    padding-right: 4px;
}

/*fin css logo*/


/*inicio css buscar*/

.searchbox {
    font-weight: bold;
    color: #eeeeee;
    font-size: 14px;
    position: absolute;
    left: 10px;
}
.searchbox input {
    width: 180px;
    border-radius: 11px;
    border: 1px solid #cecbcb;
    padding: 3px 19px 4px 4px;
    margin: 0px;
    background-position: left center;
    background: url("./images/search.png") no-repeat 5px;
    background-color: #373737;
}
.searchbox input:focus {
    background-color: #FFEBCD;
    border: 2px solid #CB8B07;
}

/*--------------------------CLIENTE Y PRODUCTO---------------------------------*/

#busquedas {
    position: absolute;
    top: 75px;
    right: 18px;
    height: 230px;
    width: calc(100% - 360px);
    background: #000000;
}
#cliente {
    position: relative;
    text-align: center;
    background: #f2f2f2;
    height: 230px;
    width: 100%;
}
#cliente input {
    width: 100%;
    height: 35px;
    border: 1px solid #cecbcb;
    padding: 3px 19px;
    margin: 0px;
    background: url("./images/search.png") no-repeat 5px;
    background-color: #f6f6f6;
}
#cliente input:focus {
    border: 2px solid #808080;
}
#tabla_cliente {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 4px;
    color: #9f9f9f;
}
#search_productos {
    position: absolute;
    padding: 6px 2px 2px 0px;
    text-align: left;
    /*top: 150px;*/
    background: #ffffff;
    height: 50px;
    width: 100%;
    bottom: 0px;
}
#search_productos input {
    width: calc(100% - 350px);/*calc(100% - 380px); para añadir el partnumber*/
    height: 35px;
    border: 1px solid #cecbcb;
    padding: 3px 19px;
    margin: 0px;
    background: url("./images/search.png") no-repeat 5px;
    background-color: #f6f6f6;
    border-radius: 2px 2px 2px 2px;
}
#search_productos input:focus {
    border: 2px solid #808080;
}
#tabla_cliente .boton {
    width: 100px;
    height: 80px;
    border-radius: 1px 1px 1px 1px;
    font-size: 15px;
    vertical-align: middle;
    margin: 2px 0px 0px 2px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
#select_vendedor {
    background: #f2f2f2;
    position: absolute;
    right: 4px;
    width: 195px;
    height: 35px;
    vertical-align: middle;
    /*text-align: center;*/
}
#vendedor {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 180px;
}
#tabla_cliente .cliente {
    background-color: #22b573;
}
#tabla_cliente .cliente:hover {
    background-color: #66dcaa;
}
.td_input {
    text-align: center;
    width: calc(100% - 120px);
}
.td_boton {
    width: 100px;
}
.search_boton {
    width: 35px;
    height: 35px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    vertical-align: middle;
    margin: 1px 0px 4px 4px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background: #d4d4d4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
.opciones_busqueda_boton {
    width: 35px;
    height: 35px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    vertical-align: middle;
    margin: 1px 0px 4px 4px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background: #f2f2f2;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

/*--------------------SUBTOTAL DETALLES-------------------------------*/

#sub_venta {
    position: fixed;
    right: 18px;
    height: 80px;
    bottom: 10px;
    width: calc(100% - 360px);
    background: #ffffff;
    border: none;
    /*z-index: auto;*/
}
#cantidad_articulos {
    position: absolute;
    width: calc(20% - 5px);
    height: 100%;
    background: #f2f2f2;
    text-align: center;
}
#cantidad_devoluciones {
    position: absolute;
    width: calc(20% - 10px);
    height: 100%;
    left: calc(20% + 8px);
    background: #cd5257;
    text-align: center;
}
#cantidad_total {
    position: absolute;
    width: calc(60% - 10px);
    height: 100%;
    left: calc(40% + 10px);
    background: #d9d9d9;
    text-align: center;
}
.tr_letras {
    font-weight: 900;
    height: 15%;
    font-weight: 100;
    color: #000000;
    font-size: 18px;
}
.tr_numeros {
    height: 85%;
    font-weight: 100;
    color: #000000;
    font-size: 30px;
}
.td_letras {
    font-weight: 900;
    width: 30%;
    font-weight: 100;
    color: #000000;
    font-size: 18px;
}
.td_numeros {
    width: 70%;
    font-weight: 100;
    color: #000000;
    font-size: 60px;
}

/*-----------------------------DETALLE VENTAS----------------------------*/

#detalle_venta {
    position: absolute;
    /*background: #efefef;*/
    right: 18px;
    top: 230px;
    width: calc(100% - 20px);
    height:100%;
    overflow: auto;

}
#ad {}

/*------------------------------------------------------------------------------STYLO DEL LIGHTBOX PAGO---------------------------------------------------------------------------------*/

body {
    margin: 0;
    padding: 0;
    /* evitamos los margenes en la pagina */
}
#capa {
    width: 100%;
    /* ponemos un tamaño de 100% a la capa para que cubra todo */
    height: 100%;
    background: #707172;
    /*Le damos un color negro de fonde */
    position: fixed;
    /* La ponemos en posicion fixed para que no se mueva con las barras de desplazamiento */
    display: none;
    /* la ocultamos */
    z-index: 1;
}
#caja {
    width: 700px;
    /* Le damos un ancho de 500px */
    height: 500px;
    /* Le damos un alto de 300 px */
    display: none;
    /* La ocultamos */
    background: #fff;
    /* Le damos un color de fondo blanco */
    position: fixed;
    /* Posicion fixed para que no se mueva con las barras de desplazamiento */
    z-index: 10;
    /* le damos un index para que se sobreponga a la capa */
    top: 50%;
    /* Indicamos el punto de origen en el centro de la pantalla */
    left: 50%;
    /* Indicamos el punto de origen en el cento de la pantalla */
    margin: -200px 0 0 -300px;
    /* le añadimos margen, el primer valor tiene que ser la mitad de la altura y el segundo la mitad de la anchura para que nos quede centradp */
    background-clip: padding-box;
    /* Firefox 4, Safari 5, Opera 10, IE 9 */
    -moz-background-clip: padding;
    /* Firefox 3.6 */
    -webkit-background-clip: padding;
    /* Safari 4? Chrome 6? */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 8px solid rgba(255, 255, 255, 0.3);
}
#cerrar {
    position: absolute;
    /* posicion absoluta  */
    float: left;
    /* flotante del lado izquierdo */
    width: 25px;
    /* ancho de 25px */
    margin-top: -20px;
    /* con este margen nos queda sobre la caja */
    background: #B00000;
    /* color de fondo rojo */
    text-align: center;
    /* Alineacion del texto en el centro */
    color: #FFF;
    /*Color de la letra blanco */
}
a.cerrar {
    /* decoracion del link cerrar */
    text-decoration: none;
    color: #FFF
}
a.hover {
    text-decoration: none;
}

/*ESTILO DE LA CAPA DE INTERFAZ DE PAGO*/

#numpad_pago button:hover {
    border: none;
    color: white;
    background: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#696969), to(#808080));
    background: -moz-linear-gradient(#696969, #808080);
    background: -ms-linear-gradient(#696969, #808080);
    background: linear-gradient(#696969, #808080);
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.21);
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.1);
}

/*del no hver*/

#numpad_pago {
    padding: 8px 8px 8px 8px;
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 18px;
    top: 25px;
}
#numpad_pago button {
    width: 50px;
    height: 50px;
    border-radius: 3px 3px 3px 3px;
    font-size: 28px;
    vertical-align: middle;
    margin: 2px 2px 2px 2px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: -moz-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: -ms-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: -o-linear-gradient(top, #f2f2f2, #ffffff);
    background-image: linear-gradient(to bottom, #f2f2f2, #ffffff);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
#numpad_pago .opciones {
    width: 85px;
    height: 50px;
    border-radius: 3px 3px 3px 3px;
    font-size: 18px;
    vertical-align: middle;
    margin: 2px 0px 2px 0px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #707070;
    text-decoration: none;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: -moz-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: -ms-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: -o-linear-gradient(top, #F7F7F7, #ffffff);
    background-image: linear-gradient(to bottom, #F7F7F7, #ffffff);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
#numpad_pago .opciones_activo {
    width: 164px;
    height: 50px;
    font-size: 18px;
    vertical-align: middle;
    margin: 2px 0px 2px 0px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: white;
    text-decoration: none;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#696969), to(#808080));
    background-image: -webkit-linear-gradient(top, #696969, #808080);
    background-image: -moz-linear-gradient(top, #696969, #808080);
    background-image: -ms-linear-gradient(top, #696969, #808080);
    background-image: -o-linear-gradient(top, #696969, #808080);
    background-image: linear-gradient(to bottom, #696969, #808080);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
#monto_a_pagar {
    height: 35px;
    text-align: right;
    font-size: 15px;
}

/*--------------------------------------------------ESTILO METODO DE PAGO----------------------------------------------*/

#contenido_pago {
    position: absolute;
    width: 100%;
    height: 100%;
}
#tc_sup {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 120px;
    width: 110px;
    border-left-style: solid;
    border-left-color: #868686;
    border-left-width: 1px;
}
#opciones_sup {
    position: absolute;
    top: 0px;
    width: 700px;
    height: 120px;
    border-bottom-style: solid;
    border-bottom-color: #868686;
    border-bottom-width: 2px;
    z-index: 1;
}
#botones_inf_pago {
    position: absolute;
    bottom: 0px;
    width: 700px;
    height: 100px;
}
#contend_bot_pago_infe {
    text-align: center;
    position: absolute;
    left: 350px; /*20px;*/
    top: 15px;
}
#detalle_sub_pago {
    position: absolute;
    top: 120px;
    left: 300px;
    width: 400px;
    height: 280px;
    color: #4d4d4d;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#contend_numpad_pago {
    /*display: none;*/
    position: absolute;
    top: 120px;
    width: 300px;
    height: 280px;
}

/*---------------------------------CASH-------------------------------*/

#metodo_cash {
    display: none;
    position: absolute;
    top: 120px;
    width: 300px;
    height: 280px;
}
#cash {
    border: none;
    position: absolute;
    top: 10px;
    left: 25px;
    width: 250px;
    height: 240px;
}
#monto_bs_cash {
    height: 35px;
    text-align: right;
    font-size: 20px;
}
#monto_sus_cash {
    height: 35px;
    text-align: right;
    font-size: 20px;
}
#txt_monto_cash {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    height: 30px;
}

/*-----------------------------------GIFTCARD---------------------------------------*/

#metodo_giftcard {
    display: none;
    position: absolute;
    top: 120px;
    width: 300px;
    height: 280px;
}
#giftcard {
    border: none;
    position: absolute;
    top: 10px;
    left: 25px;
    width: 250px;
    height: 240px;
}
#codigo_giftcard {
    height: 50px;
}
#cliente_giftcard {
    height: 30px;
}
#saldo_giftcard {
    height: 30px;
}
#restante_giftcard {
    height: 30px;
}
#txt_cliente_giftcard {
    height: 30px;
}
#txt_saldo_giftcard {
    height: 30px;
}
#txt_restante_giftcard {
    height: 30px;
}
.valido {
    color: #22b573;
    font-size: 18px;
    font-weight: bold;
}
.invalido {
    color: #e1260d;
    font-size: 18px;
    font-weight: bold;
}
.txt_basezera_gift {
    font-size: 18px;
    font-weight: bold;
}
.search_giftcard {
    width: 24px;
    height: 24px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    vertical-align: middle;
    margin: 1px 0px 4px 4px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background: #d4d4d4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

/*---------------------------------------------------------TARJETA ------------------------------------------*/

#metodo_tarjeta {
    display: none;
    position: absolute;
    top: 120px;
    width: 300px;
    height: 280px;
    left: 20px;
}
#tarjeta {
    border: none;
    position: absolute;
    top: 10px;
    left: 20px;
    width: 250px;
    height: 280px;
}
#codigo_tarjeta {
    height: 50px;
}
#cliente_tarjeta {
    height: 30px;
}
#saldo_tarjeta {
    height: 30px;
}
#restante_tarjeta {
    height: 30px;
}
#txt_cliente_tarjeta {
    height: 30px;
}
#txt_saldo_tarjeta {
    height: 30px;
}
#txt_restante_tarjeta {
    height: 30px;
}
.valido {
    color: #22b573;
    font-size: 18px;
    font-weight: bold;
}
.invalido {
    color: #e1260d;
    font-size: 18px;
    font-weight: bold;
}
.txt_basezera_tarj {
    font-size: 18px;
    font-weight: bold;
}
.search_tarjeta {
    width: 24px;
    height: 24px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    vertical-align: middle;
    margin: 1px 0px 4px 4px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background: #d4d4d4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

/*-------------------------------------------------CREDITO-----------------------------------------------*/

#metodo_credito {
    display: none;
    position: absolute;
    top: 120px;
    width: 300px;
    height: 280px;
}
#credito {
    border: none;
    position: absolute;
    top: 10px;
    left: 25px;
    width: 250px;
    height: 240px;
}
#codigo_credito {
    height: 40px;
}
#cliente_credito {
    height: 25px;
}
#saldo_credito {
    height: 25px;
}
#restante_credito {
    height: 25px;
}
#txt_cliente_credito {
    height: 25px;
}
#txt_saldo_credito {
    height: 25px;
}
#txt_pendiente_credito {
    height: 30px;
}
#txt_restante_credito {
    height: 25px;
}
.valido {
    color: #22b573;
    font-size: 18px;
    font-weight: bold;
}
.invalido {
    color: #e1260d;
    font-size: 18px;
    font-weight: bold;
}
.txt_basezera_credito {
    font-size: 18px;
    font-weight: bold;
}
.search_credito {
    width: 24px;
    height: 24px;
    border-radius: 3px 3px 3px 3px;
    font-size: 30px;
    vertical-align: middle;
    margin: 1px 0px 4px 4px;
    border-top: 1px solid #efefef;
    cursor: pointer;
    font-family: sans-serif;
    /*font-weight: bold;*/
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: #9f9f9f;
    text-decoration: none;
    text-align: center;
    background: #d4d4d4;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 3px 3px 3px 3px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(224, 224, 224, 0.4) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

/*--------------BOTONES DE ACCION DE ABAJO--------------------*/

#botones_inf_pago .accion {
    width: 140px;
    height: 60px;
    border-radius: 1px 1px 1px 1px;
    font-size: 20px;
    vertical-align: middle;
    margin: 2px 20px 8px 4px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
#botones_inf_pago .plomo {
    background-color: #e6e6e6;
}
#botones_inf_pago .plomo:hover {
    background-color: #4d4d4d;
}
#botones_inf_pago .plomo_activo {
    background-color: #707172;
}
#botones_inf_pago .plomo:hover {
    background-color: #a9a9a9;
}
#botones_inf_pago .plomo_claro {
    background-color: #e6e6e6;
    color: #4d4d4d;
}
#botones_inf_pago .plomo_claro:hover {
    background-color: #a9a9a9;
}
#botones_inf_pago .rojo {
    background-color: #cd5257;
}
#botones_inf_pago .rojo:hover {
    background-color: #f08080;
}
#botones_inf_pago .verde {
    background-color: #22b573;
}
#botones_inf_pago .verde:hover {
    background-color: #66dcaa;
}
#botones_inf_pago .negro {
    background-color: #000000;
}
#botones_inf_pago .negro:hover {
    background-color: #477979;
}
#botones_inf_pago .accion:active {
    /*el efecto click */
    top: 1px;
}
#botones_sub_pago {
    text-align: center;
    position: absolute;
    left: 10px;
    top: 10px;
    /*white-space: nowrap;*/
    height: 120px;
    width: 590px;
}
#botones_sub_pago .accion {
    width: 100px;
    height: 100px;
    border-radius: 1px 1px 1px 1px;
    font-size: 15px;
    vertical-align: middle;
    margin: 2px 10px 8px 4px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
#botones_sub_pago .plomo {
    background-color: #ffffff;
    color: #808080;
}
#botones_sub_pago .plomo_activo {
    background-color: #808080;
    color: #ffffff;
}
#botones_sub_pago .rojo_activo {
    background-color: #cd5257;
}
#botones_sub_pago .rojo_activo:hover {
    background-color: #f08080;
}
#botones_sub_pago .verde_activo {
    background-color: #22b573;
}
#botones_sub_pago .azul_activo {
    background-color: #4687C4;
}
#botones_sub_pago .cafe_activo {
    background-color: #C49E23;
}
#botones_sub_pago .plomo_nota {
    background-color: #ffffff;
    color: #808080;
}

/*-----------------Boton Nota-----------------------------------*/

#tc_sup .accion {
    width: 80px;
    height: 30px;
    border-radius: 1px 1px 1px 1px;
    font-size: 15px;
    vertical-align: middle;
    margin: 2px 2px 2px 2px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
#tc_sup .plomo_nota_activo {
    background-color: #808080;
    color: #ffffff;
}

/*---------------------------------------------------------------*/

#botones_sub_pago .plomo_nota_activo {
    background-color: #808080;
    color: #ffffff;
}
#botones_sub_pago .plomo:hover {
    background-color: #a9a9a9;
}

/*DETALLE PAGO*/

#tabla_detalle_sub_pago {
    position: absolute;
    height: 100%;
    width: 100%;
}
#tabla_detalle_sub_pago .td_letras_pago_sub {
    width: 50%;
    font-size: 15px;
    text-align: left;
    padding: 10px 10px 10px 10px;
    font-weight: bold;
}
#tabla_detalle_sub_pago .td_numeros_pago_sub {
    width: 50%;
    font-size: 30px;
    text-align: right;
    padding: 10px 15px 10px 10px;
    font-weight: 100;
}
#tabla_detalle_sub_pago .td_numeros_pago_sub_cab {
    width: 70%;
    font-size: 15px;
    text-align: center;
    padding: 0px 20px 0px 0px;
    font-weight: 100;
}
#tabla_detalle_sub_pago .td_numeros_pago_dol {
    width: 40%;
    font-size: 30px;
    text-align: right;
    padding: 0px 20px 0px 0px;
    font-weight: 100;
}
#tabla_detalle_sub_pago .td_numeros_pago_dol_cab {
    width: 40%;
    font-size: 15px;
    text-align: center;
    padding: 0px 20px 0px 0px;
    font-weight: 100;
}
#input_monto_pago {
    width: 100%;
    height: 100%;
    background: #e6e6e6;
    color: #53bf8e;
    border: none;
    font-weight: 100;
    font-size: 30px;
    text-align: right;
}
#input_monto_pago:focus {
    border: 2px solid #808080;
}
#input_monto_pago_dolares {
    width: 100%;
    height: 100%;
    background: #e6e6e6;
    color: #53bf8e;
    border: none;
    font-weight: 100;
    font-size: 30px;
    text-align: right;
}
#input_monto_pago_dolares:focus {
    border: 2px solid #808080;
}

/*-----------------------------------------------------------ESTILO DE LA FACTURA A IMPRIMIR--------------------------------------------------------*/

#caja_factura {
    width: 260px;
    /* Le damos un ancho de 500px */
    height: 700px;
    /* Le damos un alto de 300 px */
    display: none;
    /* La ocultamos */
    background: #fff;
    /* Le damos un color de fondo blanco */
    position: fixed;
    /* Posicion fixed para que no se mueva con las barras de desplazamiento */
    z-index: 10;
    /* le damos un index para que se sobreponga a la capa */
    top: 30px;
    /* Indicamos el punto de origen en el centro de la pantalla */
    left: 10px;
    /* Indicamos el punto de origen en el cento de la pantalla */
    /*margin:-300px 0 0 -130px;*/
    /* le añadimos margen, el primer valor tiene que ser la mitad de la altura y el segundo la mitad de la anchura para que nos quede centradp */
    background-clip: padding-box;
    /* Firefox 4, Safari 5, Opera 10, IE 9 */
    -moz-background-clip: padding;
    /* Firefox 3.6 */
    -webkit-background-clip: padding;
    /* Safari 4? Chrome 6? */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 8px solid rgba(255, 255, 255, 0.3);
}
#contenido_factura {
    font: 9pt sans-serif;
    background: #ffffe0;
    position: absolute;
    width: 240px;
    top: 10px;
    left: 5px;
}
#cabezera {
    text-align: center;
    border-bottom: 1px solid #000000;
    line-height: 120%;
}
#detalleempresa {
    text-align: center;
    border-bottom: 1px solid #000000;
    line-height: 120%;
    padding: 4px 0px 4px 0px;
}
#deallecliente {
    text-align: left;
    border-bottom: 1px solid #000000;
    line-height: 120%;
    padding: 4px 0px 4px 0px;
}
#detalleventafactura {
    text-align: right;
    border-bottom: 1px solid #000000;
}
#cd {
    text-align: center;
    border-bottom: 1px solid #000000;
    padding: 4px 0px 4px 0px;
}
#df {
    text-align: center;
    border-bottom: 1px solid #000000;
    padding: 4px 0px 4px 0px;
}
#piedefactura {
    text-align: center;
    line-height: 120%;
    padding: 4px 0px 4px 0px;
}
#notas {
    text-align: center;
    line-height: 120%;
    padding: 4px 0px 4px 0px;
}
#contene_notas {
    border-top: 1px dashed #000000;
    line-height: 120%;
    padding: 4px 0px 4px 0px;
}
#table_factura {
    font: 10pt sans-serif;
}
#cabe {
    font: 7pt sans-serif;
}
#txttotalfac {
    position: relative;
    float: left;
    left: 0px;
}
#txtefectivofac {
    position: relative;
    float: left;
    left: 0px;
}
#txtcambiofac {
    position: relative;
    float: left;
    left: 0px;
}
#txtnumliteral {
    float: left;
    font: 8pt;
}
#txttec {
    position: relative;
    float: left;
    width: 198px;
    left: 40px;
    text-align: right;
}

/*-------------------------------------------------------------------------------------FRANJA PARA AVISO DE CLIENTES--------------------------------------------------*/

#foco_cliente {
    background: #dadada;
    width: 30px;
    height: 50px;
}

/*Por útimo, definimos los colores, aquí algunos ejemplos:*/


/*----------------------------------------------------------------------METODO MIXTO------------------------------------------------------------------------*/

#metodo_mixto {
    display: none;
    position: absolute;
    top: 120px;
    width: 300px;
    height: 280px;
}
#mixto {
    border: none;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 280px;
    height: 240px;
}
.input_mixto {
    width: 100%;
    height: 100%;
    background: #e6e6e6;
    color: #53bf8e;
    border: none;
    font-weight: 100;
    font-size: 20px;
    text-align: right;
    border: 1px solid #808080;
}
#input_mixto:focus {
    border: 2px solid #808080;
}
.td_mixto {
    width: 80px;
    font-weight: bold;
    text-align: left;
}

/*----------------------------MIXTO GIFTCARD----------------------------------------------------*/

#cliente_gift_card_mix {
    font-size: 10px;
}
#monto_mix_gift {
    background: #BF3D3D;
}
#mixto .accion {
    width: 150px;
    height: 30px;
    border-radius: 1px 1px 1px 1px;
    font-size: 15px;
    vertical-align: middle;
    margin: 2px 2px 2px 2px;
    border: none;
    cursor: pointer;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    /*font-weight: bold;*/
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
}
#mixto .rojo {
    background-color: #cd5257;
}
#mixto .rojo:hover {
    background-color: #f08080;
}

/*----------------------------------VENTAS CON FACTURA---------------------------------------------------*/

#venta_con_factura {
    width: 600px;
    /* Le damos un ancho de 500px */
    height: 265px;
    /* Le damos un alto de 300 px */
    background: #efefef;
    display: none;
    /* La ocultamos */
    background: #fff;
    /* Le damos un color de fondo blanco */
    position: fixed;
    /* Posicion fixed para que no se mueva con las barras de desplazamiento */
    z-index: 10;
    /* le damos un index para que se sobreponga a la capa */
    top: 30%;
    /* Indicamos el punto de origen en el centro de la pantalla */
    left: 50%;
    /* Indicamos el punto de origen en el cento de la pantalla */
    margin: -150px 0 0 -300px;
    /* le añadimos margen, el primer valor tiene que ser la mitad de la altura y el segundo la mitad de la anchura para que nos quede centradp */
    background-clip: padding-box;
    /* Firefox 4, Safari 5, Opera 10, IE 9 */
    -moz-background-clip: padding;
    /* Firefox 3.6 */
    -webkit-background-clip: padding;
    /* Safari 4? Chrome 6? */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 8px solid rgba(50, 50, 50, 0.8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 9px rgba(0, 0, 0, 0.8);
}
#in_mixto_sus_1:focus {
    border: 2px solid #000000;
}
#in_mixto_bs_2:focus {
    border: 2px solid #000000;
}
#in_mixto_sus_2:focus {
    border: 2px solid #000000;
}