:root {
    --main-color    : rgb(0, 100, 0);
    --main-color_a  : rgb(2, 43, 2);
    --main-color_f  : rgba(206, 242, 206, 0.615);
    
    --main-btnok-c  : #2974d7;
    --main-btnok-b  : #287ae6;
    --main-btnse-c  : rgba(121, 118, 118, 0.509);
    --main-btnse-b  : rgba(255, 255, 255, 0.006);

    --black: #13131a;
    --bg: #fff;
    --border: 0.1rem solid rgba(255, 255, 255, 0.3);
    --bg-lateral: #2f3542;
    --bg-claro: #191919;
    --fuente_ppal: 'Google Sans' , 'Noto Sans Myanmar Ui',  Arial, Helvetica, sans-serif, monospace;
    --fuente_sec: "Roboto", sans-serif;     

}




/* BARRA ALERTA  .box_data .box_cppal1 .box_body .box_body_1 .box_body */
    .clas_alert{
        margin-top:6%;
        width: 96%;
        margin-left: 2%;
        height: 3rem;
        background: var(--main-color_f);
        display: flex;
        justify-content: left;
        align-items: center; 
        border-radius: 5px;
        border: 1px solid var(--main-color);
        padding: 5px;
    }

    /*********************************************/

    .clas_alert .cbtn{
        margin-right:5px;
        background-color: var(--main-btnok-c);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40%;
        height: 2.8rem;
        margin-top: 0.09rem;
        border: 1px solid var(--main-btnok-b);
        border-radius: 5px;
        font-weight: 500;    
    }

    .clas_alert .cbtn i {
        font-size:20px;    
        margin-right: 5px;
    }

    .clas_alert .cbtn span {
        display:block;
        font-size:15px;    
    }

    .clas_alert .cbts{
        margin-right:5px;
        background-color: var(--main-btnse-c);
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40%;
        height: 2.8rem;
        margin-top: 0.09rem;
        border: 1px solid var(--main-btnse-b);
        border-radius: 5px;
        font-weight: 500;    
    }
    
    .clas_alert .cbts span {
        display:block;
        font-size:15px;    
    }

/**********************************************/
    .class_modal{
        color:var(--main-color);
    }

    .color_fondo_btn{
        background-color:  var(--main-color);
    }

    .color_texto_btn{
        color:  #fff;
    }

    .btn_rel{
        display:block;
    }


/* MODALES *********************************************************/
    .esti-cla-seltodos{
        color: var(--black);
        font-size : 12px;
        font-weight: 500;
        margin-top:5px;
        margin-left:5px;
        width:31%;
    }    

    /*
    .   {
        color: var(--main-color);
        min-height: 400px;
    }
    */

    .contenedor_modal .tit_cua1{
        display: grid;
        grid-template-columns: 48% 4% 48%;
        align-items: center;
        justify-items: center;
        height: 2rem;
        font-size: 20px;
        font-weight: 600;
    }

    .contenedor_modal .tit_cua .clas_tit_cua{
        border: 1px solid var(--main-color);
        background: var(--main-color_f);
        border-radius: 5px;
        width: 100%;
        text-align: center;
        
    }

    .contenedor_modal .cuerpo_cuadro{
        margin-top: 15px;
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        justify-items: center;
        min-height: 360px;
        
    }

    .contenedor_modal .cuerpo_cuadro .cont_cuerpo{
        border: 2px solid var(--main-color);
        width : 95%;
        height: 100%;
        padding: 10px;
        margin-left: 1%;
    }

    .clas_tit_cua{
        border: 1px solid var(--main-color);
        background: var(--main-color_f);
        border-radius: 5px;
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
        
    }


    .btn_cmcuadro{
        
        background-color: var(--main-color);
        color:#fff;
        width: 100%;
        height: 2rem;
    }

    .btn_cmcuadro i{
        font-size:15px;
    }

    .btn_cmcuadro:hover{
        background-color: rgba(109, 179, 109, 0.615);
        color: var(--black);
        cursor: pointer;
        border: 1px solid var(--main-color);
    }

    .cuerpo_lista_modulo{
        padding: 10px;
        overflow-y :scroll;
        max-height: 340px;
        display:block;
        align-items: center;
        justify-items: left;    
    }

    .modulos_d{
        width: 100%;
        border-bottom: 1px solid var(--main-color_f);
    }

    .modulos_d:hover{
        border-bottom: 1px solid var(--main-color);
        font-weight: 600;
        cursor:pointer;

    }

    .clas_bot_mod_opc{    
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
        justify-items: center;       
        
    }

    .clas_bot_mod_opc button{
        padding: 15px 20px;
        width:98%;
        margin-left: 25px;
        margin-top: 5px;
        font-size: 20px;
    }


