/*
	STYLES FOR MATT'S 'WHOSE APPS ARE WINNING THE NEXT BILLION USERS' COMMENTARY
*/

.svg-wrapper { 
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: middle; 
    overflow: hidden; 
    margin-bottom: 10%;
}
.svg-wrapper svg {
	position: relative;
	width: 110%;
	left: -50px;
	padding-bottom: 4%;
}
.country { 
	fill: #D7D7D7; 
	stroke-width: 0.2px; 
	stroke: #333; 
	opacity: 0.7; 
}
.country.highlight { 
	opacity: 1.0;
}
.tippy-content { 
	font-family: 'Avenir Medium'; 
}
.tippy-box {
	background: rgba(51,51,51,.8);
	opacity: 1 !important;
}
.tippy-arrow {
	background: transparent;
	color: transparent;
	border-color: transparent;
}
.tippy-arrow:before {
	color: rgba(51,51,51,.8);
}
.legend {
	position: absolute;
	bottom: 10px;
	left: 30%;
	width: 40%;
	height: 16px;
	background: rgb(255,0,0);
	background: linear-gradient(90deg, rgba(255,80,44,1) 0%, rgba(204,60,93,1) 25%, rgba(128,0,129,1) 50%, rgba(123,104,184,1) 75%, rgba(45,149,236,1) 100%);
}
.square {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1%;
}
.flag {
	position: absolute;
	top: -5px;
	height: 26px;
}
.flag.cn {
	left: -30px;
}
.flag.us {
	right: -30px;
}

@media screen and (max-width: 550px) {
	.svg-wrapper svg {
		left: -30px;
		padding-bottom: 12%;
	}
	.legend {
		width: 60%;
		left: 20%;
	}
}