:root,
[data-bs-theme=light] {
  --bs-primary: #ff6a13;
  --bs-body-color: #3f2021;
  --bs-emphasis-color: #3f2021;
  --bs-border-color-translucent: #ff6a13;
  --bs-primary-rgb: 255,106,19;
}
:root {
	--mobile-logo-size: clamp(65px, 12vh, 100px);
	--mobile-sidebar-height: calc(var(--mobile-logo-size) + 40px);
	--mobile-player-height: 115px;
}

aside {
	background-color: rgba(240, 189, 147, 0.7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	cursor: default;
	user-select: none;
	-webkit-user-select: none;
}

aside a, aside button {
	cursor: pointer;
}

@supports (padding: env(safe-area-inset-top)) {
	.sidebar {
		padding-top: env(safe-area-inset-top) !important;
	}
	.player {
		padding-bottom: env(safe-area-inset-bottom) !important;
	}
}

main {
	display: flex;
	flex-direction: column;
	background: #f7eee8;
}

.text-bg-primary {
	background: #ff6a13;
}
body, html {
	height: 100%;
	color: #3f2021;
	touch-action: manipulation;
}
body {
	min-height: 100vh;
	min-height: -webkit-fill-available;
}
html {
	scroll-behavior: smooth;
}
a {
	color: #ff6a13;
	text-decoration-color: #ff6a13 !important;
}
h1 .bhineka {
	background-color: #ff6a13;
	clip-path: polygon(
		24px 0,
		calc(100% - 24px) 0,
		100% 50%,
		calc(100% - 24px) 100%,
		24px 100%,
		0 50%
	);
	padding: 0.35rem 2rem 0.2rem;
	color: #ffffff;
}
h2, h3 {
	font-weight: bold;
}
#zoegoldmenu {
	font-weight: bold;
	color: #3f2021;
}
#zoegoldmenu a {
	color: #3f2021;
}
#zoegoldmenu a:hover {
	color: #ff6a13;
}
#zoegoldmenu a.active {
	color: #ff6a13;
	border-left: 5px solid #ff6a13;
}
#zoeGoldContent-container {
	flex: 1;
	display: flex;
	align-items: center;
}
.icon-link .bi {
	position: relative;
	top: -2px;
}
.large-icons {
	font-size: 170%;
}
.btn-primary {
	background-color: #ff6a13;
	border-color: #d85305;
}
.btn-primary:hover, .btn-primary:disabled {
	background-color: #d85305;
	border-color: #d85305;
}
.btn-primary:active, .btn-primary.active, .btn-primary.show {
	background-color: #ff6a13 !important;
	border-color: #d85305 !important;
}
.dropdown-item.active {
	background-color: #ff6a13 !important;
}
body {
	font-family: tgn-soft-round-con, sans-serif;
	/*background-image: url("../images/bg2.png");
	background-repeat: repeat;
	background-size: 200px;
	background-position: center;
	background-attachment: fixed;*/
	background-color: #f7eee8;
}
body.kerst {
	background: linear-gradient(45deg, rgba(153,129,107,1) 0%, rgba(39,43,29,1) 50%, rgba(124,33,50,1) 100%);
	background-image: url("/images/kerst_achtergrond2.jpg");
	background-size: cover;
}
.sidebar {
	z-index: 1050;
	border-right: 10px solid #ff6a13;
	box-sizing: border-box;
}
.navbar-toggler {
	border: 0;
	font-size: 35px;
}
.navbar-toggler i {
	color: #ff6a13;
}
.roze {
	color: #ff6a13;
}
.grey {
	color: #858585;
}
.gold {
	/*background: linear-gradient(0deg, rgba(198, 128, 16, 1) 0%,  rgba(249, 203, 71, 1) 100%);
	background-clip: text;
	color: transparent;*/
	color: #ff6a13;
}
.gold-icon {
	//background: linear-gradient(0deg, rgba(198, 128, 16, 1) 0%,  rgba(249, 203, 71, 1) 100%);
	border-radius: .75rem;
	color: #ffffff;
	padding: 0.5rem 1rem;
	background: #ff6a13;
}
.bhineka {
	font-family: anzeigen-grotesk, sans-serif;
	font-weight: normal !important;
	text-transform: uppercase;
	color: #ff6a13;
}










