/*! 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: 'Nunito Sans', sans-serif;
	--font-family: 'Quicksand', sans-serif;
	
	/* Site base layout */
	--site-padding-top: 40px;
	--site-padding-top-minimal: 48px;
	--site-side-padding: 20px;
	--full-width-margin: -20px;
	--list-item-large-gap: 10px;
	--list-item-small-gap: 10px;
	
	--contrast-color: #fffada;
	--background-color: #151515;
	--text-color: rgb(245,245,247);
	--text-color-muted: #aaa;
	--accent-color: #1f9c29;
	--tint-color: #000000;
	
	--navbar-background-color: rgba(40,40,45, .75);
	--navbar-backdrop-filter: blur(30px);
	
	--link-highlight-background-color: rgba(255,255,255, 0.15);
	--link-highlight-image-filter: brightness(1.2);
	
	--button-color: #1f9c29;
	--button-background-color: rgba(45,45,55, 0.65);
	--button-prominent-color: #ffffff;
	--button-prominent-background-color: #1f9c29;
	--button-destructive-color: red;
	
	--main-border-color: #332;
	--list-item-separator-color: #332;
	--list-item-thin-separator-color: rgba(255,255,255, 0.05);
	--logo-border-color: #332;
	--input-border-color: #443;
	
	--transparent-ultra-thin: rgba(255,255,255, 0.03);
	--transparent-thin: rgba(255,255,255, 0.1);
	--error-background-color: rgb(145, 0, 0);
	--success-background-color: rgb(0, 165, 0);
	
}

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

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

.heading {
	margin-top: 10rem;
	margin-bottom: 4rem;
}

h1 {
	font-size: 2.2rem;
	line-height: 1.25;
	margin-block-start: 0;
	margin-block-end: 0.5em;
	text-wrap: balance;
	font-weight: normal;
	letter-spacing: 6px;
	text-align: center;
	text-transform: uppercase;
}

h1 small {
	display: block;
	font-size: 0.5em;
	line-height: 1.4;
}

h2 {
	font-size: 2.0rem;
	line-height: 1.2;
	margin-block-start: 0;
	margin-block-end: .5em;
	text-align: balance;
	font-weight: normal;
	letter-spacing: 5px;
	text-align: center;
	text-transform: uppercase;
}

h3 {
	font-size: 1.8rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin-block-start: 0;
	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;
}

h1 + section h2 {
	display: none;
}

.top-spaced {
	margin-top: 10rem;
}

.with-link {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.with-link a {
	font-size: 0.65em;
	font-weight: 500;
}

.with-main-top-spacing {
	margin-top: 15px;
}

@media screen and (min-width: 993px) {
	h1 {
		font-size: 2.4rem;
		letter-spacing: 6px;
	}
	h2 {
		font-size: 2.1rem;
	}
	h3 {
		font-size: 2.0rem;
	}
	.sub-title {
		font-size: 2.1rem;
		margin-bottom: 32px;
	}
}

@media screen and (min-width: 1140px) {
	h1 {
		font-size: 3.0rem;
		letter-spacing: 8px;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 2.2rem;
	}
	.sub-title {
		font-size: 2.4rem;
	}
}











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

.container.wide {
	max-width: 1200px;
}

main {
	
}

.aside {
	container-type: inline-size;
	container-name: asideContainer;
}

.aside-content {
	margin-block-end: 2em;
}

.minimal-top-padding {
	padding-top: var(--site-padding-top-minimal);
}



/* Base layout grids
   -------------------------------------------------------------------------------- */
.grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 100%;
}

/* Move the left column to last position on mobile. */
/* .grid.with-left-column.with-right-column > :nth-child(1) { order: 3; } */

