/* Colores Cryvo */
#prueba_colores_cryvo {
    color: #ffffff;
    color: #212121;
    color: #e6e6e6;
    color: #FF6C0E;
    color: #fd924d;
    color: #0071CE;
    color: #757575;
    color: #363636;
    
    color: lightseagreen; /* #20b2aa */
    color: darkgray; /* , */
    color: orangered; /* #ff4500 */
    color: teal; /* #008080 */
    color: steelblue; /* #4682b4 */
    color: slategray; /* #708090 */
    color: royalblue; /* #4169e1 */
    color: lightslategray; /* #778899 */
    color: turquoise; /* #40e0d0 */
    color: dodgerblue; /* #1e90ff */
    color: darkred; /* #8b0000 */
    color: darkcyan; /* #008b8b */
    color: crimson; /* #dc143c */
    color: cornflowerblue; /* #6495ed */
    color: cadetblue; /* #5f9ea0 */
    color: brown; /* #a52a2a */
}    
            

/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** CONTENEDOR GLOBAL PROYECTO **/
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/

#conten_global_proy {
    width: 100%;
/*    height: 100vh;*/
    height: 100%;
    overflow: hidden;
/*    border: 1px solid red;*/
}

@media (min-width: 768px) {
    #conten_global_proy {
        width: 100%;
/*        height: 100vh;*/
        height: 100%;
        overflow: hidden;
    }
}
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** CONTENEDOR SUPERIOR PROYECTO **/
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/

#conten_sup {
/*
    width: 100%;
    height: 3.5rem;
    position: sticky;
    height: 3.5rem;
    background-color: var(--blanco);
    z-index: 13;
    display: flex;
    justify-content: space-between;
    transition: all .5s;
*/
}

#conten_superior_proy {
    background-color: var(--col_sec_tema);
    display: flex;
/*    position: sticky;*/
    height: 4rem;
    width: 100%;
/*    border: 1px solid green;*/
}

@media (min-width: 768px) {
    #conten_superior_proy {
        flex-wrap: nowrap;
        height: 4rem;
    }
}




/*******************************/
/*******************************/
/** Contenedor Superior Izq   **/
/*******************************/
/*******************************/

#conten_superior_proy_izq {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    background-color: var(--color_fondo_contenedor_superior_izq);
}

@media (min-width: 768px) {
    #conten_superior_proy_izq {
       width: 33.3%;
    }
}

.contenedor_logo_sup {
    height: 100%;
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@media (min-width:768px) { 
    .contenedor_logo_sup {
        height: 100%;
/*        margin-left: 5rem;*/
    }
}

.contenedor_logo_sup img {
    height: 90%;
    border-radius: .5rem;
}

@media (min-width:768px) {
    .contenedor_logo_sup img {
    }
}

/*******************************/
/*******************************/
/** Contenedor Superior Cen   **/
/*******************************/
/*******************************/

#conten_superior_proy_cen {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    background-color: var(--color_fondo_contenedor_superior_izq);
}

@media (min-width: 768px) {
    #conten_superior_proy_cen {
        width: 33.3%;
    }
}


/*******************************/
/*******************************/
/** Contenedor Superior Der   **/
/*******************************/
/*******************************/

#conten_superior_proy_der {
    width: 33.3%;
    height: 100%;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    padding-right: 1.5rem;
}

#conten_iconos_notificacion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
/*    margin-right: 5%;*/
}

.icono_notificacion_barra_sup {
    border: 1px solid #d3d3d3;
    background-color: #f4f4f4;
    height: 3rem;
    width: 3rem;
    border-radius: .4rem;
    margin: 0rem .2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #000000;
}

.icono_notificacion_barra_sup:hover {
    cursor: pointer;
}

.icono_notificacion {
    transition: all .3s;
    font-size: 2rem;
}

.icono_notificacion:hover {
    cursor: pointer;
    transform: scale(1.1);
    color: #0080ff;
}

.numero_notificacion {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 1.5rem;
    width: 1.5rem;
    margin-top: -1.8rem;
    margin-left: 1.8rem;
    font-size: 1rem;
    border-radius: 5rem;
    background-color: #DD0B02;
    color: white;
}


/*******************************/
/*******************************/
/** ICONOS DE NOTIFICACION  **/
/*******************************/
/*******************************/

.contenedor_datos_usuario {
    display: flex;
}

.contenedor_iconos_aviso {
    display: flex;
}

.contenedor_iconos_aviso span {
    font-size: 2rem;
    width: 5.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color_iconos_barra_superior);
}

.contenedor_iconos_aviso span:hover {
    background: var(--color_hover_iconos_barra_superior);
    cursor: pointer;
}

.contenedor_iconos_usuario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px 0px 10px;
}

.contenedor_iconos_usuario:hover {
    background: var(--color_hover_iconos_barra_superior);
    cursor: pointer;   
}

.foto_usuario {
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--color_borde_campo_medio);
    border-radius: 5rem;
    position: relative;
}

.foto_usuario {
    cursor: pointer;
}

.foto_usuario img {
    width: 100%;   
    border-radius: 5rem;
}

.foto_usuario img {
    cursor: pointer;
}

.contenedor_box_float_usuario {
    position: absolute;
    height: 28rem;
    width: 28rem;
    right: -0.2rem;
    margin-top: 0.7rem;
    background: var(--color_fondo_box_float_usuario);
    opacity: 0;
    transition: all 0.3s;
    display: none;
    flex-wrap: wrap;
}

@media (min-width:768px) {
    .contenedor_box_float_usuario {
        right: -2rem;
    }
}

.box_float_superior {
    text-align: center;
    width: 100%;
    height: 18rem; 
}

.box_float_superior div:first-of-type {
    margin: 0 auto;
    width: 9rem;
}

.box_float_superior div img {
    margin-top: 1rem;
    width: 100%;
    border: 1px solid var(--color_borde_campo_medio);
    border-radius: 15rem;
}

.box_float_superior div:last-of-type {
    margin-top: .8rem;
}

.box_float_superior div label {
    color: var(--color_texto_medio);
    font-size: 1.5rem;
    font-weight: 300;
}


.box_float_medio {
    width: 100%;
    height: 5rem;
    background-color: var(--color_iconos_barra_superior);
}

.box_float_inferior {
    width: 100%;
    height: 5rem;
    background-color: var(--color_fondo_iconos_barra_superior);
    display: flex;
    justify-content: space-around;
}

.box_float_inferior input {
    border: none;
    height: 3.2rem;
    width: 8rem;
    align-self: center;
    background-color: var(--color_fondo_boton_claro);
    color: var(--color_texto_boton_claro);
}

.box_float_inferior input:hover {
    cursor: pointer;
    background-color: var(--color_hover_boton_claro);
}

.nombre_usuario {
    height: 100%;
    margin-left: .5rem;
    font-size: 1.4rem; 
    flex-direction: column;
    justify-content: center;
    text-align: center;
    line-height: 4.5rem;
    color: var(--color_iconos_barra_superior);
    display: none;
}

.nombre_usuario label:hover {
    cursor: pointer;
}

@media (min-width:768px) {
    .nombre_usuario {
        display: flex;
    }  
    
    .nombre_usuario label {
        height: 100%;
        width: 100%;
        transition: all .4s;
    }
}


/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** CONTENEDOR CENTRAL PROYECTO **/
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/

#conten_central_proy {
    display: flex;
/*    height: calc(100% - 6rem);*/
    overflow: hidden;
    height: 100%;
    height: calc(100% - 4rem);
/*    border: 1px solid blue;*/
}

@media (min-width:768px) {
    #conten_central_proy {
        height: calc(100% - 4rem);
        overflow: hidden;
    }   
}

/*******************************/
/*******************************/
/** Contenedor Central izquierda   **/
/*******************************/
/*******************************/
#conten_central_proy_izq {
    position: absolute;
    display: flex;
    /* Para el menu esto se combina con el fn_menu */
/*    width: 16rem;*/
    min-width: 16rem;
/*    width: 22rem;  Original */
    transition: all 0.4s;
    height: calc(100% - 4rem);
/*    overflow-y: scroll;*/
/*    overflow-x: hidden;*/
    width: 100%;
/*    border: 1px solid blue;*/
}

@media (min-width:700px) {
    #conten_central_proy_izq {
        height: 100%;
        width: auto;
        position: relative;
        min-width: 16rem;
    }
}

/*******************************/
/*******************************/
/** Contenedor Central Central   **/
/*******************************/
/*******************************/
#conten_central_proy_cen {
    display: flex;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    transition: all 0.4s;
    padding: .3rem;
/*    padding: 0rem .5%;*/
    
    
}

@media (min-width:768px) {
    #conten_central_proy_cen {
        width: calc(100% - 16rem);
    }
}

#conten_panel_principal {
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    padding: .1rem;
    overflow: hidden;
/*    border: 1px solid red;*/
/*    height: calc(100% - 4rem);*/
    height: 100%;
}

@media (min-width:768px) {
    #conten_panel_principal {
        height: 100%;
    }
}

#conten_panel_principal_sup {
    display: flex;
    width: 100%;
}

#conten_navegador_menu {
    cursor: pointer;
    z-index: 1;
}

.opcion_navegador_menu {
    font-size: 1.2rem;
    cursor: pointer;
}

.icono_home_menu_principal {
    cursor: pointer;
    font-size: 1.8rem;
}

.lbl_menu_principal {
    cursor: pointer;
    font-size: 1.2rem;
}

