/* -------------------- */
/* CORE STYLES 		*/
/* -------------------- */

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 16px;
	color: #4F4F4F;

	padding: 0;
	margin: 0;
}

body .content,
body nav.fixed-header {
	max-width: 1000px;
}			

.block {
	display: block;
}
.relative {
	position: relative;
}

.hide {
	display: none;
}

/* -------------------- */
/* COLOURS 		*/
/* -------------------- */
/*
dark blue	#007B8B
light blue	#3395A2
green		#81BA40
light green	#D9E4C9
darker grey	#828282
dark grey	#BDBDBD
light grey	#E0E0E0
lighter grey bg #F5F5F5
*/

.border-c0 {
	border-color: #000000; 	/* black */
}

.bg-c9 {
	background-color: #ffffff; /* white */
}

/* --- */


.border-c1 {
	border-color: #007B8B; 	/* dark blue */
}
.bg-c1 {
	background-color: #007B8B;
}

/* --- */


.border-c2 {
	border-color: #3395A2; /* blue */
}
.bg-c2 {
	background-color: #3395A2;
}

/* --- */

.border-c3 {
	border-color: #81BA40; /* green */
}
.bg-c3 {
	background-color: #81BA40;
}


/* --- */

.border-c4 {
	border-color: #D9E4C9; /* light green */
}
.bg-c4 {
	background-color: #D9E4C9;
}

/* --- */

.border-c5 {
	border-color: #828282; /* dark grey */
}
.bg-c5 {
	background-color: #828282;
}

/* --- */

.border-c6 {
	border-color: #BDBDBD; /* grey */
}
.bg-c6 {
	background-color: #BDBDBD;
}

/* --- */

.border-c7 {
	border-color: #E0E0E0; /* light grey */
}
.bg-c7 {
	background-color: #E0E0E0;
}

/* --- */

.border-c8 {
	border-color: #F5F5F5; /* lighter grey */
}
.bg-c8 {
	background-color: #F5F5F5;
}

/* --- */

.text-c0 {
	color: #000;
}

.text-c1 {
	color: #4F4F4F;
}

.text-c2 {
	color: #fff;
}

.text-bold {
	font-weight: 600;
}

.text-center {
	text-align: center;
}

/* --- */

.svg-bg {
	background-color: #eeeeee;
	display: inline-block;
}


/* -------------------- */
/* CONTENT 		*/
/* -------------------- */

h1,
h2 {
	font-weight: 600;
	margin: 0;
	padding: 0;
}

h1 { 
	font-size: 32px;
	display: inline-block;
}


nav.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
}

nav .fixed-header-wrap {
	background-color: #ffffff; 
	padding-bottom: 16px;
}

nav .fixed-header-0 {
	opacity: 1;
}
nav .fixed-header-1 {
	opacity: 0.9;
}
nav .fixed-header-2 {
	opacity: 0.8;
}
nav .fixed-header-3 {
	opacity: 0.7;
}
nav .fixed-header-4 {
	opacity: 0.6;
}
nav .fixed-header-5 {
	opacity: 0.5;
}
nav .fixed-header-6 {
	opacity: 0.4;
}
nav .fixed-header-7 {
	opacity: 0.3;
}
nav .fixed-header-8 {
	opacity: 0.2;
}
nav .fixed-header-9 {
	opacity: 0.1;
}

nav .fixed-header-0 {
	background-color: #ffffff;
}

nav .fixed-header-1,
nav .fixed-header-2,
nav .fixed-header-3,
nav .fixed-header-4,
nav .fixed-header-5,
nav .fixed-header-6,
nav .fixed-header-7,
nav .fixed-header-8,
nav .fixed-header-9 {
	background-color: #ffffff;
	width: 100%;
	height: 2px;
}

main.main {
	padding-top: 80px;
}

.select-year-form {
	display: inline-block;
	vertical-align: top;
	margin-top: 7px;
	margin-left: 15px;
}

select.select-year, 
select.jump-to {
	color: #BDBDBD;
	border-color: #BDBDBD;
	border-radius: 5px;
	padding: 5px 3px;
	outline: none;	
}
	
.relative {
	position: relative;
}

.jump-to-form {
	position: absolute;
	top: 7px;
	right: 0;
}
.jump-to-label {
	margin-right: 8px;
	display: inline-block;
}

