.hideLoginContainer {
		display: none;
	}

	.showResetPasswordContainer {
		display: none;
	}

	* {
		padding: 0;
		margin: 0;
		color: #1a1f36;
		box-sizing: border-box;
		word-wrap: break-word;
		font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
	}

	body {
		min-height: 100%;
		background-color: #ffffff;
	}

	h1 {
		letter-spacing: -1px;
	}

	a {
		color: #00695c;
		text-decoration: unset;
	}

	.login-root {
		background: #fff;
		display: flex;
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
	}

	.loginbackground {
		min-height: 692px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		z-index: 0;
		overflow: hidden;
	}

	.flex-flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.center-center {
		align-items: center;
		justify-content: center;
	}

	.box-root {
		box-sizing: border-box;
	}

	.flex-direction--column {
		/* display: none; */
		/* Initially hide the form */
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.formContainer {
		display: none;
	}

	.loginbackground-gridContainer {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
		grid-template-columns: [start] 1fr [left-gutter] repeat(16, 86.6px) [left-gutter] 1fr [end];
		-ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
		grid-template-rows: [top] 1fr [top-gutter] repeat(8, 64px) [bottom-gutter] 1fr [bottom];
		justify-content: center;
		margin: 0 -2%;
		transform: rotate(-12deg) skew(-12deg);
	}

	.box-divider--light-all-2 {
		box-shadow: inset 0 0 0 2px #eee;
	}

	.box-background--blue {
		background-color: rgba(44, 103, 93, 0.9);
	}

	.box-background--white {
		background-color: #f5f5f5;
	}

	.box-background--blue800 {
		background-color: rgba(32, 78, 81, 0.5);
	}

	.box-background--gray100 {
		background-color: #ffb74d;
		opacity: 0.5;
	}

	.box-background--cyan200 {
		background-color: rgba(55, 129, 141, 0.4)
	}

	.padding-top--64 {
		padding-top: 64px;
	}

	.padding-top--24 {
		padding-top: 24px;
	}

	.padding-top--48 {
		padding-top: 48px;
	}

	.padding-bottom--24 {
		padding-bottom: 24px;
	}

	.padding-horizontal--48 {
		padding: 48px;
	}

	.padding-bottom--15 {
		padding-bottom: 15px;
	}


	.flex-justifyContent--center {
		-ms-flex-pack: center;
		justify-content: center;
	}

	.formbg {
		margin: 0px auto;
		width: 100%;
		max-width: 448px;
		background: white;
		border-radius: 4px;
		box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
	}

	span {
		display: block;
		font-size: 20px;
		line-height: 28px;
		color: #1a1f36;
	}

	label {
		margin-bottom: 10px;
	}

	.reset-pass a,
	label {
		font-size: 14px;
		font-weight: 600;
		display: block;
	}

	.reset-pass>a {
		text-align: right;
		margin-bottom: 10px;
	}

	.grid--50-50 {
		display: grid;
		grid-template-columns: 50% 50%;
		align-items: center;
	}

	.field input {
		font-size: 16px;
		line-height: 28px;
		padding: 5px 10px !important;
		width: 100%;
		min-height: 44px;
		border: unset;
		border-radius: 4px;
		outline-color: rgb(84 105 212 / 0.5);
		background-color: rgb(255, 255, 255);
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px !important;
	}
	
	input[type="submit"] {
		background-color: rgba(55, 129, 141, 0.9);
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
			rgba(55, 129, 141, 0.9) 0px 0px 0px 1px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(0, 0, 0, 0) 0px 0px 0px 0px,
			rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
		color: #fff;
		font-weight: 600;
		cursor: pointer;
	}

	.field-checkbox input {
		width: 20px;
		height: 15px;
		margin-right: 5px;
		box-shadow: unset;
		min-height: unset;
	}

	.field-checkbox label {
		display: flex;
		align-items: center;
		margin: 0;
	}

	a.ssolink {
		display: block;
		text-align: center;
		font-weight: 600;
	}

	.footer-link span {
		font-size: 14px;
		text-align: center;
	}

	.listing a {
		color: #697386;
		font-weight: 600;
		margin: 0 10px;
	}

	.tans3s {
		animation: animationLeftRight 1s ease-in;
	}

	.tans2s {
		animation: animationLeftRight 1s ease;
	}

	.tans2s2 {
		animation: animationRightLeft 1s ease;
	}

	.tans4s {
		animation: animationRightLeft 1s ease-in-out;
	}


	@keyframes animationLeftRight {
		0% {
			transform: translateX(-1000px);
		}

		100% {
			transform: translateX(0px);
		}
	}

	@keyframes animationRightLeft {
		0% {
			transform: translateX(1000px);
		}

		100% {
			transform: translateX(0px);
		}
	}