/*
 * Prank Radio Bar — стили копирующие cuebar
 */

:root {
    --scrollbar-width: 15px;
}

.prank-radio-bar {
	border-width: 0;
	clear: both;
	counter-reset: li;
	float: left;
	font-size: 11px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 100%;
	z-index: 9998;
	background: #000000;
}

@media (min-width: 768px) {
	.prank-radio-bar {
        left: -15px;
        right: 0;
		width: auto;
		max-width: 720px;
		margin: 0 auto;
	}

}
@media (max-width: 767px) {
    #prank-volumebtn {
        display: none !important;
    }
}

@media (min-width: 992px) {
	.prank-radio-bar {
		max-width: 960px;
		        left: -15px;
        right: 0;
		
	}
}

@media (min-width: 1200px) {
    .prank-radio-bar {
        max-width: 1190px;
        left: -15px;
        right: 0;
        margin: 0 auto;
    }
}

.prank-radio-bar.is-loading {
	display: none;
}

.prank-radio-bar .mejs-container {
	background: transparent !important;
	line-height: 50px;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: left;
}

.prank-radio-bar .mejs-container .mejs-layers {
	position: absolute;
	top: 0;
	right: 50px;
	bottom: 0;
	left: 50px;
}

.prank-radio-bar .mejs-container .mejs-track-artwork {
	display: none;
	opacity: .5;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	width: 50px;
	z-index: 20;
}

.prank-radio-bar .mejs-container .mejs-track-artwork img {
	display: block;
	height: 100%;
	width: 100%;
}

.prank-radio-bar .mejs-container .mejs-track-details {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 20px;
	left: 20px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	vertical-align: middle;
	white-space: nowrap;
	z-index: 25;
}

.prank-radio-bar .mejs-container .mejs-track-details .mejs-track-artist {
	display: table-footer-group;
	font-size: 12px;
	opacity: .75;
}

.prank-radio-bar .mejs-container .mejs-track-details .mejs-track-title {
	display: table-header-group;
}

.prank-radio-bar.has-artwork .mejs-container .mejs-track-artwork {
	display: block;
	position: absolute;
	left: 0;
}

.prank-radio-bar .mejs-container .mejs-layers,
.prank-radio-bar .mejs-container .mejs-track-details {
	color: #ffffff;
}

.prank-radio-bar .mejs-container .mejs-controls {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent;
	border-style: solid;
	border-width: 0 50px;
	border-right-color: #000000;
	border-left-color: #000000;
	box-shadow: none;
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
}

.prank-radio-bar .mejs-container .mejs-controls:before {
	display: none;
}

.prank-radio-bar .mejs-container .mejs-controls div {
	height: auto;
	width: auto;
}

