:root{
    --bg-color-page: rgb(255,255,255,.5);
    --bg-buton:rgb(26,37,55);
    --bg-buton-hover:rgb(129, 153, 150);
    --blackdark:rgb(33,37,41);
    --gris:rgb(255,255,255,.5);
    --blanco:rgb(255,255,255);
    --dark: #16191C;
    --dark-x: #1E2126; 
    --negro:rgb(0, 0, 0, 1);
    --color2:rgb(204,204,204);
     --azulfuerte:rgb(33, 104, 161);
     --verdefuerte:rgb(41, 116, 64);
    

    font-size: 16px;
    --size-sm: 0.5rem;
    --size-m: 1rem;
    --size-g: 1.5rem;
    --size-xg: 2rem;
    --size-xxg: 4.5rem;
    
    --login-fondo:rgb(142,190,210)



}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
    
}

body {
    font-family: 'spartan', sans-serif;
    margin: 0;
       
    /* font-weight: 300; */
    color: var(--light);

    background-size:cover;
    background-attachment:fixed;
    background-position:center ;
}
.fondo-blue{ background-color: var(--azulfuerte) !important; }
.text-blue { color: var(--azulfuerte); }
.text-light { color: var(--blanco) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-dark-y { background-color: var(--dark-x) !important; }
.negro_total { background-color: var(--negro) !important; }



.form-control {
    min-height: 3.125rem;
    line-height: initial;
}

.form-control:focus {
    background-color: var(--dark-x);
    outline: none;
}

.img-1 {
    background-image: url('../img/milogo.jpg');
    background-size: cover;
    background-position: center;
    background-color: var(--dark-x);
   
}

.img-2 {
    background-image: url('../img/Fondo-negro-tasa-min.jpg');
    background-size: cover;
    background-position: center;
    
}

.img-3 {
    background-image: url('../img/boli.jpg');
    background-size: cover;
    background-position: center;
    
}



h1 {

    text-align: center;
    font-size: var(--size-g);

}





/* SE APLICA PARA EL ID DEFINIDO */
#logo-main-container{

font-size: 50;
text-align: center;
align-items: center;

}

#login-boton:hover{
background: var(--verdefuerte) !important;

}
#todo{
    margin-top: 30%;
}

#logo-container{
    text-align: center;
    opacity: .1;
}
#logo-container img{
    width: 300px;
    
   
}


#title-container h2{
    font-size: var(--size-xxg);
    text-align: center;
    color:rgb(19, 10, 95)
}


#separador-container{
  text-align: center;

}
#separador-container span{
    color:  rgb(0, 0, 0,.3);
    font-size:var(--size-m);
    font-weight: bolder;
    display: inline-block ;
    vertical-align: middle;
    padding: 0 10px;

}


/* #login-formulario{
     background: #212529; 
    background: var(--dark);

    opacity: 1;
    box-shadow: 6px 6px 6px 6px rgba(255, 255, 225, 0.1);
     margin: 10px auto; 
    font-size:var(--size-m);
    padding: 0px;
    align-items: center;
    width: 20%;

    
     border: solid 1px rgb(255,255,255,0.5); 
    border-radius: 15px
} */


#settings{
    cursor:pointer
}
 

/* SE APLICA A CADA CLASE CREADA ----------------------*/


.input-contenedor{
    margin-bottom: 10px;
    border: 1px solid rgb(255, 255, 255);
    background: rgb(255, 255, 255);
    align-items: left;
    text-align: left;
} 

.button{
    border: none;
    width: 100%;
    color: white;
    font-size: 20px;
    background:  rgb(71, 164, 240);
    padding: 15px 20px;
    border-radius: 5px;
    cursor: pointer;
   
}
.button:hover{
    background: cadetblue;
}

.line{
    height: 2px;
    display: inline-block ;
    background-color: rgb(0, 0, 0,.3);
    width: 50px;
    vertical-align: middle;
}

.contenedor-login{
    width: 100%;
    padding: 50px;
    opacity: 1
 
        
        
    }  
    

        /* APLICAREMOS PARA EL POP UP */
        .overlay{
            visibility: hidden;
            
        }
        .overlay.active {
            /* //display: none; */
            
            background: rgba(24, 23, 23, 0.5);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            justify-content: center;
            display:flex;
            /* display: block; */
            visibility: visible;
            z-index: 1050;
            /* box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 1.0); */
            
        }
        
        .popup_mio {
            background: var(--gris);
            box-shadow: 0px 0px 5px 0px var(--blackdark);
            border-radius: 10px;
            font-family: 'Arial', sans-serif;
            padding: 10px;
            text-align: center;
            width: 40%;
            opacity: 1;
            
            
            
            
        }

         #cerrar{
            right: 100%;
            height: 20px;
            display:block;
            align-items: right;
            text-align:right;
            color:var(--blanco)
        

        }
    
         .popup_mio .btn-cerrar-popup {
            font-size: var(--size-g);
            line-height: var(--size-g);
            /* display: block; */
            text-align: right;
            color: var(--blackdark);
            position: right;
            cursor: pointer
            
        }
         #btn-cerrar-popup:hover {
            color: rgb(255, 0, 0);
        
        }
        

        .contenedor_textos{
            width:100% ;



        }
        .popup_mio h3 {
            font-size: var(--size-xg);
            font-weight:50%;
            margin-bottom: 20px;
            color: var(--blackdark);
        }

        .popup_mio h4 {
            font-size: var(--size-g);
            font-weight: 50%;
            margin-bottom: 20px;
            color: var(--blackdark);
        }

      
        .popup_mio .input-contenedor{
            margin-bottom: 10px;
            border: none;
            align-items: left;
            text-align: left;
        } 
    
        
        
         .popup_mio form .btn-submit {
        
            border: none;
            height: 30px;
            margin-bottom: 5px;
            width: 30%;
            font-size: 15px;
            background:  rgb(71, 164, 240);
            border-radius: 10px;
            cursor: pointer;
            
        } 
        
        .popup_mio form .btn-submit:hover {
            background: rgba(38, 161, 93, 0.9);
        }
        
        .icon{

            min-width: auto;
            text-align: left;
            color: var(--azulfuerte)
        }
        .Registro{
            display: none;
    
            padding: 10px;
            
            

        }


        .btn_cliente{
            padding-left: auto;

        }
        
        

    /* SE APLICA PARA EL TIPO DE ELEMENTO-------------------------------------------------------------- */
     input,select{
    font-size: 16px;
    width: 90%;
    padding: 5px;
    height: auto;
    border: none;
     }