.icono_chevron_menu_principal {
    cursor: pointer;
    font-size: .9rem;
}

#conten_navegador_menu_izq {
/*    line-height: 3rem;*/
    display: flex;
    padding: .1rem;
/*    height: 2.6rem;*/
}

#conten_panel_principal_cen {
    padding: 0rem 0rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: var(--col_pri_tema);
    border-radius: .5rem;
/*    height: 0px;*/
    overflow: hidden;
    height: auto;
}

@media (min-width:768px) {
    #conten_panel_principal_cen {
        padding: 0rem 0rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        background-color: var(--col_pri_tema);
        border-radius: .5rem;
/*        height: 0px;*/
        overflow: hidden;
    }
}

/* *********************** */
/* Caja principal busqueda */
/* *********************** */
.conten_caja_buscar {
    display: flex;
    justify-content: flex-end;
    position: relative;
/*    margin: .1rem;*/
/*    border: 1px solid red;*/
    height: 2.7rem;
}

@media (min-width:768px) {
    .conten_caja_buscar {
        display: flex;
        justify-content: flex-end;
        position: relative;
/*        margin: .1rem;*/
    }
}

#varbusqueda {
    display: flex;
    border: 1px solid #bfbfbf;
    border-radius: .5rem;
    padding: .3rem .3rem .3rem .3rem;
    width: 26rem;
/*    height: 3rem;*/
    font-size: 1.1rem;
}

@media (min-width:768px) {
    #varbusqueda {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #bfbfbf;
        border-radius: .5rem;
        padding: .5rem .5rem .5rem .5rem;
        width: 26rem;
/*        height: 3rem;*/
        font-size: 1.1rem;
    }
}

.icono_busqueda_superior {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    position: absolute;
    font-size: 1.7rem;
    color: #6c6c6c;
    width: 3.2rem;
    height: 2.5rem;
    margin-top: .1rem;
    background-color: #efefef;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
/*    margin-right: .1rem;*/
}

.icono_limpiar_busqueda_superior {
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    position: absolute;
    font-size: 1.5rem;
    color: red;
    width: 2rem;
    height: 3rem;
    margin-right: 4.2rem;
    transition: visible .4s;
    z-index: 1;
    cursor: pointer;
}

.icono_limpiar_busqueda_superior:hover {
    cursor: pointer;
}
/* *********************** */
/* Fin caja busqueda principal */
/* *********************** */



/* ******************** */
/* Caja busqueda por id */
/* ******************** */
.conten_caja_buscar_id {
    display: flex;
    justify-content: center;
    align-items: center;
/*    justify-content: flex-end;*/
/*    margin-right: 5%;*/
    position: relative;
}

#varbusquedaid {
    display: flex;
    border: 1px solid #bfbfbf;
    border-radius: .5rem;
    padding: .5rem .5rem .5rem .5rem;
    width: 7rem;
    height: 3rem;
    font-size: 1.3rem;
}

.icono_busqueda_superior_id {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    position: absolute;
    font-size: 2.1rem;
    color: #6c6c6c;
    width: 4rem;
    height: 3.5rem;
    margin-top: .3rem;
    background-color: #efefef;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    margin-right: .2rem;
}

.icono_limpiar_busqueda_superior_id {
    visibility: hidden;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    position: absolute;
    font-size: 1.5rem;
    color: red;
    width: 2rem;
    height: 4rem;
    margin-right: .2rem;
    transition: visible .4s;
    z-index: 1;
    cursor: pointer;
}

.icono_limpiar_busqueda_superior_id:hover {
    cursor: pointer;
}
/* ******************** */
/* Fin caja busqueda por id */
/* ******************** */


#conten_global_iconos_crud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
/*    margin: .5rem;*/
/*    margin-right: 5%;*/
}

@media (min-width:768px) {
    #conten_global_iconos_crud {
        justify-content: flex-end;
        position: relative;
    }
}
    

.conten_icono_crud {
    height: 3rem;
    width: 3rem;
    margin: .2rem .2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#chk_icono_menu_filtro_der {
    display: none;   
}

#conten_panel_principal_inf {
    border-top: 1px solid #bababa;
    position: relative;
/*    height: 88%;*/
}

#conten_panel_principal_inf_ajax {
/*    height: calc(100% - 10rem);*/
/*    overflow: scroll;*/
/*    border: 5px solid red;*/
}

@media (min-width:768px) {
    #conten_panel_principal_inf_ajax {
/*        height: calc(100% - 8rem);*/
    /*    overflow: scroll;*/
    /*    border: 5px solid red;*/
    }
}

/*******************************/
/*******************************/
/** Contenedor Central Proy  **/
/*******************************/
/*******************************/
#conten_ajax_central_cen_proy {
    display: flex;
    width: 100%;
    height: 100%;
}

/*******************************/
/*******************************/
/** Contenedor Barra estado  **/
/*******************************/
/*******************************/
/*
#conten_barra_estado {
    display: flex;
    background-color: #f0f0f0;
    border: 1px solid #ebebeb;
    width: 100%;
    height: 2rem;
}
*/

/*
#lbl_barra_estado {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    margin-left: .5rem;
}
*/

/*******************************/
/*******************************/
/** Contenedor Central Derecho  **/
/*******************************/
/*******************************/
#conten_central_proy_der {
    background-color: var(--color_fondo_contenedor_izq);
    position: fixed;
    height: 50rem;
    width: 25rem;
    transition: all 0.4s;
    margin-left: 100%;
}

@media (min-width:768px) {
    #conten_central_proy_der {
        
    }
}




/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo campos del filtro multiple **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/

/* Contenedor global del filtro derecho */
#conten_filtro_der {
    transition: all 0.4s;
    margin-top: 11.2rem;
    width: 35rem;
    background-color: white;
    box-shadow: 15px 5px 15px;
    border-radius: .8rem;
    padding: 1rem 1rem;
    z-index: 2;
}

@media (min-width:768px) {
    #conten_filtro_der {
        transition: all 0.4s;
        margin-top: 4.6rem;
        width: 30rem;
        background-color: white;
        box-shadow: 15px 5px 15px;
        border-radius: .8rem;
        padding: 1rem 1rem;
        z-index: 2;
    }
}

/* Contenedor del titulo de la ventana del filtro avanzado */
#conten_titulo_filtro_der {
    
}

#titulo_filtro_avanzado {
    display: flex;
    justify-content: center;
    color: #d85300;
    font-weight: bold;
    height: 1rem;
}

/* Contenedor del campo de filtro */
.conten_campo_fil_sel_mul_select_multiple {
    margin-top: 3rem;
}

/* Contenedor del campo sin el select, la parte superior del campo*/
.conten_campo_fil_sel_mul_sup {
    height: 3.5rem;
    position: relative;
    margin-top: 1rem;
}

#titulo_rb_alertas_inventario {
    font-size: 1.3rem;   
    padding: .5rem;
    color: red;
}

#conten_alertas_inventario {
/*    border: 5px solid blue;*/
    display: flex;
}

.rb_alerta_inventario:hover {
    cursor: pointer;
}

.conten_campo_fil_sel_mul_sup_radiobutton label:hover {
    cursor: pointer;
}

.conten_campo_fil_sel_mul_sup_checkbox,
.conten_campo_fil_sel_mul_sup_radiobutton
{
    border: 1px solid #bebebe;
    display: flex;
    width: 100%;
    margin: .2em;
    padding: 1rem .3rem;
/*    margin-bottom: 3rem;*/
    font-size: 1.2rem;
    border-radius: .5rem;
}

.conten_campo_fil_sel_mul_sup_checkbox label {
    margin-left: .5rem;
}

.conten_campo_fil_sel_mul_sup_radiobutton label {
/*    border: 1px solid blue;*/
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .2rem;
}


.conten_campo_fil_sel_mul_sup_fecha {
    border: 1px solid #a2a2a2;
    border-radius: .5rem;
}



/* Titulo del campo */
.lbl_tit_campo_fil_sel_mul {
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    margin-left: .5rem;
    margin-top: -1.7rem;
    color: black;
}

.chk_campo_fil_sel_mul {
    display: none;
}

/* Parte central del campo de filtro select */
.txt_campo_fil_sel_mul {
    border: none;
    outline: none;
    display: flex;
    width: 100%;
    height: 3.5rem;
    border: 1px solid #b1b1b1;
    border-radius: .5rem;
    padding: .5rem;
    font-size: 1.2rem;
}

@media (min-width:768px) {
    
}

/* Icono del select del filtro */
.icono_chevron_fil_sel_mul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    height: 3rem;
    width: 3rem;
    margin-top: -3.3rem;
    right: 0px;
    transition: all 0.3s;
}

.icono_chevron_fil_sel_mul:hover {
    cursor: pointer;
}

/* Contenedor de la parte inferior del campo de filtro select */
.conten_campo_fil_sel_mul_inf {
    position: relative;
    z-index: 1;
}

/* Contenedor de las opciones desplegables del filtro */
.conten_fil_sel_mul_opc_despl {
    border: 1px solid #c4c4c4;   
    width: 100%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    border-radius: .5rem;
    display: none;
    box-shadow: 1px 1px 5px;
    overflow-y: scroll;
}

/* Contenedor del input de busqueda en el filtro select */
.conten_buscar_fil_sel_mul {
    display: flex;
    width: 100%;
    position: relative;
}

.txt_buscar_en_fil_sel_mul {
    display: flex;
    width: 100%;
    height: 3rem;
    margin: .5rem .5rem;
    padding: 0rem .5rem;
    font-size: 1.2rem;
}

