#loginPage {
	@include overflow-scroll;

	div.loginForm {
		@include flexbox;
		@include flex-direction(column);
		@include align-items(stretch);

		height: 100%;
		
		text-align: center;
		background-color: $main-color;

		header {
			@include flex(1);
			@include icon-font();

			font-size: 48pt;
			color: $main-alternate-text-color;
		}

		div.form {
			@include flex(4);
			margin-left: auto;
			margin-right: auto;

			form {
				position: relative;
				background: $main-alternate-text-color;

//				@include border-radius(10px);
				padding: 20px;
				margin-bottom: 50px;
/*			
				&:after {
					content: "";
					position: absolute;
					top: -15px;
					margin-left: 50%;
					left: -15px;
					border-style: solid;
					border-width: 0 15px 15px;
					border-color: $main-alternate-text-color transparent;
					display: block;
					width: 0;
					z-index: 1;
				}			
*/
				label {
					display: none;
				}

				input {
					font-family: "clipperz-font";
					display: block;
//					@include border-radius(4px);
					padding: 5px;
					margin-top: 5px;
					margin-bottom: 10px;
					font-size: 100%;
//					box-shadow:inset 0 0 0;
					font-size: 24pt;
					width: 100%;
				}

				button {
					font-family: "clipperz-font";
					min-height: 48px;
					min-width: 48px;

					color: white;
					font-size: 24pt;
					font-weight: 500;
					border: 0px;

					padding: 10px 25px;

					border: 1px solid white;
					background-color: $main-color;
					@include transition(background-color font-weight, 0.2s, linear);

					&:hover {
					};

					&:disabled {
						font-weight: 100;
						background-color: #c0c0c0;
						cursor: default;

						&:hover {
						};
					}
				}
			}
		}


		div.registrationLink {
			@include flex(1);

			color: $main-alternate-text-color;
			background-color: $main-alternate-color;
			cursor: pointer;
			font-size: 24pt;

			&:before {
				content: "> ";
			};

			a {
			}
		}
	}


	div.loginForm.extra-short {
		header {
//			@include flex(1);
			font-size: 18pt;
		}

		div.form {
//			@include flex(6);
			form {
				padding: 10px;
				margin-bottom: 20px;

				input {
					padding: 3px;
					margin-top: 3px;
					margin-bottom: 5px;
					font-size: 16pt;
				}

				button {
					min-height: 20px;

					font-size: 12pt;
					padding: 3px 10px;
					border: 1px solid white;
				}
			}
		}

		div.registrationLink {
//			@include flex(2);
			font-size: 14pt;
		}
	}

}