@font-face {       
    font-family: "Cent";
    src: url(fonts/century.ttf) format("truetype");
}
@font-face {       
    font-family: "Cent";
    src: url(fonts/century.ttf) format("truetype");
}
@font-face {       
    font-family: "poppins-regular";
    src: url(fonts/Poppins-Regular.ttf) format("truetype");
}

@font-face {       
    font-family: "poppins-bold";
    src: url(fonts/Poppins-Bold.ttf) format("truetype");
}

*{
    /*font-family: Tahoma;*/
    font-family: Cent;
    font-size: 13px;
}
/* Chrome*/
::-webkit-input-placeholder { 
    color:rgb(200,200,200); 
    font-size: 0.9em; 
    padding: 10px 5px;
    font-family: Cent;

} 
/* firefox 19+ */
::-moz-input-placeholder { 
    color:rgb(150,150,150); 
    font-size: 0.9em; 
    padding: 10px 5px;
    font-family: Cent;
} 
/* ie */
:-ms-input-placeholder { 
    color:rgb(150,150,150); 
    font-size: 0.9em; 
    padding: 10px 5px;
    font-family: Cent;
} 

body{
    overflow-x: hidden;
    box-sizing:border-box;
    background: radial-gradient(circle, rgba(238,174,202,0.3) 1%, rgba(148,187,233,0.28) 10%);
}
/*-------------ESTILOS DEL HEADER DEL INDEX-----------------*/   
header{
    width: 100%;
    height: auto;
    
    color: #303030;
    text-align: center;
    padding: .2em;
}
    .trat,.data{
        font-family: cent;
    }
    .trat{
        font-size: 2.4em;
        font-weight: bold;
       
    }
    .data{
        font-size: 1.1em;
    }

/*-------------ESTILOS DEL BODY DEL INDEX-----------------*/  
.cont-btn{
    width: 100%;
    height: 100%;
}
a{
    text-decoration: none;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0;
}

h2{
    text-align: center;
}


/*------------ESTILOS PARA MODAL DE REGISTRO NUEVO USUARIO------------*/
input{
    font-family: Cent;
    text-align: center;
}
    .modal{
        width: 35%;
        min-width: 400px;
        max-width: 400px;
        height: auto;

        border: 1px solid #AEAEAE;
        border-radius: 7px;
        background-color: #fff;
        top: 50%;
        right: 0;
        bottom: 0;
        left: 50%;
        margin: 0 auto;
        padding: .5em;
        text-align: center;
        transform: translateY(38%);
        
    }
    .titulo-modal{
        width: 100%;
        box-sizing: border-box;
        font-size: 1.2em;
        color: rgb(65,65,65);
        padding: 0 0 5px 6px;
        border-bottom: 1px solid rgb(210,210,210);
        font-weight: bold;
        text-align: center;
        margin-bottom: 1em;
    }
        .modal img{
            margin-top: -18%;
            width: 50%;
            height: auto;
            border: 0px solid #fff;
            border-radius: 50%;
            padding: 10px;
        }
        .modal table{
            width: 100%;
            height: auto;
            margin-top: 2%;
        }
        .subtitulo-modal{
            padding-bottom: 2px;
            font-size: .9em;
            text-align: center;
        }
            .modal table tr{
                width: 100%;
                height: auto;
            }
                .modal table tr td{
                    padding: 5px 5px;
                }
                    .modal table input{
                        width: 100%;
                        height: auto;
                        padding: 9px 0;
                    }
.ident-ingreso{
    font-size: .9em;
    color: #1174A3;
    font-weight: bold;
}                    
.btn-enviar,.btn-cancelar,.btn-alternativo{
    box-sizing: border-box;
    margin-top: 20px;
    color: #f2f2f2;
    font-family: Cent;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    padding: 5px 5px;
    text-align: center;
    font-size: 1.2em;
}
.btn-alternativo{
    background: #06c;
    border: #23B2DB;
}
.btn-enviar{
    background-color: rgb(92,184,92);
    border: 1px solid rgb(92,184,92);
}
.btn-cancelar{
    background: #e7585a;
    border: 1px solid #e7585a;

}
.btn-enviar:hover,.btn-cancelar:hover,.btn-alternativo:hover{
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
}
.btn-enviar:hover{
    background-color: rgb(56,128,56);
}
.btn-cancelar:hover{
    background-color: #c31c1e;
}
.btn-alternativo:hover{
    background: purple;
}

