/* Apply a background color to the entire page */
body {
    background-color: #08204F;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Style the white login container */
.login-container {
    background-color: #fff; /* White background */
    width: 300px; /* Adjust the width as needed */
    margin: 100px auto; /* Center the container vertically and horizontally */
    padding: 20px; /* Add padding to the container */
    border-radius: 8px; /* Add rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    text-align: center; /* Center the text within the container */
}

/* Style the form elements (input fields and button) */
form {
    text-align: left; /* Align the form labels and input fields to the left */
}

form .form-group {
    margin: 10px 0; /* Add some spacing between form elements */
}

/* Style labels for the input fields */
label {
    display: block; /* Display labels as block elements */
    text-align: left; /* Align labels to the left */
    font-weight: bold; /* Make labels bold for emphasis */
}

input[type="text"],
input[type="password"],
select {
    width: 90%;
    max-width: 100%; /* Add a maximum width to prevent overflow */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

select {
    height: 35px; /* Adjust the height for the select element */
}

button {
    width: 100%;
    padding: 10px;
    background-color: #08204F; /* Button background color */
    color: #fff; /* Text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Style the links in the login form */
a {
    text-decoration: none;
    color: #08204F; /* Link color */
}