/*! 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 {
	
	/* Copy */
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-display: 'Nunito', sans-serif;
	--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	
	/* Site base layout */
	--site-padding-top: 70px;
	--site-padding-top-minimal: 48px;
	--site-side-padding: 20px;
	--full-width-margin: -20px;
	--list-item-large-gap: 10px;
	--list-item-small-gap: 10px;
	
	/* Main colours */
	--background-color: #fff;
	--tint-color: #eaebef;
	--text-color: #000;
	--text-color-muted: rgba(0,0,0, 0.6);
	--accent-color: #8B40BF;
	--green-color: #0b0;
	
	/* Accessibility */
	--link-highlight-background-color: rgba(0,0,0, 0.065);
	
	/* Navbar */
	--navbar-background-color: rgba(230,234,238, 0.8);
	--navbar-backdrop-filter: blur(10px);
	
	/* Borders */
	--main-border-color: rgba(0,0,0, 0.2);
	--icon-border-color: rgba(0,0,0, 0.08);
	--list-item-separator-color: #ccc;
	
	/* Buttons */
	--button-color: #000;
	--button-background-color: rgba(0,0,0, 0.15);
	--button-prominent-color: #fff;
	--button-prominent-background-color: #8B40BF;
	--button-hover-shadow: 0 0 0 100vmax inset rgba(0, 0, 0, 0.2);
	
	/* Forms */
	--input-border-color: #ccc;
	
	/* Colours */
	--error-color: #c00;
	--label-yellow-color: rgb(75, 75, 5);
	--label-yellow-background-color: rgb(247, 247, 159);
	--label-green-color: rgb(7, 54, 7);
	--label-green-background-color: rgb(166, 242, 166);
	--label-red-color: rgb(83, 8, 8);
	--label-red-background-color: rgb(236, 181, 181);
	--label-black-color: rgb(220, 220, 220);
	--label-black-background-color: rgb(48, 48, 48);
	--label-brown-color: rgb(231, 220, 220);
	--label-brown-background-color: rgb(107, 40, 40);
	
}

.dark {
	
	--background-color: #000;
	--tint-color: #212125;
	--text-color: #fff;
	--text-color-muted: rgba(255,255,255, 0.7);
	--accent-color: #8B40BF;
	
	--link-highlight-background-color: rgba(255,255,255, 0.1);
	
	--navbar-background-color: rgba(28,24,20, 0.8);
	
	--main-border-color: rgba(255,255,255, 0.3);
	--icon-border-color: rgba(255,255,255, 0.15);
	--list-item-separator-color: #333;
	
	--button-color: #fff;
	--button-background-color: rgba(255,255,255, 0.15);
	--button-prominent-color: #fff;
	--button-prominent-background-color: #8B40BF;
	--button-hover-shadow: 0 0 0 100vmax inset rgba(255, 255, 255, 0.2);
	
	--input-border-color: #333;
	
}

@media screen and (min-width: 601px) {
	:root {
		--site-side-padding: 50px;
		--full-width-margin: -50px;
		--list-item-large-gap: 25px;
		--list-item-small-gap: 12px;
	}
}
@media screen and (min-width: 993px) {
	:root {
		
	}
}
@media screen and (min-width: 1140px) {
	:root {
		--site-side-padding: 50px;
		--full-width-margin: -50px;
	}
}


.nav-tool.theme-toggle-to-light {
	display: none;
}

.dark .nav-tool.theme-toggle-to-light {
	display: initial;
}

.dark .nav-tool.theme-toggle-to-dark {
	display: none;
}

html:not(.dark) img[data-appearance="dark"] { display: none !important; }
.dark img[data-appearance="light"] { display: none !important; }














/* Base
   -------------------------------------------------------------------------------- */
html {
	font-size: 62.5%; /* 10px */
	font-family: var(--font-family);
	background-color: var(--background-color);
}

body {
	font-size: 1.4rem;
	line-height: 1.35;
	color: var(--text-color);
	background-color: var(--background-color);
	padding-top: var(--site-padding-top);
}

