:root {

	--body-background-color: #f6f6f6;
	--body-text-color: #000;
	--hero-background-start-color: #c6d2ff;
	--hero-background-end-color: #fff;
	--search-placeholder-color: #999;
	--game-background-color: #fff;
	--game-border-color: #fff;
	--game-finished-background-color: transparent;
	--game-finished-border-color: #ddd;
	--game-subtitle-text-color: #444;
	--modal-header-background-color: #c6d2ff;
	--modal-navigation-border-color: #eee;
	--button-background-color: #eee;
	--button-border-color: #99f;
	--footer-text-color: #666;
	--metabet-bet-background-color: #f3f5fb;
	--metabet-bet-border-color: #ddd;
	--metabet-text-color-50: #787878;
	--points-guarded: #729f00;
	--points-elevated: #ffcc00;
	--points-high: #ff6600;
	--points-severe: #cc0000;
}
	.theme-dark {
		--body-background-color: #16182d;
		--body-text-color: #eee;
		--hero-background-start-color: #121425;
		--hero-background-end-color: #1b1e3c;
		--search-placeholder-color: #666;
		--game-background-color: #1b1e3c;
		--game-border-color: #222;
		--game-finished-background-color: transparent;
		--game-finished-border-color: #222;
		--game-subtitle-text-color: #ccc;
		--modal-header-background-color: #121425;
		--modal-navigation-border-color: #272727;
		--button-background-color: var(--hero-background-start-color);
		--button-border-color: #2a305e;
		--footer-text-color: #828ba1;
		--metabet-bet-background-color: #121425;
		--metabet-bet-border-color: #555;
		--metabet-text-color-50: #888888;
	}


body {
	color: var(--body-text-color);
	background-color: var(--body-background-color);
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

a {
	color: var(--body-text-color);
	text-decoration: none;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}


header {
	background: linear-gradient(to bottom, var(--hero-background-start-color), var(--hero-background-end-color));
	margin-bottom: 2em;
}

#hero {
	padding: 2em 2em 3em 2em;
	display: grid;
	grid-template:
		"logo		links"	auto
		"tagline	fan"	auto
		"search 	fan"	auto
		/ 1fr 1fr;
}
	#hero .logo { grid-area: logo; }
	#hero .links { grid-area: links; }
	#hero .tagline { grid-area: tagline; }
	#hero .search { grid-area: search; }
	#hero .fan { grid-area: fan; }

	#hero .links {
		display: flex;
		justify-content: flex-end;
	}
		#hero .links li {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: .75em;
			font-weight: bold;
			cursor: pointer;
			user-select: none;
			width: 7em;
			height: 3em;
			margin: 1em;
			border: 1px solid var(--button-border-color);
			border-radius: .25em;
			transition: background .3s ease-in-out;
		}
		#hero .links li:hover {
			background-color: var(--hero-background-end-color);
		}

	#hero .tagline {
		font-weight: 900;
		font-size: 2em;
		padding: .75em 0;
	}

	#hero #current-provider {
		display: none;
	}

	#hero .search {
		display: flex;
	}
		#hero .search input[type=text] {
			flex: 1;
			font-size: 1.25em;
			margin-right: .25em;
			padding: .5em 1em .5em 2em;
			border: 1px solid #ccc;
			border-radius: 2em;
			box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
			color: var(--body-text-color);
			background: url('/images/search.svg') no-repeat var(--game-background-color) 4% 50%;
			background-size: 1em;
		}
			#hero .search input[type=text]::placeholder {
				color: var(--search-placeholder-color);
			}
			body.theme-dark #hero .search input[type=text] {
				background-image: url('/images/search-dark.svg');
			}
		#hero .search input[type=button] {
			color: #eee;
			font-weight: bold;
			background: linear-gradient(to right, #0b3be7, #0085ff);
			border: none;
			border-radius: 2em;
			padding: 0 2em;
		}


