#user-section {
	position: relative;
	left: var(--vertical-title-width);
	width: var(--dashboard-width);
	height: var(--user-section-height);
	display: block;
}
#control-area {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: var(--table-area-width);
}
#center-line {
	position: absolute;
	left: var(--table-area-width);
	top: 0;
	height: 100%;
	width: 6px;
	background-color: var(--pure-black);
	border-left: 1px solid var(--gray);
	border-right: 2px solid var(--dark-gray);
	border-top: none;
	border-bottom: none;
}	
#map-area {
	position: absolute;
	left: calc(var(--table-area-width) + 6px);
	top: 0;
	height: 100%;
	width: calc(100% - var(--table-area-width) - 6px);
}
#button-area {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--button-area-height);
	width: 100%;
	text-align: center;
	padding-top: 5px;
	border-bottom: 2px solid var(--dark-gray);
}
#table-area {
	position: absolute;
	top: var(--button-area-height);
	left: 0;
	width: var(--table-area-width);
	height: var(--table-area-height);
}
#metrics-table,
#countries-table {
	display: block;
	table-layout: fixed;
	border-collapse: collapse;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	cursor: pointer;
}

#metrics-table tr:nth-child(even),
#countries-table tr:nth-child(even) {
	background-color: var(--light-black);
}
#metrics-table tr:nth-child(odd),
#countries-table tr:nth-child(odd) {
	background-color: var(--black);
}
#metrics-table tr.focusable[selected],
#countries-table tr.focusable[selected] {
	color: var(--black);
	background-color: #F9E9AE;	/* yellow */
}
#metrics-table tr.focusable:focus,
#countries-table tr.focusable:focus {
	outline: none;
}
#countries-table th {
	background-color: var(--pure-black);
	text-transform: uppercase;
	letter-spacing: 1px;
}
#metrics-table td,
#countries-table td {
	border-top: none;
	border-right: none;
	border-left: 1px solid var(--pure-black);
	border-bottom: 1px solid var(--pure-black);
	padding: 8px;
}

.lat-lng-button {
	background-color: var(--black);
	color: var(--white);
	text-align: center;
	padding: 3px 6px;
	border: 1px solid var(--gray);
}
.lat-lng-button:hover {
	background-color: var(--pure-black);
	color: var(---pure-white);
}

thematic-earth {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
}