/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

* { box-sizing: border-box }
img { max-width: 100%; height: auto; }

:root {
	--font-family: system-ui, sans-serif;
	--brand-font-family: "Montserrat", sans-serif;
	--site-max-width: 1280px;
	--content-side-padding: 14px;
	--border-radius: 10px;
	
	--text-color: #0b0b0c;
	--text-secondary-color: #505a5f;
	--background-color: #ffffff;
	--background-secondary-color: #f1f2f5;
	--background-tint-color: #e5e5e9;
	
	--accent-color: rgb(18, 61, 195);
	--accent-contrast-color: white;
	--accent-text-color: rgb(18, 61, 195);
	
	--border-color: #d2d4d8;
	--image-border-color: rgba(0,0,0, 0.2);
	--list-item-separator-color: rgba(0,0,0, 0.14);
	
	--button-color: #000000;
	--button-background-color: #dbdad9;
	--button-hover-shadow: 0 0 0 100vmax inset rgba(0,0,0, 0.14);
	
	--link-highlight-background-color: rgba(0,0,0, 0.10);
	
	--red: rgb(201, 42, 51);
	--green: #026F49;
	--blue: rgb(56, 117, 222);
	--gold: rgb(182, 158, 36);
	--yellow: rgb(157, 135, 21);
	--pink: rgb(235, 18, 176);
	--orange: rgb(255, 165, 0);
	--purple: rgb(113, 9, 182);
	--silver: rgb(213, 211, 211);
}

.dark {
	--text-color: #fbfbfc;
	--text-secondary-color: #a0aaaf;
	--background-color: #000000;
	--background-secondary-color: #171612;
	--background-tint-color: #252529;
	
	--accent-color: rgb(18, 61, 195);
	--accent-contrast-color: white;
	--accent-text-color: rgb(18, 61, 195);
	
	--border-color: #323438;
	--image-border-color: rgba(255,255,255, 0.2);
	--list-item-separator-color: rgba(255,255,255, 0.12);
	
	--button-color: #ffffff;
	--button-background-color: #3b3a45;
	--button-hover-shadow: 0 0 0 100vmax inset rgba(255,255,255, 0.14);
	
	--link-highlight-background-color: rgba(255,255,255, 0.15);
	
	--red: rgb(201, 42, 51);
	--green: #009b64;
	--blue: rgb(54, 109, 205);
	--gold: gold;
	--yellow: rgb(157, 135, 21);
	--orange: rgb(200, 133, 11);
}

@media (min-width: 40em) {
	
}
@media (min-width: 72em) {
	
}

html {
	background-color: var(--background-color);
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	font-size: 1rem;
	font-optical-sizing: auto;
	color: var(--text-color);
	background-color: var(--background-secondary-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}












/* Typography: Fonts
-------------------------------------------------- */
.brand-font {
	font-family: var(-brand-font);
	font-optical-sizing: auto;
	font-style: normal;
}
.weight-700 { font-weight: 700; }
.weight-900 { font-weight: 900; }




/* Typography: Headings
-------------------------------------------------- */
h1, .heading-xl {
	font-family: var(--brand-font-family);
	font-size: 1.313rem;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0.5em;
}
h2, .heading-lg {
	font-family: var(--brand-font-family);
	font-size: 1.0rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-secondary-color);
	margin-top: 1.5em;
	margin-bottom: 0.75em;
}
h3, .heading-md {
	font-family: var(--brand-font-family);
	font-size: 1.0rem;
	letter-spacing: 0.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-secondary-color);
	margin-top: 2.5em;
	margin-bottom: 0.5em;
}
h4, .heading-sm {
	font-size: 0.813rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 800;
	margin-bottom: 3px;
}
h5, .heading-xs {
	font-size: 0.813rem;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 1px;
}
@media (min-width: 50em) {
	h1, .heading-xl {
		font-size: 1.625rem;
	}
}

.heading-with-more {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

h1 a, h2 a, h3 a {
	font-size: 0.75em;
	font-weight: 500;
	text-decoration: none;
	color: var(--text-secondary-color);
}
h1 a:hover, h2 a:hover, h3 a:hover {
	text-decoration: underline;
}
h1:empty {
	display: none;
}

h1 small {
	display: block;
	margin-top: 5px;
}

.uppercase {
	text-transform: uppercase;
}
.sentencecase {
	text-transform: none;
}

@media (min-width: 40em) {
	
}

/* Typography: Paragraphs
-------------------------------------------------- */
p,
ul,
ol {
	font-size: 1em;
	line-height: 1.5;
	margin-block-start: 0;
	margin-block-end: 1.5em;
}

.lead {
	font-size: 1.063rem;
	line-height: 1.34;
	letter-spacing: .007em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.indent {
	padding-left: 1.0ch;
	border-left: 2px solid var(--accent-color);
}

.small-print {
	display: block;
	font-size: 10px;
	line-height: 1.2;
	color: var(--text-secondary-color);
}

@media (min-width: 40em) {
	.lead {
		font-size: 1.313em;
	}
}

/* Typography: Links
-------------------------------------------------- */
a,
.link {
	color: var(--accent-text-color);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a.text-color {
	color: var(--text-color);
}
a.inherit-color {
	color: inherit;
	text-decoration: none;
}
a.inherit-color:hover {
	text-decoration: underline;
}

/* Images: Base
-------------------------------------------------- */
figcaption.caption {
	display: block;
	font-size: 0.875em;
	line-height: 1.35;
	color: var(--text-secondary-color);
	margin-top: 3px;
}

.image {
	width: 100%;
}

.rounded-image {
	border-radius: var(--border-radius);
}

.brand-icon {
	border: 1px solid var(--image-border-color);
	border-radius: 14%; border-radius: 9%;
	aspect-ratio: 1 / 1;
}

.brand-logo {
	border: 1px solid var(--image-border-color);
	border-radius: 6px;
	aspect-ratio: 21 / 10;
}

.icon {
	aspect-ratio: 1 / 1;
}

.inline-icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: bottom;
	margin-right: 0.4em;
}

.icon-text-line {
	display: flex;
	align-items: center;
	margin: 0.5em 0;
}
.icon-text-line .icon {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	height: 1.2em;
	margin-right: 0.5em;
}

.author-image {
	width: 180px;
	height: 180px;
	border-radius: var(--border-radius);
}

/* Images: Appearance, theme...
-------------------------------------------------- */
.dark .icon {
	filter: invert(1);
}

img[data-for-appearance="dark"] { display: none; }
.dark img[data-for-appearance="dark"] { display: revert; }
.dark img[data-for-appearance="light"] { display: none; }

















/* Layout
-------------------------------------------------- */
.container {
	max-width: var(--site-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
}

.limit-container-width {
	max-width: 350px;
}

.limit-character-width {
	max-width: 70ch;
	margin-left: auto;
	margin-right: auto;
}

.columns-lg-61-x {
	display: grid;
	gap: 20px;
}

@media (max-width: 40em) {
	.form-with-aside aside .container,
	.container-with-aside .aside .container {
		padding-top: 50px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 72em) {
	.smaller-text-on-lg {
		font-size: 0.875em;
	}
	.grid-columns.columns-lg-1-1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
	}
	.grid-columns.columns-lg-2-1 {
		display: grid;
		grid-template-columns: 66% minmax(auto, 1fr);
		gap: 50px;
	}
	.grid-columns.columns-lg-60-40 {
		display: grid;
		grid-template-columns: 60.5% minmax(auto, 1fr);
		gap: 25px;
	}
	.grid-columns.columns-lg-25-75 {
		display: grid;
		grid-template-columns: 25% minmax(auto, 1fr);
		gap: 25px;
	}
	.grid-columns.columns-lg-40-60 {
		display: grid;
		grid-template-columns: 40% minmax(auto, 1fr);
		gap: 25px;
	}
	.columns-lg-61-x {
		grid-template-columns: 61.5% minmax(auto, 1fr);
		gap: 20px;
	}
}

@media (min-width: 72em) {
	.container-with-aside {
		display: flex;
		gap: 30px;
	}
	.container-with-aside .main {
		flex-grow: 1;
	}
	.container-with-aside .aside {
		flex-grow: 0;
		flex-shrink: 0;
		width: 250px;
		font-size: 0.875em;
		padding-left: var(--content-side-padding);
		border-left: 1px solid var(--border-color);
	}
}

/* Side nav: only on-screen by default on large screens, otherwise place it into view when required
-------------------------------------------------- */
#sidenav {
	position: fixed;
	z-index: 9;
	top: 50px;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	height: calc(100vh - 50px);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--background-color);
	padding-top: 30px;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 1.0s, transform .44s cubic-bezier(.32, .08, .24, 1);
}

.sidenav-is-open #sidenav {
	overflow: auto;
	opacity: 1;
	transform: translateY(0%);
	transition: opacity 0.25s, transform 0.5s;
}