#respuesta{ /*Estilos para las respuestas del servidor*/
    width: auto;
}
#p-error,#p-success,#p-info,#p-warning{
    font-size: 1.1em;
    border-radius: 3px;
    padding: 7px 7px;
    margin: 3px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    max-width: 750px;
    margin: 0 auto;
}

    #p-error{
        background-color: rgba(140,50,50,.1);
        color: rgb(140,50,50);
        border-left: 3px solid rgb(140,50,50);
    }
    #p-success{
        background-color: rgba(51,106,32,.1);
        color: rgb(51, 166, 32);
        border-left: 3px solid rgb(51, 166, 32);
    }
    #p-info{
        background-color: rgba(178,223,219,.3);
        color: rgba(0,77,64,.9);
        border-left: 3px solid rgb(0,77,64);        
    }
    #p-warning{
        background-color: rgba(225,113,0,.1);
        color: rgb(225,113,0);
        border-left: 3px solid rgb(225,113,0);         
    }


/*-----------ESTILOS PARA MODAL DE INICIAR SESION-----------*/

.cont-modal-ingr .modal{
    width: 25%;
}
.cont-modal-ingr img{
    width: 30%;
    height: auto;
    margin-left:35% ;
}
#contrasena_log{
    display: none;
}

/*-------------ESTILOS PARA SECCION DEL MENÚ------------*/

.seccion-menu,.seccion-principal{
    display: inline-block;
    vertical-align: top;
    box-sizing:border-box;
    height: auto;
    border-radius: 5px;    
}

.seccion-menu{
    width: 0;
    max-width: 370px;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    position: fixed ;
    z-index: 100;
    overflow: auto;
    border: 1px solid #A8A8A8;
    color: #fff;
}
    .datos-usuario{
        box-sizing:border-box;
        padding: 20px;
        margin-top: -15px;
        width: 100%;
        height: auto;
        color: #fff;
        border-radius: 5px;
    }
        .datos-usuario p{
            top: 0;
            color: #000;
            text-align: center;
        }
            .titulo-datos-usuario{
                font-size: 1.4em;
                margin-top: 0px;
                color: #000;
            }
            .titulo-datos-usuario strong{
                font-size: 1.8em;
                font-family: cent;
            }
            .establecimiento-datos-usuario{
                margin-top: 20px;
                font-size: .9em;
            }
            .nombre-datos-usuario{
                border-top: 1px solid #f2f2f2;
                margin-top: 10px;
                padding-top: 12px;
                font-size: 1.2em;
                color: #000;
            }
    .contenedor-menu{
        border-top: 2px solid #fff; 
        background-color: transparent;

    }
        .contenedor-menu div{
            width: 100%;
            border-bottom: 1px solid rgb(130,130,130);
            padding: 1px 0;
            box-sizing:border-box;
        }
            .contenedor-menu span{
                font-size: 15px;
            }
        .contenedor-menu div:hover {
            padding-left: 5px;
            transition: all .2s;
            background: linear-gradient(190deg, rgba(255, 226, 239, 1) 28%, rgba(220, 236, 255, 1) 100%);
            color: #000;
        }   
        .contenedor-menu .span_s,.contenedor-menu div img{
            vertical-align: top;
            display: inline-block;
            margin: 5px auto;
            width: 0px;
            
        }
        .contenedor-menu .span_s{
            padding: 9px;
            font-size: 1em;
            text-transform: uppercase;
            width: 80%;
        }
            .contenedor-menu div img,.ruta table td img{
                width: 25px;
                padding: 5px;
                margin-left: 10px;
            }
            .a-contenedor{
                text-decoration: none;
                color: #000;
                margin-left: 15px;
                font-weight: bold;
            }
        .contenedor-item img{
            background: rgb(225, 225, 225);
            border: 0px;
            border-radius: 50%;
            margin: 0px;
            padding: 0px;
        }

.modal_cliente_servicio{
    width: 100%;
    height: 100%;
    background: rgba(45,45,45,.5);
    position: fixed;
    top: 0;
    text-align: center;
    overflow: auto;
    display: none;
}
    .contenedor_formulario{
        width: 70%;
        max-width: 1000px;
        min-width: 700px;
        height: auto;
        background: white;
        margin: 0 auto;
        margin-top: 6%;
        padding: 3em 1em;
        border-radius: 5px;
        border: 1px solid white;
        overflow: auto;
    }
/*------------ESTILOS PARA LA SECCION PRINCIPAL ( BANNER SUPERIOS )------------*/

.btn-show-menu, .banner-superior{
    display: inline-block;
    vertical-align: top;
}

.btn-show-menu, .btn-hide-menu{
    width: 40px;
    border: 2px solid #f2f2f2;
    border-radius: 50%;
}
    .btn-show-menu{
        margin-left: 13px;
        padding-top: 0;
        
    }
    .btn-hide-menu{
        
        margin-left: -6px;

    }
