@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

@grass-green: #81c45c;
@grass-green-hover: #67af40;
@charcoal-grey: #353d40;


html body
{
	overflow: auto;

	.wrapper,.signup-next
	{
		padding: 0 15px;
	}
}

div#site-main
{
	font-family: @title-font;

	.passwords .password-helper
	{
		display: none;
	}

	&.v7
	{
		box-shadow: none;
		padding: 40px 0 15px 0;
		width: 940px;

		.wrapper
		{
			padding: 0 15px;

			h2
			{
				color: black;
			}

			p
			{
				color: #292929;
			}
		}

		.login-denied
		{
			padding: 0 15px;

			h2
			{
				color: @charcoal-grey;
			}

			p
			{
				color: #292929;
			}

			input[type=button]
			{
				width: 236px;
				text-transform: uppercase;
				border-radius: 4px;
			}

			#signup-social
			{
				a
				{
					width: 236px;
					margin-bottom: 12px;
					padding: 0;
				}
			}
		}

		h2
		{
			font-size: 36px;
			text-transform: uppercase;
			margin-bottom: 0;
			margin-top: 0;
		}

		p
		{

			&.small
			{
				font-size: 16px;
			}
		}

		label
		{
			color: @charcoal-grey;
			font-size: 18px;
		}

		br
		{
			display: none;
		}

		input[type=text],
		input[type=email],
		input[type=password]
		{
			background-color: #c8d7df;
			border: none;
			border-radius: 0;
			width: 440px;
			height: 60px;
			box-sizing: border-box;
			font-size: 18px;
			padding: 15px;


			&.input-validation-error
			{
				background-color: #dfc8c8;
			}

			&#Code
			{
				width: 640px;
				margin-bottom: 0;
			}
		}

		input[type=submit],
		input[type=button]
		{
			height: 56px;
			font: normal 19px @title-font;
			border: 0;
		}

		.aside.invalid
		{
			background: none;
			position: static;
			padding: 0;
			margin-bottom: 10px;
			margin-top: -20px;
		}

		.field-validation-error
		{
			font-weight: bold;
			display: block;
			background: none;
			font-family: @title-font;
			font-size: 12px;
			color: #c13a3f;
			padding: 0;
		}

		.form form input[type=submit]
		{
			margin-top: 20px;
			width: 160px;
			padding: 0;

			&.resend
			{
				margin-top: 0;
				margin-bottom: 60px;
				background-color: #6993a9;

				&:hover
				{
					background-color: #5a859b;
				}
			}

			&.ok
			{
				margin-bottom: 54px;
			}
		}

		ul
		{
			color: #6993a9;
			font-size: 18px;
		}

		#password-meter
		{
			width: 440px;

			.meter
			{
				width: 440px;
				height: 4px;
				background: #c8d7df;

				.password-meter-too-short
				{
					background: #c8d7df;
				}

				.password-meter-weak
				{
					background: #bd1e1e;
					width: 50%;
				}

				.password-meter-good
				{
					background: #bd9e1e;
					width: 75%;
				}

				.password-meter-strong
				{
					background: @grass-green;
					width: 100%;
				}
			}

			.text
			{
				text-align: left;
				text-transform: uppercase;
				margin-top: 5px;
				margin-bottom: 10px;
				font-size: 12px;
				color: #6993a9;

				html[dir='rtl'] &
				{
					text-align: right;
				}
			}
		}

		div#signup-social a
		{
			width: 220px;
			height: 56px;
			display: block;

			&:after
			{
				height: 28px;
				font-size: 20px;
				top: 14px;
				left: 25px;
				background-size: 28px 28px;
				width: ~"calc(100% - 25px)";
				line-height: inherit;
			}

			html[dir='rtl'] &
			{
				&:after
				{
					left: auto;
					right: 25px;
				}
			}
		}

		.add-padding
		{
			margin-top: 35px;
		}
	}

	.bottom-text
	{
		display: none;
	}

	&.page-section.signin, &.page-section.signup
	{
		height: auto;
		width: auto;
		box-shadow: none;

		h2
		{
			text-transform: uppercase;
			font-size: 28px;
			width: 500px;
			margin: 0 auto;
		}

		h3
		{
			font-size: 16px;
			text-align: center;
		}

		div#register-form div.form.register
		{
			background: none;
			padding-top: 0;
			margin-top: 15px;

			h3
			{
				margin-bottom: 16px;

				&.email
				{
					margin-top: 20px;
					margin-bottom: 15px;
				}
			}

			p
			{
				font-size: 12px;
				text-align: center;
				width: 540px;
				margin: 10px auto;
				color: @charcoal-grey;

				&.hint
				{
					width: 320px;
					text-align: left;

					html[dir='rtl'] &
					{
						text-align: right;
					}
				}

				&#login
				{
					font-size: 16px;
				}
			}

			input[type=submit]
			{
				height: 40px;
				box-sizing: border-box;
				font-size: 19px;
				display: block;
				border-radius: 4px;
			}

			input.text-box
			{
				width: 320px;
				height: 40px;
				display: block;
				margin: 10px auto 0 auto;
				border: none;
				background: #c8d7df;
				border-radius: 0;

				&::placeholder
				{ /* Chrome, Firefox, Opera, Safari 10.1+ */
					color: #646464 !important;
					opacity: 1; /* Firefox */
				}

				&:-ms-input-placeholder
				{ /* Internet Explorer 10-11 */
					color: #646464 !important;
				}

				&::-ms-input-placeholder
				{ /* Microsoft Edge */
					color: #646464 !important;
				}

				&.password,
				&.confirm-password
				{
					display: none;
				}
			}

			div.aside.invalid
			{
				display: block;
				position: static;
				margin: 0 auto;
			}

			.field-validation-error
			{
				font-size: 14px;
				font-weight: bold;

				&.general,
				&.captcha
				{
					margin-top: 20px;
					width: 256px;
					text-align: center;
					.margin-left-right(auto, auto);

					html[dir='rtl'] &
					{
						.margin-left-right(auto, auto);
					}
				}
			}

			br
			{
				display: none;
			}

			.forgot
			{
				font-size: 16px;
				text-decoration: none;
				display: block;
				text-align: center;
				font-weight: bold;
			}

			#no-account
			{
				display: block;
				text-align: center;
				color: black;
				font-size: 16px;
				margin-top: 10px;

				a
				{
					text-decoration: none;
					font-size: 16px;
					font-weight: bold;
				}
			}

			input[type=checkbox]
			{
				opacity: 0;
				position: relative;
				z-index: 1;
			}

			.checkmark
			{
				display: inline-block;
			}

			.checkboxes p
			{
				font-size: 14px;
				width: auto;
				text-align: left;
				.margin-left-right(25px, 0);
				margin-top: 0;

				html[dir='rtl'] &
				{
					text-align: right;
					.margin-left-right(0, 25px);
				}
			}

			.terms-of-use
			{
				font-size: 16px;
			}


			.sign-in
			{
				text-align: center;
				margin-top: 30px;
				font-size: 16px;

				a
				{
					font-weight: bold;
					text-decoration: none;
				}
			}

			#captcha-placeholder
			{
				width: 256px;
			}
		}

		div#signup-social a
		{
			height: 40px;
			text-decoration: none;
			line-height: 0.5;
			background-size: 10%;
			text-align: left;
			display: inline-block;

			&.linkedin
			{
				margin-right: 0;

				html[dir='rtl'] &
				{
					margin-left: 0;
				}
			}

			&:after
			{
				height: 20px;
				font-size: 16px;
				top: 10px;
				left: 20px;
				background-size: 20px 20px;
				width: ~"calc(100% - 20px)";
			}

			&.google
			{
				div
				{
					width: 38px;
					height: 38px;
					top: 1px;
					left: 1px;

					html[dir='rtl'] &
					{
						right: 1px;
					}

					em
					{
						width: 20px;
						height: 20px;
						background-size: 20px 20px;
						top: 9px;
						left: 9px;
					}
				}
			}

			html[dir='rtl'] &
			{
				margin-right: 0;

				&:after
				{
					left: auto;
					right: 20px;
				}
			}
		}

		.info-message
		{
			display: none;
		}

		.signup-message
		{
			display: block;
		}

		.checkboxes
		{
			width: 440px;
			box-sizing: border-box;
			margin: 0 auto;
			.padding-left-right(60px, 0);

			html[dir='rtl'] &
			{
				.padding-left-right(0, 60px);
			}

			label
			{
				font-size: 16px;
				width: auto;
			}
		}

		#password-meter
		{
			width: 320px;
			margin: 10px auto 0 auto;

			.meter
			{
				width: 320px;
			}

			.text
			{
				color: black;
				text-transform: uppercase;
			}
		}
	}

	&.page-section.signup
	{
		div#register-form div.form.register
		{
			width: 650px;

			input[type=submit]
			{
				padding: 8px 42px;
				margin: 28px auto 43px auto;

				&.signup-button
				{
					width: 320px;
					margin: 20px auto 0;
					background-color: @grass-green;

					&:hover
					{
						background-color: @grass-green-hover;
					}
				}
			}

			.terms-of-use
			{
				margin: 20px auto;
			}

			#captcha-placeholder
			{
				margin: 0 auto;
			}
		}

		div#signup-social a
		{
			width: 200px;
			margin-right: 20px;

			&.facebook
			{
				margin-left: 5px;

				html[dir='rtl'] &
				{
					.margin-left-right(0, 5px);
				}
			}

			html[dir='rtl'] &
			{
				.margin-left-right(20px, 0);
			}
		}
	}

	&.page-section.signin
	{
		div#register-form div.form.register
		{
			width: 670px;

			h3
			{
				margin-top: 16px;
			}

			input[type=submit]
			{
				width: 320px;
				padding: 8px 0;
				margin: 20px auto;
				background-color: @grass-green;

				&:hover
				{
					background-color: @grass-green-hover;
				}
			}

			input.text-box
			{
				width: 320px;
			}

			#captcha-placeholder
			{
				margin: 20px auto 0 auto;
			}
		}

		div#signup-social a
		{
			width: 200px;
			margin-right: 20px;

			&.twitter
			{
				margin-right: 0;

				html[dir='rtl'] &
				{
					margin-left: 0;
				}
			}

			html[dir='rtl'] &
			{
				.margin-left-right(20px, 0);
			}
		}
	}

	input[type=submit]
	{
		text-align: center;
		border: 0;
		font-weight: bold;
		font-size: .9em;
		padding: 0.5em 2em;

		&.login
		{
			margin: 0.7em auto 1em;
		}
	}

	label
	{
		color: #666;
		font-family: @title-font;
		font-size: .8em;

		html[dir='rtl'] &
		{
			direction: rtl;
		}
	}

	a
	{
		color: @accent-color;

		&#login
		{
			color: white;
		}
	}

	h2
	{
		font-size: 1.8em;
	}
}