/* ESTADISTICAS */

/******************************************/

/******************************************/


.cont_estad {
    width: 99%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    justify-content: center;
    align-items: center;
}

.cont_estad1 {
    width: 99%;
    height: 400px;
    display: grid;
    grid-template-columns: 100% ;
    justify-content: center;
    margin-left: 5px;
    background :#e7e7e7;
}


.cont_estad .estcuadro {
    padding:2px;
    max-height:290px;
    height:290px;
    margin-left:10px;
    margin-top:10px;
    border:1px solid #000;
}

.cont_estad1 .estcuadro{
    padding:2px;
    margin-left:10px;
    height:400px;
    border:1px solid var(--bg-lateral);
}



.cont_estad1 h1,
.cont_estad h1{
    font-size: 15px;
    color:var(--black);
    text-align: center;
    background :var(--main-color_f);
}

.clase-tabla{
    background: var(--main-color_f);
}

.box_cb .btn-1 span{
    font-size:1.5rem;
}

.box_cb .btn-1 i{
    font-size:2rem;
}

/* CAJAS ********************************************/

.box_cb,
.box{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 50rem;
    padding: 0.5rem;
    border: 2px solid var(--main-color);
    border-radius: 8px ;    
}


.box_img img{
    position: absolute;
    top: 12%;
    left:50%;
    
    transform: translate(-50%,-50%);
    border-radius: 15px;
    border: 2px solid var(--main-color_a);
    width: 180px;
    height: 60px;

}

.box_cb h2,
.box h2{
    margin: 0 0 -0.125rem;
    padding: 0;
    color: var(--main-color);
    text-align: center;
    font-size: 42px;
    font-weight: bold;
    font-family: var(fuente_sec);    
}

.box_cb h3,
.box h3{
    margin: 0 0 -0.125rem;
    padding: 0;
    color: var(--main-color);
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-family: var(fuente_sec);    
}

.box_cb p,
.box p{
    font-size: 14px;
    font-weight: normal;
    letter-spacing: .2px;
    line-height: 1.5;
    margin-bottom: 25px;
    text-align: center;        
}

.box_cb .selec_opciones{
    font-size: 24px;
    font-weight: normal;
    letter-spacing: .2px;
    line-height: 1.5;
    margin-bottom: 25px;
    margin-left: 20px;
    text-align: center;        
}

.box_cb .selec_opciones label{
    margin-left: 5px;
}

.box_cb .inputbox-no-display{
    display: none;
}


.box_cb .box_cppal1 .inputbox{
    position: relative;
    display: block;
    grid-template-columns: 8% 90%;
    align-items: center;
    justify-items: center;
    background: #f2eeee;
    padding: 0.625rem 5px;
    width: 94%;
    left:3%;   
    border: 1px solid var(--main-color_a);
    border-radius: 3px;    
    margin-top:15px;
}

.box_cb .inputbox,
.box .inputbox,
.box .selectbox{
    position: relative;
    display: grid;
    grid-template-columns: 8% 90%;
    align-items: center;
    justify-items: center;
    background: #f2eeee;
    padding: 0.325rem 5px;
    width: 94%;
    left:3%;   
    margin-top:15px;
    border: 1px solid var(--main-color_a);
    border-radius: 3px;  
}

.box_cb .box_cppal1 .inputbox i,
.box_cb .inputbox i,
.box .inputbox i,
.box .selectbox i{
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    margin-right:8px;        
}


