body {
    background-color: #0046bf; /* Set the background color to blue */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    color: #fff; /* Optional: Set text color to white for better contrast */
}

.login-logo {
    padding: .10rem; /* Padding of the login logo */
    background-color: #0046bf; /* Background color for the login area */
}

.login-box-msg {
    color: #000000; /* Set the text color*/
    font-weight: bold; /* Make the text bold */
}

button.btn.btn-outline-primary.btn-block, button.btn.btn-primary.btn-block {
    background-color: #0046bf !important; /* Background color */
    border-color: #0046bf !important; /* Border color */
    color: #fff200 !important; /* Text color */
    font-weight: bold; /* Make the text bold */
    display: block; /* To make the button occupy the full available width */
    width: 100%; /* Adjust the width to 100% */
    padding: 8px 10px; /* Adjust the padding as needed */
    border: none; /* Remove the button border */
    cursor: pointer; /* Change the cursor when hovering over the button */
}

button.btn.btn-outline-primary.btn-block:hover, button.btn.btn-primary.btn-block:hover {
    background-color: #025dfc !important; /* Change the color when hovering over the button */
}

.form-control {
    width: 300px;
    height: 38px !important;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: .375rem .75rem !important;
}

#togglePasswordBtn {
    width: 50px;
    height: 38px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#togglePasswordBtn:hover, #toggleConfirmPasswordBtn:hover, #toggleCodeBtn:hover {
    background-color: #5c5f60 !important;
}

#togglePasswordBtn, #toggleConfirmPasswordBtn, #toggleCodeBtn:hover,
.input-group-text {
    width: 50px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* Makes it clear that it's clickable */
}

.input-group {
    display: flex;
    align-items: center;
}

.form-control::placeholder {
    font-size: 16px;
    color: #888;
    opacity: 1;
}

.error-message {
    margin-top: 0px; /* Minimal space between the field and the error message */
    margin-bottom: 12px; /* Extra space to separate the message from the next field */
    padding: 4px 8px; /* Internal spacing to prevent the text from touching the border */
    background-color: #e57373; /* Lighter red that complements the #426B96 tone */
    color: #ffffff; /* White text for contrast */
    border: 1px solid #f5c6cb !important; /* Subtle border matching the background */
    border-radius: 4px; /* Rounded edges for a modern appearance */
    font-size: 0.875rem; /* Compact but readable text size */
}

.error-message p {
    margin: 0; /* Remove default margins in paragraph tags */
    line-height: 1.4; /* Improves readability for multi-line messages */
}

select option[disabled] {
    color: #999 !important;
    font-style: italic;
}