div#signup-social.portal
{
	a
	{
		display: inline-block;
		width: 105px;
		height: 30px;
		margin-right: 26px;
		border-radius: 2px;
		background-position: 0% 0%;
		background-repeat: no-repeat;
		.hires('/img/v4/login/btn_social_login_2o2', @ext: 'png?v=2');
		vertical-align: top;

		.logo, .vertical-separator, .text-box
		{
			display: none;
		}

		html[dir='rtl'] &
		{
			margin-right: 0;
			margin-left: 26px;
		}

		&:hover
		{
			.hires('/img/v4/login/btn_social_login_2o2_hover', @ext: 'png?v=2');
		}


		&.internal
		{
			background-color: black;
			background-position: 0 0;

			&:hover
			{
				background-color: #505050;
			}
		}

		&.facebook
		{
			background-color: #3C5999;
			background-position: 25% 0;

			&:hover
			{
				background-color: #5872B1;
		}
	}

		&.google
		{
			background-color: #4587EC;
			background-position: 50% 0;

			&:hover
			{
				background-color: #4A8FED;
			}
		}

		&.twitter
		{
			background-color: #00ABEC;
			background-position: 75% 0;
			margin-right: 0;

			html[dir='rtl'] &
			{
				margin-left: 0;
			}

			&:hover
			{
				background-color: #1CBBFF;
			}
		}

		&.linkedin
		{
			background-color: #008FC3;
			background-position: 100% 0;
			margin-right: 0;

			html[dir='rtl'] &
			{
				margin-left: 0;
			}

			&:hover
			{
				background-color: #009AC9;
			}
		}
	}

	.login-button
	{
		margin-bottom: 10px;
	}
}

