@font-face {
font-family: "ssp";
src: url("../../fonts/poppins/poppins-v15-latin-regular.woff") format("woff"),
url("../../fonts/poppins/poppins-v15-latin-regular.woff2") format("woff2");
}

@font-face {
font-family: "rob";
src: url("../../fonts/roboto.woff") format("woff"),
url("../../fonts/roboto.woff2") format("woff2");
}

html, body {
	width: 100%;
	height: 98%;
	margin: 0;
}

body {
	background-color: #e3e3e3;
	color: #666;
}

a:link, a:visited, a:active {
	text-decoration: none;
	color: #666;
}

a:hover {
	color: #aaa;
}

#container {
	width: 98%;
	height: 100%;
	margin: 0 auto;
	font-family: ssp, sans-serif;
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column nowrap;
}

.menu, .buttons {
	width: 100%;
	max-width: 700px;
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 1em;
}

.buttons {
	justify-content: center;
	margin-top: 1em;
}

.years {
	width: 50%;
	text-align: center;
	font-size: 1.1em;
}

.button {
	width: 50px;
	height: 20px;
	border: 1px solid #fff;
	text-align: center;
	cursor: pointer;
	margin: 0 1em;
}

.button:hover {
	background-color: #fff;
}

.button.clicked {
	background-color: #fff;
	pointer-events: none;	
}

.outer {
	width: 100%;
	height: 100%;

	max-width: 700px;
	position: relative;
}

.tool {
	position: absolute;
	pointer-events: none;
	display: none;
	background-color: rgba(255, 255, 255, 0.8); 
	border: 2px solid #888;
	font-size: 0.8em;
	padding: 0.1em;
}

.thead {
	font-size: 1em;
}

table {
	border: collapse;
	font-family: rob;
}

table td {
	text-align: right;
}

table td:first-child {
	text-align: left;
}

#diff {
	font-weight: bold;
}

svg {
	width: 100%;
	height: 100%;
}

svg text {
	fill: #fff;
	pointer-events: none;
	font-size: 15px;
}

.graz {
	fill: none;
	stroke: #888;
}

.minimap {
	stroke: none;
	fill: none;
}

.centers {
	stroke: #888;
	stroke-width: 1px;
}
	
.slopes {
	display: none;
	stroke-opacity: 0.75;
}

/*.year {
	text-anchor: middle;
	font-size: 1.2em;
}*/

.guides, .marks {
	stroke: #ccc;
}

.transparent {
	fill-opacity: 0.1 !important;
	stroke-opacity: 0.2;
}

.guides, .scales, .smlscales {
	display: none;
}

.ticks, .names {
	fill: #888;
	font-size: 0.5em;
	text-anchor: end;
}

.names {
	display: none;
	fill: #666;
	font-size: 0.7em;
}

.footer {
	width: 100%;
	max-width: 700px;
	font-size: 0.7em;
	text-align: center;
	margin-top: 2em;
}