.container-login {
	background-color: #fff;
	width: 100vw;
	height: 100vh;
	display: flex;
}

.left-side-login {
	background-color: #000;
	color: #fff;
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right-side-login {
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-logo {
	width: 65%;
}

.dynamic-text::after {
	content: "|";
	animation: blink 0.7s steps(2, start) infinite;
}

h1,
h2 {
	font-size: 48px !important;
	font-weight: bold;
}

h3 {
	margin-bottom: 32px;
	font-size: 24px;
}

.dynamic-text {
	color: #595959;
	margin-bottom: 32px;
}

span {
	font-size: 18px;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.my-login-validation {
	width: 85%;
}

input.form-control::placeholder {
	color: #fff;
}

input.form-control {
	display: inline;
}

input.form-control:focus {
	box-shadow: none !important;
}

.esqueceu {
	color: #595959;
	display: flex;
	margin: 8px;
}

.esqueceu:hover {
	color: #595959;
}

.inputGroup {
	font-family: 'Segoe UI', sans-serif;
	position: relative;
}

.inputGroup input {
	font-size: 100%;
	padding: 8px;
	outline: none;
	border: 1px solid rgb(200, 200, 200);
	background-color: transparent;
	border-radius: 16px;
	width: 100%;
}

.inputGroup label {
	font-size: 100%;
	position: absolute;
	left: 0;
	padding: 8px;
	margin-left: 0.5em;
	pointer-events: none;
	transition: all 0.3s ease;
	color: rgb(100, 100, 100);
}

.inputGroup :is(input:focus, input:not(:placeholder-shown))~label {
	transform: translateY(-50%) scale(.9);
	margin: 0em;
	margin-left: 1.3em;
	padding: 0 8px;
	background-color: #fff;
	color: #595959;
}

.inputGroup :is(input:focus, input:valid) {
	border-color: #595959;
}

.button-entrar {
	background-color: #595959;
	border: none;
	padding: 8px;
	border-radius: 16px;
}

.button-entrar:hover {
	background-color: #595959;
	border: none;
}

.criar-conta {
	color: #595959;
}

.criar-conta:hover {
	color: #595959;
}

@media screen and (max-width: 1024px) {
	.container-login {
		flex-direction: column;
	}

	.left-side-login,
	.right-side-login {
		width: 100%;
	}

	.text-logo {
		width: 90%;
	}

	.my-login-validation {
		width: 90%;
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-within,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0px 1000px white inset !important;
	box-shadow: 0 0 0px 1000px white inset !important;
	-webkit-text-fill-color: #000 !important;
}