:root {
  --primary-color: #3A47C4;
  --text-color: #3A47C4;
  --border-box-color: #646A88;
  --font-family:sans-serif;
  --second-color: #646A88;
}
.contenedor-login{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    height: auto;
}
.logo img{
    width:300px;
    height:200px;
    margin-bottom: 60px;
}
.formulario-ingreso{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    height: auto;
}
.div-usuario{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.div-contrasena{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.txt-usuario{
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--text-color);
}
.inp-usuario{
    width: 400px;
    height: 35px;
    border-radius: 10px;
    border-width: 1px;
}
.inp-usuario:focus{
    border: 1px solid var(--border-box-color);
    outline: none;
}
.txt-contrasena{
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 10px;
    color: var(--text-color);

}
.inp-contrasena{
    width: 400px;
    height: 35px; 
    border-radius: 10px;
    border-width: 1px;
}    
.inp-contrasena:focus{
    border: 1px solid var(--border-box-color);
    outline: none;
}
.div-ingresar{
    display: flex;
    width: 100%;       
}
.btn-ingresar{
    margin-top: 20px;
    width: 100px;
    height: 35px;
    color: white;
    background-color: var(--primary-color);
    border-radius: 10px;
    border-width: 1px;
}