@media (min-width: 72em) {
	
	/*#sidenav {
		position: relative;
		top: auto;
		width: 200px;
		height: auto;
		transform: none;
		transition: none;
		padding-right: var(--content-side-padding);
	}*/
	
}



/* Sheets are revealed, covering almost the full screen (similar to sidenav)
-------------------------------------------------- */
.sheet {
	position: fixed;
	z-index: 9;
	top: 50px;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	height: calc(100vh - 50px);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background-color: var(--background-color);
	transform: translateY(-100%);
	transition: transform .44s cubic-bezier(.32, .08, .24, 1);
}

.is-open .sheet {
	overflow: auto;
	transform: translateY(0%);
	transition: transform 0.5s;
}

iframe.full-screen {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
}















/* Navbar
-------------------------------------------------- */
.navbar {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	color: var(--accent-contrast-color);
	background-color: var(--accent-color);
	border-bottom: 1px solid var(--list-item-separator-color);
}

.navbar-container {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: var(--site-max-width);
	height: 60px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
}

.navbar-home-link {
	display: flex;
	flex-grow: 0;
	align-items: center;
	font-style: italic;
	text-decoration: none;
	color: var(--accent-contrast-color);
}

.navbar-brand-logo {
	display: block;
	width: 140px;
}

.navbar-search {
	display: none;
}

.navbar-buttons {
	display: flex;
	align-items: center;
}

.navbar-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	border: none;
	font-size: 0.875rem;
	color: var(--accent-contrast-color);
	border-radius: 4px;
	width: 38px;
	height: 38px;
	padding: 10px;
}

.navbar-button.flex {
	width: auto;
}

.navbar-button img {
	filter: invert(1);
}

@media (hover: hover) {
	.navbar-button:hover {
		background-color: var(--link-highlight-background-color);
	}
}

@media (min-width: 72em) {
	.navbar-home-link {
		width: 184px;
	}
	.navbar-search {
		display: block;
		font-size: 0.875rem;
		color: var(--text-color);
		background-color: var(--background-color);
		border: 1px solid var(--border-color);
		width: 200px;
		height: 35px;
		border-radius: 70px;
		padding: 0 15px;
	}
}
















.splash {
	padding: 140px 0;
	text-align: center;
	color: var(--accent-contrast-color);
	background-color: var(--accent-color);
}
.splash.sm {
	padding: 50px 0;
}

.splash .input.lg {
	width: 100%;
	max-width: 380px;
	font-size: 16px;
	font-weight: 500;
	background: white;
	color: black;
	margin: 30px 0 0 0;
	padding: 10px 20px;
	border: 1px solid rgba(0,0,0, 0.12);
	border-radius: 100px;
}



.section {
	padding: 25px 0;
}
.section.lg-padding {
	padding: 50px 0;
}
.section.xl-padding {
	padding: 120px 0;
}




.logo-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(100px, 130px) );
	gap: 20px;
}
.logo-grid-item {
	position: relative;
	background-color: white;
	padding: 12px;
	border: 1px solid rgba(0,0,0, 0.1);
	border-radius: 4px;
}
.logo-grid-item.black {
	border: 1px solid rgba(255,255,255, 0.1);
}
.logo-grid-item .logo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}






























/* Components: Buttons
-------------------------------------------------- */
.button {
	appearance: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .12px;
	text-align: center;
	white-space: nowrap;
	border: none;
	border-radius: 6px;
	margin: 1px;
	padding: 0.7em 1.25em;
	background-color: var(--button-background-color);
	color: var(--button-color);
	text-decoration: none;
	text-align: center;
}

.button:hover {
	box-shadow: var(--button-hover-shadow);
}

.button.prominent {
	color: var(--accent-contrast-color);
	background-color: var(--accent-color);
}
.button.plain {
	color: var(--text-secondary-color);
	background-color: transparent;
}
.button.light {
	color: var(--text-color);
	background-color: rgba(255,255,255, 0.14);
}
.button.dark {
	color: var(--text-color);
	background-color: rgba(0,0,0, 0.14);
}

.button.xl { font-size: 20px; }
.button.lg { font-size: 16px; }
.button.md { font-size: 14px; }
.button.sm { font-size: 13px; }
.button.xs { font-size: 12px; }

.button.stretch {
	width: 100%;
}
.cta-button {
	border-radius: 50px;
}

.button-with-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.button-with-label small {
	font-size: 9px;
	line-height: 1.2;
	font-weight: 300;
}

.button.with-large-shadow {
	box-shadow: 0 0 40px 40px rgba(0,0,0, 0.8);
}
.button.with-large-shadow:hover {
	transform: scale(1.075);
	box-shadow: 0 0 40px 30px rgba(0,0,0, 0.8);
}

.odds-button {
	flex-direction: column;
	min-width: 80px;
}
.odds-button .label {
	display: block;
	font-size: 0.875em;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--text-secondary-color);
	margin-bottom: 2px;
}

@media (min-width: 40em) {
	.button {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}
	.button-with-label.vertical {
		flex-direction: column;
		gap: 3px;
	}
}







/* Components: Full-width container
-------------------------------------------------- */
@media (max-width: 50em) {
	.full-width-container {
		margin-left: calc(var(--content-side-padding) * -1);
		margin-right: calc(var(--content-side-padding) * -1);
		padding-left: var(--content-side-padding);
		padding-right: var(--content-side-padding);
	}
	.edge-to-edge {
		margin-left: calc(var(--content-side-padding) * -1);
		margin-right: calc(var(--content-side-padding) * -1);
	}
}

.edge-to-edge img {
	display: block;
	width: 100%;
}


/* Components: Breadcrumbs
-------------------------------------------------- */
.breadcrumbs {
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px 0 10px 0;
}

.breadcrumbs ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 0.75rem;
	color: var(--text-secondary-color);
}

.breadcrumbs li + li:before {
	content: "›";
	padding: 0 0.5em;
	color: var(--text-secondary-color);
}

.breadcrumbs a {
	color: var(--text-color);
	font-weight: normal
}
























/* Lists: Menu nav
-------------------------------------------------- */
.menubar {
	background-color: var(--background-tint-color);
	border-bottom: 1px solid var(--border-color);
}
.menubar .container {
	display: flex;
	flex-wrap: nowrap;
	overflow: auto;
	white-space: nowrap;
	padding-left: calc(var(--content-side-padding) / 2);
	padding-right: calc(var(--content-side-padding) / 2);
}
.menubar .container::-webkit-scrollbar {
	display: none;
}
.menubar .spacer {
	flex-grow: 1;
}
.menubar-item {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--text-color);
	margin: 4px 2px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: calc(var(--content-side-padding) / 2);
	padding-right: calc(var(--content-side-padding) / 2);
	border-radius: 4px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.menubar-item:hover {
	color: var(--text-color);
	background-color: var(--link-highlight-background-color);
}










/* Lists: Side nav menu list
-------------------------------------------------- */
.sidenav-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 100px;
}
.sidenav-menu {
	margin-block-end: 25px;
	padding: 0;
	font-size: 1rem;
	font-weight: 500;
}
@media screen and (min-width: 50em) {
	.sidenav-container {
		max-width: 30em;
	}
	.sidenav-menu {
		
	}
}

.sidenav-menu .menu-item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.5em var(--content-side-padding);
	gap: 1.5ch;
	color: var(--text-secondary-color);
	text-decoration: none;
	border-radius: 4px;
	border-bottom: 1px solid var(--list-item-separator-color);
}
.sidenav-menu .sub-menu-item {
	font-size: 0.813em;
	padding-left: 3.4em;
}

.sidenav-menu .menu-item.active,
.sidenav-menu .menu-item:hover {
	color: var(--text-color);
	background-color: var(--link-highlight-background-color);
}

