/* LOGIN PAGE FIX */
.login-page main{
  min-height:100vh;
	display:flex;
}

.login-page #admin_wrapper{
  margin-left:0;
  width:100%;
	min-height:100vh;
  display:flex;
  flex-direction:column;
}

.login-page #container{
	display:flex;
	flex:1;
}

.login-page #content{
  width:100%;
  display:flex;
	flex:1;
  align-items:center;
  justify-content:center;
  padding:40px 0;
  box-sizing:border-box;
}

.login-page #mobile_header,
.login-page #sidebar,
.login-page #sidebar_toggle,
.login-page #sidebar_overlay{
  display:none !important;
}

footer{
	width:100%;
}


/* LOGIN CONTENT */
#content{
	align-items:center;
	justify-content:center;
}

#login{
  width:min(1000px, 92%);
  min-height:500px;
  display:flex;
  box-shadow:0 20px 60px var(--box-shadow);
  margin:0;
}

#left{
	flex:1.1;
	padding:60px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	background:linear-gradient(160deg, var(--primary-color), var(--light-primary-color));
	color:var(--white);
	border-right:1px solid var(--dark-primary-color);
}

#right{
	flex:0 0 60%;
	padding:64px 48px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	background-color:var(--box-bg);
}

#left h1{
	margin:0 0 16px 0;
	font-size:42px;
}

#left img{
	width:min(320px, 100%);
	margin:0 auto 40px auto;
	display:block;
	background-color:var(--sidebar-border-color);
	border-radius:var(--box-radius);
}

#right h1{
	margin:0 0 10px 0;
	font-size:42px;
	color:var(--primary-color);
	line-height:1.1;
}

.login-subtitle{
	margin:0 0 28px 0;
	color:var(--light-text-color);
	font-size:16px;
}

.form-field{
	margin-bottom:18px;
}

.form-field label{
	display:block;
	margin-bottom:8px;
	font-size:16px;
	font-weight:600;
	color:var(--title-color);
}

.input-style,
.input-style-error{
	width:100%;
	padding:16px 18px;
}

.submit-btn{
	width:100%;
	margin-top:24px;
	padding:16px 20px;
	box-shadow:0 10px 25px rgba(92, 157, 58, 0.25);
}

.forgot-link{
	display:inline-block;
	margin-top:12px;
	color:var(--primary-color);
	text-decoration: none;
	font-size: 14px;
}

.forgot-link:hover{
	text-decoration: underline;
}


/* RESPONSIVE DESIGN */

@media (max-width: 900px) {
	#login{
		flex-direction:column;
		min-height:auto;
		margin-top:25px
	}

	#right{
		flex:none;
		width:auto;
		padding:36px 24px;
	}

	#left{
		flex-direction:row;
		width:auto;
		padding:20px;
		border-right:none;
		border-bottom:1px solid var(--dark-primary-color);
		align-items:center;
		justify-content:start;
		gap:30px;
	}

	#left img{
		width:100px;
		height:100px;
		flex-shrink:0;
		object-fit:contain;
		margin:0;
	}

	#left .left-text{
		flex:1;
	}

	#right h1{
		font-size:24px;
	}
}

@media screen and (max-width:1200px){
	#left h1{
			font-size:24px;
		}
}