.box_cb .box_cppal1 .inputbox input,
.box_cb .inputbox input{
    width: 100% !important;
    height: 2.8rem;
    padding: 0.125rem 10px;
    font-size: 1.5rem;
    letter-spacing: 0.062rem;
    outline: none;
    border: 0.1px solid #f2eeee;
    text-transform: uppercase;
    background: transparent;
    border-radius: 4px;    
    text-align: center;
}

.box .inputbox input{
    width: 100%;
    height: 3.5rem;
    padding: 0.625rem 10px;
    font-size: 2rem;
    letter-spacing: 0.062rem;
    outline: none;
    border: 0.1px solid #f2eeee;
    text-transform: uppercase;
    /*border: 1px solid #000;*/
    background: transparent;
    border-radius: 4px;    
}

.box_cb .inputbox select{
    width: 100%;
    height: 2.8rem;
    padding: 0.325rem 10px;
    font-size: 1.5rem;
    letter-spacing: 0.062rem;
    outline: none;
    border: 0.1px solid #f2eeee;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;    
    margin-top:0px;    
}

.box .selectbox select{
    width: 100% !important;
    height: 2.8rem;
    padding: 0.325rem 10px;
    font-size: 1.5rem;
    letter-spacing: 0.062rem;
    outline: none;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: transparent;
    
    border-radius: 4px;    
    margin-top:0px;
}

.box_cb .box_cppal1 .inputbox label,
.box_cb .inputbox label{
    position: absolute;
    top: 0px;
    left:4%;
    margin-left: 20px;
    padding: 0.625rem 0;
    font-size: 1.2rem;
    color: var(--black);
    pointer-events: none;
    transition: 0.3s;        
}


.box .inputbox label {
    position: absolute;
    top: 0px;
    left:5%;
    padding: 0.625rem 0;
    font-size: 2rem;
    color: #8e8787;    
    pointer-events: none;
    transition: 0.3s;
    margin-left:15px;
}

.box_cb input[type='submit'],
.box input[type='submit']{
    letter-spacing: .3px;
    border: none;
    outline:none;
    color:#fff;
    background-color: var(--main-color);
    padding: 0.6258rem 1.25rem;
    border-radius: 0.312rem;
    font-size: 2rem;    
    text-transform: uppercase;
    
    
}

.box_cb input[type='submit']:hover,
.box input[type='submit']:hover {
    background-color: #287ae6;
    border: 1px solid #287ae6;
    cursor: pointer;
}

.box_cb button[type='submit'],
.box button[type='submit']{
    letter-spacing: .3px;
    border: none;
    outline:none;
    color:#fff;
    background-color: var(--main-color);
    padding: 0.6258rem 1.25rem;
    border-radius: 0.312rem;
    font-size: 2rem;    
}

.box_cb button[type='submit']:hover,
.box button[type='submit']:hover {    
    background-color: var(--bg-claro);
    border: 1px solid var(--black);
    cursor: pointer;
    color : white;
}


.box_cb .box_cppal1 .inputbox select:focus ~ label,
.box_cb .box_cppal1 .inputbox select:valid ~ label,
.box_cb .box_cppal1 .inputbox input:focus ~ label,
.box_cb .box_cppal1 .inputbox input:valid ~ label,
.box_cb .box_cppal1 .inputbox input:not([value=""]) ~ label,
.box_cb .inputbox input:focus ~ label,
.box_cb .inputbox input:valid ~ label,
.box_cb .inputbox input:not([value=""]) ~ label,
.box .inputbox input:focus ~ label,
.box .inputbox input:valid ~ label,
.box .inputbox input:not([value=""]) ~ label{

    top:-1rem;
    color:var(--main-color);
    font-size: 1.2rem;
    background-color: #fff;    
    height: 20px;
    padding: 0 5px;
    margin-left:20px;
}


.box .selectbox label{
    top:-1rem;
    color:var(--main-color);
    font-size: 1.2rem;
    background-color: #fff;    
    height: 20px;
    padding: 0 5px;
    margin-left:20px;    
    

}

.box_cb .box_cppal1 .inputbox input:focus,
.box_cb .inputbox input:focus,
.box .inputbox input:focus{
    outline: none;
    border-bottom: 2px solid var(--main-color);
}

