/* https://google-webfonts-helper.herokuapp.com/ */

@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 300;
	src: local('Merriweather Light'), local('Merriweather-Light'),
		url('fonts/merriweather-v10-latin-300.woff2') format('woff2'),
		url('fonts/merriweather-v10-latin-300.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: italic;
	font-weight: 300;
	src: local('Merriweather Light Italic'), local('Merriweather-LightItalic'),
		url('fonts/merriweather-v10-latin-300italic.woff2') format('woff2'), 
		url('fonts/merriweather-v10-latin-300italic.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 700;
	src: local('Merriweather Bold'), local('Merriweather-Bold'),
		url('fonts/merriweather-v10-latin-700.woff2') format('woff2'),
		url('fonts/merriweather-v10-latin-700.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Merriweather';
	font-style: italic;
	font-weight: 700;
	src: local('Merriweather Bold Italic'), local('Merriweather-BoldItalic'),
		url('fonts/merriweather-v10-latin-700italic.woff2') format('woff2'),
		url('fonts/merriweather-v10-latin-700italic.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Merriweather Sans';
	font-style: normal;
	font-weight: 300;
	src: local('Merriweather Sans Light'), local('MerriweatherSans-Light'),
		url('fonts/merriweather-sans-v7-latin-300.woff2') format('woff2'),
		url('fonts/merriweather-sans-v7-latin-300.woff') format('woff');
}/* Soda Reset */
*{box-sizing:inherit}
[hidden]{display:none!important}
a,mark{color:inherit}
a,abbr{text-decoration:none}
abbr,button,fieldset,img,hr,table{border:0}
address,b,button,caption,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,input,pre,select,small,strong,sub,sup,textarea,th,var{font:inherit}
blockquote,body,button,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,menu,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
button::-moz-focus-inner{border:0;padding:0}
button{border-radius:0}
button,mark{background:none}
canvas,iframe,img,svg,video{max-width:100%}
html{box-sizing:border-box;font-size:62.5%;min-height:100%;position:relative;text-align:center}
main{display:block}
menu,ol,ul{list-style:none}
sup,sub{line-height:0}
svg{max-height:100%}
table{border-collapse:collapse;border-spacing:0}
template{display:none}
textarea{resize:vertical}button,
a.Button {
	cursor: pointer;
	display: inline-block;
	font-size: 1.4rem;
	line-height: 3;
	margin: .5em 1rem;
	min-width: 7em;
	outline: none;
	padding: 0 1rem;
}

	button:disabled {
		cursor: auto;
	}

	button.seamless {
		background: none;
	}

	button.link {
		background: none;
		color: inherit;
		font-size: inherit;
		line-height: inherit;
		margin: 0;
		min-width: 0;
		padding: 0;
		text-decoration: underline;
	}

		button.link:hover {
			background: none;
		}

/* colors & customization */

button,
a.Button {
	background-color: #0abc7e;
	color: #ebf7f3;
	text-transform: lowercase;
	transition: all .5s;
}

	button:hover,
	button:focus {
		background-color: #0ceb9d;
	}

	button:disabled {
		background-color: #2e2e2e;
		color: #5e5e5e;
		cursor: auto;
	}

	button.negative {
		background-color: #ed4f48;
	}

	button.negative:hover {
		background-color: #ff554c;
	}.Icon {
	display: inline-block;
	height: 4rem;
	padding: .4rem;
	vertical-align: middle;
	width: 4rem;
}

	.Icon.xs {
		padding: 1.2rem;
	}

	.Icon.s {
		padding: .8rem;
	}

	.Icon.l {
		height: 4.8rem;
		width: 4.8rem;
	}

		.Icon > svg {
			display: block;
		}

	.Icon.edge {
		padding: 0;
	}


	button.Icon {
		background-color: transparent;
		margin: 0;
		min-width: 0;
		outline: none;
	}

/* colors & customization */

	.Icon {
		fill: #ebf7f3;
		stroke: #ebf7f3;
	}

	.Icon.negative:hover {
		fill: #ed4f48;
		stroke: #ed4f48;
	}

	button.Icon:hover,
	button.Icon:active,
	button.Icon:focus {
		fill: #0dffaa;
		stroke: #0dffaa;
	}

	button.Icon:focus > svg,
	button:focus > svg.Icon {
		animation: IconPulse 1.618s infinite;
	}

	@keyframes IconPulse {
		62% { opacity: .1; }
	}
.Message {
	background: #30606b;
	color: #fff;
	margin: 1em auto;
	max-width: 60%;
	overflow: hidden;
	padding: 1em;
	position: relative;
}

	.Message > p {
		font-size: 1.4em;
		line-height: 1.5em;
		padding: .7em;
		text-align: center;
	}

	.Message > .Icon {
		float: left;
	}

		.Message > .Icon + p {
			overflow: hidden;
			text-align: left;
		}

	.Message.error {
		background: #d1443f;
	}

	.Message.info {
		background: #30606b;
	}

	.Message.warning {
		background: #9e1847;
	}

	.Message.success {
		background: #0bd18c;
	}.Form {
	text-align: center;
}

	.Form:after {
		clear: both;
		content: '';
		display: table;
	}

	.Form label {
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
		line-height: 2;
		font-size: 1.4em;
		padding: .5em 0;
		position: relative;
		text-align: left;
	}

		.Form label > small {
			flex: 2 0 0%;
			font-size: .8em;
			line-height: 1.6;
			margin-left: .8em;
			text-align: right;
		}

		.Form label > p {
			flex-basis: 100%;
			font-size: .9em;
			line-height: 1.6;
			margin: .5em 0 1em;
		}

		.Form label input,
		.Form label textarea,
		.Form label select {
			border-width: 1px;
			border-style: solid;
			border-color: inherit;
			color: #333;
			display: block;
			width: 100%;
		}

		.Form label input,
		.Form label select {
			height: 2em;
			text-indent: .3em;
		}

			.Form label select::-ms-expand {
				border: 0;
			}

		.Form label input[type=number] {
			text-align: right;
			text-indent: 0;
		}

		.Form label > input[type=checkbox],
		.Form label > input[type=radio] {
			border: 0;
			height: auto;
			margin-right: .2em;
			width: 1.5em;
		}

			.Form label > input[type=checkbox] ~ p,
			.Form label > input[type=radio] ~ p {
				padding-left: 2em;
			}

			.Form label > input[type=checkbox] + span,
			.Form label > input[type=radio] + span {
				flex: 2 0 0%;
			}

		.Form label textarea {
			line-height: 1.5;
			min-height: 8em;
			overflow: auto;
			padding: .3em .2em .1em;
		}

		.Form fieldset > legend {
			color: inherit;
			display: block;
			font-size: 2em;
			line-height: 2;
			padding: 1.5em 0 .5em;
			text-align: left;
			width: 100%;
		}

			.Form fieldset > legend > label {
				color: inherit;
				font-size: inherit;
				line-height: inherit;
				padding: 0;
			}

		.Form fieldset.Columns > legend {
			float: none;
			width: 100%;
		}

		.Form fieldset.Columns.gutter > legend {
			padding-top: 1.5em;
		}

		.Form .Columns.gutter {
			margin-top: 0;
			margin-bottom: 0;
		}

			.Form .Columns.gutter > * {
				padding-top: .5em;
				padding-bottom: .5em;
			}

	.Form > button.left {
		float: left;
		margin-left: 0;
		margin-right: 2rem;
	}

	.Form > button.right {
		float: right;
		margin-left: 2rem;
		margin-right: 0;
	}

	.Form hr {
		border: 0;
		border-color: transparent;
		border-bottom: 1px solid;
		height: 4em;
		margin: 2em 0 2em;
		width: auto;
	}

	.Form label.inline,
	.Form label > .inline {
		display: flex;
		flex-basis: 100%;
		flex-flow: row nowrap;
	}

		.Form label.inline > span,
		.Form label > .inline > span {
			background: #333;
			padding: 0 .5em;
			white-space: nowrap;
		}

		.Form label > .inline > input,
		.Form label > .inline > select,
		.Form label.inline > input,
		.Form label.inline > select {
			flex-grow: 1;
		}

		.Form label.inline > .Icon,
		.Form label > .inline > .Icon {
			height: 2em;
			padding: .2em;
			max-width: 2em;
			line-height: 1;
		}

	.Form label.invalid,
	.Form fieldset.invalid {
		color: #d1443f;
	}


/* Form Support */

.support {
	float: right;
}

.support:hover:after {
	position: absolute;
	background: rgba(0, 0, 0, 0.85);
	padding: 3px 7px;
	color: #FFF;
	top: 0;
	left: 0;
	margin-left: 7px;
	margin-top: -3px;
}

.Switch > span {
	position: relative;
	padding-left: 3em;
}

	.Switch > input[type='checkbox'] {
		display: none;
	}

	.Switch > span:before {
		background-color: #d1dcd8;
		border-radius: 1.2em;
		border: .1em solid transparent;
		content: '';
		height: 1.2em;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: .3em;
		transition: background-color .3s;
		width: 2.4em;
	}

	.Switch > span:after {
		background-color: #e6f2ee;
		border-radius: 50%;
		border: .1em solid #d1dcd8;
		content: '';
		height: 1.2em;
		left: 0;
		position: absolute;
		top: .3em;
		transition: all .3s; 
		width: 1.2em;
	}

	.Switch > input:checked + span:before {
		background-color: #0abc7e;
	}

	.Switch > input:checked + span:after {
		border-color: #0abc7e;
		left: 1.2em;
	}/* loader settings */


/* overlay */
.Loader {
	background: rgba(51,49,48,.9);
}

/* spinner */
.Loader:after {
	border-bottom-color: #eb246a;
	border-left-color: #eb246a;
	border-right-color: transparent;
	border-top-color: transparent;
}

/* progressbar */
.Loader > div {
	background-color: #eb246a;
}

/* Buttons & Icons */

button,
a.button {
	background-color: #0abc7e;
	color: #ebf7f3;
	text-transform: lowercase;
	transition: background-color .5s;
}

	button:hover {
		background-color: #0ceb9d;
	}

	button:disabled {
		background-color: #b5d0c7;
		color: #ebf7f3;
		cursor: auto;
	}

	button.negative {
		background-color: #ed4f48;
	}

	button.negative:hover {
		background-color: #ff554c;
	}

	.Icon {
		fill: #666b69;
		stroke: #666b69;
	}

	.Icon.negative {
		background-color: transparent;
	}

	.Icon.negative:hover {
		background-color: transparent;
		fill: #ed4f48;
		stroke: #ed4f48;
	}

	button.Icon:hover,
	button.Icon:active,
	button.Icon:focus,
	button.Icon.active {
		fill: #0dffaa;
		stroke: #0dffaa;
	}

/* Message colors */

.Message.error {
	background: #d1443f;
}

	.Message > .Icon {
		stroke: white;
		fill: white;
	}

.Message.info {
	background: #30606b;
}

.Message.warning {
	background: #9e1847;
}

.Message.success {
	background: #0bd18c;
}

/* Form colors */

.Form label {
	font-size: 1.4em;
	text-transform: lowercase;
}

.Form label input,
.Form label textarea {
	background-color: #e6f2ee;
	border-color: #d1dcd8;
	color: #666b69;
	padding-left: 3px;
}

.Form label textarea {
	padding-left: calc(3px + .3em);
}

	.Form label input:focus,
	.Form label textarea:focus {
		border-left-width: 4px;
		outline: none;
		padding-left: 0;
	}

	.Form label textarea:focus {
		padding-left: .3em;
	}

	.Form label > p {
		text-transform: none;
	}

.Form > button {
	font-size: 1.4rem;
}

/* Table styles */

table.soda {
	margin: 2em 0;
}

table.soda > tbody {
	border-color: #d1dcd8;
}

		table.soda > thead > tr > th,
		table.soda > tfoot > tr > td {
			color: #a2aba8;
			font-size: 1.2em;
			line-height: 2em;
			padding: 0 1rem;
			text-transform: lowercase;
		}

		table.soda > tbody > tr:hover {
			background-color: #e6f2ee;
		}

table.soda > tbody > tr > td {
	border-color: #e6f2ee;
	color: #666b69;
	font-family: 'Merriweather', serif;
	font-size: 1.4em;
	line-height: 3rem;
	padding: .5rem 1rem;
}

	table.soda > tbody > tr > td + td {
		border-left: 1px solid #f2fffb;
	}

	table.soda > tbody > tr:first-child > td + td:after,
	table.soda > tbody > tr:last-child > td + td:after {
		background-color: #d1dcd8;
		content: '';
		display: block;
		height: 6px;
		left: -1px;
		position: absolute;
		width: 1px;
	}

	table.soda > tbody > tr:first-child > td + td:after {
		bottom: 100%;
	}

	table.soda > tbody > tr:last-child > td + td:after {
		top: 100%;
	}


	table.soda > tbody > tr > td > a {
		color: inherit;
		text-decoration: none;
	}

		table.soda > tbody > tr.negative > td:first-child::after {
			background: #d1443f;
			content: '';
			position: absolute;
			left: -2px;
			top: 10%;
			height: 80%;
			width: 1px;
		}

/* Pagination */

.Pagination {
	bottom: 0;
	position: absolute;
	right: 4em;
}

	.Pagination > ul {
		float: right;
		margin: 0;
	}

		.Pagination > ul > li {
			border: 0;
			margin: 0;

		}

			.Pagination > ul > li > a {
				background-color: #30606b;
				color: #f2fffb;
				font-size: 1.8em;
			}

	.Pagination > small {
		float: left;
		line-height: 4rem;
		font-size: 1.1em;
		color: #a2aba8;
		margin-right: 1rem;
	}html {
	background: #333130;
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 400;
}

main {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	min-height: 100vh;
}

#login {
	background: #f2fffb;
	color: #666b69;
	margin: 2vh 2vh;
	min-height: 60em;
	padding: 4em 4em 17.6em;
	position: relative;
	text-align: left;
	width: 40em;
}

	#login > h1 {
		border-bottom: 1px solid #0bd18c;
		display: inline-block;
		font-size: 2.4em;
		text-transform: lowercase;
	}

	#login > blockquote {
		font-family: 'Merriweather', serif;
		font-size: 1.4em;
		line-height: 1.7;
		margin: 2rem 0;
	}

		#login > blockquote > small {
			float: right;
			font-size: 1.1rem;
			font-style: italic;
			margin: 2em 0 0 1em;
		}

	#login > small {
		color: #0bd18c;
		margin-top: 1em;
		position: absolute;
		right: 0;
		text-align: right;
		top: 100%;
	}

	#login > .Message {
		margin: 2rem auto;
		max-width: 90%;
	}

	#login > .Form {
		margin-top: 8em;
	}

		#login > .Form > label {
			font-size: 1.2em;
		}

			#login > .Form > label > input {
				font-size: 1.5em;
				font-weight: bold;
			}

		#login > .Form > button {
			margin-right: 0;
		}

	#login > svg {
		bottom: 4em;
		fill: #e6f2ee;
		height: 9.6em;
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
		width: 9.6em;
	}

	#login.error > .Form {
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-name: shake;
	}

@keyframes shake {
	from, to {
		transform: translate3d(0, 0, 0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform: translate3d(11px, 0, 0);
	}

	20%, 40%, 60%, 80% {
		transform: translate3d(-11px, 0, 0);
	}
}