:root {
	--color_bg: rgb(57, 62, 64);
	--color_hl: rgb(42, 45, 47);
	--color_thead: #2e5793;
	--color_row0: rgb(48, 52, 54);
	--color_row1: rgb(30, 32, 35);
	--color_text0: #ffffff;
	--color_text1: #ffffff;
	--color_light0: #4870ad;
	--color_light1: #4870ad;
	--color_content: rgb(51, 55, 64);
}

html {
	background-color: var(--color_bg);
	color: var(--color_text0);
	font-family: Poppins, arial, freesans, clean, sans-serif;
	font-variant-ligatures: none;
}

body {
	background-color: var(--color_content);
	max-width: 60em;
	margin: 0.5em auto;
	padding: 0.5em;
}

a {
	color: var(--color_light0);
	text-decoration: none;
}
a:hover, a:focus, a:active {
	text-decoration: underline;
}

table {
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

table th, table td {
	padding: 0.4em;
}

h1 {
	font-size: 2em;
	text-align: center;
}

h2 {
	border-bottom: 1px solid;
	margin-top: 2.5em;
}

h3 {
	margin-top: 1.5em;
}

table tbody tr:nth-child(odd) {
	background-color: var(--color_row0);
}

table tbody tr:nth-child(even) {
	background-color: var(--color_row1);
}

table tbody tr:hover {
	background-color: var(--color_hl);
	transition: all 0.3s ease;
}

table thead tr {
	color: var(--color_text1);
	background-color: var(--color_thead);
}

table tbody td.player_avatar {
	display: flex;
	align-items: center;
}

table tbody td.player_avatar div.avatar {
	padding: 0;
	margin: 0;
	width: 25px;
	height: 25px;
}

table tbody td.player_avatar img {
	max-width: 100%;
	max-height: 100%;
}

table tbody td.player_avatar a {
	padding-left: 15px;
	font-weight: bold;
	text-align: left;
}

table tbody td.player {
	font-weight: bold;
	text-align: left;
}

table tbody td.map {
	font-weight: bold;
	text-align: left;
}

img.avatar {
	float: right;
	margin: 4px;
}

span.diffup { font-weight: bold; color: #72ff72; }
span.diffdown { font-weight: bold; color: #ff1a1a; }
span.diffup::after { content: '▲'; }
span.diffdown::after { content: '▼'; }
span.ghost { color: darkgrey; font-style: italic; }

nav ul {
	list-style-type: none;
	overflow: hidden;
	background-color: var(--color_content);
}

nav li {
	float: left;
	margin: 2px;
}

nav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-weight: bold;
}

nav li a:hover, nav li.active {
	background-color: var(--color_hl);
}

nav li a.with_icon {
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 34px;
}

dl#faq dt {
	font-weight: bold;
}
dl#faq dt::before {
	content: '❓ ';
}

dl#faq dd {
	border-left: 1px solid var(--color_hl);
	padding-left: 10px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 30px;
}

/* datatables garbage */
select, input,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	color: var(--color_text0);
	background-color: var(--color_content);
	padding: 5px;
}

select, input {
	border: 1px solid var(--color_hl);
}

.dataTables_wrapper .dataTables_filter {
	float: right;
	text-align: right;
}

.dataTables_wrapper .dataTables_length {
	float: left;
}

.dataTables_wrapper .dataTables_info {
	clear: both;
	float: left;
}

.dataTables_wrapper .dataTables_paginate {
	float: right;
}

.dataTables_wrapper:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}

.paginate_button {
	color: var(--color_text0);
	display: inline-block;
	/* keep the following in sync with nav li a */
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-weight: bold;
}

.paginate_button:hover,
.paginate_button:active,
.paginate_button.current,
.paginate_button.current:hover,
.paginate_button.current:active {
	background-color: var(--color_hl);
	cursor: pointer;
}

.paginate_button.disabled,
.paginate_button.disabled:hover,
.paginate_button.disabled:active {
	background-color: inherit;
	cursor: inherit;
	color: var(--color_text1);
	color: #707070;
}