.audio{
  color: #909090;
  font-size: 12px;
  font-family: Myriad Pro, Verdana, Tahoma, Arial, Helvetica, sans-serif;
  margin: 30px 0;
}
.audio .audio__progress,
.audio .volume{
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  display: inline-block;
  height: 16px;
}
.audio .ui-slider-handle{
  display:none!important;
}
.audio .ui-slider{
  height: 100%!important;
  border: 0 none!important;
  background: none!important;
}
.audio .line,
.audio .ui-slider-range{
  background: #eaeaea!important;
  box-shadow: inset 0 2px 2px -1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  display: block;
  height: 6px!important;
  margin: 5px 8px;
}
.audio .line{
  position: relative;
  cursor: pointer;
  margin-left: 27px;
}
.audio .volume .line{
  margin-left: 32px;
}

.audio .line.text{
  background: none!important;
  border-radius: 0;
  color: #292929;
  box-shadow: none;
  margin-top: 2px;
  margin-bottom: 2px;
  height: 12px;
}
.audio .line.text .text{
  max-height: 12px;
  overflow: hidden;
  padding: 0 0 0 2px;
}
.audio .line.text .text span{
  display: block;
  line-height: 1;
  max-height: 12px;
  white-space: nowrap;
  float: left;
  /*width: 1000px;*/
}
.audio .ui-slider-range{
  background: #6a94de!important;
  position: absolute;
  margin: 0;
  z-index: 1;
}
.audio .audio__progress{
  float: left;
  width: 61.5%;
  margin-left: 8px;
}
.audio.radio .audio__progress{
  width: 74.5%;
}
.audio .audio__progress .ui-slider-range{
  border-radius: 0 5px 5px 0;
}
.audio .audio__progress .audio__icon i{
  cursor: pointer;
  display: block;
  width: 38px;
  height: 38px;
  position: absolute;
  left: -37px;
  top: -15px;
  z-index: 2;
  background: url("/static/img/audio_btns.df449003e7dd.png") no-repeat 0 0;
}
.audio .audio__progress .audio__icon .play{
  background-position: 0 0;
}
.audio .audio__progress .audio__icon .pause{
  background-position: 0 -38px;
}
.audio .audio__progress .audio__icon .play:hover{
  background-position: -38px 0;
}
.audio .audio__progress .audio__icon .pause:hover{
  background-position: -38px -38px;
}
.audio .audio__progress .audio__icon .play:active{
  background-position: -76px 0;
}
.audio .audio__progress .audio__icon .pause:active{
  background-position: -76px -38px;
}
.audio .timer{
  display: inline-block;
  float: left;
  line-height: 20px;
  height: 18px;
  margin-left: 10px;
}
.audio .timer ul,
.audio .timer li {
  margin: 0 !important;
}
.audio .timer ul{
  padding: 0 !important;
}
.audio .timer li{
  display: inline;
  padding: 0 0 0 3px !important;
}
.audio .timer li:first-child{
  border-right: 1px dotted;
  padding: 0 3px 0 0 !important;
}
.audio .volume{
  width: 19%;
  margin-left: 10px;
}
.audio .volume .audio__icon{
  float: left;
  margin: 4px 0 0 8px;
  width: 19px;
  height: 8px;
}
.audio .volume .audio__icon i{
  cursor: pointer;
  display: block;
  height: 9px;
  background: url("/static/img/audio_vol.e7df6052ecac.png");
}
.audio .volume .audio__icon .on{
  width: 12px;
  background-position: 0 0;
}
.audio .volume .audio__icon .off{
  width: 19px;
  background-position: 0 -9px;
}

@media (max-width: 1023px){
    .audio .timer, .audio .volume, .counters{
        display:none;
    }
}

@media (min-width: 1px) {
    .audio{margin-right: 12px;}
    .audio .audio__progress, .audio.radio .audio__progress{width: 98%;}
}

@media (min-width: 600px) {
    .audio{margin-right: 0;}
}

@media (min-width: 1024px) {
    .audio .audio__progress{width: 61.5%;}
    .audio.radio .audio__progress{width: 74.5%;}
}