#header {
	text-align: center;
	margin-bottom: 15px;
	min-width: 300px;
}

#header h1 {
	display: flex;
	align-items: center;
	justify-content: center;
}

#summonerIcon {
	width: 50px;
	border-radius: 3px;
	margin-right: 8px;
}

#summonerName {
	vertical-align: middle;
	font-weight: normal;
}

#profileLinks {
	display: flex;
	justify-content: space-evenly;
}

#container {
	width: 100%;
	padding-bottom: 10px;
}

th {
	user-select: none;
}

th>span {
	padding-left: 5px;
	padding-right: 10px;
	background-position: right;
	background-repeat: no-repeat;
}

th[data-sorting-order="-1"]>span {
	background-image: url("/img/arrow-descending.gif");
}

th[data-sorting-order="0"]>span {
	background-image: url("/img/arrow-unsorted.gif");
}

th[data-sorting-order="1"]>span {
	background-image: url("/img/arrow-ascending.gif");
}

.chest {
	height: 17px;
	filter: brightness(115%);
	-webkit-filter: brightness(115%);
}

.token {
	height: 17px;
	margin-left: 2px;
	margin-right: 2px;
}

.notEarned {
	filter: brightness(0%) opacity(15%);
	/* https://github.com/Derpthemeus/ChampionMastery.GG/issues/17 */
	-webkit-filter: brightness(1%) opacity(15%);
}

.progressBar-outer {
	background-color: var(--progress-bar-empty);
	height: 15px;
	width: 100%;
	position: relative;
}

.progressBar-inner {
	background-color: var(--progress-bar-filled);
	height: 100%;
	position: absolute;
	left: 0;
}

.pointsToNextLevel {
	display: block;
	width: 100%;
	text-align: center;
	position: absolute;
}

/* Make the table wider and much more compact. */
@media (max-width: 410px) {
	.collapsible {
		display: none;
	}

	#container {
		width: 110%;
	}

	td, th {
		font-size: 12.5px;
		padding-left: 2px;
		padding-right: 2px;
	}
}

/* Make the table wider and slightly more compact. */
@media (min-width: 410px) and (max-width: 750px) {
	.collapsible {
		display: none;
	}

	#container {
		width: 110%;
	}

	td, th {
		font-size: 13px;
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* Make the table wider. */
@media (min-width: 750px) and (max-width: 975px) {
	#container {
		width: 110%;
	}
}
