:root {
	--primary-color: #099;
	--primary-color-dark: #055;
	--primary-color-light: #acc;
	--primary-color-lighter: #ccc;
}

html, body {
	width: 100%;
	height: 100%;
}

html, body, label, input, button, select, textarea {
	font-family: roboto, sans-serif;
	font-size: 1em;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

label {
	display: block;
	padding: .2rem 0 .4rem;
}

input {
	border: none;
	outline: 1px solid #ccc;
	padding: .25rem;
}

input:focus {
	outline-width: 2px;
	outline-color: var(--primary-color);
}

button,
input[type="button"],
input[type="submit"] {
	border: none;
	outline: none;
	padding: .4rem .8rem;
	cursor: pointer;
	background: var(--primary-color-lighter)
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background: var(--primary-color-light)
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
	color: white;
	background: var(--primary-color)
}

.login {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 16rem;
	margin: 5rem 0 0;
	animation: .5s ease-in-out 0s 1 fade-in;
}

@keyframes fade-in {
	0% {
		opacity: 0;
		transform: translateY(-1rem);
		scale: .9 .85;
	}
	100% {
		opacity: 1;
		transform: translateY(0);
		scale: 1;
	}
}

.login__logo {
	background: url("img/logo.png") no-repeat;
	background-size: contain;
	width: 14rem;
	height: 7rem;
}

.login__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #e6e6e6;
	padding: 1rem;
	width: 100%;
}

.login__form-title {
	color: var(--primary-color-dark);
	font-size: 1.5em;
	font-weight: bold;
	margin: 1rem auto;
	text-align: center;
}

.login__form form {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.login__form-password-label  {
	
}

.login__form #password  {
	font-size: 1.5em;
	width: 8rem;
	display: block;
	margin: 0 0 .5rem;
	text-align: center;
	padding: .5rem;
}

.login__form input[type="submit"]  {
	font-size: 1.25em;
	text-transform: uppercase;
	padding: .7rem 1rem;
	margin: 1rem 0;
}

.login__online-users::before {
	content: 'Zurzeit sind ';
	font-weight: normal;
}

.login__online-users::after {
	content: 'Personen angemeldet';
	font-weight: normal;
}

.login__online-users  {
	margin: 1rem 0 0;
	color: #666;
	font-weight: bold;
}