/* -------------------------------- 

General

-------------------------------- */

@font-face {
    font-family: 'League Spartan';
    src: url('fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('fonts/leaguespartan-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
	-moz-box-sizing: border-box; /* Firefox */ 
	-webkit-box-sizing: border-box; /* Safari */ 
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}

html { 
	font-size: 20px;
}

body {
	color: #444;
	line-height: 1.5;
	font-size: 1rem; 
	background-color: white;
	font-family: Helvetica, Arial, sans-serif; 
	font-weight: 400;
	position: relative;
}

.noscroll {
	overflow: hidden !important;
}

.center {
	text-align: center;
}

.flex-center {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}

img {
	max-width: 100%;
}

a {
	color: #2883A2;
}

a:hover {
	color: #22708b;
}

a.large-link {
	font-size:1.1rem; 
	font-weight:bold;
}

p {
	margin: 0px 0px 30px 0px;
}

ul, ol {
	margin-left: 50px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0px 0px 20px 0px;
	font-weight: 700;
	color: #292624;
	line-height: 1.4;
	text-transform: none;
}

h1, h2, .title, .title-small {
	font-family: 'League Spartan', sans-serif;
}

h1 {
	font-size: 2.8rem;
}

.title {
	font-size: 1.8rem;
	margin-bottom: 40px;
}

.title-small {
	font-size: 1.3rem;
}

.button-curved {
	background-color: #2883A2;
	border: none;
	color: white;
	padding: 16px 45px;
	font-size: 18px;
	font-weight: 700;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	display: inline-block;
}

.button-curved:hover {
	color: white;
	text-decoration: none;
	background-color: #22708b;
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  	transform: translate3d(0, 0, 0);
  	perspective: 1000px;
}

.button-download {
	background-color: #eee;
	color: #333;
	border: none;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 700;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.button-download:hover {
	background-color: #e5e5e5;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.curved {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.padded {
	padding: 120px 0px;
}

.border {
	border-bottom: 1px solid #E9E9E9;
}

.block {
	padding: 0px 0px 120px 0px;
}

.block:last-child {
	padding: 0;
}

.scroll_to_top {
	border: 1px solid #333;
}

footer {
	position: relative;
	padding: 50px 0px;
	background-color: #222;
	color: white;
	font-size: 0.9rem;
}

footer h3 {
	color: white;
}

#footer-license {
	margin-bottom: 20px;
	padding-bottom: 20px;
	font-size: 0.8rem;
	border-bottom: 1px solid #666;
}

.footer-social {
	margin-top: 20px;
}

.footer-social a {
	margin: 0px 2px;
	font-size: 1.5rem;
}

#sd {
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: 0.65rem;
	color: #ddd;
}

#sd a {
	color: #ddd;
}

#sd a:hover {
	color: #ddd;
	text-decoration: underline;
}


nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	list-style-type: none;
}

canvas {
	margin-bottom: 20px;
}

button.expand {
	font-size: 1rem;
	color: #2883A2;
	padding: 5px;
	margin: 20px 0px 30px 0px;
	background-color: transparent;
	-webkit-transition: all 0.3s ease;
  	-moz-transition: all 0.3s ease;
  	-o-transition: all 0.3s ease;
  	transition: all 0.3s ease;
}

button.expand:hover {
	color: #22708b !important;
	background-color: transparent !important;
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

[class^="expand-"] {
	display: none;
}

[class^="expand-"].show {
	display: block;
}

select {
	border: 2px solid #ddd !important;
	-moz-appearance: auto;
	-webkit-appearance: auto;
	appearance: auto;
	width: 100%;
}

label {
	font-size: 0.9rem;
	font-weight: bold;
	color: #333;
}

.bg-cream {
	background-color:#F6F4F1;
}

.autocomplete-suggestions { 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.1);
	background: #FFF; 
	overflow: auto; 
	cursor: pointer;
}
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

#page-quote {
	position: relative;
	padding: 100px 0px;
	background-color: #48a69a;
	font-weight: bold;
}

#page-quote h2 {
	font-size: 2rem;
	margin-bottom: 30px;
	color: white;
}

