.login, .register {
	overflow: hidden;
	height: 100%;

	.login-block, .register-block {
		border-radius: 2px;
		padding: 25px 55px;
		width: 500px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		z-index: 1;

		@media (max-width: @screen-xs-max) {
			padding: 20px;
			width: ~"calc(100% - 60px)";
		}

		.checkbox {
			margin: 5px 5px 15px;
			text-align: left;
		}
	}

	.login-block {
		margin-top: 110px;
	}

	.register-block {
		margin-top: 90px;
	}

	ul.alternate-auth {
		margin-bottom: 0;
		padding-left: 0;

		li {
			display: inline;
			margin-right: 5px;
			margin-left: 5px;
		}
	}
}

div.login, div.register {
	text-align: center;

	&:after {
		content: "";
		vertical-align: middle;
		display: inline-block;
		width: 1px;
		height: 100%;
	}

	&:before {
		height: 50%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		z-index: 0;
	}

	.login-options, .register-options {
		margin-top: 10px;
	}
	
	.input-group-addon {
		color: @body-color;
	}
}

.fa-facebook-square {
	color: #3b5998;
	background: transparent;
}

.fa-twitter-square {
	color: #2fc2ef;
	background: transparent;
}

.fa-google-plus-square {
	color: #df5138;
	background: transparent;
}

.fa-dropbox {
	color: #2895F1;
	background: transparent;
}

.tos {
	border: 1px solid #ccc;
	text-align: left;
	height: 100px;
	margin-top: 5px;
	margin-left: 5px;
	overflow-y: scroll;
	padding: 10px;
}

.login {
	.input-group {
		margin-bottom: 20px;
	}
}

.register-success {
	.form-control {
		border-color: @material-success;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
		padding-right: 2.25rem;
	    background-repeat: no-repeat;
	    background-position: center right .625rem;
	    -webkit-background-size: 1.25rem 1.25rem;
	    background-size: 1.25rem 1.25rem;
	}
	
	.register-feedback {
		color: @material-success;
		display: block;
		margin-top: .25rem;
		font-size: 12px;
	}
}

.register-danger {
	.form-control {
		border-color: @material-danger;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
		padding-right: 2.25rem;
	    background-repeat: no-repeat;
	    background-position: center right .625rem;
	    -webkit-background-size: 1.25rem 1.25rem;
	    background-size: 1.25rem 1.25rem;
	}
	
	.register-feedback {
		color: @material-danger;
		display: block;
		margin-top: .25rem;
		font-size: 12px;
	}
}