.page {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-form{
    width: 330px;
}

.container-form form{
    gap: 23px;
}

.container-form form .col-12{
    gap: 8px;
    display: flex;
    flex-direction: column;
    width: 330px !important;
}


.form-label{
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

p.form-label{
    font-weight: bold;
}

.form-control{
    display: flex;
    padding: 10px 15px 10px 15px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--radius-radius, 8px);
    border: 1px solid #522D6D;
    background: #FFF;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    
}

.btn-login {
    background-color: var(--primary);
    color: #fff;
    text-transform: capitalize;
    font-family: "Albert Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 8px;
    height: 41px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.btn-login:hover {
    background-color: var(--secondary);
    color: var(--primary);
}

.user-links a {
    color: var(--primary);
    font-size: 12px;
}

.user-links a:hover {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 1400px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {
    .page > div {
        flex-direction: column;
        width: 100% !important;
        gap: 60px !important;
    }

}

@media (max-width: 768px) {

}

@media (max-width: 576px) {

}