@charset "UTF-8";
/*  Schriften:  */
@font-face {
	font-family: 'plSpecial';
	src: url('/static/fonts/Ubuntu-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'plSpecial';
	src: url('/static/fonts/Ubuntu-LightItalic.ttf') format('truetype');
	font-style: italic;
}
@font-face {
	font-family: 'plSpecial';
	src: url('/static/fonts/Ubuntu-Bold.ttf') format('truetype');
	font-weight: bold;
}
@font-face {
	font-family: 'plSpecial';
	src: url('/static/fonts/Ubuntu-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(/static/fonts/Material_Icons.woff2) format('woff2');
}
/*  Ende: Schriften  */

html {
	font-family: 'plSpecial', 'Arial', sans-serif;
	overflow: hidden;
}

.player-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 85px !important;
	/* max-height: 6.5em; */
	overflow: hidden;
	background-color: #1d4886;
}

#streamplayer {
	width: 100%;
	border-radius: 0px;
}

#stage {
	width: 100%;
	height: 100%;
	display: grid;
	align-items: center;
	/* display: flex;
	align-items: row;
	justify-content: left; */
	background: linear-gradient(135deg, #95c11f 30%, #97c6c3 93%);
	overflow-y: hidden;
}
@media (max-width: 900px) {
	#stage {
		font-size: 1.4em;
	}
	.info {
		font-size: 1.2em;
	}
	.info h4 {
		visibility: hidden;
	}
}
@media (max-width: 700px) {
	#stage {
		font-size: 1em;
	}
	.info {
		font-size: 1.2em;
	}
}
@media (max-width: 480px) {
	#stage {
		font-size: 0.8em;
	}
	.info {
		font-size: 0.8em;
	}
}

#stage > img {
	max-width: 100%;
	height: auto;
	margin: auto auto;
	opacity: 0.5;
	user-select: none;
	-webkit-user-drag: none;
}

#thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: calc(100vh - 6.5em);
	text-align: center;
	padding-top: 25%;
	border: 0px solid #00f;
	color: #000;
}
#thumb > i {
	font-size: 40vh;
}
#thumb > i.confirm {
	color: rgb(148 192 28 / 1);
	filter: drop-shadow(1px 1px 10px rgb(0 0 0 / 0.6));
}
#thumb > i.reject {
	color: #cb2f23;
	color: rgb(203 47 35 / 0.7);
	filter: drop-shadow(1px 1px 10px rgb(0 0 0 / 0.6));
}

ul#stageElements {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	-webkit-overflow-scrolling: touch;
	display: grid;
	list-style-type: none;
}

.flip-card {
	background-color: transparent;
	width: 100vw;
	height: calc(100vh - 85px);
	border: 0px solid #f00;
	perspective: 100px;
}
.flip-card-inner {
	width: 100%;
	height: 100%;
	transition: transform 0.5s;
	transform-style: preserve-3d;
	transform-style: ease-out;
}
.flip-card-front,
.flip-card-back {
	/* position: absolute; */
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}
.flip-card-back {
	top: 0;
	left: 0;
	transform: rotateY(180deg);
	background-color: #95c11f;
	background: linear-gradient(135deg, #95c11f 30%, #ffc245 93%);
	overflow-y: scroll;
}
.flip {
	transform: rotateY(180deg);
}
.flip-absolute {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden; /*necessary on mobile devices */
}

@media only screen and (hover: none) and (pointer: coarse) {
	/* on mobile devices only */
	.flip-card {
		height: calc(100vh - 160px);
	}
	.fixed-action-btn {
		/* margin-bottom: 6.5em; */
	}
}

svg#svgPlay {
	width: 50px;
	margin: 0 auto;
	display: block;
	cursor: pointer;
	transform-origin: 50% 50%;
	/* filter: drop-shadow(3px 5px 10px rgb(0 0 0 / 0.2)) blur(1px); */
	filter: blur(1px);
}
.btnPlayPause {
	position: absolute;
	text-align: center;
	left: 10px;
}

#sendungsInfo {
	_background-color: #b2b2b2;
	color: #fff;
	padding: 0;
	height: 2.25em;
	margin-top: 0.5em;
}
#songInfo {
	margin-top: -0.5em;
}
#songInfo .infoEntry {
	color: #fff;
	margin-top: 0.05em;
	border-bottom: 1px dotted #888;
}
.infoEntry {
	display: flex;
	align-content: left;
	_align-items: center;
}
.airtime {
	_width: 20%;
	padding-right: 1em;
	padding-top: .25em;
	font-size: 0.95em;
	font-weight: light;
	font-style: italic;
}
.info h3 {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1em;
	margin-top: 0.25em;
	_margin-block-start: 0.25em;
	_margin-block-end: 0.25em;
	display: inline-block;
}
.info h4 {
	font-size: 1.1em;
	font-style: italic;
	line-height: 0.95em;
	margin-top: 0.25em;
	display: inline-block;
	padding-left: 2em;
}
.info h5 {
	font-size: 1em;
	font-weight: bold;
	_line-height: 1em;
	_margin-block-end: 0.5em;
	margin-top: 0em;
	display: inline-block;
}
.info h6 {
	font-size: 0.9em;
	_line-height: 0.95em;
	_margin-top: 0.5em;
	display: inline-block;
	padding-left: 4em;
}

li.stageElement {
	height: (100vw / 16 * 9);
	width: 100%;
	position: relative;
	scroll-snap-align: start;
	scroll-behavior: smooth;
}

li.stageElement img {
	width: 100vw;
}

li .teaserBackground,
li .teaser {
	position: absolute;
	bottom: 0px;
	min-height: 5.5em;
	width: 100vw;
	padding: 1em;
}
li .teaserBackground {
	background: linear-gradient(180deg, #fff 2%, #000 80%);
	opacity: 0.6;
	filter: blur(2px);
}

li .topline {
	font-size: 1.25em;
	font-weight: medium;
	color: #94c11f;
	text-shadow: 1px 1px #222;
}
li .headline {
	font-size: 1.4em;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px #222;
}


.streamloader {
	display:inline-block;
	width:80px;
	height: 80px;
}

.streamloader:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: streamloader 1.2s linear infinite;
}
@keyframes streamloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cPlayer {
  border: 0px solid #333;
  cursor: pointer;
  padding-top: 12px;
  margin-right: 12px;
}
.cPlayer > .plCAP {
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.5);
}