@media (min-width:768px) {
    .txt_buscar_en_fil_sel_mul {
        display: flex;
        width: 100%;
        height: 3rem;
        margin: .5rem .5rem;
    }
}

.icono_aplicar_cambio_fil_sel_mul {
    border: 1px solid black;
    position: absolute;
    right: 1rem;
    margin-top: 1rem;
    border-radius: 1rem;
    padding: 0rem 1rem;
    background-color: var(--col_pri_tema);
    color: white;
    transition: all .3s;
}

.icono_aplicar_cambio_fil_sel_mul:hover {
    cursor: pointer;
    background-color: white;
    color: var(--col_pri_tema);
}



/* Contenedor de todas las opciones del select (los registros) */
.conten_opciones_fil_sel_mul {
    display: flex;
    flex-wrap: wrap;
    max-height: 11rem;
    overflow-y: scroll;
}

/* Contenedor de las opciones del select */
.conten_opc_fil_sel_mul_todos {
    display: flex;
    width: 100%;
    font-size: 1.1rem;
}

.conten_opc_fil_sel_mul_todos:hover {
    background-color: red;
    color: white;
}

/* Contenedor del checkbox de la opcion */
.conten_chk_fil_sel_mul_opc_todos,
.conten_chk_fil_sel_mul_opc_uno {
    width: 3rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 1rem;
}

/* Contenedor del id de la opcion */
.option_select_div_2_opc_todos,
.option_select_div_2_opciones {
    
}

/* Contenedor de la descripcion del campo de la opcion */
.desc_opc_fil_sel_mul_todos,
.desc_opc_fil_sel_mul_uno {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 1.1rem;
    
}

.desc_opc_fil_sel_mul_todos:hover,
.conten_chk_fil_sel_mul_opc_uno:hover {
    cursor: pointer;
}

/* Contenedor de los botones del filtro derecho */
#conten_botones_filtro_der {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.btn_filtro_der {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 15rem;
    height: 3.5rem;
    border-radius: .5rem;
    font-size: 1.3rem;
    background-color: #d85300;
    color: white;
    transition: all .3s;
}

.btn_filtro_der:hover {
    cursor: pointer;
    background-color: rgb(216, 83, 0, .6);
}
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo campos del filtro flotante multiple derecho **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/





/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo campos select simple **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/

/* Contenedor global del filtro derecho */
#conten_filtro_der {
    
}

/* Contenedor del titulo de la ventana del filtro avanzado */
#conten_titulo_filtro_der {
    
}

/* Contenedor del campo de filtro */
.conten_campo_fil_sel_uni_select_unico {
    width: 100%;
}

/* Contenedor del campo sin el select, la parte superior del campo*/
.conten_campo_fil_sel_uni_sup {
    text-align: left !important;
    
}

.chk_campo_fil_sel_uni {
    display: none;
}

.chk_opc_fil_sel_uni {
    display: none;
}

/* Parte central del campo de filtro select */
.txt_campo_fil_sel_uni {
    
}

/* Icono del select del filtro */
.icono_chevron_fil_sel_uni {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    height: 3rem;
    width: 3rem;
    margin-top: -3.3rem;
    right: calc(5px);
    transition: all 0.3s;
}

.icono_chevron_fil_sel_uni:hover {
    cursor: pointer;
}

/* Contenedor de la parte inferior del campo de filtro select */
.conten_campo_fil_sel_uni_inf {
    position: relative;
    z-index: 10;
/*    border: 1px solid blue;*/
/*    width: 100%;*/
}

/* Contenedor de las opciones desplegables del filtro */
.conten_fil_sel_uni_opc_despl {
    border: 1px solid #c4c4c4;   
    width: 100%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    border-radius: .5rem;
    display: none;
    box-shadow: 1px 1px 5px;
}

/* Contenedor del input de busqueda en el filtro select */
.conten_buscar_fil_sel_uni {
    display: flex;
/*    max-width: 99%;*/
}

.txt_buscar_en_fil_sel_uni {
    display: flex;
    width: 100%;
    height: 3rem;
    margin: .5rem .5rem;
    font-size: 1.2rem;
    padding: .2rem;
    border: 1px solid #c1c1c1;
    border-radius: .4rem
}

/* Contenedor de todas las opciones del select (los registros) */
.conten_opciones_fil_sel_uni {
    display: flex;
    flex-wrap: wrap;
    max-height: 11rem;
    overflow-y: scroll;
}

/* Contenedor de las opciones del select */
.conten_opc_fil_sel_uni_todos {
    display: flex;
    width: 100%;
    font-size: 1.4rem;
}

.conten_opc_fil_sel_uni_todos:hover {
    background-color: red;
    color: white;
}

/* Contenedor del checkbox de la opcion */
.conten_chk_fil_sel_uni_opc_todos,
.conten_chk_fil_sel_uni_opc_uno {
    width: 3rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 1rem;
}

/* Contenedor del id de la opcion */
.option_select_div_2_opc_todos,
.option_select_div_2_opciones {
    
}

/* Contenedor de la descripcion del campo de la opcion */
.desc_opc_fil_sel_uni_todos,
.desc_opc_fil_sel_uni_uno {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 1.1rem;
    text-align: left; !important;
}

.desc_opc_fil_sel_uni_todos:hover,
.conten_chk_fil_sel_uni_opc_uno:hover {
    cursor: pointer;
}

/* Contenedor de los botones del filtro derecho */
#conten_botones_filtro_der {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

#conten_botones_filtro_der .btn_filtro_der {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;   
    text-align: center;
    width: 12rem;
    height: 3.5rem;
    border-radius: .5rem;
    font-size: 1.1rem;
    background-color: #d85300;
    color: white;
    transition: all .3s;
}

.btn_filtro_der:hover {
    cursor: pointer;
    background-color: rgb(216, 83, 0, .6);
}
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo campos select simple **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/











/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo campos con busqueda **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/

/* Contenedor del campo de filtro */
.conten_campo_fil_sel_bus_select_unico {
    width: 100%;
}

/* Contenedor del campo sin el select, la parte superior del campo*/
.conten_campo_fil_sel_bus_sup {
    text-align: left !important;
}

/* Titulo del campo */
/*
.lbl_tit_campo_fil_sel_bus {
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: -.8rem;
    font-size: 1.3rem;
    position: absolute;
    color: var(--color_texto_oscuro);
    transition: .2s ease all;
    background-color: white;
}
*/


.chk_campo_fil_sel_bus {
    display: none;
}

.chk_opc_fil_sel_bus {
    display: none;
}

/* Parte central del campo de filtro select */
.txt_campo_fil_sel_bus {
    
}

/* Icono del select del filtro */
.icono_chevron_fil_sel_bus {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    height: 2.5rem;
    width: 3rem;
    margin-top: -3.3rem;
    right: calc(5px);
    transition: all 0.3s;
}

.icono_chevron_fil_sel_bus:hover {
    cursor: pointer;
}

/* Contenedor de la parte inferior del campo de filtro select */
.conten_campo_fil_sel_bus_inf {
    position: relative;
    z-index: 10;
/*    border: 1px solid blue;*/
/*    width: 100%;*/
}

/* Contenedor de las opciones desplegables del filtro */
.conten_fil_sel_bus_opc_despl {
    border: 1px solid #c4c4c4;   
    width: 98%;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    border-radius: .5rem;
    display: none;
    box-shadow: 1px 1px 5px;
}

/* Contenedor del input de busqueda en el filtro select */
.conten_buscar_fil_sel_bus {
    display: flex;
    max-width: 95%;
}

.txt_buscar_en_fil_sel_bus {
    display: flex;
    width: 100%;
    height: 3rem;
    margin: .5rem .5rem;
}

/* Contenedor de todas las opciones del select (los registros) */
.conten_opciones_fil_sel_bus {
    display: flex;
    flex-wrap: wrap;
    max-height: 11rem;
    overflow-y: scroll;
}

/* Contenedor de las opciones del select */
.conten_opc_fil_sel_bus_todos {
    display: flex;
    width: 100%;
    font-size: 1.4rem;

}

.conten_opc_fil_sel_bus_todos:hover {
    background-color: red;
    color: white;
}

/* Contenedor del checkbox de la opcion */
.conten_chk_fil_sel_bus_opc_todos,
.conten_chk_fil_sel_bus_opc_uno {
    width: 3rem;
    height: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-top: 1rem;
}

/* Contenedor del id de la opcion */
.option_select_div_2_opc_todos,
.option_select_div_2_opciones {
    
}

/* Contenedor de la descripcion del campo de la opcion */
.desc_opc_fil_sel_bus_todos,
.desc_opc_fil_sel_bus_uno {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 1.1rem;
    text-align: left; !important;
}

.desc_opc_fil_sel_bus_todos:hover,
.conten_chk_fil_sel_bus_opc_uno:hover {
    cursor: pointer;
}

/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo campos select simple **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/




/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** Estilo campos con detalle simple **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/* Contenedor de la parte inferior del campo de filtro select */
.conten_campo_ver_detalle {
    position: absolute;
    z-index: 10;
    top: 3.5rem;
/*    border: 1px solid blue;*/
    width: 100%;
}

/* Contenedor de las opciones desplegables del filtro */
.conten_campo_ver_detalle_opc_despleg {
    border: 1px solid #c4c4c4;   
    width: 100%;
    background-color: white;
    display: flex;
/*    flex-wrap: wrap;*/
/*    position: relative;*/
    border-radius: .5rem;
    display: none;
    box-shadow: 1px 1px 5px;
/*    min-height: 10rem;*/
/*    width: 30rem;*/
    margin-left: 0;
/*    transition: all .4s;*/
    padding: .5rem;
    max-height: 15rem;
}