.sidenav-menu .menu-icon,
.sidenav-menu .menu-icon-color {
	width: 1.0em;
	height: 1.0em;
	opacity: 0.75;
}

.dark .sidenav-menu .menu-icon {
	filter: invert(1);
}

.sidenav-menu .label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



















/* Tab menu container
-------------------------------------------------- */
.sub-nav-container {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.sub-nav-container.with-border {
	border-bottom: 1px solid var(--border-color);
}

/* Tabs
-------------------------------------------------- */
.tabs {
	display: flex;
	flex-wrap: nowrap;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	padding-top: 5px;
	padding-bottom: 5px;
	list-style: none;
	background-color: inherit;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
	display: none;
}

.tabs.full-width {
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	border-radius: 4px;
}

.tabs li {
	flex: 0 0 auto;
	padding: 0;
}

.tabs a {
	flex: 0 0 auto;
	display: block;
	text-decoration: none;
}

/* Tabs: Filled Tabs
-------------------------------------------------- */
.filled-tabs .tab {
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.94em;
	height: 2em;
	margin-right: 2px;
	padding: 0 1.0em;
	border-radius: 1em;
	color: var(--text-color);
}

.filled-tabs .tab:hover {
	background-color: var(--link-highlight-background-color);
}

.filled-tabs .tab.active {
	color: var(--accent-contrast-color);
	background-color: var(--accent-color);
}

.filled-tabs.hilight-tabs .tab {
	outline: 2px solid var(--border-color);
	margin-right: 6px;
}

/* Tabs: Plain Tabs
-------------------------------------------------- */
.plain-tabs .tab {
	font-size: 0.813em;
	font-weight: 600;
	padding: 0.75em 1.0em;
	color: var(--text-secondary-color);
	border-bottom: 2px solid transparent;
}

.plain-tabs .tab:hover {
	background-color: var(--link-highlight-background-color);
	border-radius: 5px;
}

.plain-tabs .tab.active {
	color: var(--text-color);
	border-bottom-color: var(--accent-color);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}























/* Lists
-------------------------------------------------- */
.list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-header {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	color: var(--text-secondary-color);
	margin-top: 1em;
	margin-bottom: 0.25em;
}

.list-item {
	display: flex;
	font-size: 1em;
	margin: 0;
	padding: 0.25em 0;
	color: inherit;
	text-decoration: none;
}
.align-center .list-item { align-items: center; }

.list.align-center .list-item {
	align-items: center;
}

@media (hover: hover) {
	a.list-item:hover {
		background-color: var(--link-highlight-background-color);
	}
}

.list.divided-list .list-item {
	border-bottom: 1px solid var(--list-item-separator-color);
}
.list.divided-list .list-item:last-child {
	border-bottom: none;
}

.list.padding-md .list-item {
	padding: 0.5em 0;
}

.list-item-image {
	width: 2.25em;
	height: 2.25em;
	margin-right: 8px;
	object-fit: contain;
}
.list-item-image.md { width: 3em; height: 3em; }

.list-item-counter {
	flex-shrink: 0;
	font-size: 1em;
	font-weight: 500;
	text-align: center;
	color: var(--text-secondary-color);
	width: 1.5em;
	margin-right: 0.5em;
}
.list-item-counter sup {
	font-size: 0.55em;
}
.list-item-odds-label {
	font-size: 0.7em;
	font-weight: 600;
}

.list-item-time {
	flex-shrink: 0;
	font-size: 1em;
	font-weight: 500;
	text-align: center;
	color: var(--text-secondary-color);
	width: 4em;
	margin-top: 2px;
}

.list-item-body {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

.list-item-label {
	font-size: 0.75em;
	line-height: 1.35;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-secondary-color);
	margin-bottom: 2px;
}

.list-item-title {
	font-size: 1em;
	line-height: 1.35;
	font-weight: 500;
	text-decoration: none;
	color: inherit;
}

.list-item-description {
	font-size: 0.75em;
	line-height: 1.35;
	color: var(--text-secondary-color);
}

.list-item-descriptive {
	display: block;
	font-size: 0.75em;
	line-height: 1.35;
}

.list-item-side {
	flex-grow: 0;
	text-align: right;
}
.list-item-side.sm {
	font-size: 0.688em;
	font-weight: 600;
	color: var(--text-secondary-color);
	align-self: center;
}

.list.sm .list-item-title {
	font-size: 0.875em;
}

/* Features list
-------------------------------------------------- */
.features-list {
	columns: 2;
	break-inside: avoid;
}
@media screen and (min-width: 50em) {
	.features-list {
		columns: 3;
	}
}
.features-list .list-item {
	display: inline-flex;
	width: 100%;
	align-items: center;
	gap: 10px;
	height: 2.75em;
	border-radius: 6px;
	background-color: var(--background-tint-color);
	font-size: 0.813em;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 0 5px 0;
	padding: 4px 8px;
}
.features-list .feature-item-icon {
	width: 1.5em;
	height: 1.5em;
	filter: invert(1);
}
.dark .features-list .feature-item-icon {
	filter: none;
}

/* Lists: Display mode
-------------------------------------------------- */
.list [data-mode="advanced"] { display: none; }
.list[data-display-mode="advanced"] [data-mode="basic"] { display: none; }
.list[data-display-mode="advanced"] [data-mode="advanced"] { display: initial; }

/* Lists: Icon list
-------------------------------------------------- */
.list-item-icon-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: end;
	margin-top: 6px;
}

.list-item-icon {
	width: 24px;
	height: 24px;
	border: 1px solid var(--border-color);
	border-radius: 50%;
	object-fit: cover;
}
















/* Description list
-------------------------------------------------- */
.description-list {
	list-style: none;
}

.description-list dt {
	font-weight: bold;
	color: var(--text-secondary-color);
}

.description-list dd {
	line-height: 1.35;
	margin-top: 0.15em;
	margin-inline-start: 0;
	margin-block-end: 0.5em;
	padding-bottom: 0.25em;
}











/* Detailed list
-------------------------------------------------- */
.detailed-item-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.detailed-item-list .item > * {
	height: 100%;
}

.detailed-item-list .item {
	width: 100%;
}

@media (min-width: 58em) {
	.detailed-item-list[data-columns="2"] .item {
		width: calc(50% - 5px);
	}
}

/* Detailed list items
-------------------------------------------------- */
.detailed-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
}
.detailed-item.auto-height {
	height: auto;
}

.detailed-item-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.detailed-item-image {
	display: block;
	flex-grow: 0;
	flex-shrink: 0;
	width: 92px;
}

@media (min-width: 72em) {
	.detailed-item-image {
		width: 120px;
	}
	.detailed-item-image.sm {
		width: 96px;
	}
}

.detailed-item-image.sm {
	width: 72px;
}

.detailed-item-body {
	max-width: 70ch;
}

.detailed-item-main {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: 2px;
}

.detailed-item-title {
	display: block;
	font-size: 0.875em;
	font-weight: 500;
	color: var(--text-color);
	text-decoration: none;
}

.detailed-item-label {
	display: block;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	color: var(--text-secondary-color);
}

.detailed-item-description {
	flex: 1;
	display: block;
	font-size: 0.813em;
	line-height: 1.3;
	font-weight: 500;
	margin-top: 1em;
}

.detailed-item .cta-button {
	align-self: center;
	font-size: 0.813em;
	border-radius: 50px;
}

.detailed-item-foot {
	margin-top: 8px;
	padding-top: 5px;
	border-top: 1px solid var(--list-item-separator-color);
}

.detailed-item-small-print {
	display: block;
	font-size: 8px;
	line-height: 1.25;
	color: var(--text-secondary-color);
	margin-top: 0;
	/*max-height: 3.8em;
	overflow: hidden;*/
}

.detailed-item-foot .button {
	font-size: 0.75em;
}

/* Lists: Check List
-------------------------------------------------- */
.check-list,
.article ul.check-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.check-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.check-list-check {
	width: 1.5em;
	height: 1.5em;
}
.dark .check-list-check {
	filter: invert(1);
}






































/* Layout Component: Item Grid
-------------------------------------------------- */
.item-grid {
	display: grid;
	gap: 10px;
}
.item-grid .item {
	display: flex;
}
.item-grid.x5 {
	grid-template-columns: 1fr 1fr;
}
@media (min-width: 40em) {
	.item-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 72em) {
	.item-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.item-grid.x4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.item-grid.x5 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}