@media only screen and (max-width : 991px) {
	html {
		font-size: 18px;
	}

	h1 {
		font-size: 2.5rem;
	}
}

@media only screen and (max-width : 767px) {
	.padded {
		padding: 70px 0px;
	}

	.block {
		padding: 0px 0px 70px 0px;
	}
}

@media only screen and (min-width: 576px) {
	/* Data table & header */
	.container.widest {
		max-width: none;
		width: 98%;
	}

	.container.wide {
		max-width: none;
		width: 92%;
	}
}

/* -------------------------------- 

Header

-------------------------------- */

.nav-bar {
	background-color: #2883A2;
	width: 100%;
	transition-property: all;
	transition-duration: 0.2s;
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.2s;
}

#nav-bar-fixed {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	/*background-color: white;*/
}

/*#nav-bar-fixed ul.dropdown-menu li a {
	color: #222;
}*/

ul.dropdown-menu li {
	position: relative;
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 0;
}

ul.dropdown-menu li a {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: white;
	background-color: transparent;
	padding: 10px 14px;
	margin: 10px 2px;
}

ul.dropdown-menu li a:hover {
	text-decoration: none;
	color: #e37b75;
}

ul.dropdown-menu li > ul {
	position: absolute;
	display: none;
	width: 240px;
	padding: 10px 0px;
	margin: 0;
	text-align: left;
	z-index: 1000;
	left: 0;
	top: 100%;
	background-color: white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.2);
}

ul.dropdown-menu li:hover > ul {
	display: block;
}

.menu-item-has-children:after {
	position: absolute;
	right: 0;
	top: 50%;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Pro";
   	content: "\f107";
   	color: white;
}

ul.dropdown-menu li > ul li {
	display: block;
	margin: 0;
	padding: 0;
}

ul.dropdown-menu li > ul li a {
	padding: 5px 10px;
	color: #222;
}

ul.dropdown-menu li > ul li a:hover {
	color: #e37b75;
}

#header-logos {
	float: left;
	width: 100%;
}

#main-logo {
	float: left;
	padding: 20px 0px 10px 0px;
}

#main-logo a img {
	width: 300px;
}

#partner-wrap {
	float: right;
}

.logos {
	padding: 10px 0px;
	justify-content: center;
}

.logos a img {
	margin: 0 5px;
}

.logos a:hover {
	background-color: transparent;
}

.logos a:nth-child(1) img {
	width: 190px;
}

.logos a:nth-child(2) img {
	width: 120px;
}

.logos a:nth-child(3) img {
	width: 230px;
}

.nav-bar .logos {
	justify-content: flex-end;
}

#fixed-content {
	float: left;
	width: 100%;
}

#bars {
	color: white;
	font-size: 34px;
	float: right;
	margin-right: 0px !important;
	cursor: pointer;
}

#nav-mobile {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000000;
	background-color: #2883A2;
	overflow-y: auto;
}

#nav-mobile .logos {
	padding: 50px 0px;
}

#nav-mobile .logos a img {
	width: 150px;
}

#nav-mobile .logos a.icrw img {
	width: 75px;
}

#close-nav-wrap {
	position: fixed; 
	top: 5px; 
	right: 10px;
}

#close-nav-mobile {
	margin-right: 10px;
	color: white;
	font-size: 38px;
}

ul.mobile-menu {
	margin: 0px auto 0px auto;
	width: 80%;
	max-width: 400px;
	list-style-type: none;
}

ul.mobile-menu li {
	display: block;
	margin-bottom: 10px;
}

ul.mobile-menu li a {
	display: block;
	padding: 10px 0px;
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	color: white;
	background-color: transparent;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

ul.mobile-menu li a:hover {
	color: #df8a73;
	text-decoration: none;
}

ul.mobile-menu .menu-item-has-children:after {
	content: none;
}

ul.mobile-menu li > ul li a {
	padding: 4px 0px;
	font-size: 15px;
}

ul.dropdown-menu a.nav-button {
	background-color: #56aad3;
	color: white;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

ul.dropdown-menu a.nav-button:hover {
	background-color: #4b9ac1;
	color: white;
}

ul.mobile-menu a.nav-button {
	background-color: white;
	color: black;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	font-size: 1rem;
	width: 80%;
	margin-left: 10%;
}

ul.mobile-menu a.nav-button:hover {
	background-color: #f1f1f1;
	color: black;
}

header {
	position: relative;
	background-color: #2883A2;
	color: white;
}

#header-content {
	padding: 100px 0px;
}

#header-content a {
	color: white;
	text-decoration: underline;
}

