.main {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.maincontainer--login {
	margin-top: 0 !important;
	width: 700px;
}

.login__form {
	display: flex;
	font-size: var(--size-base);
}

.login__form--half {
	width: 50%;
}

.login__form--left {
	display: flex;
	justify-content: center;
	align-items: center;
}

.login__form--right {
	display: flex;
	align-items: center;
	flex-flow: column;
	margin: 40px 0;
	min-height: 250px;
}

.login__credentials.dropdown__content {
	min-width: 250px;
}

.login__credentials {
	width: 100%;
	font-size: var(--size-base);
	margin-bottom: -20px;
}

.login__input {
	margin-bottom: 20px;
}

.login__input input {
	width: 100%;
	box-sizing: border-box;
}

.login__input--bottom {
	display: flex;
	justify-content: space-between;
}

.login__sso {
	margin-bottom: 180px; /* to display sso dropdown within the container */
}

.asyBrand {
	display: none;
}

/* region logos */

.login__customerlogo {
	max-width: 250px;
}

.login__alisqilogo {
	width: 200px;
}

/* endregion */

/* region unsupported browser warning */

body.noModule .login__unsupportedbrowserwarning {
	display: block !important;
	text-align: center;
	color: rgb(var(--textcolor-error));
	font-size: var(--size-base);
}

body.noModule .login {
	display: none;
}

/* endregion */

/* region eSignature form */

.login--auth .login__alisqilogo {
	margin-bottom: 40px;
}

.login--auth .login__welcome,
.login--auth .impName,
.login--auth .asyBrand,
.login__mobile--auth {
	display: none;
}

.login--auth a.forgot {
	visibility: hidden;
}

.login--auth input[name="username"] {
	outline: none !important;
}

/* endregion */

@media (max-width: 768px) {
	.main {
		align-items: flex-start;
		justify-content: flex-start;
		background-color: rgb(var(--background-upper));
	}

	.sandbox .main,
	.sandbox .maincontainer {
		background-color: rgb(var(--background-info));
	}

	.main__login,
	.maincontainer--login {
		width: 100%;
		border: none;
		box-shadow: none;
	}

	.login__form--left {
		display: none;
	}

	.login__mobile--auth {
		display: block;
		align-self: start;
	}

	.login__form--right {
		width: 100%;
	}

	.impName {
		margin-left: 30px;
	}
}