body.login main.content {
	min-height: 100vh;

	display: flex;
	align-items: center;
}

body.login main.content::after {
	content: "";

	width: 55%;
	height: 100vh;

	position: absolute;
	left: 0;
	top: 0;

	background: var(--color-primary) linear-gradient(45deg, transparent, #1d74e1, transparent, #1dbae1, transparent) no-repeat;
	background: var(--color-primary) url("../images/img-3.png") no-repeat center/cover;

	/* background-size: 2000%, 2000%;

	animation: gradientAnimation 8s infinite; */
}

body.login main.content::before {
	content: "";

	width: 45%;
	height: 100vh;

	position: absolute;
	right: 0;
	top: 0;

	background: var(--color-white);
}

@keyframes gradientAnimation {
	0% {
		background-position: -100% center;
	}
	100% {
		background-position: 200% center;
	}
}

body.login main.content div.container_ {
	margin: 0 auto;

	border-radius: 1.5rem;

	display: flex;

	position: relative;
	z-index: 8;
}

body.login main.content div.container_ div.form {
	padding: 8rem;

	width: 100%;
	min-height: 100vh;

	display: flex;
	justify-content: center;
	flex-direction: column;

	background: var(--color-white);

	border-radius: 2rem 0 0 2rem;

	margin-left: -2rem;
}

body.login main.content div.container_ div.banner {
	width: 100%;

	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;

	color: var(--color-white);

	padding: 8rem;
}

body.login main.content div.container_ div.banner h3 {
	font-size: 2.5rem;
}

body.login main.content div.container_ div.banner p {
	color: var(--color-white-72);

	margin-bottom: 2rem;
}

body.login main.content div.container_ div.logo {
	display: flex;

	margin-bottom: 4rem;
}

body.login main.content div.container_ div.logo img {
	height: 2.25rem;
}

body.login main.content div.container_ div.title {
	margin-bottom: 2rem;
}

body.login main.content div.container_ div.title h4 {
	font-weight: 600;
	font-size: 1.25rem;

	margin-bottom: 0.75rem;
}

body.login main.content div.container_ div.title h4 > span {
	color: var(--color-primary);
}

body.login main.content div.container_ div.title p {
	color: var(--color-dark-56);

	font-size: 0.85rem;

	margin-bottom: 0;
}

body.login main.content div.container_ a.forgot-password {
	color: var(--color-primary);

	font-size: 0.85rem;
}

@media (max-width: 991px) {
	body.login {
		background: var(--color-primary) url("../images/img-3.png") no-repeat center/cover;
	}
	body.login main.content {
		padding-top: 2rem;
	}
	body.login main.content div.container_ {
		flex-direction: column-reverse;
	}
	body.login main.content::after,
	body.login main.content::before {
		content: none;
	}
	body.login main.content div.container_ div.form {
		min-height: unset;

		padding: 2rem;
		margin-left: 0;

		border-radius: 2rem;
	}
	body.login main.content div.container_ div.form .btn {
		width: 100%;
	}
	body.login main.content div.container_ div.banner {
		min-height: unset;

		align-items: center;
		text-align: center;

		padding: 2rem 1rem;
	}
	body.login main.content div.container_ div.banner h3 {
		font-size: 2rem;
	}
}