.jp-audio *:focus, .jp-audio-stream *:focus, .jp-audio button::-moz-focus-inner, .jp-audio-stream button::-moz-focus-inner { outline: none; }
.jp-audio { width: 100%; height: 84px; float: left; background-color: #1d1d1d; margin: 0; padding: 0; position: fixed; left: 0; bottom: -84px; z-index: 1; transition: all 0.5s ease; display: none; }
.jp-interface { width: 100%; float: left; position: relative; background-color: #1d1d1d; padding: 15px 30px; }
.jp-interface .jp-controls { margin: 0; padding: 0; overflow: hidden; }
.jp-controls { float: left; text-align: center; margin-right: 30px; }
.jp-controls button { display: block; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; }
.jp-play,.jp-pause { width: 52px; height: 52px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 100%; border-right: 0; border:0; margin: 0; padding: 0; }
.jp-play { background-image: url("../images/btn_play.png"); }
.jp-pause { background-image: url("../images/btn_pause.png"); }
.jp-progress { width: 45%; float: left; border-radius: 10px; position: relative; margin: 16px 60px; }
.jp-seek-bar { width: 0px; height: 10px; background-color: #8c8c8c; cursor: pointer; border-radius: 10px; margin: 6px 0; overflow: hidden; }
.jp-seeking-bg { background: url("../images/progress_play.gif"); border-radius: 10px; }
.jp-play-bar { width: 0px; height: 100%; background-color: #8bb702; border-radius: 10px; }

.jp-volume-controls { width: 130px; float: right; position: relative; margin: 18px 0; }
.jp-volume-controls button { width: 16px; height: 16px; display: block; position: absolute; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; padding: 0; margin: 0; }
.jp-mute { background: url("../images/speaker.png") center center no-repeat; background-size: 100%; }
.jp-state-muted .jp-mute { background: url("../images/mute.png") center center no-repeat; background-size: 100%; }
.jp-volume-bar { position: absolute; overflow: hidden; background-color: #8c8c8c; top: 5px; left: 22px; width: 100px; height: 7px; cursor: pointer; border-radius: 10px; }
.jp-volume-bar-value { width: 0px; height: 7px; background: #8bb702; }
.jp-current-time, .jp-duration { width: 45px; font-size: 15px; color: #94989f; position: absolute; top:0; }
.jp-current-time { display: inline; cursor: default; left: -45px; }
.jp-duration { display: inline; text-align: right; cursor: pointer; right: -45px; }

.jp-details { cursor: default; }
.jp-details, .jp-playlist { width: 25%; float: left; }
.jp-type-single .jp-details, .jp-type-playlist .jp-details { border-top: none; }
.jp-details .jp-title, .jp-details .jp-artist { font-size: 17px; color: #FFFFFF; line-height: normal; margin: 0; padding: 0; }
.jp-details .jp-artist { color: #94989f; }

.jp-player-toggle { width: 40px; height: 35px; display: block; background-color: #8bb702; border-radius: 3px 3px 0 0; position: absolute; right: 10%; top: -35px; text-align: center; line-height: 35px; color: #FFFFFF; }
.jp-player-toggle:hover { text-decoration: none; color: #FFFFFF; }
.jp-audio .flaticon-down-arrow { display: none; }
.jp-audio .flaticon-up-arrow { display: block; }
.jp-audio.show { bottom: 0; }
.jp-audio.show .flaticon-down-arrow { display: block; }
.jp-audio.show .flaticon-up-arrow { display: none; }

.jp-video-modal .modal-dialog { max-width: 800px; }
.jp-video-modal .modal-dialog .modal-content { background-color: #343434; }
.jp-video-modal .modal-dialog .modal-body { padding: 10px; }
.jp-video .jp-interface { padding: 0 0 10px; }
.jp-video .jp-details, .jp-video .jp-playlist { width: 65%; padding-top: 30px; }
.jp-video .jp-play,.jp-video .jp-pause { width: 40px; height: 40px; }
.jp-video-play { position: absolute; left: 50%; top: calc(50% - 50px); transform: translate(-50%, -50%); }
.jp-video .jp-progress { width: 100%; border-radius: 0; margin: 0; }
.jp-video .jp-seek-bar { height: 15px; border-radius: 0; margin: 0; }
.jp-video .jp-current-time, .jp-video .jp-duration { top:15px; }
.jp-video .jp-current-time { left: 10px; }
.jp-video .jp-duration { right: 10px; } 
.jp-video .jp-interface .jp-controls { padding: 35px 15px 0; }
.jp-video .jp-volume-controls { margin-top: 45px; }
.jp-video .jp-play-bar { border-radius: 0; }
.jp-video .jp-video-play-icon { background-color: transparent; border:0; border-radius: 0; }
.modal-open .modal-backdrop.show { opacity: 0.8; }
.jp-video .jp-full-screen { background-color: transparent; border: 0; border-radius: 0; position: absolute; right: 0; top: calc(100% - 150px); }
.jp-video-modal .btn-close { width: 32px; height: 32px; background-color: #8bb702; border:0; border-radius: 3px; color: #FFFFFF; font-size: 15px; position: absolute; right: 0; top: 0; z-index: 1; }
.jp-video .jp-jplayer video { float: left; }

@media only screen and (max-width: 1199px) {
  .jp-interface { padding: 15px; }
  .jp-audio .jp-controls { margin-right: 15px; }
  .jp-progress { width: 40%; }
}

@media only screen and (max-width: 992px) {
  .jp-details, .jp-playlist { width: 100%; margin-bottom: 10px; }
  .jp-audio .jp-controls { margin-right: 0; }
  .jp-progress { width: 55%; }

  .jp-audio { height: 145px; bottom: -145px; }
  .jp-player-toggle { right: 30px; }
}

@media only screen and (max-width: 767px) {
  .jp-audio .jp-controls { margin-right: 10px; }
  .jp-play { width: 30px; height: 30px; }
  .jp-progress { width: 55%; margin: 5px 45px; }
  .jp-volume-controls { width: 90px; margin: 8px 0 0; }
  .jp-volume-bar { width: 60px; }
}
@media only screen and (max-width: 480px) {
  .jp-interface { padding-bottom: 20px; }
  .jp-progress { width: 60%; margin: 5px 0; }
  .jp-current-time, .jp-duration { top: 15px; }
  .jp-current-time { left: 0; }
  .jp-duration { right: 0; }
  .jp-volume-controls { width: 80px; }
  .jp-video .jp-details, .jp-video .jp-playlist { width: 70%; padding: 25px 10px 0; margin: 0; }
  .jp-video .jp-volume-controls { margin-right: 10px; }
  .jp-video .jp-full-screen { top: calc(100% - 200px); }
  .jp-video .jp-interface .jp-controls { display: none; }
  .jp-details .jp-title, .jp-details .jp-artist { font-size: 15px }
}