.item-grid.x2 {
	grid-template-columns: 1fr 1fr;
}





/* Component: Horizontal Track
-------------------------------------------------- */
.horizontal-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 7px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	padding-top: 0;
	padding-bottom: 0;
	scroll-snap-type: x mandatory;
	scroll-padding: var(--content-side-padding);
	-ms-overflow-style: none;
	scrollbar-width: none;
	--horizontal-track-items: 1;
}
.horizontal-track::-webkit-scrollbar {
	display: none;
}

.horizontal-track .item {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	width: 100%;
	min-width: 200px;
	scroll-snap-align: start;
}

.horizontal-track.no-min-width .item {
	min-width: 0;
}

/* Sizing */
.horizontal-track[data-per-view="2"] .item { width: 100%; }
.horizontal-track[data-per-view="3"] .item { width: 85%; }
.horizontal-track[data-per-view="4"] .item { width: 74%; }
.horizontal-track[data-per-view="5"] .item { width: 64%; }
.horizontal-track[data-per-view="8"] .item { width: 44%; min-width: 140px; }
.horizontal-track[data-per-view="10"] .item { width: 44%; min-width: 140px; }

.horizontal-track[data-per-view-sm="10"] .item { width: 44%; min-width: 140px; }

@media screen and (min-width: 40em) {
	.horizontal-track[data-per-view="2"] .item { width: calc(50% - 8px); }
	.horizontal-track[data-per-view="3"] .item { width: calc(50% - 3.5px); }
	.horizontal-track[data-per-view="4"] .item { width: calc(33.333% - 4.6666666669px); }
	.horizontal-track[data-per-view="5"] .item { width: calc(25% - 5.25px); }
	.horizontal-track[data-per-view="8"] .item { width: calc(20% - 5.6px); }
	.horizontal-track[data-per-view="10"] .item { width: calc(20% - 5.6px); }
}
@media screen and (min-width: 72em) {
	.horizontal-track {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		scroll-padding: 0;
	}
	.horizontal-track.wrap-on-lg {
		flex-wrap: wrap;
	}
	.horizontal-track[data-per-view="2"] .item { width: calc(50% - 3.5px); }
	.horizontal-track[data-per-view="3"] .item { width: calc(33.333% - 4.6666666669px); }
	.horizontal-track[data-per-view="4"] .item { width: calc(25% - 5.25px); }
	.horizontal-track[data-per-view="5"] .item { width: calc(20% - 5.6px); }
	.horizontal-track[data-per-view="8"] .item { width: calc(13% - 11.8px); min-width: 0; }
	.horizontal-track[data-per-view="10"] .item { width: calc(20% - 5.6px); }
}

/* Tweaks for elements contained in tracks */
.horizontal-track .card .list {
	flex: 1;
}











/* Lists: Icon Track
-------------------------------------------------- */
.icon-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 0;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-top: 0;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	padding-bottom: 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-padding: var(--content-side-padding);
}
.icon-track::-webkit-scrollbar {
	display: none;
}

.icon-track .icon-track-item {
	flex-grow: 0;
	flex-shrink: 0;
	width: 28%;
	text-align: center;
	text-decoration: none;
	padding: 0;
	overflow: hidden;
	scroll-snap-align: start;
}

@media (min-width: 40em) {
	.icon-track .icon-track-item {
		width: calc(14% - 6px);
	}
}

@media (min-width: 72em) {
	.icon-track {
		gap: 10px;
	}
	.icon-track .icon-track-item {
		width: calc(10% - 9px);
		border-radius: 9px;
	}
	.icon-track .icon-track-item:hover {
		background-color: var(--link-highlight-background-color);
	}
}

.icon-track .image {
	width: 100%;
}

.icon-track .label {
	display: block;
	font-size: 0.688em;
	font-weight: 600;
	color: var(--text-secondary-color);
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.icon-track .title {
	display: block;
	font-size: 0.75em;
	line-height: 1.25;
	color: var(--text-color);
	margin-top: 3px;
}


















/* Matrix List
-------------------------------------------------- */
.matrix-list {
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
}

.matrix-list-row {
	display: grid;
	grid-template-columns: 26% auto;
	gap: 10px;
	padding: 0 var(--content-side-padding);
	align-items: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.matrix-list-row::-webkit-scrollbar {
	display: none;
}
.matrix-list-row:hover {
	background-color: var(--link-highlight-background-color);
}

.matrix-list-row .title {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 6px;
	font-size: 0.875em;
	font-weight: 600;
	height: 2.75em;
	border-bottom: 1px solid var(--separator-color);
	overflow: hidden;
}

.matrix-list-items {
	white-space: nowrap;
}

.matrix-list-item {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 0.813em;
	font-weight: 500;
	text-decoration: none;
	width: 4.5em;
	height: 2.25em;
	margin: 2px 0;
	color: inherit;
	background-color: var(--background-tint-color);
	border-radius: 3px;
}

.matrix-list-item:hover {
	background-color: var(--link-highlight-background-color);
}

.matrix-list-item.hilighted {
	font-weight: 600;
	color: var(--accent-contrast-color);
	background-color: var(--accent-color);
}

.matrix-list-item.hilighted:hover {
	filter: brightness(126%);
}













/* View Component: Carousel
-------------------------------------------------- */
.carousel {
	position: relative;
	max-width: var(--site-max-width);
	margin-left: auto;
	margin-right: auto;
}

.carousel-items {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	scroll-padding: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.carousel-items::-webkit-scrollbar {
	display: none;
}

.carousel-item {
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	width: 100%;
	scroll-snap-align: start;
}

.carousel-item .carousel-image {
	display: block;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.carousel-overlay {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: var(--content-side-padding);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 75%;
	overflow: hidden;
}

.carousel-title {
	display: block;
	font-family: var(--brand-font-family);
	font-weight: 800;
	font-size: 1.25em;
	line-height: 1.15;
	text-wrap: balance;
	margin-bottom: 4px;
	color: #fff;
}

.carousel-description {
	display: block;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.25;
	text-wrap: balance;
	color: #fff;
	opacity: 0.82;
}

.carousel-button {
	align-self: start;
	font-size: 13px;
	margin-top: 1em;
}

.carousel-small-print {
	font-size: 9px;
	line-height: 1.2;
	color: var(--text-secondary-color);
	margin-top: 2em;
}

@media (max-width: 25em) {
	.carousel-overlay {
		top: 12px;
	}
	.carousel-title {
		font-size: 1em;
	}
	.carousel-description {
		font-size: 0.688em;
	}
}

@media (min-width: 50em) {
	.carousel-items {
		margin-left: 0;
		margin-right: 0;
	}
	.carousel-item .carousel-image {
		margin-top: 10px;
		border-radius: 10px;
		aspect-ratio: 7 / 2;
	}
	.carousel-overlay {
		top: 16%;
		width: 75%;
	}
	.carousel-title {
		font-size: 1.75em;
	}
	.carousel-description {
		font-size: 1em;
	}
}
@media (min-width: 72em) {
	.carousel-overlay {
		top: 32px;
		left: 32px;
	}
	.carousel-title {
		font-size: 2.25em;
	}
	.carousel-description {
		font-size: 1.063em;
		line-height: 1.35;
		font-weight: 500;
		margin-top: 0.5em;
	}
	.carousel-button {
		font-size: 16px;
		margin-top: 1.5em;
	}
}

.carousel-dots {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 5px;
	text-align: center;
	vertical-align: text-bottom;
}

.carousel-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.35;
	transition: opacity 0.2s, transform 0.2s;
}

.carousel-dot.active {
	opacity: 1;
	transform: scale(1.2);
}

@media (min-width: 40em) {
	
}

@media (min-width: 72em) {
	
}










/* View Component: Panel
-------------------------------------------------- */
.panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	color: inherit;
	text-decoration: none;
	padding: 0.9em 1.0em;
	background-color: var(--background-tint-color);
	border-radius: 10px;
}
a.panel:hover {
	box-shadow: var(--button-hover-shadow);
}

.panel.sm {
	font-size: 0.938em;
	padding: 0.5em;
}

.panel .more-link {
	align-self: center;
	font-size: 22px;
	opacity: 0.4;
}

.panel-right-icon {
	float: right;
	margin-left: 20px;
	width: 60px;
	filter: invert(1);
}
.dark .panel-right-icon {
	filter: invert(0);
}
.panel-footer-logo {
	max-width: 180px;
}

/* View Component: Card (Panel with image)
-------------------------------------------------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	font-size: 1rem;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.card-image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	background-color: var(--background-color);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	aspect-ratio: 16 / 9;
}

.card .img {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.card .img.portrait-card-image {
	aspect-ratio: 7 / 10;
}

.card .img.icon {
	aspect-ratio: 1 / 1;
	border-radius: var(--border-radius);
	width: 40%;
}

.card .img.logo {
	aspect-ratio: 21 / 10;
	border-radius: var(--border-radius);
	width: 64%;
}

.panelled-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.813em;
	font-weight: bold;
	padding: 0.5em 1.0em;
	background-color: var(--background-color);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}
.panelled-head-icon {
	width: 2.25em;
	height: 2.25em;
	border-radius: 4px;
}

.card .body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	padding: 0.9em 1.0em;
	background-color: var(--background-tint-color);
	border-radius: var(--border-radius);
}

.card .card-image + .body,
.card .panelled-head + .body {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

a.card:hover .body {
	box-shadow: var(--button-hover-shadow);
}

.card .card-body-counter {
	flex-shrink: 0;
	font-size: 1.375em;
	font-weight: 700;
	line-height: 1.0;
	color: var(--text-secondary-color);
	min-width: 1ch;
	margin-right: 0.5em;
}

.card .with-cta {
	display: flex;
	flex: 1;
	align-items: start;
}

.card .cta-body {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: 2px;
}

.card .with-cta .card-cta {
	font-size: 0.75em;
	margin-left: 10px;
	border-radius: 50px;
}

.card .label {
	display: block;
	font-size: 0.688rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-secondary-color);
	margin-bottom: 0.25em;
}

.card .title {
	display: block;
	font-size: 0.875em;
	line-height: 1.35;
	font-weight: 600;
}

.card .title.lg {
	font-size: 1.25em;
}

.card .description {
	display: block;
	flex: 1;
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 0.5em;
}

.card .secondary-info {
	flex: 1;
	align-content: end;
	font-size: 0.813em;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 0.5em;
	color: var(--text-secondary-color);
}

.card .foot {
	margin-top: 10px;
	border-top: 1px solid var(--list-item-separator-color);
	padding-top: 5px;
}

.card .small-print {
	display: block;
	font-size: 10px;
	line-height: 1.2;
	color: var(--text-secondary-color);
	max-height: 3.6em;
	overflow: hidden;
}

.card .overlay {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	background-color: rgba(0,0,0, 0.58);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: var(--border-radius);
	transition: transform 0.18s;
}
.card.overlay-shown .overlay {
	color: white;
	transition: transform 0.18s;
	transform: translateY(-100%);
}
.card .overlay .title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 5px;
}
.card .overlay .terms {
	display: block;
	font-size: 9px;
	font-weight: 400;
	line-height: 1.25;
}
.card .overlay .cta {
	margin-top: 10px;
}

/* View Component: Card - horizontal variation
-------------------------------------------------- */
.card.horizontal {
	flex-direction: row;
}
.card.horizontal .card-image {
	width: 34%;
	align-items: end;
	border-top-right-radius: 0;
	border-bottom-left-radius: var(--border-radius);
}
.card.horizontal .body {
	border-top-right-radius: var(--border-radius);
	border-bottom-left-radius: 0;
}

/* View Component: Cards with active state
-------------------------------------------------- */
.card.active {
	overflow: visible;
}
.card.active .body {
	background-color: var(--accent-color);
	color: var(--accent-contrast-color);
}
.card.active .label,
.card.active .secondary-info {
	color: inherit;
	opacity: 0.75;
}
.card.active:after {
	content:'';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: solid 8px var(--accent-color);
	border-left: solid 8px transparent;
	border-right: solid 8px transparent;
}












/* View Component: Promo Card
-------------------------------------------------- */
.promo-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	padding: 1em 1em;
	background-color: var(--background-tint-color);
	border: 1px solid var(--border-color);
	border-radius: 10px;
}

.promo-card.default-background {
	color: #fff;
	background-color: #778;
}

.promo-card .eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.688em;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 1em;
}