#login-form-community
{
	h3.login
	{
		margin-top: 35px;
	}
}

#login-form-community, #signup-form-community
{
	span.field-validation-error
	{
		display: inline-block;
		margin-bottom: 10px;
		width: 470px;
	}
}

#captcha-placeholder.active
{
	width: 256px;
	margin: 30px 2px 20px 2px;
}

div.form form input.text-box
{
	display: block;
	width: 100%;
	height: 25px;
	margin-top: .5em;
	padding-right: 10px;
	color: black;
	/* this fix is for iPad */
	-webkit-appearance: none;
	border-radius: 2px;
	/*     end iPad fix     */
	background-color: #fff;
	border: 1px solid #9BD2FE;
	box-sizing: border-box;
	height: 36px;
}

div#login-native
{
	input.text-box
	{
		width: 370px;
	}
}

div.create-password
{
	span.field-validation-error
	{
		text-transform: uppercase;
	}
}


div#login-form-community, div#signup-form-community, div#login-native
{
	div.form form
	{
		label
		{
			display: block;

			&.inline
			{
				display: inline;
			}
		}

		input[type=text].text-box.password, input[type=text].text-box.confirm-password
		{
			display: none;
			color: #a9a9a9;
		}

		input[type=submit]
		{
			margin: 0;
			display: block;
		}
	}
}