@media screen and (min-width: 601px) {
	body {
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 1140px) {
	body {
		font-size: 1.4rem;
	}
}

a,
.accent-color {
	color: var(--accent-color);
}

.green-color {
	color: var(--green-color);
}

h1 {
	font-family: var(--font-display);
	font-size: 2.8rem;
	line-height: 1.25;
	margin-block-start: 0;
	margin-block-end: 1em;
	text-wrap: balance;
}

h1 small {
	display: block;
	font-size: 0.65em;
	line-height: 1.25;
}

h2 {
	font-family: var(--font-display);
	font-size: 2.2rem;
	line-height: 1.2;
	margin-block-start: 1.5em;
	margin-block-end: .5em;
	text-align: balance;
}

h3 {
	font-size: 2.0rem;
	line-height: 1.2;
	margin-block-start: 1.5em;
	margin-block-end: .5em;
	text-align: balance;
}

h4 {
	font-size: 1.7rem;
	line-height: 1.2;
	margin-block-start: 0;
	margin-block-end: .25em;
}

p {
	margin-block-start: 1em;
	margin-block-end: 1em;
}

@media screen and (min-width: 993px) {
	h1 {
		font-size: 2.8rem;
	}
	h2 {
		font-size: 2.1rem;
	}
	h3 {
		font-size: 2.0rem;
	}
}

@media screen and (min-width: 1140px) {
	h1 {
		font-size: 3.8rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 2.2rem;
	}
}











/* Base layout
   -------------------------------------------------------------------------------- */
.container {
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.layout {
	display: grid;
	gap: 1rem;
}

.full-width {
	margin-left: var(--full-width-margin);
	margin-right: var(--full-width-margin);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
}

aside {
	padding-top: 10px;
}

@media screen and (min-width: 601px) {
	.layout {
		grid-template-columns: 1fr 24%;
		gap: 2rem;
	}
}

@media screen and (min-width: 993px) {
	.layout {
		grid-template-columns: 1fr 24%;
		gap: 5rem;
	}
}





/* Buttons
   -------------------------------------------------------------------------------- */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 40px;
	padding: 0 1.5em;
	border: none;
	border-radius: 5px;
	color: var(--button-color);
	background-color: var(--button-background-color);
}

.btn.prominent {
	font-weight: 600;
	color: var(--button-prominent-color);
	background-color: var(--button-prominent-background-color);
}

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

.btn.small {
	display: inline-flex;
	width: auto;
}

.btn.x-small {
	display: inline-flex;
	width: auto;
	height: 32px;
}

.btn[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
}




















/* Navbar
   -------------------------------------------------------------------------------- */
#navbar {
	position: fixed;
	z-index: 5;
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 48px;
	background-color: var(--navbar-background-color);
	-webkit-backdrop-filter: var(--navbar-backdrop-filter);
	backdrop-filter: var(--navbar-backdrop-filter);
}

.navbar-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
}

.navbar-home {
	flex-shrink: 0;
	margin-right: 2em;
}

.navbar-menu {
	/*display: none;*/
	flex-grow: 1;
}

.navbar-menu a {
	font-weight: 500;
	text-decoration: none;
	color: var(--text-color-muted);
	padding: 5px 10px;
	border-radius: 5px;
}

.navbar-menu a.prominent {
	color: var(--button-prominent-color);
	background-color: var(--button-prominent-background-color);
}

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

.navbar-menu a.prominent:hover {
	background-color: #b00;
}

.nav-link-home {
	color: inherit;
	text-decoration: none;
	font-weight: 900;
}

.nav-link-home img {
	display: block;
	width: auto;
	height: 26px;
}

.dark .nav-link-home img {
	filter: brightness(170%);
}

.nav-tools {
	display: flex;
	align-items: center;
	font-size: 1.2rem;
}

.nav-tools .nav-tool {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	padding: 10px;
	background: none;
	border: none;
	border-radius: 10px;
	opacity: 0.75;
}

.dark .nav-tool img {
	filter: invert(1);
}

@media screen and (min-width: 601px) {
	.navbar-menu {
		display: flex;
		flex-grow: 1;
	}
	.nav-link-home img {
		height: 30px;
	}
	.nav-tools {
		font-size: 1.3rem;
	}
}

@media (hover: hover) {
	.nav-tool:hover {
		opacity: 1;
		background-color: var(--link-highlight-background-color);
	}
}



































/* Base images
-------------------------------------------------------------------------------- */
.img {
	display: block;
	width: 100%;
	border-radius: 8px;
}

.avatar {
	border: 1px solid var(--icon-border-color);
	border-radius: 50%;
}
