#header-content a:hover {
	text-decoration: none;
}

header#landing {
	position: relative;
	background-color: transparent;
	font-size: 0.9rem;
	/*background: #2883A2 url(media/world.png) 115% 50% no-repeat; */
	/*background-size: 1000px 571px;*/

	background-color: #2883A2;
	background-image: url("media/worldbg.png");
	background-attachment: fixed;
  	background-position: center top;
  	background-repeat: no-repeat;
  	background-size: cover;
}

/*header#landing #header-content {
	padding: 100px 0px;
}*/

header h1, header h2 {
	color: white;
}

header h2 {
	font-size: 1.5rem;
}

header#landing h1 {
	font-size: 2.5rem;
}

header#landing h2 {
	font-size: 1.3rem;
}

header#landing #header-content {
	padding: 100px 0px;
}

@media only screen and (max-width : 1199px) {
	ul.dropdown-menu li a {
		font-size: 15px;
	}

	.logos a:nth-child(1) img {
		width: 160px;
	}

	.logos a:nth-child(2) img {
		width: 120px;
	}

	.logos a:nth-child(3) img {
		width: 200px;
	}
}

@media only screen and (min-width : 992px) {

}

@media only screen and (max-width : 1199px) {
	#header-logos {
		width: auto;
	}

	#fixed-content {
		float: right;
		width: auto;
		margin-top: 20px;
	}
}

@media only screen and (max-width : 991px) {
	#header-content {
		padding: 70px 0px;
	}
}


/* -------------------------------- 

Landing

-------------------------------- */

#global-stats {
	margin-top: -50px;
	background-color: white; 
	width: 100%; 
	height: 240px; 
	-webkit-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 1px 25px 0px rgba(0,0,0,0.18);
}

/*.overlay {
	position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-color: rgba(28,34,39,0.8);
    background-color: rgba(40,131,162,0.9);
    z-index: 0;
}*/

#landing-quote {
	position: relative;
	padding: 120px 0px;
	background-color:#2883A2;
}

#landing-quote h2 {
	color: white;
	font-size: 2.2rem;
}

#landing-quote a {
	color: #b8b9ff;
	/*text-decoration: underline;*/
	font-size: 1.1rem;
	font-weight: bold;
}

#landing-quote a:hover {
	color: #b8b9ff;
	text-decoration: underline;
}

#landing-questions {
	padding: 60px 0px;
	background-color: #8d8ec3;
	color: white;
}

#landing-questions a {
	color: white;
	text-decoration: underline;
}

#landing-questions a:hover {
	color: white;
	text-decoration: none;
}

#landing-questions .title, #landing-questions .title-small {
	color: white;
}

#landing-questions .button-curved {
	color: #222;
	background-color: white;
	text-decoration: none;
}

#landing-questions .button-curved:hover {
	color: white;
	background-color: #222;
}

/*.news-item {
	list-style-type: none;
	margin: 30px 0px 0px 0px;
	padding: 0;
}*/

.news-item {
	padding: 0;
	margin: 15px 0px 0px 0px;
}

.news-item a {
	color: #111;
	font-weight: bold;
	text-decoration: underline;
}

.news-item a:hover {
	color: black;
	text-decoration: none;
}

.news-source, .news-date {
	font-size: 0.9rem;
}

.news-source {
	font-style: italic;
}



/* -------------------------------- 

Data Tracker

-------------------------------- */

.tracker-bar {
	background-color: #E9E9E9;
	background-color: white;
	border-bottom: 2px solid #ddd;
}

#tracker-bar-fixed {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
}

.tracker-bar ul {
	margin: 0;
	padding: 0;
	width: 100%;
	list-style-type: none;
}

.tracker-bar li {
	margin: 0;
	padding: 0;
	float: left;
	padding: 15px 7px;
}