@media screen and (max-width: 770px) {		
	.select-year-form {
		display: block;
		margin-left: 0;
	}
	.select-year-form select {
		width: 100%;
		max-width: 290px;
	}
	
	.jump-to-form {
		position: static;
	}
	.jump-to-label {
		display: block;
		margin-top: 10px;
		margin-bottom: 5px;
	}
	.jump-to-form select {
		width: 100%;
		max-width: 290px;
	}
	main.main {
		padding-top: 180px;
	}
}


h2 {
	font-size: 25px;
}

p {
	font-size: 16px;
	font-weight: 600;

	margin: 0;
	padding: 0;
}
p.larger {
	font-size: 18px;
}
p.smaller {
	font-size: 14px;
}

a.link {
	color: #BDBDBD;
	text-decoration: none;
}

a.link.text-c3 {
	color: #81BA40;
}

a.link.underline {
	text-decoration: underline;
}

.table a.link { 
	color: #4F4F4F;
}


a.link:hover {
	text-decoration: underline;
}

.note {
	font-style: italic;
	color: #BDBDBD;
}

.strong {
	font-weight: 600;
}

.hr {
	height: 3px;
	background-color: #e0e0e0;
}

/* -------------------- */
/* SPACING  		*/
/* -------------------- */

.br-10 {
	margin-bottom: 10px;
}
.br-20 {
	margin-bottom: 20px;	
}
.br-30 {
	margin-bottom: 30px;
}
.br-40 {
	margin-bottom: 40px;
}
.br-50 {
	margin-bottom: 50px;
}
.br-60 {
	margin-bottom: 60px;	
}
.br-70 {
	margin-bottom: 70px;
}
.br-80 {
	margin-bottom: 80px;
}
.br-90 {
	margin-bottom: 90px;
}

/* --- */

.pad {
	padding: 20px;
}
.pad-top {
	padding-top: 20px;
}
.pad-left {
	padding-left: 20px;
}
.pad-right {
	padding-right: 20px;
}



.pad-10 {
	padding: 10px 20px;
}
.pad-20 {
	padding: 20px 20px;
}
.pad-30 {
	padding: 30px 20px;
}
.pad-40 {
	padding: 40px 20px;
}
.pad-50 {
	padding: 50px 20px;
}
.pad-60 {
	padding: 60px 20px;
}
.pad-70 {
	padding: 70px 20px;
}
.pad-80 {
	padding: 80px 20px;
}
.pad-90 {
	padding: 90px 20px;
}

/* -------------------- */
/* CIRCLES 		*/
/* -------------------- */

.v-align {
    display: table;
}

.v-align > .v-align-child {
    display: table-cell;
    vertical-align: middle;
}

.h-align {
	text-align: center;
}

/* --- */

.circles {
	text-align: center;
}

.circles .circle {
	display: inline-block;
	margin: 17px;
	vertical-align: top;
}

.circle .dot {
	height: 140px;
	width: 140px;
	border-width: 8px;
	border-style: solid;
	border-radius: 50%;
}

.circle-large .dot {
	height: 210px;
	width: 210px;
}

.circle-larger .dot {
	height: 260px;
	width: 260px;
}

.circle span {
	display: block;
}

.circle .one-line .one {
	font-size: 40px;
	font-weight: 600;
}
.circle .two-line .one {
	font-size: 40px;
	font-weight: 600;
}

.circle.circle-small-text .one-line .one {
	font-size: 30px;
}
.circle.circle-small-text .two-line .one {
	font-size: 30px;
}


.circle .two-line .two {
	font-size: 16px;
	font-weight: 600;
}

.circle .title {
	font-weight: 600;
	font-size: 16px;
	margin-top: 20px;
}
.circle .title > span {
	display: block;
} 

.circle-impact-zero {
	display: none !important;
}

.circle-citescore-zero {
	visibility: hidden;
}

/* -------------------- */
/* LOGOS 		*/
/* -------------------- */

.box-logo {
	border-radius: 8px;
	display: inline-block;
	position: relative;
	
	width: 20%;
	min-width: 146px;
	margin-left: 2%;
	margin-right: 2%;
	
	margin-top: 10px;
	margin-bottom: 10px;

	text-align: center;
	height: 97px;
	vertical-align: top;
}
.box-logo .logo {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
}
.box-logo .logo-scopus {
	margin-left: -62px;
	margin-top: -20px;
}
.box-logo .logo-wos {
	margin-left: -59px;
	margin-top: -34px;
}
.box-logo .logo-compendex {
	margin-left: -66px;
	margin-top: -34px;
}
.box-logo .logo-pubmed {
	margin-left: -66px;
	margin-top: -23px;
}

	
/* -------------------- */
/* TABLES 		*/
/* -------------------- */

