body {
	font-family: Source Sans Pro, sans-serif;
	font-weight: 400;
	padding: 20px 0;
	background: #fff;
	float: left;
	width: 100%;
	max-width: 720px;
}
a {
	color: #0164b3;
	text-decoration: none;
}
a:hover {
	color: #009de4;
	text-decoration: underline;
}
#content {
	background: #f6f6f6;
}
.chart,
.charttopper,
.header {
	width: 98%;
	margin: 0 auto;
}
.charttopper h1 {
	margin: 0;
	font-size: 24px;
}
.charttopper h2 {
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 24px;
	margin: 25px 0px;
}
svg {
	overflow: visible;
}
.rangepick {
	width: 40%;
	float: left;
}
.rangepick div {
	float: left;
	width: 12.5%;
}
.rangepick input {
	width: 70%;
	float: left;
}
.high {
	text-align: right;
}
.chart {
	width: 100%;
	max-width: 720px;
	background: #f6f6f6;
	float: left;
}
.wrapper {
	display: inline-block;
	position: relative;
	width: 100%;
	vertical-align: top;
	overflow: hidden;
}
.wrapper svg {
	display: inline-block;
	top: 0;
	left: 0;
}
select {
	font-family: Source Sans Pro;
	width: 100%;
	padding: 5px;
	font-size: 18px;
}
#changeC,
#metric {
	width: 48%;
	margin: 2px 1%;
	float: left;
}
.change {
	clear: both;
	margin-bottom: 14px;
	float: left;
	cursor: pointer;
	width: 100%;
}
.button {
	border-radius: 12px;
	display: inline-block;
	top: 0px;
	left: 0px;
	height: 12px;
	margin: 0 10px;
	vertical-align: middle;
	width: 12px;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffffff;
	box-shadow: inset 0px 0px 0px 2px #ffffff;
	visibility: visible;
	float: left;
	background-color: #ffffff;
	border: 1px solid #b9b9b9;
}
.button.selected {
	background-color: #009de4;
	border: 1px solid #009de4;
}
#changeC .button {
	border-radius: 12px;
	display: inline-block;
	top: 0px;
	left: 0px;
	height: 16px;
	font-size: 12px;
	padding: 5px;
	text-align: center;
	line-height: 16px;
	margin: 2px;
	width: 10%;
	min-width: 28px;
	vertical-align: middle;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffffff;
	box-shadow: inset 0px 0px 0px 2px #ffffff;
	visibility: visible;
	float: left;
	background-color: #ffffff;
	color: #b9b9b9;
	border: 1px solid #b9b9b9;
	cursor: not-allowed;
}
#changeC .button.active {
	cursor: pointer;
	color: #000;
}
#changeC .button.active.picked {
	color: #fff;
}
#dropdowns h2 {
	margin-bottom: 2px;
}
#changeC p {
	font-size: 10px;
	margin-top: 0;
}
.side p {
	cursor: pointer;
	display: inline-block;
	font-size: 15px;
	margin: 0;
	position: relative;
	float: left;
}
.overlay {
	fill: none;
	pointer-events: all;
}
.tooltip {
	background-color: #ffffff;
	border-radius: 2px;
	position: absolute;
	-webkit-box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
	color: #202020;
	width: 255px;
	min-height: 80px;
	pointer-events: none;
	visibility: visible;
	float: left;
	z-index: 1;
}
.tooltip svg {
	margin-left: 2%;
	margin-top: 10px;
}
.tooltip span {
	width: 20px;
	content: "";
	height: 14px;
	background-image: url("https://usafacts.org/svg/arrowhead--down.svg");
	background-size: 20px;
	bottom: -13px;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	display: block;
	border-bottom-color: transparent !important;
}
.tooltip h3 {
	font-size: 12px !important;
	color: #202020;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 18px;
	margin: 0px !important;
}
.tooltip p {
	font-size: 20px;
	line-height: 24px;
	font-weight: bold;
	font-style: normal;
	padding-left: 10px;
	margin: 0px !important;
}
.tooltip h2,
.tooltip p.explain {
	display: inline-block;
	padding: 0px 10px 10px 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 15px;
	color: #717372;
	line-height: normal !important;
	margin: 0px !important;
	font-weight: normal;
}
.tooltip h2 {
	padding: 10px 10px 0px 10px;
}
text {
	font-family: Source Sans Pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	fill: #656d78;
	font-size: 14px;
}
.popup text {
	font-family: Source Sans Pro;
	fill: #2e2925;
	font-size: 16px;
	font-weight: bold;
}
.popup rect {
	-webkit-filter: drop-shadow(0px 1px 4px 0 rgba(0, 0, 0, 0.25));
	filter: drop-shadow(0px 1px 4px 0 rgba(0, 0, 0, 0.25));
}
.popup text tspan {
	font-weight: 400;
}
.state {
	cursor: pointer;
}
#xaxis path {
	stroke-width: 0;
	fill: #dddddd;
}
#xaxis line {
	fill: none;
	stroke-width: 0;
}
#yrate {
	text-anchor: initial;
}
#yrate path {
	stroke-width: 0;
}
#yrate line {
	stroke: #dddddd;
	stroke-width: 1;
}
#ylabel {
	text-anchor: end;
}
#lines path {
	stroke-width: 4px;
	stroke-linecap: round;
	stroke-linejoin: round;
	cursor: pointer;
}
.context path {
	cursor: pointer;
}
#lines path {
	opacity: 0.5;
}
#lines path#Nationalline {
	stroke-width: 5px;
	opacity: 1;
}
#legend {
	width: 100%;
}
#explain {
	position: fixed;
	display: none;
	width: 240px;
	font-size: 12px;
}
#desc {
	width: 98%;
	margin: 2px 1%;
}
#choose,
#read,
#toggleAll {
	cursor: pointer;
	font-size: 14px;
	font-weight: normal;
	font-family: Source Sans Pro, sans-serif;
	-webkit-text-decoration: underline;
	text-decoration: underline;
	display: inline-block;
	color: #717372;
	margin: 0 15px 0 0;
}
#read {
	font-size: 18px;
}
#choose {
	text-decoration: none;
}
.toggle {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	padding: 0 8px 0 0;
	font-size: 14px;
	border-radius: 6px;
	display: inline-block;
	height: 28px;
	margin: 10px 10px 5px 0;
	line-height: 28px;
	vertical-align: middle;
}
.toggle span {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #e3007d;
	border-radius: 6px 0px 0px 6px;
	background-color: #e3007d;
	display: inline-block;
	height: 28px;
	width: 25px;
	vertical-align: middle;
	margin-top: -5px;
	margin-left: -1px;
}
.toggle div {
	padding-left: 5px;
	float: right;
	border-left: 1px solid;
	margin-top: -1px;
}
.toggle {
	opacity: 0.5;
}
.toggle.active {
	opacity: 1;
}
.toggle.opaque {
	opacity: 0.5;
}
.toggle.inactive span {
	background: transparent !important;
}
.csv {
	display: none;
}
.Dropdown-root {
	position: relative;
	font-size: 12px;
	margin-bottom: 10px;
}
.Dropdown-root #Dropdown-control {
	position: relative;
	overflow: hidden;
	background-color: white;
	border: 1.5px solid #dbdbdb;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #707271;
	cursor: default;
	outline: none;
	padding: 13px 25px 13px 10px;
	-webkit-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.Dropdown-root .Dropdown-arrow {
	border-color: #999 transparent transparent;
	border-style: solid;
	border-width: 5px 5px 0;
	content: " ";
	display: block;
	height: 0;
	margin-top: -ceil(2.5);
	position: absolute;
	right: 10px;
	top: 18px;
	width: 0;
}
#Dropdown-menu.show {
	background-color: white;
	border: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: -1px;
	max-height: 200px;
	overflow-y: auto;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 1000;
	-webkit-overflow-scrolling: touch;
}
#Dropdown-menu.hide {
	display: none;
}
.Dropdown-root .Dropdown-option {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: rgba(51, 51, 51, 0.8);
	cursor: pointer;
	display: block;
	padding: 8px 10px;
}
.Dropdown-root .Dropdown-control:hover {
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.Dropdown-root .Dropdown-option:hover {
	position: relative;
	background-color: #e8e8e8;
	color: #707271;
	border-left: 2px solid #979797;
}
#explain text {
	font-size: 12px;
}
.touch {
	width: 40%;
}
.custom {
	width: 96%;
	-webkit-appearance: none !important;
	height: 25px;
	border-radius: 8px;
	background: -webkit-gradient(
		linear,
		center top,
		center bottom,
		from(#b9b9b9),
		to(#dddddd),
		color-stop(50%, #dddddd)
	);
	-webkit-transition: background 450ms;
	-o-transition: background 450ms;
	transition: background 450ms;
}
.custom::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	background: #1b3d67;
	height: 25px;
	width: 40px;
	border-radius: 15px;
}
.custom::-webkit-slider-thumb:before {
	background-color: yellow;
}
.rangepick input {
	float: left;
	margin: 0 3px;
}
@media screen and (max-device-width: 720px) {
	.chart {
		width: 100%;
		height: auto;
	}
	.side {
		width: 100%;
		margin: 10px 0;
		height: -webkit-min-content;
		height: -moz-min-content;
		height: min-content;
		min-height: 100px;
	}
}
@media screen and (max-device-width: 676px) {
	.custom {
		height: 35px;
	}
	.custom::-webkit-slider-thumb {
		height: 35px;
		border-radius: 35px;
	}
}
@media screen and (max-width: 600px) {
	.chart {
		width: 100%;
		height: auto;
	}
	#dropdowns h2 {
		font-size: 18px;
	}
	.side {
		width: 100%;
		margin: 10px 0;
		height: -webkit-min-content;
		height: -moz-min-content;
		height: min-content;
		min-height: 100px;
	}
	text {
		font-family: Source Sans Pro, sans-serif;
		font-weight: 400;
		font-style: normal;
		fill: #656d78;
		font-size: 14px;
	}
	body {
		margin-top: 50px;
	}
	.change {
		margin-bottom: 8px;
	}
	.side p {
		font-size: 12px;
	}
	.toggle {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: #000000;
		padding: 0 8px 0 0;
		font-size: 8px;
		border-radius: 6px;
		display: inline-block;
		height: 18px;
		margin: 4px 10px 1px 0;
		line-height: 18px;
		vertical-align: middle;
	}
	.toggle span {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: #e3007d;
		border-radius: 6px 0px 0px 6px;
		background-color: #e3007d;
		display: inline-block;
		height: 17px;
		width: 5px;
		vertical-align: middle;
		margin-top: -3px;
		margin-left: -1px;
	}
	.toggle div {
		padding-left: 4px;
		float: right;
		border-left: 1px solid;
		margin-top: -1px;
	}
}
@media screen and (max-width: 520px) {
	.tooltip p {
		font-size: 15px;
	}
	.tooltip p.explain {
		font-size: 12px;
	}
	#desc {
		font-size: 12px;
	}
	body {
		padding-bottom: 20px;
	}
}
@media screen and (max-width: 420px) {
	#changeC,
	#metric {
		width: 98%;
		margin: 2px 1%;
		float: left;
	}
}
svg {
	overflow: visible;
}
input {
	width: 94.5%;
}
#changeC div {
	float: left;
	width: 12.5%;
}
.chart {
	float: left;
}
.side {
	width: 25%;
	float: left;
	height: 500px;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 25%;
	float: right;
	min-height: 380px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 2px;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 2px;
	padding: 25px 15px 15px;
	background: #fff;
}
#explain {
	-webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 2px;
	box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 2px;
	padding: 15px 15px 15px;
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.side .head {
	font-size: 16px;
	margin: 0px 0px 10px;
	border-bottom: 1px solid #e1e0e1;
	padding-bottom: 10px;
}
.context svg {
	display: none;
}
.change {
	clear: both;
	margin-bottom: 14px;
	float: left;
	cursor: pointer;
	width: 100%;
}
.button {
	border-radius: 12px;
	display: inline-block;
	top: 0px;
	left: 0px;
	height: 12px;
	margin: 0 10px;
	vertical-align: middle;
	width: 12px;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffffff;
	box-shadow: inset 0px 0px 0px 2px #ffffff;
	visibility: visible;
	float: left;
	background-color: #ffffff;
	border: 1px solid #b9b9b9;
}
.button.selected {
	background-color: #009de4;
	border: 1px solid #009de4;
}
.side p {
	cursor: pointer;
	display: inline-block;
	font-size: 12px;
	margin: 0;
	position: relative;
	float: left;
}
.overlay {
	fill: none;
	pointer-events: all;
}
.tooltip {
	background-color: #ffffff;
	border-radius: 2px;
	position: absolute;
	-webkit-box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.25);
	color: #202020;
	width: 255px;
	min-height: 80px;
	pointer-events: none;
	visibility: visible;
	float: left;
	z-index: 1;
}
.tooltip svg {
	margin-left: 2%;
	margin-top: 10px;
}
.tooltip span {
	width: 20px;
	content: "";
	height: 14px;
	background-image: url("https://usafacts.org/svg/arrowhead--down.svg");
	background-size: 20px;
	bottom: -13px;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	display: block;
	border-bottom-color: transparent !important;
}
.tooltip h2 {
	display: inline-block;
	padding: 10px 10px 0px 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 15px !important;
	color: #717372;
	line-height: normal !important;
	margin: 0px !important;
	font-weight: normal;
}
.tooltip h3 {
	font-size: 12px !important;
	color: #202020;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 18px;
	margin: 0px !important;
}
.tooltip p {
	font-size: 20px;
	line-height: 24px;
	font-weight: bold;
	font-style: normal;
	padding-left: 10px;
	margin: 0px !important;
}
#ylabel {
	text-anchor: end;
}
#lines path {
	stroke-width: 4px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#legend {
	height: 34px;
	width: 80%;
	margin: 0 5%;
	-webkit-box-shadow: rgba(32, 32, 32, 0.2) 0px 1px 1px 0px;
	box-shadow: rgba(32, 32, 32, 0.2) 0px 1px 1px 0px;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 4px 5% 14px;
	font-size: 12px;
	color: #717372;
}
.labels {
	width: 100%;
}
.labels div {
	width: 33%;
	float: left;
}
#choose,
#read,
#toggleAll {
	cursor: pointer;
	font-size: 14px;
	font-weight: normal;
	font-family: Source Sans Pro, sans-serif;
	-webkit-text-decoration: underline;
	text-decoration: underline;
	display: inline-block;
	color: #717372;
	margin: 0 15px 0 0;
}
#read {
	font-size: 18px;
}
#choose {
	text-decoration: none;
}
.toggle {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	padding: 0 8px 0 0;
	font-size: 14px;
	border-radius: 6px;
	display: inline-block;
	height: 28px;
	margin: 10px 10px 5px 0;
	line-height: 28px;
	vertical-align: middle;
}
.toggle span {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #e3007d;
	border-radius: 6px 0px 0px 6px;
	background-color: #e3007d;
	display: inline-block;
	height: 28px;
	width: 25px;
	vertical-align: middle;
	margin-top: -5px;
	margin-left: -1px;
}
.toggle div {
	padding-left: 5px;
	float: right;
	border-left: 1px solid;
	margin-top: -1px;
}
.toggle {
	opacity: 0.5;
}
.toggle.active {
	opacity: 1;
}
.toggle.opaque {
	opacity: 0.5;
}
.toggle.inactive span {
	background: transparent !important;
}
.csv {
	display: none;
}
@media screen and (max-width: 600px) {
	.chart {
		width: 100%;
		min-height: 500px;
		height: auto;
	}
	.side {
		width: 100%;
		margin: 10px 0;
		height: -webkit-min-content;
		height: -moz-min-content;
		height: min-content;
		min-height: 100px;
	}
	#legend {
		font-size: 11px;
	}
}
.Dropdown-root {
	position: relative;
	font-size: 12px;
	margin-bottom: 10px;
}
.Dropdown-root #Dropdown-control {
	position: relative;
	overflow: hidden;
	background-color: white;
	border: 1.5px solid #dbdbdb;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #707271;
	cursor: default;
	outline: none;
	padding: 13px 25px 13px 10px;
	-webkit-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.Dropdown-root .Dropdown-arrow {
	border-color: #999 transparent transparent;
	border-style: solid;
	border-width: 5px 5px 0;
	content: " ";
	display: block;
	height: 0;
	margin-top: -ceil(2.5);
	position: absolute;
	right: 10px;
	top: 18px;
	width: 0;
}
#Dropdown-menu.show {
	background-color: white;
	border: 1px solid #ccc;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: -1px;
	max-height: 200px;
	overflow-y: auto;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 1000;
	-webkit-overflow-scrolling: touch;
}
#Dropdown-menu.hide {
	display: none;
}
.Dropdown-root .Dropdown-option {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: rgba(51, 51, 51, 0.8);
	cursor: pointer;
	display: block;
	padding: 8px 10px;
}
.Dropdown-root .Dropdown-control:hover {
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.Dropdown-root .Dropdown-option:hover {
	position: relative;
	background-color: #e8e8e8;
	color: #707271;
	border-left: 2px solid #979797;
}
#explain text {
	font-size: 12px;
}
.touch {
	width: 40%;
}
.custom {
	width: 96%;
	-webkit-appearance: none !important;
	height: 25px;
	border-radius: 8px;
	background: -webkit-gradient(
		linear,
		center top,
		center bottom,
		from(#b9b9b9),
		to(#dddddd),
		color-stop(50%, #dddddd)
	);
	-webkit-transition: background 450ms;
	-o-transition: background 450ms;
	transition: background 450ms;
}
.custom::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	background: #1b3d67;
	height: 25px;
	width: 40px;
	border-radius: 15px;
}
.custom::-webkit-slider-thumb:before {
	background-color: yellow;
}
@media screen and (max-device-width: 720px) {
	.chart {
		width: 100%;
		min-height: 500px;
		height: auto;
	}
}
@media screen and (max-device-width: 676px) {
	.custom {
		height: 35px;
	}
	.custom::-webkit-slider-thumb {
		height: 35px;
		border-radius: 35px;
	}
}