.tracker-bar li:first-child {
	padding-left: 0;
}

.tracker-bar li a {
	position: relative;
	display: inline-block;
	font-weight: bold;
	font-size: 15px;
	padding: 6px 12px;
	color: #222;
}

.tracker-bar li a:hover {
	color: #e37b75;
}

.tracker-bar li a.active {
	background-color: white;
	color: white;
	background-color: #e37b75;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

/*.tracker-bar li a.active:after {
	content: '';
	position: absolute;
	z-index: 10;
	left: 0;
	top: -5px;
	height: 5px;
	width: 100%;
	background-color: white;
}*/

.source-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #D1D1D1;
	margin-bottom: 20px;
}

.source-table tr {
	background-color: transparent !important;
}

.source-table th {
	font-family: 'League Spartan', sans-serif;
	padding: 12px 15px !important;
	font-weight: 700;
	color: #292624;
	background-color: #E9E9E9;
	/*text-align: center !important;*/
	border: none !important;
}

.source-table th:first-child {
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-left-radius: 5px
}

.source-table th:last-child {
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-right-radius: 5px
}

.source-table td {
	position: relative;
	padding: 10px 15px !important;
	/*text-align: center !important;*/
	border: none;
	font-size: 0.8rem !important;
	white-space: normal;
}

/*.source-table td.divider:after {
	position: absolute;
	bottom: -3px;
	left: 50%;
	height: 6px;
	width: 10%;
	background-color: #D9D9D9;
	content: '';
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}*/

.stat-box {
	float: left;
	width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #f4f4f4;
	margin: 15px 0px;
}

.stat-header {
	font-family: 'League Spartan', sans-serif;
	padding: 16px 5px !important;
	font-weight: 700;
	background-color: #2883A2;
	color: white;
	text-align: center !important;
	-webkit-border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

.stat-content {
	padding: 25px 5px;
	text-align: center;
	margin: 0;
}

.stat {
	font-size: 2rem;
	font-weight: bold;
	color: #1e7795;
}

.pathway-wrap {
	margin-top: 100px;
}

.pathway {
	position: relative;
	float: left;
	width: 16.6666666667%;
	width: 14.2857142857%;
	text-align: center;
	padding: 25px 5px;
	font-size: 0.8rem;
	font-weight: bold;
}

.pathway-circle {
	position: absolute;
	top: 0;
	left: 50%;
	content: '';
	width: 20px;
	height: 20px;
	background-color: #e37b75;
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.pathway:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	content: '';
	background-color: #e37b75;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.pathway:last-child:after {
	position: absolute;
	top: 0;
	right: -12px;
	width: 0; 
  	height: 0; 
  	content: '';
  	border-top: 12px solid transparent;
  	border-bottom: 12px solid transparent;
  	border-left: 12px solid #e37b75;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.pathway.purple {
	width:16.6666666667%;
}

.pathway.purple .pathway-circle {
	background-color: #AFAED7;
}

.pathway.purple:before {
	background-color: #AFAED7;
}

.pathway.purple:last-child:after {
	border-left: 12px solid #AFAED7;
}

.pathway-title .title-small {
	position: absolute;
	bottom: 100%;
	left: 0;
	font-size: 0.8rem;
	width: 100%;
}

.pathway-stat {
	font-size: 2rem;
	line-height: 2rem;
	font-weight: bold;
}

.key-stat {
	font-size: 0.7rem;
	margin-bottom: 20px;
	text-align: left;
}

.key-map {
	margin: 10px 0px;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

.key-map li {
	display: inline-block;
	margin: 0px 10px 5px 0px;
	font-size: 0.8rem;
}

.key-map .key-color {
	display: inline-block;
	height: 12px;
	width: 12px;
	margin-right: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#dash-map, #policy-map, .map {
	width: 100%;
	height: 600px;
}

.prompt {
	display: block;
	padding: 25px 0px;
	font-size: 0.8rem;
	margin-bottom: 20px;
	text-align: center;
	color: white;
	background-color: #2883A2;
	-webkit-box-shadow: 0px 2px 0px 1px rgba(29,110,137,1);
	-moz-box-shadow: 0px 2px 0px 1px rgba(29,110,137,1);
	box-shadow: 0px 2px 0px 1px rgba(29,110,137,1);
}

.prompt:hover {
	color: white;
	background-color: #207490;
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  	transform: translate3d(0, 0, 0);
  	perspective: 1000px;
}

#country-search, #country-search-2 {
	position: relative;
}

#country-search input[type=text], #country-search-2 input[type=text] {
	border: 2px solid #ccc !important;
	width: 100%;
	padding: 15px 25px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

#country-search button, #country-search-2 button {
	position: absolute;
	right: 1%;
	top: 50%;
	font-size: 1.3rem;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-color: transparent;
	padding: 10px 15px;
	color: #333;
}