#autocomplete-results {
	margin-top: .5em;
	padding: 0;
	list-style-type: none;
	display: grid;
	grid-auto-rows: auto;
	grid-template-columns: repeat(auto-fit, minmax(14.5em, 1fr));
	grid-gap: .5em;
}
	#autocomplete-results dt {
		grid-column: 1 / -1;
		font-size: 1.5em;
		font-weight: bold;
		margin-top: 1.5em;
	}
		#autocomplete-results dt:first-child {
			margin-top: 0;
		}
	#autocomplete-results dd {
		height: 8em;
		margin: 0;
	}
		#autocomplete-results dd > div, #autocomplete-results dd > a .game {
			height: 100%;
			border-radius: .5em;
			border: 1px solid var(--game-border-color);
		}
		#autocomplete-results dd:has(> .metabet-adtile-empty) {
			display: none;
		}


#loading, #autocomplete-empty.show {
	height: 10em;
	display: flex;
	justify-content: center;
}

#autocomplete-empty.show {
	display: flex !important;
}
	#autocomplete-empty h2 {
		text-align: center;
		margin: 0 1em;
	}


.pointsLevel span {
	display: inline-block;
	font-size: 9px;
	width: 40px;
	padding: 3px 0;
	margin-bottom: 2px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
	.guarded .pointsLevel span {
		background: var(--points-guarded);
	}
	.elevated .pointsLevel span {
		color: #111;
		background: var(--points-elevated);
	}
	.high .pointsLevel span {
		background: var(--points-high);
	}
	.severe .pointsLevel span {
		background: var(--points-severe);
	}


div.game {
	border: 1px solid var(--game-border-color);
	padding: .75em .25em .5em .25em;
	font-family: Rubik, sans-serif;
	cursor: pointer;
	background: var(--game-background-color);
	display: grid;
	grid-template:
		"pointsLevel	sport		sport		callSign	callSign"	20px
		".		.		.		.		."		5px
		"team1Logo	team1Name	team1Name	team1Name	time"		30px
		"team2Logo	team2Name	team2Name	team2Name	time"		30px
		".		.		.		.		."		5px
		"headline	headline	headline	headline	headline"	1fr
		/ 50px 1fr 1fr 50px 50px;
	place-items: center;
}
	div.game * {
		font-size: .65em;
	}

	div.game.finished {
		background-color: var(--game-finished-background-color);
		border-color: var(--game-finished-border-color);
	}

	div.game.has-started {
		grid-template:
			"pointsLevel	sport		sport		callSign	callSign"	20px
			".		.		.		.		."		5px
			"team1Logo	team1Name	team1Name	timeLeft	team1Score"	30px
			"team2Logo	team2Name	team2Name	timeLeft	team2Score"	30px
			".		.		.		.		."		5px
			"headline	headline	headline	headline	headline"	1fr
			/ 50px 1fr 1fr 50px 50px;
	}

	div.game.has-field 	{
		grid-template:
			"sport		callSign	callSign	pointsLevel"	20px
			".		.		.		."		10px
			"location	location	location	time"		30px
			".		.		.		."		10px
			/ 50px 1fr 50px 50px;
	}
		div.game.has-field.has-started {
			grid-template:
				"sport		sport		.		pointsLevel"	20px
				".		.		.		."		10px
				"location	location	location	location"	30px
				".		.		.		."		5px
				"timeLeft	timeLeft	timeLeft	timeLeft"	1fr
				/ 50px 1fr 50px 50px;
		}

.scores.zoom-20 div.game {
	display: inline-grid;
	width: 45%;
	margin: .25em .5em;
	border-width: 0 0 0 2px;
	border-style: solid;
	grid-template:
		"sport		callSign	callSign"	18px
		"team1Logo	team1Initials	time"		22px
		"team2Logo	team2Initials	time"		22px
		/ 35px auto 45px;
}
	.scores.zoom-20 div.game.has-started {
		grid-template:
			"sport		callSign	callSign	callSign"		18px
			"team1Logo	team1Initials	team1Score	timeLeft"	22px
			"team2Logo	team2Initials	team2Score	timeLeft"	22px
			/ 35px auto auto 45px;
	}

	.scores.zoom-20 div.game.guarded {
		border-color: var(--points-guarded);
	}
	.scores.zoom-20 div.game.elevated {
		border-color: var(--points-elevated);
		border-left-width: 3px;
	}
	.scores.zoom-20 div.game.high {
		border-color: var(--points-high);
		border-left-width: 3px;
	}
	.scores.zoom-20 div.game.severe {
		border-color: var(--points-severe);
		border-left-width: 3px;
	}
	.scores.zoom-20 div.game .team1Score, .scores.zoom-20 div.game .team2Score, .scores.zoom-20 div.game .team1Initials, .scores.zoom-20 div.game .team2Initials {
		display: block;
		font-size: 15px;
		font-weight: 500;
	}
	.scores.zoom-20 div.game .sport, .scores.zoom-20 div.game .callSign {
		font-size: 10px;
	}
		.scores.zoom-20 div.game .sport {
			padding-left: 7px;
			justify-self: flex-start;
		}
	.scores.zoom-20 div.game .timeLeft {
		font-size: 11px;
	}
	.scores.zoom-20 div.game .pointsLevel, .scores.zoom-20 div.game .headline, .scores.zoom-20 div.game .team1Name, .scores.zoom-20 div.game .team2Name {
		display: none;
	}

.scores.zoom-30 div.game {
	margin-top: .25em;
	margin-bottom: .25em;
	border-width: 0 0 0 2px;
	border-style: solid;
	grid-template:
		"sport			callSign	time"	auto
		"gameTeamsScore	callSign	time"	auto
		/ 1fr auto 50px;
}
	.scores.zoom-30 div.game.has-started {
		grid-template:
			"sport			callSign	timeLeft"	auto
			"gameTeamsScore	callSign	timeLeft"	auto
			/ 1fr auto 50px;
	}

	.scores.zoom-30 div.game.guarded {
		border-color: var(--points-guarded);
	}
	.scores.zoom-30 div.game.elevated {
		border-color: var(--points-elevated);
		border-left-width: 3px;
	}
	.scores.zoom-30 div.game.high {
		border-color: var(--points-high);
		border-left-width: 3px;
	}
	.scores.zoom-30 div.game.severe {
		border-color: var(--points-severe);
		border-left-width: 3px;
	}
	.scores.zoom-30 div.game .sport {
		font-size: 10px;
		padding-left: 10px;
		justify-self: flex-start;
	}
	.scores.zoom-30 div.game .callSign {
		font-size: 10px;
		text-align: center;
		width: 40px;
		padding: 5px 0;
	}
	.scores.zoom-30 div.game .gameTeamsScore {
		display: block;
		padding-left: 10px;
		justify-self: flex-start;
	}
	.scores.zoom-30 div.game .timeLeft {
		font-size: 11px;
	}
	.scores.zoom-30 div.game .pointsLevel, .scores.zoom-30 div.game .headline, .scores.zoom-30 div.game .team1Name, .scores.zoom-30 div.game .team2Name, .scores.zoom-30 div.game .team1Score, .scores.zoom-30 div.game .team2Score, .scores.zoom-30 div.game .team1Logo, .scores.zoom-30 div.game .team2Logo {
		display: none;
	}


.scores.zoom-50 div.game {
	grid-template:
		"sport		sport		callSign	pointsLevel"	20px
		".			.			.			."				5px
		"team1Logo	team1Name	team1Name	time"			30px
		"team2Logo	team2Name	team2Name	time"			30px
		".			.			.			."				5px
		/ 50px 1fr 50px 50px;
}
	.scores.zoom-50 div.game.has-started {
		grid-template:
			"sport		sport		callSign	pointsLevel"	20px
			".			.			.			."				5px
			"team1Logo	team1Name	timeLeft	team1Score"		30px
			"team2Logo	team2Name	timeLeft	team2Score"		30px
			".			.			.			."				5px
			/ 50px 1fr 50px 50px;
	}

	.scores.zoom-50 div.game .headline {
		display: none;
	}






div.game .sport {
	justify-self: flex-start;
	align-self: center;
	padding-left: 1px;
	color: var(--game-subtitle-text-color);
	font-size: 11px;
}

div.game .team1Name, div.game .team2Name {
	justify-self: start;
	font-size: 19px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}
	div.game .team1Name sup, div.game .team2Name sup {
		font-size: 60%;
		font-weight: normal;
		padding-left: 2px;
		display: inline-block;
	}

div.game .team1Initials, div.game .team2Initials {
	display: none;
	text-align: left;
	width: 100%;
}

div.game .team1Score, div.game .team2Score {
	font-size: 19px;
	font-weight: 600;
}
	div.game div.has-started .team1Score, div.game div.has-started .team2Score {
		display: block;
	}

div.game .gameTeamsScore {
	display: none;
	font-size: 14px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}
div.game .callSign {
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-self: flex-end;
	margin: 0;
	padding: 0 .75em 0 0;
}
	div.game .callSign li {
		padding-left: .5em;
	}
	div.game .callSign img {
		width: 28px;
		aspect-ratio: 132/99;
	}
	div.game.finished .callSign {
		display: none;
	}

div.game .time, div.game .timeLeft {
	text-align: center;
	white-space: pre-wrap;
}
	.game.has-started .time {
		display: none;
	}
div.game .location {
	font-size: 15px;
	font-weight: bold;
	padding-left: 10px;
	justify-self: flex-start;
	align-self: center;
}

div.game .headline {
	justify-self: start;
	margin: 5px 10px 5px 10px;
	color: var(--game-subtitle-text-color);
	font-size: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sport { grid-area: sport; }
.pointsLevel { grid-area: pointsLevel; }
.team1Logo { grid-area: team1Logo; }
.team1Name { grid-area: team1Name; }
.team1Initials { grid-area: team1Initials; }
.team1Score { grid-area: team1Score; }
.team2Logo { grid-area: team2Logo; }
.team2Name { grid-area: team2Name; }
.team2Initials { grid-area: team2Initials; }
.team2Score { grid-area: team2Score; }
.gameTeamsScore { grid-area: gameTeamsScore; }
.callSign { grid-area: callSign; }
.location { grid-area: location; }
.headline { grid-area: headline; }
.time { grid-area: time; }
.timeLeft { grid-area: timeLeft; }



#modal-shade {
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	backdrop-filter: blur(2px);
}


.modal {
	display: none;
	flex-direction: column;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 400px;
	height: 550px;
	max-height: 100%;
	margin: 0 auto;
	color: var(--body-text-color);
	background-color: var(--body-background-color);
	border: 1px solid var(--game-border-color);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
	.modal .header {
		display: flex;
		flex-direction: row;
		background: var(--modal-header-background-color);
	}
		.modal .header span {
			font-weight: bold;
			padding: .5em;
		}
			.modal .header .back {
				cursor: pointer;
			}
				body.theme-dark .modal .header .back, body.theme-dark .modal .header .share {
					filter: invert(100%);
				}
			.modal .header .title {
				flex: 1;
			}
			.modal .header .share {
				cursor: pointer;
			}
		.modal .stage {
			overflow-y: auto;
		}
		.modal section {
			margin: .25em;
			padding: 0 1em;
			border-radius: .25em;
			font-size: .75em;
			background: var(--game-background-color);
		}
			.modal section strong {
				display: flex;
				height: 2.5em;
				align-items: center;
				border-bottom: 1px dotted #999;
			}
			.modal section dl {
				display: flex;
				align-items: center;
				margin: 0;
			}
				.modal section dt {
					font-weight: bold;
					flex: 1;
				}
					#modal-settings section dt label {
						padding: 1em 0;
						cursor: pointer;
					}
				.modal section dd {
					margin: 0;
				}
					.modal section dd input {
						width: 1.5em;
						height: 1.5em;
					}

			.modal section ul {
				padding-bottom: 1.5em;
			}

	#modal-about {
		line-height: 1.25em;
	}
		#modal-about section {
			padding-top: 1em;
			padding-bottom: 1em;
		}
		#modal-about p {
			margin: 0 .5em .5em .5em;
		}
			#modal-about strong {
				padding-top: 1em;
			}
			#modal-about strong + p {
				padding-top: .5em;
			}
		#modal-about ul {
			padding: .5em;
		}
			#modal-about li {
				padding-bottom: .25em;
			}
		#modal-about a {
			text-decoration: underline;
		}
		#modal-about .guarded, #modal-about .elevated, #modal-about .high, #modal-about .severe {
			color: #fff;
			font-size: .75em;
			padding: .25em .5em;
			font-weight: bold;
			text-transform: uppercase;
		}
			#modal-about .guarded {
				background-color: #729f00;
			}
			#modal-about .elevated {
				background-color: #ffcc00;
			}
			#modal-about .high {
				background-color: #ff6600;
			}
			#modal-about .severe {
				background-color: #cc0000;
			}

	#modal-game {
	}
		#modal-game .score {
			display: grid;
			grid-template:
				"team1Logo	team1Score	timeLeft	team2Score	team2Logo"	auto
				"team1Name	team1Score	timeLeft	team2Score	team2Name"	auto
				"headline	headline	headline	headline	headline"	auto
				/ 3fr 3fr 2fr 3fr 3fr;
			place-items: center;
			background: var(--game-background-color);
			padding: 1em;
		}

		#modal-game .team1Name, #modal-game .team2Name {
			font-weight: bold;
			font-size: .8em;
			text-align: center;
		}
		#modal-game .team1Score, #modal-game .team2Score {
			font-weight: bold;
			font-size: 1.75em;
			letter-spacing: -1px;
		}
		#modal-game .timeLeft {
			font-size: .7em;
			text-align: center;
		}
		#modal-game .headline {
			text-align: center;
			color: var(--game-subtitle-text-color);
			font-size: .65em;
			padding-top: 2em;
		}
			#modal-game .headline:empty {
				display: none;
			}

		#modal-game .empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 3em 1em;
			min-height: 10em;
		}
			#modal-game .empty p {
				margin: 0 0 .5em 0;
				padding: 0;
				font-size: 1em;
			}
			#modal-game .empty p a {
				text-decoration: underline;
			}

		#modal-game .airings,  #modal-game .links {
			margin: 1em .5em;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: flex-start;
			flex-wrap: wrap;
			column-gap: 1em;
			min-height: 4em;
		}
			#modal-game .airings li, #modal-game .links li {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
				#modal-game .airings li span, #modal-game .links li span {
					padding-top: .5em;
					font-size: .8em;
					font-weight: bold;
				}

			#modal-game .links li a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 68px;
			}
				#modal-game .links li img {
					width: 90px;
					aspect-ratio: 3/1;
					padding: .25em;
				}
					#modal-game .links li.broadcast img {
						aspect-ratio: 4/3;
					}
					#modal-game .airings li img {
						width: 80px;
					}
				#modal-game .links li em {
					font-style: normal;
					font-size: .8em;
					position: relative;
					top: -.5em;
				}

		#modal-game section.stats {
		}
			#modal-game .stats-navigation {
				display: flex;
				justify-content: center;
				margin: .5em 0;
			}
				#modal-game .stats-navigation > div {
					font-size: .7em;
					font-weight: bold;
					width: 8em;
					padding: .5em 1em;
					display: flex;
					flex-direction: row;
					align-items: center;
					border: 1px solid #ccc;
					border-radius: 4px 0 0 4px;
					cursor: pointer;
					transition: all .15s ease-out;
				}
				#modal-game .stats-navigation div:last-child {
					flex-direction: row-reverse;
					border-radius: 0 4px 4px 0;
					position: relative;
					left: -1px;
				}
				#modal-game:not(.has-started) .stats, #modal-game.finished .watch, #modal-game.finished .odds {
					display: none;
				}
				#modal-game .stats-navigation > div.on {
					background-color: var(--game-background-color);
				}
				#modal-game .stats-navigation > div span {
					padding: 0 1em;
				}

			#modal-game section.stats table {
				width: 100%;
				table-layout: fixed;
				padding-bottom: 2em;
			}
			#modal-game section.stats table .name {
				text-align: left;
				width: 100%;
			}
				#modal-game section.stats table .name span {
					display: flex;
					align-items: center;
				}
				#modal-game section.stats table .name.substitute {
					padding-left: 2em;
				}
					#modal-game section.stats table .name.substitute.soccer {
						background: url('/images/substitution.svg') no-repeat center left;
						background-size: 1.25em;
					}
				#modal-game section.stats table .name sup {
					color: #999;
					font-size: .75em;
					vertical-align: baseline;
					margin: 0 1em 0 .5em;
				}
			#modal-game section.stats table th, #modal-game section.stats table td {
				text-align: center;
				width: 2em;
				height: 3em;
				font-size: .9em;
				border-bottom: 1px solid var(--body-background-color);
			}


		#modal-game ul.odds {
			flex-direction: column;
			border: none;
			width: 100%;
		}
			#modal-game ul.odds li {
				display: flex;
				flex-direction: row;
				height: 3em;
				margin: .25em 0;
				padding: 0 .5em;
				justify-content: space-between;
				align-items: center;
			}
			#modal-game ul.odds li a {
				flex: inherit;
				height: 80%;
				width: 6em;
			}

		#modal-game ul.assets {
			display: grid;
			width: 100%;
			grid-auto-rows: auto;
			grid-template-columns: 1fr 1fr;
		}
			#modal-game ul.assets li {
				display: flex;
				flex-direction: column;
				padding: .5em .5em 1em .5em;
			}
			#modal-game ul.assets li a {
				font-size: .85em;
				font-weight: bold;
			}
			#modal-game ul.assets li img {
				width: 100%;
				margin-bottom: .5em;
				aspect-ratio: 1280/720;
			}


	#modal-settings {
	}
		#modal-settings label {
			display: block;
			padding: 1em 0 .25em 0;
		}

		#modal-settings input[type=numeric], #modal-settings select {
			color: var(--body-text-color);
			border: 1px solid var(--footer-text-color);
			background: none;
		}

		#modal-settings #postalCode, #modal-settings #providers {
			font-size: 1em;
			padding: .75em;
			width: 100%;
		}
			#modal-settings #providers {
				margin-bottom: 1em;
			}

		#modal-settings .buttons {
			margin-top: 2em;
			text-align: center;
		}
			#modal-settings .buttons input {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				cursor: pointer;
				user-select: none;
				width: 7em;
				height: 3em;
				margin: 1em;
				color: var(--body-text-color);
				background-color: var(--button-background-color);
				border: 1px solid var(--button-border-color);
				border-radius: .25em;
			}