table { 
	counter-reset: section; 
	width: 100%;
}

table td,
table th {
	text-align: right;
}
table th {
	white-space: nowrap;
}

table td:first-child,
table th:first-child { 
	text-align: left;
}

table td:first-child { 
	counter-increment: section;
}

table td:first-child:before { 
	content: counter(section) '. ';
	display: inline-block;
	width: 28px;
}

.table table caption {
	text-align: left;
	padding: 8px 17px;
	font-weight: 600;
}

table th {
	padding: 8px 11px 0 11px;
	font-weight: 600;
}
table td {
	border-bottom: 1px #e5e5e5 solid;
	padding: 16px 11px 17px 11px;
	font-weight: 600;
}

/* --- */

.mini-table table caption {
	text-align: left;
	font-weight: 600;
	padding-bottom: 15px;
}


.mini-table table td {
	padding: 14px 11px 15px 11px;
}

.mini-table table tr:first-child td {
	border-top: 1px #e5e5e5 solid;
}

/* -------------------- */
/* TABLES + CIRCLES	*/
/* -------------------- */

.table-circles .circles {
	position: absolute;
	left: 0;
	top: 0;
}
.table-circles .mini-table {
	/* margin-left: 380px; */
}


.table-circles .circle {
	margin-left: 20px;
	text-align: center;
}

.table-circles .circle,
.table-circles .mini-table {
	display: inline-block;
	vertical-align: top;
}

.table-circles .mini-table {
	margin-left: 20px;
	width: calc( 100% - 380px );
}

/* -------------------- */
/* CHART - MONTHLY BARS */
/* -------------------- */

.subsmonth-div-wrap {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 50%;
}

.subsmonth-div { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	top: 0; 
}

/* -------------------- */
/* CHART - HORIZ BAR 	*/
/* -------------------- */

.subtopub-div-wrap {
	position: relative;
}

.subtopub-div {
	width:100%; 
	height:200px;
}

.subtopub-legend {
	width: 100%;
	height: 80px; /* one line */
}
@media screen and (max-width: 770px) {		
	.subtopub-legend {
		height: 100px; /* two liner */
	}
}
@media screen and (max-width: 540px) {		
	.subtopub-legend {
		height: 140px; /* three liner */
	}
}
	
.subtopub-label {
	position: absolute;
	top: 0;
	display: none; /* shown via JS */
}

.subtopub-label-1 {
	background: #81BA40;
	height: 55px;
	margin-top: 55px;
	position: relative;
	width: 140px;
	margin-left: -56px;
	margin-top: 0;
}
.subtopub-label-1:before {
	border-top: 35px solid #81BA40;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	bottom: -35px;
	width: 0;
}

.subtopub-label-2 {
	background-color: #D9E4C9;
	height: 49px;
	position: absolute;
	left: 3px;
	top: 3px;
	width: 134px;

	padding: 5px;

	font-size: 40px;
	text-align: center;
}
.subtopub-label-2:before {
	border-top: 35px solid #D9E4C9;
	border-left: 67px solid transparent;
	border-right: 67px solid transparent;
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	bottom: -35px;
	width: 0;
}		

.subtopub-h2 {
	visibility: hidden; /* shown via JS */
}
	
/* -------------------- */
/* MAPS 		*/
/* -------------------- */

