/* stylesheet for pages to login and logout */

body, html {
    height: 100%; 
    margin: 0;
    background: linear-gradient(90deg, #0e181b 0%, #5c99ae 35%, #d6e5eb 100%);
    font-family: "Montserrat", sans-serif;
}
.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.btn-primary {
    border: none;
    background: #5c99ae;
    transition: all 0.5s ease; /* Smooth transition for hover effect */
}

.btn-primary:hover {
    background: #7fb6c2;
}

@media (max-width: 200rem) {
    .card {
        width: 90%; /* Smaller card width on smaller screens */
    }
}
/* Align checkbox with label */


.form-check-input {
    position: relative;
    margin-top: 0;
    margin-right: .5rem; /* Ensure the checkbox is next to the label text */
    margin-left: 0; /* Override Bootstrap's default margin */

}


#div_id_remember {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */       
}

#id_password_helptext {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; 
}

#div_id_login {
    padding-bottom: 0.5rem;
}

.card-body {
    position: relative;
}
.card-body img.top-left {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

.loading {
    animation: loadingAnimation 1.5s infinite;
}

@keyframes loadingAnimation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}