.playerBorderless .playerBlur {
	border-radius: 0;
}

.playerBorderless {
	margin: 0 -21px;
}

.playerBorderless .playlist {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: linear-gradient(180deg, #FCC5C044, #fff);
}

.player {
	color: white;
	display: flex;
}

@media (max-width: 768px) {
	.player {
		margin: 0 -15px;
	}
}

.playerInner {
	display: flex;
	flex-direction: column;
	margin-top: 40px;
	width: 100%;
}

.playerContent {
	transform: translateY(-28px);
	z-index: 3;
}

.playerBlur {
	background: linear-gradient(#0E72E6e5, #0852A5e5);
	border-radius: 28px;
	padding: 36px 36px 22px 36px;
}

@media (max-width: 768px) {
	.playerBlur {
		border-radius: 0;
		padding: 25px 25px 18px 25px;
	}
}


.timeRange {
	--knob-background: white;
	--bar-background: rgba(255, 255, 255, 0.5);
	--bar-background-active: white;
	--bar-height: 6px;
	--bar-border-radius: 8px;
	--knob-size: 0px;
}

.timeRange:hover {
	--knob-size: 30px;
}

.backForwardButton {
	background-color: transparent;
	background-position: 4px 1px;
	background-repeat: no-repeat;
	background-size: 90% 90%;
	border-radius: 50%;
	height: 80px;
	transition: all 0.3s;
	width: 80px;
}

.backForwardButton:active {
	background-color: rgba(30, 30, 30, 0.2);
	transform: scale(0.9);
}


.backButton {
	background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/backward.svg");
	border: 0;
	margin-right: 20px;
}

.forwardButton {
	background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/forward.svg");
	border: 0;
	margin-left: 20px;
}

.playPauseButton {
	background-color: transparent;
	background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/play.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	border: 0;
	height: 100px;
	width: 100px;
}

.playPauseButton.paused {
	animation: toPause 0.4s forwards ease-out;
}

.playPauseButton.playing {
	animation: toPlay 0.4s forwards ease-out;
}

.playPauseButton.replay {
	animation: toReplay 0.4s forwards ease-out;
}


@keyframes toReplay {
	0% {
		background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/pause.png");
		transform: scale(1);
	}

	50% {
		transform: scale(0);
	}

	100% {
		background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/refresh.png");
		transform: scale(1);
	}
}

@keyframes toPause {
	0% {
		background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/play.png");
		transform: scale(1);
	}

	50% {
		transform: scale(0);
	}

	100% {
		background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/pause.png");
		transform: scale(1);
	}
}


@keyframes toPlay {
	0% {
		background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/pause.png");
		transform: scale(1);
	}

	50% {
		transform: scale(0);
	}

	100% {
		background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/play.png");
		transform: scale(1);
	}
}

.time {
	display: flex;
}

.grow {
	flex-grow: 1;
}

.controls {
	align-items: center;
	display: flex;
	justify-content: center;
}


.subscription {
	display: flex;
	margin-top: 16px;
}

.flexGrow {
	flex-grow: 1;
}

.episodeTitle {
	display: inline;
}


.episodeTitleWithBadge {
	font-family: "Univers LT W01 65 Bold";
	font-size: 25px;
	margin-bottom: 8px;
	display: flex;
	gap: 8px;
}

.episodeDate {
	display: flex;
	font-size: 13px;
	justify-content: center;
	margin-top: 4px;
}

.episodeImage {
	background-size: cover;
	min-height: 300px;

}

.playlist {
	background: linear-gradient(180deg, #FCC5C044, #F9F9F9);
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
	color: #333;
	height: 400px;
	padding: 40px 10px 50px 50px;
	transform: translateY(-50px);
	z-index: 2;
}

@media (max-width: 768px) {
	.playlist {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		height: fit-content;
		/*padding: 40px 24px 134px 32px;*/
		padding: 40px 24px 0px 32px;
	}
}

.episodeThumbnail {
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 10px;
	height: 130px;
	width: 130px;
}

@media (max-width: 768px) {
	.episodeThumbnail {
		height: 210px;
		width: 210px;
	}
}

.thumbnailAndText {
	display: flex;
}

@media (max-width: 768px) {
	.thumbnailAndText {
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.thumbnailAndDate {
		align-items: center;
		display: flex;
		flex-direction: column;
	}
}


.playlistImage {
	background-size: cover;
	border-radius: 13px;
	flex-shrink: 0;
	height: 100px;
	width: 100px;
}

.playlistImagePlaceHolder {
	background: url('/system/modules/de.stuttgart.uni.v3.basics/resources/img/svg/logo-start-inverted-de.svg') no-repeat center center, linear-gradient(#0E72E6e5, #0852A5e5);
	background-size: 70%;
}

.playlistInner {
	max-height: 340px;
	overflow-y: scroll;
	scrollbar-color: #555 transparent;
}

.playlistInner::-webkit-scrollbar {
	background: transparent;
	width: 8px;
}

.playlistInner::-webkit-scrollbar-thumb {
	background: #555;
	border-radius: 10px;
}

@media (max-width: 768px) {
	.playlistInner {
		max-height: none;
		overflow-y: visible;
	}
}

.playlistEpisode {
	display: flex;
	margin-bottom: 24px;
}

.playlistInformations {
	margin-left: 20px;
}

.playlistDate {
	color: #777;
	font-size: 14px;
	margin-bottom: 4px;
}

.playlistTitle {
	font-size: 17px;
}

.playlistPlayButton {
	align-items: center;
	background-color: #E9E9EC;
	border: 0;
	border-radius: 18px;
	display: flex;
	justify-content: center;
	margin: 10px 0;
	padding: 7px 12px;
}

.playlistPlayIcon {
	height: 20px;
	margin-left: 2px;
	width: 20px;
}

.playlistResumeIcon {
	height: 20px;
	margin-left: 2px;
	width: 20px;
}

.playlistReplayIcon {
	height: 20px;
	margin-left: 2px;
	width: 20px;
}


.lottiePlayer {
	height: 43px;
	margin: -13px -6px;
	width: 43px;
}

.playerHeader {
	padding: 0 0 0 16px;
}

@media (max-width: 768px) {
	.playerHeader {
		padding: 12px 0 0 10px;
	}
}

.channelTitle {
	font-size: 18px;
	margin-bottom: 8px;
}

.episodeDescription {
	font-size: 15px;
}

.episodeDescription a {
	color: white;
}

.episodeDescription a::after {
	display: none;
}

.episodeDescription a:hover {
	color: var(--us-lightblue);
}

.playlistAudioIcon {
	height: 20px;
	width: 26px;
}

.playlistMinutes {
	margin-bottom: 1px;
	padding-left: 5px;
}

.playbackRate {
	background-color: transparent;
	background-image: url("/system/modules/de.stuttgart.uni.v3.basics/resources/img/audio/playbackrate/1x.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	height: 40px;
	margin-right: 8px;
	width: 64px;
}

.playlistHeader {
	font-family: "Univers LT W01 65 Bold";
	font-size: 22px;
	margin-bottom: 12px;
}

.action-sheet-button {
	font-family: "Univers LT";
	font-size: 20px !important;
}

.action-sheet-title {
	font-family: "Univers LT W01 65 Bold";
	font-size: 17px !important;
	text-transform: uppercase;
}

.action-sheet-cancel {
	font-size: 15px !important;
}

.subscribeButton {
	background-color: white;
	border: 0;
	border-radius: 14px;
	color: #333;
	font-family: "Univers LT W01 65 Bold";
	margin-bottom: 5px;
	margin-top: 5px;
	padding: 6px 12px;
	text-transform: uppercase;
}


.spaceFiller {
	width: 46px;
}

.follow {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.followExample {
	font-size: 14px;
}

.badgeNew {
	background-color: white;
	border-radius: 8px;
	color: #333;
	display: inline;
	font-size: 14px;
	padding: 2px 5px;
	text-transform: uppercase;
	vertical-align: middle;
}

.badgeNewContainer {
	display: flex;
	align-items: center;
	margin-top: 2px;
}