/*body {
	font-family: Arial, sans-serif;
	background-color: #f2f2f2;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.login-container {
	background-color: white;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 300px;
}

h2 {
	text-align: center;
	margin-bottom: 20px;
}

.form-group {
	margin-bottom: 15px;
}

label {
	display: block;
	margin-bottom: 5px;
}

input[type="text"], input[type="password"] {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

img {
	display: block;
	margin-bottom: 10px;
	width: 100%;
	height: auto;
}

.btn {
	width: 100%;
	padding: 10px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

	.btn:hover {
		background-color: #45a049;
	}
*/
.text-danger {
	color: red;
	font-size: 20px;
}
.btn {
	font-family: "Lucida Sans Unicode", sans-serif;
}
body {
	font-family: 'Trebuchet MS', sans-serif; /* Apply Trebuchet MS to the whole page */
}
h2 {
	font-family: 'Trebuchet MS', sans-serif;
	text-align: center;
	margin-bottom: 20px;
}
.custom-form-container {
	width: 30%; /* Limit form width to 40% */
	margin: 0 auto; /* Center the form */
	padding: 20px; /* Add padding inside the form */
	/*border: 1px solid #ccc;*/ /* Add border */
	border: 2px solid var(--bs-primary);
	border-radius: 10px; /* Add rounded corners */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add slight shadow */
	/*background-color: #f9f9f9;*/ /* Light background color */
	background-color: whitesmoke;
}

/* Screen width greater than 1024px (Desktop screens) */
@media (min-width: 1025px) {
	.custom-form-container {
		width: 30%; /* Set width to 30% for screens larger than 1024px */
	}
}

/* Screen width between 768px and 1024px (Tablet screens) */
@media (min-width: 768px) and (max-width: 1024px) {
	.custom-form-container {
		width: 50%; /* Set width to 50% for screens between 768px and 1024px */
	}
}

/* Screen width less than 768px (Mobile screens) */
@media (max-width: 767px) {
	.custom-form-container {
		width: 90%; /* Set width to 90% for screens smaller than 768px */
	}
}