body{
  font-family: Arial,sans-serif;
}
a:active,a:focus{
  outline:0 !important;
  border:none !important;
}
#air-player{
  width: 540px;
  height: 300px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.22);
  background: url(../images/bg.jpg) no-repeat;
  background-size: 100%;
  background-position: top left;
  transition: width 500ms ease;
  -moz-transition: width 500ms ease;
  -ms-transition: width 500ms ease;
  -o-transition: width 500ms ease;
  -webkit-transition: width 500ms ease;
}
.playlist{
  max-height: 300px;
  float: right;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 0 !important;
  overflow-y: scroll;
}
.playlist::-webkit-scrollbar{
    width:10px;
}
.playlist::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,0.7);
}
.playlist>ul{
  list-style:outside none none;
}
.playlist>ul>li{
  padding: 0.5em;
}
.playlist>ul>li>a{
  text-decoration: none;
  color: #ffffff;
}
.player-container{
  height: 260px;
  position: absolute;
}
.channel-title{
  color:#fff;
  margin-top: 0.8em;
  padding: 0em 0.7em;
}
.channel-status{
  color: #ffe987;
  margin-top: 0.6em;
  padding: 0em 0.7em;
}
.player-controller{
  padding: 1em;
  margin-top: 7.8em;
}
.player-controller>div{
  float: left;
}
#volume-bar{
  width: 8em;
  padding: 0.6em 0.5em;;
}
.volume-bar{
    float: left;
    margin-top:0.5em;
    width: 6em;
}
.animation-bar{
  position: absolute;
  transform: rotate(180deg);
  margin-top: 5em;
  bottom: 3.5em;
  right: -3em;
  z-index: 100;
}

/*.playing {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  transform: translateX(-50%) translateY(-50%);
}*/
/*.playing:after {
  content: "Now Playing.";
  display: block;
  width: 100%;
  margin-top: 10px;
}*/
.now.playing .bar {
  display: inline-block;
  float: left;
  margin-right: 1px;
  width: 5px;
  height: 0px;
  /*overflow: hidden;*/
  background: -webkit-linear-gradient(rgb(226, 234, 242), rgb(14, 120, 216));
  background: linear-gradient(rgb(226, 234, 242),rgb(14, 120, 216));
  color: transparent;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.paused.playing .bar {
  animation-iteration-count: 0;
}
.n1 {
  animation-delay: 0.5s;
}
.n2 {
  animation-delay: 0.2s;
}
.n3 {
  animation-delay: 1.2s;
}
.n4 {
  animation-delay: 0.9s;
}
.n5 {
  animation-delay: 2.3s;
}
.n6 {
  animation-delay: 1.3s;
}
.n7 {
  animation-delay: 3.1s;
}
.n8 {
  animation-delay: 1.9s;
}
@-webkit-keyframes pulse {
  0% {
    height: 1px;
  }
  10% {
    height: 30px;
  }
  50% {
    height: 15px;
  }
  60% {
    height: 22px;
    /*margin-top: -30px;*/
  }
  80% {
    height: 45px;
  }
  100% {
    height: 1px;
  }
}
input[type=range] {
  -webkit-appearance: none;
  margin:0;
  padding: 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #00BFFF, 0px 0px 1px #00BFFF;*/
  background: #ffffff;
  border-radius: 1.3px;
  /*border: 0.1px solid #010101;*/
}
input[type=range]::-webkit-slider-thumb {
  /*box-shadow: 1px 1px 1px #e7e7e7, 0px 0px 1px #e7e7e7;*/
  /*border: 1px solid #000000;*/
  height: 21px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]:active::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #00BFFF, 0px 0px 1px #00BFFF;*/
  background: #ffffff;
  border-radius: 1.3px;
  /*border: 0.2px solid #010101;*/
}
input[type=range]active::-moz-range-track {
  background: #ffffff;
}
input[type=range]focus::-moz-range-track {
  background: #ffffff;
}
input[type=range]::-moz-range-thumb {
  /*box-shadow: 1px 1px 1px #e7e7e7, 0px 0px 1px #e7e7e7;*/
  /*border: 1px solid #000000;*/
  height: 21px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 50%;
  height: 4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ffffff;
  /*border: 0.2px solid #010101;*/
  border-radius: 2.6px;
  /*box-shadow: 1px 1px 1px #00BFFF, 0px 0px 1px #00BFFF;*/
}
input[type=range]::-ms-fill-upper {
  background: #ffffff;
  /*border: 0.2px solid #010101;*/
  border-radius: 2.6px;
  /*box-shadow: 1px 1px 1px #00BFFF, 0px 0px 1px #00BFFF;*/
}
input[type=range]::-ms-thumb {
  /*box-shadow: 1px 1px 1px #e7e7e7, 0px 0px 1px #e7e7e7;*/
  /*border: 1px solid #000000;*/
  height: 21px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #e7e7e7;
}
input[type=range]:focus::-ms-fill-upper {
  background: #e7e7e7;
}
input[type=range]active::-ms-fill-lower {
  background: #e7e7e7;
}
input[type=range]active::-ms-fill-upper{
  background: #e7e7e7;
}