.seccion-principal{
    width: 100%;
    height: 100%;
    margin-right: 0;
    float: right;
    background: linear-gradient(190deg, rgba(255,226,239,0.4150035014005602) 28%, rgba(220,236,255,1) 100%);;
}
.banner-superior,.contenido-principal{
    width: 100%;
    display: block;
    box-sizing:border-box;
}
.banner-superior, .btn-show-menu{
    position: fixed;
    margin-top: 5px;

}
.banner-superior{
    width: 91%;
    border-bottom:1px solid rgb(198,198,198);
    height: 43px;
    margin-left: 8%;
    background: white;
    border-radius: 10px;
}
.contenedor-contenido{
    width: 100%;
    margin-top: 5em;
}

    .ruta,.logout{
        float: left;
        height: 40px;
    }
    .ruta{
        width: 75%;
        margin-left:0%;
    }
        .ruta table{
            width: auto;
        }
            .ruta table .td-dashboard{
                font-size: 1.3em;
                font-weight: bold;
            }
            .ruta table .td-ruta{
                color: rgb(128,128,128);
                font-weight: 600; 
                font-size: .90em;   
            }
    .logout{
        width: 25%;
    }
        .logout img{
            width: 35px;
            cursor: pointer;
            float: right;
            border-left: 2px solid #000;
            margin: 0 auto;
            padding: 0px 10px 0px 10px;
        }

/* Estilos para caja menor */
.saldo_caja_positivo, .saldo_caja_negativo{
    text-align: right;
    background: #444444;
    padding: 2px 5px;
    float: right;
    color: #fff;
    font-weight: 100;
    font-size: 1.1em;
}
    .saldo_caja_positivo{
        background: #40BE40FF;
    }
    .saldo_caja_negativo{
        background: #DA0509FF;
    }

.input_350_ancho{
    width: 350px;
}
.identificador_pedido{
    width: 800px;
    margin: 0 auto;
}
.identificador_pedido p, .identificador_pedido button{
    display: inline-block;
    vertical-align: top;
    margin: 0 auto;
}
.identificador_pedido p{
    width: 70%;
}
.identificador_pedido button{
    float: right;
}
/*---------ESTILOS PARA LO QUE ESTA DENTRO DE LA SECCION PRINCPIAL ( CONTENIDO DE FORMULARIOS )--------*/
.contenido-principal{
    width: 100%;
    height: 100vp; 
    padding: 10px 17px;  
}   

.contenedor-consulta{
    text-align: center;
}
    .inp-consulta-inventario{
        padding: 5px;
    }

    /*---- BOTON AGREGAR ( + ) -----*/
    .btn-agregar{
        width: 40px;
        float: right;
        margin: 10px 20px;
        cursor: pointer;
        background: #fff;
        border-radius: 50%;
    }

/*------- ESTILOS PARA INVENTARIO ---------*/

.contenedor-tablas{
    display: none;
    width: 100%;
    height: auto;
    background-color: #f2f2f2;
    border: 1px solid #c0c0c0;
    margin: 0 auto;
    border-radius: 15px;
}
.h2-titulo-dos{
    text-align: center;
    padding: 5px 0;
    /*background-color: rgba(124, 7, 7, .5);*/
    border-top: 2px solid rgba(124, 7, 7, 1);
    
    
    /*#338133*/
}
.h2-titulo{
    text-align: center;
    padding: 5px 0;
    color: #000;
    background: linear-gradient(190deg, rgba(255, 226, 239, 1) 28%, rgba(220, 236, 255, 1) 100%);
    border: 1px solid #c0c0c0;
}
.h2-titulo-secundario{
    text-align: center;
    padding: 5px 0;
    color: #fff;
    background-color: #1D72E5;
}
.titulo-modal-principal{
    width: 100%;
    margin: 0px;
    text-align: center;
    padding: 15px 0px;
    color: #fff;
    background-color: crimson;/*#06c*/
    background-color: #06c;
    color: #f2f2f2;
    font-size: 1.5em;
    border-radius: 15px 15px 0px 0px;
    font-family: cent;
    font-weight: 500;
}
.tabla-fichas-abiertas{
    width: 100%;
    border: 1px solid #c0c0c0;
    background-color: #fff;
}
.contenedor_escribir_cantidad{
    width: auto;
    display: inline-block;
    vertical-align: top;
    border-left: 1px solid #c0c0c0;
    margin-left: .8em;
    margin-top: .4em;
}
        .contenedor_derecho table, .contenedor-tablas table {
            width: 100%;
            text-align: center;
            padding:2px;
            border-radius: 5px;
        }
        .contenedor-tablas .tabla-botones td{
            width: 50%;
        }
            /*.contenedor-tablas table button{
                width: 50%;
                padding: 6px;
                font-size: 1.2em;
            }*/
                .contenedor-tablas table .btn-enviar{
                    float: right;
                }
                .contenedor-tablas table .btn-cancelar{
                    float: left;
                }                
            .contenedor-tablas table input{
                width: 100%;
                background-color: #fff;
                border:1px solid gray;
                padding: 5px;
                text-align: center;
            }
