a,textarea,li,p,button,span,select,h4,h3,h2,h1,th,input,td,label{
    font-family: "Poppins", sans-serif!important;
}
input,textarea{
    text-transform: uppercase;
}
a{
    text-decoration: none!important;
}

.select2-container .select2-selection--single {
    height: 36px;           /* igual a input bootstrap */
    padding: 6px 12px;
}


.user_borde {
    margin: 4px 0px;
    padding: 4px 8px;
    background-color: var(--rojoClaro);
    border-radius: 5px;
}

.user_coun p{
    color:var(--blanco);
    text-align: center;
    padding: 10px 0px;
    border-radius: 10px;
}

.centrar{
    text-align: center;
}
p{
    margin-bottom:0rem!important;
}
.negrita{
    font-weight: 600;
}

.separacion{
    padding-top: 2rem;
}

.idpermiso .choices {
    width: 100% !important;  /* Cambia el valor que necesites */
}
.choices {
    width: 90% !important;  /* Cambia el valor que necesites */
}
.choices .choices__inner {
        min-height: 30px!important;
        padding: 3px 10px!important;
        font-size: 13px!important;
}


.btn-delete{
    color:red;
    border:0px;
    font-size: 17px;
}

.btn-delete:hover{
    color:red;
}

.btn_agregar_carrito{
    border:0px;
    background-color: var(--AzulClaro);
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--blanco);
}

.btn_guardar{
    background-color: var(--AzulClaro);
    border:0px;
    border-radius: 15px;
    color:var(--blanco);
    padding: 7px 13px;
}

.btn_guardar:hover{
    background-color: var(--AzulOscuro);
}

.btn_modal_guardar{
    background-color: var(--rojoOscuro);
    border:0px;
    border-radius: 15px;
    color:var(--blanco);
    padding: 6px;
    width: 100%;
}

.btn_modal_guardar:hover{
    background-color: var(--rojoOscuro);
}

.btnSelect2{
    height: 36px;
    border: 0px;
    padding: 0px 10px;
    background-color: var(--AzulClaro)!important;
    color:var(--blanco)!important;
    align-items: center!important;
}

.btn_boton{
    border: 0px;
    padding: 0px 10px;
    background-color: var(--AzulClaro);
    color:var(--blanco);
    border-radius: 7px;
}


.btnSelect2{
    height: 36px;
    border: 0px;
    padding: 0px 10px;
    background-color: var(--AzulClaro)!important;
    color:var(--blanco)!important;
    align-items: center!important;
}

table{
    width: 100%;
    vertical-align: 0px!important;
    border-top-left-radius: 2rem!important;
}
table thead{
    /* background: #4C5AEB; */
    border-top-left-radius: 2rem!important;
}


table thead th{
    font-size: 14px!important;
    font-weight: 500;
    color:var(--negroClaro);
    height: 2rem;
    border:1px solid var(--gris-claro);
}

tr td{
    font-size: 12px;
    color:var(--gris);
    padding-bottom: 0px;
}

tbody tr{
    border-left: 4px solid #ffffff;
}

tbody tr:hover{
    border-left: 4px solid var(--AzulClaro);
    font-size: 12px;
}
tr:hover td{
    background-color: var(--blancoGris);
    color: var(--negroClaro);
}

.nueva_tabla tr:hover td{
    background-color: #ffffff!important;
    color:var(--negroClaro);
}


.formularioVenta div{
    margin: 2px 0px;
}

.btn_imprimir{
    font-size: 18px;
    color:var(--AzulClaro);
}

.btn_detalle{
    font-size: 18px;
    color:var(--naranja);
}


.btn_eliminar{
    /* padding: 2px 2px; */
    font-size: 18px;
    /* border-radius: 3px; */
    color:var(--rojoOscuro);
}

.btn_eliminar:hover{
    color:var(--rojoOscuro);
}

.btn_imprimir:hover{
    color:var(--AzulClaro);
}


.btn_detalle:hover{
    color:var(--naranja);
}