.promo-card-icon {
	width: 1.5em;
	height: 1.5em;
}
.gold .promo-card-icon,
.white .promo-card-icon,
.silver .promo-card-icon {
	filter: invert(1);
}

.promo-card-title {
	display: block;
	font-size: 1.125em;
	line-height: 1.2;
	font-weight: 900;
}

.promo-card-description {
	flex: 1;
	display: block;
	font-size: 0.75em;
	line-height: 1.25;
	margin-top: 0.5em;
}

.promo-card-brand-logo {
	margin-top: 20px;
	width: 80px;
}

.promo-card-brand-icon {
	margin-top: 30px;
	width: 60px;
	height: 60px;
}












/* Linked items take the a.main-link and make its entire .linked-item clickable.
-------------------------------------------------- */
.linked-item {
	position: relative;
}
.linked-item .button {
	position: relative;
	z-index: 2;
}
.linked-item .link:before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.linked-item:hover {
	background-color: var(--link-highlight-background-color);
}





















/* Tabbed content
-------------------------------------------------- */
.tabbed-content-panel {
	display: none;
}
.tabbed-content-panel.active {
	display: block;
}







































/* Header with icon
-------------------------------------------------- */
.icon-header {
	position: relative;
	display: flex;
	gap: 1.0em;
	align-items: center;
	margin-bottom: 0;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	padding-top: var(--content-side-padding);
	padding-bottom: var(--content-side-padding);
	background-color: var(--background-tint-color);
	overflow: hidden;
}
.icon-header.with-character {
	overflow: visible;
}

.icon-header .brand-icon {
	width: 84px;
}
.icon-header .brand-icon.sm {
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
}
.icon-header .body {
	flex-grow: 1;
}
.icon-header.with-character .body {
	padding-right: 20%;
}

.icon-header .logotype {
	width: auto;
	height: 22px;
	margin-bottom: 10px;
}

.icon-header-background {
	position: absolute;
	top: -50%;
	right: 0;
	width: 450px;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 1.0) 80%);
}
.icon-header-background.subtle {
	opacity: 0.25;
}
.icon-header-character {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 30%;
	filter: drop-shadow(0 0 30px rgba(0,0,0, 0.9));
}
.icon-header-character.appear {
	animation: icon-header-character-anim 3s;
}

@keyframes icon-header-character-anim {
	from { transform: translateX(-40px); opacity: 0; }
	to { transform: translateX(0%); opacity: 1; }
}

.icon-header .side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

@media (max-width: 40em) {
	.icon-header-background {
		display: none;
	}
	.icon-header .side {
		display: none;
	}
	.icon-header-character.person-image {
		width: 52%;
	}
}
@media (min-width: 72em) {
	.icon-header-background {
		top: -44%;
	}
}

.icon-header .title {
	display: block;
	margin-bottom: 0;
	font-size: 1em;
	font-weight: 600;
}

.icon-header .description {
	display: block;
	margin-top: 4px;
	margin-bottom: 0;
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.26;
	text-wrap: balance;
}

.icon-header .body .icon-header-actions {
	margin-top: 16px;
}

.icon-header .cta-button {
	font-size: 12px;
}

.icon-header .small-print {
	margin-bottom: -1em;
}

@media screen and (min-width: 40em) {
	.icon-header .brand-icon {
		width: 100px;
	}
	.icon-header .title {
		font-size: 1.063em;
	}
	.icon-header .description {
		font-size: 0.875em;
	}
}
@media screen and (min-width: 72em) {
	.icon-header {
		margin-top: var(--content-side-padding);
		margin-left: 0;
		margin-right: 0;
		border-radius: 15px;
	}
	.icon-header .brand-icon {
		width: 110px;
	}
	.icon-header .cta-button {
		font-size: 14px;
	}
}

.icon-header.white .logotype,
.icon-header.silver .logotype,
.icon-header.gold .logotype {
	filter: invert(1);
}













/* Horizontal Key Details
-------------------------------------------------- */
.horizontal-key-details {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	font-size: 1rem;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--content-side-padding);
	padding-right: var(--content-side-padding);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.horizontal-key-details .item {
	position: relative;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 90px;
	justify-content: center;
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
}