#country-search button:hover, #country-search-2 button:hover {
	color: #df8a73;
}

.chart-sup {
	font-size: 0.7rem;
	color: #777;
	margin-bottom: 20px;
}

.tabs {
	list-style-type: none;
	margin: 20px 0 30px 0;
	padding: 0;
}

.tabs li {
	display: inline-block;
	margin: 0 0 10px 0;
	padding: 0;
}

.tabs .tab-link {
	display: block;
	color: black;
	font-weight: bold;
	font-size: 0.9rem;
	padding: 12px 30px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

.tabs .tab-link:hover {
	color: #2883A2;
}

.tabs .tab-link.active {
	color: white;
	background-color: #2883A2;
}

.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
}

.js-hide .tab-pane {
	display: block;
}

#tab-select {
	border: 2px solid #ddd !important;
	width: auto;
	max-width: 100%;
	-moz-appearance: auto;
	-webkit-appearance: auto;
	appearance: auto;
}

.table-characteristics th {
	border: none;
}

.table-characteristics td {
	font-size: 0.85rem !important;
	padding: 0.5rem 0.8rem !important;
	border: none;
}

.table-characteristics td:first-child {
	font-size: 0.75rem !important;
}

.table-characteristics td:not(:first-child) {
	text-align: center !important;
}

.table-characteristics th {
	font-size: 0.8rem !important;
}

.table-characteristics .fas {
	font-size: 1rem;
}

.table-characteristics .fa-check {
	color: #59a14f;
}

.table-characteristics .fa-times {
	color: #e15759;
}

.bubble-wrap {
	justify-content: center;
	white-space: nowrap;
}

.bubble {
	display: inline-block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin-right: 5px;
}

@media only screen and (max-width : 991px) {
	.tracker-bar li {
		padding: 7px 0px;
	}

	.tracker-bar li a {
		font-size: 0.6rem;
	}

	.pathway {
		width: 33.3333333333% !important;
		margin-bottom: 60px;
	}
}

#data-table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}


/*#data-table tr:nth-child(2n+1) {
	background-color: #f4f4f4 !important;
}*/

#data-table tr {
	background-color: transparent !important;
}

/*#data-table tr.yes {
	background-color: #d3edcf !important;
}

#data-table tr.partial {
	background-color: #f5edd2 !important;
}

#data-table tr.no {
	background-color: #f3dada !important;
}*/

#data-table tbody tr {
	display: none;
}

#data-table tr.reveal {
	display: table-row;
}

#data-table th {
	position: relative;
	font-size: 0.5rem !important;
	word-wrap: normal;
	text-align: left !important;
	padding: 5px 10px 5px 0px !important;
	word-break: break-word;
	font-weight: 700;
	color: black;
	background-color: white;
	text-align: center !important;
	border: none;
	border-bottom: 3px solid black !important;
}

#data-table td {
	font-size: 0.6rem !important;
	word-wrap: normal;
	padding: 8px 5px !important;
	font-weight: normal;
	border: none;
	border-bottom: 2px solid #e9e9e9;
	/*border-top: 2px solid white;
	border-bottom: 2px solid white;*/
}

#data-table td:last-child {
	text-align: right;
}

.source-button {
	background-color: white;
	color: black;
	border: 1px solid #222;
	padding: 2px 8px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

#data-table-counter {
	margin-top: 20px;
}

#data-table-counter p {
	margin-bottom: 10px;
}

select[name=x_scatter], select[name=y_scatter] {
	margin-bottom: 20px;
}

