: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 */
    .clas_alert{
        margin-top:6%;
        width: 96%;
        margin-left: 2%;
        height: 3rem;
        background: var(--main-color_f);
        display: flex;
        justify-content: right;
        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 i {
        font-size:20px;    
        margin-right: 5px;
    }

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




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

.modal1 .modal-dialog .modal-content,
.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%;
}    

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

.contenedor_modal .tit_cua{
    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: 48% 4% 48%;
    align-items: center;
    justify-items: center;
    min-height: 360px;
}

.contenedor_modal .cuerpo_cuadro .cont_cuerpo{
    border: 2px solid var(--main-color);
    width:100%;
    height: 100%;
    padding: 5px;
}

.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;

}

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



.box_cb{
    position: absolute;
    left:10%;
    top:50%;
    transform: translate(-5%,-40%);
    width: 90% !important;
    padding: 0.5rem;
    border: 2px solid var(--main-color);
    border-radius: 8px ;  
    height:480px;
    min-height:480px  
}

.box_cb .box_cppal1{
    color: var(--main-color);   
    padding: 0;
    margin-left:2%;
    display: grid;
    grid-template-columns: 50% 50%;
    
}

.box_cb .box_cppal1_a{
    width: 50%;
    margin-left:25%;
    display: flex;
    align-items: center;
    justify-items: center;
    
}

.box_cb .box_cppal1_a .box_cppal1_ab{
    display: grid;
    grid-template-columns: 50% 50%;
    height: 5rem;
    width: 100%;
    
}

.box_cb .box_cppal1_a .box_cppal1_ab .formato_hora{
    height: 6rem;
    width: 100%;
    margin-left: 10px;
    display: block;
    justify-items: center;
    align-items: center;
    border: 2px solid var(--main-color);
    border-radius: 10px;
    color: var(--black);
    font-size: 42px;
    font-weight: 700;
}

.box_cb .box_cppal1_a .box_cppal1_ab .formato_hora label {
    width: 80%;
    text-align: center;
    display: block;
    justify-items: center;
    align-items: center;
    border: 1px solid #fff;
    color: var(--main-color);
    background-color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
}

.box_cb .box_cppal1_a .box_cppal1_ab .formato_hora select {
    width: 100%;
    text-align: center;
    border: none;
    letter-spacing: .2px;
}


.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{
    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{
    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{
    font-size: 14px;
    font-weight: normal;
    letter-spacing: .2px;
    line-height: 1.5;
    margin-bottom: 25px;
    text-align: center;    
}


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


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

.box_cb .box_cppal1 .inputbox .fa{
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-right:8px;
    color:var(--black);    
}

.box_cb .box_cppal1 .inputbox .bx{
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-right:8px;
    color:var(--black);    
}

.box_cb .box_cppal1 .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_cb .box_cppal1 .inputbox select{
    width: 96%;
    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{
    position: absolute;
    top: 0px;
    left:8%;
    padding: 0.425rem 0;
    font-size: 1.6rem;
    color: var(--black);
    pointer-events: none;
    transition: 0.3s;      
}

.box_cb 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 {    
    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{
    top:-0.8rem;
    color:var(--main-color);
    font-size: 1rem;
    background-color: #fff;
    height: 20px;
    padding: 0 5px;
    margin-left:20px;
}

.box_cb .box_cppal1 .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_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{
    font-family:  var(fuente_sec);
    font-size: 15px;
    font-weight: 550;
}


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





@media (max-width:768px){
    .columns{
        grid-template-columns: repeat(2,1fr);
        
    }
}

@media (max-width:480px){
    
    .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;            
        }

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

        .box_img img{
            display: none;
        
        }

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


        /* box */

        .box_cb{
            left:0.2rem;
            top:45%;
            transform: translate(0.6%,-50%);
            width: 25rem!important;
            height:700px;min-height:700px
        }
        
        .box_cb h2{
            font-size: 32px;
        }
    
        .box_cb h3{
            font-size: 18px;
        }
        

        .box_cb .box_cppal1{
            width: 100%;
            color: var(--main-color);   
            
            display: grid;
            grid-template-columns: 100%;
        }

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

            
        .box_cb .box_cppal1 .inputbox select,
        .box_cb .box_cppal1 .inputbox input{
            text-align: center;
            font-size:1.1rem;
            
        }
    
        .box_cb 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: 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{
            margin-left:10px;
            
        }
        
        .box_cb .inputbox i{
            display: block;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            margin-right:8px;
        }

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

        .box_cb .box_cppal1_a{
            width: 60%;
            margin-left:20%;            
        }

        .box_cb .box_cppal1_a .box_cppal1_ab .formato_hora{
            width: 100%;
            margin-left: 5px;
            font-size: 32px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        
        .box_cb .box_cppal1_a .box_cppal1_ab .formato_hora label {
            width: 70%;
            letter-spacing: 1px;
        }
            
}