.loginForm > form {
	.userLoginButtons {
		margin-top: 20px;
		text-align: center;
	}
	
	.thirdPartyLogin {
		flex: 0 0 100%;
		
		& + .thirdPartyLogin {
			margin-top: 10px;
		}
		
		.thirdPartyLoginButton {
			align-items: center;
			display: flex;
			border-width: 0;
			color: rgba(255, 255, 255, 1);
			
			> .icon {
				flex: 0 0 24px;
			}
			
			> span:not(.icon) {
				flex: 1 1 auto;
				margin-left: 5px;
			}
			
			/* branding */
			&.googleLoginButton {
				background-color: rgb(255, 255, 255);
				border: 1px solid rgb(233, 233, 233);
				color: rgb(51, 51, 51);
				
				&:hover {
					background-color: rgb(255, 255, 255);
				}
				
				.fa-google {
					background-image: url(data:image/png;base64,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);
					background-repeat: no-repeat;
					background-size: contain;
					
					&::before {
						display: none;
					}
				}
			}
			
			&.facebookLoginButton {
				background-color: rgb(59, 89, 152);
				
				&:hover {
					background-color: rgb(48, 72, 123);
				}
			}
			
			&.twitterLoginButton {
				background-color: rgb(85, 172, 238);
				
				&:hover {
					background-color: rgb(48, 154, 234);
				}
			}
			
			&.githubLoginButton {
				background-color: rgb(68, 68, 68);
				
				&:hover {
					background-color: rgb(48, 48, 48);
				}
			}
		}
	}
}

@include screen-md-up {
	.loginForm:not(.loginFormLoginOnly) > form {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		
		-webkit-column-gap: 40px;
		-moz-column-gap: 40px;
		column-gap: 40px;
		
		> .section {
			/* Sections should never be split, but Firefox, IE and Edge don't seem
			   to care about this despite advertising the support for it. We can work
			   around this by using `overflow: hidden` which magically does the job,
			   but doesn't affect Chrome which properly breaks anyway. */
			
			margin-top: 0;
			overflow: hidden; /* Fix for Firefox, IE and Edge */
			
			-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
			page-break-inside: avoid; /* Firefox */
			break-inside: avoid; /* IE 10+ */
			
			&.loginFormLogin {
				page-break-after: always;
				break-after: always;
				-webkit-column-break-after: always;
			}
			
			&.loginFormRegister {
				margin-top: 0;
				
				& + .loginFormThirdPartyLogin {
					margin-top: 30px;
				}
			}
		}
	}
}

@include screen-md-up {
	/* full page login: missing margin due to different DOM */
	.contentHeader ~ .loginForm {
		margin-top: 30px;
	}
	
	/* force columns to be 300px wide in login overlay */
	.dialogContent .loginForm:not(.loginFormLoginOnly) .section {
		width: 300px;
	}
}

.loginFormLogin > .section {
	margin-top: 30px !important;
}