/* --- Style moved from inline <style> block --- */
@media (max-width: 400px) {
    .wrapper.login-background { /* Be more specific if needed */
        /* Combined background styles */
        background-image: none !important;
    }

    .login-container {
        width: 100%;
        border-radius: 0;
        padding: 1rem; /* Adjust as needed */
    }
}

/* Specific login page label styling */
.login-container label { /* Target labels within the login container */
    text-align: left;
    display: block; /* Ensure label takes full width */
    padding-left: 5px; /* Your original padding */
    margin-bottom: 0.25rem; /* Add some space below label */
}

/* --- Style moved from inline style attribute --- */
/* Add this class to your main wrapper div in the template */
.login-background {
  /* Adjust path relative to the CSS file location */
  background-image: url("../images/login/bluegum_forest.4f30223c3885.jpg");
  background-size: cover;
  background-position: right;
  /* Base styles from the div */
  height: 100vh;
  overflow: hidden;
  font-family: 'Poppins', sans-serif; /* Assuming Poppins font stack */
  color: #2E2B41;
  text-align: center;
}
.login-container > div {
  overflow-y: auto; /* Allows scrolling only within the form container if needed */
  max-height: calc(100vh - 2rem); /* Adjust the value based on your padding */
}

.password-field-container {
    position: relative;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: #374151;
}

.asteriskField {
  color: red;
}