body {
    font-family: 'Arial', sans-serif;
    background-color: #000d38;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

h2 {
    margin-bottom: 30px;
    font-size: 24px;
    color: #333333; /* Dark grey color for the heading text to stand out on white background */
}

.login-container {
    background-color: #ffffff; /* Keep white for clarity */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Slightly darker shadow for contrast */
    text-align: center;
    width: 400px;
    margin: auto;
}

.login-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #b0c4de; /* Light steel blue border */
    background-color: #e6f0fa; /* Very light blue background */
    font-size: 18px;
    color: #000000; /* Black text for better readability */
    resize: vertical; /* Allow resizing vertically only */
}

.login-form textarea:focus {
    border-color: #9fb6cd; /* Softer blue for focused border */
    outline: none;
    box-shadow: 0 0 0 2px rgba(159, 182, 205, 0.5); /* Subtle blue glow */
}

.login-form input,
.login-form button {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #b0c4de; /* Light steel blue border for subtle contrast */
    font-size: 18px;
    color: #000000; /* Black text for better readability on very light backgrounds */
}

.login-form input {
    background-color: #e6f0fa; /* Very light shade of blue for inputs */
}

.login-form input:hover, .login-form button:hover {
    background-color: #cfd9e7; /* Slightly darker shade of blue for hover effect on inputs and buttons */
}

.login-form input:focus {
    border-color: #9fb6cd; /* Soft blue border when the input is focused */
    outline: none;
    box-shadow: 0 0 0 2px rgba(159, 182, 205, 0.5); /* Subtle blue glow around the input when focused */
}

.login-form button {
    background-color: #00bfff; /* Sky blue for the button, as specified */
    color: white; /* Maintain white text on buttons for clarity and visibility */
    border: none;
    margin-bottom: 0;
    cursor: pointer;
    display: block;
}

.login-form button:hover {
    background-color: #0095cc; /* A deeper shade of blue for rollover effect */
}

.links-container {
    margin-top: 30px;
}

.link {
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
    padding: 5px;
}

.link:hover {
    text-decoration: underline; /* Adds underline on hover for better user experience */
    color: #0056b3; /* A slightly darker blue for hover effect */
}

.link:not(:last-child)::after {
    content: '|';
    color: #007bff;
    padding-left: 5px;
}

.separator-container {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.line {
    flex-grow: 1;
    height: 1px;
    background-color: #d3d3d3;
    border: none;
    margin: 0 10px;
}

.or-text {
    padding: 0 10px;
    color: #000; /* Or any color that suits the design */
    font-size: 18px; /* Or the size that fits well in the design */
    white-space: nowrap; /* Prevents the 'or' from wrapping to a new line */
    font-weight: bold; /* Makes the text bold */
}

.register-button {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #00bfff; /* Deep Sky Blue */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* Smooth transition for the hover effect */
}

.register-button:hover {
    background-color: #0095cc; /* A deeper shade of blue for rollover effect */
}

.message {
    width: 100%; /* Full width */
    box-sizing: border-box; /* Padding and border are included in the width */
    padding: 10px;
    margin-bottom: 10px; /* Spacing below the message box */
    border-radius: 5px;
    text-align: center;
    display: block; /* Display as block element */
    /* The rest of your styles for background color, border, etc. */
}

.error-message {
    background-color: #ffdddd; /* Light red */
    border: 1px solid #e67e22; /* Orange border */
    color: #000; /* Darker shade of red for text */
}

.success-message {
    background-color: #ddffdd; /* Light green */
    border: 1px solid #2ecc71; /* Green border */
    color: #000; /* Darker shade of green for text */
}

.captcha-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5; /* Light grey background */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px; /* Adds some space below the container */
}

.captcha-label {
    font-size: 16px;
    color: #333; /* Dark grey color for the text */
    margin-right: 10px; /* Adds some space between the label and the CAPTCHA text */
}

.captcha-text {
    font-size: 18px;
    font-weight: bold;
    color: #007bff; /* Bootstrap primary blue for the CAPTCHA text */
    margin-right: 10px; /* Adds some space between the CAPTCHA text and the input field */
    padding: 5px 10px;
    background-color: #fff; /* White background for the CAPTCHA text */
    border: 1px solid #ced4da; /* Light grey border similar to Bootstrap's form inputs */
    border-radius: 4px;
}

#captcha {
    flex-grow: 1; /* Allows the input field to take up the remaining space */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ced4da; /* Light grey border */
    font-size: 16px;
}

/* Optional: Adjust the focus state of the input for better visibility */
#captcha:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.forgot-password-container {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 10px;	
}

.forgot-password-link {
    color: #007bff; /* Nice blue color */
    text-decoration: none; /* Removes the underline */
    font-size: 18px; /* Adjusts the font size */
}

.forgot-password-link:hover {
    text-decoration: underline; /* Adds underline on hover for better user experience */
    color: #0056b3; /* A slightly darker blue for hover effect */
}

.select-style {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #dcded1; /* Muted green background for inputs to complement the body background */
    border-radius: 5px;
    border: 1px solid #8c8c47; /* Muted green border */
    font-size: 18px;
    color: #3b3b3b; /* Dark grey for input text for better visibility */
    appearance: none; /* Removes default system styling */
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22%233b3b3b%22%20d%3D%22M6.6%201.4L11.2%206%20H2z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 12px;
}

.select-style:hover {
    background-color: #e2e4c3; /* Lighter shade for hover */
}

.select-style:focus {
    border-color: #5a5c37;
    outline: none;
    box-shadow: 0 0 0 2px rgba(90, 92, 55, 0.5);
}

.order-details {
    text-align: left; /* Align all content to the left */
}

.order-details label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.order-details p {
    margin: 0 0 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-align: left; /* Ensure text inside the <p> is left-aligned */
    line-height: 1.6; /* Improve readability by increasing line height */
}

/* Media query for mobile screens */
@media (max-width: 768px) {
    body {
        padding: 0 20px;
        overflow-y: auto;
    }

    .login-container {
        max-width: 90%;
        margin: 20px auto;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}