#scatter-annotation {
	font-size: 0.8rem;
}

/* -------------------------------- 

Tablesort

-------------------------------- */

#data-table th[role=columnheader]:not(.no-sort), #policy-data-table th[role=columnheader]:not(.no-sort) {
	cursor: pointer;
}

#data-table th[role=columnheader]:not(.no-sort):after, #policy-data-table th[role=columnheader]:not(.no-sort):after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-width: 4px 4px 0;
	border-style: solid;
	border-color: #404040 transparent;
	opacity: 0.4;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#data-table th[aria-sort=ascending]:not(.no-sort):after, #policy-data-table th[aria-sort=ascending]:not(.no-sort):after {
	border-width: 0 4px 4px;
}

#data-table th[aria-sort]:not(.no-sort), #policy-data-table th[aria-sort]:not(.no-sort) {
	color: #046cdc;
}

#data-table th[aria-sort]:not(.no-sort):after, #policy-data-table th[role=columnheader]:not(.no-sort):hover:after {
	opacity: 1;
}

#data-table th[data-sort-method=none], #policy-data-table th[data-sort-method=none] {
	cursor: default !important;
}

#data-table th[data-sort-method=none]:after, #policy-data-table th[data-sort-method=none]:after {
	opacity: 0 !important;
}

.data-filter {
	color: #292624;
	font-size: 0.8rem;
	margin-bottom: 15px;
}

.data-filter input[type=text] {
	border: 1px solid #ddd !important;
	-moz-appearance: auto;
	-webkit-appearance: auto;
	appearance: auto;
	width: 100%;
}

.data-filter label {
	margin-right: 10px;
}

.data-filter-mobile {
	border: 1px solid #ddd !important;
	-moz-appearance: auto;
	-webkit-appearance: auto;
	appearance: auto;
	width: 100%;
	margin-bottom: 10px;
}

@media only screen and (max-width : 767px) {
	#dash-map, #policy-map, .map {
		height: 400px;
	}

	.data-filter {
		font-size: 1rem;
	}


	/* -------------------------------- 

	Responsive table

	-------------------------------- */

	#data-table thead { 
		display: none !important;
	}

	#data-table table, 
	#data-table th, 
	#data-table tr.reveal, 
	#data-table td { 
		display: block !important; 
	}

	/*#data-table tr { 
		border-bottom: 2px solid black; 
	}*/
	
	#data-table td { 
		/* Behave  like a "row" */
		position: relative !important;
		border-top: none !important;
		border-bottom: 1px solid white !important;
		padding-left: 60% !important; 
		text-align: left !important;
		min-height: 33px;
	}
	
	#data-table td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		font-weight: bold;
	}

	#data-table td:last-child {
		border-bottom: 10px solid white !important;
	}

	#data-table td:nth-of-type(1):before { content: "Country code"; }
	#data-table td:nth-of-type(2):before { content: "Country"; }
	#data-table td:nth-of-type(3):before { content: "Sex-disaggregated?"; }
	#data-table td:nth-of-type(4):before { content: "Date"; }
	#data-table td:nth-of-type(5):before { content: "Cases where sex-disaggregated data is available"; }
	#data-table td:nth-of-type(6):before { content: "Cases (% male)"; }
	#data-table td:nth-of-type(7):before { content: "Cases (% female)"; }
	#data-table td:nth-of-type(8):before { content: "Deaths where sex-disaggregated data is available"; }
	#data-table td:nth-of-type(9):before { content: "Deaths (% male)"; }
	#data-table td:nth-of-type(10):before { content: "Deaths (% female)"; }
	#data-table td:nth-of-type(11):before { content: "Deaths in confirmed cases (% total)"; }
	#data-table td:nth-of-type(12):before { content: "Deaths in confirmed cases (% male)"; }
	#data-table td:nth-of-type(13):before { content: "Deaths in confirmed cases (% female)"; }
	#data-table td:nth-of-type(14):before { content: "Deaths in confirmed cases (Male:female ratio)"; }
	#data-table td:nth-of-type(15):before { content: "Source"; }

}

@media only screen and (max-width : 575px) {
	
}

/* -------------------------------- 

Cube chart

-------------------------------- */