.icono_campo_ver_detalle {
    position: absolute;
/*    border: 1px solid red;*/
    right: 1rem;
    height: 3.5rem;
    top: -2.3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    color: green;
    transition: all .4s;
}

.icono_campo_ver_detalle:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.chk_campo_ver_detalle_gastocredito {
}

.conten_item_gasto_credito {
    border: 1px solid #cecece;
    display: flex;
}

.conten_chk_item_gasto_credito {
    width: 10%;
/*    border: 1px solid red;*/
}

.chk_item_gasto_credito {
    height: 2.5rem;
}

.conten_descripcion_item_gasto_credito {
    width: 60%;
}

.lbl_descripcion_item_gasto_credito {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-left: 1rem;
    height: 2.5rem;
    font-size: 1.2rem;
}

.conten_valor_item_gasto_credito {
    width: 20%;
}

.lbl_valor_item_gasto_credito {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    padding-left: 1rem;
    height: 2.5rem;
    font-size: 1.2rem;
}

#btn_calcular_credito {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
/*    border: 1px solid red;*/
    font-size: 1.3rem;
    border-radius: .4rem;
    background-color: var(--col_botones);
    color: white;
    transition: all .3s;
}

#btn_calcular_credito:hover {
    cursor: pointer;
    background-color: var(--col_hover_botones);
}


#indicador_minimo_pie {
    font-size: var(--fuente_normal);
    position: absolute;
    top: -1.1rem;
    left: 4rem;
    color: red;
}

/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo campos con detalle simple **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/






/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** CONTENEDOR INFERIOR PROYECTO **/
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
#conten_inferior_proy {
/*
    display: flex;
    height: 3rem;
    border: 1px solid green;
*/
}

/*******************************/
/*******************************/
/** Contenedor Inferior Izq   **/
/*******************************/
/*******************************/
/*
#conten_inferior_proy_izq {
    width: 33.3%;
    transition: all 0.4s;
}

@media (min-width:768px) {
    #conten_inferior_proy_izq {
        
    }
}
*/

/*******************************/
/*******************************/
/** Contenedor Inferior Central   **/
/*******************************/
/*******************************/
/*
#conten_inferior_proy_cen {
    width: 33.3%;
    transition: all 0.4s;
}

@media (min-width:768px) {
    #conten_inferior_proy_cen {
        
    }
}
*/

/*******************************/
/*******************************/
/** Contenedor Inferior Derecha   **/
/*******************************/
/*******************************/
/*
#conten_inferior_proy_der {
    width: 33.3%;
    transition: all 0.4s;
}

@media (min-width:768px) {
    #conten_inferior_proy_der {
        
    }
}
*/
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN CONTENEDOR INFERIOR PROYECTO **/
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/









/**--------------------------------------------------------------**/
/** INICIO Estilo Ventana de Mensajes al Usuario por una Accion **/
#encabezado_inferior_der_inf {
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid var(--color_borde_campo_claro);
    background-color: var(--color_fondo_encabezado_inferior_der_inf);
    display: none;
}

.informacion_estado_accion {
    margin: 0 auto;
    height: 4rem;   
    border-radius: .4rem;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    transition: all .4s;
    width: 95%;
    margin-top: .4rem;
    opacity: 0;
    display: none;   
}

@media (min-width:768px) {
    .informacion_estado_accion {
        width: 98%;
    }
}
    
#lbl_informacion_estado_accion {
    text-align: center;
    width: 100%;
    line-height: 1.4rem;
}


.informacion_estado_accion span {
    width: 2rem;
    margin-right: 2rem;
    vertical-align: middle;
    text-align: center;
}

.informacion_estado_accion span:hover {
        cursor: pointer;
}
/** FIN Estilo Ventana de Mensajes al Usuario por una Accion **/
/**--------------------------------------------------------------**/



.contenedor_label_listar,
.contenedor_boton_listar {
    display: flex;
    height: var(--alto_boton);
    white-space: nowrap;
}

.contenedor_label_listar label {
    font-size: 1.8rem;
    width: 10rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--color_texto_oscuro);
    display: none;
}

@media (min-width:768px) {
    .contenedor_label_listar label {
        display: block;
    }
}

.contenedor_boton_listar label:nth-child(1) {
    border-top: 1px solid var(--color_borde_boton_claro);
    border-right: 1px solid var(--color_borde_boton_claro);
    border-bottom: 1px solid var(--color_borde_boton_claro);
    border-left: 1px solid var(--color_borde_boton_claro);
    border-top-left-radius: .4rem;
    border-bottom-left-radius: .4rem;
    background: var(--color_fondo_boton_claro);
    color: var(--color_texto_boton_claro);
    width: 13rem;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: var(--fuente_boton);
    transition: all 0.3s;
    display: none;
}

@media (min-width:990px) {
    .contenedor_boton_listar label:nth-child(1) {
        display: flex;
    }
}

.contenedor_boton_listar label:nth-child(2) {
    border-top: 1px solid var(--color_borde_boton_claro);
    border-right: 1px solid var(--color_borde_boton_claro);
    border-bottom: 1px solid var(--color_borde_boton_claro);
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
    background: var(--color_fondo_boton_claro);
    color: var(--color_texto_boton_claro);
    width: 13rem;
    font-size: var(--fuente_boton);
    transition: all 0.3s;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    display: none;
}

@media (min-width:990px) {
    .contenedor_boton_listar label:nth-child(2) {
        display: flex;
    }
}


.contenedor_boton_listar label:nth-child(3) {
    margin-left: 1.5rem;
    background: var(--color_fondo_boton_oscuro);
    color: var(--color_texto_boton_oscuro);
    border-radius: .4rem;
    width: 16rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 1.3rem;
    transition: all 0.3s;
}

.contenedor_boton_listar label:nth-child(1):hover,
.contenedor_boton_listar label:nth-child(2):hover {
    cursor: pointer;
    background: var(--color_hover_boton_claro);
}

.contenedor_boton_listar label:nth-child(3):hover {
    cursor: pointer;
    background: var(--color_hover_boton_oscuro);
}


.cuerpo_inferior_der {
    margin: 0 auto;
    border: 1px solid var(--color_borde_campo_claro);
    width: 100%;
    margin-top: 11rem;
    background-color: var(--color_fondo_cuerpo_inferior_der);
}

@media (min-width:991px) {
    .cuerpo_inferior_der {
        width: 97%;
        border-radius: 0.4rem;
    }
}

@media (min-width:1024px) {
    .cuerpo_inferior_der {
        width: 98%;
    }
}
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo pagina inicio.php **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/



/**>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/**>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/**>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/



/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo Filtro Tablas **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/
.contenedor_filtro {
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
}

@media (min-width:990px) {
    .contenedor_filtro {   
        flex-wrap: nowrap;
        align-items: flex-end;
        padding-top: 0;
    }
}

.contenedor_filtro input {
    border: none;
    height: 4rem;
    width: 100%;
    margin-top: 2rem;
    border-radius: 0.4rem;
}

.contenedor_filtro input:focus {
    outline: none;
    outline: 2px solid var(--color_borde_focus_campo_filtro);
}

@media (min-width:990px) {
    .contenedor_filtro input {
        border-radius: 0;
        border-top-left-radius: 0.4rem;
        border-bottom-left-radius: 0.4rem;
    }
}

.filtro_tipo_div {
    /*    -webkit-appearance: none;*/
    /*    -moz-appearance: none;*/
    border: 1px solid var(--color_borde_campo_claro);
    height: 4rem;
    width: 100%;
    margin-top: 1rem;
    border-radius: 0.4rem;
    background-color: var(--color_fondo_contenedor_campo_filtro);
    font-size: 1.4rem;
    color: var(--color_texto_medio);
    position: relative;
}


@media (min-width:990px) {
    .filtro_tipo_div:nth-child(1) {
        border-radius: 0;
        border: none;
        border-left: 1px solid var(--color_borde_boton_claro);
        border-top: 1px solid var(--color_borde_boton_claro);
        border-bottom: 1px solid var(--color_borde_boton_claro);
        border-top-left-radius: 0.4rem;
        border-bottom-left-radius: 0.4rem;
    }
    
    .filtro_tipo_div:nth-child(2) {
        border-radius: 0;
        border: none;
        border-left: 1px solid var(--color_borde_boton_claro);
        border-top: 1px solid var(--color_borde_boton_claro);
        border-bottom: 1px solid var(--color_borde_boton_claro);
    }
    
    .filtro_tipo_div:nth-child(3) {
        border-radius: 0;
    }
}

.filtro_tipo_div input {
    border: none;
    padding: .5rem;
    margin: 0;
    height: 100%;
    width: 100%;
    border-radius: 0.4rem;
    text-decoration-skip: none;
}

.select_filtro {
    width: 100%;
    height: 100%;
    padding: .5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    position: relative;
    background-color: var(--color_fondo_campo_filtro);
    font-size: 1.2rem;
}

.select_filtro:hover {
    background-color: var(--color_hover_boton_claro);
}

.select_filtro:hover + .icono_flecha_filtro {
    background-color: var(--color_hover_boton_claro);
}

.icono_flecha_filtro {
    font-size: 2.4rem;
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;    
    transition: all 0.3s;
}

