/* ! --- LOGIN & REGISTER PAGE  --- */

body {
	width: 100%;
	height: 100vh;
	font-family: "Poppins", sans-serif;
	overflow: hidden;
}

main {
	padding: 0;
}

.login_page {
	background: #202124;
}

.register_page {
	background: #e8f0fe;
}

.loginBg,
.registerBg {
	overflow: hidden;
	width: 35vw;
	position: relative;
}

.loginBg {
	background: url(../../assets/imgs/backgrounds/bg_login.jpg) no-repeat;
	background-size: cover;
	padding: 1rem 0;
}

.registerBg {
	background: url(../../assets/imgs/backgrounds/bg_register.jpg) no-repeat;
	background-size: cover;
}

.main_content {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper {
	width: 60rem;
}

.wrap_login,
.wrap_register {
	display: flex;
	justify-content: center;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 1px 1px 10px #535556;
}

.wrap_login {
	background: #e8f0fe;
}

.wrap_register {
	background: #202124;
}

.login_form,
.register_form {
	padding: 3.5rem 2rem;
	flex: 0 0 auto;
	width: 65%;
	position: relative;
}

h1 {
	color: rgb(44, 44, 44);
	padding-bottom: 1rem;
}

.titleRegister {
	color: #b46731;
}

#line {
	height: 2px;
	width: 90px;
	background: #b46731;
	margin: 15px auto;
}

.label {
	margin-bottom: 0;
	font-size: 0.9rem;
	color: #5d3316;
}

.input_group {
	padding: 0 1rem;
	margin-bottom: 2.3rem;
	border: none;
	outline: none;
	border-bottom: 1px solid #9a9393;
	border-radius: 5px;
	display: block;
	width: 100%;
	height: 28px;
	background: none;
	color: #666;
	font-family: "Poppins", sans-serif;
	font-size: 13px;
}

.register_form .input_group {
	margin-bottom: 1rem;
}

.input_group:focus {
	background: transparent;
	border-bottom: 2px solid #b46731;
	box-shadow: none;
}

.login_page .input_group:focus {
	background: #fff;
	color: #666;
}

.register_page .input_group:focus {
	color: #fff;
}

#pwd_forget {
	color: #17a3ad;
	font-size: 0.8rem;
	transition: 0.3s ease-in-out;
}

.bx-right-arrow-alt,
.medias_icons {
	color: #b46731;
}

.account_check,
.backToHome {
	font-size: 0.8rem;
	padding-block: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.account_check a {
	width: 3px;
}

.backToHome a {
	font-size: 0.7rem;
	color: #17a3ad;
	transition: 0.3s ease-in-out;
}

.backToHome a:hover,
#pwd_forget:hover {
	filter: drop-shadow(1px 1px 5px #17a3ad);
	letter-spacing: 0.1rem;
	transition: 0.3s ease-in-out;
}

.checkbox_input {
	font-size: 0.9rem;
	padding-block: 1rem;
}

.bx-right-arrow-alt {
	font-size: 1rem;
	padding-inline: 1rem;
}

#social_media_icons {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5rem;
}

#social_media_icons i {
	font-size: 1.2rem;
}

.btn_submit {
	margin-block: 1rem;
	width: 100%;
	height: 49px;
	cursor: pointer;
	background: #b46731 !important;
	color: #fff;
	text-transform: uppercase;
	font-size: 15px;
	text-shadow: 3px 2px 2px #7a7a7a;
	letter-spacing: 2px;
	position: relative;
	overflow: hidden;
	transition: all 0.5s;
}

.btn_submit:hover,
.btn_submit:focus {
	box-shadow: inset 40rem 0 0 0 #4c9499;
	transition: 0.5s ease-in-out;
}

.btn_submit a {
	color: #fff;
}

@media (min-width: 1600px) {
	.wrapper {
		width: 80rem;
	}
}

@media (max-width: 992px) {
	.login_form,
	.register_form {
		width: 80%;
	}
	.loginBg,
	.registerBg {
		display: none;
	}
}

@media (max-width: 768px) {
	.login_form,
	.register_form {
		width: 100%;
	}
}

@media (max-width: 500px) {
	.container {
		padding: 0;
	}

	h1 {
		font-size: 1.5rem;
	}

	.login_form,
	.register_form {
		padding: 2rem 1rem;
	}
}

@media screen and (max-width: 300px) {
	h1 {
		font-size: 1rem;
	}

	.account_check {
		font-size: 0.6rem;
	}

	.bx-right-arrow-alt {
		font-size: 0.8rem;
		padding-left: 0.1rem;
	}
}