.cube-chart {
	border-collapse: separate;
	width: 100%;
	margin: 50px 0px 0px 0px;
}

.cube {
	float: left;
	margin: 3px 3px 3px 0px;
	width: 22px;
	height: 22px;
}

.cube-annotate {
	position: absolute;
	bottom: 25%;
}

.cube-arrow {
	width: 35px; 
	height: 40px;
}

.cube-label {
	position: relative;
	width: 100%;
	white-space: nowrap;
	font-weight: normal;
	font-size: 0.7rem;
}

.cube-annotate.left {
	text-align: right;
	right: 102%;
}

.cube-annotate.right {
	text-align: left;
	left: 100%;
	bottom: 50%;
}

.cube-chart:not(.minimal) .cube-annotate.right {
	-ms-transform: translateY(+50%);
	-moz-transform: translateY(+50%);
	-webkit-transform: translateY(+50%);
	transform: translateY(+50%);
}

.cube-arrow.small {
	width: 25px;
	height: 29px;
}

.cube-annotate.left .cube-label {
	left: 35%;
	font-size: 0.8rem;
}

.cube-annotate.right .cube-label {
	left: 0;
}

.mob-annotate {
	font-weight: normal;
	font-size: 0.6rem;
	color: #777;
}

.cube-wrap {
	position: relative;
	float: left;
}

.cube-label i {
	font-size: 2.5rem
}

.cube-chart tr {
	background-color: transparent !important;
}

.cube-chart td {
	position: relative;
	padding: 12px 5px !important;
	border: none;
	border-bottom: 1px solid #E9E9E9;
}

.cube-chart tr:last-child td {
	border-bottom: none;
}

.cube-chart td:first-child {
	width: 20%;
	font-weight: bold;
	border-right: 1px solid #D1D1D1;
	font-size: 0.8rem !important;
}

.cube-chart td:last-child {
	width: 10%;
	font-weight: bold;
	text-align: right;
}

.cube-chart.minimal td {
	padding: 25px 5px !important;
	border-right: none;
	border-bottom: none;
}

.cube-chart.minimal .cube-annotate.left {
	bottom: 50%;
}

.cube-chart.minimal .cube-annotate.left .cube-label {
	left: 90%;
}

.cube-chart.minimal .cube-annotate.right {
	bottom: 50%;
}

.cube-chart.minimal .cube-annotate.right .cube-label {
	left: -75%;
	font-size: 0.8rem;
}

.cube-chart.minimal .cube {
	margin: 3px 3px 3px 0px;
	width: 34px;
	height: 34px;
}

.tooltip {
	display: none;
	position: absolute;
	bottom: 100%;
  	left: 50%;
	z-index: 100;
	white-space: nowrap;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.cube-chart tr:hover .tooltip {
	display: block;
}

.cube-chart tr:not(:first-child):hover td {
	cursor: pointer;
	background-color: #f1f1f1;
}

.tooltip::after {
	content: "";
	position: absolute;
	top: 100%; 
	left: 50%;
	z-index: 100;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}


@media only screen and (max-width : 991px) {
	/* .cube-annotate.right .cube-label {
		left: -15%;
	} */
}

@media only screen and (max-width : 767px) {
	.cube {
		width: 18px;
		height: 18px;
	}

	.cube-chart.minimal .cube-annotate {
		bottom: 80%;
	}
}



#toggle-age-sex, #toggle-var-age-sex {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#toggle-age-sex li, #toggle-var-age-sex li {
	position: relative;
	padding: 5px 10px;
	margin: 0;
	font-size: 0.8rem;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
}

#toggle-age-sex li.active, #toggle-var-age-sex li.active {
	padding: 15px 10px;
	background-color: #2883A2;
	color: white;
	font-weight: bold;
}

#toggle-age-sex li.active:after, #toggle-var-age-sex li.active:after {
	content: '';
	position: absolute;
	right: -10px;
	top: 50%;
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 0; 
  	height: 0; 
  	border-top: 10px solid transparent;
  	border-bottom: 10px solid transparent;
  	border-left: 10px solid #2883A2;
}