div#login-form-community,
div#signup-form-community
{
	div.form form label
	{
		display: none;
	}
}

div.form form a.forgot
{
	display: inline-block;
}


div#register-form
{
	overflow: auto;
	font-family: @title-font;

	&.login
	{
		margin: 0 auto;
	}

	span
	{
		font-family: @title-font;
	}

	& > h2, & > h3
	{
		text-align: center;
		margin: 5px 0;
	}

	& > h2
	{
		font-size: 22pt;
	}

	& > h3
	{
		font-size: 16pt;
		font-weight: normal;
	}

	div.form.register
	{
		margin: 20px auto 10px;
		border-radius: 10px;
		padding: 10px 25px 30px 30px;
		background: #f5f5f5;
		width: 375px;

		&.login
		{
			padding-top: 30px;
			margin: 30px auto auto auto;

			a
			{
				color: @accent-color;
			}

			form a, form span
			{
				font-size: small;
			}
		}

		&.center
		{
			float: none;
			margin: 2em auto;
		}

		h3, h4
		{
			margin: 0;
		}

		h4
		{
			font-weight: normal;
		}

		p
		{
			line-height: 1.3em;
			font-size: smaller;

			&.hr
			{
				font-weight: bold;
				text-align: center;
				margin: 2em 0;
				background: url('/img/v4/login/hr.png') repeat-x center;
				margin-right: 5px;

				& span
				{
					display: inline-block;
					padding: 0 1em;
					background: whitesmoke;
					font-size: small;
					color: black;
					font-weight: bold;
				}
			}
		}

		div.sign-in
		{
			font-size: smaller;
		}

		div#signup-social + p
		{
			font-size: .7em;
			color: #505050;
		}

		form
		{
			label
			{
				display: none;
				vertical-align: top;

				html[dir='rtl'] &
				{
					text-align: right;
				}

				&.inline
				{
					display: inline-block;
					color: black;

					& + p
					{
						margin: 0 0 15px 30px;
						font-size: .7em;
						color: #505050;

						html[dir='rtl'] &
						{
							margin: 0 30px 15px 0;
						}
					}

					a
					{
						color: @accent-color;
					}
				}
			}

			input
			{
				&[type=checkbox]
				{
					padding: 0;
				}
			}

				input[type=text].text-box.password, input[type=text].text-box.confirm-password
				{
					display: none;
					color: #a9a9a9;
				}

				input.text-box
				{
					display: inline;

					&[type=password]
					{
						margin-top: 0;
					}

					&.password
					{
						margin-top: 0;
					}
				}

				input[type=submit]
				{
					padding: .5em 0;
					width: 100%;
					text-transform: uppercase;
				}

			div.passwords
			{
				margin: 5px 0 20px 0;

				#password-meter
				{
					margin-bottom: 10px;
				}
			}

			p.terms-of-use
			{
				text-align: center;
				color: #505050;
			}

			p.hint
			{
				margin: 0 0 0 3px;
				font-size: .7em;
				color: #505050;
				text-align: left;
				display: none;
				position: relative;
				top: -7px;
			}

			div.aside.invalid, div#id-available.aside.valid
			{
				background: none;
				padding: 0;
				left: 0;
				top: -10px;
				width: 320px;
				text-align: center;

				span.field-validation-error
				{
					display: inline-block;
					background: none;
					color: #c13a3f;
					padding: 0;
					font-weight: bold;

					html[dir='rtl'] &
					{
						margin-right: 1em;
					}
				}
			}

			span.field-validation-valid
			{
				display: none;
			}

			span.field-validation-error
			{
				display: block;
				background: none;
				color: #c13a3f;
				padding: 0;
				font-weight: bold;
			}

			div#password-meter
			{
				div
				{
					&.text
					{
						text-align: left;

						html[dir='rtl'] &
						{
							text-align: right;
						}
					}
				}

				.password-meter-weak
				{
					width: 50%;
				}

				.password-meter-good
				{
					width: 75%;
				}

				.password-meter-strong
				{
					width: 100%;
				}
			}

			.checkmark
			{
				display: none;
			}
		}
	}

	.signup-message
	{
		display: none;
	}
}