#contenedor-tablas-nuevo-usuario{
    background: #fff;
}
/*---- Botones de imprimir o cerrar la impresion  ----*/
.boton-imprimir-pedido ,.boton-cerrar-impresion{

    position: fixed;
    border-radius: 100%;
    color: #f2f2f2;
    border: 0;
    padding: 10px;
    height: 80px;
    width: 80px;
    font-size: 1.1em;
    cursor: pointer;
    display: block;
    font-weight: bold;

}
.boton-imprimir-pedido{

    border: 2px solid rgba(30, 143, 43, .9);
    background: rgba(30, 143, 43, .8);
    margin-left: 1%;
    /*color: #000;*/

}
.boton-cerrar-impresion{

    border: 2px solid rgba(189, 14, 23, .9);
    background: rgba(189, 14, 23, .8);
    margin-left: 1%;
    margin-top: 8%;
    /*color: #000;*/

}

/*--- Estilos para modales ---*/
.modal_editar_producto,.modal_quitar_producto, .modal-editar-usuario, .modal-ayuda, .modal-caja, .modal-editar{
    width: 100%;
    height: 100%;
    background: rgba(45,45,45,.4);
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    overflow: auto;
    display: none;
}
.modal-editar .contenedor_formulario{
    width: 50%;
    max-width: 750px;
    min-width: 600px;
    height: auto;
    background: #FCFCFC;
    margin: 0 auto;
    margin-top: 10%;
    border-radius: 15px;
    border: 1px solid white;
    overflow: auto;
    padding: 0px;
}
.modal-editar .contenedor_formulario table{
    width: 100%;
    padding: 10px;
    background-color: #f2f2f2;
}
.modal-editar .contenedor_formulario table tr td{
    background-color: #fff;
}
.modal-editar .contenedor_formulario table input{
    width: 100%;
}
.td_subtitulo{
    background-color: #e0e0e0;
    width: auto;
    max-width: 100px;
}
    .modal_editar_producto .contenedor_formulario, .modal-editar-producto .contenedor_formulario, .modal-ayuda .contenedor_formulario{
        width: 50%;
        max-width: 750px;
        min-width: 600px;
        height: auto;
        background: #FCFCFC;
        margin: 0 auto;
        margin-top: 10%;
        padding: 3em 1em;
        border-radius: 5px;
        border: 1px solid white;
        overflow: auto;
        
    }
        #table-producto{
            width: 100%;
            text-align: center;
        }
            #table-producto tr {
                width: 100%;
            }

/* ---- ESTILOS PARA LAS CATEGORIAS ---- */

.imagen_previa_categoria{

    border: 1px solid #9B0B0B;
    width: 50%;
    min-width: 60px;
    max-width: 250px;
}
    .imagen_accion{
        border: 1px solid gray;
        max-width: 22px;
        max-height: 22px;
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        padding: 1px;
        background-color: #fff;
        margin-left: 3px;
    }
    .imagen_accion:hover{
        background: #ffcf;

    }
/*------ ESTILOS PARA LA SECCION DE CONFIGURACIONES -------*/

.tabla_configuraciones{
    width: 47%;
    display: inline-block;
    vertical-align: top;
    border: 1px solid gray;
    margin-left: 1%;
    border-radius: 5px;
    padding: 5px;
}
/*------- ESTILOS PARA TABLA DE RESULTADO DE BUSQUEDA DE PRODUCTO --------*/

#editar_producto, #eliminar_producto{
    border:1px solid gray;
    width: 27px;
    height: 25px;
}

.celda-blanco{
    background: #fff;
    cursor: pointer;
    font-weight: ;
}
.celda-gris{
    background: #DDD;
    cursor: pointer;
    font-weight: ;
}
.celda-procesada{
    background-color: rgba(139,205,139,.5);
    border: rgb(92,184,92);
    cursor: pointer;
    font-weight: ;
}

/*-----------ESTILOS PARA EL ARCHIVO DE ACTUALIZA DATOS DE USUARIO-----------*/
.contenedor-actualizar-usuario .modal{
    margin-top: 5px;
    border: 1px solid rgb(200,200,200);
    min-width: 60%;
}
    .contenedor-actualizar-usuario .modal table tr td{
        padding-top: 15px;
        color: rgb(128,128,128);
    }

/*--- ESTILOS PARA EL MODAL DE CALCULAR EL VUELTO ---*/

    #modal-calcular-vuelto table{
        width: 85%;
        max-width: 700px;
        font-size: 2em;
        margin: 0 auto;
        border-radius: 15px;
        background-color: #f2f2f2;
        overflow: hidden;
    }
        #modal-calcular-vuelto table tr td{
            width: 50%;
            font-size: 3em;
            background: #fff;
            padding:15px;

        }
            #modal-calcular-vuelto table tr td input{
                width: 98%;
            }

        #btn-calcular, #btn-cerrar{
            font-size: .7em;
            margin-left: 15%;
        }
        #td-vuelto{
            color: #8E0000;
            font-size: 4em;
            font-weight: bold;
        }