#covid-report {
	border: 1px solid white;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 100%;
	padding: 10px 20px;
	margin-bottom: 15px;
	display: inline-block;
	font-weight: bold;
	font-size: 1.05rem;
	text-decoration: none;
	color: white;
	animation: pulsate 2s infinite;
	-webkit-transition: all 0.4s ease;
  	-moz-transition: all 0.4s ease;
  	-o-transition: all 0.4s ease;
  	transition: all 0.4s ease;
}

#covid-report:hover {
	color: black;
	background-color: white;
}

.covid-report-small {
	display: inline-block;
	color: white;
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 20px;
}

.covid-report-small:hover {
	color: white;
	text-decoration: underline;
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
	}
	70% {
		-webkit-box-shadow: 0 0 0 10px rgba(255,255,255,0);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0);
	}
}

@keyframes pulsate {
	0% {
		box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(255,255,255,0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255,255,255,0);
	}
}


/* -------------------------------- 

Policy

-------------------------------- */

#policy-data-table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

#policy-data-table {
	background-color: #f5f5f5;
}

#policy-data-table th {
	position: relative;
	font-size: 0.5rem !important;
	word-wrap: normal;
	text-align: left !important;
	padding: 5px 10px 5px 0px !important;
	word-break: break-word;
	font-weight: 700;
	color: black;
	background-color: white;
	text-align: center !important;
	border: none;
	border-bottom: 3px solid black !important;
}

#policy-data-table tr {
	background-color: transparent;
}

#policy-data-table td {
	position: relative;
	font-size: 0.65rem !important;
	word-wrap: normal;
	padding: 8px 5px !important;
	font-weight: normal;
	border: none;
	border: 1px solid white;
}

/*#policy-data-table td:nth-child(2) {
    white-space: nowrap;
}*/

.map-toggle {
	padding: 7px 10px;
	margin: 0px 0px 10px 0px;
	font-size: 0.8rem;
	background-color: transparent;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.map-toggle.active {
	font-size: 0.9rem;
	background-color: #2883A2;
	color: white;
}

.td-tooltip {
	/*display: none;*/
	position: absolute;
	z-index: 10;
	bottom: 100%;
	left: 50%;
	padding: 10px;
	color: white;
	white-space: nowrap;
	background-color: #222;
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.td-tooltip:after {
	position: absolute;
	z-index: 9;
	content: '';
	bottom: -8px;
	left: 50%;
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: #222 transparent transparent transparent;
}


/*#policy-data-table td:hover .td-tooltip, #policy-data-table th:hover .td-tooltip {
	display: block;
}*/

.policy-filter-wrap {
	margin-bottom: 15px;
}

.policy-filter-wrap label {
	font-size: 0.8rem;
}

.policy-filter-wrap input[type=text] {
	border: 1px solid #ddd !important;
    -moz-appearance: auto;
    -webkit-appearance: auto;
    appearance: auto;
    width: 100%;
}

.policy-filter-wrap input[type=text], .policy-filter-wrap select  {
	border: 2px solid #ddd !important;
	height: 50px;
}

@media only screen and (max-width : 767px) {
	.responsive-table-wrap {
		overflow: auto;
		height: 500px;
	}

	#policy-data-table {
		table-layout: auto;
	}
}

.box {
	padding: 40px;
}

.bg-black {
	background-color: #333;
	color: white;
}

.bg-black .title-small {
	color: white;
}

.bg-yellow {
	background-color: #e3b01d;
	color: #111;
}

.purple_source { background: #8d8ec3;}
.purple_source:hover { background: #7273a5;}
.purple_source.prompt {
    -webkit-box-shadow: 0px 2px 0px 1px rgb(116 117 173);
    -moz-box-shadow: 0px 2px 0px 1px rgba(116,117,173,1);
    box-shadow: 0px 2px 0px 1px rgb(116 117 173);
}

.badge {
	position: absolute;
	top: 2px;
	right: 0;
	color: white;
    background-color: #e37b75;
    font-size: 12px;
    padding: 0px 4px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.chart-container {
	height: 500px;
}

@media only screen and (max-width : 767px) {
	.chart-container {
		height: 400px;
	}

	h1 {
		font-size: 2.2rem;
	}
}