@font-face {
	font-family: 'Cantarell';
	font-display: swap;
	src: url('/res/Cantarell-VF.otf');
}

:root {--bs-font-sans-serif: 'Cantarell', sans-serif;}

body, input {font-variant-numeric: tabular-nums;}

.container {max-width: 900px;}

[id^="pred"]:after, [id^="scor"]:after {content: " %";}

#doubleHeader, #gradient td {
	font-size: 0.8rem;
	vertical-align: middle;
}

#doubleHeader {
	background: linear-gradient(to top right,
		var(--bs-body-bg) 49%,
		var(--bs-body-color) 49.5%,
		var(--bs-body-color) 50.5%,
		var(--bs-body-bg) 51%);
}

.table-sm td, label small {
	padding: 0;
	font-size: 0.75rem;
}

svg {
	stroke-width: 1px;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: center !important;
}

.text-absinthe {
	color: #8cbe1d !important;
}

.btn.primary {
	--bs-btn-color: var(--bs-body-bg);
	--bs-btn-bg: var(--bs-body-color);
	--bs-btn-border-color: var(--bs-body-color);
	--bs-btn-hover-color: var(--bs-body-bg);
	--bs-btn-hover-bg: var(--bs-highlight-color);
	--bs-btn-hover-border-color: var(--bs-body-color);
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-active-color: var(--bs-body-bg);
	--bs-btn-active-bg: var(--bs-body-color);
	--bs-btn-active-border-color: var(--bs-body-color);
}

.btn.secondary {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-bg: var(--bs-secondary-bg);
	--bs-btn-border-color: var(--bs-border-color);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-bg: var(--bs-border-color);
	--bs-btn-hover-border-color: var(--bs-border-color);
	--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-bg: var(--bs-secondary-bg);
	--bs-btn-active-border-color: var(--bs-border-color);
}

.btn.btn-responsive {
	padding: 0.5rem;
	@media (min-width:576px) {
		padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
	}
}

.match-row, .match-half, .player-row, .player-half {
	display: grid;
}

.match-row, .player-row {
	grid-gap: 1rem;
	grid-template-columns: 1fr;
	@media (min-width: 768px) {
		grid-template-columns: 1fr 1fr;
	}
}

.match-left {
	grid-template-columns: 2fr 2fr 3fr 3fr 10fr;
}

.match-right {
	grid-template-columns: 2fr 3fr 2fr 5fr 2fr;
}

.match-col, .player-col {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	white-space: nowrap;
	min-width: 0;
	overflow: clip;
}

.player-left {
	grid-template-columns: 4fr 2fr 4fr 1fr;
}

.player-right {
	grid-template-columns: repeat(4, 1fr) 2fr 2fr;
}

.player-stats {
	display: grid;
	grid-gap: 0.5rem;
	grid-template-columns: repeat(3, 1fr);
	@media (min-width: 768px) {
		grid-template-columns: repeat(6, 1fr);
	}
}