.forgot {
    margin-top:0;
}

.forgot a{
    margin-top:0;
    color: var(--black);
    font-weight: 500;
    letter-spacing: .25px;
    background-color: transparent;
    cursor:pointer;
    font-size: inherit;
    padding: 0;
    display: block;
    text-align:center;
    border: 0;
    margin-top:20px;
    text-decoration: none;

}

.forgot button{
    border-radius: 4px;
    color: #1a73e8;
    display: inline-block;
    font-weight: 500;
    letter-spacing: .25px;
    outline: 0;
    position: relative;
    background-color: transparent;
    cursor:pointer;
    font-size: inherit;
    padding: 0;
    text-align:center;
    border: 0;
    top:20px;
}

/********/

.box_caja{
    padding: 0.5rem;
    box-sizing:border-box;
    border-radius: 8px ;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 100%;    
}

.box_caja_1{
    padding: 0.5rem;
    box-sizing:border-box;
    border-radius: 8px ;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 100%;    
    height: 120px;  
}

.box_caja4{
    padding: 0.5rem;
    box-sizing:border-box;
    border-radius: 8px ;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;    
}

.box_caja_1 .inputbox{
    position: relative;
    background: #f2eeee;
    padding: 5px;
    border: 1px solid var(--main-color_a);
    border-radius: 3px;    
    display: block;
    width: 100%;

}

