nav {
    background-color: #039be5 !important;
}

/* Center the login form vertically and horizontally */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Full viewport height */
    margin: 0;  /* Ensure no margin issues */
    margin-top: -30px;
    width: 100%;  /* Ensure it takes the full width */
}

/* Style the login box */
.login-box {
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    width: 400px;  /* Set a fixed width */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);  /* Soft shadow */
}

/* Add a little spacing to the form elements */
.input-field {
    margin-bottom: 20px;
}

/* Align the login button to the center */
.login-box .btn {
    width: 100%;
    background-color: #26a69a; /* Teal color */
}

.login-box .btn:hover {
    background-color: #2bbbad; /* Slightly darker teal on hover */
}

h4.center-align {
    margin-bottom: 20px;
}

/* Ensure body and html have no margin/padding */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;  /* Make sure the height covers the full viewport */
}

/* Optional extra styling for labels and inputs */
.input-field label {
    font-size: 14px;
    color: #666;
}