@media screen and (min-width: 601px) {
	
	.grid.with-left-column {
		grid-template-columns: 22% 1fr;
		gap: 60px;
	}
	
	.grid.with-right-column {
		grid-template-columns: 1fr 22%;
		gap: 60px;
	}
	
	.grid.with-left-column.with-right-column {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
	
	.grid.with-left-column.with-right-column > div:nth-child(2) {
		grid-column: span 2;
	}
	
	.aside {
		font-size: 1.1rem;
	}
	
}

@media screen and (min-width: 993px) {
	
	.grid.with-left-column.with-right-column {
		grid-template-columns: 23.5% 1fr 23.5%;
		gap: 25px;
	}
	
	.grid.with-left-column.with-right-column > div:first-child {
		display: revert;
	}
	
	.grid.with-left-column.with-right-column > :nth-child(1) { order: revert; }
	.grid.with-left-column.with-right-column > div:nth-child(2) {
		grid-column: revert;
	}
	
	.aside {
		font-size: 1.3rem;
	}
	
}














/* Buttons
   -------------------------------------------------------------------------------- */
.btn {
	appearance: none;
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .5px;
	border: none;
	border-radius: 6px;
	margin: 1px;
	padding: .75em 1.5em;
	vertical-align: middle;
	background-color: var(--button-background-color);
	color: var(--text-color);
	text-decoration: none;
	text-align: center;
}

.btn.small {
	font-size: 1.2rem;
	padding: .5em 1em;
}

.btn.medium {
	font-size: 1.3rem;
	padding: .6em 1em;
}

.btn.large {
	font-size: 1.7rem;
	font-weight: bold;
}

.btn.stretch {
	width: 100%;
}

.btn.cta {
	font-size: 1.5rem;
	font-weight: 700;
	padding: .5em 1.0em;
	border-radius: 50px;
	color: var(--button-color);
}

.btn.rounded {
	border-radius: 100px;
}

@media (hover: hover) {
	.btn:hover {
		filter: brightness(80%);
	}
	.dark .btn:hover {
		filter: brightness(145%);
	}
}

@media screen and (min-width: 601px) {
	.btn.cta {
		font-size: 1.3rem;
		font-weight: 600;
	}
}

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

.btn.claim {
	color: var(--accent-color);
	border: 1px solid var(--accent-color);
	background-color: transparent;
	text-transform: uppercase;
}

.btn.destructive {
	color: var(--button-destructive-color);
}

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



















/* Navbar
   -------------------------------------------------------------------------------- */
#navbar {
	position: fixed;
	z-index: 9;
	display: flex;
	align-items: start;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-image: linear-gradient(to bottom, rgba(0,0,0, 0.92), rgba(0,0,0, 0));
}

.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 {
	margin-top: 0px;
	margin-right: 2em;
}

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

.nav-link-home {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
}

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

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

.nav-tools {
	display: flex;
}

.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-home {
		position: absolute;
		left: 50%;
		top: 12px;
		text-align: center;
		width: 250px;
		margin: 0;
		margin-left: -125px;
	}
	.nav-link-home {
		letter-spacing: 4px;
	}
	.navbar-menu {
		display: flex;
		flex-grow: 1;
	}
	.navbar-menu a {
		font-size: 1.2rem;
		font-weight: 400;
		text-decoration: none;
		color: var(--text-color-muted);
		text-transform: uppercase;
		letter-spacing: 2px;
		padding: 5px 10px;
	}
	.navbar-menu a:hover {
		background-color: var(--link-highlight-background-color);
		border-radius: 5px;
	}
}

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









































/* Base images
-------------------------------------------------------------------------------- */
figure {
	margin-block-start: 0;
	margin-block-end: 3rem;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding: 0;
	text-align: center;
}
figcaption {
	display: block;
	font-size: 1.4rem;
	line-height: 1.35;
	font-style: italic;
	margin-block-start: 0.5em;
}
.img {
	display: block;
	width: 100%;
	border-radius: 8px;
}
.icon {
	vertical-align: middle;
	border-radius: 16%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--logo-border-color);
}
.logo {
	vertical-align: middle;
	aspect-ratio: 3 / 1;
	object-fit: contain;
	object-position: center;
}

.logo.heading-logo {
	width: 150px;
	margin-bottom: 0.1rem;
}
.heading-under-logo {
	display: block;
	font-size: 0.65em;
	line-height: 1;
}
@media screen and (min-width: 601px) {
	.logo.heading-logo {
		width: 240px;
	}
	.heading-under-logo {
		font-size: 0.5em;
	}
}
.tile {
	vertical-align: middle;
	border-radius: 6px;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--logo-border-color);
}
.title-img {
	margin: 0 -2rem 0 -2rem;
}
.title-img img {
	display: block;
	width: 100%;
}


















/* 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(-140%);
}

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









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

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

#side-bar-menu-toggle:checked + #side-bar-menu {
	transform: translateX(-100%);
	-webkit-transition: transform .56s cubic-bezier(.52, .16, .24, 1);
	transition: transform .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 ul li ul {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 0 0 20px;
}

#side-bar-menu li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 4px;
}

#side-bar-menu li.spacer {
	height: 30px;
}

#side-bar-menu li ul li {
	font-size: 1em;
}

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

#side-bar-menu li a:hover {
	font-weight: bold;
}

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







/* Spacing tweaks
-------------------------------------------------------------------------------- */
.spaced {
	margin-top: 5rem;
}











/* Hero
   -------------------------------------------------------------------------------- */
.hero {
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 0rem;
	margin-bottom: 1rem;
}

.hero.home {
	background-image: linear-gradient(to top, rgba(21, 21, 21, 1) 0%, rgba(21,21,21, 0) 50%), url('/img/backgrounds/cheltenham-festival-horse-racing.webp');
}

