/* Apply a gradient background to the body */
body {
	/* background-image: linear-gradient(to right, #027789, #f94842); */
	margin: 0;
	font-family: 'Arial', sans-serif;
}

/* Main container for the login form */
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

/* Style for the main heading */
.title {
	color: white;
	font-size: 2.5rem;
	margin-bottom: 2rem;
}

/* Style for the form */
.form {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* Set a max-width or width for the form to contain the inputs */
	width: 90%;
	/* or a fixed width like 300px */
	max-width: 400px;
	/* Adjust as needed for your design */
	margin: auto;
	/* Centers the form in the .login-container */
}

/* Wrapper for input fields to control margins */
.input-wrapper {
	margin-bottom: 1rem;
}

/* Style for the form inputs */
input[type="email"],
input[type="password"] {
	width: 100%;
	/* Will take up 100% of .input-wrapper */
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	/* Add box-sizing to include padding in width calculation */
	box-sizing: border-box;
}

/* Style for the login button */
.login-button {
	background-color: #9c27b0;
	color: white;
	padding: 1rem 2rem;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.3s ease;
	/* Center the button */
	display: block;
	/* Makes the button a block element */
	margin: 1rem auto 0;
	/* Top margin 1rem, auto horizontal margins, no bottom margin */
	font-size: 1rem;
}

.login-button:hover {
	background-color: #ab47bc;
}

.login-button:disabled {
	background-color: #6e6e6e;
	/* Lighter shade for disabled state */
	color: #e0e0e0;
	/* Lighter text color for disabled state */
	cursor: not-allowed;
	/* Cursor to indicate button is not clickable */
	opacity: 0.7;
	/* Slightly transparent to show it's disabled */
}

/* Style for 'Remember me' checkbox */
.remember-me {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

.remember-me input {
	margin-right: 0.5rem;
}

.remember-me label {
	color: black;
}

.error-message {
	color: red;
	margin-top: 1rem;
}

.login-status-message {
	color: green;
	margin-top: 1rem;
}

.spinner {
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 2s linear infinite;
}