.modal ul.navigation {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 2em;
	min-height: 2em;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	background: var(--game-background-color);
	border-top: 1px solid var(--modal-navigation-border-color);
	border-bottom: 1px solid var(--modal-navigation-border-color);
}
	.modal ul.navigation li {
		color: var(--body-text-color);
		opacity: .4;
		font-size: .7em;
		font-weight: bold;
		padding: 1em 1em;
		cursor: pointer;
		user-select: none;
	}
		.modal ul.navigation li.on {
			opacity: 1;
		}


#footer {
	color: var(--footer-text-color);
	font-size: .7em;
	margin-top: 3em;
	margin-bottom: 5em;
}
	#footer ul {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0;
		padding: 1em 0 0 0;
		border-top: 1px solid var(--footer-text-color);
		width: 100%;
	}
		#footer ul li {
			margin-left: 1em;
		}
		#footer ul li:first-child {
			margin: 0;
			flex: 1;
		}

	#footer a, #footer li span {
		color: #828ba1;
		text-decoration: underline;
		cursor: pointer;
	}



@media (max-width: 1240px) {
	#autocomplete-results {
		margin-left: .5em;
		margin-right: .5em;
	}
}

@media (max-width: 640px) {

	#hero {
		margin-top: 0;
		padding: 0 0 5em 0;
		grid-template:
			"links		links"		3em
			"logo		logo"		auto
			"tagline	tagline"	3.5em
			"search 	search"		4em
			/ 1fr 1fr;
		place-items: center;
		border: 1px solid rgba(24, 53, 158, .15);
	}
		body > header.searched #hero {
			padding: 0 0 1em 0;
			grid-template:
				"logo		links"		3em
				"search 	search"		4em
				/ auto 1fr;
		}
			body > header.searched #hero .logo img {
				width: 70px;
				height: 50px;
				margin-top: 1em;
				margin-left: .5em;
			}
			body > header.searched #hero {
				background-image: none;
			}
			body > header.searched #hero .tagline {
				display: none;
			}


		#hero .links {
			width: 100%;
			height: 100%;
			padding-right: .5em;
		}
			#hero .links li {
				font-weight: normal;
				border: none;
				width: auto;
				height: auto;
				margin: 0;
				padding: .5em 1em;
			}
		body > header:not(.searched) #hero .logo {
			margin-top: .5em;
		}
		#hero .tagline {
			font-size: 1em;
			margin: 0;
			padding: 0;
			align-self: flex-start;
			text-align: center;
		}
		#hero .search {
			font-size: 80%;
			width: 85%;
		}

		#autocomplete-results div.game {
			width: 100%;
		}

	.modal {
		height: 100%;
		max-width: inherit;
		border-radius: 0;
	}

	#footer li {
		padding: 0 1em;
	}
}