#zoebox_loading {
	display: none;
	margin-top: 20px;
}
#zoebox_content {
	margin-top: 20px;
	clear: both;
}
#zoebox_content .zoebox-button img {
	margin-right: 10px;
	border-radius: 3px;
}
#zoebox_content .zoebox-button {
	text-decoration: none;
	background-color: #ffffff;
	border-radius: 5px;
	border: 1px solid #dee2e6;
	color: #000000;
	cursor: pointer;
}
#zoebox_content .zoebox-button:hover {
	color: #ff6a13;
	border-color: #ff6a13;
}
#zoebox_content .zoebox-button .artiest {
	font-weight: bold;
}
.colZoebox {
	cursor: pointer;
}
#zoebox_form {
	display: none;
	clear: both;
}

table.programmas {
	border-collapse: collapse;
	width: 99%;
	empty-cells: hide;
	line-height: 110%;
}
table.programmas small {
	font-size: 60%;
	line-height: 100%;
}
table.programmas td {
	padding: 10px 20px;
	border: 3px solid #ff6a13;
	position: relative;
	font-size: 20px;
	text-align: center;
	height: 95px;
}
table.programmas thead th {
	padding: 5px;
	text-align: center;
}
table.programmas tbody th:first-child {
	padding: 10px 10px 10px 0;
	text-align: right;
	width: 10px;
	padding-left: 0;
	white-space: nowrap;
}
table.programmas tbody th:last-child {
	padding: 10px 0 10px 10px;
	text-align: left;
	width: 10px;
	white-space: nowrap;
}
.table-responsive + h2 {
	margin-top: 20px;
}

#info_container .artist, .playlist-item-info .artist {
  font-size: 20px;
  font-weight: bold;
}
#info_container .title, .playlist-item-info .title {
  font-size: 18px;
}
#info_container ul, .playlist-item-info ul.song-info {
  padding: 0 0 0 20px;
}
#info_container ul li, .playlist-item-info ul.song-info li {
  padding-left: 10px;
}
#info_container ul.list-unstyled, #info_container ul.list-unstyled li {
  padding: 0;
}
#info_container ul li::marker, .playlist-item-info ul.song-info li::marker {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'bootstrap-icons';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ff6a13;
  margin-right: 10px;
}
#info_container ul li.artist::marker, .playlist-item-info ul.song-info li.artist::marker { content: "\f4da"; }
#info_container ul li.title::marker, .playlist-item-info ul.song-info li.title::marker { content: "\f49e"; }
#info_container ul li.year::marker, .playlist-item-info ul.song-info li.year::marker { content: "\f7db"; }
#info_container ul li.authors::marker, .playlist-item-info ul.song-info li.authors::marker { content: "\f4c9"; }
#info_container ul li.producers::marker, .playlist-item-info ul.song-info li.producers::marker { content: "\e210"; }
#info_container ul li.album::marker, .playlist-item-info ul.song-info li.album::marker { content: "\e201"; }
#info_container ul li.song::marker, .playlist-item-info ul.song-info li.song::marker { content: "\e002"; }

#info_container .hitparade-nummer {
  //background: linear-gradient(0deg, rgba(198, 128, 16, 1) 0%,  rgba(249, 203, 71, 1) 100%);
  background: #ff6a13;
  color: #ffffff;
  border-radius: 50%;
  font-size: 32.5px;
  font-weight: bold;
  display: block;
  width: 50px;
  height: 50px;
  text-align: center;
}

#info_container th, #info_container td {
	background-color: transparent !important;
	border-bottom: 1px solid #ff6a13;
}

#info_container tr:last-child td {
	border-bottom: 0 !important;
}

select#list {
  font-family: monospace;
}

.prevnextnav {
	font-size: 70px;
	line-height: 20px;
}

.hp-notering {
  font-size: 18px;
}

.label-mb-artist, .label-mb-relation {
  cursor: pointer;
}