.horizontal-key-details .item:after {
	display: block;
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background-color: var(--border-color);
}

.horizontal-key-details .item:last-child:after {
	display: none;
}

.horizontal-key-details .icon {
	width: 2.0em;
	height: 1.5em;
	margin-bottom: 0.5em;
	object-fit: contain;
}

.horizontal-key-details .key {
	display: block;
	color: var(--text-secondary-color);
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.2;
	margin-top: 5px;
}

.horizontal-key-details .value {
	display: block;
	font-size: 1em;
	font-weight: 600;
	white-space: nowrap;
}













/* Block links
-------------------------------------------------- */
.block-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(100px, 1fr));
	gap: 10px;
}

.block-links .item {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--text-color);
	height: 4em;
	background-color: var(--background-tint-color);
	padding: 0.5em 1em;
	border-radius: var(--border-radius);
}

.block-links .item:hover {
	background-color: var(--link-highlight-background-color);
}

.block-links .item .icon {
	width: 1.5em;
	height: 1.5em;
	margin-right: 12px;
}





















/* Article header image
-------------------------------------------------- */
.article-main-img {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: calc(var(--content-side-padding) * -1);
	margin-right: calc(var(--content-side-padding) * -1);
}

@media (min-width: 50em) {
	.article-main-img {
		margin-left: 0;
		margin-right: 0;
	}
	.article-main-img .article-img {
		margin-top: 15px;
		
		object-fit: cover;
		object-position: top;
		border-radius: var(--border-radius);
	}
}

/* Article header banner - image/video/overlay
-------------------------------------------------- */
.article-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--background-tint-color);
	aspect-ratio: 2 / 1;
}

.article-header-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 0;
}

.article-header-logo {
	z-index: 2;
	width: 50%;
	height: 50%;
	object-fit: contain;
}

@media (min-width: 50em) {
	.article-header {
		margin-top: 15px;
		margin-left: 0;
		margin-right: 0;
		aspect-ratio: 3 / 1;
		border-radius: var(--border-radius);
	}
	.article-header-img {
		aspect-ratio: 3 / 1;
		object-fit: cover;
		border-radius: var(--border-radius);
	}
}









/* Articles
-------------------------------------------------- */
.article-img {
	width: 100%;
}

.article .article-inline-img {
	border-radius: 5px;
	border: 1px solid var(--border-color);
}

.article-inline-img.with-border { border: 4px solid var(--main-border-color); }
.article-inline-img.stretched { width: 100%; }

@media screen and (min-width: 50em) {
	figure.with-background .article-inline-img {
		max-width: 65%;
	}
}

.article a {
	font-weight: 600;
	color: inherit;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--accent-color);
	text-underline-offset: 0.2em;
}

.article a:hover {
	background-color: var(--link-highlight-background-color);
}

.article .by-line {
	font-size: 0.75rem;
	line-height: 1.35;
	margin-block-start: 1.5em;
	margin-block-end: 3.0em;
	color: var(--text-secondary-color);
}

.article .by-line strong {
	color: var(--text-color);
}

.article ul,
.article ol {
	font-size: 1em;
	line-height: 1.5;
	margin-block-start: 0;
	margin-block-end: 1.5em;
}

.article li {
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
}

.article ol { counter-reset: item; }
.article ol li { display: block; }
.article ol li:before {
	position: absolute;
	left: -25px;
	content: counter(item) ". ";
	counter-increment: item;
	color: var(--text-secondary-color);
}

.article .quote {
	margin-block-start: 0;
	margin-block-end: 1.5em;
	font-size: 1.2em;
	line-height: 1.4;
	background-color: var(--background-tint-color);
	border-left: 3px solid var(--accent-color);
	padding: 1.5rem 2.5rem;
}

.article .table {
	margin-bottom: 2em;
}

.article-footer {
	margin-block-start: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color);
}

iframe {
	border: none;
	margin: 0;
}

.embed .caption {
	display: block;
	font-size: 0.875em;
	line-height: 1.35;
	color: var(--text-secondary-color);
	margin-top: 3px;
}