.hero .blur {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

@media screen and (min-width: 601px) {
	.hero {
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}
}




















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

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




/* List Items: text-menu
   -------------------------------------------------------------------------------- */
.list.text-menu {
	margin-block-end: 4rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 620px;
	font-size: 1.05em;
}

.list.text-menu li {
	display: block;
	margin: 0;
	padding: 0;
}

.list.text-menu a {
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 4px;
	padding: 1em 0;
	border-radius: 5px;
}

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

.list.text-menu .title {
	display: block;
	line-height: 1.5;
	font-size: 0.9em;
	font-weight: 700;
	text-decoration: underline;
	margin-bottom: 3px;
}

.list.text-menu .text {
	display: block;
	font-size: 1;
	line-height: 1.3;
	text-decoration: none;
	color: var(--text-color);
}

@media screen and (min-width: 601px) {
	.list.text-menu {
		font-size: 1.15em;
	}
}




/* List Items: minimal
   -------------------------------------------------------------------------------- */
.list.minimal-items .item > * {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: auto;
	border-radius: 5px;
	padding: 0.5em 10px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.list.minimal-items .item > *:hover {
	background-color: var(--link-highlight-background-color);
}

.list.minimal-items .item.top-align > * {
	align-items: start;
}

.list.minimal-items .pre-name {
	display: block;
	font-size: 0.75em;
	line-height: 1;
	color: var(--accent-color);
	margin-block-end: 3px;
}

.list.minimal-items .name {
	display: block;
	color: var(--text-color-muted);
}

.list.minimal-items .offer {
	font-size: 0.75em;
}

.list.minimal-items .small-print {
	display: none;
	line-height: 1.3;
	margin-top: 8px;
}

.list.minimal-items .item:hover .small-print {
	display: block;
}

.list.minimal-items .logo {
	flex-shrink: 0;
	width: 80px;
	height: 30px;
	object-fit: contain;
	object-position: center;
	margin-left: 15px;
}

.list.minimal-items .value {
	color: var(--text-color);
}




/* List Items: runners
   -------------------------------------------------------------------------------- */
.list.runners {
	margin: 3rem 0;
}

.list.runners .item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: auto;
	border-radius: 5px;
	padding: 0.5em 10px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}

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

.list.runners .name {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-color-muted);
}

.list.runners .number {
	font-size: 0.7em;
	line-height: 1;
	color: var(--text-color-muted);
	width: 1.25em;
}

.list.runners .silk {
	width: 30px;
}

.list.minimal-items .value {
	color: var(--text-color);
}

@media screen and (min-width: 601px) {
	.list.runners .name {
		gap: 16px;
	}
	.list.runners .silk {
		width: 48px;
	}
}







/* Lists: tiled
   -------------------------------------------------------------------------------- */
.list.tiled {
	display: grid;
	grid-template-columns: 100%;
	gap: 2em;
}

@media screen and (min-width: 601px) {
	.list.tiled {
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}

	/*.list.tiled .item:first-child {
		grid-column: span 2;
		font-size: 1.3em;
	}*/
}

/* List Items: tiled
   -------------------------------------------------------------------------------- */
.tiled .item {
	position: relative;
	display: flex;
	flex-grow: 1;
	height: 100%;
	flex-direction: column;
	color: inherit;
	text-align: left;
	text-decoration: none;
	background-color: var(--tint-color);
	border-radius: 0;
}

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

.tiled .description {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.25rem;
	background-image: linear-gradient(to bottom, rgba(21,21,21, 1), rgba(21,21,21, 0.8), rgba(21,21,21, 0.25), rgba(0,0,0, 0));
}

.tiled .media {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tiled .label {
	display: block;
	font-size: 1em;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--accent-color);
}

.tiled .title {
	font-size: 1.0em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-block-start: 0.25em;
	margin-block-end: 0.25em;
}

.tiled .info {
	display: block;
	font-size: 0.9em;
	font-weight: 500;
	color: var(--text-color-muted);
	margin: 0;
}

.tiled .info-label {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}



/* List Items: selectable
   -------------------------------------------------------------------------------- */
@media (hover: hover) {
	.selectable-items .item {
		border: 2px dashed var(--input-border-color);
		border-radius: 5px;
		padding: 2px;
	}
	.selectable-items .item:hover {
		border-color: var(--text-color);
	}
}










/* Brands
   -------------------------------------------------------------------------------- */