/* Accessibility
-------------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	z-index: 10;
	background: var(--tint-color);
	color: var(--text-color);
	font-weight: 700;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	text-align: center;
	padding: 4px;
	transform: translateY(-500%);
}

.skip-link:focus {
	transform: translateY(0%);
}
















/* Side site menu
-------------------------------------------------------------------------------- */
#side-bar-menu-toggle {
	display: none;
}

#side-bar-menu {
	position: fixed;
	height: 0;
	background-color: var(--tint-color);
	top: 48px;
	left: 0;
	width: 100%;
	padding: 0;
	font-size: 1rem;
	text-align: center;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: background .44s cubic-bezier(.52, .16, .24, 1) .2s, height .56s cubic-bezier(.52, .16, .24, 1);
	transition: background .44s cubic-bezier(.52, .16, .24, 1) .2s, height .56s cubic-bezier(.52, .16, .24, 1)
}

#side-bar-menu-toggle:checked + #side-bar-menu {
	height: 100vh;
	height: 100dvh;
	-webkit-transition: background .36s cubic-bezier(.32, .08, .24, 1), height .56s cubic-bezier(.52, .16, .24, 1);
	transition: background .36s cubic-bezier(.32, .08, .24, 1), height .56s cubic-bezier(.52, .16, .24, 1)
}

.side-bar-menu-container {
	padding: 35px 0 85px
}

#side-bar-menu ul {
	margin: 0 auto 30px;
	padding: 0;
	list-style: none;
	width: 90%;
	max-width: 300px;
	text-align: left
}

#side-bar-menu li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 1.7em;
	font-weight: 600
}

#side-bar-menu li a {
	display: block;
	padding: .75em 0;
	text-decoration: none;
	border-bottom: 1px solid var(--main-border-color);
	color: var(--text-color);
}

@media screen and (min-width: 601px) {
	#side-bar-menu li {
		font-size: 2.3em;
	}
}

























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

.list .item {
	color: inherit;
	text-decoration: none;
}








/* List: horizontal tab menu
   -------------------------------------------------------------------------------- */
.horizontal-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5em;
	overflow: auto;
	margin-bottom: 1em;
	margin-left: var(--full-width-margin);
	margin-right: var(--full-width-margin);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	padding-top: 15px;
	padding-bottom: 15px;
	-webkit-overflow-scrolling: touch;
}

.horizontal-tabs .item {
	font-family: var(--font-display);
	font-size: 0.85em;
	text-align: center;
	background-color: var(--tint-color);
	border: 1px solid var(--text-color);
	border-radius: 50px;
	padding: 0.5em 1em;
}

.horizontal-tabs .item.is-past {
	border-color: transparent;
}

.horizontal-tabs .item.active {
	color: var(--background-color);
	background-color: var(--text-color);
}










/* List: meetings, races
   -------------------------------------------------------------------------------- */
.meetings-list .meeting {
	margin-block-end: 2em;
}

.meetings-list .title {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
}

.races-list .race {
	display: grid;
	grid-template-columns: 5ch 1fr;
	gap: 1em;
	align-items: center;
	padding: 0.75em 0;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--list-item-separator-color);
}

.races-list .race:hover {
	background-color: var(--link-highlight-background-color);
}

.races-list .race-time {
	font-family: --var(--font-display);
	font-size: 0.75em;
	font-weight: bold;
	text-align: center;
	background-color: var(--tint-color);
	border-radius: 50px;
	padding: 0.25em 0;
}

.races-list .race.is-past .race-time {
	background-color: var(--button-prominent-background-color);
	color: var(--button-prominent-color)
}

.races-list .race-body {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.races-list .title {
	font-weight: bold;
	color: var(--accent-color);
}

.races-list .race-title {
	display: block;
	line-height: 1;
}

.races-list .race-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.75em;
	color: var(--text-color-muted);
}

.races-list .course {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.races-list .going {
	display: block;
	font-size: 0.9em;
	line-height: 1.2;
	color: var(--text-color-muted);
	margin-top: 2px;
}

.races-list .secondary {
	text-align: right;
	color: var(--text-color-muted);
}



/* List: racecard, runners
   -------------------------------------------------------------------------------- */
.racecard {
	margin-bottom: 4rem;
}

.runners-list .item {
	display: flex;
	align-items: center;
}

.runners-list .number {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--text-color-muted);
	width: 1.5ch;
	margin-right: 0.5em;
}