.playlist-item {
  margin-top: 20px;
}
.playlist-item .playlist-item-link {
  position: relative;
  display: block;
}
.playlist-item .playlist-item-link .playlist-item-label {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 120%;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  transition: all .2s ease;
  border-radius: 5px;
  padding: 20px 5px 0 5px;
}
.playlist-item .playlist-item-link .playlist-item-label .artiest {
  font-weight: bold;
}
.playlist-item .playlist-item-link:hover .playlist-item-label {
  opacity: 1;
}
.playlist-item-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: #d9534f;
  border: 2px solid white;
}
.single-cover.col-xs-12 img {
  filter: grayscale(100%);
}

.gouden40-button {
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
}
.gouden40-button .gold {
	font-size: 150%;
}
.gouden40-button:hover {
	
}
.gouden40-button .cover-container {
	border: 1px solid #ff6a13;
	border-radius: 5px;
	overflow: hidden;
}
.gouden40-button .cover-container img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: 0.5s;
}
.gouden40-button:hover .cover-container img {
	filter: grayscale(0);
	opacity: 1;
}





.mobile-logo img {
	width: var(--mobile-logo-size);
	height: auto;
	display: block;
}




/* NEW PLAYER */

.player {
	border-left: 10px solid #ff6a13;
	z-index: 1040;
}

.player-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0;
}

.track-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	flex: 0 0 auto;
	margin-bottom: 20px;
}

.track-window {
	width: 100%;
	overflow: hidden;
}

.track-strip {
	display: flex;
	transition: transform 350ms ease;
	will-change: transform;
}

.track-strip.no-transition {
	transition: none;
}

.track-slide {
	flex: 0 0 100%;
	min-width: 0;
	text-align: center;
	padding: 18px 2.4rem 9px;
	box-sizing: border-box;
	position: relative;
}

.track-cover {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px;
	margin: 0 auto 10px;
	box-shadow: 0 12px 25px rgba(63, 32, 33, .25);
}

.track-info {
	min-width: 0;
	line-height: 1.15;
}

.track-info .artist,
.track-info .title {
	position: relative;
	white-space: nowrap;
	overflow: visible;
}

.track-info .artist.has-marquee,
.track-info .title.has-marquee {
	overflow: hidden;
}

.track-info {
	--marquee-fade: .75rem;
}

.track-info .artist.has-marquee,
.track-info .title.has-marquee {
	margin-left: calc(var(--marquee-fade) * -1);
	margin-right: calc(var(--marquee-fade) * -1);
	padding-left: var(--marquee-fade);
	padding-right: var(--marquee-fade);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#3f2021 var(--marquee-fade),
		#3f2021 calc(100% - var(--marquee-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#3f2021 var(--marquee-fade),
		#3f2021 calc(100% - var(--marquee-fade)),
		transparent 100%
	);
}

.track-info .artist span,
.track-info .title span {
	display: inline-block;
	white-space: nowrap;
}

.track-info .marquee {
	animation: marquee-scroll var(--scroll-duration, 10s) linear infinite;
	animation-delay: 2s;
	animation-play-state: paused;
}

.track-info .marquee:hover {
	animation-play-state: paused;
}

.track-slide.active .track-info .marquee {
	animation-play-state: running;
}

.track-slide.active .track-info .marquee:hover {
	animation-play-state: paused;
}

@keyframes marquee-scroll {
	0%, 10% {
		transform: translateX(0);
	}

	40%, 60% {
		transform: translateX(var(--scroll-distance));
	}

	90%, 100% {
		transform: translateX(0);
	}
}

.track-time, .fullscreen-track-time,
.track-info .year {
	opacity: .75;
}

.track-like,
.track-nav {
	border: 0;
	background: transparent;
	color: #3f2021;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.track-like {
	margin-top: .35rem;
	font-size: 1.2rem;
	color: #ff6a13;
}

.track-like i {
	display: inline-block;
	transition: transform .2s ease;
}

.track-like:not(.liked):not(.loading):hover i {
	animation: heart-wiggle .45s ease;
	transform: scale(1.25);
}

.track-like.loading i {
	animation: play-loading-spin .8s linear infinite;
}

@keyframes heart-wiggle {
	0%   { transform: scale(1) rotate(0deg); }
	20%  { transform: scale(1.25) rotate(-12deg); }
	40%  { transform: scale(1.25) rotate(10deg); }
	60%  { transform: scale(1.25) rotate(-8deg); }
	80%  { transform: scale(1.25) rotate(4deg); }
	100% { transform: scale(1.25) rotate(0deg); }
}