.brand-sub-title {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.brand-article {
	font-size: 1.2rem;
}

.brand-article p {
	letter-spacing: 2px;
	margin: 1.5em 0;
}
.brand-header-action {
	padding: 5rem 0;
}

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

.terms {
	font-size: 1.1rem;
	font-weight: normal;
	letter-spacing: normal;
	margin-top: 12rem;
}















/* Articles
   -------------------------------------------------------------------------------- */
.article-image {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.article-above-image {
	position: relative;
	z-index: 1;
}

.article .article-img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
}

.article .article-inline-img {
	border-radius: 5px;
}

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

figure.with-background {
	background-color: var(--tint-color);
	padding: 2rem;
	border-radius: 10px;
}

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

.article {
	font-size: 1.3rem;
	letter-spacing: 1.5px;
}

@media screen and (min-width: 601px) {
	.article.lighter {
		font-size: 1.3rem;
		line-height: 1.5;
	}
}

.article a {
	color: var(--accent-color);
	text-decoration-line: underline;
	text-decoration-color: var(--accent-color);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	font-weight: 400;
}

@media screen and (min-width: 601px) {
	.article a {
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}
}

.article a:hover {
	color: var(--button-prominent-color);
	background-color: var(--accent-color);
}

.dark .article a {
	color: var(--text-color);
	font-weight: 600;
}

.article .by-line {
	font-size: 1.4rem;
	margin-block-start: 1em;
	margin-block-end: 1em;
	color: var(--text-color-muted);
}

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

.article .heading {
	color: var(--accent-color);
	margin-block-end: 0.5em;
}

.article .sub-heading {
	margin-block-end: 2.5em;
}

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

.article .heading,
.article .quote,
.article .link-block,
.article h2, .article h3,
.article p,
.article ul,
.article ol {
	margin-left: auto;
	margin-right: auto;
	max-width: 620px;
}

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

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

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

iframe {
	border: none;
	margin: 0;
}

.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;
	color: black;
	text-decoration: none;
	background: #fff;
	border: 1px solid rgba(201, 201, 204, 0.48);
	box-shadow: 0 1px 3px rgba(0,0,0, .1);
	border-radius: 6px;
	padding: 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: 20px;
	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-color-muted);
	border: 0;
	padding: 0;
}


















/* Other components
   -------------------------------------------------------------------------------- */
.brand-header {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	gap: 1.5rem;
	align-items: center;
	margin-block-end: 0;
	margin-left: -2rem;
	margin-right: -2rem;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	background-color: var(--tint-color);
}

.brand-header .title {
	margin-block-end: 0;
	font-size: 1.4em;
}

.brand-header .info {
	margin-block-start: 2px;
	margin-block-end: 0;
	font-size: 1.0em;
	text-wrap: balance;
}

.brand-header .btn {
	font-size: 1.3rem;
}

@media screen and (min-width: 601px) {
	.brand-header {
		grid-template-columns: 100px 1fr auto;
		margin-top: 20px;
		border-radius: 18px;
	}
}

.brand-header-info {
	text-align: center;
	margin-bottom: 3rem;
}

.brand-header-info .summary {
	font-size: 18px;
	line-height: 1.25em;
	font-weight: 400;
	letter-spacing: 0.012em;
	margin-block-start: 0.5em;
	margin-block-end: 1em;
	text-wrap: balance;
}

.small-print {
	margin-block-start: 1em;
	margin-block-end: 1em;
	font-size: 0.7em;
	line-height: 1.2;
	color: var(--text-color-muted);
}

@media screen and (min-width: 992px) {
	.brand-header {
		grid-template-columns: 150px 1fr auto;
	}
	.brand-header .title {
		font-size: 2.5em;
	}
	.brand-header .info {
		font-size: 1.4em;
	}
	.brand-header .btn {
		font-size: 1.6rem;
		padding-left: 2em;
		padding-right: 2em;
	}
	.brand-header-info {
		text-align: left;
	}
	.brand-header-info .summary {
		margin-block-start: 1em;
		margin-block-end: 0.5em;
		font-size: 1.8em;
	}
}



/* Other components: screenshots
   -------------------------------------------------------------------------------- */
.screenshots {
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
	gap: 1.5rem;
	overflow: auto;
	margin-block-start: 0;
	margin-block-end: 2rem;
	margin-left: var(--full-width-margin);
	margin-right: var(--full-width-margin);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	-webkit-overflow-scrolling: touch;
}

.screenshots .item {
	flex-basis: 30%;
	flex-shrink: 0;
}

.screenshots .screenshot {
	width: 100%;
	border-radius: 8px;
	border: 1px solid var(--main-border-color);
}

@media screen and (min-width: 601px) {
	.screenshots {
		justify-content: center;
	}
	.screenshots .item {
		flex-basis: 25%;
		flex-shrink: 1;
	}
}



/* Other components: info bar
   -------------------------------------------------------------------------------- */