.runners-list .silk {
	flex-shrink: 0;
	width: 44px;
	margin-right: 1em;
}

.runners-list .silk.small {
	width: 32px;
}

.runners-list .silk img {
	display: block;
}

.runners-list .body {
	display: flex;
	flex-grow: 1;
	align-items: center;
	padding: 0.5em 0;
	border-bottom: 1px solid var(--list-item-separator-color);
}

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

.runners-list .main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.runners-list .horse {
	font-weight: bold;
}

.runners-list .jt {
	font-size: 0.8em;
	line-height: 1.2;
	color: var(--text-color-muted);
}

.runners-list .tips {
	width: 50px;
}

.runners-list .tip-icons {
	position: relative;
	display: flex;
}

.runners-list .tips .avatar {
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-left: -8px;
}

.runners-list .item:nth-child(even) .avatar:nth-child(3) { display: none; }

.runners-list .side {
	min-width: 5ch;
	text-align: center;
}

.runners-list .odds {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--text-color);
	text-align: center;
}

@media screen and (min-width: 601px) {
	.runners-list .silk {
		width: 64px;
	}
}





/* List: race tip, like a runner
   -------------------------------------------------------------------------------- */
.race-tip {
	background-color: var(--tint-color);
	border-radius: 12px;
	margin-left: -1rem;
	margin-right: -1rem;
	margin-block-end: 3rem;
	padding: 1rem;
}

.race-tip .item {
	display: flex;
	align-items: center;
}

.race-tip .silk {
	flex-shrink: 0;
	width: 54px;
	margin-right: 1em;
}

.race-tip .body {
	display: flex;
	flex-grow: 1;
	align-items: center;
}

.race-tip .main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.race-tip .horse {
	font-weight: bold;
}

.race-tip .info {
	display: block;
	font-size: 0.85em;
	line-height: 1.3;
	margin-block-start: 0.25em;
}

.race-tip .tips {
	margin-block-start: 5px;
}

.race-tip .tip-icons {
	display: flex;
	padding-left: 8px;
}

.race-tip .avatar {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin-left: -8px;
}

.race-tip .side {
	min-width: 5ch;
	text-align: center;
}

.race-tip .odds {
	font-size: 0.9em;
	font-weight: bold;
	color: var(--text-color-muted);
	text-align: center;
}

@media screen and (min-width: 601px) {
	.race-tip .silk {
		width: 84px;
	}
	.race-tip .silk img {
		width: 100%;
	}
}




/* List: results list
   -------------------------------------------------------------------------------- */
.results-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 2rem;
}

.results-list .result {
	border: 1px solid var(--main-border-color);
	border-radius: 8px;
	padding: 1rem;
}

.results-list .title {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	margin-block-end: 0.5em;
}

.results-list .actions {
	margin-top: 1.5em;
	padding-top: 0.5em;
	border-top: 1px solid var(--main-border-color);
}





/* List: description lists
   -------------------------------------------------------------------------------- */
.description-list {
	margin-bottom: 2em;
}

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

.description-list dd {
	margin-inline-start: 0;
	margin-block-end: 0.25em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid var(--list-item-separator-color);
}


















.panel {
	background-color: var(--tint-color);
	margin-bottom: 2rem;
	padding-top: 1em;
	padding-bottom: 1rem;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 8px;
}

.panel h2,
.panel h3 {
	margin-top: 0;
}

.panel .btn {
	width: 100%;
}







/* Bet slip
   -------------------------------------------------------------------------------- */
#bet-slip {
	position: fixed;
	z-index: 9;
	top: 100%;
	top: calc(100% + 20px);
	left: 0;
	width: 100%;
	height: 90vh;
	height: 90dvh;
	height: calc(100dvh - 73px);
	background-color: var(--tint-color);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	padding-top: 1em;
	padding-bottom: 1rem;
	padding-left: 20px;
	padding-right: 20px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
	box-shadow: 0 0 8px 4px rgba(0,0,0, .25);
}

body.bet-slip-is-active #bet-slip {
	transform: translateY(-100%);
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

#bet-slip-backdrop {
	display: none;
}
@media screen and (max-width: 1140px) {
	#bet-slip-backdrop {
		display: block;
		position: fixed;
		z-index: 8;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
		opacity: 0;
		background-color: rgba(0,0,0, 0.35);
		transition: opacity 0.5s;
	}
	body.bet-slip-is-active #bet-slip-backdrop {
		opacity: 1;
		transition: opacity 0.5s;
	}
}

