@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700');

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	font-family: "Source Sans Pro";
	box-sizing: border-box;
}

html {
	overflow: hidden;
	padding: 0px;
}

#canvas-container {
	overflow: hidden;
}

canvas {
	display: block;
	margin: 0 auto;
}

.legend.categorical {
	max-height: 100px;
	overflow: scroll;
}

.flourish-popup {
	pointer-events: none;
	font-size: 12px;
}

#legend-container {
	width: 100%;
	text-align: center;
	overflow: hidden;
	padding: 0;
}

.legend-group {
	display: block;
	vertical-align: middle;
}

.legend {
	font-size: 12px;
	padding: 5px 10px;
	display: inline-block;
	vertical-align: middle;
}

.legend .series {
	margin-right: 8px;
	display: inline-block;
}

.legend .series	.swatch {
	display: inline-block;
	border-radius: 2px;
	margin-right: 3px;
	height: 10px;
	width: 20px;
	vertical-align: middle;
}

.legend#points-color-legend .series .swatch {
	border-radius: 50%;
	height: 10px;
	width: 10px;
}

#points-legend {
	text-align: center;
}

.legend.numeric {
	padding-left: 0px;
	padding-right: 0px;
}

.legend .series	.label {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	bottom: 0.1em;
}

.search-container {
	position: relative;
	max-width: 120px;
	padding-bottom: 5px;
	z-index: 1;
	margin-left: 10px;
}
@media(min-width: 620px) {
	.search-container {
		max-width: 180px;
	}
}
.search-container.hidden {
	display: none;
}
.search-container.active input {
	width: 100%;
	padding: 0 5px 0 18px;
	color: #333;
	background-color: #fff;
}
.search-container:hover input {
	background: #fff;
}
.search-container input {
	border: none;
	cursor: default;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
	height: 18px;
	width: 18px;
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 12px;
	padding: 0 0 0 18px;
	outline: none;
	transition: 200ms width;
	color: #fff;
	background: rgba(255,255,255,0.8);
}