.box_caja {
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.box_caja_textarea {
    width: 100%;
    
}

.box_caja4 .inputbox,
.box_caja .inputbox{
    position: relative;
    background: #f2eeee;
    padding: 5px;
    border: 1px solid var(--main-color_a);
    border-radius: 3px;    
    display: block;
    width: 90%;
    margin-left:5px;
    margin-top:15px;    
}

.box_caja_textarea .textbox{
    position: relative;
    background: #f2eeee;
    padding: 5px;
    border: 1px solid var(--main-color_a);
    border-radius: 3px;    
    display: block;
    width: 96%;
    margin-left:12px;
    margin-top:15px;    
}

.box_caja4 .inputbox.nodisp,
.box_caja .inputbox.nodisp{
    display: none;
}

.box_caja_textarea .textbox textarea,
.box_caja_1 .inputbox textarea{
    border: 0.1px solid #f2eeee;
    border-bottom: 2px solid #3d3d3d;
    border-radius: 4px;
    text-transform: uppercase;
    padding: 0.625rem 10px;
    font-size: 1rem;
    letter-spacing: 0.062rem;
    outline: none;
    background: transparent;    
    width: 99%;
    margin-left:5px;    
    height:50px;
    resize: none;
    text-align: left;
}


.box_caja4 .inputbox input,
.box_caja .inputbox input{
    
    height: 2.5rem;
    padding: 0.625rem 10px;
    font-size: 1rem;
    letter-spacing: 0.062rem;
    outline: none;
    border: 0.1px solid #f2eeee;
    border-bottom: 2px solid #3d3d3d;
    text-transform: uppercase;
    background: transparent;
    border-radius: 4px;
    width: 99% !important;
    margin-left:2%;
}

.box_caja4 .inputbox select,
.box_caja .inputbox select{
    width: 100%;
    height: 2.8rem;
    padding: 0.325rem 10px;
    font-size: 1rem;
    letter-spacing: 0.062rem;
    outline: none;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;    
    margin-top:0px;
}

.box_caja_textarea .textbox label,
.box_caja_1 .inputbox label,
.box_caja4 .inputbox label,
.box_caja .inputbox label{
    position: absolute;
    top: 0px;
    left:4%;
    padding: 0.625rem 0;
    font-size: 1.2rem;
    color: var(--black);  
    pointer-events: none;
    transition: 0.3s;   
    display: inherit; 
}


.box_caja4 input[type='submit'],
.box_caja input[type='submit']{
    letter-spacing: .3px;
    border: none;
    outline:none;
    color:#fff;
    background-color: var(--main-color);
    padding: 0.6258rem 1rem;
    border-radius: 0.312rem;
    font-size: 2rem;    
    text-transform: uppercase;    
}

.box_caja4 input[type='submit']:hover,
.box_caja input[type='submit']:hover {
    background-color: #287ae6;
    border: 1px solid #287ae6;
    cursor: pointer;
}


.box_caja4 button[type='submit'],
.box_caja button[type='submit']{
    letter-spacing: .3px;
    border: none;
    outline:none;
    color:#fff;
    background-color: var(--main-color);
    padding: 0.6258rem 1.25rem;
    border-radius: 0.312rem;
    font-size: 2rem;    
}

.box_caja4 button[type='submit']:hover, 
.box_caja button[type='submit']:hover {    
    background-color: var(--bg-claro);
    border: 1px solid var(--black);
    cursor: pointer;
    color : white;
}


.box_caja_1 .inputbox textarea ~ label{
    top:-.8rem;
    left:10px;
    color: var(--main-color);
    font-size: 1rem;
    font-weight: 600;
    background-color: #fff;
    height: 20px;
    padding: 0 5px;
    margin-left:10px;    
    
}

.box_cb .inputbox select ~ label,
.box_caja4 .inputbox select ~ label,
.box_caja .inputbox select ~ label{
    top:-.8rem;
    left:10px;
    color: var(--main-color);
    font-size: 1rem;
    font-weight: 600;
    background-color: #fff;
    height: 20px;
    padding: 0 5px;
    margin-left:10px;    
}



.box_caja_textarea .textbox textarea:not([value=""]) ~ label,
.box_caja_textarea .textbox textarea:focus ~ label,
.box_caja4 .inputbox input:not([value=""]) ~ label,
.box_caja .inputbox input:focus ~ label,
.box_caja .inputbox input:valid ~ label,
.box_caja .inputbox input:not([value=""]) ~ label{
    top:-.8rem;
    left:10px;
    color: var(--main-color);
    font-size: 1rem;
    font-weight: 600;
    background-color: #fff;
    height: 20px;
    padding: 0 5px;
    margin-left:10px;    
    
}


.box_caja_1 .inputbox textarea:focus,
.box_caja4 .inputbox select:focus,
.box_caja .inputbox select:focus,
.box_caja4 .inputbox input:focus,
.box_caja .inputbox input:focus{
    outline: none;
    border-bottom: 2px solid var(--main-color);    
}

/*******************/   

.google-logo {
    display: flex;
    justify-content: center;
    padding-bottom: 15px;
}

.box .cuadro-dialogo{
    height: 15%;
    width: 100%;
    margin-top: 10px;
    background-color: #d9dbb8;
    padding: 5px;
    border-radius: 5px;
}

.box_cb .cuadro-dialogo{    
    width: 100%;
    margin-top: 10px;
    background-color: #d9dbb8;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--black);
}

.box_cb .cuadro-dialogo h1,
.box .cuadro-dialogo h1{
    font-family:  var(fuente_sec);
    font-size: 15px;
    font-weight: 550;
}


.box_cb .cuadro-dialogo span,
.box .cuadro-dialogo span{
    text-align: left;
    font-family:  var(fuente_sec);
    font-size: 15px;
    
}



/*****************************************************************/

.box_cb .box_cppal1{
    color: var(--main-color);   
    height: 20rem;
    padding: 0;
    margin-left:2%;
}


.box_data .box_cppal1{
    color: var(--main-color);   
    border: 1px solid var(--main-color);
    height: 220px;
    padding: 0;
    margin-left:2%;
}

.box_data .box_cppal1.altura_a4,
.box_data .box_cppal1.altura_a{
    height: 180px;
    
}

.box_data .box_cppal1.alt_reg{
    max-height:350px;
    height:350px
}

.box_data .box_cppal1.alt_reg_vacio{
    max-height:150px;
    height:150px
}

.box_data .box_cppal1.altura_6r,
.box_data .box_cppal1.altura_8r,
.box_data .box_cppal1.altura_b{
    height: 250px;
    
}

.box_data .box_cppal1.altura_3r{
    height: 350px;    
}

.box_data .box_cppal1.altura_4r{
    height: 400px;    
}

.box_cppal2{
    display: flex;
    
}

.box_data .box_cppal1 .box_cppal2 .box_cbb i{
    margin-top: 0;
    margin-left: 0;
    cursor:pointer;
    color: var(--main-color);   
    
}


.box_data .box_cppal1 .box_cppal2 .box_cb_1 span{
    font-weight: 600;
    font-size: 15px;
    margin-left:5px;
    color: var(--main-color);   
    
}

.box_data .box_cppal1 .box_body{
     padding: 0;         
     height:100px;
}

.box_data .box_cppal1 .box_body .box_body_1{
    display:flex;
    padding: 0;
    margin-top:10px; 
    width: 100%;     
}

.box_data .box_cppal1 .box_body .box_body_1 .box_body {
    width: 400%;
}

.box_data .box_cppal1 .box_cppal2 .box_cbb {
    width:1%;
}

.box_data .box_cppal1 .box_cppal2 .box_cbb > i{
    font-size: 15px;
}

.box_data .box_cppal1 .box_cppal2 .box_cb_1 > span{
    margin-left:5px;
    font-weight: 600;
    color: var(--bg-lateral);
}

.box_cppal .box_cppal1 .box_body .box_body_1 .box_body_1_2 input{
    height: 2rem;
    color:var(--main-color);
    font-size: 20px;
    align-items: center;

}

/****************************************************************/

.box_data{
    padding-top:5px;
    width:98%;
    
}

.box_data .box_cppal1{
    color: var(--main-color);   
    
}

.box_cppal2{
    display: flex;
    
}

.box_data .box_cppal1 .box_cppal2 .box_cbn i{
    margin-top: 0;
    margin-left: 0;
    cursor:pointer;
    color: var(--main-color);   
}


.box_data .box_cppal1 .box_cppal2 .box_cb_1 span{
    font-weight: 600;
    font-size: 15px;
    margin-left:5px;
    color: var(--main-color);   
    
}

.box_data .box_cppal1 .box_body .box_body_1{
    display:flex;
    margin-top:15px;  
    border:none; 
    width: 100%;
    /*background: #ccc;*/
}   

.box_data .box_cppal1 .box_body .box_body_1 .box_body_1_1 {
    border-bottom : 2px solid var(--main-color);
    width:300px;
    color:var(--main-color);
    font-size: 20px;
    font-weight: 600;
    
}

.box_data .box_cppal1 .box_body .box_body_1 .box_body_1_2 input{
    height: 2rem;
    color:var(--main-color);
    font-size: 20px;
    align-items: center;

}

/**********************************************************************/
.box_data .box_cppal1 .box_cppal2 .box_cbb > i{
    font-size: 15px;
}

.box_data .box_cppal1 .box_cppal2 .box_cb_1 > span{
    font-size: 15px;
    margin-left: 5px;
    font-weight: 600;
    color: var(--bg-lateral);
}

.box_data .box_cppal1 .box_cppal2 .box_cb_1 span > span{
    font-size: 15px;
    margin-left: 5px;
    font-weight: 600;
    color: var(--bg-lateral);
}

.box_data .box_cppal1 .box_body .box_body_1{
    width:100% !important;
    
}

.box_data .box_cppal1 .box_body .box_body_1 .box_parametros {
    padding: 0;
    display: flex; 
    width:100%;        
}

.box_data .box_cppal1 .box_body_1 .box_parametros .ctr_caja{
    padding: 0 1% 0 1%;
    border-radius: 5px;
    width:15%;
    margin-top:0;        
    
}
    
.box_data .box_cppal1 .box_body_1 .box_parametros > label{
    font-size: 8px !important;
    margin-left: 8px;
    font-weight: 600;
    color: var(--bg-lateral);
    background: red;
}




/******************************************************/
.id-pagina-header{
    font-size:15px;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;    
}

.id-pagina-header p {
    color:#fff;
    margin: 0;
    padding: 1px;    
}


/******************************************************/





/*************************************************/


@media (max-width:768px){
    .box_data .box_cppal1 .box_cppal2 .box_cbb > i{
        font-size: 8px;
    }
    
    .box_data .box_cppal1 .box_cppal2 .box_cb_1 > span{
        font-size: 8px;
        margin-left: 8px;
        font-weight: 600;
        color: var(--bg-lateral);
    }

    .box_data .box_cppal1 .box_cppal2 .box_cb_1 span > span{
        font-size: 8px;
        margin-left: 8px;
        font-weight: 600;
        color: var(--bg-lateral);
    }

    .box_data .box_cppal1 .box_body .box_body_1{
        width:100% !important;
        
    }

    .box_data .box_cppal1 .box_body .box_body_1 .box_parametros {
        padding: 0;
        display: flex; 
        width:100%;        
    }

    .box_data .box_cppal1 .box_body_1 .box_parametros .ctr_caja{
        padding: 0 1% 0 1%;
        border-radius: 5px;
        width:40%;
        margin-top:0;        
        background: red;
    }
        
    .box_data .box_cppal1 .box_body_1 .box_parametros > label{
        font-size: 8px !important;
        margin-left: 8px;
        font-weight: 600;
        color: var(--bg-lateral);
        background: red;
    }

    .columns{
        grid-template-columns: repeat(2,1fr);
        
    }
}

@media (max-width:480px){

    .box_data .box_cppal1 .box_cppal2 .box_cbb > i{
        font-size: 8px;
    }
    
    .box_data .box_cppal1 .box_cppal2 .box_cb_1 > span{
        font-size: 8px;
        margin-left: 8px;
        font-weight: 600;
        color: var(--bg-lateral);
    }

    .box_data .box_cppal1 .box_cppal2 .box_cb_1 span > span{
        font-size: 8px;
        margin-left: 8px;
        font-weight: 600;
        color: var(--bg-lateral);
    }

    .box_data .box_cppal1 .box_body .box_body_1{
        width:100% !important;
        
    }

    .box_data .box_cppal1 .box_body .box_body_1 .box_parametros {
        padding: 0;
        display: flex; 
        width:100%;        
    }

    .box_data .box_cppal1 .box_body_1 .box_parametros .ctr_caja{
        padding: 0 1% 0 1%;
        border-radius: 5px;
        width:40%;
        margin-top:0;        
        background: red;
    }
        
    .box_data .box_cppal1 .box_body_1 .box_parametros > label{
        font-size: 8px !important;
        margin-left: 8px;
        font-weight: 600;
        color: var(--bg-lateral);
        background: red;
    }

    /**************************************/

    .id-pagina-header{
        font-size:14px;
    }   

    .id-pagina-header{
        font-size:12px;
    }
    
    .contenedor_modal .cuerpo_cuadro{
        display: grid;
        grid-template-columns: 98%;
        min-height: 360px;
    }
    
    .box_caja4,
    .box_caja {
        width: 100%;        
        display: grid;
        grid-template-columns: repeat(1,1fr);        
    }
    
    .box_caja4 .inputbox, 
    .box_caja .inputbox{
        width: 98%;
        margin-left: 2%;
        margin-top: 5%;
    }

    .box_caja_1 .inputbox{
        margin-left: 0%;
        margin-top: 0%;
        
    }

    .box_caja_1 .inputbox textarea{
        min-height: 170px;
        max-height: 170px;
        height: 170px;        
    }

    .box_data4 .box_cppal1,
    .box_data .box_cppal1{
        height: 300px;
    }

    .box_data .box_cppal1.altura_i{
        height: 160px;
    }

    .box_data .box_cppal1.altura_a{
        height: 300px;
    }

    .box_data .box_cppal1.altura_a4{
        height: 350px;
    }
    
    .box_data .box_cppal1.altura_6r{
        height: 540px;
    }

    .box_data .box_cppal1.altura_8r,
    .box_data .box_cppal1.altura_b,
    .box_data .box_cppal1.altura_3r,
    .box_data .box_cppal1.altura_4r{
        height: 740px;
    }

    .box_data .box_cppal1.altura_4r{
        height: 800px;
    }

    .clas_alert{
        margin-top:25%;
        
    }

    /* BOTONES */
        .btn_rel{
            display:none;
        }

        .clas_alert .cbtn{
            margin-right:5px;
            background-color: var(--main-btnok-c);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 2.8rem;
            margin-top: 0.09rem;
            border: 1px solid var(--main-btnok-b);
            border-radius: 5px;
        }

        .clas_alert .cbtn i {
            font-size:25px;
            font-weight: 500;    
        }

        .clas_alert .cbtn span {
            display:none;
            font-size:10px;
            font-weight: 500;
        }

        .clas_alert .cbts{
            margin-right:5px;
            background-color: var(--main-btnse-c);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 2.8rem;
            margin-top: 0.09rem;
            border: 1px solid var(--main-btnse-b);
            border-radius: 5px;
        }

        .clas_alert .cbts i {
            font-size:25px;
            font-weight: 500;    
        }

        .clas_alert .cbts span {
            display:none;            
        }

        .clas_alert .fa {
            display: none;
            font-size:20px;    
            margin-right: 5px;
        }

        .clas_alert .clasalerspan {
            font-size: 12px;    
            
            
        }

/*******************************************************************/

        .box_img img{
            display: none;
        
        }

        .id-pagina-header{
            font-size:12px;
        }

        /* box */

        .box_cb{
            left:0;
            transform: translate(0.5%,-40%);
            width: 24rem!important;
            
        }
        
        .box{
            width: 35rem!important;            
        }

        .box_cb h2,
        .box h2{
            font-size: 32px;
        }
    
        .box_cb h3,
        .box h3{
            font-size: 18px;
        }    

        .box_cb .box_cppal1{
            width: 100%;
            height:18rem;
            
        }

        .box_cb .inputbox,
        .box_cb .box_cppal1 .inputbox{
            width: 94%;
            margin-left: 0;   
            padding: 5px;            
        }

        .box .inputbox{
            width: 94%;
            margin-left: 0;   
            padding: 5px;            
        }
        
        .box_cb .box_cppal1 .inputbox select,
        .box_cb .box_cppal1 .inputbox input,
        .box_cb .inputbox input,
        .box .inputbox input{
            text-align: center;
            font-size:2rem;
        }
    
        .box_cb button[type='submit'],
        .box button[type='submit']{
            letter-spacing: .3px;
            border: none;
            outline:none;
            color:#fff;
            background-color: var(--main-color);
            padding: 0.6258rem 1.25rem;
            border-radius: 0.312rem;
            font-size: 1rem;    
        }

        .box_cb .inputbox label {            
            font-size: 1.1rem;
        }
        
        .box .inputbox label {            
            font-size: 2rem;
        }
        
        .box_cb .box_cppal1 .inputbox select:focus ~ label,
        .box_cb .box_cppal1 .inputbox select:valid ~ label,
        .box_cb .box_cppal1 .inputbox input:focus ~ label,
        .box_cb .box_cppal1 .inputbox input:valid ~ label,
        .box_cb .box_cppal1 .inputbox input:not([value=""]) ~ label,
        .box_cb .inputbox input:focus ~ label,
        .box_cb .inputbox input:valid ~ label,
        .box_cb .inputbox input:not([value=""]) ~ label,
        .box .inputbox input:focus ~ label,
        .box .inputbox input:valid ~ label,
        .box .inputbox input:not([value=""]) ~ label{
            margin-left:10px;
        }
        
        .box_cb .inputbox i,
        .box .inputbox i{
            display: block;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            margin-right:8px;
        }

        .box_cb .cuadro-dialogo,
        .box .cuadro-dialogo{
            width: 98%;
            margin-left: 1%;
            padding:2px;
        }
    
        .box_cb .cuadro-dialogo span,
        .box .cuadro-dialogo span{
            font-size: 12px;
        }   

        .clas_bot_mod_opc{    
            display: grid;
            grid-template-columns: 98%;
            align-items: center;
            justify-items: center;    
        }

        .cont_estad {
            display: grid;
            grid-template-columns: 98%;
            justify-content: center;
            align-items: center;
        
        }

        .box_cb .btn-1 span{
            font-size:1rem;
        }
        
        .box_cb .btn-1 i{
            font-size:1.2rem;
        }
    /*****************************/
    
}