.playControls {
	height: 0px;
	display: none;
	/* height: 48px; */
	/* display: block; */
	background-color: #252525;
	position: relative;
	/* background-color: #f2f2f2; */
	/* background-color: #676767; */
	/* border-bottom: 1px solid #676767; */
}

.playControls__wrapper {
	display: flex;
	height: 100%;
	/* min-width: 675px; */
	width: fit-content;
	width: -moz-fit-content;
	margin-right: auto;
	margin-left: auto;
	background-color: #676767;
	border-radius: 5px;
}

.playIcon {
	/* background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPgo=)
		no-repeat 55%; */
	/* background: url(data:image/png;base64,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)
		no-repeat 55%; */
	background: url('../images/player/play.png') no-repeat 50%;
	padding: 0;
}

.playIcon.playing {
	/* background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTYgMTloNFY1SDZ2MTR6bTgtMTR2MTRoNFY1aC00eiIvPjwvc3ZnPgo=); */
	/* background-image: url('../images/player/spinner.png'), url('../images/player/pause.png'); */
	background-image: url('../images/player/pause.png');
	background-position: 50%;
}

.playingSpinner {
	display: none;
	position: absolute;
	width: 42px;
	height: 42px;
	top: 3px;
	left: 2px;
	background: url('../images/player/spinner.png') no-repeat;
	-webkit-animation: playspin 3s infinite linear;
	-moz-animation: playspin 3s infinite linear;
	animation: playspin 3s infinite linear;
}
@-moz-keyframes playspin {
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-webkit-keyframes playspin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes playspin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.playControls__play {
	position: relative;
	width: 46px;
	height: 100%;
	margin: 0px 12px 0px 12px;
	border: 0px;
	outline: none;
}

.playControls__play:hover {
	/* background-image: url('../images/player/play_hover.png'); */
	background-repeat: no-repeat;
	background-position: 50%;
}

.playControls__volume {
	height: 100%;
	display: flex;
	margin: 0px 12px 0px 12px;
}

.playControls__volume button {
	width: 36px;
	height: 100%;
	/* margin: 0px 12px 0px 12px; */
	border: 0px;
	outline: none;
	background-color: #676767;
}

.playControls__volume i {
	font-size: 16px;
	color: #333;
	padding-top: 16px;
}

.playControls__volume i:hover {
	color: #999;
}

.playControls__volume i.fa-volume-up {
	margin-right: 0px;
	cursor: pointer;
}

.playControls__volume i.fa-volume-down {
	margin-right: 0px;
	cursor: pointer;
}

.playControls__volume i.fa-volume-mute {
	margin-right: 0px;
	cursor: pointer;
}

.playControls__volumeMute {
	display: none;
	position: absolute;
	font-family: 'Trebuchet MS', sans-serif;
	width: 16px;
	color: #c80913;
	top: 16px;
	padding-left: 0px;
}

.playControls__volumeSlider {
	margin: 19px 12px 19px 12px;
	height: 10px;
	width: 150px;
	/* background: #555; */
	background: #676767;
	border-radius: 15px;
}

.playControls__volumeSlider .ui-slider-range-min {
	height: 8px;
	width: 150px;
	position: absolute;
	background: #2ecc71;
	border: none;
	border-radius: 10px;
	outline: none;
}

.playControls__volumeSlider .ui-slider-handle {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	/* background: #555 !important; */
	position: absolute;
	margin-left: -10px;
	margin-top: -2px;
	cursor: pointer;
	outline: none;
}

.playControls__volumeSlider .ui-widget-content {
	background-color: #999 !important;
}
.playControls__nowPlaying {
	margin: 8px 0px 8px 12px;
}

.playControls__nowPlaying .column {
	flex-direction: column;
}

.playControls__nowPlaying .channel-title {
	font-size: 13px;
	line-height: 19px;
	color: #ccc;
}

.playControls__nowPlaying .song-title {
	font-size: 12px;
	width: 330px;
	line-height: 17px;
	color: #333;
	white-space: nowrap;

    text-overflow: ellipsis;
    overflow: hidden;  
}

.playControls__externalLink {
	height: 100%;
	display: flex;
	margin: 0px 12px 0px 12px;
}

.playControls__externalLink i {
	font-size: 20px;
	color: #333;
	padding-top: 14px;
}

.playControls__externalLink i:hover {
	color: #999;
}

.playControls__externalLink i.fa-external-link {
	/* float: right; */
	/* margin-right: 0px; */
	cursor: pointer;
	/* transform: scaleY(-1); */
}