.icono_busqueda {
    display: none;
    height: 4rem;
    min-height: 4rem;
    max-height: 4rem;
    width: 4rem;
    min-width: 4rem;
    max-width: 4rem;
    border: 1px solid var(--color_borde_campo_claro);
    border-top-right-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    color: var(--color_texto_oscuro);
    font-size: 2rem;
}

@media (min-width:990px) {
    .icono_busqueda {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        border-left: none;
    }
}

.opciones_select_filtro {
    position: absolute;
    top: 38;
    left: 0;
    height: 18.5rem;
    border: 1px solid var(--color_borde_boton_claro);
    width: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    opacity: 0;
    transition: all 0.3s;
    overflow: scroll;
    overflow-x: hidden; 

}

.traer_al_frente {

}

.opciones_select_filtro label {
    min-height: 4rem;
    font-size: 1.2rem;
    padding-left: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.opciones_select_filtro label:hover {
    cursor: pointer;
    background-color: var(--color_hover_boton_claro);
}

.contenedor_info_filtro {
    height: 5rem;
    width: 100%;
    padding: 0rem 1.3rem 0rem 1.3rem;
    border-radius: 0.4rem;
    background: white;
    display: flex;
    justify-content: space-between;
}

.contenedor_info_filtro label:nth-child(2):hover {
    cursor: pointer;
}

@media (min-width:480px) {
    .contenedor_info_filtro {
        height: 2rem;
    }   
}

.contenedor_info_filtro label {
    font-size: 1.5rem;
    color: #5c5c5c;
    align-self: center;
}
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo Filtro Tablas **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/









/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo Ventana Modal Alerta, Eliminar y Exportar  Cambiar Password**/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/
.modalAlerta {
    background-color: rgba(0,0,0,.1);
    position: fixed;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events:none;
    transition: all .5s;
    visibility: hidden;
    z-index: 2;
}

.modal_contenido_alerta {
    transition: all .5s;
    background-color: #ffffff;
    width: 440px;
    max-width: 90%;
    height: 300px;
    margin: 20% auto;
    position: relative;
    border-radius: .4rem;
    padding: 
}

.linea_separador_verde {
/*    width: 100%;*/
/*    margin-top: 1rem;*/
    border: 5px solid #0ed40e !important;
}

#modal_icono_alerta {
    height: 80px;    
    margin-top: 30px;
    position: relative;
    display: flex;
    justify-content: center;
}

.icon-circle-with-cross {
    color: red;
    font-size: 80px;
    position: absolute;
}

.icon-warning {
    color: #d3d300;
    font-size: 80px;
    position: absolute;
}

.icon-circle4 {
    font-size: 70px;
    position: absolute;
    color: green;
}

.icon-check5 {
    font-size: 80px;
    position: absolute;
    margin-top: -20px;
    margin-left: 10px;
    color: green;
}
    
#modal_mensaje_superior_alerta {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-radius: 2px;
    padding: .5rem;
}

#mensaje_ventana_modal_alerta_titulo {
    color: #464646;
    font-size: 25px;
    font-weight: bold;
}

#modal_mensaje_central_alerta {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #959595;
    padding: 0px 10px;
}

#mensaje_ventana_modal_alerta_contenido {
    font-size: 1.5rem;
}

#modal_mensaje_inferior_alerta {
    width: 100%;
    margin-top: 30px;
    text-align: center;
}

#btn_cerrar_modal_alerta_mantenedor {
    padding: 7px 35px 7px 35px;
    text-decoration: none;   
    background: #00b15f;
    color: white;
    border-radius: 2px;
    font-size: 1.4rem;
}

#btn_cerrar_modal_alerta_mantenedor:hover {
    transition: all .5s;
    background: rgba(63, 159, 125, 0.8);
    cursor: pointer;
}





/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo Ventana Modal Procesando **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/
#contenedor_procesando {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 50;
    visibility: hidden;
    background-color: rgba(47, 47, 47,.6);
}

#contenedor_imagen_procesando {
    margin: 0 auto;
    align-self: center;
    position: relative;
}

#contenedor_imagen_procesando img {
    width: 100%;
    max-height: 40rem;
}
/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo Ventana Modal Procesando **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/



/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** INICIO Estilo Modulo Agregar **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/
.contendor_modulo_agregar {
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-flow: column-reverse;
}

@media (min-width:1024px) {
    .contendor_modulo_agregar {
        width: 100%;
        padding: 1rem;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
    }
    
}

/********************************************/
/** INICIO Estilo Modulo Agregar Izquierda **/
/********************************************/
.modulo_agregar_izq {
}

@media (min-width:1024px) {
    .modulo_agregar_izq {
        
    }
}

.contenedor_label_guardar {
    
}

.contenedor_label_guardar label:hover {
    
}

.contenedor_boton_guardar label {
    
}

.contenedor_boton_guardar label:hover {

}

.bloque_contenedor_modulo_agregar {
    
}

.cuadro_modulo_agregar {
    
}

@media (min-width:768px) {
    .cuadro_modulo_agregar {
        
    }
}

.contenedor_campo_agregar {
    
}

@media (min-width:768px) {
    .contenedor_campo_agregar {
        
    }   
}

/** Titulo campo agregar **/
.contenedor_campo_agregar label:first-of-type {
    
}


@media (min-width:768px) {
    /** Titulo campo agregar **/
    .contenedor_campo_agregar label:first-of-type {
        
    }
}


/** Input agregar **/
.contenedor_campo_agregar input {
    
}

@media (min-width:780px) {
    .contenedor_campo_agregar input {
        
    }
}

/** Input tipo select agregar **/
.contenedor_campo_agregar select {
}

/** Campo obligatorio agregar **/
.contenedor_campo_agregar label:last-of-type {
    
}

.contenedor_campo_agregar label:last-of-type:hover {

}

@media (min-width:768px) {
    /** Campo obligatorio agregar **/
    .contenedor_campo_agregar label:last-of-type {
        
    }
}
/********************************************/
/** FIN Estilo Modulo Agregar Derecha **/
/********************************************/


/********************************************/
/** INICIO Estilo Modulo Agregar Derecha **/
/********************************************/
.modulo_agregar_der {
    
}

@media (min-width:1024px) {
    .modulo_agregar_der {
        
    }
}

.contenedor_foto_usuario {
    margin: 0 auto;
    margin-top: 1rem;
    border: 1px dotted var(--color_borde_boton_claro);
    background-image: url("../fontawesome/svgs/solid/upload.svg");
    background-position: center;
    background-repeat: no-repeat;
    height: 25rem;
    width: 90%;
    max-width: 25rem;
    border-radius: 4px;
    background: rgb(230,230,230);
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: contain;
    background-position: center;
    overflow: hidden;
    position: relative;
    border: 1px dashed #000;
}

#lbl_subir_foto_usuario {
    position: absolute;
    text-align: center;
    font-size: 1.3rem;
    margin-top: 1rem;
    padding: 1rem;
    color: var(--color_texto_boton_claro);
}


.foto_principal_usuario {
    width: 100%;
    height: 25rem;    
    background-image: url("../fontawesome/svgs/solid/upload.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 64px 64px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    opacity: 0.5;
    text-align: center;
}

.foto_principal_usuario input {
    width: 100%;
    height: 25rem;
    padding-top: 25rem;
    border: none;
    cursor: pointer;
}

.foto_principal_usuario input:focus {
    outline: none;
}

.foto_principal_usuario .spinner {
    display: none;
    margin-top: 50%;
}

.foto_principal_usuario:hover {
    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
}

.contenedor_adicional_1 {
    margin: 0 auto;
    border: 1px solid var(--color_borde_boton_claro);
    width: 90%;
    margin-top: 1rem;
    padding: .3rem;
    margin-bottom: 1rem;
}

#lbl_titulo_selector_multiple {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
}

.contenedor_buscar_seleccion_campos input {
    display: flex;
    width: 100%;
}

.contenedor_campos_seleccionados {
    display: flex;
}

.contenedor_campos_seleccionados_izq {
    border-top: 1px solid var(--color_borde_boton_claro);
    border-left: 1px solid var(--color_borde_boton_claro);
    border-bottom: 1px solid var(--color_borde_boton_claro);
    width: 100%;
    padding-left: .5rem;
}

.contenedor_campos_seleccionados_izq label {
    background: var(--color_fondo_boton_oscuro);
    border-radius: .5rem;
    color: var(--color_texto_boton_oscuro);
    padding: .3rem .8rem;
    font-size: 1.3rem;
    white-space: nowrap;
}



.contenedor_campos_seleccionados label span {
    margin-left: .3rem;
    font-size: 1.1rem;
}

.contenedor_campos_seleccionados label span:hover {
    cursor: pointer;
}

.contenedor_campos_seleccionados_der {
    width: 1.5rem;
    min-width: 1.5rem;
    max-width: 1.5rem;
}

.contenedor_campos_seleccionados_der span {
    border-top: 1px solid var(--color_borde_boton_claro);
    border-right: 1px solid var(--color_borde_boton_claro);
    border-bottom: 1px solid var(--color_borde_boton_claro);
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding-right: .5rem;
}


.contendor_campos_disponibles {
    display: flex;
    flex-wrap: wrap;
    height: 10rem;
    overflow-x: scroll;
}

.contendor_campos_disponibles label {
    width: 100%;
    height: 3rem;
    font-size: 1.4rem;
    border-bottom: 1px solid red;
}

.contendor_campos_disponibles label {
    cursor: pointer;
}

/********************************************/
/** FIN Estilo Modulo Agregar Derecha **/
/********************************************/

