html,
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: black;
}
* {
	font-family: 'effra', sans-serif;
	font-weight: 300;
}
#popup_div {
	padding: 40px;
}

#globe_div,
#ydi_div,
#region_div {
	float: left;
	width: 100vw;
	height: 100vh;
}

.legend_left,
.legend_right {
	fill: #333333;
	font-size: 10px;
	font-weight: bold;
}

.legend_left {
	text-anchor: start;
}

.legend_right {
	text-anchor: end;
}

.legend_title {
	fill: #333333;
	font-size: 10px;
	text-anchor: middle;
}

.data_title {
	fill: #25317a;
	font-size: 28px;
	/* text-transform: capitalize; */
	font-weight: 400;
}
.data_title_item {
	fill: #c83c87;
	font-size: 20px;
}

.country_count {
	font-size: 40px;
	font-weight: bold;
	text-anchor: middle;
}

.card_rect {
	fill: transparent;
	stroke: transparent;
	stroke-width: 0.5;
	rx: 5;
	ry: 5;
}

.card_title {
	text-anchor: middle;
	font-size: 18px;
	font-weight: 400;
}

.card_country_info {
	text-anchor: middle;
	font-size: 12px;
}

.pause_text {
	fill: dimgrey;
	font-size: 16px;
	font-weight: 400;
}

.area_dot_label {
	font-size: 12px;
	text-anchor: middle;
}

.area_axis line,
.area_axis path {
	display: none;
}

.bullet_axis line,
.bullet_axis path {
	stroke: #e0e0e0;
}

.area_axis text,
.bullet_axis text {
	font-size: 10px;
}
.area_title {
	text-anchor: middle;
	font-size: 12px;
}

.bullet_text {
	font-size: 12px;
}

.bullet_rect {
	position: relative;
	height: 12px;
}
.bullet_label {
	font-size: 10px;
	transform: translateY(-3px);
	fill: white;
	text-anchor: end;
}

.ydi_titlecountry_view {
	font-weight: 500;
}

tspan {
	font-weight: 500;
}
.pause-btn {
	background-color: black;
	height: 20px;
	width: 20px;
	fill: black;
}

.map_titleregion_view {
	font-weight: 500;
}

.tree_label {
	text-anchor: start;
	pointer-events: none;
	font-size: 12px;
}

.tree_weight_label {
	text-anchor: end;
	font-size: 12px;
}

.category_text,
.category_weight_text {
	text-anchor: middle;
	pointer-events: none;
	font-weight: 500;
	text-transform: lowercase;
}

.tooltip {
	visibility: hidden;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	position: absolute;
	text-align: left;
	padding: 10px;
	background: white;
	color: #333333;
	pointer-events: none;
	font-size: 0.8em;
	width: auto;
	height: auto;
	line-height: 16px;
	z-index: 100;
	margin-right: 40px;
}

#tooltip_source {
	color: dimgrey;
}

.tree_heading {
	fill: #25317a;
	font-size: 20px;
	text-anchor: middle;
	text-transform: capitalize;
	font-weight: 500;
}

.map_rect {
	rx: 5;
	ry: 5;
	fill: transparent;
	stroke: #a0a0a0;
}

.tiles_title {
	font-size: 14px;
	text-anchor: middle;
	font-weight: 500;
}
.tiles_rect {
	fill: white;
	stroke: #a0a0a0;
	rx: 5;
	ry: 5;
}

.chart_rect {
	fill-opacity: 0.1;
	rx: 5;
	ry: 5;
	stroke-width: 2;
}

.chart_category_label {
	text-anchor: middle;
}

.axis line {
	display: none;
}

.axis path {
	stroke: #a0a0a0;
}

.axis text {
	font-size: 10px;
}

.value_line {
	fill: none;
	stroke-width: 2;
}

.value_area {
	stroke: none;
	fill-opacity: 0.1;
}
@media (max-width: 720px) {
	.bullet_label {
		transform: translateY(0);
	}
}