#view-bet-slip {
	position: fixed;
	z-index: 8;
	left: 10px;
	right: 10px;
	bottom: 10px;
	width: auto;
	height: 44px;
	font-weight: bold;
	margin: 0 0 0 0;
	box-shadow: 0 2px 6px 2px rgba(0,0,0, 0.2);
	opacity: 0;
	transform: translateY(58px);
	transition: transform 0.25s, opacity 0.25s;
}

#view-bet-slip.active {
	opacity: 1;
	transform: translateY(0);
	transition: transform 0.25s, opacity 0.25s;
}

@media screen and (min-width: 601px) {
	
	#bet-slip {
		width: 400px;
		height: 85vh;
		height: 85dvh;
		left: 50%;
		margin-left: -200px;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	body.bet-slip-is-active #primary-view {
		transform: none;
		transition: none;
	}
	
	#view-bet-slip {
		left: 50%;
		right: auto;
		width: 300px;
		margin-left: -150px;
	}
	
}

@media screen and (min-width: 1141px) {
	
	#bet-slip {
		position: sticky;
		top: 70px;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		height: auto;
		margin: 0 0 2rem 0;
		padding-left: 1em;
		padding-right: 1em;
		border-radius: 8px;
		box-shadow: none;
	}
	
	body.bet-slip-is-active #bet-slip {
		transform: none;
		transition: none;
	}
	
	body.bet-slip-is-active #primary-view {
		opacity: 1;
	}
	
	#bet-slip.attention-to-bet-slip {
		animation-name: attentionToGameSlip;
		animation-duration: 0.35s;
	}
	
	#view-bet-slip {
		display: none;
	}
	
}

@keyframes attentionToGameSlip {
	from {
		opacity: 0;
		transform: translateY(5%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}

/* Bet slip items
   -------------------------------------------------------------------------------- */
.bet-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid var(--list-item-separator-color);
}

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

.bet-item .delete-bet-item {
	color: var(--text-color);
	background-color: var(--background-color);
	margin-right: 10px;
	border: none;
	border-radius: 5px;
	padding: 4px 10px;
	box-shadow: 0 2px 4px 2px rgba(0,0,0, 0.1);
}

.bet-item .info {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

.bet-item .event {
	color: var(--text-color-muted);
	font-size: 0.9em;
	font-weight: bold;
}

.bet-item .bet-type {
	display: block;
	font-size: 0.8em;
	text-transform: uppercase;
	margin-top: 3px;
}

.bet-item .stake {
	
}

/* Bet slip content
   -------------------------------------------------------------------------------- */
#bet-slip h2 {
	margin-top: 0;
}

#bet-slip h3 {
	font-size: 1.1em;
	margin: 1em 0 5px 0;
}

.inset-notice {
	margin: 20px 0 0 0;
	border-left: 3px solid var(--accent-color);
	padding: 0 0 0 12px;
	font-size: 1.4rem;
	font-weight: 500;
}

.usdt-address {
	display: block;
	font-size: 1.1rem;
	margin-top: 8px;
	white-space: nowrap;
	overflow: auto;
	background-color: var(--background-color);
	text-align: center;
	padding: 5px 4px;
	border-radius: 3px;
}

.usdt-address.small {
	display: inline-block;
	width: auto;
}

.copy-icon {
	width: auto;
	height: 1em;
}

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

.panel-footer {
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0 0 10px 0;
	text-align: center;
}

.toolbar {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 20px 1rem;
}

.toolbar .btn {
	flex: 1 1 auto;
	flex-wrap: nowrap;
	white-space: nowrap;
}

@media screen and (min-width: 1141px) {
	.inset-notice {
		font-size: 1.3rem;
	}
	.panel-footer {
		font-size: 1.3rem;
	}
}


























/* Tables
   -------------------------------------------------------------------------------- */
.table {
	width: 100%;
	margin-bottom: 80px;
	border-collapse: collapse;
}

.table tr {
	border-bottom: 1px solid var(--list-item-separator-color);
}

.table tbody tr:last-child {
	border-bottom: none;
}

.table th {
	font-weight: bold;
}

