.login-container {
	height: calc(100% - 104px);
	display: flex;
}

.login-steps-container {
	/*height: fit-content;*/
	width: min(calc(100vw - 5%), 1200px);
	height: max(calc(100% - 250px), 600px);
	border-radius: 22.5px;
	box-shadow: 0px 0px 24px 1px rgba(121, 160, 190, 0.24);
	background-color: #f5f9ff;
	padding: 10px;
}

@media only screen and (max-width: 992px) {
	#global-nav {
		background-color: #f5f9ff;
	}
	.login-container {
		background-color: #f5f9ff;
	}
	.login-steps-container {
		box-shadow: unset;

	}
	.mat-typography {
		background-color: #f5f9ff;
	}
}

.login-first-step-container {
	display: none;
}

.login-final-step-container {
	display: none;
}

.otp-step-container {
	display: none;
}

.register-final-step-container {
	display: none;
}

.login-set-password-step-container {
	display: none;
}

.login-steps-container form {
	width: max(calc(100% - 50px), 230px);
}

.login-steps-container input {
	max-width: 350px;
	margin: 0 auto;
}

.login-steps-container meter {
	width: 100%;
	height: 4px;
	top: 46px;
	position: absolute;
	max-width: 310px;
	left: 20px;

	-webkit-appearance: none;
	-moz-appearance: none;
	background: whitesmoke none;
}

.login-steps-container meter::-webkit-meter-bar,
.login-steps-container meter::-moz-meter-bar {
	background: whitesmoke none;
	transition: width 1s ease-in-out;
	-moz-appearance: meterchunk;
}

.login-steps-container meter::-webkit-meter-optimum-value,
.login-steps-container meter:-moz-meter-optimum::-moz-meter-bar {
	background-color: #ad7;
}

.login-steps-container meter::-webkit-meter-suboptimum-value,
.login-steps-container meter:-moz-meter-sub-optimum::-moz-meter-bar {
	background-color: #fe7;
}

.login-steps-container meter::-webkit-meter-even-less-good-value,
.login-steps-container meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
	background-color: #f77;
}

.login-steps-container h4 {
	max-width: 350px;
	margin: 0 auto;
	width: 100%;
}

.login-steps-container .form-element {
	max-width: 350px;
	margin: 0 auto 20px;
	width: 100%;
}

.login-steps-container .material-bubble-btn {
	width: min(350px, 100%);
	margin: 0 auto;
}

.login-steps-container .submit-btn {
	z-index: 3;
}

.login-steps-container .logo-image {
	width: min(80%, 250px);
	margin: 0 auto;
}

.login-steps-container .big-image {
	display: flex;
	width: calc(100% - 10px);
	height: 250px;
	margin: 0 auto;
}

.login-steps-container .big-image img {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

.login-steps-container span.error-text {
	color: #de161c;
	width: min(350px, 100%);
	margin: 0 auto;
}

.form-element:has(+a.forgot-password) {
	margin-bottom: 0;
}

.form-container a.forgot-password {
	cursor: pointer;
	text-decoration: none;
	max-width: 350px;
	margin: 0 auto 20px;
	width: 100%;
}

.form-container input {
	border: 2px solid transparent;
}

.form-container input + i.password-eye-container {
	float: left;
}

.form-container input + i.password-eye-container:before {
	content: url('/static/images/passwordEyeClosed.svg');
	filter: brightness(0) saturate(100%) invert(25%) sepia(60%) saturate(587%) hue-rotate(167deg) brightness(97%) contrast(89%);
	position: absolute;
	width: 20px;
	top: 13px;
	left: 20px;
	margin: auto 14px auto auto;
	cursor: pointer;
}

.form-container input[type='password'] + i.password-eye-container:before {
	content: url('/static/images/passwordEye.svg');
}

@media only screen and (max-width: 600px) {
	/*.login-steps-container .big-image {*/
	/*	height: 160px;*/
	/*}*/
	.login-steps-container {
		height: calc(100% - 20px);
	}
}

@media only screen and (max-height: 900px) {
	.login-steps-container .big-image {
		height: 250px;
	}
}

@media only screen and (max-height: 750px) {
	.login-steps-container .big-image {
		height: 150px;
	}
}

@media only screen and (max-height: 600px) {
	.login-steps-container .big-image {
		height: 110px;
	}
}

.login-first-step-container .form-container p:last-of-type {
	margin: 20px auto 0;
	/*font-weight: 200;*/
	font-size: 14px;
	line-height: 30px;
}

.otp-fake-field, #OTPInput > *[id]::-webkit-outer-spin-button,
.otp-fake-field, #OTPInput > *[id]::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
.otp-fake-field, #OTPInput > *[id][type=number] {
	-moz-appearance:textfield; /* Firefox */
}

.otp-fake-field, #OTPInput > *[id] {
	width: 60px;
	border: 1px solid #0e71bb;
	color: transparent;
	text-shadow: 0 0 0 gray;
	text-align: center;
	padding: 0 !important;
}

.resend-otp-container {
	width: 350px;
	margin: auto;
}
.resend-otp-container span:first-of-type {
	color: black;
}
.resend-otp-container span:nth-of-type(2) {
	color: black;
	display: none;
}
.resend-otp-container span:last-of-type {
	color: #0E71BB;
	cursor: pointer;
}

@media (max-width: 768px) {
	.resend-otp-container span {
		text-align: left;
		font-size: 14px;
	}
}
@media (max-width: 490px) {
	.resend-otp-container {
		width: 100%;
	}
}

@media (max-width: 410px) {
	.resend-otp-container span {
		font-size: 12px;
	}
}