.login-page {
	@main-border-color: lighten(#323435, 2%);
	@padding: 30px;
	
	background: @brand-primary;
	color: #fff;
	padding-top: 150px;
	
	.errors-container {
		margin-bottom: @base-margin;
		padding: 0 @padding;
	}
	
	.login-form {
		position: relative;
		padding: @padding;
		margin-bottom: @base-margin;
		//background: lighten(@brand-primary, 1%);
		
		&.fade-in-effect {
			//left: -40px;
			.opacity(0);
			.transition(~"all 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000)");
			
			@media screen and (max-width: @screen-sm){
				left: 0;
			}
			
			.form-group {
				@fg-delay: 150ms;
				
				position: relative;
				//top: -20px;
				.opacity(0);
				.transition(~"all 500ms ease-out");
				.transition-delay(@fg-delay * 1);
				
				//+ .form-group { .transition-delay(@fg-delay * 2); }
				//+ .form-group + .form-group { .transition-delay(@fg-delay * 3); }
				//+ .form-group + .form-group + .form-group { .transition-delay(@fg-delay * 4); }
			}
			
			+ .external-login {
				.opacity(0);
				.transition(~"all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000)");
				.transition-delay(100ms);
			}
			
			&.in {
				left: 0;
				.opacity(1);
				
				.form-group {
					top: 0;
					.opacity(1);
				}
				
				+ .external-login {
					.opacity(1);
				}
			}
		}
		
		.login-header {
			margin-bottom: @base-margin * 2;
			
			.logo {
				display: block;
				
				img {
					vertical-align: baseline;
				}
				
				span {
					padding-left: 3px;
					color: fade(@main-text-color, 60%);
					font-size: @font-size-h4 - 2;
					vertical-align: baseline;
				}
			}
			
			p {
				color: @main-text-color;
				font-size: @font-size-base;
				margin: 0;
				margin-top: @base-padding;
			}
		}
		
		.form-group {
			@padding-base-vertical: 20px;
			@label-line-height: 40px;
			
			position: relative;
			margin-bottom: @base-margin;
			
			.control-label {
				line-height: @label-line-height;
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				padding: 0 @base-padding+3;
				color: @main-text-color;
				cursor: text;
				&:extend(.transall);
			}
			
			.form-control {
				height: @label-line-height;
				.placeholder(fade(@main-text-color, 50%));
				&:extend(.transall);
				
				&.input-dark {
					background: #313334;
					border: 1px solid transparent;
					color: #fff;
					.placeholder(fade(#fff, 50%));
				}
				
				&.error {
					border-color: fade(@brand-danger, 50%);
				}
			}
			
			label.error {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				padding-right: @base-padding + 2;
				font-size: @font-size-small;
				line-height: @label-line-height;
				color: fade(#FFF, 70%);
			}
			
			&.validate-has-error {
				
				.form-control {
					border-color: fade(@brand-danger, 50%);
				}
			}
			
			&.is-focused {
				
				.control-label {
					.opacity(0);
					visibility: hidden;
				}
			}
			
			.btn {
				padding-top: @padding-base-vertical/1.8;
				padding-bottom: @padding-base-vertical/1.8;
				
				i {
					margin-right: @base-padding/2;
				}
				
				&.btn-dark {
					border-color: fade(@main-border-color, 90%);
					background-color: @brand-primary;
					color: #fff;
					
					&:hover {
						background-color: fade(@main-border-color, 30%);
					}
				}
			}
		}
		
		.login-footer {
			margin-top: 45px;
			
			a {
				color: @main-text-color;
				
				&:hover {
					color: lighten(@main-text-color, 15%);
				}
			}
			
			.info-links {
				@color: fade(@main-text-color, 70%);
				
				font-size: @font-size-small - 1;
				margin-top: @base-padding/2;
				color: @color;
				
				a {
					color: @color;
					
					&:hover {
						color: @main-text-color;
					}
				}
			}
		}
	}
	

	.external-login {
		position: relative;
		margin-bottom: @default-padding;
		padding: 0 @default-padding;
		
		a {
			display: block;
			color: #fff;
			background: @brand-primary;
			padding: @base-padding+3 @base-margin;
			font-size: @font-size-base + 2;
			margin-bottom: @base-padding;
			
			i {
				margin-right: @base-padding/2;
			}
			
			&:hover {
				background: lighten(@brand-primary, 10%);
			}
			
			&.facebook {
				@color: #3b5998;
				
				background-color: @color;
				
				&:hover {
					background-color: darken(@color, 10%);
				}
			}
			
			&.twitter {
				@color: #55acee;
				
				background-color: @color;
				
				&:hover {
					background-color: darken(@color, 10%);
				}
			}
			
			&.gplus {
				@color: #dd4b39;
				
				background-color: @color;
				
				&:hover {
					background-color: darken(@color, 10%);
				}
			}
		}
	}
	
	
	&.login-light {
		background: @background-color;
		
		.errors-container, .external-login {
			padding: 0;
		}
		
		.form-group {
			
			label.error {
				color: fade(@main-text-color, 80%);
			}
		}
		
		.login-form {
			background: #fff;
			color: @main-text-color;
			
			.login-footer {
				
				a {
					color: @secondary-color;
					
					&:hover {
						color: darken(@secondary-color, 10%);
					}
				}
				
				.info-links {
					@color: fade(@main-text-color, 70%);
					
					a {
						color: @color;
						
						&:hover {
							color: @main-text-color;
						}
					}
				}
			}
		}
	}
	
	@media screen and (max-width: @screen-sm){
		padding-top: 0;
		
		.login-form, 
		.errors-container,
		.external-login {
			padding-left: @base-padding;
			padding-right: @base-padding;
		}
		
		.errors-container {
			margin-top: @base-margin;
		}
		
		&.login-light {
			
			.login-form {
				padding-left: @default-padding;
				padding-right: @default-padding;
			}
			
			.errors-container,
			.external-login {
				padding-left: 0;
				padding-right: 0;
			}
		}
		
		.row {
			margin: 0;
		}
	}
}

.login-container {
	max-width: 960px;
	margin: 0 auto;
}


// Lockscreen
.lockscreen-page {
	background: @brand-primary;
	color: #fff;
	padding-top: 250px;
	
	@media screen and (max-width: @screen-sm){
		padding-top: @default-padding;
		
		.row {
			margin: 0 auto;
		}
	}
	
	.lockcreen-form {
		@thumb-width: 25%;
		
		&:extend(.clearfix all);
		
		.user-thumb {
			float: left;
			width: @thumb-width;
			//margin-right: @base-margin;
			
			img {
				.box-shadow(0 0 0 6px fade(#fff, 5%));
			}
		}
		
		.form-group {
			position: relative;
			float: left;
			width: 100% - @thumb-width;
			padding-left: @default-padding;
			
			h3 {
				margin: 0;
			}
			
			p {
				color: @main-text-color;
				font-size: @font-size-base;
				margin: 0;
				margin-top: @base-padding;
			}
			
			.input-group {
				@main-border-color: lighten(#323435, 5%);
				@padding-base-vertical: 20px;
				@label-line-height: 40px;
				
				position: relative;
				margin-top: @base-margin;
				
				.form-control {
					background: transparent;
					border: 1px solid @main-border-color;
					color: #fff;
					height: @label-line-height;
					&:extend(.transall);
					
					&.error {
						border-color: fade(@brand-danger, 50%);
					}
				}
				
				label.error {
					position: absolute;
					top: 100%;
					left: 0;
					padding-top: @base-padding;
					color: fade(#fff, 60%);
					font-size: @font-size-small;
				}
				
				.input-group-btn {
					padding-left: @base-padding;
				
					.btn {
						border: 1px solid @main-border-color;
						padding: @padding-base-vertical/2 @base-margin;
						
						&:hover,
						&:focus {
							background-color: fade(@main-border-color, 30%);
						}
					}
				}
			}
		}
		
		&.fade-in-effect {
			
			.user-thumb {
				position: relative;
				//left: -40px;
				//.rotate(-90deg);
				.opacity(0);
				.transition(~"all 800ms ease-in-out");
			}
			
			.form-group {
				//top: -50px;
				.opacity(0);
				.transition(~"all 500ms ease-in-out");
				
				.input-group {
					//top: -25px;
					.opacity(0.5);
					.transition(~"all 800ms ease-in-out");
				}
			}
			
			&.in {
			
				.user-thumb {
					.rotate(0deg);
					.opacity(1);
					left: 0;
				}
			
				.form-group {
					top: 0px;
					.opacity(1);
					
					.input-group {
						top: 0px;
						.opacity(1);
					}
				}
			}
		}
		
		@media screen and (max-width: @screen-sm){
			
			.user-thumb,
			.form-group {
				float: none;
				width: 100%;
			}
			
			.user-thumb {
				text-align: center;
				margin-bottom: @default-padding;
				
				a {
					display: inline-block;	
				}
			}
			
			.form-group {
				padding-left: 0;
				text-align: center;
			}
		}
	}
}