.covid19 {
	min-height: 100%;
	display: flex;
	flex-direction: column;
    background: url(https://simulations.muyomi.com/img/bg/image-from-rawpixel-id-434752-jpeg.jpg) center top no-repeat fixed;
    background-size: cover;
    font-family: 'Roboto Medium', Arial, sans-serif;
    color: white;
}

.covid19 > .spacer {
	flex: 1 1 auto;
}

.covid19 > div#content > div.title {
	display: none;
}

.covid19 > div#content form.inputbuttons > .inputgroup > .userinput {
	text-align: left;
}

.covid19 > div#content #indicators > .output-group > .output-label {
	position: relative;
}

.covid19 > div#content #indicators > .output-group > .output-label > p:first-child {
	font-size: 12pt;
	font-weight: bold;
	text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

.covid19 > div#content #indicators > .output-group > .output-label > div.button,
.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.button.selfassess,
.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 .inputicon {
	color: white;
	font-size: 8pt;
	font-family: 'Roboto Medium', Arial, sans-serif;
	position: absolute;
	border: none;
	border-radius: 0.5vmin;
	background: rgba(255,255,255,0.2) url(../img/selfassess.png) center 1vmin no-repeat;
	background-size: 5vmin;
	min-width: 8vmin;
	padding: 7vmin 1vmin 1vmin 1vmin;
}

.covid19 > div#content #indicators > .output-group > .output-label > div.button {
	bottom: 12.5vmin;
	min-width: 5vw;
	left: 50%;
	transform: translate(-200%,-10%);
}

.covid19 > div#content #indicators > .output-group > .output-label:last-child > div.button {
	transform: translate(100%,50%);
}

div#content .inputgroup#group_6, .covid19 > div#content .inputgroup#group_7 {
	margin-top: 0;
}

.covid19 > div#content #indicators > .output-group > .output-label > div.button.region {
	transform: translate(-200%,50%);
	background-image: url(../img/map.png);
}

.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.button.selfassess {
	right: 2.5vmin;
	top: 0;
	background-image: url(../img/selfassess.png);
}

.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 {
	position: absolute;
	left: 2.5vmin;
	top: 0;
	margin-top: 0;
}

.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 .inputicon {
	filter: none;
	width: auto;
	height: auto;
	margin: 0;
	min-width: 8vmin;
	box-sizing: content-box;
	display: block;
	position: relative;
}

.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 .inputicon.selected {
	display: none;
}