.info-bar {
	display: flex;
	justify-content: center;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-left: -1rem;
	margin-right: -1rem;
	padding-top: 2rem;
	padding-bottom: 0;
}

.info-bar .info-category {
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 100%;
	justify-content: center;
	text-align: center;
	margin-bottom: 1em;
}

.info-bar .info-category:after {
	display: block;
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background-color: var(--main-border-color);
}

.info-bar .info-category:last-child:after {
	display: none;
}

.info-bar .key {
	color: var(--text-color-muted);
	font-size: 1.0rem;
	font-weight: 500;
}

.info-bar .value {
	display: block;
	color: var(--text-color-muted);
	font-size: 1.8rem;
	line-height: 1;
	font-weight: 600;
}

@media screen and (min-width: 601px) {
	.info-bar {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.info-bar .info-category {
		flex-grow: 1;
	}
	
	.info-bar .key {
		font-size: 1.2rem;
	}
	
	.info-bar .value {
		font-size: 2.3rem;
	}
}













/* Accordians
   -------------------------------------------------------------------------------- */
.accordion .title {
	background-color: var(--tint-color);
	margin-block-start: 0;
	margin-block-end: 8px;
	padding: 1.5rem 2rem;
	font-size: 1.2em;
	border-radius: 5px;
	cursor: pointer;
}

.accordion .description {
	max-height: 0;
	overflow: hidden;
	margin-block-start: 0;
	margin-block-end: 0;
	padding: 0 2rem;
	opacity: 0;
	transition: opacity 0.3s, max-height 0.3s;
}

.accordion .description p {
	margin-block-start: 0.5em;
	margin-block-end: 3em;
	font-size: 1.6rem;
	line-height: 1.5;
}

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

@media screen and (min-width: 601px) {
	.accordion .title {
		font-size: 1.4em;
	}
}




















/* Action bar!
   -------------------------------------------------------------------------------- */
#action-bar {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 1em;
	align-items: center;
	position: -webkit-sticky;
	position: sticky;
	z-index: 3;
	bottom: 15px;
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	padding: 0.5em;
	color: inherit;
	text-decoration: none;
	border: 2px solid var(--main-border-color);
	border-radius: 15px;
	background-color: var(--navbar-background-color);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: transform 0.75s;
	transform: translateY(120%);
}

#action-bar.feature {
	box-shadow: 0 2px 10px 4px rgba(0,0,0, 0.3);
}

#action-bar.red {
	color: var(--action-bar-highlight-color);
	background-color: var(--action-bar-red-background-color);
}

#action-bar.showing {
	transition: transform 1.0s;
	transform: translateY(0%);
	transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
}

#action-bar .icon {
	width: 64px;
	height: 64px;
}

#action-bar .emoji-icon {
	font-size: 3em;
	text-shadow: 0 1px 10px rgba(0,0,0,.75);
	text-align: center;
	border-right: 1px solid rgba(255,255,255, .15);
}

#action-bar .title {
	display: block;
	font-weight: bold;
}

#action-bar .info {
	display: block;
	line-height: 1.2;
	margin-block-start: 4px;
	font-size: 0.9em;
}

#action-bar .actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

#action-bar .small-print {
	margin: 0;
	line-height: 1;
}

@media screen and (max-width: 350px) {
	#action-bar.feature {
		grid-template-columns: 58px 1fr;
	}
	#action-bar.feature .cta {
		display: none;
	}
}

@media screen and (min-width: 601px) {
	#action-bar {
		width: 380px;
	}
}

@media screen and (max-width: 600px) {
	#action-bar .btn {
		font-size: 1.2rem;
	}
	#action-bar .small-print {
		font-size: 0.9rem;
	}
}










/* Breadcrumbs
   -------------------------------------------------------------------------------- */
.breadcrumbs {
	margin-block-start: 0;
	margin-block-end: 1em;
}

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

.breadcrumbs li {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	color: var(--text-color-muted);
}

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

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

.breadcrumbs a:hover {
	text-decoration: underline;
}






















/* Menus */
.menu-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin-bottom: 2em;
}

.menu-grid .menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 1;
	color: var(--text-color);
	font-size: 0.9em;
	text-decoration: none;
	background-color: var(--tint-color);
	border: 1px solid var(--input-border-color);
	border-radius: 10px;
	transition: transform 0.1s;
}

.menu-grid .menu-item:hover {
	background-color: var(--link-highlight-background-color);
	transition: transform 0.1s;
	transform: scale(1.04);
}

.menu-grid .notification-count {
	position: absolute;
	top: -0.8em;
	left: -0.8em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	font-weight: bold;
	width: 2em;
	height: 2em;
	border: 2px solid var(--button-prominent-color);
	border-radius: 50%;
	color: var(--button-prominent-color);
	background-color: var(--button-prominent-background-color);
}

