html, body {
	font-family: system-ui;
	background: #efefef;
	margin: 0px;
	padding: 0px;
}

header {
	border-bottom	: 1px solid silver;
	color		: #666;
	letter-spacing	: 1px;
	padding		: 0px;
	text-align	: justify;
	padding		: 14px;
	padding-bottom	: 0px;
	h1, nav {
		padding		: 0px;
		margin		: 0px;
		display		: inline-block;
		vertical-align	: middle;
		select {
			width: 200px;
		}
	}
}
header::after {
	content: '';
	display: inline-block;
	width: 100%;
}

table {
	border-collapse: collapse;
	font-size: 12px;
	thead {
		th {
			border: 1px solid #ddd;
			background-color: #eee;
			padding: 10px;
			position: sticky;
			top: 0;
			z-index: 888;
		}
		:first-child {
			left: 0;
			z-index: 999;
		}
	}
	tbody {
		tr {
			background-color: #fefefe;
			td {
				background-color: inherit;
				border: 1px solid #ddd;
				text-align: right;
				color: #777;
				padding: 5px;
			}
			:first-child {
					padding-left: 0px;
					color: black;
					position: sticky;
					left: 0;
					z-index: 100;
				}
		}
		:hover {
			background-color: #eaeaea;
		}
	}
}


@media screen and (max-width: 820px){
	header {
		height: auto;
	}

	header h1, header nav {
		height: auto;
		width: auto;
		display: block;
		text-align: center;
	}
}