.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 > .config-category,
.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 .mbi-header {
	display: none;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap {
	position: relative;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .regionname > h1 {
	text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
	margin-top: 2vmin;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .viruspresence,
.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .healthcare,
.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .cases {
	position: absolute;
	top: 0;
	margin-top: -25vmin;
	max-width: 30vw;
	left: 2.5vmin;
	text-align: left;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .behaviour {
	left: auto;
	right: 2.5vmin;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map {
	width: 60vmin;
	height: 60vmin;
	max-height: 60vmin;
	box-sizing: border-box;
	padding: 0;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot {
	position: absolute;
	width: 4vmin !important;
	height: 4vmin !important;
	margin-left: -2vmin !important;
	margin-top: -2vmin !important;
	line-height: 4vmin;
	font-size: 2vmin;
	font-weight: bold;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot.NL {
	background-image: none;
	position: relative;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot.NL::after {
	content: "";
	background: url(https://simulations.muyomi.com/img/iconsets/covid19/input/group_7/0/0.png) center center no-repeat;
	background-size: 80%;
	opacity: 0.4;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: -1;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	border-radius: 50%;
	background: url(https://simulations.muyomi.com/img/iconsets/covid19/input/group_7/0/0.png) center center no-repeat;
	background-size: 80%;
	background-color: #7d0000;
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot > div.healthcare {
	background-image: url(https://simulations.muyomi.com/img/iconsets/covid19/input/group_7/0/1.png);
}

.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot > div.cases {
	background-image: url(https://simulations.muyomi.com/img/iconsets/covid19/input/group_7/0/2.png);
	background-size: 65%;
}

.covid19 > div#content > .output > .output-group:first-child {
    display: inline-block;
    width: 42vw;
    margin-left: 3vw;
    margin-right: 3vw;
}

.covid19 > div#content > .output > .output-group:first-child > .output-category {
    display: block;
}

.covid19 div#content form.inputbuttons.covidpopup {
	position: relative;
}

.covid19 div#content form.inputbuttons.covidpopup > * {
	background-color: rgba(255,255,255,0.3);
	margin-bottom: 0;
	padding-bottom: 2vmin;
}

.covid19 div#content form.inputbuttons.covidpopup > .close-popup {
	position: absolute;
	top: 6vmin;
	right: 6vmin;
	width: 5vmin;
	height: 5vmin;
	background: url(../img/logout.png) center center no-repeat;
	background-size: contain;
	z-index: 10;
}

.covid19 header > div.lang {
	margin-top: 20px;
	margin-bottom: 0;
}

.covid19 header > h1 {
	font-size: 5vmin;
	margin: 0;
}

.covid19 > footer a {
	color: white;
}

.covid19 > div.deepening {
	background-color: rgba(0,0,0,0.15);
	text-align: left;
	padding: 5vw;
	margin: 5vh 5vw;
	border-radius: 2vmin;
}

.covid19 > div.deepening.muyomi .choice {
	color: #262626;
}

.covid19 > div.deepening > header {
	font-weight: bold;
	font-style: italic;
	font-size: 1.5em;
	margin-left: 0;
}

.covid19 > div.deepening li {
	margin-bottom: 1em;
}

.covid19 div.buttons {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 5vh;
	margin-bottom: 5vh;
}

.covid19 div.explanationbutton, .covid19 > div.deepening.start > div.explanationbutton {
	background: url(../img/exit.png) center top no-repeat;
	background-size: 5vmin;
	padding-top: 6vmin;
	text-align: center;
	margin: 0 2vw;
	min-width: 5vmin;
}

.covid19 div.explanationbutton.close {
	background-image: url(../img/logout.png);
}

.hide {
	display: none !important;
}

div.lang > a {
	border: 2px solid rgba(255,255,255,0.2);
}

.covid19 > div.start.deepening {
	text-align: center;
	line-height: 1.5em;
}

.covid19 > .buttons > div[data-label="thinkchecklist_test"] {
	display: none;
}

.muyomi-root .charts {
	position: relative;
}

.muyomi-root.museum ul.contentindex > li > span {
	color: black;
	-webkit-text-stroke: 1px black;
	-webkit-text-fill-color: white;
}

.muyomi > p.feedback {
	font-size: 12pt;
	background-color: rgba(255,255,255,0.2);
	border-radius: 2.5vmin;
	padding: 2vmin 5vmin;
}

.risk-explain {
	border-radius: 2.5vmin;
	background-color: rgba(0,0,0,0.15);
	text-align: justify;
	padding: 5vmin;
	max-width: 80vw;
	margin: auto;
	box-sizing: border-box;
}

.popupnote {
	z-index: 1000000000;
	border-radius: 0.2vmin;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(255,255,255,0.2);
	position: fixed;
	bottom: 5vmin;
	padding: 5vmin;
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
}

.popupnote.fade {
	opacity: 0;
	transition: opacity 0.5s 4s linear;
}

a {
	color: white;
}

.legend {
	display: none;
}

.disclaimer {
	font-style: italic;
}

@media only screen and (max-width: 640px) {
	ul {
		padding-inline-start: 10px;
	}

	.covid19 header > h1 {
	    font-size: 15vw;
	    padding-left: 10vw;
	    padding-right: 10vw;
	    margin: 2vmin 0 0 0;
	    background-size: auto 10vmin;
	}

	.covid19 > div#content .inputgroup > .userinput > div.inputicon {
		font-size: 2.5vmin;
	}

	.covid19 > div#content #indicators > .output-group > .output-label{
		width: 40vw;
		margin: 0;
	}

	.covid19 > div#content #indicators > .output-group > .output-label > div.button {
		width: 15vw;
		bottom: 25vmin;
		transform: translate(-110%,-10%);
		min-height: 3vh;
	}

	.covid19 > div#content #indicators > .output-group > .output-label:last-child > div.button {
		transform: translate(50%,50%);
	}

	.covid19 > div#content #indicators > .output-group > .output-label > div.button.region {
		transform: translate(-150%,50%);
	}

	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .viruspresence,
	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .cases,
	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .behaviour {
		margin-top: -52.5vmin;
	}

	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .viruspresence > p,
	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .cases > p,
	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .behaviour > p {
		margin-top: 0;
	}

	.covid19 > div#content > .output > .output-group:first-child {
	    display: block;
	    width: 100%;
	    margin: auto;
	}

	.covid19 div.explanationbutton {
		background-size: 8vmin;
		min-width: 8vmin;
		padding-top: 10vmin;
		flex: 1;
	}

	.covid19 div.explanationbutton.desktop {
		display: none;
	}

	.covid19 div#content form.inputbuttons.covidpopup > .regionmap {
		padding-top: 10vmin;
	}

	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map {
		width: 90vmin;
		height: 90vmin;
		max-height: 90vmin;
	}

	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .map .region-hotspot {
		width: 5vmin !important;
		height: 5vmin !important;
		margin-left: -2.5vmin !important;
		margin-top: -2.5vmin !important;
		line-height: 5vmin;
	}

	.covid19 .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
	    font-size: 8px;
	}

	.covid19 div.marblechart > div.summary > div.label.filled {
		background-color: transparent;
	}

	.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.button.selfassess,
	.covid19 > div#content > form.inputbuttons.covidpopup > .regionmap > div.inputgroup#group_6 {
		min-width: 20vmin;
	}

	.covid19 div.muyomi-root.museum ul.contentindex {
		max-width: 100%;
	}

	.covid19 div.muyomi-root.museum ul.contentindex > li {
		width: 45%;
	}

	.covid19 div#content form.inputbuttons.covidpopup > .regionmap > .regionname > h1 {
		font-size: 5vmin;
	}

}