@media screen and (min-width: 601px) {
	.menu-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em
	}
	.menu-grid .menu-item {
		font-size: 1em;
		aspect-ratio: 5 / 2;
	}
}
@media screen and (min-width: 993px) {
	.menu-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}





















/* Tabbed bars are simple tabs with text links
   -------------------------------------------------------------------------------- */
.tabbed-bar {
	margin-block-end: 25px;
}

.tabbed-bar .tab {
	display: inline-block;
	color: var(--text-color);
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 4px;
	background-color: var(--tint-color);
	border-bottom: 3px solid transparent;
}

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

.tabbed-bar .tab.active {
	border-bottom-color: var(--accent-color);
}

/* Tab bars include icons and navigate between grouped content
   -------------------------------------------------------------------------------- */
.tab-bar {
	display: flex;
	flex-wrap: nowrap;
	justify-content: start;
	gap: 3px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 601px) {
	.tab-bar {
		justify-content: center;
	}
}

.tab-bar .tab {
	display: flex;
	flex: 0 0 64px;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: 1.0rem;
	font-weight: 300;
	color: var(--text-color-muted);
	padding: 0.5em;
	text-decoration: none;
	border-radius: 5px;
}

.tab-bar img {
	width: 22px;
	height: 22px;
	margin-block-end: 5px;
	opacity: 0.75;
}

.dark .tab-bar img {
	filter: invert(1);
}

.tab-bar .tab:hover,
.tab-bar .tab.active {
	color: var(--text-color);
	background-color: var(--transparent-thin);
}

.tab-bar .tab:hover img,
.tab-bar .tab.active img {
	opacity: 1;
}

/* Tab bar groups for displaying tab content
   -------------------------------------------------------------------------------- */
.tab-groups {
	margin-block-end: 50px;
	border-radius: 12px;
	background-color: var(--tint-color);
}

.tab-groups .header {
	background-color: var(--transparent-thin);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.tab-groups .groups {
	padding: 20px 20px;
}

.tab-groups .group {
	display: none;
	margin-left: auto;
	margin-right: auto;
}

.tab-groups .group.active {
	display: block;
}






/* Forms
   -------------------------------------------------------------------------------- */
.narrow-form {
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
}

.input-field {
	margin-block-end: 20px;
}

.input-label {
	display: block;
	font-size: 0.9em;
	line-height: 1;
	margin-block-start: 0;
	margin-block-end: 6px;
}

.inline-label {
	display: inline-block;
	margin-right: 12px;
}

.radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1em;
	padding: 0 0 2px 0;
}

.radio-label:hover {
	background-color: var(--link-highlight-background-color);
}

.input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	width: 100%;
	height: 2.5em;
	font-size: 16px;
	line-height: 1;
	padding-left: 0.75em;
	padding-right: 0.75em;
	border-radius: 6px;
	color: var(--text-color);
	background: var(--tint-color);
	border: 1px solid var(--input-border-color);
}

select.input {
	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-x: 100%;
	background-position-y: 50%;
	padding-right: 24px;
}

.input-help {
	display: block;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--text-color-muted);
	margin-top: 5px;
}

/* Input list style for form layouts
   -------------------------------------------------------------------------------- */
.fieldsets {
   display: flex;
   flex-direction: column;
   background-color: var(--transparent-ultra-thin);
   border: 1px solid var(--list-item-separator-color);
   border-radius: 10px;
   padding: 20px 10px 0 10px;
   margin: 0 0 40px 0;
}

.settings .fieldset {
	display: flex;
	flex-direction: column;
	gap: 15px;
	border: none;
	padding: 0;
	max-width: 700px;
	margin: 0 auto 20px auto;
}

.settings .row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 5px;
	border-bottom: 1px solid var(--list-item-thin-separator-color);
}

.settings .row:last-child {
	border-bottom: none;
}

.settings .label {
	display: flex;
	align-items: center;
	font-size: 1em;
	margin: 0;
}

.settings .fields {
	padding-top: 8px;
	padding-bottom: 5px;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

.settings .inline-fields {
	display: flex;
	align-content: center;
}

.settings .field {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	width: 100%;
	height: 2.5em;
	font-size: 16px;
	line-height: 1;
	padding-left: 0.75em;
	padding-right: 0.75em;
	border-radius: 3px;
	color: var(--text-color);
	background: var(--transparent-ultra-thin);
	border: 1px solid var(--input-border-color);
}

.settings select.field {
	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-x: 100%;
	background-position-y: 50%;
	padding-right: 24px;
}

.settings textarea.field {
	height: auto;
	padding-top: 9px;
	padding-bottom: 9px;
	line-height: 1.3;
}

.settings .file-input {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: auto;
	height: 100px;
	padding: 0;
	aspect-ratio: 1 / 1;
	background-color: var(--transparent-ultra-thin);
	border: 2px dashed var(--input-border-color);
	border-radius: 8px;
}

.settings .file-input:hover {
	border-color: var(--text-color);
}

.settings .file-input.ratio-3-1 {
	aspect-ratio: 3 / 1;
	height: 60px;
}

.settings .file-input.ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.settings .file-input-field {
	display: none;
}

.settings .file-input img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 4px;
	border-radius: 8px;
	object-fit: cover;
	object-position: center;
}

