@import url(../../node_modules/jquery-ui-slider/jquery-ui.structure.min.css);
.icon-sprite, .icon-commonplay-min, .playoverlay-min, .icon-commonplay, .playoverlay, .icon-gear, .bitratebar:after, .icon-pause, .playpause.pause, .icon-play, .playpause.play, .icon-screen-mute, .icon-tv, .fullscreenbar, .icon-volume, .icon-volume0, .volumebar .volume-icon.volume0, .icon-volume1, .volumebar .volume-icon.volume1, .icon-volume2, .volumebar .volume-icon.volume2, .icon-volume3, .volumebar .volume-icon.volume3, .playpause, .volumebar .volume-icon {
  background-image: url('../img/../img/icon.png');
  background-repeat: no-repeat; }

.icon-commonplay-min, .playoverlay-min {
  background-position: 0 0; }

.icon-commonplay, .playoverlay {
  background-position: -25px 0; }

.icon-gear, .bitratebar:after {
  background-position: -88px -84px; }

.icon-pause, .playpause.pause {
  background-position: 0 -84px; }

.icon-play, .playpause.play {
  background-position: -12px -84px; }

.icon-screen-mute {
  background-position: 0 -100px; }

.icon-tv, .fullscreenbar {
  background-position: -24px -84px; }

.icon-volume {
  background-position: -40px -84px; }

.icon-volume0, .volumebar .volume-icon.volume0 {
  background-position: -64px -84px; }

.icon-volume1, .volumebar .volume-icon.volume1 {
  background-position: -106px -84px; }

.icon-volume2, .volumebar .volume-icon.volume2 {
  background-position: -130px -84px; }

.icon-volume3, .volumebar .volume-icon.volume3 {
  background-position: -154px -84px; }

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; }

.playoverlay-wrap {
  z-index: 5;
  position: absolute;
  width: 92px;
  height: 84px;
  top: 50%;
  margin-top: -42px;
  left: 50%;
  margin-left: -46px; }

.playoverlay {
  cursor: pointer;
  width: 92px;
  height: 84px; }

.playoverlay-min {
  z-index: 50;
  cursor: pointer;
  position: absolute;
  width: 25px;
  height: 23px;
  top: 50%;
  margin-top: -11.5px;
  left: 50%;
  margin-left: -12.5px; }

.hide-iphone-playoverlay::-webkit-media-controls {
  display: none !important; }

.loadbar {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 6px 10px;
  margin-top: -60px;
  margin-left: -64px;
  height: 106px;
  width: 106px;
  z-index: 999; }
  .loadbar .loadspinner {
    height: 100%;
    background: url("../img/loadbar.svg") no-repeat center center; }

.playpause {
  cursor: pointer;
  border: none;
  width: 12px;
  height: 12px; }

.playpause-cell {
  width: 12px;
  height: 12px; }

