:root {
/* Define the table headers, for use in the responsive table styling below. */
	--th1: "Institution";
	--th2: "Country";
	--th3: "Schools";
	--th4: "Type";
}

#map {
	height: 500px;
	width: 100%;
	margin-top:1rem;
	margin-bottom: 2rem;
}
a img { max-width:100%; }

/* CSS to transform HTML table with ID table_format to a searchable bulleted list with filters */
main #table_format td:nth-of-type(4),main #table_format th:nth-of-type(4),main #table_format tr.hidden  {
	display: none;
}
#filter select {
    margin-right: .5rem;
    padding: .5rem;
    min-width: 25%;
}
#filter select:last-child {
	margin-right: 0;
}

main table:not(.regular_table) tr:nth-of-type(even), main table:not(.regular_table) td[rowspan]:not([rowspan="1"]) {
	background-color: transparent;
}

main table {
	font-size: 75%;
	width: 100%;
	table-layout: fixed;
}

.leaflet-popup-content a {
	font-size:0.8rem;
	text-decoration: none;
}

.leaflet-popup-content img {
    max-width: 2.5rem !important;
	width: 2.5rem !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto .5rem auto !important;
}

main table .data_uni { width:40%; }
main table .data_country { width:8em; }
main th { padding: 0.25em; }
main td {
	border-bottom: 1px solid var(--anthracitelightgrey) !important;
	padding: 0.25em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
main tr:hover td { white-space: normal; }
main tr:hover { background-color:var(--anthracitelightgrey) !important; }

@media only screen and (max-width:600px) {
	#filter.right{ float: none; }
	#filter select{ width: 100%; margin-bottom: 1rem; }

/* Different table layout for narrow screens. */

	main table { table-layout:auto; display:block; }
	main table .data_uni { width:auto; }
	main table .data_country { width:auto; }
	main table thead { display:none; }
	main tr { position:relative; }
	main td { display:block; white-space:normal; overflow:visible; padding-left:6em; }
	main td:before { position:absolute; left:0; display:inline-block; margin-right:1em; }
   	main tr td:nth-of-type(1):before { content: var(--th1)":"; font-weight:bold; }
	main tr td:nth-of-type(2):before { content: var(--th2)":"; opacity:.8; }
	main tr td:nth-of-type(3):before { content: var(--th3)":"; opacity:.8; }
	main tr td:nth-of-type(5):before { content: var(--th4)":"; opacity:.8; }
}