.track-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 2rem;
	height: 3rem;
	border: 0;
	background: transparent;
	color: #3f2021;
	font-size: 1.8rem;
	line-height: 1;
}

.track-nav:hover,
.track-like:hover {
	opacity: 1;
	color: #ff6a13;
}

.track-nav.hidden {
	visibility: hidden;
}

.track-prev {
	left: .25rem;
}

.track-next {
	right: .25rem;
}

.play-button {
	height: 64px;
}

.play-button button {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	height: 64px;
	width: 64px;
}

.play-button button i {
	font-size: 4rem;
	color: #ff6a13;
	height: 64px;
	width: 64px;
	display: block;
	transition: transform .2s ease;
}

.player .play-button button:hover i {
	transform: scale(1.1);
}

.player .play-button button i::before {
	position: relative;
	top: -19px;
}

.navbar .play-button {
	height: 50px;
	width: 91px;
	text-align: center;
}

.navbar .play-button button, .navbar .play-button button i {
	width: 50px;
	height: 50px;
	font-size: 50px;
}

.navbar .play-button button i::before {
	position: relative;
	top: -15px;
}

.play-button button.loading i {
	animation: play-loading-spin .8s linear infinite;
}

@keyframes play-loading-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.current-program {
	position: relative;
}

.current-program-img {
	text-align: left;
}

.current-program-img img {
	max-width: 100%;
	max-height: 200px;
	height: auto;
	margin-left: 0;
	margin-right: auto;
	display: block;
}

.current-program-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
}

.current-program.has-link .current-program-overlay {
	display: block;
}

.current-program.has-link {
	cursor: pointer;
}

.current-program-text {
	position: absolute;
	bottom: 15px;
	right: 0;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	line-height: 1;
}

.current-program-line1, .current-program-line2, .current-program-line3 {
	background-color: #ff6a13;
	color: #ffffff;
	padding: 2px 10px 2px 5px;
	display: inline-block;
	width: auto;
	margin: 0;
	white-space: nowrap;
	line-height: 1.1;
}

.player-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	height: 64px;
}

.fullscreen-link {
	color: #ff6a13;
	opacity: 0.6;
	font-size: 1.75rem;
	line-height: 1;
	transition: transform .2s ease, opacity .2s ease;
}

.fullscreen-link:hover {
	transform: scale(1.1);
	opacity: 1;
}

#fullscreenPlayer {
	position: fixed;
	inset: 0;
	z-index: 1030;
	background: #F0BC93;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

#fullscreenPlayer.active {
	opacity: 1;
	pointer-events: auto;
}

.fullscreen-player-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.fullscreen-menu-toggle {
	position: absolute;
	top: 2rem;
	left: 2rem;
	z-index: 3;
	border: 0;
	background: transparent;
	color: #3f2021;
	font-size: 2.5rem;
}

.fullscreen-menu-toggle:hover {
	color: #ff6a13;
}

.fullscreen-logo {
	position: absolute;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%);
	height: clamp(75px, 15vh, 150px);
	z-index: 3;
}

.fullscreen-play {
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 3;
}

.fullscreen-tracklist {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(70vw, 720px);
	z-index: 2;
}

.fullscreen-clock {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	z-index: 3;
	font-size: clamp(2rem, 4vw, 4.5rem);
	font-weight: bold;
	line-height: 1;
	color: #f7eee8;
	cursor: default;
}

#fullscreenDate {
	font-size: clamp(1rem, 1.3vw, 1.5rem);
	font-weight: normal;
	margin-top: .35rem;
}

.fullscreen-play.play-button {
	height: 64px;
	width: 64px;
}

.fullscreen-play.play-button button:hover i {
	transform: scale(1.1);
}

.fullscreen-play.play-button button i::before {
	position: relative;
	top: -19px;
}

body.fullscreen-player-active .sidebar {
	transform: none;
}

body.fullscreen-player-active .player {
	transform: translateY(100%);
}

.sidebar,
.player {
	transition: transform .45s ease;
}

.clock-separator {
	animation: clock-blink 2s linear infinite;
}
@keyframes clock-blink {
	0%, 49% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}

.fullscreen-program {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	width: min(45vw, 560px);
	height: 260px;
}

