#up-next {
	display: block;
}

#up-next .up-next-info {
	display: flex;
	padding: 1;
	padding-top: 1px;
	margin-top: -1px;
	flex-wrap: wrap;
}

#up-next .up-next-day {
	display: inline-flex;
	min-width: 200px;
	height: 120px;
	width: max-content;
	flex: 1;
	flex: 0.33;
}

#up-next .up-next-info .up-next-day h6 {
	font-size: 9pt;
	margin: 0px;
	margin-bottom: 4px;
}
#up-next .up-next-info .up-next-day h1 {
	text-align: center;
	margin: 0px;
	font-size: 22pt;
	background-color: #111;
	box-shadow: inset 0px 0px 8px #000;
	border-radius: 4px;
	border:1px solid #888;
	margin:0px 16pt;
	padding: 0px 10px;
}

#up-next .up-next-info .up-next-day .up-next-box-margin {
	height: 42pt;
	margin-top: calc(56px - 24pt);
	width: 100%;
}

#up-next table {
	flex: 0.66;
	min-width: 300px;
	height: 120px;
	flex: 1;
}

#up-next table tr {
	max-height: 40px;
}

@keyframes programme-clip-in {
	0% {
		clip-path: xywh(0 0 0% 100%);
	}

	100% {
		clip-path: xywh(0 0 100% 100%);
	}
}

#up-next table tr td {
	background-color: black;
	font-family: var(--MatrixType);
	color: #888;
	box-shadow: 0 0 6px var(--brand-color-5) inset;
	text-align: center;
	border: 1px inset #444;
	text-align: left;
	padding: 0px 6px;
	
	background-color: #080808;
	border:1px solid #888;
}

#up-next table tr td a {
	color: var(--brand-color-5);
	text-decoration: none;
}

#up-next table tr td a:hover {
	text-decoration: underline;
}

#up-next table tr td span {
	animation: programme-clip-in;
	animation-iteration-count: 1;
	animation-duration: 0.5s;
	animation-timing-function: steps(10);
	animation-fill-mode: forwards;
}

#up-next table tr td:first-of-type {
	width: 60px;
	color: #b1e15b;
	text-align: center;
	box-shadow: 0 0 6px #b1e15b inset;

	animation: none;
}

#up-next .slides {
	margin: 4px;
	overflow: hidden;
	display: flex;
	aspect-ratio: 2/1;
	position: relative;
	border: 1px solid #FFF8;
}

#up-next .slides button {
	width: 30px;
	top: calc(50% - 30px);
	padding: 0px;
	box-shadow: -4px 0px 8px #FFF2 inset;
	border-radius: 0px 5px 5px 0px;
	font-size: 14pt;
	position: absolute;
	height: 60px;
	opacity: 0.5;
	left: -1px;
}

#up-next .slides button:hover {
	opacity: 1;
}

#up-next .slides button:active {
	box-shadow: 0px 0px 0px transparent;
}


#up-next .slides button:last-of-type {
	border-radius: 5px 0px 0px 5px;
	box-shadow: 4px 0px 8px #FFF2 inset;
	left: auto;
	right: -1px;
}

#up-next .slides .slideshow {
	box-shadow: 0px 0px 4px #000 inset;
	flex: 1;
	overflow: hidden;
	display: block;
	border: 1px solid #FFFA;
	border-left: none;
	border-right: none;
	background: linear-gradient(0deg, #0008, #1118 20% 80%, #2228);
	white-space: nowrap;
}

#up-next .slides .slideshow slides {
	display: block;
	height: 100%;
	overflow: scroll hidden;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
}

#up-next .slides .slideshow slide {
	width: 100%;
	height: 100%;
	display: inline-block;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	scroll-snap-align: start start;
}