body {
    background-color: #C1E1C1 !important;
}
/* Scoped styles (likely from a framework like Vue) - Syntax is correct */
.card[data-v-617a643c] {
    max-width: 420px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e8eef8;
}

label[data-v-617a643c] {
    display: block;
    margin-bottom: 8px;
}

input[data-v-617a643c] {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}

.actions[data-v-617a643c] {
    margin-top: 12px;
}

.error[data-v-617a643c] {
    color: #b91c1c;
    margin-top: 8px;
}

.center_login {
    /* Ensures it takes 100% of the screen but has some breathing room */
    width: 50%;
    padding: 15px; /* Add some margin/padding on the sides for small screens */
    box-sizing: border-box; /* Ensure padding doesn't push the width over 100% */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Remove the fixed height and z-index if not needed for positioning */
    /* height: 400px; */ 
    /* z-index: 9999; */
    /*border: 1px solid #ff0000;*/
    /*border-radius: 10px;*/
}

form {
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 100%;
}

/* Targets only input tags where the type attribute is "text" */
form input[type="text"] {
    background-color: #f9f9f9;
    border-radius: 10px;
    width: 100%;
    height:40px;
    font-size:14px !important;
    /* Add more specific styles */
} 
/* <-- THIS CLOSING BRACE WAS MISSING IN YOUR ORIGINAL CODE */

/* Targets only input tags where the type attribute is "password" */
form input[type="password"] {
    background-color: #f9f9f9;
    border-radius: 10px;
    width: 100%;
    height:40px;
    font-size:14px !important;
    /* Add more specific styles */
}

/* Targets only button tags with type="submit" inside a form */
form button[type="submit"] {
    float: right !important;
    /* Add more specific styles */
}

/*Styles for the login button scoped to it only*/
.beautiful-button {
    background-color: #007bff; /* Primary blue */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.beautiful-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

.beautiful-button:active {
    background-color: #004085; /* Even darker on active */
    transform: translateY(0); /* Reset lift on active */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#loginbox {
    margin-top: 50px;
    /* Allow it to take up to 100% of the screen width */
    width: 100%; 
    /* Set a maximum size for desktop, so it doesn't get too wide */
    max-width: 500px; 
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Note: Removed duplicate margin-left/right auto definitions */
.image-container {
  width: 80%; /* Set your desired container width */
  height: 50%; /* Set your desired container height */
  overflow: hidden; /* Ensures any cropped parts of the image are hidden */
  margin-left:auto !important;
   margin-right:auto !important;
   z-index:-1 !important;
}