* {
	border-sizing:content-box;
}
html, body {
	padding:0;
	margin:0;
	font-family:"Montserrat",tahoma,arial,sans-serif;
	background-color:#222228;
	color:#eee;
}

#container {
	width:100vw;
	height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

#main {
	flex:1;
	align-self:stretch;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
#header {
	align-self:stretch;
	padding:.5em 1em;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
}
#header > div:nth-child(2) {
	display:flex;
	align-items:center;
	flex-direction:row;
	justify-content:flex-start;
	font-size:x-large;
}
#header > div > img {
	border-radius:.5em;
	margin-right:1em;
}
#footer {
	align-self:stretch;
	font-size:small;
	text-align:right;
	padding:.5em 1em;
}

/* Login */
#login {
	padding:10px;
	margin:10px auto;
	width:25%;
	display:flex;
	flex-direction:column;
	align-items:center;
	align-content:center;
	justify-content:center;
	background:#555666;
	border:2px solid #aaa;
	border-radius:5px;
}
#login form {
	margin:0;
}
#login input {
	padding:5px;
}
.login {
	text-align:center;
	border-radius:5px;
	padding:5px;
	margin:0 auto;
	font-size:small;
	border:1px solid #333;
	background:#ccc;
	background:linear-gradient(0deg, rgba(187,187,187,1) 0%, rgba(238,238,238,1) 100%);
}
.login:hover {
	cursor:pointer;
	background:#ccc;
	background:linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(187,187,187,1) 100%);
}
.loginRow {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	align-content:center;
	margin:5px;
}
.login i {
	padding:5px;
}
.error {
	text-align:center;
	margin:5px;
	font-size:small;
	color:#ccc;
	background:#3e3d40;
}
.errorWindow {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
}
.errorWindow > div {
	margin:10px;
	padding:10px;
	border-radius:5px;
	border:1px solid #e21c40;
	background:#3e3d40;
	color:#ccc;
}
.titleRow {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	align-content:center;
}
.formRow, .input-form-row {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	align-content:center;
	border-radius:5px;
	margin:10px;
	padding:10px;
	border:1px solid #eee;
	color:#ccc;
}
.formRow:last-child {
	justify-content:space-around;
	padding:0;
	border:none;
}
.wrapper > div {
	border-radius:5px;
	padding:10px;
	margin:10px;
	border:1px solid #2f2e30;
	color:#ccc;
	background:#3e3d40;
}
.wrapper > div > span {
	margin:0 10px;
}
.wrapper > div > p > a {
	color:#ccc;
}
.wrapper > div > p {
	color:#ccc;
	padding:.25em .5em;
}
.input-form {
	background-color:#2f2e30;
	border:1px solid #ccc;
	border-radius:5px;
	margin:10px;
	padding:10px;
}
.input-error {
	border:3px solid red;
	background-color:#f99;
}
.options-visible {
	display:block;
}
.options-hidden {
	display:none;
}
.wrapper h4 {
	margin:0;
}
/* End Login */