/*--- ESTILOS PARA EL INPUT DEL SCANER DEL PRODUCTO EN VENDER.PHP ---*/
.img_ayuda{
    position: fixed;
    float: right;
    margin-left: 96.5%;
    width: 35px;
    margin-top: 3em;
    cursor: pointer;
}
    .img_ayuda:hover{
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        -o-transition: all .4s;
        transform: all .4s;

        -ms-transform: scale(1.5); /* IE */
        -moz-transform: scale(1.5); /* FF */
        -webkit-transform: scale(1.5); /* Safari y Chrome */
        -o-transform: scale(1.5); /* Opera */
    }
.img_cerrar_ayuda{
    width: 35px;
    position: fixed;
    margin-left: 750px;
    margin-top: -60px;
    cursor: pointer;
}
.modal-ayuda .contenedor_formulario{
    width: 750px;
}

.vista_total, .vista_palabra_total, #btn_vender, .vista_vueltos{
    text-align: left;
    margin-top: -5px;
    padding: 0;
    margin-bottom: -10px;

}
.vista_palabra_total{
    width: auto;
    min-width: 80px;
    text-align: right;
    font-size: 2em;
    text-align: left;
}

.vista_total, .input_efectivo{
    border:2px solid #36A3C8;
    width: 150px;
    color: #000;
    padding: 1px;
    font-size: 1.8em;
}
.input_efectivo{
    margin-top: 5px;
    font-size: 2em;
}
.vista_vueltos{
    background: #fff;
    color: #000;
}
.tabla_vista_totales{
    background: ;
    width: 100%;
    margin-top: 5px;
}
.tabla_vista_totales tr td:nth-child(1), .tabla_vista_totales tr td:nth-child(3), .tabla_vista_totales tr td:nth-child(5){
    width: 8%;
}
.tabla_vista_totales tr td:nth-child(2),.tabla_vista_totales tr td:nth-child(4),.tabla_vista_totales tr td:nth-child(6){
    width: 16%;
}
.tabla_vista_totales tr td:nth-child(3){

}
.tabla_vista_totales tr td:nth-child(4){
    width: 20%;
}
.tabla_vista_totales tr td:nth-child(5){

}
.tabla_vista_totales tr td:nth-child(6){

}
.tabla_vista_totales tr td:nth-child(7),.tabla_vista_totales tr td:nth-child(8){
    width: 7%;
    text-align: right;
}
.tabla_vista_totales tr td:nth-child(8){

}

.contenedor_ventas_temporales{
    width: 99%;
    bottom: 6%;
    background: #fff;
    position: fixed;
}
.contenedor_venta_temporal{
    background: orange;
    display: inline-block;
    vertical-align: top;
    border-radius: 5px;
    font-weight: 600;
    padding: 3px;
    margin-left: 15px;
}   
    .contenedor_venta_temporal span{
        cursor: pointer;
    }
    .contenedor_venta_temporal img{
        width: 20px;
        margin-top: -15px;
        margin-right: -15px;
        cursor: pointer;
    }

#btn_vender{
    width: 110px;
    padding: 4px;
}
.entrada_producto{
    width: 70%;
    text-align:center;
    padding: 2px;
    outline: green;
    font-size: 1.2em;
    font-family: Cent;
    border:2px solid skyblue;
    margin-top: -10px;
}

.contenedor_busqueda_productos{
    margin: 0 auto;
    width: 70%;
    min-width: 700px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid gray;
    height: auto;
    max-height: 15em;
    overflow-y: auto;
}
    .resultado_autobusqueda{
        background: rgba(89, 89, 89, .2);
        color: #000;
        margin: 2px;
        padding: 4px;
        cursor: pointer;
    }

.contenedor-pedido,.contenedor-configuraciones{
    width: 99%;
    height: auto;
    background-color: rgba(100,100,100,.1);
    border-radius: 3px;
    margin: 0 auto;
}
.contenedor-pedido{
    height: 26em;
    max-height: 27em;
    overflow-y: auto;
    border: 1px solid #E5E5E5;
}
    .tabla-pedido-header, .tabla-pedido{
        border:1px solid gray;
        width: 100%;
        height: auto;
        text-align: center;
    }
        .tabla-pedido-header td, .tabla-pedido td{
            background-color: rgb(50,50,50); 
            color: white;  
            width: 25%;         
        }

/*----- ESTILOS PARA LOS PEDIDOS PENDIENTES EN LA FUNCIONALIDAD VENDER ------*/