.metabet-adtile {
	font-family: Rubik, sans-serif;
	color: var(--body-text-color) !important;
	background: var(--game-background-color) !important;
}
	.metabet-adtile .metabet-adtile-bet {
		margin: 1px 0 !important;
		color: var(--body-text-color) !important;
		background: var(--metabet-bet-background-color) !important;
		border-color: var(--metabet-bet-border-color) !important;
	}
		.metabet-adtile .metabet-adtile-bet:hover {
			background: none !important;
		}

.metabet-responsive {
	min-height: initial !important;
}

.metabet-gametile *, .metabet-sideoddstile * {
	font-weight: 500 !important;
}

.metabet-gametile .metabet-gametile-time {
	visibility: hidden;
}

.metabet-gametile .metabet-gametile-score > * {
	border: none;
}
.metabet-gametile .metabet-gametile-odds > div:nth-child(n+3) {
	display: none;
}
.metabet-gametile .metabet-gametile-odds > div > label {
	color: var(--metabet-text-color-50) !important;
}

.metabet-sideoddstile {
}
	.metabet-sideoddstile .metabet-sideoddstile-title {
		border: none;
	}
	.metabet-sideoddstile .metabet-sideoddstile-option {
		flex: unset;
		border: none;
		padding-top: .5em;
		padding-bottom: 0;
	}
		.metabet-sideoddstile .metabet-sideoddstile-option a {
			color: var(--body-text-color) !important;
		}
	.metabet-sideoddstile .metabet-sideoddstile-option:not([style*="order"]) {
		display: none;
	}