body {
	font-family: var(--egk-ui-font);
}
.ihy-logo {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 100px;
}
.bg-image-container {
	padding: 20px;
	margin: 20px;
	max-width: 420px;
}
.context {
	display: flex;
	width: 100%;
	position: absolute;
	justify-content: var(--login-position-horizontal);
	align-items: var(--login-position-vertical);
	height: 100%;
}

	.context h1 {
		text-align: center;
		color: #fff;
		font-size: 50px;
	}

.login-form {
	padding: 0;
}

.bg-image-container {
	padding: 20px;
	margin: 20px;
	max-width: 420px;
}

.login-container {
	background: #ffffffc9;
	padding: 24px 24px 12px 24px;
	border-radius: 6px;
	z-index: 2;
	backdrop-filter: blur(10px);
	margin: 24px;
	min-width: 364px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}

.login-form .form-group .form-control {
	font-size: 14px;
}

.login-form .form-group i, .login-form .form-group svg {
	position: absolute;
	top: 14px;
	bottom: 0;
	left: 18px;
	right: 0;
	font-size: 18px;
	width: min-content;
}

#password-btn {
	color: var(--text-primary-color);
	font-size: 12px;
	padding: 4px 6px;
	width: min-content;
	transition: 0.5s all ease-in-out;
}

	#password-btn:hover {
		box-shadow: var(--egk-light-shadow);
		background-color: #969aac;
		color: #fff;
		transition: 0.5s all ease-in-out;
	}

#login-btn {
	margin-bottom: 24px !important;
}

.toggle-password {
	right: 8px !important;
	top: 14px !important;
	left: unset !important;
}
.matched {
	background-color: forestgreen !important;
}

.password-area {
	position: absolute;
	top: 12px;
	right: 0px;
	background: none;
}

:focus {
	outline: none;
}

.col-3 {
	position: relative;
}

.password-container {
	margin: 12px 0 38px 0;
	position: relative;
}

.mail-container {
	margin: 28px 0 38px 0;
	position: relative;
}
.effect-17 {
	border: 0;
	padding: 4px 0;
	border-bottom: 1px solid #ccc;
	background-color: transparent;
	height: 44px !important;
	padding: 5px 15px 0px 41px;
	border-radius: 4px !important;
}


	.effect-17 ~ .focus-border {
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 2px;
		background: linear-gradient(90deg, rgba(97,169,222,0) 0%, var(--theme-color) 20%, var(--theme-color) 50%, var(--theme-color) 80%, rgba(58,63,133,0) 100%);
		transition: 0.4s;
	}

	.effect-17:focus ~ .focus-border,
	.has-content.effect-17 ~ .focus-border {
		width: 100%;
		transition: 0.4s;
		left: 0px;
		bottom: -2px;
	}

	.effect-17:focus {
		box-shadow: none !important;
	}

		.effect-17:focus ~ .input-effect > i, .effect-17:focus ~ .input-effect > svg {
			animation: miniBounce 0.4s ease-in-out;
		}

	.effect-17 ~ label {
		position: absolute;
		left: 40px;
		width: 100%;
		top: 14px;
		color: #aaa;
		transition: 0.3s;
		z-index: 2;
		letter-spacing: 1.4px;
		font-weight: 400;
		font-size: 14px;
		pointer-events: none;
	}

	.effect-17:focus ~ label, .has-content.effect-17 ~ label {
		top: -24px;
		transition: 0.3s;
		left: 0px;
	}

.has-content {
	background-color: rgba(155, 155, 155, 0.05);
	background-size: 11px 11px;
	filter: blur;
	backdrop-filter: blur(129px);
}
input[type="text"] {
	color: #333;
	width: 100%;
	box-sizing: border-box;
	letter-spacing: 1.4px;
}

.input-effect > i, .input-effect > svg {
	position: absolute !important;
	top: 13px;
	bottom: 0;
	left: 11px;
	right: 0;
	font-size: 18px;
	width: min-content;
}


.area {
	width: 100%;
	height: 100vh;
}

.logo-container img, .logo-container svg {
	max-width: 180px;
	min-width: 140px;
}

.circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.circles li {
		position: absolute;
		display: block;
		list-style: none;
		width: 20px;
		height: 20px;
		background: var(--theme-color);
		animation: animate 25s linear infinite;
		bottom: -150px;
	}

		.circles li:nth-child(1) {
			left: 25%;
			width: 80px;
			height: 80px;
			animation-delay: 0s;
		}


		.circles li:nth-child(2) {
			left: 10%;
			width: 20px;
			height: 20px;
			animation-delay: 2s;
			animation-duration: 12s;
		}

		.circles li:nth-child(3) {
			left: 70%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
		}

		.circles li:nth-child(4) {
			left: 40%;
			width: 60px;
			height: 60px;
			animation-delay: 0s;
			animation-duration: 18s;
		}

		.circles li:nth-child(5) {
			left: 65%;
			width: 20px;
			height: 20px;
			animation-delay: 0s;
		}

		.circles li:nth-child(6) {
			left: 75%;
			width: 110px;
			height: 110px;
			animation-delay: 3s;
		}

		.circles li:nth-child(7) {
			left: 35%;
			width: 150px;
			height: 150px;
			animation-delay: 7s;
		}

		.circles li:nth-child(8) {
			left: 50%;
			width: 25px;
			height: 25px;
			animation-delay: 15s;
			animation-duration: 45s;
		}

		.circles li:nth-child(9) {
			left: 20%;
			width: 15px;
			height: 15px;
			animation-delay: 2s;
			animation-duration: 35s;
		}

		.circles li:nth-child(10) {
			left: 85%;
			width: 150px;
			height: 150px;
			animation-delay: 0s;
			animation-duration: 11s;
		}

main {
	padding: 0px !important;
}

.mud-paper {
	max-width: 500px;
	width: 85%;
	margin: auto;
	border-radius: 10px;
}

.mud-card-header-content {
	display: flex;
	justify-content: center;
}

@keyframes animate {

	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		border-radius: 0;
	}

	100% {
		transform: translateY(-1000px) rotate(720deg);
		opacity: 0;
		border-radius: 50%;
	}
}

.mud-paper-square {
	width: 25%;
	margin: auto;
}

@keyframes miniBounce {
	0% {
		-webkit-transform: translateY(0px) rotate(-45deg);
	}

	30% {
		-webkit-transform: translateY(-20px) rotate(-45deg);
	}

	60% {
		-webkit-transform: translateY(0px) rotate(-45deg);
	}

	70% {
		-webkit-transform: translateY(-5px) rotate(-45deg);
	}

	100% {
		-webkit-transform: translateY(0) rotate(-45deg);
	}
}
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active {
	-webkit-background-clip: text;
	-webkit-text-fill-color: #ffffff;
	transition: background-color 5000s ease-in-out 0s;
	box-shadow: inset 0 0 20px 20px #23232329;
}
[data-theme="dark"] .login-container {
	background: #ffffffc9;
	padding: 24px 24px 12px 24px;
	border-radius: 6px;
	z-index: 2;
	backdrop-filter: blur(10px);
	margin: 24px;
	min-width: 364px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	background: #2f3547;
	box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.6);
}