.seccion_pedidos_pendientes{
    width: 99.8%; /*width: 84.1%;*/
    height: 35px;   /*height: 340px;*/
    top: 100vp;
    bottom: 0;
    position: fixed;
    border-radius: 5px;
     /*right: 6;*/
    -webkit-box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, .9);
    -moz-box-shadow:    0px 0px 15px 4px rgba(0, 0, 0, .9);
    box-shadow:         0px 0px 15px 4px rgba(0, 0, 0, .9);    
    background: #f2f2f2;
    
}   
    .seccion_pedidos_pendientes h2{
        margin-top: 0;
        cursor: pointer;
        background: rgb(197,45,18);
    }
    .contenedor_pedidos_pendientes{

        overflow-y: auto;
        height: 380px;
        max-height: 380px;

    }
    .seccion_pedidos_pendientes table{
        background: rgba(50,50,50,.1);
        width: 100%;
    }   
        .tabla_encabezado_pedido{
            border:0;
        }
        .tabla_encabezado_pedido td{
            background: rgb(50,50,50);
            color: #f2f2f2;

        }
        #span_unidades{
            color: rgb(0,102,204);
            font-weight: bold;
        }

        .seccion_pedidos_pendientes table td{
            text-align: center;
            border-bottom: 1px solid gray;
            border-left: 1px solid gray;
            padding: 1px 1px;
        }
        .seccion_pedidos_pendientes table tr td:nth-child(1){
            width: 80px;
            max-width: 80px;
            min-width: 78px;
        }
        .seccion_pedidos_pendientes table tr td:nth-child(2){
            width: 310px;
            max-width: 310px;
            min-width: 220px;
        }
        .seccion_pedidos_pendientes table tr td:nth-child(3){
            width: 280px;
            max-width: 280px;
            min-width: 200px;
        }        
        .seccion_pedidos_pendientes table tr td:nth-child(4){
            width: 175px;
            max-width: 175px;
            min-width: 150px;
        }
        .seccion_pedidos_pendientes table tr td:nth-child(5){
            width: 100px;
            max-width: 100px;
            min-width: 100px;
        }      
            .contenedor_pedidos_pendientes table .tr_pedido{
                border:1px solid gray;
            }  
                .contenedor_pedidos_pendientes table tr td img, #table-producto tr td img{
                    width: 22px;
                    padding: 3px;
                    cursor: pointer;
                    border: 1px solid gray;
                    margin: 0 3px;
                    border-radius: 3px;
                }
                .contenedor_pedidos_pendientes table tr td img:hover, #table-producto tr td img:hover{
                    background: #F0EF86;
                    border:1px solid #fff;
                }


/*------- ESTILOS PARA LA SECCION DE TOMAR PEDIDO ---------*/

.contenedor-servicios,.contenedor-formato-pedido{
    margin-top: 1em;
    height: auto;
    background-color: rgba(200,200,200,.5);
    border-radius: 2px;    
    vertical-align: top;
    display: inline-block;
    padding: 5px;
}
.contenedor-servicios{
    width: 70%;
}
.contenedor-formato-pedido{
    width: 26.5%;
}

    .contenedor-lateral-izquierdo-categorias, .contenedor-productos-por-categorias{
        display: inline-block;
        vertical-align: top;
    }

    .contenedor-lateral-izquierdo-categorias{
        width: 25%;
        height: 87%;
        overflow-y: auto;
        overflow-x: hidden;
        border:1px solid #ccc;
        background: #fff;

    }
    .contenedor-productos-por-categorias{
        width: 71%;
        height: 77%;
        background: #606060;
        padding: 5px;
        color: #fff;
        overflow-y: auto;
        overflow-x: hidden;

    }
        .contenedor_carta{
            margin-bottom: 3px;
            display: none;
        }
            #carta0{
                display: block;
            }

        .contenedor-servicios img{
            width: auto;
            max-width: 120px;
            padding: 5px;
            margin: 0 auto;
            max-height: 50px;
            margin-left: 25%;
        }

        .contenedor-categorias-pedido{
            display: inline-block;
            vertical-align: top;
            width: 48%;
            max-height: 6em;
            border:1px solid #818181;
            cursor: pointer;
            margin-bottom: .5em;
            border-radius: 5px;
        }

        .contenedor-categorias-pedido:hover{
            border: 1px solid #515151;
            background: #606060;

        }

            .contenedor-categorias-pedido h2{

                background: #098CB7;
                color: #fff;
                padding: 3px;
                margin: 0;
                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                hyphens: auto;
                overflow-wrap: break-word;
            }


    .contenedor-pedido-tomado{
        width: 99%;
    }
        .contenedor-pedido-tomado h2{
            border-bottom: 1px solid gray;  
            padding: 5px;
        } 

.td-titulo{
    background-color: #484848;
    font-weight: 500;
    color: #fff;
    border-radius: 5px 0px 0px 5px;
    padding: 3px;
    width: 30%;
}
.contenedor_rol_personal{
    width: 100%;
    display: block;
}
input[type=checkbox]{
  /* Doble-tamaño Checkboxes */
  -ms-transform: scale(1.3); /* IE */
  -moz-transform: scale(1.3); /* FF */
  -webkit-transform: scale(1.3); /* Safari y Chrome */
  -o-transform: scale(1.3); /* Opera */
  margin: 8px 10px 0px 0px;
}
input[name=cantidad_proceso_personal]{
    margin-left: 10px;
    width: 150px;
}
label{
    width: 80%;
    /*margin-left: 20px;*/
}

