/* Remove any max-width or constraints on the body */
.container, .container-fluid {
    width: 100% !important; /* Remove width restriction for containers */
    padding-left: 0;
    padding-right: 0;
}
/* Style for the login form */
.login-form {
    padding: 2vh;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* or set a specific width */
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    width: 100%;
    max-width: 400px; /* You can adjust the max-width as needed */
    text-align: center;
}

/* Style to align labels and inputs on the same line */
.form-group {
    margin-bottom: 1.5rem; /* Space between form fields */
    display: flex; /* Flexbox to align elements on the same line */
    flex-direction: row; /* Horizontal alignment (same line) */
    align-items: center; /* Vertical alignment of elements */
    justify-content: flex-start; /* Ensure both label and input start from the left */
}

.login-form h2 {
    font-size: clamp(1rem, 1.2vw, 3.5rem);
    font-family: "Mona Sans", "MonaSans", sans-serif;
    font-weight: 400;
    color: var(--color-text);
    margin-top: 1vh;
    margin-bottom: 4vh;
    line-height: 1.2;
    padding: 0; /* Reset padding */
}

/* Uniform style for labels */
.form-group label {
    font-size: clamp(0.8rem, 0.9vw, 1.3rem); /* Font size of the labels */
    font-family: "Mona Sans", "MonaSans", sans-serif;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.2;
    margin-right: 10px; /* Space between label and input */
    white-space: nowrap; /* Prevents label from wrapping to the next line */
    width: 100px; /* Allow label width to adjust based on content */
    text-align: right;
}

/* Style for input fields */
.form-group .form-control {
    flex: 1; /* Input takes up all remaining space */
    padding: 7px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 0; /* Remove bottom margin */
    max-width: 200px; /* Limit the width of the input fields */
}
/* Button styles */
.btn-primary {
    background-color: #ffffff; /* background color */
    font-size: clamp(0.8rem, 0.9vw, 1.3rem); /* Font size of the labels */
    font-family: "Mona Sans", "MonaSans", sans-serif;
    font-weight: 400;
    color: var(--color-text);
    padding: 5px; /* Internal padding for the button */
    border-radius: 3px; /* Rounded corners for the button */
    width: 100px; /* Let the button's width adjust based on content */
    text-align: center;
    border: 1px solid #ccc;
}

.btn-primary:hover {
    background-color: #ffffff;
    border: 1px solid var(--color-text);
}