:root {
	--color_bg: #101010;
	--color_hl: #454545;
	--color_hl2: #ffb20090;
	--color_thead: #6D2D27;
	--color_row0: #282828;
	--color_row1: #303030;
	--color_text0: #E8E8E8;
	--color_text1: #ffffff;
	--color_light0: #D93D29;
	--color_light1: #FFA78D;
	--color_content: #191919;
}

html {
	background-color: var(--color_bg);
	color: var(--color_text0);
	font-family: Monaco, Courier, monospace;
	font-variant-ligatures: none;
}

body {
	background-color: var(--color_content);
	max-width: 80em;
	margin: 0 auto;
	padding: 1.5em;
}

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

table {
	margin: 0 auto;
	width: 98%;
	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: 3em;
}

h3 {
	margin-top: 3em;
}

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.dataTable th, table.dataTable td {
  box-sizing: content-box;

}

table.dataTable thead th.sorting {
    cursor: pointer;
    position: relative;
    text-align: left;
    padding-left: 16px;
}

table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > td.sorting::after {
  top: 50%;
  content: "▼";
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > td.sorting::before {
  bottom: 50%;
  content: "▲";
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > td.sorting::before,
table.dataTable thead > tr > td.sorting::after {
  position: absolute;
  display: block;
  opacity: .6;
  left: 4px;
  line-height: 8px;
  font-size: .8em;
}

table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > td.sorting_asc::before,
table.dataTable thead > tr > td.sorting_desc::after {
    opacity: .9;
}

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,td.map {
	font-weight: bold;
	text-align: left;
}

table tbody td.rating {
	text-align: left;
}

table tbody tr.preliminary_ranking {
    opacity: 0.5;
}

table tbody tr.preliminary_ranking:hover {
    opacity: 1.0;
}

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

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

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;
}

div.home_splash_image_container {
    margin: 0 auto; width: fit-content;
}

div.home_splash_image {
    width: 360px;
    height: 180px;
    display: inline-block;
    margin: 0 20px;
    /*
    # Add bg-image URL in Jinja template
	background-image: url({{ url_for('static', filename='splash_ra.png')}});
	*/
	background-repeat: no-repeat;
	background-size: contain;
	border: 1px solid var(--color_hl);
}

div.home_splash_image a img {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

div.home_splash_image a:hover img:hover {
    background-color: unset;
}

div.season_select_container {
    display: flex;
    overflow: auto;
    margin: 16px auto;
    font-size: 0.9em;
    min-height: 32px;
    padding-top: 6px;
}

div.season_select_container div {
    display: block;
    white-space: nowrap;
    opacity: 0.7;
    padding: 2px 8px;
}

div.season_select_container div.active {
    font-weight: bold;
    background: unset;
    opacity: unset;
}

div.announcement-container {
    width: 90%;
    margin: 32px auto;
    background: repeating-linear-gradient( 45deg, #000, #000 10px, var(--color_hl2) 10px, var(--color_hl2) 20px );
    box-sizing: border-box;
    padding: 1px;
}

div.announcement-content {
    background: var(--color_bg);
    margin: 2px;
    box-sizing: border-box;
    padding: 13px;
    font-size: smaller;
}

div.footer {
    width: 100%;
    display: grid;
    gap: 20px;
    grid-auto-columns: auto;
    opacity: 0.6;
    margin-top: 60px;
}
div.footer > div {
    display: inline;
    grid-row: 1;
    width: 100%;
    text-align: center;
}
div.footer a {
    font-weight: bold;
}

/* 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;
}