.btn_cerrado{
    padding: 2px 2px;
    font-size: 16px;
    border-radius: 3px;
    color:#cc11c2;
}

.btn_cerrado:hover{
    color:#cc11c2;
}

.doc_aceptado{
    color:var(--verdeOscuro);
    font-size: 16px;
}

.doc_generado {
    color:var(--rojoOscuro);
    font-size: 16px;
}

.btn_buscar{
    border:0px;
    background-color: #206fd8;
    padding: 4px 10px;
    color:var(--blanco);
    border-radius: 3px;
}
.btn_buscar:hover{
background-color: #87CBF2;
}


.btn_excel{
    background-color: var(--blanco);
    border:0px;
    border-radius: 5px;
    /* padding: 2px 6px; */

}
.btn_excel i{
    color: var(--verdeOscuro);
    font-size: 28px;
}

.btn_pdf{
    background-color: var(--blanco);
    border:0px;
    border-radius: 5px;
    padding: 2px 6px;
}
.btn_pdf i{
    color: var(--rojoOscuro);
    font-size: 28px;
}



.estado_inactivo{
    background: var(--rojoClaro);
    color:var(--rojoOscuro);
    padding: 2px 5px;
    border-radius:8px;
    font-size:12px;
    font-weight: 500;
    text-align: center;
}

.estado_activo{
    background:var(--verdeClaro);
    color:var(--verdeOscuro);
    padding: 2px 5px;
    border-radius:8px;
    font-size:12px;
    font-weight: 500;
    text-align: center;
}

.estado_parcial{
    background: #c6d5f6;
    color:#155dfc;
    padding: 2px 5px;
    border-radius:8px;
    font-size:12px;
    font-weight: 500;
    text-align: center;
}

.gridreporte{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0px 5px;
    border-radius: 10px;
}

.gridreporte div{
    margin: 5px 5px;
    border-radius: 10px;
}

.btn_border{
    border:0px;
    background-color: var(--azul-claro);
    padding: 7px 10px;
    border-radius: 4px;
    color:var(--blanco);
}
.btn_border:hover{
    background-color: var(--azul);
}

.btn_border2{
    border:0px;
    background-color: var(--rojo);
    padding: 6px 10px;
    color:var(--blanco);
    margin-bottom: 5px;
    border-radius: 4px;
}

.btn_border{
    border:0px;
    background-color: var(--azul-claro);
    padding: 7px 10px;
    border-radius: 4px;
    color:var(--blanco);
}
.btn_border:hover{
    background-color: var(--azul);
}


body{
    /* background-color: var(--fondo)!important; */
    /* background:#cbdada!important; */
    /* background:#F6F4FF!important; */
}
.main{
    display: grid;
    grid-template-columns: 100%;
    column-gap: 5px;
}

/* .fondo_blanco{
    background: var(--blanco);
} */


#btn-nav{
    display: none;
}
#menu{
    display: none;
}


/*cabecera */
.nav_sep{
    width: 120px;
}
.open_menu {
    display: none;
}
.nav_sep p{
    display: block;
}

.nav_beetwen{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0px;
}

/* .fondo_cabecera{
    background-color: #206fd8;
} */

.men_center a{
    color:var(--blanco);
    text-decoration: none;
    font-size: 14px;
    padding: 0px 8px;
}
.men_center a:hover{
    background-color: var(--naranja-claro);
    padding: 14px 8px;
    color:var(--blanco);
}
.dropdown_a{
    border: 0px!important;
    font-size: 15px!important;
    font-weight: 600!important;
}

.dropdown ul li{
    font-size: 14px;
}

.dropdown-menu{
   border: 0px solid #ffffff!important;
   padding: 10px 30px!important;
}


/* menu */
.block a{
    display: block;
    font-size: 13px;
    padding: 5px 10px;
    color:var(--gris);
    font-weight: 600;
}

.block a:hover{
    background-color: var(--naranja-claro);
    color:var(--blanco);
}

