article {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

div#covid {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 680px;
	/*min-width: 400px;*/
	margin-right: 30px;
}

span.county_opt {
	display: inline-block;
	width: 16ch;
}

aside {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 20vw;
	background-color: #2d2d2d;
	padding: 30px;
	min-width: 250px;

}

input[type=submit] {
	display: block;
	margin: 20px 0px;
}

input#csel_toggle {
	display: none;
}

input#csel_toggle_small {
        display: none;
}

label.csel {
	text-decoration: underline;
}

label[for=csel_toggle] {
        display: block;
}

label[for=csel_toggle_small] {
	display: none;
}

input#csel_toggle:not(:checked) ~ div#county_sel {
	display: none;
}

input#csel_toggle:not(:checked) ~ label[for=csel_toggle]::after {
	content: "Show County Selection";
}

input#csel_toggle:checked ~ label[for=csel_toggle]::after {
        content: "Hide County Selection";
}

@media only screen and (max-width: 650px){
	article {
		padding: 30px 15px;
	}

	div#covid {
		margin: 0px;
	}

        label[for=csel_toggle] {
                display: none;
        }

        label[for=csel_toggle_small] {
                display: block;
        }

        input#csel_toggle_small:checked ~ div#county_sel {
                display: block;
        }

        input#csel_toggle_small:not(:checked) ~ div#county_sel {
                display: none;
        }

        input#csel_toggle_small:not(:checked) ~ label[for=csel_toggle_small]::after {
                content: "Click here to select counties to graph";
        }

        input#csel_toggle_small:checked ~ label[for=csel_toggle_small]::after {
                content: "Hide County Selection";
        }

}

hr {
	margin: 16px 0px;
}

img.plot {
	display: block;
	margin: 6px auto 16px;
	max-width: 100%;
	height: auto;
}

h4 {
	margin: 16px 0px 6px;
	font-size: 16px;
	font-weight: bold;
}

p.blurb {
	margin: 6px 0px 20px;
}

ul.as_list {
	margin: 6px 0px;
	padding: 0px;
	list-style-type: none;
}