/**************************************************************/
/* CSS for the login page */
/**************************************************************/
.login-modal {
    border-radius: 0.4rem !important;
    box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2) !important;
}

.login-text-input {
    border: none !important;
    background-color: hsl(234, 30%, 45%);
    color: var(--white) !important;
}

.login-text-input:hover,
.login-text-input:focus {
    background-color: hsl(234, 30%, 39%) !important;
}

.login-input {
    border-radius: 0.4rem !important;
    box-shadow: 0 8px 12px 0 hsla(0, 0%, 0%, 0.2);
    transition: all 0.3s ease-in-out;
}

.login-input:hover,
.login-input:focus {
    box-shadow: 0 12px 16px 0 hsla(0, 0%, 0%, 0.4);
}

#error-field {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #dc3545;
    border-radius: 0.4rem;
    text-align: center;
    margin-bottom: 2rem;
}

#error-field:empty {
    display: none;
}

.loginError {
    color: var(--red);
    text-align: center;
    margin-bottom: 2rem;
}

.flex-container {
    display: flex;
    gap: 10px;
    /* Space between totp_container and the select element */
    align-items: center;
    /* Vertically align items */
}

.full-width {
    width: 100%;
}

#totp_container {
    flex: 1;
    /* Allows the TOTP input to take up more space */
}

#server_type {
    flex: 0;
    /* Keeps the select element compact */
    width: auto;
    /* Ensures the width doesn't stretch unnecessarily */
}

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