.card-login{
    max-width: 400px;
    height: 450px;
    margin-top: 60px;
    margin-inline: auto;
    
    background-color: var(--main-bg-5);
    background-image: url('/static/svg2/login-card.svg');
    background-repeat: no-repeat;
    border-radius: 24px;
    
    background-position-y: bottom;
    /*background-color: red*/
}

.form-box{
    display: flex;
    flex-direction: column;
    width: 70%;
    margin-inline: auto;
    align-items: center;
}

.form-login{
    width: 90%;
}

.image-form{
    display: inline-block;
    margin: 10% 0 8% 0;
    text-align: center;
    
    img{
        max-width: 80%;
    }
}


.input-wrapper {
    position: relative;
    padding: 0 0 14px 0; /*top, right, bottom, and left*/
}

.login-input {
    box-sizing: border-box;
    background: var(--main-bg-4);
    padding: 0 0 0 40px;
    width: 100%;
    height: 46px;
    border: 1px solid var(--main-bg-6);
    border-radius: 10px;
    
    color: var(--primary-sea-5);
    font-family: 'Roboto-Medium';
    font-style: normal;
    font-weight: 100;
    font-size: 16px;
    line-height: 26px;

    outline: none;
}

.div-icon{
    position: absolute;
    top: 38%;
    left: 10px; /* Ajusta esto para controlar la distancia entre el icono y el borde izquierdo */
    transform: translateY(-50%);
    z-index: 1; /* Para que el icono esté por encima del input */
}

.btn-login {
    width: 100%;
    background: var(--gradiant-color-4);
    border-radius: 100px;
    border: 0px solid var(--gradiant-color-4);
    height: 44px;
    font-family: 'Roboto-Medium';
    font-size: 16px;
    color: var(--functional-white);
}


.btn-login:focus, .btn-login:hover{
    background: var(--gradiant-color-3);
}