.settings .file-input.ratio-3-1 img {
	object-fit: contain;
}

.settings .file-input img[src=""] {
	display: none;
}

@media screen and (min-width: 601px) {
	
	.settings .row {
		grid-template-columns: 40% 1fr;
		gap: 10px;
	}
	
	.settings .fieldset {
		gap: 0;
		border: 1px solid var(--transparent-thin);
		border-radius: 10px;
		background-color: var(--transparent-ultra-thin);
		padding: 0 15px;
	}
	
	.settings .label {
		justify-content: end;
		height: 2.5em;
	}
	
	.settings .field {
		font-size: 14px;
		background-color: transparent;
		border: none;
	}
	
	.settings .field:hover {
		background-color: var(--transparent-ultra-thin);
	}
	
	.settings .information-label {
		display: flex;
		flex-direction: column;
		align-items: end;
		justify-content: center;
	}
	
}

/* Form notifications
   -------------------------------------------------------------------------------- */
.alert {
	display: flex;
	gap: 1em;
	align-items: center;
	padding: 1em;
	margin-block-end: 2em;
	border-radius: 10px;
}

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

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

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

.toast {
	position: fixed;
	top: 70px;
	right: 50px;
	width: 350px
}

.toast.popIn { animation: toastPopIn 0.4s; }
.toast.popOut { animation: toastPopOut 0.5s forwards; }

@keyframes toastPopIn {
	0% {
		opacity: 0;
		transform: translateX(50%)
	}
	100% {
		opacity: 1;
		transform: translateX(0%)
	}
}
@keyframes toastPopOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.deleteElementAnimation { animation: deleteElementAnimation 0.5s forwards; }
@keyframes deleteElementAnimation {
	0% {
		opacity: 1;
	}
	100% {
		transform: translateX(-80px);
		opacity: 0;
	}
}

/* Form toolbar
   -------------------------------------------------------------------------------- */
.form-toolbar {
	position: sticky;
	z-index: 2;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid var(--main-border-color);
	background-color: var(--tint-color);
	box-shadow: 0 -8px 15px 0px rgba(0,0,0, .1);
}

.dark .form-toolbar {
	box-shadow: 0 -8px 15px 0px rgba(0,0,0, .65);
}

@media screen and (min-width: 601px) {
	
	.form-toolbar {
		padding-left: 10%;
		padding-right: 10%;
	}
	
}









/* Dialog
   -------------------------------------------------------------------------------- */
dialog {
	color: var(--text-color);
	background-color: var(--background-color);
	border: 2px solid var(--text-color);
	border-radius: 12px;
	padding: 0;
	width: 350px;
	height: 55vh;
	height: 55svh;
}

dialog .content {
	padding: 0 2rem;
	min-height: 65%;
}

dialog .toolbar {
	position: sticky;
	z-index: 2;
	background-color: rgba(0,0,0, 0.5);
	-webkit-backdrop-filter: blur(10px);
	margin: 0;
	padding: 1.5rem 1.5rem;
}

dialog .toolbar.top { top: 0; }
dialog .toolbar.bottom { bottom: 0; }














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

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

.toolbar .input {
	width: auto;
}

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



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















/* Search
   -------------------------------------------------------------------------------- */
.search-input {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-basis: 100%;
	width: 100%;
	font-size: 1.8rem;
	line-height: 1;
	height: 3em;
	color: var(--text-color);
	background-color: var(--tint-color);
	border: 1px solid var(--input-border-color);
	border-radius: 2.5em;
	padding: 0 1.5em 0 3em;
}

.search-input-container {
	position: relative;
}

.search-input-container .search-icon {
	position: absolute;
	left: 1em;
	top: 0.9em;
	width: 2em;
	height: 2em;
	opacity: 0.8;
}

.dark .search-input-container .search-icon {
	filter: invert(1);
}

.search-results {
	min-height: 40vh;
}

.search-results h2 {
	margin-block-start: 2em;
	font-size: 1.6rem;
}

.search-results-group {
	background-color: var(--tint-color);
	border-radius: 12px;
	margin-block-start: 5px;
	margin-block-end: 5px;
}