.embed {
	margin: 0 0 1.75em 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

iframe[src*="https://www.youtube.com/embed/"] {
	position: relative;
	border-radius: 6px;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.link-block {
	display: block;
	text-decoration: none;
	background: var(--background-tint-color);
	border: 1px solid var(--border-color);
	box-shadow: 0 1px 3px rgba(0,0,0, .1);
	border-radius: 6px;
	padding: 1.75em 2rem 2rem 2rem;
	margin-block-end: 2em;
}

.link-block .title {
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.2;
	margin-block-start: 0;
	margin-block-end: 10px;
}

.link-block .description {
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 1em;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.link-block .anchor {
	display: block;
	font-size: 0.9em;
	line-height: 1em;
	color: var(--text-secondary-color);
	border: 0;
	padding: 0;
}







/* Tags
-------------------------------------------------- */
.tags .tag {
	display: inline-block;
	font-size: 0.75rem;
	text-decoration: none;
	white-space: nowrap;
	color: var(--button-color);
	background-color: var(--button-background-color);
	padding: 0.5em 1em;
	border-radius: 5px;
	margin: 0 4px 8px 0;
}

.tags .tag:hover {
	box-shadow: var(--button-hover-shadow);
}

/* Labels
-------------------------------------------------- */
.tag-label {
	display: inline-block;
	font-size: 0.75rem;
	text-decoration: none;
	white-space: nowrap;
	color: var(--button-color);
	background-color: var(--button-background-color);
	padding: 0.2em 0.5em;
	border-radius: 3px;
	white-space: nowrap;
}

.tag-label.prominent {
	font-weight: bold;
	filter: brightness(1.25);
}

/* Info Label
-------------------------------------------------- */
.info-label {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	text-align: center;
	min-width: 22px;
	margin: 1px 0;
	padding: 2px 6px;
	border-radius: 3px;
	background-color: var(--background-tint-color);
	vertical-align: middle;
	white-space: nowrap;
}
.info-label.plain {
	font-size: 9px;
	background-color: transparent;
	border: 1px solid var(--text-color);
	border-radius: 4px;
}






















/* Image gallery
-------------------------------------------------- */
.horizontal-image-gallery {
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
	gap: calc(var(--content-side-padding) / 2);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 50em) {
	.horizontal-image-gallery {
		margin-left: calc(var(--content-side-padding) * -1);
		margin-right: calc(var(--content-side-padding) * -1);
		padding-left: var(--content-side-padding);
		padding-right: var(--content-side-padding);
	}
}

.horizontal-image-gallery .item {
	flex-basis: 42%;
	flex-shrink: 0;
}

.horizontal-image-gallery .screenshot {
	width: 100%;
	border-radius: var(--border-radius);
}

@media screen and (min-width: 50em) {
	.horizontal-image-gallery .item {
		flex-basis: auto;
		flex-shrink: 1;
	}
	.horizontal-image-gallery.x3 .item {
		flex-basis: auto;
		flex-shrink: 0;
		width: calc(33.333% - 4.6666666669px);
	}
}















/* Information notice
-------------------------------------------------- */
.information-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-weight: 500;
	margin-bottom: 1rem;
	padding: 1em;
	background-color: var(--background-tint-color);
	border-left: 5px solid rgba(255,255,255, 0.4);
	border-radius: 3px;
}

.information-notice.with-cta {
	gap: 8px;
}

@media (min-width: 40em) {
	.information-notice.with-cta {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 75px;
	}
}

.information-notice.with-cta .cta-button {
	color: black;
	background-color: white;
	font-size: 0.875em;
}

.information-notice p {
	margin: 0;
	line-height: 1.35;
}

.information-notice .small-print {
	margin-top: 8px;
	color: inherit;
	opacity: 0.7;
}

.information-notice .actions {
	flex-shrink: 0;
	width: 100%;
}

.information-notice.success {
	color: #fff;
	background-color: rgb(40, 178, 40);
}

.information-notice.error {
	color: #fff;
	background-color: rgb(124, 27, 27);
}

.information-notice .icon {
	width: 2em;
	height: 2em;
	margin-right: 1em;
	filter: invert(1);
}










/* Floating bar
-------------------------------------------------- */
.floating-bar {
	margin-left: calc((var(--content-side-padding) / 2) * -1);
	margin-right: calc((var(--content-side-padding) /2) * -1);
	background-color: rgba(196,197,210, 0.48);
	-webkit-backdrop-filter: blur(25px) saturate(75%);
	backdrop-filter: blur(25px) saturate(75%);
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	transition: transform 0.75s;
	transform: translateY(100%);
}
.dark .floating-bar {
	background-color: rgba(54,53,45, 0.72);
}
.floating-bar.active {
	position: -webkit-sticky;
	position: sticky;
	bottom: 55px; /* 10px */
	transition: transform 1.0s;
	transform: translateY(0%);
	transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
}

@media (min-width: 50em) {
	.floating-bar.active {
		bottom: 0px;
	}
}
@media (min-width: 72em) {
	.floating-bar {
		max-width: calc(var(--site-max-width) * 0.55);
		margin-left: auto;
		margin-right: auto;
	}
}



/* Bar item
-------------------------------------------------- */
.bar-item {
	position: relative;
	display: flex;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 49%;
	text-decoration: none;
	color: inherit;
	margin: 0;
	padding: 10px 10px;
	border-radius: 8px;
}

.bar-item:hover {
	background-color: var(--link-highlight-background-color);
}

.bar-item .main-link {
	text-decoration: none;
	color: inherit;
}

.bar-item .bar-icon {
	flex-grow: 0;
	width: 64px;
	margin-right: 12px;
}

.bar-item .bar-icon.wide {
	width: 114px;
	height: 64px;
}

.bar-item .brand-logo {
	border-radius: 6px;
	width: 78px;
}

.bar-item .body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.bar-item .title {
	display: block;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.3;
}

.bar-item .description {
	display: block;
	font-size: 0.813em;
	line-height: 1.3;
	color: var(--text-secondary-color);
}

.bar-item-cta {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	gap: 3px;
	text-align: center;
	padding-top: 10px;
}

.bar-item .cta-button {
	font-size: 0.875em;
}

.bar-item .cta .small-print {
	margin: 2px 0 -1em 0;
}













/* Ratings
-------------------------------------------------- */
.rating-score {
	display: flex;
	align-items: center;
	gap: 12px;
}
.rating-percent-score {
	display: block;
	font-size: 2.5em;
	line-height: 1.2;
	font-weight: 800;
}

.rating-label {
	display: flex;
	justify-content: space-between;
}

.rating-bar {
	width: 100%;
}






/* Promo codes
-------------------------------------------------- */
.promo-code {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	color: var(--text-color);
	padding: 0.5em 1.5em;
	border: 3px dashed var(--border-color);
	border-radius: 3px;
}
.promo-code.reveal {
	position: relative;
	background-color: var(--border-color);
	border-color: var(--accent-color);
}
.promo-code.reveal:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(191, 191, 191, 0.95);
	border-radius: 3px;
}
.promo-code.lg {
	font-size: 1.25rem;
}































/* Event list
-------------------------------------------------- */
.event-list {
	line-height: 1.4;
}

.event-list .event-item-header {
	display: flex;
	align-items: center;
	font-size: 0.75em;
	font-weight: 600;
	margin-top: 10px;
	padding: 5px 2px;
	background-color: var(--background-tint-color);
	border-radius: 3px;
}

.event-list .event-item-header-main {
	display: flex;
	flex-direction: column;
}

.event-list .event-item-header .header-logo {
	width: 32px;
	height: 32px;
	margin-left: 3px;
	margin-right: 10px;
	padding: 2px;
	object-fit: contain;
	background-color: white;
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

.event-list .event-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875em;
	text-decoration: none;
	color: inherit;
	padding: 6px 0;
	border-bottom: 1px solid var(--border-color);
}
.card .event-list .event-item {
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 4px;
}

.event-list .event-item:last-child {
	border-bottom: none;
}

.event-list .event-item:hover {
	background-color: var(--background-color);
}

.event-item .teams {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.event-item .teams .team-logo {
	width: 1em;
	height: 1em;
	vertical-align: text-bottom;
	margin-right: 6px;
	object-fit: contain;
}

.event-item .status {
	font-size: 0.75em;
	text-align: center;
}

.event-item .score {
	display: flex;
	flex-direction: column;
	min-width: 20px;
	text-align: center;
}

.event-item.is-live .status {
	color: var(--red);
}
.event-item.is-live .score {
	font-weight: 500;
	text-align: center;
	color: var(--red);
}

/* Event item outside of a list
-------------------------------------------------- */
.event-panel {
	width: 100%;
	text-decoration: none;
	color: inherit;
	padding: 0.9em 1.0em;
	background-color: var(--background-tint-color);
	border-radius: var(--border-radius);
}

.event-panel .teams {
	display: flex;
	flex-direction: column;
}

.event-panel .teams .team-logo {
	width: 1em;
	height: 1em;
	vertical-align: text-bottom;
	margin-right: 6px;
	object-fit: contain;
}

/* Event tips list
-------------------------------------------------- */
.event-tips-list {
	background-color: var(--background-color);
}
.event-tip {
	display: grid;
	grid-template-columns: 1fr 1fr 50px;
	align-items: center;
	font-size: 0.875em;
	padding: 4px 4px;
	border-bottom: 1px solid var(--list-item-separator-color);
}
.event-tip .tip-event {
	display: none;
}
.event-tip .tip-tipster {
	display: flex;
	align-items: center;
	width: 20ch;
}
.event-tip .tip-tipster .tip-icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	margin-right: 10px;
	border-radius: 4px;
	float: left;
}
.event-tip .tip-tipster-name {
	display: block;
}
.event-tip .secondary-text {
	display: block;
	color: var(--text-secondary-color);
}
.event-tip .tip-odds {
	text-align: right;
}
@media (min-width: 50em) {
	.event-tip {
		
		padding-left: 38px;
		padding-right: 38px;
	}
	.event-tip.full-row {
		grid-template-columns: auto;
	}
	.event-tip .tip-tipster {
		width: auto;
	}
	.event-tip .tip-event {
		display: initial;
	}
	.event-tip .tip-odds {
		
	}
}











/* Odds list
-------------------------------------------------- */
.market-odds {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
}
.market-odds.x2 { grid-template-columns: 1fr 1fr; }
.market-odds.x3 { grid-template-columns: 1fr 1fr 1fr; }
.market-odds.x4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 50em) {
	.market-odds.x4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.market-odds .odds {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3px;
	width: 100%;
	padding: 8px 5px;
	background-color: var(--background-tint-color);
	border-radius: 5px;
	border-radius: calc(var(--border-radius) / 2);
}
.market-odds .odds .label {
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--text-secondary-color);
}






















/* Natural accordians!
-------------------------------------------------- */
details {
	background-color: var(--background-tint-color);
	border-radius: 5px;
	margin-bottom: 2px;
}
details.transparent {
	background-color: transparent;
}

details p {
	padding: 1em;
}

details summary {
	display: flex;
	font-size: 1.063em;
	line-height: 1.3;
	font-weight: 600;
	padding: 0.75em var(--content-side-padding);
	border-radius: 5px;
	cursor: pointer;
}

details.sub-details > summary {
	font-size: 1em;
	border-top: 1px solid var(--list-item-separator-color);
}

details summary:hover,
details[open] > summary {
	background-color: var(--link-highlight-background-color);
}

.summary-heading {
	display: flex;
	justify-content: space-between;
	font-size: 1.063em;
	line-height: 1.3;
	font-weight: 600;
	padding: 0.75em var(--content-side-padding);
	background-color: var(--background-color);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

summary::-webkit-details-marker {
	flex-shrink: 0;
	margin-top: 0.35em;
	margin-inline-end: 0.75em;
	opacity: 0.65;
}

summary small {
	flex: 1;
	align-self: center;
	text-align: right;
	margin-left: 1ch;
}

details .content {
	margin-bottom: 1.5em;
	padding: 0.5em 1em;
}

details.promo-code {
	margin-top: 8px;
	margin-bottom: 10px;
}
details.promo-code summary {
	padding: 0.5em;
	font-size: 1em;
	font-weight: 500;
	border: 3px dashed var(--brand-color);
}
details.promo-code .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}































/* Forms: Inputs
-------------------------------------------------- */
.input-field {
	margin: 0 0 1em 0;
}

.input-hint {
	display: block;
	font-size: 0.875em;
	margin: 0 0 5px 0;
	color: var(--text-secondary-color);
}