/**--------------------------------------------------------------**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**##############################################################**/
/** FIN Estilo Modulo Agregar **/
/**##############################################################**/
/**@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@**/
/**--------------------------------------------------------------**/



#conten_datos_filtro_ci {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

.conten_campo_ci {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1rem;
}

.conten_campo_ci select {
    display: flex;
    width: 100%;
    height: 4rem;
    border-radius: .5rem;
}


.conten_campo_ci input {
    border: none;
    border: 1px solid #898989;
    display: flex;
    width: 100%;
    max-width: 30rem;
    height: 4rem;
    border-radius: .5rem;
    padding: .4rem;
    text-align: right;
}

#buscar_emb_ci {
    align-self: flex-end;
    height: 4rem;
    background-color: green;
    color: white;
    width: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: .5rem;
    transition: all 0.3s;
}

#buscar_emb_ci:hover {
    background-color: rgb(0, 128, 0, 0.6);
    cursor: pointer;
}

/* ====================================================== */
/*                      TOOLTIP                           */
/* ====================================================== */

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;  /*  If you want dots under the hoverable text */
    
}

/* Tooltip text */
.tooltip .tooltiptext {
/*    visibility: hidden;*/
    background-color: white;
    color: black;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    right: 2.8rem;
    margin-top: -1rem;
    text-align: center;
    display: flex;
    padding: .3rem .4rem;
    justify-content: center;
    border: 1px solid #d0cdcd;
    font-size: 1.1rem;
    
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    z-index: 1000;
}


/* *************************************** */
/* Fin Contenedor de selector de hora flotante */
/* *************************************** */
/*color_hover_boton_deshabilitado*/

/*Estilo de los botones CRUD*/
.btn_crud_habilitado {
    height: 100%;
    width: 100%;
    padding: .4rem;
    transition: all .3s;
    font-size: 2rem;
    background-color: #f4f4f4;
    border-radius: .4rem;
    color: var(--color_texto_boton_crud);
}

.btn_crud_habilitado:hover {
    cursor: pointer;
    transform: scale(1.1);
    color: var(--color_hover_boton_crud);
}


.btn_crud_deshabilitado {
    height: 100%;
    width: 100%;
    padding: .4rem;
    transition: all .3s;
    font-size: 2rem;
    background-color: var(--color_fondo_boton_deshabillitado);
    color: var(--color_texto_boton_deshabillitado);
    border-radius: .4rem;
}

.btn_crud_deshabilitado:hover {
    cursor: not-allowed;
    transform: scale(1);
}


/*Estilo de los botones del formulario */

#conten_acciones_form_actualizar {
    display: flex;
    justify-content: space-around;
    padding: .5rem;
    flex-wrap: wrap;
    height: auto;
}

.btn_cotizacion{
    margin-top: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}

.btn_nota_pedido{
    width: 100%;
}

#btn_nota_pedido_modal {
    background-color: blue;
}

.btn_nota_pedido input{
    width: 100%;
}

.btn_nota_pedido_cotizacion {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
/*    border: 1px solid red;*/
    font-size: 1.3rem;
    background-color: blue;
    color: white;
    border-radius: .5rem;
}

.btn_nota_pedido_cotizacion:hover {
    cursor: pointer;
}

.btn-deshabilitado {
    pointer-events: none;
    cursor: default;
    filter: brightness(0.7);
}
.btn_formulario_habilitado {
    height: 4rem;
    width: 48%;
    max-width: 18rem;
    border-radius: .5rem;
    background-color: var(--col_botones);
    color: white;
    transition: all.4s;
    border: none;
    padding: .5rem;
    white-space: normal;
    word-wrap: break-word;
    font-size: 1.3rem;
}

.btn_formulario_habilitado:hover {
    background-color: var(--col_hover_botones);
    cursor: pointer;
}


.btn_formulario_deshabilitado {
    height: 4rem;
    width: 48%;
    max-width: 18rem;
    border-radius: .5rem;
    background-color: #c9c9c9;
    color: white;
    transition: all.4s;
    border: none;
    padding: .5rem;
    white-space: normal;
    word-wrap: break-word;
    font-size: 1.3rem;
}

.btn_formulario_deshabilitado:hover {
    cursor: not-allowed;
}


/* *************************************** */
/* *************************************** */
/* Contenedor drag and drop Imagen IMAGEN USUARIO */
/* *************************************** */
/* *************************************** */
#conten_imagen_foto {
    margin: 0 auto;
    border: 2px solid #747474;
    display: flex;
    width: 15rem;
    height: 15rem;
    border-radius: 20rem;
    overflow: hidden;
}

@media (min-width:1385px) {
    #conten_imagen_foto {
/*        border: 1px solid red;*/
        display: flex;
        width: 15rem;
        height: 15rem;
    }
}

.conten_foto_drop_area {
    margin: 0 auto;
/*    width: 100% !important;*/
/*    height: 100% !important;*/
    width: 15rem;
    height: 15rem;
    margin-top: -1rem;
    margin-left: 
/*    max-height: 18rem;*/
/*    padding: .1rem;*/
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #cccccc;
    border: .1rem solid #ddd;
    border-radius: 20rem;
/*    border: 1px solid blue;*/
}

.conten_foto_drop_area:hover > #icono_quitar_imagen_usuario {
    opacity: 1;
    z-index: 1;
}

#icono_quitar_imagen_usuario {
    color: #e20000;
    position: absolute;
    right: 2rem;
    top: 2rem;
    font-size: 3rem;
    opacity: 0;
    transition: all .4s;
    z-index: 1;
}

#icono_quitar_imagen_usuario:hover {
    transform: scale(1.2);
    color: #e20000;
    z-index: 1;
}


.conten_foto_drop_area.active {
    border: .5rem solid #cccccc;
    border-radius: 1rem;
}


.icono_agregar_imagen_usuario {
    font-size: 5rem !important;   
    color: #d6d6d6 !important;
    transition: all .4s !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    opacity: 0;
    margin-top: -.5rem;
}

.conten_foto_drop_area:hover > .icono_agregar_imagen_usuario {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20rem;
    width: 15rem;
    height: 15rem;
}

/*
.icono_agregar_imagen_personal {
    font-size: 5rem !important;   
    color: #d6d6d6 !important;
    transition: all .4s !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    opacity: 0;
}

.conten_foto_drop_area_personal:hover > .icono_agregar_imagen_personal {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.4);
}
*/

#conten_txt_arrastre_imagen {
    margin: 0 auto;
    text-align: justify;
    min-width: 16rem;
    max-width: 16rem;
}

#lbl_imagen_foto_1 {
    margin: 0 auto;
    font-size: 1.1rem;
    color: #888888;
    cursor: pointer;
}

#lbl_imagen_foto_2 {
    margin: 0 auto;
    font-size: 1.1rem;
    font-weight: 700;
    color: black;
    cursor: pointer;
}

.conten_foto_drop_area h2 {
    font-size: 2.4rem;
    font-weight: 500;
    color: #000;
}

.conten_foto_drop_area span {
    font-size: 2.5rem;
    color: #000000;
    font-weight: 300;
}


.btn_subir_imagen_foto {
    margin: 0 auto;
    padding: .5rem 1.5rem;
    font-size: 1.3rem;
    border: 0;
    outline: none;
    background-color: #5721d3;
    color: white;
    border-radius: .5rem;
    cursor: pointer;
    margin-top: .5rem;
}

.contendor_archivo {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ddd;
}

#conten_vista_previa_foto {
    border: none;
    height: 100%;
    width: auto;
    position: absolute;
    border-radius: .5rem;
}

.status-text {
    padding: 0 10px;
}

.success {
    color: green;
}

.failure {
    color: red;
}




/* ################################### */
/* ################################### */
/* The switch - the box around the slider */
/* ################################### */
/* ################################### */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

/* Hide default HTML checkbox */
.varchkpersonalizado {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.varchkpersonalizado:checked + .slider {
    background-color: var(--color-boton-switch);
}

.varchkpersonalizado:focus + .slider {
    box-shadow: 0 0 1px var(--color-boton-switch);
}

.varchkpersonalizado:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* ################################### */
/* ################################### */
/* ################################### */


/* Estilo paneles con pestañas */
.conten_panel_pestana {
/*    border: 1px solid red;    */
    width: 100%;
    height: 100%;
    margin-top: 1rem;
}

.conten_pestanas {
    border: 1px solid #e5e5e5;    
    height: auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: .4rem;
    padding: .1rem;
}

@media (min-width: 768px) {
    .conten_pestanas {
/*        border: 1px solid blue;    */
/*        height: 4rem;*/
/*        min-height: 4rem;*/
        display: flex;
        flex-wrap: wrap;
    }
}

.conten_crear_nota_pedido,
.conten_crear_cotizacion {
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    right: 1rem;
}

#btn_crear_nota_pedido,
#btn_ver_nota_pedido,
#btn_ver_cotizacion {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border: 1px solid limegreen;
    background-color: limegreen;
    color: #fafafa;
    border-radius: .4rem;
    transition: all .4s;
    font-size: 1.3rem;
/*    display: none;*/
}

#btn_crear_nota_pedido:hover,
#btn_ver_nota_pedido:hover,
#btn_ver_cotizacion {
    cursor: pointer;
    background-color: darkcyan;
}

.pestana_panel {
    border: 1px solid var(--col_bordes);
    height: 100%;
    width: auto;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .pestana_panel {
        border: 1px solid var(--col_bordes);
        height: 100%;
        width: auto;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
    }
}

