/*
Licensed under the Academic Free License version 3.0
Copyright (c) 2021 Michael Slíva <michael@sliva.dev>
*/

#volume {
	width: 160px;
}

#soundlist {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#soundlist p {
	text-align: center;
	font-style: oblique;
}
p#radioPlayer i.fa.fa-pause-circle {
	display: none;
}
p#radioPlayer i.fa {
	cursor:pointer;
}
#radioPlayer {
	font-size: 32px;
	margin: 0;
}
#radioPlayer > .fa-play-circle, #radioPlayer > .fa-pause-circle {
	position: relative;
	top: 2px;
}
#radioPlayer input {
	vertical-align: middle;
}
.rememberHelp {
	cursor:help;
}
#equaliser-container {
height: 10px;
width: 20px;
margin: 0 0;
padding: 0 0 0 0;
position: relative;
opacity: 0;
transition: opacity 2s cubic-bezier(.17,.84,.44,1);
}

.colour-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: black;
}

.equaliser-column {
width: 2px;
float: left;
margin: 0 1px 0 0;
padding: 0;
height: 10px;
position: relative;
list-style-type: none;
}

.equaliser-column:nth-child(1) .colour-bar {
animation: color-bar-paused 2s 1s ease-out alternate infinite;
}

.equaliser-column:nth-child(2) .colour-bar {
animation: color-bar-paused 2s 0.5s ease-out alternate infinite;
}

.equaliser-column:nth-child(3) .colour-bar {
animation: color-bar-paused 2s 1.5s ease-out alternate infinite;
}

.equaliser-column:nth-child(4) .colour-bar {
animation: color-bar-paused 2s 0.375s ease-out alternate infinite;
}

.equaliser-column:nth-child(5) .colour-bar {
animation: color-bar-paused 2s 2s ease-out alternate infinite;
}

.equaliser-column:last-child {
margin-right: 0;
}

@keyframes color-bar-playing {
0% {
  height: 1px;
  background: black;
}
10% {
  height: 3px;
  background: black;
}
20% {
  height: 5px;
  background: black;
}
30% {
  height: 2px;
  background: black;
}
40% {
  height: 7px;
  background: black;
}
50% {
  height: 9px;
  background: black;
}
60% {
  height: 3px;
  background: black;
}
70% {
  height: 8px;
  background: black;
}
80% {
  height: 5px;
  background: black;
}
90% {
  height: 3px;
  background: black;
}
100% {
  height: 1px;
  background: black;
	}
}

@keyframes color-bar-paused {
0% {
  height: 1px;
  background: black;
}
100% {
  height: 1px;
  background: black;
	}
}

#currentVolume {
	opacity: 0;
	overflow: visible;
	white-space: nowrap;
	left: 0px;
	width: 160px;
	height:8px;
	margin-left: 40px;
	margin-bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -24px;
	position: relative;
}

@keyframes helpMoveClickPlay {
	from {left: -22px;}
	to {left: 0px;}
}

@keyframes helpMoveClickPause {
	from {left: 0px;}
	to {left: -22px;}
}

#playerAbout {
	left: -22px;
	position: relative;
	width: 0px;
}

#MagicPlayer {
	width: 228px;
	font-family: 'Ubuntu', sans-serif;
	background-color: #ffffff;
	padding: 0px 4px;
	height: 76px;
	transition: height 0.5s ease, width 0.5s ease, border-color 585ms ease;
}

#playerInfoHeading {
	width: max-content;
	margin-right: 0.375rem;
	height: 19px;
}

#playerInfo {
	display: flex;
	overflow: hidden;
	max-height: 19px;
	opacity: 0;
	width: 245px;
	align-items: center;
	margin-top: 4px;
}

#playerInfoPlaying {
	white-space: nowrap;
	width: min-content;
	margin-left: 0.375rem;
	font-family: 'IBM Plex Mono', monospace;
	color: #fffe;
}

#playerInfoPlayingContainer {
	overflow: hidden;
	background: #00000043;
	border: 1px solid black;
	border-style: inset;
	border-radius: 10px;
	background-image: -webkit-repeating-radial-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375) 1px, transparent 1px, transparent 100%);
	background-image: -moz-repeating-radial-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375) 1px, transparent 1px, transparent 100%);
	background-image: -ms-repeating-radial-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375) 1px, transparent 1px, transparent 100%);
	background-image: repeating-radial-gradient(rgba(0,0,0,.375), rgba(0,0,0,.375) 1px, transparent 1px, transparent 100%);
	-webkit-background-size: 3px 3px;
	-moz-background-size: 3px 3px;
	background-size: 3px 3px;
}

.marquee {
	display: inline-block;
	padding-left: 100%;
	animation: marquee 15s linear infinite;
}
@keyframes marquee {
	0%   { transform: translate(0, 0); }
	100% { transform: translate(-100%, 0); }
}

#playerMiddleLine {
	display: inline-flex;
	align-items: center;
	position: relative;
	top: -24px;
	transition: top 0.5s ease 0s;
}

#playerBottomLine {
	position: relative;
	top: -24px;
	transition: top 0.5s ease 0s;
	display: inline-flex;
}

#playerBottomLine > p {
	margin: 8px 0px 4px 0px;
}

.span8 {
	display: inline-block;
	width: 8px;
}

#radioPlayerContainer {
	height: 110px;
}

#playerRememberHelp {
	width: max-content;
}

@keyframes playerLogoFade {
	0%	{ opacity:0; z-index: 20; }
	1%	{ z-index:21; }
	25%	{ opacity:1; }
	49%	{ z-index:21; }
	50%	{ opacity:0; z-index: 20; }
	100%	{ opacity:0; }
}

@keyframes playerLogoFadeStopClan {
	0%	{ opacity:0; z-index: 20; }
	50%	{ opacity:0; z-index: 21; }
	75%	{ opacity:1; }
	100%	{ opacity:1; }
}

@keyframes playerLogoFadeStopJet {
	0%	{ opacity:1; z-index: 21; }
	50%	{ opacity:0; z-index: 20; }
	100%	{ opacity:0; }
}

@keyframes playerLogoFadeStop {
	0%	{ opacity:0; z-index: 20; }
	1%	{ z-index:21; }
	25%	{ opacity:1; }
	100%	{ opacity:1; }
}

#playerLogo {
	margin: 0 0 0 40px !important;
	position: relative;
	transition: left 0.5s ease;
	left: 0;
}

#playerLogo p {
	margin: 0 !important;
}

#playerJetstreamLogo, #playerClanhouseLogo {
	position: absolute;
}

#playerJetstreamLogo {
	left: -2px;
	opacity: 0;
}

input[type=range] {
  margin: 7px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #fffe;
  border: 0.7px solid #000000;
  border-radius: 3px;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -7.7px;
  width: 9px;
  height: 16px;
  background: #000000;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fffe;
}
input[type=range]::-moz-range-track {
  background: #fffe;
  border: 0.7px solid #000000;
  border-radius: 3px;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 9px;
  height: 16px;
  background: #000000;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 8px 0;
  color: transparent;
  height: 2px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #fffe;
  border: 0.7px solid #000000;
  border-radius: 6px;
}
input[type=range]::-ms-fill-upper {
  background: #fffe;
  border: 0.7px solid #000000;
  border-radius: 6px;
}
input[type=range]::-ms-thumb {
  width: 9px;
  height: 16px;
  background: #000000;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  margin-top: 0px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #fffe;
}
input[type=range]:focus::-ms-fill-upper {
  background: #fffe;
}
@supports (-ms-ime-align:auto) {
  input[type=range] {
    margin: 0;
  }
}