/* ========================================================
*
* Melon - Flat & Responsive Admin Template
*
* ========================================================
*
* File: login.css
* Description: Login template styling
* Version: 1.0
*
* ======================================================== */

@import "general/mixins.less";
@import "general/variables.less";

// Login Specific Variables
@loginWidth: 350px;

.login {
	background-color: @grayLighter;
	padding-top: 60px;

	.logo, .single-sign-on, .footer {
		margin: 0 auto;
		text-align: center;
	}

	.logo {
		padding: 15px;
		font-size: (@baseFontSize + 10px);
	}

	.box {
		background-color: #fff;
		width: @loginWidth;
		margin: 0 auto;
		border: 1px solid @grayLightBorder;
		border-top: 5px solid @mainColor;

		.content {
			padding: 30px;
			padding-top: 10px;
			padding-bottom: 15px;
		}

		form {
			padding: 0;
			margin: 0;
		}

		.form-title {
			text-align: center;
			font-weight: 300;
			margin-bottom: 25px;
		}

		.form-group {
			margin: 0;
			padding: 0;

			margin-bottom: 15px;
		}

		.form-actions {
			background-color: #fff;
			border-top: none;
			padding: 10px 0;
			margin: 0;
		}

		.input-icon {
			position: relative;

			input {
				border-left: 2px solid @mainColor;
			}
		}

		.has-error .input-icon input {
			border-left-color: #b94a48;
		}
		.has-success .input-icon input {
			border-left-color: #468847;
		}

		.checkbox {
			margin-top: 7px;
		}

		/* * * * * * * * * * * *
		 * Inner Box
		 * * * * * * * * * * * */

		.inner-box {
			background-color: @grayLighter;
			border-top: 1px solid darken(@grayLightBorder, 10%);
			.box-shadow(0 1px 1px rgba(0, 0, 0, 0.05) inset);

			.content {
				padding: 12px 30px;
				text-align: center;
			}

			a {
				color: @textColor;
				font-size: (@baseFontSize - 1px);
				font-weight: 600;

				&:hover {
					text-decoration: none;
					color: @mainColor;
				}
			}

			.close {
				font-size: (@baseFontSize - 1px);
				margin-top: -3px;
				margin-right: -20px;

				&.hide-default {
					display: none;
				}
			}

			form {
				margin-top: 10px;
				margin-bottom: 10px;
			}

			a + form {
				margin-top: 20px;
			}

			.form-group {
				margin-bottom: 10px;
			}

			.forgot-password-done {
				padding: 10px 0;

				.success-icon, .danger-icon {
					display: block;
					font-size: (@baseFontSize + 17px);
					padding: 15px;
					padding-top: 0;
				}

				.success-icon {
					color: @green;
				}

				.danger-icon {
					color: @red;
				}

				span {
					font-weight: 600;
				}
			}
		}
	}

	.single-sign-on {
		width: @loginWidth;
		padding: 15px 0;
		opacity: 0.5;
		.transition(opacity 200ms ease-out);

		&:hover {
			opacity: 1;
		}

		span {
			text-transform: uppercase;
			font-weight: 600;
			margin-bottom: 15px;
			display: block;
			color: lighten(@textColor, 20%);
		}

		.btn i {
			padding-right: 5px;
		}
	}

	.footer {
		width: @loginWidth;
		padding-top: 30px;

		a {
			font-size: (@baseFontSize);
			color: lighten(@textColor, 10%);

			&:hover {
				text-decoration: none;
				color: @mainColor;
			}
		}
	}

	/* Helper */
	.spacing-top {
		padding-top: 7px !important;
	}
}