#panel-inventario {
    display: none;
}
#panel-reporte{
    display: none;
}
#panel-ventas{
    display: none;
}
#panel-compritas{
    display: none;
}
#panel-clientes{
    display: none;
}
#panel-caja{
    display: none;
}

#panel-usuario{
    display: none;
}

#panel-categoria{
    display: none;
}

.titulo_menu{
    background-color: var(--blanco);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border:1px solid red;
}
.titulo_menu p{
    font-size: 14px;
    font-weight: 500;
    color:var(--gris);
}


.titulo_menu i{
    font-size: 20px;
    color:var(--gris);
}
.block_menu{
    display: block;
}

.between p{
    align-items: center;
    padding: 8px 8px;
    margin: 13px 0px;
    cursor: pointer;
    text-transform: uppercase;
}

.between p:hover{
    background-color: var(--naranja);
    color:var(--blanco);  
}


/* Login */
.login_fondo{
    background-image: url("/img/fondo_inicio.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;
    background-color: rgba(0, 0, 0, 0.6);
    height: 100vh;
}

.log_txt{
    color:var(--blanco);
    text-align: center;
    padding-top: 7rem;
}
.log_txt h1{
    font-weight: 800;
    font-size: 3.5rem;
}
.log_txt h3{
    font-size: 2rem;
    font-weight: 700;
}
.log_txt p{
    font-size: 1.5rem;
    font-weight: 400;
}

.text-login p{
    color:var(--blanco);
    font-size: 18px;
    font-weight: 400;
}

.login_btn{
    background-color: #4C5AEB;
    border-radius:5px;
    border: 0px;
    color: var(--blanco);
    font-size:1rem;
    padding: 7px 10px;
}
.login_btn:hover{
    background-color: #3BAFDA;
}


.tex-input{
    align-items: center!important;
}
.tex-input span{
    background-color: #4C5AEB;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 6.3px 0px;
    width: 11%;
    text-align: center;
    color:var(--blanco);
}
.tex-input input{
    margin:4px 0px;
    font-size: 14px!important;
}
/* menu */
.menu-horizontal{
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0px;
    z-index: 1;
}

.menu-horizontal li a{
    display: block;
    text-decoration: none;
    padding: 5px 18px;
    font-size: 15px;
    font-weight: 500;
    color:var(--negroClaro);
}
.menu-horizontal li a:hover{
    padding: 5px 18px;
    background-color: var(--AzulClaro);
    color:var(--blanco);
}

.menu-horizontal li:hover{
    background-color: var(--AzulClaro);
    color:var(--blanco);
}

.menu-vertical{
    position: absolute;
    display: none;
    list-style: none;
    background-color: var(--blancoGris);
    padding: 0px;
}

.menu-horizontal li:hover .menu-vertical{
    display: block;
}
.menu-vertical li:hover{
    background-color: var(--AzulClaro);
    list-style: none;
}

.menu-vertical li a{
    display: block;
    color:var(--negroClaro);
    font-size: 11px;
    font-weight: 400;
} 
.menu-vertical li a:hover{
    display: block;
    color:var(--blanco);
    font-size: 11px;
} 

@media (min-width:1200px) {
    .menu-horizontal li a{
        /* margin: 0px 23px; */
        margin: 0px 2px
    }
}

@media (max-width:1199px) and (min-width:992px) {
    #btn-nav:checked ~ #menu{
        display: block;
        width: 50%;
    }

    .menu-horizontal{
        display: none;
     }

     .nav_sep p{
        display: none;
    }

    .open_menu {
        display: block;
        color: var(--gris);
        font-size: 25px;
        padding-left: 20px;
    }
    .open_menu:hover{
        color: var(--gris);
    }
    /********************** LOGIN ****************************/
    .menu-horizontal li a{
        text-align: center;
    }
    .tex-input{
        width: 85%!important;
    }

}

