.container {
	background: linear-gradient(to right, #5298A1 0%, #006775 100%);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sidebar {
	width: 46vw;
	padding-left: 6vw;
	padding-top: 6vh;
	height: 100vh;
}

.logo {
	width: 25%;
	filter: brightness(0) invert(1);
	margin-bottom: 16vh;
}

.user-logo {
	padding-right: 5vw;
	width: min(40vw, 500px);
}

.content {
	width: 54vw;
}

.form-box {
	background: linear-gradient(to right, #006775 0%, #006775 50%, #5298A1 100%);
	border-radius: 40px;
	text-align: center;
	opacity: 1;
	animation: fadeInUp 0.5s ease-out forwards;
	overflow: hidden;
	padding: .5vw;
	max-width: 100%;
	margin: 0 10%;
}

.form-head {
	color: #fff;
	padding: 1.5vw;
	font-size: 2.5vw;
	font-weight: bold;
}

.form_body {
	background: #fff;
	border-bottom-right-radius: 35px;
	border-bottom-left-radius: 35px;
	padding: 3vw;
	max-height: calc(100vh - 110px);
	overflow: auto;
}

.form_input input {
	font-size: 22px;
	width: 100%;
	border: 1px solid #006775;
	background: #fff;
	text-align: center;
	line-height: 53px;
	border-radius: 25px;
	height: 53px;
}

.form_input input:focus {
	outline: 0 none;
}

.form_input input::placeholder {
	color: #ccc;
	font-weight: 300;
}

#password {
	margin-top: 28px;
}

#confirm_password {
	margin-top: 28px;
}

.forgot_password {
	font-size: 1.3vw;
	margin-top: 20px;
	display: block;
}

.form_input {
	clear: both;
	display: table;
	width: 100%;
}

.btn.btn-primary {
	border: 1px solid #006775;
	line-height: 53px;
	border-radius: 25px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	background: #006775;
	cursor: pointer;
	height: 53px;
}

.btn.btn-secondary {
	border: 1px solid #000;
	line-height: 53px;
	border-radius: 25px;
	font-size: 20px;
	color: #000;
	cursor: pointer;
	height: 53px;
}

.btn.btn-primary.login {
	margin-top: 28px;
}

.btn.btn-secondary.google {
	margin-top: 28px;
	display: block;
}

.link_signup {
	color: #006775;
}

.no_account {
	margin-top: 2vw;
	color: #000;
	font-size: 1.3vw;
}

.forgot_note {
	font-size: 1.5vw;
	max-width: 682px;
	margin: 0 auto 1.5vw;
}

.btn.btn-primary.reset {
	margin-bottom: 6vw;
	margin-top: 2vw;
}

.field-names {
	display: flex;
	grid-gap: 16px;
	margin-top: 35px;
}

.field-names>div {
	flex: 1;
}

#terms {
	display: inline;
	width: 22px;
	height: 22px;
}

.agree {
	font-size: 14px;
	margin-top: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn.btn-primary.signup {
	margin-top: 25px;
}

.link_term {
	text-decoration: underline;
}

.form-box.sign-up-form {
	top: 0;
}

.google img {
	width: auto;
	vertical-align: top;
	margin-right: 10px;
	height: 100%;
	padding: 2%;
}

.quote-text {
	position: relative;
	color: #fff;
	font-size: 18px;
}

.quote-text::before {
	content: "";
	position: absolute;
	left: -25px;
	height: 20px;
	width: 20px;
	display: block;
	background: url(data:image/png;base64,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);
	background-repeat: no-repeat;
	background-size: contain;
}

.quote-author {
	color: #9CD4DB;
	text-align: right;
	margin-top: 20px;
}

.signin .quote {
	max-width: 246px;
	margin-left: 9vw;
}

.signup .quote {
	max-width: 246px;
	margin-left: 9vw;
}

.forgot .quote {
	max-width: 246px;
	margin-left: 9vw;
}

.copyright {
	position: fixed;
	bottom: 10px;
	font-size: min(14px, 3vw);
	text-align: center;
	left: 0;
	right: 0;
	color: #E3EEF2
}

@media screen and (max-width: 767px) {
	.sidebar {
		width: auto;
		padding-left: 0;
		padding-top: 0;
		height: auto;
	}

	.container {
		height: 100vh;
		display: block;
	}

	.logo {
		width: 40%;
		filter: brightness(0) invert(1);
		padding: 16vw 0 10vw;
		margin: auto;
	}

	.user-logo {
		display: none;
	}

	.quote {
		display: none;
	}

	.content {
		width: auto;
	}

	.form_body {
		padding: 45px 30px;
	}

	.form-head {
		padding: 10px;
		font-size: 30px;
	}

	.form_input input {
		font-size: 16px;
		line-height: 30px;
		height: 30px;
	}

	#password {
		margin-top: 22px;
	}

	.forgot_password {
		font-size: 16px;
	}

	.btn.btn-primary.login {
		margin-top: 22px;
	}

	.btn.btn-primary {
		line-height: 30px;
		font-size: 20px;
		height: 30px;
	}

	.btn.btn-secondary.google {
		margin-top: 22px;
	}

	.btn.btn-secondary {
		line-height: 30px;
		font-size: 16px;
		height: 30px;
	}

	.google img {
		width: auto;
		vertical-align: top;
		height: 100%;
	}

	.no_account {
		font-size: 14px;
	}

	.forgot_note {
		font-size: 14px;
	}
}