.input-hint-inline {
	display: block;
	font-size: 0.875em;
	margin: 3px 0 0 0;
	color: var(--text-secondary-color);
}

fieldset {
	background-color: var(--background-tint-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	margin-bottom: 2em;
	padding-top: 0;
	padding-bottom: 0.725em;
}

legend {
	font-weight: 500;
}

label {
	display: block;
	font-size: 0.875em;
	margin: 0 0 5px 0;
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: 1rem;
	line-height: 1.1875;
	width: 100%;
	height: 2.5rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding-left: 8px;
	padding-right: 8px;
}

.input-sm { max-width: 100px; }
.input-md { max-width: 350px; }

input[readonly] {
	background-color: transparent;
}

textarea {
	height: auto;
	padding-top: 6px;
	padding-bottom: 6px;
}

.search-bar {
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}
.search-bar .search-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--background-color);
	color: var(--text-color);
	text-align: center;
	width: 100%;
	height: 3em;
	font-size: 1rem;
	line-height: 1.1875;
	border: 1px solid var(--border-color);
	margin: 10px 0;
	padding-left: 15px;
	padding-right: 8px;
	border-radius: 1.5em;
}
.search-results {
	min-height: 46vh;
}

/* Forms: Select inputs
-------------------------------------------------- */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: 1rem;
	line-height: 1.1875;
	width: 100%;
	height: 2.5rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding-left: 8px;
	padding-right: 24px;
	background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position: right;
}

select:hover {
	background-color: var(--thin-material-background-color);
}













/* Elements: tables
-------------------------------------------------- */
.table-container {
	font-size: 0.875em;
	margin-top: 1em;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1em;
}

.table th,
.table td {
	font-size: 1em;
	text-align: left;
	padding: 0.3em 0.5em;
	border: 1px solid var(--list-item-separator-color);
}

.table th {
	background-color: var(--background-tint-color);
}

.table th.right,
.table td.right {
	text-align: right;
}

@media (max-width: 50em) {
	.table-container {
		margin-left: calc(var(--content-side-padding) * -1);
		margin-right: calc(var(--content-side-padding) * -1);
		padding-left: var(--content-side-padding);
		padding-right: var(--content-side-padding);
	}
}

































/* Tab panes for switching tabs without changing page
-------------------------------------------------- */
.tab-panes .tab-pane {
	display: none;
}
.tab-panes .tab-pane.active {
	display: block;
}
































/* Dialogs
-------------------------------------------------- */
dialog::backdrop {
	background: rgba(0,0,0, 0.65);
}

dialog {
	background: var(--background-secondary-color);
	color: var(--text-color);
	padding: 2em;
	border: 2px solid var(--border-color);
	border-radius: 12px;
	overflow: visible;
}

@media (max-width: 40em) {
	dialog {
		width: 95%;
		overflow: auto;
	}
}

.close-dialog-button {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -14px;
	left: -14px;
	width: 40px;
	height: 40px;
	font-size: 25px;
	font-weight: 600;
	color: var(--button-color);
	background: var(--button-background-color);
	border: none;
	border-radius: 50%;
}

.dialog-text {
	font-weight: 500;
	max-width: 60ch;
}
.dialog-actions {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid var(--border-color);
}

@media (min-width: 50em) {
	.country-selection-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(220px, 1fr));
		gap: 0 2em;
	}
}

#countryDialog .list-item {
	padding: 0 5px;
	border-radius: 4px;
}
#countryDialog .sub-list-item {
	font-size: 0.875em;
	margin-left: 58px;
	padding-top: 6px;
	padding-bottom: 6px;
}
#countryDialog .list-item-image {
	width: 40px;
	height: 40px;
}























/* Colours for labels, tags, buttons...
-------------------------------------------------- */
.black { background-color: #000; color: white; }
.white { background-color: #fff; color: black; }
.red { background-color: var(--red); color: white; }
.green { background-color: var(--green); color: white; }
.blue { background-color: var(--blue); color: white; }
.gold { background-color: var(--gold); color: black; }
.yellow { background-color: var(--yellow); color: white; }
.pink { background-color: var(--pink); color: white; }
.orange { background-color: var(--orange); color: white; }
.purple { background-color: var(--purple); color: white; }
.silver { background-color: var(--silver); color: black; }

.primary-text { color: var(--text-color); }
.secondary-text { color: var(--text-secondary-color); }
.gold-text { color: var(--gold); }
.pink-text { color: var(--pink); }
.blue-text { color: var(--blue); }

.opacity-75 { opacity: 0.75; }






















.flex {
	display: flex;
}
.flex .column {
	flex: 1;
}

.text-align-left { text-align: left; }
.text-align-right { text-align: right; }




/* Footer
-------------------------------------------------- */
#site-footer {
	font-size: 11px;
	text-align: center;
	margin: 60px 0 0 0;
	padding: 30px 0 100px 0;
	color: #fff;
	background-color: #300092;
}

#site-footer .site-logo {
	margin: 0 0 .5em;
	width: auto;
	height: 18px;
}

.footer-logo {
	width: auto;
	height: 22px;
}

#site-footer p {
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0 0 1em 0;
}

#site-footer a {
	color: inherit;
}





/* Tab panes for switching tabs without changing page
-------------------------------------------------- */
#tab-bar {
	display: none;
}

@media screen and (max-width: 50em) {
	#tab-bar {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		position: fixed;
		z-index: 20;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: var(--background-color);
	}
	#tab-bar .tab-bar-item,
	#tab-bar a.tab-bar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		text-decoration: none;
		color: var(--text-color);
		background: transparent;
		border: none;
		padding: 8px 5px;
		opacity: 0.65;
	}
	#tab-bar a.tab-bar-item.active,
	#tab-bar a.tab-bar-item:hover {
		background-color: var(--background-tint-color);
		opacity: 1;
	}
	.tab-bar-icon {
		width: 1.5em;
		height: 1.5em;
	}
	.dark .tab-bar-icon {
		filter: invert(1);
	}
	.tab-bar-label {
		display: block;
		font-size: 8px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}















/* Layout spacing
-------------------------------------------------- */
.padding-top-none { padding-top: 0; }
.padding-top-sm { padding-top: 15px; }
.padding-top-md { padding-top: 30px; }
.padding-top-lg { padding-top: 60px; }
.padding-bottom-sm { padding-bottom: 15px; }
.padding-bottom-md { padding-bottom: 30px; }
.padding-bottom-lg { padding-bottom: 60px; }
.margin-top-none { margin-top: 0; }
.margin-top-xs { margin-top: 5px; }
.margin-top-sm { margin-top: 15px; }
.margin-top-md { margin-top: 30px; }
.margin-top-lg { margin-top: 60px; }
.margin-bottom-none { margin-bottom: 0px; }
.margin-bottom-xs { margin-bottom: 5px; }
.margin-bottom-sm { margin-bottom: 15px; }
.margin-bottom-md { margin-bottom: 30px; }
.margin-bottom-lg { margin-bottom: 60px; }
.margin-bottom-xl { margin-bottom: 180px; }









/* GambleAware
-------------------------------------------------- */
.gambleaware .branding {
	color: #EC6923;
}






/* Tweaks
-------------------------------------------------- */
time { white-space: nowrap; }
hr { margin: var(--vertical-spacing) 0; height: 1px; background-color: var(--border-color); border: none; }





.bordered { border: 1px solid var(--border-color); }
@media (max-width: 50em) {
	.border-top-sm {
		border-top: 1px solid var(--border-color);
		margin-top: 1em;
		padding-top: 1em;
	}
}
@media (min-width: 72em) {
	.border-left-lg {
		border-left: 1px solid var(--border-color);
		padding-left: 25px;
	}
}

.admin-button {
	position: fixed;
	z-index: 20;
	top: 36px;
	right: 10px;
	opacity: 0.65;
	font-size: 12px;
}
.admin-button:hover {
	opacity: 1;
}


/* Helpers
-------------------------------------------------- */
.flex-spacer { flex-grow: 1; }
.block { display: block; }
.text-align-center { text-align: center; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.text-larger { font-size: 125%; }
@media (max-width: 40em) {
	.hidden-on-sm { display: none !important; }
}
@media (min-width: 40em) {
	.visible-only-on-sm { display: none !important; }
}
@media (max-width: 72em) {
	.hidden-on-md { display: none !important; }
}