.fullscreen-program .current-program {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.fullscreen-program .current-program-img {
	width: 100%;
	text-align: center;
}

.fullscreen-program .current-program-img img {
	max-width: 170px;
	max-height: 220px;
	margin: 0 auto;
	display: block;
}

.fullscreen-program .current-program-text {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	line-height: 1;
	transform: none;
}

@media (max-width: 576px) {
	.player .player-buttons {
		width: 30px;
	}
	.player .player-buttons .row {
		width: 30px;
	}
	.player .player-buttons .row .popout-button {
		width: 80px;
	}
	.player .player-buttons .row .play-button {
		width: 80px;
	}
	.player .popout-button button {
		margin-top: 0;
	}
	.player .play-button button {
		width: 80px;
		height: 80px;
	}
	.player .play-button button i {
		font-size: 70px;
	}
	.top-spacer {
		height: 117px;
	}
}
@media (max-width: 991.98px) {
	html {
		scroll-padding-top: 120px;
	}
	main {
		padding-top: var(--mobile-sidebar-height) !important;
		padding-bottom: var(--mobile-player-height) !important;
	}
	.sidebar {
		border-right: 0;
		border-bottom: 5px solid #ff6a13;
	}
	.player {
		border-left: 0;
		border-top: 5px solid #ff6a13;
		height: var(--mobile-player-height);
	}
	.player .popout-button button:hover {
		color: #ffffff;
	}
	
	
	.player {
		border-left: 0;
		border-top: 5px solid #ff6a13;
		height: 115px;
	}

	.player-inner {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.player-actions {
		position: absolute;
		right: 9px;
		top: 9px;
		height: auto;
		z-index: 10;
	}
	.player-actions .play-button {
		display: none !important;
	}
	.fullscreen-link {
		font-size: 1.25rem;
		opacity: 1;
	}
	
	.track-window {
		height: 100%;
		touch-action: pan-y;
	}
	
	.track-nav {
		width: 1.5rem;
	}
	.track-prev {
		left: 0;
	}
	.track-next {
		right: 4px;
	}
	.track-slide {
		padding: 9px 1.8rem 0;
	}
	
	.track-slider {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
	.current-program {
		flex: 0 0 clamp(140px, 35vw, 220px);
		width: clamp(140px, 35vw, 220px);
		max-width: 45%;
	}
	.track-slider {
		height: 100%;
		margin-bottom: 0;
	}
	.current-program {
		display: block;
		height: 100%;
		position: relative;
		overflow: hidden;
		padding-left: .5rem;
	}
	.current-program.hidden {
		display: none;
	}
	.current-program-img img {
		max-height: calc(var(--mobile-player-height) - 5px);
		max-width: 100%;
	}
	.current-program-text {
		transform: scale(0.8);
		transform-origin: bottom right;
	}

	.track-slider {
		grid-template-columns: 2rem 1fr 2rem;
		height: 100%;
	}

	.track-slide {
		display: grid;
		grid-template-columns: 90px 1fr;
		gap: .75rem;
		align-items: center;
		text-align: left;
	}

	.track-cover {
		width: 90px;
		margin-bottom: 0;
		border-radius: .5rem;
	}

	.track-info {
		text-align: left !important;
	}

	.track-like {
		margin-top: .15rem;
	}
	
	.fullscreen-tracklist {
	
		width: min(92vw, 520px);
	}
	#fullscreenPlayer .current-program-text {
	
		right: 0 !important;
		left: auto !important;
		text-align: right !important;
		align-items: flex-end !important;
	
	}
	
	#fullscreenPlayer .current-program-line1,
	
	#fullscreenPlayer .current-program-line2,
	
	#fullscreenPlayer .current-program-line3 {
	
		margin-left: auto;
	
	}
}
@media (max-width: 449.98px) {
	.player .current-program {
		display: none !important;
	}
	.track-slider {
		width: 100%;
		flex: 1 1 100%;
	}
}
@media (min-width: 992px) {
	aside {
		height: 100vh;
		overflow-y: auto;
	}
	#zoegoldmenu {
		font-size: 110%;
	}
	.player {
		top: 0;
		right: 0;
		bottom: 0;
		width: 16.66666667%;
		height: 100vh;
		border-top: 0;
	}
	.player-inner {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 2rem 0 0;
	}
	.player .player-actions {
		flex: 0 0 auto;
		text-align: center;
	}
	.player .track-slider {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}
	.player .track-window {
		width: 100%;
	}
	.player .current-program {
		flex: 0 0 auto;
		margin-top: 1rem;
	}
	body.fullscreen-player-active .sidebar {
		transform: translateX(-100%);
	}
	body.fullscreen-player-active .player {
		transform: translateX(100%);
	}
	body.fullscreen-menu-open .sidebar {
		transform: translateX(0);
		z-index: 1060;
	}
	body.fullscreen-menu-open #fullscreenPlayer {
		pointer-events: auto;
	}
	body.fullscreen-menu-open .fullscreen-menu-toggle {
		transform: translateX(16.66666667vw);
	}
	.fullscreen-menu-toggle {
		transition: transform .45s ease;
		z-index: 1070;
	}
	
	.fullscreen-program .current-program-img {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 55%;
		height: 100%;
		text-align: left;
	}
	.fullscreen-program .current-program-img img {
		height: 100%;
		max-height: 320px;
		width: auto;
		max-width: none;
		margin: auto auto 0 0;
		display: block;
	}
	.fullscreen-program .current-program-text {
		right: 0;
		bottom: 24px;
	}
	
	.track-slide:nth-child(6)::before,
	.track-slide:nth-child(7)::before,
	.track-slide:nth-child(8)::before {
		font-family: anzeigen-grotesk, sans-serif;
		font-weight: normal !important;
		text-transform: uppercase;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 8px);
		z-index: 5;
		background: #ff6a13;
		color: #fff;
		font-size: clamp(.5rem, 1vw, .75rem);
		line-height: 1;
		padding: .2rem 1rem;
		border-radius: 0;
		clip-path: polygon(
			12px 0,
			calc(100% - 12px) 0,
			100% 50%,
			calc(100% - 12px) 100%,
			12px 100%,
			0 50%
		);
		letter-spacing: .04em;
		opacity: 1;
		transition:
			opacity .35s ease,
			transform .35s ease;
	}
	
	.track-slide:nth-child(6)::before {
		content: "ZONET";
	}
	
	.track-slide:nth-child(7)::before {
		content: "NU";
	}
	
	.track-slide:nth-child(8)::before {
		content: "ZOMETEEN";
	}
}
@media (min-width: 992px) and (max-height: 619.98px) {
	.player .current-program {
		display: none !important;
	}
	.player-inner {
		padding-bottom: 2rem;
	}
	.player .track-slider {
		flex: 1 1 auto;
	}
}
@media (max-height: 400px) {
	.player {
		display: none !important;
	}
	main {
		padding-bottom: 0 !important;
	}
}