.lbl_pestana {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    font-size: 1.2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    transition: all .4s;
    padding: 1rem 1rem;
}

.lbl_pestana {
    cursor: pointer;
}

/* #pestana_panel_1 {
    background-color: #EE5601;
    color: white;
}

#pestana_panel_2 {
    background-color: white;
    color: black;
}

#pestana_panel_3 {
    background-color: white;
    color: black;
}

#pestana_panel_4 {
    background-color: white;
    color: black;
} */

div.pestana_panel label{
    background-color: white;
    color: black;
}

.conten_panel_detalle {
    border: 1px solid var(--col_bordes);
    min-height: 38rem;
    position: relative;
    border-radius: .5rem;
/*    background-color: #e5e5e5;*/
}

.detalle_panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;
}


#detalle_panel_1 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    opacity: 1;
    transition: all .4s;
    border-radius: .5rem;
    z-index: 1;
}

#detalle_panel_2 {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
    z-index: 0;
}

#detalle_panel_3 {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
    z-index: 0;
}


#detalle_panel_4 {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
    z-index: 0;
}

#detalle_panel_5 {
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
    z-index: 0;
}

#detalle_panel_6 {
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
}

#detalle_panel_7 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
}

#detalle_panel_8 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    transition: all .4s;
    border-radius: .5rem;
}


/* ############################################ */
/* # INICIO ESTILO COLORES DISPONIBLES MODELO # */
/* ############################################ */

#conten_img_360_ajax {
    border: 1px solid #d9d9d9;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-height: 30rem;
    height: 100%;
/*    overflow-y: scroll;*/
    border-radius: .4rem;
    position: relative;
}

.varurlimgbase_360 {
/*    display: flex;*/
    height: 2rem;
    width: 7rem;
    border: 1px solid blue;
    font-size: 1rem;
}

#conten_color_disponible {
    border: 1px solid orange;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4.5rem;
    padding: .2rem;
    border-radius: .4rem;
}

#conten_select_color {
/*    border: 1px solid black;*/
    display: flex;
    width: 20rem;
    min-width: 20rem;
/*    height: 4rem;*/
    position: relative;
}

.conten_color_rgb_select {
/*    border: 1px solid blue;*/
    width: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color_rgb_select {
    display: flex;
/*    justify-content: center;*/
/*    align-items: center;*/
    border: 1px solid #dddddd;
    width: 1.5rem;
    height: 1.5rem;
/*    border-radius: 10px;*/
}

#conten_boton_agregar_color {
/*    border: 1px solid black;   */
    display: flex;
}

#conten_boton_agregar_color input {
    border-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    height: 3.5rem;
    width: 6rem;
    background-color: #9b9b9b;
    color: white;
    border-radius: .4rem;
    transition: all 0.3s;
    margin-left: .1rem;
}

#conten_boton_agregar_color input:hover {
    background-color: #4d4d4d;
    cursor: pointer;
}

#conten_color_disp_modelo {
/*    border: 5px solid green;*/
    display: flex;
    flex-wrap: wrap;
/*    width: 15rem;*/
    width: 100%
}

.txt_col_disponible {
    display: flex;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 2rem;
}

/*
#conten_color_disp_modelo input[type=checkbox] {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 2rem;
    border: 1px solid blue;
}
*/

.color_disp_modelo {
/*    border: 5px solid orange;*/
}

.select_color_disponible {
/*    border: 1px solid blue;    */
}

.color_disopnible {
/*    border: 1px solid red;    */
}

.label_color_disponible {
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
    width: 8rem;
/*    height: 3rem;*/
    padding: .1rem;
/*    height: 60%;*/
    border: 1px solid #d6d6d6;   
    font-size: .9rem;
    margin: .2rem;
    border-radius: .4rem;
    transition: all 0.3s;
}

.label_color_disponible:hover {
    border: 1px solid #8d8d8d;  
    cursor: pointer;
}

.conten_pestana_color_disp {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: absolute;
    height: 100%;
}

/* ######################################### */
/* # FIN ESTILO COLORES DISPONIBLES MODELO # */
/* ######################################### */


.conten_doc_pri {
    margin: 0 auto;
    width: 33.33%;
    height: 100%;
    border-radius: .5rem;
}

.conten_doc_pri label {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;   
    border-radius: .5rem;
}

.icono_buscar_cliente {
    position: absolute;
    right: .5rem;
    height: 3rem;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: all .3s;
}

.icono_buscar_cliente:hover {
    cursor: pointer;
    color: red;
    transform: scale(1.2);
}

#fecha_cotizacion {
    position: absolute;
    right: 1rem;
    font-size: 1.3rem;
    border: 1px solid #a5a5a5;
    border-radius: .4rem;
    padding: .5rem;
}

#conten_campo_ver_detalle_opc_despleg_docretoma {
    overflow-y: scroll;
}

.conten_item_doc_retoma {
    display: flex;   
    flex-wrap: wrap;
}

.conten_titulos_det_doc_retoma {
    width: 100%;
    display: flex;
}

.conten_detalle_det_doc_retoma {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.content_linea_det_doc_retoma {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.content_linea_det_doc_retoma:hover {
    cursor: pointer;
    background-color: aqua;
}

.col_1_det_doc_retoma {
    display: flex;
    align-items: center;
    width: 85%;
    border-bottom: 1px solid #EE5601;
    font-size: 1.3rem;
    padding: .3rem;
}

.col_2_det_doc_retoma {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15%;
    border-bottom: 1px solid #EE5601;
    font-size: 1.3rem;
    padding: .3rem;
}

.chk_item_doc_retoma:hover {
    cursor: pointer;
}

.btn_oculto {
    display: none;
}

#contenedor_impresion {
    display: none;
}


/* Titulo del campo */
.lbl_tit_campo_fecha_fil_sel_mul {
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    margin-left: -1rem;
    margin-top: -3.2rem;
    color: black;
}

.lbl_tit_campo_fecha_fil_sel_mul_fecha {
    position: absolute;
    margin-top: -2rem;
    width: 20rem;
    font-size: 1.3rem;
    font-weight: bold;
}


.conten_campo_fil_fecha {
    border-radius: .4rem;
}

.conten_campo_fecha_fil_mul:nth-child(1) {
    border-bottom: 1px solid #c4c4c4;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: .35rem;
}

.conten_campo_fecha_fil_mul:nth-child(2),
.conten_campo_fecha_fil_mul:nth-child(3),
.conten_campo_fecha_fil_mul:nth-child(4) {
    padding: 2rem .5rem .5rem .5rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.conten_campo_fecha_fil_mul:nth-child(3) {
    display: none;
}

.conten_campo_fecha_fil_mul:nth-child(4) {
    display: none;
}

.campo_fecha_fil_mul {
    border-radius: .5rem;
    display: flex;
    height: 3rem;
    min-width: 12rem;
}

.campo_fecha_fil_mul input {
    font-size: 1.2rem;
    display: flex;
    width: 100%;
}

.campo_fecha_fil_mul select {
    width: 100%;
    font-size: 1.3rem;
}

.texto_todos_campo_fecha {
    font-size: 1.3rem;
}

.tabla_manten_prep {
/*    border: 1px solid red;*/
    
}

.tabla_manten_prep thead tr td {
    height: 2rem !important;
}

.tabla_manten_prep tbody tr td {
    height: 1.5rem !important;
}

#btn_personal_asignado {
    margin: 0 auto;
    background-color: #1476d8;
    display: flex;
    width: 12rem;
    padding: .3rem;
    color: white;
    border-radius: .5rem;
}

#btn_personal_asignado:hover {
    background-color: #044a90;
    cursor: pointer;
}

#conten_con_financiamiento,
#conten_color_texto {
    position: relative;
}

#lblconfinanciamiento,
#lblcolortexto {
    display: flex;
    position: absolute;
    font-size: 1.2rem;
    margin-left: 1rem;
    left: 0;
    top: .3rem;
    background-color: white;
}

#varidconfinanciamiento,
#varcolortexto {
    border: none;
    border: 1px solid var(--col_pri_tema);
    border-radius: .4rem;
    height: 3.5rem;
    font-size: 1.1rem;
    width: 100%;
}




/* ####################################### */
/* ###### Bloque temas ################### */
/* ####################################### */

.conten_bloque_tema {
    margin: 0 auto;
    margin-top: 3rem;
    display: flex;
    height: 80vh;
    overflow: scroll;
    border: 1px solid #e0e0e0;
}

#frmImagenesWeb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}


/* ------------------------------- */
.bloque_tema {
    width: 50rem;
    max-width: 95%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid #acacac;
    padding: 15px;
}
/* ------------------------------- */
.conten_tema {
    margin-top: 1rem;
    border: 1px solid #a5a5a5;   
}

/* ------------------------------- */
.t_menu_superior {
/*    border: 1px solid red;*/
    width: 100%;
/*    height: 1.5rem;*/
/*    overflow: hidden;*/
}

.t_menu_superior_div_1 {
    width: 100%;
    position: relative;
/*    overflow: hidden;*/
}

.t_menu_superior_div_1 img {
    width: 100%;
}

/* ------------------------------- */
.t_banner {
    display: flex;
/*    border: 1px solid blue;*/
    width: 100%;
    height: auto;
/*    overflow: hidden;*/
}

.t_banner_div_1 {
    width: 100%;
    display: flex;
    height: auto;
    position: relative;
/*    overflow: hidden;*/
/*    border: 1px solid red;*/
}

