/* login.css */
	body {
		background-color: #fff;
		margin: 0;
		letter-spacing: 0.3579px;
		font-size:14px;
	}

	html, body {
		height: 100%;
		margin: 0;
		display: flex;
		flex-direction: column;
	}

	.container {
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	label {
		font-size: 0.85rem !important;
		letter-spacing: 0.3579px !important;
	}

	input, .alert {
		font-size: 14px !important;
		font-size: 0.85rem !important;
		font-weight:300 !important;
		letter-spacing: 0.3579px !important;
	}

	.card {
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border: none;
		overflow: hidden;
	}

	.card-header {
		background-color: #2f3640;
		color: #fff;
		border-bottom: none;
		border-radius: 10px 10px 0 0;
		padding: 1.5rem;
		font-family: 'Poppins', 'Kanit', sans-serif;
	}

	.card-footer {
		background-color: #f5f5f5;
		border-top: none;
		border-radius: 0 0 10px 10px;
		padding: 1rem;
	}

	div.card-footer.text-center {
		font-size: 12px;
	}

	.btn-primary {
		background-color: #ff6600;
		border: none;
		transition: background-color 0.3s;
	}

	.btn-primary:hover {
		background-color: #e65c00;
	}

	.copyright {
		font-size: 11px;
		color: #666;
		width:100%;
		text-align: center;
	}
	
	footer {
		background-color: #fff;
		color: #333;
		padding: 20px;
		position: relative;
		width: 100%;
	}

	.footer-container {
		display: flex;
		justify-content: space-between;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 15px;
		align-items: center;
	}

	.footer-col {
		padding: 0 10px;
		text-align: center;
	}	

	@media (max-width: 767.98px) {
		.card {
			margin: 0 10px;
		}
	}

	@media (max-width: 768px) {
		.footer-container {
			flex-direction: column;
		}

		.footer-col {
			margin-bottom: 15px;
		}
		#thebottom {
			display: block !important;
			text-align: center;
		}
	}