.checkboxtexto{
  /* Checkbox texto */
  font-size: 110%;
  display: inline;
}


.tabla-botones #guardar_pedido{
    display: none;
    width:80%;
}

    .table-producto,.table-producto-btn, #table-producto{
        width: 100%;
        background: #f2f2f2;
        /*padding: 1%;*/
        text-align: center;
    }
        #table-producto td{
            width: 22%;
        }

        .table-producto img{
            border:1px solid gray;
            padding: 3px;
            width: 25px;
            cursor: pointer;
        }
        .table-producto img:hover{
            background: white;
            border:1px solid white;
        }

        #tabla_datos_pre{
            width: 100%;
        }
            #tabla_datos_pre #tr_titulo{
                background-color: rgb(64,128,128);
                text-align: center;
                padding: 1px 10px;
                color: white;
                font-weight: bold;
            }
                #tabla_datos_pre #td_fila{

                    border-bottom: 1px solid gray;
                    border-left: 1px solid gray;
                    padding: 2px 0;
                    text-align: center;

                }
/* -- Estilos para los reportes -- */
.icono_descarga{
    width:31px;
    padding: 2px;
    float:right;
    margin-top: -10px;
    margin-right: 1px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #c0c0c0;
}
.resultado_r .icono_descarga{
    margin-top: -35px;

}
.btn-consulta{
    background: #48A1E6;
    color: #fff;
    cursor: pointer;
    border:0;
    padding: 10px;
    font-size: 1.1em;
    border-radius: 3px;
    border-left: 4px solid #1A67A1;
    margin-left: .8%;
    display: inline-block;
    vertical-align: top;
}
    .btn-consulta:hover{
        background: #1A67A1;
        border-left: 4px solid #48A1E6;
    }
.contenedor-consulta-reporte{
    width: 70%;
    max-width: 650px;
    min-width: 600px;
    border:1px solid #B0B0B0;
    border-radius: 2px;
    margin: 0 auto;
    text-align: center;
    display: none;
}
    .contenedor-consulta-reporte table{
        text-align: center;
        width: 100%;
    }




/* ----- ESTILOS PARA LA IMPRESION DE LA FACTURA -----*/

.contenedor_formatos{
    display: none;
}
#modal_impresion_factura{
    overflow: hidden;
    left: 0%;
    width: 100%;
}
    #modal_impresion_factura .contenedor_formulario{
        width: 90%;
        min-width: 97%;
        margin-top: 0%;
        height: 100%;
        background: #fff;
    }