div#register-form.purchase
{
	box-shadow: none;
	padding: 20px 30px;

	div.form.register
	{
		background: none;
		padding: 0;
		margin: 0;
		overflow: hidden;
		border-radius: 0;

		html[dir='rtl'] &
		{
			padding: 0;
			margin: 0;
		}

		div.tabs
		{
			width: 405px;
			background: #f0f0ec;
			margin-bottom: 20px;
		}

		h3
		{
			text-align: center;
			display: inline-block;
			color: #6993a9;
			font-size: 18px;
			width: 200px;
			height: 45px;
			padding-top: 5px;
			margin-top: 10px;


			&:first-child
			{
				.margin-left-right(10px, 0);

				html[dir='rtl'] &
				{
					.margin-left-right(0, 10px);
				}
			}

			a
			{
				text-decoration: none;
				color: inherit;
				font: inherit;
				vertical-align: -webkit-baseline-middle;
			}

			&.active
			{
				color: @accent-color;
				background: white;
			}
		}

		input.text-box
		{
			width: 350px;
			margin-top: 0;
			background-image: none;
			border-radius: 3px;
			border: 1px solid #9bd2fe;

			html[dir='rtl'] &
			{
				padding: 5px 10px 5px 0;
			}
		}

		input[type='submit']
		{
			height: 40px;
			margin-top: 10px;
			font-size: 19px;
			width: 236px;
			height: 56px;
			border-radius: 4px;
		}

		label
		{
			width: 320px;
			margin: 0;
		}

		div.forms-container
		{
			min-height: 360px;

			form
			{
				& > p
				{
					margin: 0 0 15px;
				}

				.info-message
				{
					color: @charcoal-grey;
					font-size: 16px;
				}


				span.field-validation-error
				{
					font-size: 14px;
					font-weight: normal;
					margin-bottom: 5px;
					display: block;
					text-align: center;

					&.captcha
					{
						text-align: left;

						html[dir='rtl'] &
						{
							text-align: right;
						}
					}
				}

				div.passwords
				{
					margin-bottom: 5px;

					#password-meter
					{
						margin-bottom: 10px;
				}
				}

				#password-meter .text
				{
					font-size: 14px;
				}

				.checkboxes
				{
					margin-bottom: 10px;

					& + br
					{
						display: none;
					}
				}

				input[type=checkbox]
				{
					opacity: 0;
					position: relative;
					z-index: 1;
				}

				.checkmark
				{
					display: inline-block;
				}

				.terms-of-use
				{
					margin: 24px 0 28px;
					text-align: left;
					font-size: 16px;
					color: black;

					html[dir='rtl'] &
					{
						text-align: right;
					}

					a
					{
						font-size: 16px;
						text-decoration: underline;
						font-weight: normal;
					}
				}
			}

			a
			{
				font-size: 16px;
				text-decoration: none;
				font-weight: bold;

				&.forgot
				{
					display: block;
					padding: 0;
					margin-bottom: 5px;
				}
			}

			#no-account
			{
				font-size: 16px;
			}

			& > p
			{
				font-size: 16px;
				margin: 25px 0;
				color: #6993a9;
			}
		}
	}

	div#signup-social a
	{
		margin: 10px 0 0;
		vertical-align: middle;
		display: inline-block;
		width: 236px;
		height: 56px;
		font-size: 20px;
		position: relative;
		color: white;
		font-weight: normal;

		&::after
		{
			position: absolute;
		}

		&.facebook
		{
			padding: 15px 105px 0;

			&::after
			{
				content: "";
			}
		}

		&.linkedin
		{
			padding: 15px 110px 0;

			&::after
			{
				content: "";
			}
		}

		&.google
		{
			padding: 15px 115px 0;

			&::after
			{
				content: "";
			}
		}
	}
}