.fullscreen-program {
	right: 0 !important;
	bottom: 0 !important;
	width: clamp(300px, 30vw, 600px);
	height: 320px;
	cursor:default;
}

.fullscreen-program .current-program {
	width: 100%;
	height: 100%;
	padding-left: 0;
	overflow: visible;
}

.fullscreen-program .current-program-img {
	left: 0;
	transform: none;
	text-align: left;
}

.fullscreen-program .current-program-img img {
	margin: 0 auto 0 0;
}

.fullscreen-program .current-program-text {
	position: absolute;
	right: 0;
	transform: none !important;
	bottom: 24px;
	font-size: clamp(1.2rem, 1.7vw, 2rem);
	align-items: flex-end;
	gap: 2px;
}

.fullscreen-program .current-program-line1,
.fullscreen-program .current-program-line2,
.fullscreen-program .current-program-line3 {
	padding: 4px 14px 4px 8px;
	line-height: 1.05;
}

.fullscreen-tracklist {
	position: absolute;
	left: 0;
	right: 0;
	top: 57%;
	transform: translateY(-50%);
	width: 100vw;
	z-index: 2;
	overflow: visible;
}

.fullscreen-track-window {
	width: 100vw;
	overflow: hidden;
	padding: 40px 0 35px;
	margin: -40px 0 -35px;
	touch-action: pan-y;
}

.fullscreen-track-strip {
	display: flex;
	align-items: center;
	transition: transform 350ms ease;
	will-change: transform;
	gap: clamp(10px, 1.5vw, 28px);
}