.contenedor_info_izquierda, .contenedor_info_derecha, .contenedor_ancho_completo{
    border:1px solid #ccc;
    border-radius: 5px;
    margin-top: -3em;
    padding: 0px;
    
}
.contenedor_info_derecha{
    width: 30%;
    margin-left: 0%;
    float: right;
}
.contenedor_info_izquierda{
    width: 68%;
    padding: 3px;
    /*background: #BFEAF7;*/
    float: left;
}
.img_superior_factura{
    width: auto;
    max-width: 250px;
    height: 100px;
    max-height: 120px;
}
    .contenedor_info_izquierda .establecimiento{

        font-size: 1.5em;
        font-weight: bolder;
        color: #000;
    }
    .contenedor_info_izquierda .direccion{
        background: rgba(219, 219, 219, .5);
        width: 100%;
        margin-top: 2px;
        padding: 5px 0px;
        font-weight: bold;
        color: #000;
    }
    .contenedor_info_izquierda .info_establecimiento_adicional,.nit{
        font-size: .8em;
        padding: 0px;
        margin-top: 3px;
        margin-bottom: 1px;
        color: #000;
        font-weight: bold;
    }
    .tabla_info_derecha{
        background: rgba(255, 255, 255, .9);
        width: 100%;
        text-align: center;
    }   

        .tabla_info_derecha tr td:nth-child(1){
            /*text-align: right;*/
        }
        .tabla_info_derecha tr td:nth-child(2){

            font-weight: bold;
        }

    /*#numero_factura, #fecha_venta{
        color: #EE0606FF;
        font-weight: bold;
    }*/
    
    .contenedor_ancho_completo{
        margin-top: 5px;
        width: 100%;
    }
        .contenedor_ancho_completo table{
            width: 100%;
            background: #fff;
        }
            .contenedor_ancho_completo table tr td{
                border: 1px solid #c0c0c0;
                background: #fff;
                border-spacing: 0;
                padding: 0px;
                margin: 0px;
                border-collapse: collapse;
            }


        .tabla_productos_factura tr td:nth-child(1){
            width: 5%;
        }
        .tabla_productos_factura tr td:nth-child(2){
            width: 52%;
        }
        .tabla_productos_factura tr td:nth-child(3){
            width: 15%;
        }
        .tabla_productos_factura tr td:nth-child(4){
            width: 7%;
        }
        .tabla_productos_factura tr td:nth-child(5){
            width: 20%;
        }
            .subtitulo-tabla{
                text-align: left;
                background: #BFEAF7;
                width: 15%;
            }
    #contenedor_fijo_inferior_media_carta, #contenedor_fijo_inferior_carta, #contenedor_fijo_inferior_carta_remision{
        margin: 0 auto;
        width: 98%;
        position: fixed;
        left: 0%;
    }
    #contenedor_fijo_inferior_media_carta{
        bottom: 1%;
    }
    #contenedor_fijo_inferior_carta, #contenedor_fijo_inferior_carta_remision{
        bottom: 1%;
        left: 1%;
        height: auto;
    }
        /*#contenedor_fijo_inferior table tr td:nth-child(1){
            background: red;
            width: 15%;
            text-align: right;
        }

        #contenedor_fijo_inferior table tr td:nth-child(2){
            width: 40%;
            text-align: right;
        }*/

        #contenedor_fijo_inferior_media_carta table tr td:nth-child(1), #contenedor_fijo_inferior_media_carta table tr td:nth-child(3),#contenedor_fijo_inferior_media_carta table tr td:nth-child(5),#contenedor_fijo_inferior_media_carta table tr td:nth-child(7),#contenedor_fijo_inferior_media_carta table tr td:nth-child(9){
            background: #DBDBDB;
            font-weight: bold;
            font-size: 1em;
        }

        #contenedor_fijo_inferior_media_carta table tr td:nth-child(9){
            font-size: 1.3em;
        }

        #contenedor_fijo_inferior_media_carta table .valores_factura{
            width: 15%;
            background: #fff;
            text-align: right;
        }

        #contenedor_fijo_inferior_carta table tr td:nth-child(1), #contenedor_fijo_inferior_carta_remision table tr td:nth-child(1){
            background: #DBDBDB;
            width: 10%;
        }
        #contenedor_fijo_inferior_carta table tr td:nth-child(2), #contenedor_fijo_inferior_carta_remision table tr td:nth-child(2){
            background: #fff;
            text-align: right;
            font-weight: bold;
            width: 25%;
        }

/* Estilos para imprimir el consolidado de facturas*/
#contenedor_impresion_consolidado{
    display: none;
}

.opciones_cliente{
    font-size: .8em;
}
#busqueda_ruta{
    min-width: 50px;
    text-align: center;
}
#ver_categorias{
    display: none;
}


/* Media query para las impresiones*/
@media print{

    .seccion-menu,.boton-imprimir-pedido ,.boton-cerrar-impresion, #info, .seccion_pedidos_pendientes,.contenedor-consulta,.respuesta,.contenedor-tablas,.contenedor-consulta-reporte,.banner-superior,.btn-show-menu, hr,.ocultar_impresion,#ocultar_impresion, .h2-titulo, .contenedor-consulta-reporte table, .contenedor_ventas_temporales, .contenedor-consulta, .columna_btn_acciones, .boton-imprimir-pedido, .btn-enviar, .btn-alternativo, .icono_descarga{
        display: none;
    }

    .seccion-principal,.modal_editar_producto,.modal_quitar_producto, .modal-editar-usuario, .modal-editar-sucursal,.modal_editar_sala,.modal-crear-pedido, .modal-imprimir-pedido, .modal-agregar-abono, .modal-imprimir-abono, .modal-agendamiento, .modal-tarea, .modal-agregar-estado-agendamiento,.modal-editar-agendamiento, .modal-agregar-estado-tarea, .modal-agregar-nueva-tarea, .modal-crear-notificacion, .modal_cliente_servicio{

        width: 99.5%;
        left: 0%;
    }

    #contenedor-tablas{
        margin-top: -5em;
    }

    #contenedor_fijo_inferior_carta{
        

    }

    #contenedor_fijo_inferior_media_carta{
        bottom: auto;
        top: 40%;
        border: 0px;
    }
    .info_inf_rem{
        font-size: .8em;
    }
    .tabla_resultado_clientes{
        margin-top: 0em;
    }
    .tabla_resultado_clientes tr td{
        font-size: .8em;
    }
    #contenedor-tablas-usuario{
        margin-top: -2em;
    }
}

#contenedor-table-ventas, #contenedor-table-productos{
    margin-top: 1em;
    float: left;
    margin-left: 2%;
    width:35%;
    border: 1px solid rgb(180,180,180);
    padding: 0px;
    height: auto;
    max-height: 80%;
    overflow-y: auto;
    text-align: center;
    background-color: #fff;
}
#contenedor-table-productos{
   width: 60%;
}
   #table-ventas{
      width: 100%;
   }
   #table-productos{
      width: 100%;
   }