.search-container:before {
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	pointer-events: none;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMnB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCAxMiAxMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi44MzAzNTcxNCw3LjQwODQ4MjE0IEM3LjQxOTY0NTgsNi44MTkxOTM0OCA3LjcxNDI4NTcxLDYuMTExNjExMjcgNy43MTQyODU3MSw1LjI4NTcxNDI5IEM3LjcxNDI4NTcxLDQuNDU5ODE3MyA3LjQyMDc2MTg2LDMuNzUzMzUxMTUgNi44MzM3MDUzNiwzLjE2NjI5NDY0IEM2LjI0NjY0ODg1LDIuNTc5MjM4MTQgNS41NDAxODI3LDIuMjg1NzE0MjkgNC43MTQyODU3MSwyLjI4NTcxNDI5IEMzLjg4ODM4ODczLDIuMjg1NzE0MjkgMy4xODE5MjI1OCwyLjU3OTIzODE0IDIuNTk0ODY2MDcsMy4xNjYyOTQ2NCBDMi4wMDc4MDk1NiwzLjc1MzM1MTE1IDEuNzE0Mjg1NzEsNC40NTk4MTczIDEuNzE0Mjg1NzEsNS4yODU3MTQyOSBDMS43MTQyODU3MSw2LjExMTYxMTI3IDIuMDA3ODA5NTYsNi44MTgwNzc0MiAyLjU5NDg2NjA3LDcuNDA1MTMzOTMgQzMuMTgxOTIyNTgsNy45OTIxOTA0NCAzLjg4ODM4ODczLDguMjg1NzE0MjkgNC43MTQyODU3MSw4LjI4NTcxNDI5IEM1LjU0MDE4MjcsOC4yODU3MTQyOSA2LjI0NTUzMjc5LDcuOTkzMzA2NSA2LjgzMDM1NzE0LDcuNDA4NDgyMTQgWiBNMTEuMTQyODU3MSwxMC44NTcxNDI5IEMxMS4xNDI4NTcxLDExLjA4OTI4NjkgMTEuMDU4MDM2NiwxMS4yOTAxNzc3IDEwLjg4ODM5MjksMTEuNDU5ODIxNCBDMTAuNzE4NzQ5MiwxMS42Mjk0NjUxIDEwLjUxNzg1ODMsMTEuNzE0Mjg1NyAxMC4yODU3MTQzLDExLjcxNDI4NTcgQzEwLjA0NDY0MTcsMTEuNzE0Mjg1NyA5Ljg0Mzc1MDgsMTEuNjI5NDY1MSA5LjY4MzAzNTcxLDExLjQ1OTgyMTQgTDcuMzg2MTYwNzEsOS4xNjk2NDI4NiBDNi41ODcwNDk1OCw5LjcyMzIxNzA1IDUuNjk2NDMzNDgsMTAgNC43MTQyODU3MSwxMCBDNC4wNzU4ODk2NywxMCAzLjQ2NTQwNDcsOS44NzYxMTczMSAyLjg4MjgxMjUsOS42MjgzNDgyMSBDMi4zMDAyMjAzLDkuMzgwNTc5MTIgMS43OTc5OTMxOCw5LjA0NTc2MTA0IDEuMzc2MTE2MDcsOC42MjM4ODM5MyBDMC45NTQyMzg5NjIsOC4yMDIwMDY4MiAwLjYxOTQyMDg4Miw3LjY5OTc3OTcgMC4zNzE2NTE3ODYsNy4xMTcxODc1IEMwLjEyMzg4MjY5LDYuNTM0NTk1MyAwLDUuOTI0MTEwMzMgMCw1LjI4NTcxNDI5IEMwLDQuNjQ3MzE4MjQgMC4xMjM4ODI2OSw0LjAzNjgzMzI3IDAuMzcxNjUxNzg2LDMuNDU0MjQxMDcgQzAuNjE5NDIwODgyLDIuODcxNjQ4ODcgMC45NTQyMzg5NjIsMi4zNjk0MjE3NSAxLjM3NjExNjA3LDEuOTQ3NTQ0NjQgQzEuNzk3OTkzMTgsMS41MjU2Njc1MyAyLjMwMDIyMDMsMS4xOTA4NDk0NSAyLjg4MjgxMjUsMC45NDMwODAzNTcgQzMuNDY1NDA0NywwLjY5NTMxMTI2MSA0LjA3NTg4OTY3LDAuNTcxNDI4NTcxIDQuNzE0Mjg1NzEsMC41NzE0Mjg1NzEgQzUuMzUyNjgxNzYsMC41NzE0Mjg1NzEgNS45NjMxNjY3MywwLjY5NTMxMTI2MSA2LjU0NTc1ODkzLDAuOTQzMDgwMzU3IEM3LjEyODM1MTEzLDEuMTkwODQ5NDUgNy42MzA1NzgyNSwxLjUyNTY2NzUzIDguMDUyNDU1MzYsMS45NDc1NDQ2NCBDOC40NzQzMzI0NywyLjM2OTQyMTc1IDguODA5MTUwNTUsMi44NzE2NDg4NyA5LjA1NjkxOTY0LDMuNDU0MjQxMDcgQzkuMzA0Njg4NzQsNC4wMzY4MzMyNyA5LjQyODU3MTQzLDQuNjQ3MzE4MjQgOS40Mjg1NzE0Myw1LjI4NTcxNDI5IEM5LjQyODU3MTQzLDYuMjY3ODYyMDUgOS4xNTE3ODg0OCw3LjE1ODQ3ODE1IDguNTk4MjE0MjksNy45NTc1ODkyOSBMMTAuODk1MDg5MywxMC4yNTQ0NjQzIEMxMS4wNjAyNjg3LDEwLjQxOTY0MzcgMTEuMTQyODU3MSwxMC42MjA1MzQ1IDExLjE0Mjg1NzEsMTAuODU3MTQyOSBaIiBpZD0i74CCLWNvcHkiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=);
	background-size: 100%;
	width: 9px;
	height: 9px;
	left: 5px;
	top: 7px;
}

@media (min-width: 420px) {
	.search-container input {
		height: 24px;
		width: 24px;
		padding: 0 0 5 22px;
		font-size: 14px;
	}
	.search-container.active input {
		padding: 0 0 0 24px;
	}
	.search-container:before {
		width: 10px;
		height: 10px;
		left: 7px;
		top: 7px;
	}
}

.search-container .search-list {
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	display: none;
	opacity: 0;
	margin-top: 1px;
	min-width: 100%;
	max-width: calc(100% + 20px);
	position: absolute;
}
.search-container.active .search-list {
	display: block;
}
.search-container .search-list .search-item {
	height: 30px;
	padding: 0 10px;
	background: #fff;
	cursor: pointer;
	position: relative;
}
.search-container .search-list .search-item:after {
	content:'';
	position: absolute;
	display: none; /* change this to enable different list items */
	right: 5px;
	top: 5px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
}
.search-container .search-list .search-item[data-type="region"]:after {
	background: orange;
}
.search-container .search-list .search-item[data-type="point"]:after {
	background: blue;
}
.search-container .search-list .search-item:hover, .search-container .search-list .search-item.selected {
	background: #eee;
}
.search-container .search-list .search-item p {
	margin: 0;
	display: block;
	font-size: 12px;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.search-container ::-webkit-input-placeholder {
	color: #fff;
}
.search-container.active ::-webkit-input-placeholder {
	color: #ddd;
}