.seekbar {
  position: relative;
  background: #777777;
  height: 4px; }
  .seekbar .seekbar-slider {
    width: 100%;
    height: 3px;
    border: 1px solid #000000;
    outline: 1px solid rgba(63, 63, 63, 0.5);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background: transparent;
    z-index: 2; }
    .seekbar .seekbar-slider .ui-slider-handle {
      cursor: pointer;
      top: -3px;
      height: 7px;
      margin-left: -3px;
      width: 6px;
      border: 1px solid black;
      -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2ZDZkNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk4OTg5OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d6d6d6), color-stop(100%, #989898));
      background: -moz-linear-gradient(top, #d6d6d6, #989898);
      background: -webkit-linear-gradient(top, #d6d6d6, #989898);
      background: linear-gradient(to bottom, #d6d6d6, #989898); }
      .seekbar .seekbar-slider .ui-slider-handle:focus {
        outline: none; }
    .seekbar .seekbar-slider .ui-slider-range {
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      background: #00ADFC; }
  .seekbar .livebar {
    display: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    border: 1px solid #000000;
    outline: 1px solid rgba(63, 63, 63, 0.5);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-image: url("../img/animated-overlay.gif");
    background-color: #00ADFC; }
    .seekbar .livebar:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #00ADFC;
      opacity: .50; }
  .seekbar .bufferbar {
    z-index: 1;
    width: 100%;
    height: 3px;
    border-radius: 0;
    border: 1px solid #000000;
    outline: 1px solid rgba(63, 63, 63, 0.5);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    top: 0;
    position: absolute;
    background: transparent; }

.volumebar {
  position: relative; }
  .volumebar .volume-icon {
    display: block;
    width: 24px;
    height: 15px; }
  .volumebar .volumebar-wrap {
    position: absolute;
    padding-bottom: 10px;
    bottom: 90%;
    left: 0; }
  .volumebar .volumebar-b {
    padding: 12px 7px 10px 7px;
    background: rgba(58, 43, 42, 0.6);
    border: 1px solid #584d4d;
    border-bottom: none;
    -moz-box-shadow: 0 0px 0 1px rgba(58, 43, 42, 0.6);
    -webkit-box-shadow: 0 0px 0 1px rgba(58, 43, 42, 0.6);
    box-shadow: 0 0px 0 1px rgba(58, 43, 42, 0.6);
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px;
    border-radius: 4px 4px 0 0; }
  .volumebar .volumebar-slider {
    height: 80px;
    width: 7px;
    border: 1px solid rgba(94, 82, 81, 0.9);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: transparent; }
    .volumebar .volumebar-slider .ui-slider-handle {
      cursor: pointer;
      margin-bottom: -6px;
      width: 7px;
      height: 7px;
      -moz-border-radius: 40px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      border: 3px solid #CCCCCC;
      left: -3px;
      background: #000000;
      -moz-box-shadow: 0 0 0px 1px black;
      -webkit-box-shadow: 0 0 0px 1px black;
      box-shadow: 0 0 0px 1px black; }
      .volumebar .volumebar-slider .ui-slider-handle:focus {
        outline: none; }
      .volumebar .volumebar-slider .ui-slider-handle:before {
        content: '';
        position: absolute;
        left: -10px;
        top: -10px;
        bottom: -10px;
        right: -10px; }
      .volumebar .volumebar-slider .ui-slider-handle:after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        -moz-border-radius: 40px;
        -webkit-border-radius: 40px;
        border-radius: 40px;
        background: #FFFFFF;
        top: 50%;
        margin-top: -0.5px;
        left: 50%;
        margin-left: -0.5px; }
    .volumebar .volumebar-slider .ui-slider-range {
      background: #00BCFC; }

.volumebar-cell {
  width: 24px;
  height: 15px;
  padding-left: 5px; }

.bitratebar {
  width: 18px;
  height: 16px;
  padding: 2px 6px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRiNGI0YiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNDA0MDQwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMzMjMyMzIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODI4MjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4b4b4b), color-stop(50%, #404040), color-stop(50%, #323232), color-stop(100%, #282828));
  background: -moz-linear-gradient(top, #4b4b4b 0%, #404040 50%, #323232 50%, #282828 100%);
  background: -webkit-linear-gradient(top, #4b4b4b 0%, #404040 50%, #323232 50%, #282828 100%);
  background: linear-gradient(to bottom, #4b4b4b 0%, #404040 50%, #323232 50%, #282828 100%);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  position: relative;
  border: 1px solid black; }
  .bitratebar:hover {
    border: 1px solid #969696; }
  .bitratebar:after {
    content: '';
    display: block;
    position: absolute;
    width: 18px;
    height: 16px;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -9px; }
  .bitratebar .bitlist {
    background: rgba(20, 20, 20, 0.95);
    bottom: 100%;
    left: -1em;
    position: absolute;
    margin-bottom: 7px;
    font-size: 12px;
    border: .1em solid #000;
    padding: 0; }
    .bitratebar .bitlist > li {
      cursor: pointer;
      list-style-type: none;
      border-bottom: .1em solid #686868;
      color: #686868;
      padding: .5em 1em;
      transition: background 300ms; }
      .bitratebar .bitlist > li.active, .bitratebar .bitlist > li:hover {
        color: #000;
        background: rgba(150, 150, 150, 0.95); }
      .bitratebar .bitlist > li:last-child {
        border-bottom: none; }

.bitratebar-cell {
  width: 18px;
  height: 16px;
  cursor: pointer; }

.timebar {
  font-size: 11px;
  color: #FFF; }
  .timebar .livetxt {
    display: none; }
    .timebar .livetxt .broadcast-txt {
      display: none; }

.timebar-cell {
  width: 80px;
  text-align: center; }

.fullscreenbar {
  cursor: pointer;
  border: none;
  width: 16px;
  height: 13px; }

.fullscreenbar-cell {
  width: 16px;
  height: 13px; }

.srplayer-wrapper {
  background: #000; }
  .srplayer-wrapper.musicbox {
    height: 40px !important; }
    .srplayer-wrapper.musicbox .srplayer {
      display: none !important;
      height: 0 !important;
      width: 0 !important; }
    .srplayer-wrapper.musicbox .srplayer-panel {
      position: relative;
      bottom: auto;
      height: 40px;
      background: black; }
    .srplayer-wrapper.musicbox .loadbar {
      height: auto;
      padding: 0;
      border: 0 none;
      background: transparent;
      margin-top: -8px;
      z-index: 999999; }
    .srplayer-wrapper.musicbox .table-panel {
      border-spacing: 0; }
  .srplayer-wrapper * {
    box-sizing: content-box; }
  .srplayer-wrapper .poster {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    position: absolute;
    background: #000 center center no-repeat;
    background-size: contain; }
    .srplayer-wrapper .poster.poster--stretch {
      background-size: cover;
      background-position-y: top; }

.srplayer-panel {
  width: 100%;
  height: 34px;
  background: rgba(0, 0, 0, 0.7);
  padding: 0 14px;
  border: 1px solid #313131;
  z-index: 9;
  font-family: Verdana, serif; }

.srplayer-panel {
  position: absolute;
  left: 0;
  bottom: 0; }
  .srplayer-panel.live .livebar, .srplayer-panel.live .livetxt {
    display: block; }
  .srplayer-panel.live .seekbar-slider, .srplayer-panel.live .bufferbar {
    display: none; }
  .srplayer-panel.live .timebar-cell {
    width: 54px; }
    .srplayer-panel.live .timebar-cell .current, .srplayer-panel.live .timebar-cell .separator, .srplayer-panel.live .timebar-cell .duration {
      display: none; }
  .srplayer-panel.live.fullscreen .timebar-cell {
    width: 106px; }
  .srplayer-panel.live.fullscreen .broadcast-txt {
    display: inline; }
  .srplayer-panel .playpause {
    margin-right: 14px; }
  .srplayer-panel .bitrate-b {
    margin: 0 4px; }
  .srplayer-panel .timebar {
    margin: 0 4px;
    white-space: nowrap; }
  .srplayer-panel .volume-b {
    margin: 0 6px; }
  .srplayer-panel .fullscreenbar {
    margin: 0 6px; }

.table-panel {
  border-collapse: separate;
  border-spacing: 2px;
  box-sizing: border-box; }

.screen-mute-button {
  position: absolute;
  cursor: pointer;
  top: 52px;
  left: 52px;
  width: 92px;
  height: 92px;
  background-image: url("../img/icon/screen-mute.png");
  background-size: cover;
  opacity: 0.65;
  transition: 150ms; }
  .screen-mute-button:hover {
    opacity: 1; }

@media (max-width: 430px) {
  .screen-mute-button {
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; } }