body {
background-color: #eee;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover; 
text-align: center;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
	
@keyframes station_now_animate {
0% {transform: rotate(0deg);}
40% {transform: rotate(5deg);}
80% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}

@keyframes station_now_enter {
0% {transform:rotate(60deg)scale(2);opacity:0;}
100% {transform:rotate(0deg)scale(1);opacity:1;}
}
	
.station_now {
top:-25px;	
position: absolute;
width: 200px;
filter: drop-shadow(0px 0px 5px #555);
animation-name: station_now_animate;
animation-duration: 14s;
animation-iteration-count: infinite;
opacity: 1;
z-index: 6;
}

.station_now_enter {
animation-name: station_now_enter, station_now;
animation-duration: 1s;
animation-iteration-count: 1;
}

.fb{
position: absolute;
top: 11px;
left: -82px;
width: 60;
filter: drop-shadow(0px 0px 4px #444);
transition: 0.5s;
cursor: pointer;
}
	
.fb:hover{transform: translateY(10px);}

.overlay {
visibility: hidden;
position: absolute;
width: 100%;
height: 0;
color : #fff;
opacity: 0;
z-index: 1;
background: #222;
transition: 0.8s;
}
	
.play {
top:140px;
left:-15px;
position: absolute;
width: 120px;
filter: drop-shadow(0px 0px 4px #777);
opacity: 0.8;
z-index: 20000;
transition: 0.3s;
}
	
.play:hover {
transform: scale(1.2);
cursor: pointer;
}
	
.pause {
top:140px;
left:90px;	
position: absolute;
width: 120px;
filter: drop-shadow(0px 0px 4px #777);
opacity: 0.8;
z-index: 20000;
transition: 0.3s;
}
	
.pause:hover {
transform: scale(1.2);	
cursor: pointer;
}

.voli {
-webkit-appearance: none;
width: 100px;
height: 5px;
background: #fff;
border-radius: 5px;
transition: 0.2s;
outline: none;
opacity: 0.7;
}
	
.voli::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 60px;
border-radius: 70px;
background: #fff;
cursor: pointer;
box-shadow: 0px 0px 20px black;
opacity: 0.6;
transition: 0.6s;
}
	
.voli::-webkit-slider-thumb:hover {
opacity: 1;
}

.voli:hover {
opacity: 1;
}

/* width */
::-webkit-scrollbar {
width: 4px;
height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 20px 0 115px #ddd; 
height:20px;
width: 40px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background:  #F3CA1F; 
border-radius: 0px;
width:280px;
height:120px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0a0; 
cursor:grab;
transform: scale(1.4);
}

.stations_container{		
width: 380px;	
overflow-y: scroll;
overflow-x: hidden;
text-align: left;
height:540px; 
padding-left:50px; 
margin-left:-50px; 
}

.station_block{
transition: 0.2s;
position: relative;
background: #fff;
border-color: #ddd;  
border-width: 1px;
border-style: solid;
border-radius: 5px;
margin:5px;
padding:10px;
width:300px;
height:50px;
transform: translateX(0px);
overflow: hidden;
}
	
.station_block_new{
transition: 0.4s;
position: relative;
background-color:rgba(255,255,255,1);
border-color: #FFB600;  
border-width: 3px;
border-style: solid;
border-radius: 8px;
left:-3px; 
margin:5px;
padding:10px;
margin-bottom:10px;
width:300px;
height:55px;
overflow: hidden;
}

.station_block_new:hover{
transform: scale(1.1);
cursor:pointer;
filter:drop-shadow(0px 0px 15px #333); 
/*background-color: #D0E8ED; */
}	

.station_block:hover{
cursor:pointer;
background-color: #D3E3E3; 
border-color:limegreen;
/*filter:drop-shadow(0px 0px 10px #000);
transform: scale(1.16);
z-index:200;
border-radius:50px;
*/
}

.favorite {filter:contrast(0)}

.check_add{
background: #001D45 ;
height: 5px;
}

.exists_yes	{
visibility:visible;
}	
.exists_no	{
visibility:hidden;
}

.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}