@media (max-width:991px) and (min-width:768px){

    /************* menu dispositivo **************/
    #btn-nav:checked ~ #menu{
        display: block;
        width: 50%;
    }
    .nav_sep{
        width: 120px;
    }
    .nav_sep p{
        display: none;
    }
    .open_menu {
        display: block;
        color: var(--gris);
        font-size: 25px;
        padding-left: 20px;
    }
    .open_menu:hover{
        color: var(--gris);
    }
    .menu-horizontal{
        display: none;
     }

    .men_center a{
       display: none;
    }
 
    .main{
        grid-template-columns: 100%;
    }

    .block a{
        padding: 5px 35px;  
    }
    .borde-menu{
        margin: 0px -15px;
        border-top: 1px solid #CED4DA;
        padding: 0px;
    }
    .between p{
        padding: 15px 20px;
        color:#D24D77;
        font-weight: 700;
    }

    .between p:hover{
        background-color: var(--blanco);
        color:#D24D77;
    }


    /********************** LOGIN ****************************/

    .log_txt h1{
        font-weight: 700;
        font-size: 2rem;
    }
        .log_txt h3{
        font-size: 1rem;
    }
    .log_txt p{
        font-size: 0.5rem;
    }

    /* .login_dise{
        grid-template-columns: 30% 90%;
    }

    .login_dise p{
        font-size: 17px;
        font-weight: 500;
    } */

    .login_btn{

        font-size:1rem;
    }
} 

@media (max-width:767px) and (min-width:540px) {

    /********************** menu dispositivo ****************************/
    #btn-nav:checked ~ #menu{
        display: block;
        width: 50%;
    }
    .nav_sep{
        width: 120px;
    }
    .nav_sep p{
        display: none;
    }
    .open_menu {
        display: block;
        color: var(--gris);
        font-size: 25px;
        padding-left: 20px;
    }
    .open_menu:hover{
        color: var(--gris);
    }
    .men_center a{
        display: none;
     }

     .menu-horizontal{
        display: none;
     }

     .block a{
        padding: 5px 35px;  
    }
    .borde-menu{
        margin: 0px -15px;
        border-top: 1px solid #CED4DA;
        padding: 0px;
    }
    .between p{
        padding: 15px 20px;
        color:#D24D77;
        font-weight: 700;
    }

    .between p:hover{
        background-color: var(--blanco);
        color:#D24D77;
    }
   

    /********************** LOGIN ****************************/

    .log_txt h1{
        font-weight: 700;
        font-size: 2rem;
    }
        .log_txt h3{
        font-size: 1rem;
    }
    .log_txt p{
        font-size: 0.5rem;
    }

    /* .login_dise{
        grid-template-columns: 30% 90%;
    }

    .login_dise p{
        font-size: 17px;
        font-weight: 500;
    } */

    .login_btn{

        font-size:1rem;
    }
}


@media (max-width:539px){
    .men_center a{
        display: none;
     }

     /************* menu dispositivo **************/
    #btn-nav:checked ~ #menu{
        display: block;
        width: 50%;
    }
    .nav_sep{
        width: 120px;
    }
    .nav_sep p{
        display: none;
    }
    .open_menu {
        display: block;
        color: var(--gris);
        font-size: 25px;
        padding-left: 20px;
    }
    .open_menu:hover{
        color: var(--gris);
    }
    .menu-horizontal{
        display: none;
     }

     .block a{
        padding: 5px 35px;  
    }
    .borde-menu{
        margin: 0px -15px;
        border-top: 1px solid #CED4DA;
        padding: 0px;
    }
    .between p{
        padding: 15px 20px;
        color:#D24D77;
        font-weight: 700;
    }

    .between p:hover{
        background-color: var(--blanco);
        color:#D24D77;
    }

    /********************** LOGIN ****************************/

    .log_txt h1{
        font-weight: 700;
        font-size: 2rem;
    }
        .log_txt h3{
        font-size: 1.5rem;
    }
    .log_txt p{
        font-size: 1rem;
    }
    .text-login{
        width: 90%;
        margin: 0px auto!important;
    }
    .text-login p{
        color:var(--blanco);
        font-size:17px;
    }


    .login_btn{
        font-size:1rem;
        margin-left: 29px;
    }
    
}