:root {

	--body-background-color: #f6f6f6;
	--body-text-color: #000;
	--hero-background-start-color: #c6d2ff;
	--hero-background-end-color: #fff;
	--game-background-color: #fff;
	--game-border-color: #eee;
	--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;
	--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;
}

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

a {
	color: var(--body-text-color);
	text-decoration: none;
}
header, footer {
	background: #330066;
	color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 2em;
}
	header .logo {
		display: inline-block;
		width: 8em;
	}
		header .logo img {
			width: 100%;
		}
	footer .logo {
		margin: 0 1em 0 5em;
	}

	header span {
		font-weight: bold;
		font-size: 2em;
	}
		header span span {
			font-weight: normal;
			font-size: 50%;
		}

	footer {
		font-size: .75em;
		color: #ccc;
		padding-bottom: 3em;
		line-height: 1.5;
	}
		footer h2, footer p {
			margin: 0;
			padding: 0;
		}
			footer p {
				padding-bottom: 1.5em;
			}


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

ul#main {
	display: flex;
	flex-direction: row;
	width: 100%;
}
	#main li {
		width: 100%;
		box-sizing: border-box;
	}

	#main li h2 {
		height: 7em;
		color: #fff;
		font-size: 3em;
		text-shadow: #000 1px 0 5px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		text-align: center;
		text-transform: uppercase;
		margin: 0;
		background-position: center center;
		background-size: 200%;
		background-repeat: no-repeat;
	}



@media (max-width: 800px) {

header {
	flex-direction: column;
	padding: 1.5em 0;
}
	header > div {
		margin-top: 1em;
	}
	header span {
		font-size: 1.5em;
	}

ul#main {
	flex-direction: column;
}
	ul#main li h2 {
		height: 3em;
	}
		ul#main .mlb h2 {
			background-position-y: 37%;
		}

footer {
	flex-direction: column;
}
	footer .logo {
		display: inline-block;
		margin: 3em 0 0 0;
	}

}


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



.games li {
	padding: .5em;
}


div.game, .metabet-adtile {
	border-radius: 10px !important;
}



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




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


.metabet-adtile {
	border-color: #eee !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;
        }

.metabet-sideoddstile.metabet-responsive:not(.metabet-size-s) {
    min-height: unset !important;
}