/* General Form Styling */
.form {
max-width: 400px;
margin: 40px auto;
padding: 20px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}

/* Form Group */
.form-group {
margin-bottom: 15px;
}

/* Labels */
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 5px;
color: #333;
}

/* Input Fields */
.form-control {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
transition: all 0.3s ease-in-out;
}

.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
outline: none;
}

/* Error Message */
.has-error .form-control {
border-color: #ff4d4d;
}

.help-block {
color: #ff4d4d;
font-size: 14px;
margin-top: 5px;
}

/* Buttons */
.btn {
display: block;
width: 100%;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}

.btn-success {
background: #28a745;
color: white;
}

.btn-success:hover {
background: #218838;
}

/* Links */
.form p {
text-align: center;
font-size: 14px;
margin-top: 10px;
}

.form a {
color: #007bff;
text-decoration: none;
font-weight: 600;
}

.form a:hover {
text-decoration: underline;
}

/* "Remember Me" Checkbox */
label[for="autologin"] {
font-size: 14px;
color: #333;
cursor: pointer;
}

input[type="checkbox"] {
margin-left: 5px;
cursor: pointer;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
.form {
   max-width: 90%;
   padding: 15px;
}
}