////////////////////////////////////////////////////////////////////////////////
// body (public)
////////////////////////////////////////////////////////////////////////////////
.public {
	height: 100%;
	background-image: url(../img/wave01.svg),
					  url(../img/wave02.svg),
					  url(../img/wave03.svg);
	background-repeat: repeat-x;
	background-position: left bottom;

}
////////////////////////////////////////////////////////////////////////////////
// .login-form / .register-page
////////////////////////////////////////////////////////////////////////////////
.login-page,
.register-page,
.recovery-page,
.reset-page {
	position: relative;
	width: 375px;
	padding: 48px 24px 24px 24px;
	border: 1px solid var(--border-default);
	margin: 60px auto 0 auto;
	background-color: var(--white);
	box-shadow: 0 0 20px rgba(0,0,0, 0.1)
}

////////////////////////////////////////////////////////////////////////////////
// .login-form / .register-form
////////////////////////////////////////////////////////////////////////////////
.login-form .br-button,
.register-form .br-button,
.recovery-form .br-button,
.reset-form .br-button {
	padding: 10px 16px;
	font-size: 18px;
}

////////////////////////////////////////////////////////////////////////////////
// .public-logo
////////////////////////////////////////////////////////////////////////////////
.public-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.public-logo > img {
	margin-right: 8px;
}

.public-logo > h1 {
	color: var(--brand-default);
	margin: 0;
	font-weight: 700;
}

////////////////////////////////////////////////////////////////////////////////
// .account-options
////////////////////////////////////////////////////////////////////////////////
.account-options {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 12px;
	text-align: center;
	font-size: 1.2em;
}

.br-button.register {
	padding: 10px 16px;
}

////////////////////////////////////////////////////////////////////////////////
// .language-selector
////////////////////////////////////////////////////////////////////////////////
.language-selector {
	width: 375px;
	margin: 24px auto 0 auto;
	text-align: center;
}

.language-selector h2 {
	font-size: 1.2em;
	font-weight: 400;
	margin: 0 0 8px 0;
}

.language-selector h2 .fa {
	font-size: 2rem;
}

.language-list {
	display: flex;
	justify-content: center;
	padding: 0;
	list-style: none;
}

.language-list li::after {
	content: "|";
	display: inline-block;
}

.language-list li:last-child::after {
	display: none;
}

.language-list li a {
	margin: 4px;
}