:root {
	/* Fixed */ 
	--text: #ffffff;
	--background: #2e2f37;
	--border: #000000;
	--select-background: #1b1c24;
	--highlight-color: #3c3d47;
	--highlight-hover: #494b57;
    --highlight-text: #ffffff;
    --scrollbar: #636677;
    --scrollbar-hover: #565867;
	--botton: #565867;
	--botton-hover: #636677;

	/* Customizable */
	--color-bg: #31005b;
	--color-text: #ffffff;
	--color-border: #000000;
}

* {
	font-family: 'Varela';
}

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
}

body {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
}

main {
	flex: 1;
}

.control-panel {
	background-color: var(--background);
	padding: 1rem;
	width: 100%;
	display: inline-flex;
}

.match-selection {
	color: var(--text);
	overflow-y: auto;
	min-width: 12rem;
	width: auto;
}

.match-selection-label {
	color: var(--text);
}

#match-selector {
	color: var(--text);
	background-color: var(--select-background);
	border: 1px solid var(--border);
	border-radius: 3px;
}

#match-selector:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--border);
}

#match-selector option {
    padding: 4px;
    margin-bottom: 2px;
	border-radius: 3px;
    cursor: pointer;
}

#match-selector option:checked {
    background: linear-gradient(0deg, var(--highlight-color) 0%, var(--highlight-color) 100%);
    color: var(--highlight-text);
}

#match-selector option:hover {
    background-color: var(--highlight-hover);
}

#match-selector option:checked:hover {
    background: linear-gradient(0deg, var(--highlight-color) 0%, var(--highlight-color) 100%);
}

#match-selector::-webkit-scrollbar {
    width: 8px;
}

#match-selector::-webkit-scrollbar-track {
    background: var(--background);
    border-radius: 4px;
}

#match-selector::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 4px;
}

#match-selector::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

.color-selection {
	margin-left: 2rem;
}

.color-selection-label {
	color: var(--text);
}

.color-selector-group {
	display: inline-flex;
}

.color-selector-label {
	color: var(--text);
	margin-right: 0.5rem;
}

.color-selector {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
	margin-right: 0.5rem;
}

.color-selector::-webkit-color-swatch-wrapper {
	padding: 0;
}

.color-selector::-webkit-color-swatch {
	border: 2px solid var(--botton);
    border-radius: 3px;
}

.color-selector::-moz-color-swatch {
	border: 2px solid var(--botton);
    border-radius: 3px;
}

.color-selector:hover::-webkit-color-swatch {
	border-color: var(--botton-hover);
}

.color-selector:hover::-moz-color-swatch {
	border-color: var(--botton-hover);
}

.reset-button {
	background-color: var(--botton);
	color: var(--text);
	border-color: none;
	border-style: none;
	border-radius: 3px;
    height: 1.5rem;
}

.reset-button:hover {
	background-color: var(--botton-hover);
}

.reset-button:focus {
    outline: none;
    box-shadow: none;
}

.livematches {
	width: 100% - 3rem;
	margin: 3rem;
}

.match {
	color: var(--color-text);
	width: 100%;
}

.header-table {
	color: var(--color-text);
	border: none;
	font-size: 2.5rem;
	margin-bottom: none;
}

.score {
	text-align: center;
	margin-top: none;
	font-weight: bold;
}

.match-table h1 {
	color: var(--color-text);
	text-align: center;
}

.match-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.match-table th, td {
	border: 3px solid var(--color-border);
	padding: 8px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.no-matches {
	color: var(--color-text);
	text-align: center;
}

.header-left {
	width: 50%;
	text-align: right;
}

.header-middle {
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
}

.header-right {
	width: 50%;
	text-align: left;
}

.header-player1 { width: 95% / 7%; }
.header-player2 { width: 95% / 7%; }
.header-bans1   { width: 95% / 7%; }
.header-bans2   { width: 95% / 7%; }
.header-pickers { width: 95% / 7%; }
.header-picks   { width: 95% / 7%; }
.header-wins    { width: 95% / 7%; }