@font-face {
    font-family: "DPix";
    src: url('fonts/DPix/Normal/DPix_8pt.eot');
    src: url('fonts/DPix/Normal/DPix_8pt.eot?#iefix') format('embedded-opentype'),
		 url('fonts/DPix/Normal/DPix_8pt.svg') format('svg'),
		 url('fonts/DPix/Normal/DPix_8pt.woff2') format('woff2'),
		 url('fonts/DPix/Normal/DPix_8pt.woff') format('woff'),
		 url('fonts/DPix/Normal/DPix_8pt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: "DPix-opt";
    src: url('fonts/DPix/Optimize/DPix_8pt.eot');
    src: url('fonts/DPix/Optimize/DPix_8pt.eot?#iefix') format('embedded-opentype'),
		 url('fonts/DPix/Optimize/DPix_8pt.svg') format('svg'),
		 url('fonts/DPix/Optimize/DPix_8pt.woff2') format('woff2'),
		 url('fonts/DPix/Optimize/DPix_8pt.woff') format('woff'),
		 url('fonts/DPix/Optimize/DPix_8pt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

:root {
	--color-cyan: #00d8ff;
	--color-green: #ccff00;
	--color-white: #fff;
}

html {
	background: #FFF;
	color: #000;
}

body, div, td, tr, ul, ol, li, a {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ol, ul {
	list-style: none;
}

* {
	font-size: 8px;
	font-weight: normal;
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-stroke: 1px transparent;
}

html, body {
	background-color: #000;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.hidden {
	display: none;
	overflow: hidden;
	width: 0px;
	height: 0px;
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.radio {
	background-color: #000;
	float: left;
	height: 504px;
	margin-top: -1px;
	overflow: hidden;
	vertical-align: top;
	width: 422px;
}

.radio .station {
	background-image: url('img/ui/bg.svg');
	float: left;
	height: 126px;
	width: 422px;
}

.radio .station .station-img {
	background: #000 url('img/ui/img_cover.svg');
	float: left;
	height: 125px;
	margin-left: 1px;
	margin-top: .6px;
	overflow: hidden;
	width: 105px;
}

.radio .station .station-img .cover {
	background-image: url('img/logos/rr.png');
	background-repeat: no-repeat;
	background-size: contain;
	height: 100%;
	opacity: .4;
	transition: opacity .2s ease-in;
	width: 100%;
}

.radio .station.active .station-img .cover {
	opacity: 1;
}

.radio .station .station-name {
	background-image: url('img/ui/names.png');
	background-repeat: no-repeat;
	display: block;
	float: left;
	height: 7.9px;
	margin-left: 20px;
	margin-top: 18px;
	pointer-events: none;
	user-select: none;
	width: 288px;
}

.radio .station .play {
	bottom: 17px;
	float: left;
	height: 38px;
	left: 20px;
	position: relative;
	top: 18px;
	width: 21px;
}

.radio .station .play.disabled {
	cursor: default;
	opacity: .5;
	pointer-events: none;
}

.radio .station .play .play-button {
	background-image: url('img/play-controller/stopped-white.png');
	background-repeat: no-repeat;
	cursor: pointer;
	float: left;
	height: 38px;
	position: relative;
	width: 20px;
	z-index: 1;
}

.radio .station.active .play .play-button.playing {
	background-image: url('img/play-controller/playing-white.gif');
	width: 18px;
}

.radio .station.active .play .play-button.connecting {
	background-image: url('img/play-controller/connecting-white.gif');
	width: 18px;
}

.radio .station .play .play-button-bg {
	background-color: #fff;
	border-radius: 100%;
	filter: blur(10px); 
	height: 29px;
	left: -6px;
	opacity: 0;
	position: absolute;
	transition: opacity .4s linear;
	top: 3px;
	width: 29px;
	z-index: 0;
}

.radio .station .play .play-button.playing ~ .play-button-bg,
.radio .station .play .play-button.connecting ~ .play-button-bg {
	opacity: .7;
	transition: opacity .4s linear;
}

.radio .station .station-text {
	float: left;
	height: 30px;
	left: 9%;
	overflow: hidden;
	padding-bottom: 10px;
	position: relative;
	top: 23px;
	width: 250px;
	transition: width .4s linear;
}

.radio .station.active .station-text.shorted {
	width: 208px;
	transition: width .4s linear;
}

.radio .station .station-text span {
	color: rgb(255,255,255,1);
	cursor: default;
	display: block;
	overflow: hidden;
	position: relative;
	text-overflow: ellipsis;
	user-select: none;
	white-space: nowrap;
	width: 100%;
}

.radio .station .station-text span:nth-child(even) {
	color: rgb(201,201,201);
}

.radio .station .volume {
	background-image: url('img/volume/vol_back.png');
	background-repeat: no-repeat;
	float: right;
	height: 25px;
	opacity: 0;
	position: relative;
	right: 20px;
	top: 23.5px;
	transition: opacity .3s linear;
	width: 27px;
}

.radio .station .volume.active {
	cursor: pointer;
	opacity: 1;
	transition: opacity .3s linear;
}

.radio .station .volume .volume-click {
	background-image: url('img/volume/volume-anim-sequence.png');
	background-repeat: no-repeat;
	height: 25px;
	width: 27px;
}

.radio .station .volume .volume-rollover {
	background-image: url('img/volume/rollover-anim-sequence.png');
	background-repeat: no-repeat;
	bottom: 28.3px;
	height: 28px;
	position: relative;
	width: 27px;
}

.radio .station .listen-player {
	display: inline-flex;
	float: left;
    height: 42px;
	left: 20px;
	justify-content: flex-start;
    position: relative;
	top: 35px;
    width: 170px;
}

.radio .station .listen-player-button {
	background-image: url('img/listen-player/listen.png');
	background-repeat: no-repeat;
	cursor: pointer;
	height: 7px;
	opacity: .4;
	user-select: none;
	width: 86px;
}

.radio .station.active .listen-player-button {
	opacity: 1;
}

.radio .station .listen-player .listen-player-selector {
	background-image: url('img/listen-player/listen-player-menu.svg');
    border-radius: 2px;
    height: 50px;
    margin-left: 95px;
	margin-top: -7px;
    opacity: 0;
	position: fixed;
    transition: opacity .15s linear;
    width: 93px;
}

.radio .station .listen-player .listen-player-selector.active {
	opacity: 1;
	transition: opacity .15s linear;
}

.radio .station .listen-player .listen-player-selector a {
	background-image: url('img/listen-player/listen-player-selector.png');
	background-repeat: no-repeat;
	cursor: default;
    display: none;
	height: 10px;
	margin: 4px 11.5px;
    opacity: .5;
	transition: opacity .1s linear;
	width: 72px;
}

.radio .station .listen-player .listen-player-selector a:nth-child(1) {
	background-position-y: 0px;
}

.radio .station .listen-player .listen-player-selector a:nth-child(2) {
	background-position-y: -10px;
}

.radio .station .listen-player .listen-player-selector a:nth-child(3) {
	background-position-y: -20px;
}

.radio .station .listen-player .listen-player-selector.active a {
	cursor: pointer;
	display: block;
}

.radio .station .listen-player .listen-player-selector a:hover {
	opacity: 1;
	transition: opacity .1s linear;
}

.radio .station .pie-timer {
	background: rgb(169,169,169,30%);
	border-radius: 100%;
	display: flex;
	float: right;
	height: 14px;
	opacity: 0;
	position: relative;
	right: 6px;
	top: 40px;
	transition: opacity .1s linear;
	width: 14px;
}

.radio .station .pie-timer.active {
	opacity: .3;
	transition: opacity .1s linear;
}

@property --percentage {
	initial-value: 0%;
	inherits: false;
	syntax: "<percentage>";
}

.radio .station .pie-timer.active .pie-spinner {
	background: conic-gradient(#a9a9a9 var(--percentage), transparent 0);
	border-radius: 50%;
	height: 14px;
	width: 14px;
	animation: timer 9.5s linear forwards;
}

@keyframes timer {
	to {
		--percentage: 100%;
	}
}

.footer {
	background: url('img/ui/footer_bg.svg');
	clear: both;
	height: 50px;
	width: 422px;
}

.footer .watch {
	float: left;
	height: 15px;
	opacity: 0;
	padding: 17.5px 0 17.5px 20px;
	width: 85px;
}

.footer .watch.active {
	opacity: 1;
	transition: opacity .25s linear;
}

.footer .watch.active .playing-time {
	cursor: default;
	display: inline;
	pointer-events: none;
	user-select: none;
}

.footer .link {
	display: inline-flex;
	float: right;
	height: 16px;
	padding: 16px 15px;
	width: 105px;
}

.footer .link a {
	color: #b8b8b8;
	height: 14px;
	opacity: .5;
	user-select: none;
	z-index: 10;
}

.footer .link a:hover ~ .link-bg-blur {
	opacity: .2;
	transition: opacity .15s ease-out;
}

.footer .link a:active {
	opacity: .3;
}

.footer .link .link-bg-blur {
	background-color: #fff;
	border-radius: 100%;
	filter: blur(9px);
	height: 28px;
	margin-top: -2px;
	opacity: 0;
	position: absolute;
	transition: opacity .15s ease-out;
	width: 95px;
}

.tooltip {
	background-color: #0f0f0f;
	border-radius: 2px;
	border: 1px solid #424242;
	color: #fff;
	opacity: 0;
	height: 14px;
	padding: 7px 10px;
	position: absolute;
	text-align: center;
	transition: opacity .2s linear;
	width: auto;
	z-index: 11;
}

.tooltip.active {
	opacity: 1;
	transition: opacity .2s linear;
}

.context-menu {
	background-color: #fff;
	border-radius: 5px;
	border: 1px solid #333;
	display: none;
	opacity: 0;
	height: auto;
	padding: 5px;
	position: absolute;
	width: 250px;
	z-index: 11;
	-moz-box-shadow: 5px 2px 10px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 5px 2px 10px rgba(0,0,0,0.5); 
	box-shadow: 5px 2px 10px rgba(0,0,0,0.5);
}

.context-menu.active {
	display: block;
	opacity: 1;
}

.context-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.context-menu ul li {
	background-color: inherit;
	display: block;
	margin: 0;
	padding: 0;
}

.context-menu ul li a {
	color: #333;
	display: block;
	font-family: sans-serif;
	font-size: 16px;
	height: 20px;
	padding: 5px;
	text-decoration: none;
}

.context-menu ul li a:hover {
	background-color: #eee;
}

#rr .station-img .cover { background-image: url('img/logos/rr.png'); background-position-x: -2px; }
#rr .station-name { background-position-y: 0px; }
#rr .play .play-button { background-image: url('img/play-controller/stopped-green.png'); }
#rr .play .play-button.playing { background-image: url('img/play-controller/playing-green.gif'); }
#rr .play .play-button.connecting { background-image: url('img/play-controller/connecting-green.gif'); }
#rr .play .play-button-bg { background-color: var(--color-green); }
#rr .volume .volume-click { background-position-y: -50px; }
#rr .volume .volume-rollover { background-position-y: -56px; }

#tm .station-img .cover { background-image: url('img/logos/tm.png'); background-position: -2px 3px; }
#tm .station-name { background-position-y: -16.1px; }
#tm .play .play-button { background-image: url('img/play-controller/stopped-cyan.png'); }
#tm .play .play-button.playing { background-image: url('img/play-controller/playing-cyan.gif'); }
#tm .play .play-button.connecting { background-image: url('img/play-controller/connecting-cyan.gif'); }
#tm .play .play-button-bg { background-color: var(--color-cyan); }
#tm .volume .volume-click { background-position-y: -25px; }
#tm .volume .volume-rollover { background-position-y: -28px; }

#ps .station-img .cover { background-image: url('img/logos/ps.png'); background-position: -2px 2px; }
#ps .station-name { background-position-y: -8.1px; }
#teo .station-img .cover { background-image: url('img/logos/teo.png'); background-position: -2px 1px; }
#teo .station-name { background-position-y: -24.1px; }
#ps .volume .volume-click, #teo .volume .volume-click { background-position-y: 0px; }
#ps .volume .volume-rollover, #teo .volume .volume-rollover { background-position-y: 0px; }