.table th, .table td {
	padding: 4px 3px;
	text-align: left;
}

.table tr.table-heading {
	border-bottom: none;
}

.table tr.table-heading h2 {
	margin-top: 80px;
}

.table thead:first-child tr.table-heading h2 {
	margin-top: 0;
}

.table td small {
	display: block;
	line-height: 1.3;
	margin-top: 3px;
}

.table th.actions,
.table td.actions {
	text-align: right;
	white-space: nowrap;
}

.label {
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1.2;
	padding: 3px 10px;
	border-radius: 3px;
	background-color: var(--tint-color);
}

.label.bet-status-Accepted {
	color: var(--label-yellow-color);
	background-color: var(--label-yellow-background-color);
}
.label.bet-status-Rejected {
	color: var(--label-brown-color);
	background-color: var(--label-brown-background-color);
}
.label.bet-status-Voided {
	color: var(--label-black-color);
	background-color: var(--label-black-background-color);
}

.label.bet-status-Settled.settled-status-Won {
	color: var(--label-green-color);
	background-color: var(--label-green-background-color);
}
.label.bet-status-Settled.settled-status-Lost {
	color: var(--label-red-color);
	background-color: var(--label-red-background-color);
}













/* Forms
   -------------------------------------------------------------------------------- */
.narrow-form {
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
}
.input-field {
	margin-block-end: 1em;
}

.input-label {
	display: block;
	font-size: 1em;
	margin-block-end: 3px;
}

.input {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--input-border-color);
	height: 40px;
	padding: 0 8px;
	margin: 1px 0;
	border-radius: 4px;
	background: var(--background-color);
	color: var(--text-color);
}

.input.usdt-input {
	width: 40ch;
}

.input.small {
	width: auto;
	height: 32px;
}

.alert {
	display: flex;
	gap: 1em;
	align-items: center;
	padding: 1em;
	margin-bottom: 2rem;
	border-radius: 4px;
	background-color: var(--tint-color);
}

.alert-icon {
	font-size: 3em;
}

.alert.error {
	background-color: var(--error-color);
	color: white;
}




/* Forms: radios
   -------------------------------------------------------------------------------- */
.radios {
	display: flex;
	gap: 5px;
	border-radius: 8px;
	margin-bottom: 2em;
	padding: 8px 0;
}

.radios .radio-btn {
	flex: 1;
	margin: 3px 0;
	padding: 10px 10px;
	background-color: var(--button-background-color);
	border-radius: 8px;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
}





/* Toolbar, pagination
   -------------------------------------------------------------------------------- */
.form-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin-block-end: 1em;
}

.form-toolbar .group {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25em;
}

.form-toolbar .input {
	width: auto;
	height: 32px;
}

.form-toolbar .input.stretch {
	width: 100%;
}

form .btn {
	width: auto;
	height: 32px;
}



.pagination {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5em;
	margin-block-end: 1em;
}




























/* Footer
   -------------------------------------------------------------------------------- */
#site-footer {
	margin-block-start: 100px;
	padding-top: 30px;
	padding-bottom: 130px; /* Leave room for bet slip */
	min-height: 100px;
	border-top: 2px solid var(--main-border-color);
	text-align: center;
}

#site-footer .site-logo {
	width: 180px;
	max-width: 100%;
}

.small-print {
	display: block;
	font-size: 0.75em;
	line-height: 1.2;
}






















hr {
	margin: 30px 0;
	height: 1px;
	background-color: var(--main-border-color);
	border: none;
}


/* Common alignment helpers
   -------------------------------------------------------------------------------- */
.align-left,
table.align-left th { text-align: left; }
.align-center,
table.align-center th { text-align: center; }
.align-right,
table.align-right th,
table th.align-right, table td.align-right { text-align: right; }





/* Colours
   -------------------------------------------------------------------------------- */
.text-color-muted { color: var(--text-color-muted); }










/* Screen size display helpers
   -------------------------------------------------------------------------------- */
.hidden { display: none !important; }
@media only screen and (max-width: 600px) {
	.not-sm {
		display: none !important;
	}
}
@media only screen and (min-width: 601px) {
	.only-sm {
		display: none !important;
	}
}
@media only screen and (max-width: 992px) {
	.only-lg {
		display: none !important
	}
}
@media only screen and (min-width: 992px) {
	.not-lg {
		display: none !important
	}
}