.t_banner_div_1 img {
    display: flex;
    width: 100%;
    height: auto;
}

.input_urlweb {
    display: flex;
    position: absolute;
/*    border: 4px solid red;*/
    z-index: 1000;
/*    margin-top: -2.5rem;*/
    font-size: 1.1rem;
/*    padding: 2px;*/
    width: 100%;
}

/* ------------------------------- */
.t_menu_marcas {
/*    border: 1px solid green;*/
    width: 100%;
/*    height: 2.3rem;*/
    position: relative;
/*    overflow: hidden;*/
}

.t_menu_marcas_div_1 {
    width: 100%;
/*    height: 50px;*/
/*    display: flex;*/
    position: relative;
/*    overflow: hidden;*/
}

.t_menu_marcas_div_1 img {
    width: 100%;
}

/* ------------------------------- */
.t_form_cotizar {
    width: 100%;
/*    height: 4.7rem;*/
    position: relative;
}

.t_form_cotizar_div_1 {
    width: 100%;
    display: flex;
    position: relative;
/*    overflow: hidden;*/
}

.t_form_cotizar_div_1 img {
    width: 100%;
}

/* ------------------------------- */
.t_fila_1 {
    width: 100%;
/*    height: 6.9rem;*/
    min-height: 5rem;
    display: flex;
    position: relative;
/*    overflow: hidden;*/
/*    border: 5px solid red;*/
}

.t_fila_1_div_1,
.t_fila_1_div_2 {
    width: 100%;
/*    overflow: hidden;*/
}

.t_fila_1_div_1 img,
.t_fila_1_div_2 img {
    width: 100%;
}

/* ------------------------------- */
.t_fila_2 {
/*    border: 1px solid gray;*/
    width: 100%;
    min-height: 5rem;
    display: flex;
    position: relative;
/*    overflow: hidden;*/
}

.t_fila_2_div_1 {
/*    border: 3px solid blue;*/
    width: 100%;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
/*    overflow: hidden;*/
    
}


.t_fila_2_div_1 img {
    display: flex;
    
    width: 100%;

}

.t_fila_2_div_2 {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.t_fila_2_div_2 img {
/*    height: 85%;*/
/*    position: absolute;*/
/*    left: -3rem;*/
}

/* ------------------------------- */
.t_fila_3 {
    width: 100%;
    min-height: 5rem;
    display: flex;
    position: relative;
/*    overflow: hidden;*/
}

.t_fila_3_div_1 {
    width: 100%;
/*    overflow: hidden;*/
}

.t_fila_3_div_1 img {
    width: 100%;
}

.t_fila_3_div_2 {
    width: 100%;
/*    overflow: hidden;*/
}

.t_fila_3_div_2 img {
    width: 100%;
}

/* ------------------------------- */
.t_fila_4 {
    width: 100%;
    min-height: 5rem;
    display: flex;
    position: relative;
/*    overflow: hidden;*/
}

.t_fila_4_div_1 {
    width: 100%;
/*    overflow: hidden;*/
}

.t_fila_4_div_1 img {
    width: 100%;
}

.t_fila_4_div_2 {
    width: 100%;
/*    overflow: hidden;*/
}

.t_fila_4_div_2 img {
    width: 100%;
}

/* ------------------------------- */
.t_pie {
    width: 100%;
/*    height: 4rem;*/
    position: relative;
/*    overflow: hidden;*/
    
}

.t_pie_div_1 {
    display: flex;
    width: 100%;
/*    overflow: hidden;*/
}

.t_pie_div_1 img {
    width: 100%;
}

/* ####################################### */
/* ###### Bloque Parametros Web ########## */
/* ####################################### */
.conten_param_web {
    margin: 0 auto;
    margin-top: 2rem;
    max-width: 60rem;
    border: 1px solid #a5a5a5;
    border-radius: .5rem;
    padding: 2rem;
    
}

.conten_sup_param_web_tit {

}

.conten_sup_param_web_tit label {
    display: flex;
    justify-content: center;
    font-weight: bold;
    padding: 1rem;
    font-size: 3rem;
    border-bottom: 3px solid var(--col_pri_tema);
}

.conten_sup_param_web_btn {
    margin-top: 1rem;
/*    border: 1px solid red;*/
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
}

.conten_sup_param_web_btn label {
    display: flex;
    justify-content: center;
    font-weight: bold;
    padding: .5rem;
    width: 14rem;
    background-color: #20a720;
    color: white;
    border-radius: .5rem;
    font-size: 1.3rem;
}

.conten_sup_param_web_btn label:hover {
    background-color: #037603;
    cursor: pointer;
}

.conten_parametros_web {

}

.conten_parametro_web {
    display: flex;
    justify-content: space-between;
    padding: 1rem .5rem;
}

.conten_parametro_web label {
    display: flex;
    width: 22rem;
    font-size: 1.2rem;
    padding: .5rem;
    font-weight: bold;
}

.conten_parametro_web input {
/*    border: 5px solid black;*/
    display: flex;
    width: 22rem;
    font-size: 1.2rem;
    padding: .5rem;
    border: none;
    border: 1px solid #cccccc;
    border-radius: .5rem;
}

.conten_parametro_web select {
/*    border: 5px solid black;*/
    display: flex;
    width: 22rem;
    font-size: 1.2rem;
    padding: .5rem;
    border: none;
    border: 1px solid #cccccc;
    border-radius: .5rem;
}

/* ################################### */
/* ###### imagenes slider ########## */
/* ################################### */
.conten_slider_tema {
    margin-left: 3rem;
    padding: 15px;
    width: 30rem;
    max-width: 95%;
    position: relative;
    border: 1px solid #b1b1b1;
}

.conten_slider_tema label {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
/*    border: 1px solid blue;*/
}

.slider_tema {
    margin-top: 1rem;
    border: 1px solid #c8ccc8;
/*    width: 40rem;*/
/*    height: 94%;*/
}

.conten_img_slider {
    border: 1px solid #c8ccc8;
    min-height: 6rem;
    position: relative;
}

/* ################################### */
/* ###### Carga de archivo excel ########## */
/* ################################### */
.tabla_update {
    margin-top: 3rem;
    border: 1px solid #959595;
    border-spacing: 0px;
    padding: 0;
    width: 100%;
}

.tabla_update thead tr td {
    padding: .5rem;
    border: 1px solid #d0d0d0;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    justify-content: center;
}

.tabla_update tbody tr td {
    padding: .5rem;
    border: 1px solid #d0d0d0;
    font-size: 1.2rem;
}

#conten_titulos_precio {
    margin: 2rem;
/*    border: 1px solid red;*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: lighter;
}

#conten_titulos_precio label {
    display: flex;
    justify-content: center;
    width: 100%;
}

.conten_encabezado_importar_precios {
    margin: 0 auto;
/*    margin-top: 1rem;*/
/*    width: 50rem;*/
/*    border: 1px solid blue;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#conten_lbl_cargar_excel {
    width: 100%;
}

#conten_lbl_cargar_excel label {
    display: flex;
    
    justify-content: center;
    color: #7c7c7c;
    font-size: 1.2rem;
}

.conten_btn_cargar_archivo_excel {
    margin: 0 auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed gray;
}

#btnImportarPreciosExcel {
    background-color: #0fbc00;
    color: white;
    padding: .2rem 1rem;
    border-radius: .5rem;
    transition: all .3s;
}

#btnImportarPreciosExcel:hover {
    cursor: pointer;
    background-color: green;
}

#btnImportarPreciosExcel {
    visibility: hidden;
}

/* ################################ */
/* Estilo celdas formulario color */
/* ################################ */
.conten_celda_color {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.conten_celda_color div {
    margin: 0 auto;
    height: 1.2rem; 
    width: 3rem; 
    border-radius: .3rem;
    border: 1px solid black;
}

.conten_celda_color label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.icono_entrada {
    color: red;
}

.icono_salida {
    color: green;
}

.icono_traspaso {
    color: orange;    
}

.icono_actualizar_combo {
    color: #9d9d9d;
    font-size: 1.4rem;
    width: 1.5rem;
    margin-left: .5rem;
    margin-right: .5rem;
    transition: all 0.4s;
}

.icono_actualizar_combo:hover {
    cursor: pointer;
    color: black;
}

.estado_inventario {
/*    border: 5px solid red;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.icono_stock_x_vencer_inactivo {
    display: none;
}

.icono_stock_x_vencer {
    display: flex;
/*    color: red;*/
    font-size: 2rem;
    transition: all .2s;
}

.icono_stock_x_vencer:hover {
    cursor: pointer;
    color: blue;
    font-size: 2.5rem;
}


@-webkit-keyframes blink {
    0% { color: rgba(255,0,0,0.0.8); }
    50% { color: rgba(255,0,0,0); }
    100% { color: rgba(255,0,0,0.8); }
}

@keyframes blink {
    0% { color: rgba(255,0,0,0.8); }
    50% { color: rgba(255,0,0,0); }
    100% { color: rgba(255,0,0,0.8); }
}

.animate { 
    /* height: 100px;  */
    /* width: 100px; */
    color: rgba(255,0,0,1);
}

.animate {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;   
    animation-direction: normal;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: blink;
    animation-timing-function: ease;       
}

.ver_detalle_vencido {
    font-size: 2rem;
    color: orange;
    transition: all .2s;
}

.ver_detalle_vencido:hover {
    cursor: pointer;
    color: blue;
}

.icono_warning_stock_minimo {
    color: red;
    font-size: 1rem;
    margin-left: .5rem;
}