/* General Styling */
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000 !important; /* Black background */
    font-family: Arial, sans-serif; /* Replace with Boehringer's font if available */
}

/* Card Styling */
.card {
    background-color: #ffffff; /* White card background */
    padding: 2rem 3rem;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Adjust based on screen size */
    max-width: 420px; /* Limit the card width to match the reference page */
    aspect-ratio: 1; /* Remove 16:9 ratio to let it be a square-like layout */
    min-height: 350px; /* Set a reasonable height */
}

/* Logo Styling */
.logo img {
    height: 52px;
    /*max-width: 120px; !* Slightly smaller logo size *!*/
    margin-bottom: 1.5rem;
}

/* Form and Text Styling */
.form-signin h1 {
    color: #08312A; /* Boehringer green tone */
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.form-signin p {
    color: #666666; /* Subdued text color */
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-signin .btn {
    background-color: #08312A; /* Boehringer green tone */
    border: none;
    color: #ffffff;
    padding: 1rem 2rem; /* Make button larger for a more prominent call-to-action */
    font-size: 1.125rem; /* Slightly larger font size */
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.form-signin .btn:hover {
    background-color: #064428; /* Slightly darker green on hover */
}

/* Footer Text */
.form-signin .text-muted {
    color: #cccccc;
    font-size: 0.875rem; /* Slightly smaller font size for footer text */
    text-align: center;
}

/* Make the form responsive */
@media (max-width: 500px) {
    .card {
        padding: 1.5rem 2rem;
    }

    .form-signin .btn {
        padding: 0.75rem 1.5rem;
    }

    .logo img {
        max-width: 100px;
    }
}