.fullscreen-track-slide {
	flex: 0 0 clamp(260px, 36vw, 480px);
	text-align: center;
	transform: translateX(0) scale(.62);
	opacity: .22;
	transition: transform 350ms ease, opacity 350ms ease;
	cursor: pointer;
	position: relative;
}

.fullscreen-track-slide.near {
	transform: translateX(0) scale(.72);
	opacity: .7;
}

.fullscreen-track-slide.far-left {
	transform: translateX(6vw) scale(.62);
}

.fullscreen-track-slide.far-right {
	transform: translateX(-6vw) scale(.62);
}

.fullscreen-track-slide.active {
	transform: translateX(0) scale(1);
	opacity: 1;
	cursor: default;
}

.fullscreen-track-cover {
	width: min(100%, 42vh, 440px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 auto 1.2rem;
	display: block;
	box-shadow: 0 20px 45px rgba(63, 32, 33, .25);
	-webkit-user-drag: none;
	user-drag: none;
}

.fullscreen-track-info {
	font-size: clamp(1.2rem, 1.8vw, 2rem);
	line-height: 1.1;
}

.fullscreen-track-prev {
	left: 2rem;
}

.fullscreen-track-next {
	right: 2rem;
}

.fullscreen-track-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	border: 0;
	background: transparent;
	color: #3f2021;
	font-size: clamp(2.5rem, 4vw, 4rem);
	line-height: 1;
	opacity: .75;
}

.fullscreen-track-nav:hover {
	color: #ff6a13;
	opacity: 1;
}

.fullscreen-track-nav.hidden {
	visibility: hidden;
}

.fullscreen-track-info .track-like {
	font-size: 2rem;
	margin-top: .6rem;
}

.fullscreen-vu-bg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50vh;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(32, 1fr);
	align-items: end;
	gap: clamp(2px, .35vw, 8px);
	padding: 0 clamp(6px, 1vw, 18px);
	opacity: .1;
	pointer-events: none;
}

