.root {
	--bs-blue: #0d6efd;
	--bs-indigo: #6610f2;
	--bs-purple: #6f42c1;
	--bs-pink: #d63384;
	--bs-red: #dc3545;
	--bs-orange: #fd7e14;
	--bs-yellow: #ffc107;
	--bs-green: #198754;
	--bs-teal: #20c997;
	--bs-cyan: #0dcaf0;
	--bs-black: #000;
	--bs-white: #fff;
	--bs-gray: #6c757d;
	--bs-gray-dark: #343a40;
	--bs-gray-100: #f8f9fa;
	--bs-gray-200: #e9ecef;
	--bs-gray-300: #dee2e6;
	--bs-gray-400: #ced4da;
	--bs-gray-500: #adb5bd;
	--bs-gray-600: #6c757d;
	--bs-gray-700: #495057;
	--bs-gray-800: #343a40;
	--bs-gray-900: #212529;
	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
	--bs-primary-rgb: 13,110,253;
	--bs-secondary-rgb: 108,117,125;
	--bs-success-rgb: 25,135,84;
	--bs-info-rgb: 13,202,240;
	--bs-warning-rgb: 255,193,7;
	--bs-danger-rgb: 220,53,69;
	--bs-light-rgb: 248,249,250;
	--bs-dark-rgb: 33,37,41;
	--bs-white-rgb: 255,255,255;
	--bs-black-rgb: 0,0,0;
	--bs-body-color-rgb: 33,37,41;
	--bs-body-bg-rgb: 255,255,255;
	--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.5;
	--bs-body-color: #212529;
	--bs-body-bg: #fff;
	--bs-border-width: 1px;
	--bs-border-style: solid;
	--bs-border-color: #dee2e6;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
	--bs-border-radius: 0.375rem;
	--bs-border-radius-sm: 0.25rem;
	--bs-border-radius-lg: 0.5rem;
	--bs-border-radius-xl: 1rem;
	--bs-border-radius-2xl: 2rem;
	--bs-border-radius-pill: 50rem;
	--bs-link-color: #0d6efd;
	--bs-link-hover-color: #0a58ca;
	--bs-code-color: #d63384;
	--bs-highlight-bg: #fff3cd;
	--bs-btn-color:#fff;
}

body, html {
	height: 100%;
	margin: 0;
	font-family: 'Segoe UI', sans-serif;
	overflow-x: hidden;
}

.login-section {
	height: 100vh;
	display: flex;
}

/* Left Login Panel */
.login-form {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	animation: fadeIn 1.2s ease-in-out;
	padding: 2rem;
}

.login-card {
	width: 100%;
	max-width: 380px;
}

/* Right Background Image Panel */
.bg-panel {
	flex: 1;
	background: url('/Images/login_slide.jpg') no-repeat center center/cover;
	position: relative;
}

.bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}

.bg-panel h1 {
	position: absolute;
	bottom: 40px;
	left: 40px;
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
	animation: fadeInUp 1.5s ease-in-out;
}

/* Animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.btn-custom {
	background: linear-gradient(45deg, #53aa15, #465e44);
	border: none;
	transition: transform 0.3s;
	color: var(--bs-btn-color);
}
.submit-button {
	color: #fff; /* Black text color */
}


	.btn-custom:hover {
		transform: scale(1.05);
		color: #fff;
	}

.form-control {
	display: block;
	width: 100%;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #d0c8c8;
	background-clip: padding-box;
	border: 1px solid #a49b9b;
	-moz-appearance: none;
	appearance: none;
	border-radius: .375rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.input-group-text {
	background-color: #0d6efd; /* Bootstrap primary color */
	color: #fff; /* White icon */
	border: none;
}

.form-control {
	background-color: #eaf0ff; /* light filled background */
	border: none;
}

	.form-control:focus {
		box-shadow: none;
		border: 1px solid #0d6efd;
		background-color: #f0f6ff;
	}

.card {
	border-radius: 15px;
}
.input-group-text {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #53aa15;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	border-bottom-right-radius: 0.375rem;
}
.logo-circle {
	width: 80px;
	height: 80px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 36px;
	position: absolute;
	top: -82px;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.bg-panel {
		display: none;
	}

	.login-form {
		flex: 1 100%;
	}
}