.LoginLayout {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	
	//workaround for show background only on login screen
	html.mobile & {
		.theme-main-background();
	}
	
	.vhelper {
		display: inline-block;
		display: none;
		height: 100%;
		vertical-align: middle;
		width: 0px;
	}
}

.login_panel {
	.theme-login-panel();
	
	@borderColor: #cac7c7;
	@focusedBorderColor: #cfbf8e;
	
	.box-sizing;
	
	color: #929292;
    display: inline-block;
	font-size: 9pt;
	padding: 20px;
    vertical-align: middle;
	width: 280px;
	
	.header {
		height: 95px;
		margin-bottom: 30px;
	
		&.custom_logo {
			background: none;
			height: auto;
		}
		
		.icon {
			display: inline-block;
			line-height: 1;
			vertical-align: middle;
		}
		
		.text {
			display: none;
		}
		
		.theme-login-header();
	}
	
	.welcome {
		margin-bottom: 20px;
		font-size: 14px;
		
		.name {
			font-style: italic;
			font-size: 17px;
			color: #6d5454;
		}
	}
	
	.login_panel_content {
		.perspective(4000px);
		
		position: relative;
		
		.col {
			.perspective(4000px);

			&.left {
				margin-right: 276px;
				padding-right: 20px;
				text-align: center;
			}
			
			&.right {
				position: absolute;
				right: 0px;
				width: 276px;
			}
		}
		
		.content {
			box-shadow: 0px 0px 0px #ffffff;
			float: left;
			margin-top: 0px;
			opacity: 1;
			visibility: visible;
			width: 100%;

			@animDuration: 600ms;

			-webkit-transition: -webkit-transform @animDuration ease-in-out, opacity @animDuration*0.2 linear @animDuration*0.4, visibility 1ms linear @animDuration/2, margin-top 0ms linear @animDuration/2;
			-moz-transition: -moz-transform @animDuration ease-in-out, opacity @animDuration*0.2 linear @animDuration*0.4, visibility 1ms linear @animDuration/2, margin-top 0ms linear @animDuration/2;
			transition: transform @animDuration ease-in-out, opacity @animDuration*0.2 linear @animDuration*0.4, visibility 1ms linear @animDuration/2, margin-top 0ms linear @animDuration/2-10;
			
			&.register,
			&.changepass,
			&.social_register  {
				left: 50%;
				margin-left: -130px;
				position: relative;
				width: 260px;
			}

			&.send_question {
				.transform(rotateY(0deg));

				.question {
					.box-sizing;
					
					border: 1px solid #d7d7d7;
					border-radius: 4px;
					box-shadow: 0 1px 1px #dddddd inset;
					color: #000000;
					font-size: 11pt;
					height: 214px;
					padding: 6px 8px;
					resize: none;
					width: 100%;
				}
			}
			
			&.forgot .row {
				border-radius: 4px !important;
			}

			&.register,
			&.changepass,
			&.social_register {
				text-align: center;
			}

			&.social_register .question_title,
			&.send_question .question_title {
				color: #929292;
				display: block;
				font-size: 11pt;
			}

			&.forgot,
			&.changepass,
			&.register,
			&.signin,
			&.activation,
			&.changepass,
			&.social_register {
				.transform(rotateY(180deg));
				
				margin-top: -100000px;
				opacity: 0;
				visibility: hidden;
			}
			
			&.activation {
				.transform(rotateY(180deg));
				
				font-size: 12pt;
				text-shadow: 0px 1px 0px #f3f3f3;
				white-space: normal;
				width: 240px;
			}
		}
	}
		
	&.flipForgot .content.login,
	&.flipChangepass .content.send_question,
	&.flipRegister .content.login,
	&.flipRegister .content.send_question,
	&.flipRegister.flipForgot .content.forgot,
	&.flipSignin .content.login,
	&.flipSocialRegister .content.login,
	&.flipSocialRegister .content.send_question,
	&.flipActivation .content.login,
	&.flipChangepass .content.login {
		.transform(rotateY(180deg));
		
		margin-top: -100000px;
		opacity: 0;
		visibility: hidden;
	}
	
	&.flipForgot .content.forgot,
	&.flipChangepass .content.changepass,
	&.flipRegister .content.register,
	&.flipSignin .content.signin,
	&.flipSocialRegister .content.social_register {
		.transform(rotateY(360deg));
		
		margin-top: 0px;
		opacity: 1;
		visibility: visible;
	}
	
	&.flipActivation .content.activation {
		.transform(rotateY(0deg));
		
		margin-top: 0px;
		opacity: 1;
		visibility: visible;
	}
	
	.description {
		color: #929292;
		margin-top: 20px;
	}

	.social_description {
		background: #d7dcdf;
		border: 1px solid #c7cccf;
		border-radius: 4px;
		color: #464646;
		margin: 20px;
		margin-left: -85px;
		padding: 10px;
		width: 400px;
	}
		
	.row {
		background:#ffffff;
		border: 1px solid @borderColor;
		margin: -1px 0px 0px;
		padding: 10px;
		padding-left: 30px;
		text-align: right;
		white-space: nowrap;

		&.focused {
			background: @focused-background;
			border-color: @focusedBorderColor;
			position: relative;
		}

		&.shake {
			.animation(shake 0.8s linear);
		}

		&:first-child {
			border-radius: 4px 4px 0px 0px;
			box-shadow: 0 1px 1px #dddddd inset;
		}

		&:last-child {
			border-radius: 0px 0px 4px 4px;
			border-width: 1px;
		}

		.value {
			vertical-align: middle;

			&.suffix {
				margin-left: 16px;

				.text {
					color: #777777;
					font: 12pt Helvetica,Tahoma,Arial,sans-serif;
				}
			}
		}

		.placeholder {
			display: inline-block;
			cursor: text;
			float: none;
			font-size: 12pt;
			height: 20px;
			margin-left: -20px;
			position: relative;
			text-indent: 0px;
			vertical-align: middle;
			width: 20px;
			zoom: 1;
			
			html.rtl & {
				margin-left: 0px;
				margin-right: -20px;
			}
			
			.init-icon-font();
			&:before {
				color: #d5d4d2;
				display: inline-block;
				font-size: 22px;
				height: 20px;
				margin-right: 4px;
				margin-top: -6px;
				vertical-align: middle;
				width: 20px;
				
				html.rtl & {
					margin-left: 4px;
					margin-right: 0px;
				}
			}
		}
		
		&.filled .placeholder:before,
		&.focused .placeholder:before {
			color: #cbc9c6;
		}
		
		&.email > .placeholder:before {
			content: "\e627";
		}
		
		&.password > .placeholder:before {
			content: "\e625";
		}
		
		&.name > .placeholder:before,
		&.login > .placeholder:before {
			content: "\e626";
		}
		
		&.question,
		&.answer {
			padding-left: 10px;
			
			html.rtl {
				padding-right: 10px;
			}
			
			.placeholder {
				width: 0px;
			}
		}
		
		.input {
			background: transparent;
			border: 0px !important;
			border-radius: 0px;
			box-shadow: none;
			color: #444;
			display: inline-block;
			font: 12pt Helvetica,Tahoma,Arial,sans-serif;
			outline: none;
			padding: 1px 0px;
			text-align: left;
			text-indent: 3px;
			width: 100%;

			&:focus {
				box-shadow: none;
			}

			&:-webkit-autofill {
				-webkit-box-shadow: 0 0 0 1000px white inset !important;

				&:focus {
					-webkit-box-shadow: 0 0 0 1000px #fff3ce inset !important;
				}
			}
		}
	}
	
	.custom_checkbox.focus {
		box-shadow: 0px 4px 3px -3px #e5e5e5 inset, 0 0 2px 0 #1d67cd;
		
		.icon {
			border: 1px solid #ffffff;
		}
	}

	.signme,
	.links {
		background: none;
		border: 0px;
		border-radius: 0px;
		font-size: 9pt;
		margin-bottom: 14px;
		padding: 0px;
		text-align: left;

		html.rtl & {
			text-align: right;
		}
	}
	
	.signme {
		.signme_label {
			cursor: pointer;
			font-size: 9pt;
			height: auto;
			text-indent: 0px;
			width: auto;
		}

		input {
			vertical-align: middle;
		}
	}
	
	.links .forgot {
		float: right;
		margin-left: 16px;
	}
	
	&.login .row.login {
		border-radius: 4px 4px 0px 0px;
	}
	
	&.login.email .row.login {
		border-radius: 0px;
	}
}
