/* Regular */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Open Sans Light'), local('OpenSans-Light'), url(/fonts/OpenSans-300.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fonts/OpenSans-400.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/fonts/OpenSans-600.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/fonts/OpenSans-700.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #8ea538 linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 100%);
	background: rgb(239, 243, 246) linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 100%);
	background: #8ea538 linear-gradient(to right, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 100%);
	background: #2d353c;
	background: #f4f6f9;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
	-moz-user-select: none;
	user-select: none;
}

h1 {
	margin: 25px 0;
	padding: 0;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	color: #000;
}

#noscript {
	position: absolute;
	top: 50%; left: 50%;
	max-width: 100%;
	padding: 15px;
	font-family: sans-serif;
	font-size: 16px;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}
#noscript > div {
	padding: 15px;
	background: #e57373;
	box-sizing: border-box;
}

#login {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 550px;
	max-width: 100%;
	padding: 15px;
	background: #8ea538;
	background: #fff;
	transform: translateX(-50%);
	box-sizing: border-box;
	z-index: 2;
}

#logo {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 15px;
	opacity: .5;
	box-sizing: border-box;
	z-index: -1;
}
#logo > svg {
	display: block;
	width: 100%;
	fill: #000;
}

#form {
	display: block;
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
}
#form .input-wrapper {
	margin: 10px 0;
}
#form .button {
	margin: 15px auto;
}

#fail {
	padding: 10px 15px;
	border: 1px solid #EF5350;
	background: #FFCDD2;
	font-size: 1em;
	font-weight: bolder;
	text-align: center;
	box-sizing: border-box;
}

.input,
.input-wrapper,
.button,
.select,
.textarea {
	display: block;
	border: none;
	border-radius: 2px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	outline: none;
	filter: none;
	transition: background .2s, opacity .2s;
	box-sizing: border-box;
}
.input,
.input-wrapper,
.button,
.select {
	height: 35px;
}
.input,
.textarea {
	padding: 8px 10px;
	background: rgba(250, 250, 250, 1);
	background: rgba(240, 240, 240, 1);
	color: #000;
}
.input:focus,
.input-wrapper:focus-within {
	background: rgba(245, 245, 245, 1);
	background: rgba(225, 225, 225, 1);
}
.input::placeholder {
	color: #bbb;
	opacity: 1
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(240, 240, 240, 1);
	padding: 8px 10px;
}
.input-wrapper .input,
.input-wrapper .textarea {
	flex: 1;
	min-width: 0;
	padding: 0;
	height: auto;
}

.button {
	display: flex;
	align-items: center;
	padding: 7px 12px;
	background: #ccc;
	background: #bbb;
	color: #fff;
	font-weight: bolder;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
}
.button:hover {
	background: #1e96c9;
}
.button:focus {
	outline: none;
}
.button > div {
	display: flex;
	align-items: center;
	pointer-events: none;
}
.button.button-highlight {
	background: #0f7faf;
}
.button.button-highlight:hover {
	background: #1e96c9;
}

@media screen and (min-width: 800px) {

	/*
	#login {
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
	}
	*/

}