.search-result {
	display: flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
	padding: 0.4em 0.5em;
	border-bottom: 1px solid var(--transparent-thin);
}

.search-result:first-child {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.search-result:last-child {
	border-bottom: none;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.search-result:hover {
	background-color: var(--link-highlight-background-color);
}

.search-result .icon {
	flex-basis: 50px;
	width: 50px;
	height: 50px;
	vertical-align: middle;
}

.search-result .info {
	display: block;
	font-size: 0.85em;
	line-height: 1.2;
	color: var(--text-color-muted);
	margin-block-start: 2px;
}

@media screen and (min-width: 601px) {
	.search-input {
		padding-right: 5em;
	}
	.search-input-container .btn {
		position: absolute;
		top: 0.6em;
		right: 0.8em;
		border-radius: 100px;
	}
}














/* Tables
   -------------------------------------------------------------------------------- */
.table {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: 50px;
}

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

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

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

.table tbody tr:hover {
	background-color: var(--link-highlight-background-color);
}

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

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

@media screen and (max-width: 600px) {
	.table .actions {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}
}

.table .logo {
	width: 60px;
}

.table .logo .icon {
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.table .media.tile {
	width: auto;
	height: 44px;
}

.table .secondary-info {
	display: block;
	font-size: 0.75em;
	line-height: 1.2;
	color: var(--text-color-muted);
	margin-block-start: 4px;
}

tr.status {
	border-left: 2px solid transparent;
}

tr.status-new {
	font-weight: bold;
	border-left-color: var(--success-background-color);
}

tr.status-inactive {
	border-left-color: var(--error-background-color);
}





/* Fixed height container for long tables
   -------------------------------------------------------------------------------- */
.fixed-height {
	height: 16em;
	background-color: var(--tint-color);
	padding: 8px;
	border-radius: 4px;
	overflow: auto;
	margin-block-end: 2rem;
}
















/* Footer
   -------------------------------------------------------------------------------- */
#site-footer {
	text-align: center;
	background-color: var(--background-color);
	margin-block-start: 100px;
	padding: 0;
	border-top: var(--transparent-thin);
	color: var(--text-color-muted);
}

#site-footer .container {
	display: block;
	padding-top: var(--site-padding-top);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

#site-footer .site-logo {
	margin: 0 0 .5em 0;
	vertical-align: middle;
	width: auto;
	height: 28px;
}

.dark #site-footer .site-logo {
	filter: brightness(170%);
}

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

.foot-of-footer {
	font-size: 0.75em;
	margin-top: 2em;
	padding: 1em 0;
	border-top: 1px solid var(--main-border-color);
}

.foot-of-footer a {
	padding-left: 3px;
	padding-right: 3px;
}

.footer-logos {
	text-align: center;
	padding: 1em;
}

.footer-site-logo {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.footer-logo {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 0 0 0;
	width: 200px;
}

.footer-logos img {
	width: auto;
	height: 18px;
	margin: 4px 4px;
}

.footer-logos img:not(.no-invert) {
	filter: invert(1);
}

.dark .footer-logos img {
	filter: none;
}

@media (hover: hover) {
	.footer-logos a:hover img {
		opacity: 0.5;
	}
}

@media screen and (min-width: 993px) {
	#site-footer .container {
		padding-left: 19.4%;
		padding-right: 19.5%
	}
}

@media screen and (min-width: 993px) {
	.footer-logos img {
		height: 26px;
		margin: 2px 10px;
	}
}














.dark .codex-editor {
	color: var(--background-color);
}

.dark .codex-editor .ce-block__content {
	color: var(--text-color);
}

.dark .ce-toolbar__plus,
.dark .ce-toolbar__settings-btn {
	color: var(--text-color-muted);
}
.dark .ce-toolbar__plus:hover,
.dark .ce-toolbar__settings-btn:hover {
	color: var(--background-color);
}

.dark .ce-block--selected .ce-block__content {
	background: var(--transparent-thin);
}

.ce-popover--opened {
	max-height: 350px;
}

.cdx-notify {
	color: black;
}











/* Various bits
   -------------------------------------------------------------------------------- */
.social-icon {
	width: 20px;
	height: 20px;
}














/* Special
   -------------------------------------------------------------------------------- */
.control-actions {
	position: fixed;
	z-index: 20;
	top: 70px;
	right: 25px;
}

.slist .item {
	cursor: ns-resize;
}

.countdown {
	font-size: 3em;
	font-weight: 400;
	letter-spacing: 3px;
}

@media screen and (min-width: 601px) {
	.countdown {
		font-size: 4em;
	}
}







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

.float-right { float: right; }

.no-break { white-space: nowrap; }





/* 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
	}
}