.mapdiv-key {
	position: absolute;
	width: 20px;
	height: 50%;
	top: 0;
	right: 10px;
			
	margin-top: 10%;
	background-image: linear-gradient( #7BB643, #2C4516 );
}
.mapdiv-more {
	position: absolute;
	top: -20px;
	left: -5px;		
}
.mapdiv-less {
	position: absolute;
	bottom: -20px;
	left: -5px;		
}

.mapdiv-wrap {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 45%; /* border-width */
}

.mapdiv { 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	top: 0; 
}

.circle-map .circles,
.circle-map .map-wrap {
	display: inline-block;
	vertical-align: top;
}
.circle-map .map-wrap {
	width: calc( 100% - 300px );
}
@media screen and (max-width: 640px) {		
	.circle-map .map-wrap {
		width: 100%;
	}
}
	
/* -------------------- */
/* MAP CIRCLES		*/
/* -------------------- */

.map-circles .circles,
.map-circles .map-wrap {
	display: inline-block;
	vertical-align: top;
}
.map-circles .map-wrap {
	width: calc( 100% - 250px );
}
@media screen and (max-width: 640px) {		
	.map-circles .map-wrap {
		width: 100%;
	}
	.table-circles .mini-table {
		display: block;
		width: 100%;
		margin-left: 0;
		margin-top: 25px;
		margin-bottom: 25px;
	}
}

.map-circles .circle {
	margin-top: 0;
	margin-left: 0;	
	margin-bottom: 0;	
}
.map-circles .circle-large {
	margin-bottom: 17px;
}
	
.map-circles .circles {
	position: relative;
	top: -25px;
}
.map-circles .circle-normal {
	position: relative;
	left: -17px;
}
	
/* --------------------- */
/* HOVER TOOLTIP - RIGHT */
/* --------------------- */
.circle-hover-label {
	position: relative;
	
}

.hover-label {
	position: absolute;
	z-index: 4;
	
	opacity: 0;
	transition: opacity 1s;
}

.circle-small .hover-label {
	top: 100px;
	left: 200px;
}

.circle-larger .hover-label {
	top: 120px;
	left: 260px;
}


.circle-hover-label:hover .hover-label {
	opacity: 1;
}

.hover-label-1 {
	background: #E0E0E0;
	width: 176px;				/* [C = TOOLTIP WIDTH] */
	margin-top: 55px;
	position: relative;
	height: 120px;				/* [A = TOOLTIP HEIGHT] */
	margin-left: -100px;
	margin-top: -90px;			/* [A /2 + 30 ] */
}
.hover-label-1:before {
	border-right: 35px solid #E0E0E0;	/* [B = ARROW HEAD WIDTH] */
	border-top: 60px solid transparent;	/* [A /2] */
	border-bottom: 60px solid transparent;	/* [A /2] */
	content: "";
	height: 0;
	top: 0;
	position: absolute;
	left: -35px;				/* [-B] */
}

.hover-label-2 {
	background-color: #FFFFFF;
	width: 170px;				/* [C -6] */
	position: absolute;
	left: 3px;
	top: 3px;
	height: 114px;				/* [A -6] */

	padding: 5px;

	font-size: 14px;
	text-align: left;
}
.hover-label-2:before {
	border-right: 35px solid #FFFFFF;	/* [B] */
	border-top: 57px solid transparent;	/* [A /2 -3] */
	border-bottom: 57px solid transparent;	/* [A /2 -3] */
	content: "";
	height: 0;
	top: 0;
	position: absolute;
	left: -35px;				/* [-B] */
	height: 0;
}

.hover-label-content {
	height: 100%;
}

/* --------------------- */
/* HOVER TOOLTIP - DOWN  */
/* --------------------- */

.hover-label.down .hover-label-1:before {
	border-bottom: 0;
	border-top: 35px solid #E0E0E0;		/* [B = ARROW HEAD WIDTH] */
	border-left: 60px solid transparent;	/* [A /2] */
	border-right: 60px solid transparent;	/* [A /2] */
	width: 0;
	top: auto;
	left: 28px;
	bottom: -35px;				/* [-B] */
}

.hover-label.down .hover-label-2:before {
	border-bottom: 0;
	border-top: 35px solid #FFFFFF;		/* [B] */
	border-left: 57px solid transparent;	/* [A /2 -3] */
	border-right: 57px solid transparent;	/* [A /2 -3] */
	width: 0;
	left: 28px;
	top: auto;
	bottom: -35px;				/* [-B] */
}

.circle-small .hover-label.down {
	top: -18px;
	left: 82px;
}

.circle-larger .hover-label.down {
	top: 50px;
	left: 142px;
}

@media screen and (max-width: 640px) {			/* ARROW BOTTOM */

	.hover-label-1:before {
		border-bottom: 0;
		border-top: 35px solid #E0E0E0;		/* [B = ARROW HEAD WIDTH] */
		border-left: 60px solid transparent;	/* [A /2] */
		border-right: 60px solid transparent;	/* [A /2] */
		width: 0;
		top: auto;
		left: 28px;
		bottom: -35px;				/* [-B] */
	}

	.hover-label-2:before {
		border-bottom: 0;
		border-top: 35px solid #FFFFFF;		/* [B] */
		border-left: 57px solid transparent;	/* [A /2 -3] */
		border-right: 57px solid transparent;	/* [A /2 -3] */
		width: 0;
		left: 28px;
		top: auto;
		bottom: -35px;				/* [-B] */
	}

	.circle-small .hover-label {
		top: -18px;
		left: 82px;
	}

	.circle-larger .hover-label {
		top: 50px;
		left: 142px;
	}
}