.prank-radio-bar .mejs-container .mejs-controls button {
	color: #ffffff;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 100%;
	padding: 0;
	position: absolute;
	top: 0;
	left: -41px;
	text-align: left;
	width: 32px;
	z-index: 100;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button button {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
	background: transparent !important;
	border-width: 0;
	height: 32px;
	margin: -16px 0 0 -16px;
	outline: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	color: #ffffff;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button button:before {
	content: "";
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button button:active,
.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button button:focus {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: transparent;
	outline: 0;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button .cue-icon-pause,
.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button .cue-icon-play {
	fill: currentColor;
	height: 32px;
	margin: -16px 0 0 -16px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button.mejs-play .cue-icon-pause,
.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button.mejs-pause .cue-icon-play {
	display: none;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail {
	background: transparent;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail span {
	border-radius: 0;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
	background: transparent !important;
	border-width: 0;
	height: 100%;
	margin: 0;
	width: 100%;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-current {
	background: rgba(255, 255, 255, 0.15);
	height: 100%;
	position: relative;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-loaded {
	background: rgba(255, 255, 255, 0.05);
	height: 50px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-buffering {
	height: 50px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-float {
	background: #fcfcfc;
	border-color: #969696;
	color: #000;
	position: absolute;
	top: -23px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-float .mejs-time-float-corner {
	border-color: #969696 transparent transparent;
	border-style: solid inset inset;
	border-width: 6px 6px 0;
	position: absolute;
	top: 15px;
	left: 12px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time-rail .mejs-time-float .mejs-time-float-corner:before {
	border-width: 5px 5px 0;
	border-color: #fcfcfc transparent transparent;
	border-style: solid inset inset;
	content: "";
	height: 0;
	position: absolute;
	top: -6px;
	left: -5px;
	width: 0;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: none;
	font-weight: 400;
	opacity: .7;
	padding: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 20px;
	bottom: 0;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-time span {
	display: none;
	font-size: 12px;
	line-height: 50px;
	color: #ffffff;
}

/* === Volume === */
.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
	display: flex !important;
	align-items: center;
    justify-content: center;
	position: absolute;
	top: 0;
	right: -46px;
	bottom: 0;
	width: 32px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button button {
    color: #ffffff;
    margin: 0;
    
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button svg {
	
	height: 28px !important;
	margin: 0;

	width: 28px !important;
}

.prank-radio-bar.is-closed #prank-volumebtn {
    display: none !important;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button .mejs-volume-slider {
    height: 150px;
    margin-right: -15px;
    position: absolute;
    top: -150px;
    right: 50%;
    transform: none;
    width: 50px
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
	display: block !important;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
    height: 110px;
    position: absolute;
    top: 20px;
    left: 24px;
    width: 2px
}


/* JS меняет height (пиксели) */
.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    bottom: 0;
    left: 0
}

/* JS меняет bottom (пиксели) */
.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
    border-radius: 8px;
    height: 16px;
    position: absolute;
    bottom: -8px;
    right: 17px;
    width: 16px
}

/* === Toggle === */
.prank-radio-bar .mejs-container .mejs-controls .mejs-toggle-player-button {
	cursor: pointer;
	display: none;
	position: absolute;
	top: 0;
	right: -84px;
	bottom: 0;
	width: 24px;
	background: rgba(255, 255, 255, 0.2);
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-toggle-player-button button {
	background: transparent !important;
	border-width: 0;
	height: 32px;
	margin: -16px 0 0 0;
	outline: 0;
	position: absolute;
	top: 50%;
	left: 0;
	text-align: center;
	width: 100%;
	color: #ffffff;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-toggle-player-button svg {
	fill: currentColor;
	height: 10px;
	margin: -5px 0 0 -8px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
}

.prank-radio-bar .mejs-container .mejs-controls .mejs-toggle-player-button .cue-icon-right-arrow {
	display: none;
}

.prank-radio-bar .mejs-container .mejs-controls svg {
	fill: currentColor;
	height: 16px;
	margin-top: -8px;
	margin-left: -8px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
}

/* === Responsive === */
@media only screen and (min-width: 480px) {
	.prank-radio-bar .mejs-container .mejs-controls .mejs-time {
		display: block;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-time .mejs-currenttime {
		display: inline;
	}
}

@media only screen and (min-width: 769px) {
	.prank-radio-bar .mejs-container .mejs-layers {
		right: 122px;
		left: 50px;
	}

	.prank-radio-bar .mejs-container .mejs-track-details .mejs-track-artist {
		display: inline;
		font-size: inherit;
		opacity: 1;
	}

	.prank-radio-bar .mejs-container .mejs-track-details .mejs-track-artist:after {
		content: " - ";
	}

	.prank-radio-bar .mejs-container .mejs-track-details .mejs-track-artist:empty {
		display: none;
	}

	.prank-radio-bar .mejs-container .mejs-track-details .mejs-track-title {
		display: inline;
	}

	.prank-radio-bar.has-artwork .mejs-container .mejs-track-artwork {
		opacity: 1;
		position: absolute;
		left: 0;
	}

	.prank-radio-bar.has-artwork .mejs-container .mejs-track-details {
		position: absolute;
		left: 70px;
	}

	.prank-radio-bar .mejs-container .mejs-controls {
		border-width: 0 122px 0 50px;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-button {
		display: block;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button {
		position: absolute;
		left: -41px;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-volume-button {
		display: block;
		position: absolute;
		right: -84px;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-time {
		display: block;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-time span {
		display: inline;
	}

	.prank-radio-bar .mejs-container .mejs-controls .mejs-toggle-player-button {
		display: block;
		right: -122px;
	}

	.prank-radio-bar.is-closed {
		height: 50px;
		opacity: .5;
		transition: opacity .2s;
		width: 74px;
	}

	.prank-radio-bar.is-closed:hover {
		opacity: 1;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-layers {
		position: static;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-layers>* {
		display: none;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-controls {
		border-right-width: 24px;
		border-left-width: 50px;
		width: 74px;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-controls>* {
		display: none;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-controls .mejs-playpause-button {
		display: block;
		position: absolute;
		left: -41px;
		z-index: 100;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-controls .mejs-toggle-player-button {
		display: block;
		position: absolute;
		right: -24px;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-controls .mejs-toggle-player-button .cue-icon-left-arrow {
		display: none;
	}

	.prank-radio-bar.is-closed .mejs-container .mejs-controls .mejs-toggle-player-button .cue-icon-right-arrow {
		display: block;
		margin-left: -3px;
	}

	.prank-radio-bar.is-closed.has-artwork .mejs-container .mejs-track-artwork {
		display: block;
		opacity: .5;
	}
}

.rtl .prank-radio-bar .mejs-container .mejs-controls .mejs-playpause-button {
	transform: scaleX(-1);
}

.rtl .prank-radio-bar.is-closed .mejs-container .mejs-controls .mejs-toggle-player-button .cue-icon-right-arrow {
	margin-left: -7px;
}

.prank-radio-bar-show-btn {
	background: #000000;
	border: none;
	border-radius: 4px 4px 0 0;
	bottom: 0;
	color: #ffffff;
	cursor: pointer;
	display: none;
	font-size: 11px;
	line-height: 1;
	padding: 6px 12px;
	position: fixed;
	right: 10px;
	z-index: 999;
}

.prank-radio-bar-show-btn svg {
	fill: currentColor;
	height: 16px;
	vertical-align: middle;
	width: 16px;
}

.prank-radio-bar.prank-cookie-visible {
	bottom: 120px;
}

.prank-radio-bar.is-hidden {
	display: none;
}

.prank-radio-bar.is-hidden~.prank-radio-bar-show-btn {
	display: block;
}