.fullscreen-vu-bg span {
	width: 100%;
	height: 55%;
	background: #ffffff;
	transform-origin: bottom;
	animation-name: fullscreen-vu;
	animation-duration: var(--vu-duration, 1.8s);
	animation-delay: var(--vu-delay, 0s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes fullscreen-vu {
	0%   { transform: scaleY(var(--vu-a, .18)); }
	18%  { transform: scaleY(var(--vu-b, .75)); }
	36%  { transform: scaleY(var(--vu-c, .35)); }
	58%  { transform: scaleY(var(--vu-d, .9)); }
	78%  { transform: scaleY(var(--vu-e, .28)); }
	100% { transform: scaleY(var(--vu-a, .18)); }
}

.fullscreen-bg-blobs {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.fullscreen-bg-blobs span {
	position: absolute;
	width: 55vmax;
	height: 55vmax;
	border-radius: 50%;
	background: rgba(247, 238, 232, .34);
	filter: blur(45px);
	animation: fullscreen-blob-move 22s ease-in-out infinite alternate;
}

.fullscreen-bg-blobs span:nth-child(1) {
	left: -12vmax;
	top: 8vh;
}

.fullscreen-bg-blobs span:nth-child(2) {
	right: -10vmax;
	top: 25vh;
	animation-duration: 34s;
	animation-delay: -8s;
}

.fullscreen-bg-blobs span:nth-child(3) {
	left: 28vw;
	bottom: -18vmax;
	animation-duration: 40s;
	animation-delay: -16s;
}

@keyframes fullscreen-blob-move {
	0% {
		transform: translate(0, 0) scale(1);
	}
	40% {
		transform: translate(14vw, -10vh) scale(1.25);
	}
	100% {
		transform: translate(-10vw, 12vh) scale(.95);
	}
}

.fullscreen-bg-logo {
	position: absolute;
	inset: -20vmax;
	z-index: 0;
	background: url('/zoeradio/images/favicon.svg') center / min(115vmin, 1100px) no-repeat;
	opacity: .055;
	pointer-events: none;
	animation: fullscreen-logo-drift 32s ease-in-out infinite;
}

.track-strip.no-transition,
.fullscreen-track-strip.no-transition {
	transition: none !important;
}

.track-strip.no-transition .track-slide,
.fullscreen-track-strip.no-transition .fullscreen-track-slide {
	transition: none !important;
}

@keyframes fullscreen-logo-drift {
	0% {
		transform: translate(-10vw, 6vh) scale(.95) rotate(-4deg);
	}
	35% {
		transform: translate(8vw, -5vh) scale(1.12) rotate(3deg);
	}
	70% {
		transform: translate(4vw, 8vh) scale(1.02) rotate(-2deg);
	}
	100% {
		transform: translate(-10vw, 6vh) scale(.95) rotate(-4deg);
	}
}

.fullscreen-track-slide:nth-child(6)::before,
.fullscreen-track-slide:nth-child(7)::before,
.fullscreen-track-slide:nth-child(8)::before {
	font-family: anzeigen-grotesk, sans-serif;
	font-weight: normal !important;
	text-transform: uppercase;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	z-index: 5;
	background: #ff6a13;
	color: #fff;
	font-size: clamp(.75rem, 1vw, 1rem);
	line-height: 1;
	padding: .35rem 1rem;
	border-radius: 0;
	clip-path: polygon(
		12px 0,
		calc(100% - 12px) 0,
		100% 50%,
		calc(100% - 12px) 100%,
		12px 100%,
		0 50%
	);
	letter-spacing: .04em;
	opacity: 1;
	transition:
		opacity .35s ease,
		transform .35s ease;
}

.fullscreen-track-slide:nth-child(6)::before {
	content: "ZONET";
}

.fullscreen-track-slide:nth-child(7)::before {
	content: "NU";
}

.fullscreen-track-slide:nth-child(8)::before {
	content: "ZOMETEEN";
}

body.track-advancing .fullscreen-track-slide:nth-child(6)::before,
body.track-advancing .fullscreen-track-slide:nth-child(7)::before,
body.track-advancing .fullscreen-track-slide:nth-child(8)::before {
	opacity: 0;
	transform: translate(-50%, -65%);
}

@media (max-width: 991.98px) {
	.fullscreen-tracklist {
		top: 44%;
	}

	.fullscreen-track-slide {
		flex-basis: clamp(230px, 72vw, 360px);
	}

	.fullscreen-track-cover {
		width: min(100%, 34vh, 330px);
		margin-bottom: 0.6rem;
	}

	.fullscreen-track-info {
		font-size: clamp(1.1rem, 5vw, 1.8rem);
	}

	.fullscreen-track-prev {
		left: .75rem;
	}

	.fullscreen-track-next {
		right: .75rem;
	}
	
	
	
	#fullscreenPlayer .fullscreen-program {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 250px !important;
		overflow: hidden !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program {
		position: static !important;
		width: 100vw !important;
		height: 250px !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: visible !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program-img {
		position: absolute !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 260px !important;
		height: 250px !important;
		transform: none !important;
		text-align: left !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program-img img {
		height: 250px !important;
		width: auto !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 auto !important;
		display: block !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program-text {
		position: absolute !important;
		right: 0 !important;
		left: auto !important;
		bottom: 20px !important;
		transform: none !important;
		text-align: right !important;
		align-items: flex-end !important;
		font-size: clamp(1rem, 4.5vw, 1.5rem) !important;
		z-index: 5 !important;
	}
	
	.fullscreen-tracklist {
		top: calc(var(--mobile-sidebar-height) + 5px) !important;
		transform: none !important;
		z-index: 4;
		margin-top: 1rem;
	}
	#fullscreenPlayer .fullscreen-program {
		top: 68% !important;
		bottom: 0 !important;
		height: auto !important;
		z-index: 2;
		pointer-events: none;
	}
	#fullscreenPlayer .fullscreen-program .current-program {
		height: 100% !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program-img {
		height: 100% !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program-img img {
		height: 100% !important;
		max-height: none !important;
	}
	#fullscreenPlayer .fullscreen-program .current-program-text {
		bottom: 20px !important;
		pointer-events: auto;
	}
	
}
@media (max-width: 991.98px) and (max-height: 720px) {

	#fullscreenPlayer .fullscreen-program {
		top: 80% !important;
	}

}

.sidebar,
.player {
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: auto;
}