#login-form-community, #signup-form-community
{
	width: 910px;

	input.text-box
	{
		width: 370px;
	}
}

#redirect-form
{
	overflow: auto;
}

div.password-requirements
{
	font-size: 8pt;

	ul
	{
		margin: 0 0 5px 0;
		padding: 0 0 0 20px;

		html[dir='rtl'] &
		{
			padding: 0 20px 0 0;
		}
	}
}

a.tfa-resend
{
	display: inline-block;
	margin-top: 10px;
}

input.tfa-submit
{
	display: block;
}

input[type=checkbox]
{
	& + input[type=hidden] + .checkmark
	{
		display: inline-block;
		.hires("/img/v7/dsviewer/memberlist-member");
		background-position: -36px 0;
		background-repeat: no-repeat;
		width: 12px;
		height: 12px;
		position: relative;
		left: -12px;

		html[dir='rtl'] &
		{
			left: auto;
			right: -12px;
		}
	}

	&:checked + input[type=hidden] + .checkmark
	{
		background-position: -24px 0;
	}
}

div.sign-in
{
	text-align: center;
	margin-top: 30px;

	a
	{
		font-weight: bold;
		text-decoration: none;
	}
}



div#site-main.v7-community
{
	.wrapper, #login-form-community, .login-denied
	{
		@item-width: 240px;
		@item-height: 40px;
		@input-margin: 12px;
		@color-hover: lighten(@accent-color, 5%);

		padding: 0;
		margin: auto;

		label, #no-account
		{
			display: none;
		}

		#login-form
		{
			overflow: hidden;
		}

		h2
		{
			font-size: 21px;
			font-weight: bold;
			text-align: center;
		}

		.text-block
		{
			font-size: 16px;
			text-align: center;
			margin-bottom: 40px;

			a
			{
				font-weight: bold;
			}

			&.bottom-text
			{
				margin-top: 40px;
				display: block;
			}

			&.bigger, &.small, &.resend
			{
				width: 75%;
				max-width: 650px;
				.margin-left-right(auto, auto);
			}

			&.small-margin
			{
				margin-bottom: 10px;
			}
		}

		a.forgot
		{
			width: @item-width;
			text-decoration: none;
			outline: none;
			font-size: 14px;
			font-weight: bold;
			text-align: center;

			&:hover
			{
				color: @color-hover;
			}
		}

		input.text-box, #signup-form-community input.text-box
		{
			width: @item-width;
			height: @item-height;
			border-color: #e2e2e2;
			background-color: #f4f4f4;
			font-size: 14px;
			margin: 2*@input-margin auto;

			&.input-validation-error
			{
				border-color: #bd1e1e;
			}

			&#UserProfile_FirstName, &#EMail
			{
				margin-top: 0;
			}
		}

		#signup-form-community, div#login-native, #login-form
		{
			overflow: hidden;
			margin: auto;

			.register-fields
			{
				width: @item-width;
				margin: auto;
			}

			.password-requirements
			{
				display: none;
			}

			.password-helper
			{
				height: 2*@input-margin;
				font-size: 12px;
				margin: -2*@input-margin auto;
				color: #6c6c6c;
			}
		}

		div.form
		{
			display: inline-block;
			width: ~"calc(50% - 1px)";
			border-right: 1px solid #f2f2f2;
			float: left;
			padding: 1px 0;

			&.no-social
			{
				width: 100%;
				border-right: none;
			}

			html[dir='rtl'] &
			{
				border-left: 1px solid #f2f2f2;
				border-right: 0;
				float: right;
			}

			form input[type="submit"], input[type="button"]
			{
				display: block;
				width: @item-width;
				height: @item-height;
				font-size: 14px;
				margin: 2*@input-margin auto @input-margin auto;
				text-transform: uppercase;

				&:hover
				{
					background-color: @color-hover;
				}

				&.inactive
				{
					opacity: 0.5;
					cursor: default;

					&:hover
					{
						background-color: @accent-color;
					}
				}

				&.first-btn
				{
					margin-top: 0;
				}
			}

			form
			{
				width: @item-width;
				margin: auto;

				div#password-meter, div#password-meter div.meter, div#password-meter div.text
				{
					width: @item-width;
				}

				div#password-meter
				{
					margin: -2*@input-margin auto;
					overflow: hidden;
					height: 2*@input-margin;

					div.text
					{
						float: right;

						html[dir='rtl'] &
						{
							float: left;
						}
					}
				}

				.meter
				{
					.password-meter-too-short
					{
						background: #c8d7df;
					}

					.password-meter-weak
					{
						background: #bd1e1e;
						width: 50%;
					}

					.password-meter-good
					{
						background: #bd9e1e;
						width: 75%;
					}

					.password-meter-strong
					{
						background: @grass-green;
						width: 100%;
					}
				}
			}

			div.aside
			{
				top: auto;
				left: auto;
				padding-left: 0;
				background-image: none;

				&.invalid
				{
					display: block;
					margin: -2*@input-margin auto;
					height: 2*@input-margin;
				}

				span.field-validation-error
				{
					margin: 0;
				}
			}

			span.field-validation-error
			{
				display: block;
				margin: -2*@input-margin auto;
				width: @item-width;
				background-color: transparent;
				color: #bd1e1e;
				margin-bottom: 0;
				padding: 0;
				font-weight: bold;
				font-size: 11px;
				line-height: 1;
			}

			a.cancel, input[type="submit"].resend
			{
				display: block;
				text-align: center;
				padding: 8px 0;
				color: @accent-color;
				font-size: 14px;
				text-decoration: none;
				outline: none;
				background-color: transparent;
				font-weight: normal;
				text-transform: none;

				&:hover
				{
					background-color: transparent;
					color: @color-hover;
				}
			}

			input[type="submit"].resend
			{
				font-weight: bold;
				margin-top: 0;
				padding-top: 0;
			}
		}

		#signup-social.portal
		{
			display: inline-block;
			width: 50%;
			vertical-align: top;
			float: right;
			padding: 1px 0;

			html[dir='rtl'] &
			{
				float: left;
			}

			a
			{
				position: relative;
				width: ~"calc(@{item-width} - 40px)";
				height: @item-height;
				padding-left: 40px;
				display: block;
				margin: 0 auto 2*@input-margin auto;
				background-image: none;
				outline: none;

				html[dir='rtl'] &
				{
					.padding-left-right(0, 40px);
				}

				&:hover
				{
					background-image: none;
				}

				.logo
				{
					display: block;
					position: absolute;
					top: 1px;
					left: 1px;
					width: ~"calc(@{item-height} - 2px)";
					height: ~"calc(@{item-height} - 2px)";
					background-color: transparent;
					background-position: center;
					background-repeat: no-repeat;

					html[dir='rtl'] &
					{
						left: auto;
						right: 1px;
					}
				}

				.vertical-separator
				{
					display: block;
					position: absolute;
					width: 1px;
					background-color: #0277b5;
					height: @item-height;
					left: @item-height;

					html[dir='rtl'] &
					{
						left: auto;
						right: @item-height;
					}
				}

				&.facebook .logo
				{
					background-image: url('/img/v7/login/fb-white.svg');
				}

				&.google .logo
				{
					border-radius: 2px;
					background-color: white;
					background-image: url('/img/v7/login/google.svg');
				}

				&.linkedin .logo
				{
					background-image: url('/img/v7/login/in-white.svg');
				}

				&.internal
				{
					background-color: @charcoal-grey;

					.vertical-separator
					{
						background-color: black;
					}

					.logo
					{
						background-image: url('/img/v7/login/knoema.svg');
					}

					&:hover
					{
						background-color: #20282b;
					}
				}

				.text-box
				{
					display: block;
					position: absolute;
					height: 30px;
					background-color: transparent;
					text-align: center;
					font-size: 18px;
					top: 8px;
					left: 0;
					right: 0;
					color: white;
				}
			}
		}

		.terms-of-use
		{
			width: ~"calc(@{item-width} - 32px)";
			padding-left: 32px;
			margin: 2*@input-margin auto;
			background-image: url('/img/v7/checkbox.svg');
			background-position: 10px top;
			background-size: 14px;
			background-repeat: no-repeat;
			cursor: pointer;
			font-size: 12px;
			-moz-user-select: none;
			user-select: none;

			&.active
			{
				background-image: url('/img/v7/checkbox-active.svg');
			}

			html[dir='rtl'] &
			{
				.padding-left-right(0, 40px);
				background-position: calc(~'100% - 10px') top;
			}
		}

		.text-block, .terms-of-use
		{
			a
			{
				text-decoration: none;
				outline: none;

				&:hover
				{
					color: @color-hover;
				}
			}
		}
	}

	.login-denied .form
	{
		min-height: 195px;
	}
}