/*Player*/
.player_wrap{border-radius: 2px; margin-bottom: 1em; padding: 10px;}

div.jp-audio,
div.jp-audio-stream{color: #fff; overflow:hidden; height:30px;}

div.jp-audio,
div.jp-audio-stream {width:100%;}

div.jp-interface {position: relative; width:100%;}

div.jp-audio div.jp-type-single div.jp-interface,
div.jp-audio div.jp-type-playlist div.jp-interface,
div.jp-audio-stream div.jp-type-single div.jp-interface {height:30px;}

/* @group CONTROLS */
div.jp-controls-holder {clear: both; position: relative; overflow:hidden;}

div.jp-interface ul.jp-controls {list-style-type:none; margin:0 0 10px 0; padding: 0; overflow:hidden;}

div.jp-audio ul.jp-controls,
div.jp-audio-stream ul.jp-controls {float: left; padding-right: 150px; width: 100%;}

div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {display:inline;	float: left;}

div.jp-interface ul.jp-controls a {	display:block;	overflow:hidden; text-decoration:none;}

ul.jp-controls .buttons{width:24px; position:absolute; left:0; top:0px; z-index: 20;}
ul.jp-controls .buttons a{ width:24px; height:24px; color:#fff; float:left; text-align:center; border-radius:2px; line-height: 1;}
ul.jp-controls .buttons a:hover{}
a.jp-play .play-icon { display:inline-block; width: 0; height: 0; border-top: 8px solid transparent; border-left: 16px solid #ffffff; border-bottom: 8px solid transparent; position:relative; top:4px;}
/*a.jp-play:hover .play-icon{border-left-color:#61adcc;}*/
a.jp-pause .pause-icon { display:inline-block; width: 5px; height: 14px; background:#ffffff;  position:relative; top:4px; left:-5px;}
a.jp-pause .pause-icon::after{content:""; display:block; width: 5px; height: 14px; background:#ffffff; margin-left:8px;}
/*a.jp-pause:hover .pause-icon, a.jp-pause:hover .pause-icon::after{background:#61adcc;}*/
/* @end */

/* @group Rewind-Fast Forward */
.jp-rw-ff-controls{height: 24px; left: 34px; position: absolute; top: 0; width: 58px; text-align: center;}
.jp-rw-ff-controls a{height: 24px; width: 24px; z-index: 10; cursor:pointer; display:inline-block; float:left; border-radius:2px;}
.jp-rw-ff-controls a:first-of-type{margin-right:10px;}
.jp-rw-ff-controls a img{display:block; width:20px; height:20px; margin: 0 auto; position:relative; top:2px;}
.jp-rw-ff-controls a:hover{}

/* @end */

/* @group volume */
.jp-volume-controls{position: absolute; right: 0; top: 0; width: 140px;}
.jp-volume-controls > a{height: 20px; position: absolute; top: 0; width: 20px; z-index: 10; cursor:pointer; display:block;}
.jp-volume-controls > a img{display:block; width:16px; height:20px; margin: 0 auto;}
.jp-mute{left:0;}
.jp-volume-max{right:0;}
.jp-volume-bar-wrap{width:100%; padding:4px 23px 0 20px; height: 20px;}
.jp-volume-bar{background:#999999; width:100%; height:12px; margin: 0 auto; border-radius: 6px; overflow:hidden;}
.jp-volume-bar-value{height: 12px; position:relative;}
/* @end */

/* @group progress bar */
ul.jp-controls .bar{height: 30px; padding-left: 100px; width: 100%; position: relative; padding-top: 4px;}
div.jp-audio div.jp-progress {height:12px; overflow:hidden; background-color: #666666; border-radius: 6px;}
div.jp-audio div.jp-type-single div.jp-progress {width:100%;}
div.jp-video div.jp-progress { top:0px; left:0px; width:100%; height:10px;}

div.jp-seek-bar { background:#999999; width:0px; height:100%; cursor: pointer;}
div.jp-play-bar { width:0px; height:100%;}

/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {background: url("seeking.gif");}
/* @end */

/* @group current time and duration */
div.jp-audio div.jp-time-holder {width:100%; z-index:10; position:absolute;}

div.jp-current-time,
div.jp-duration { width: 50px; font-size:11px; font-style:oblique; color:#ffffff; position:absolute; z-index:10; bottom:0; line-height:1;}
div.jp-current-time {display:inline; text-align:left; left:100px;}
div.jp-duration {display:inline; text-align: right; right:2px;}

/* @end */
/* @group NO SOLUTION error feedback */
.jp-no-solution {padding:20px; font-size:1em; background-color:#eee; display:none; margin-bottom:20px;}
.jp-no-solution a {color:#991c1c;}
.jp-no-solution span {font-size:1em; display:block; text-align:center; font-weight:bold;}
/* @end */

@media (max-width: 39em) {
.jp-volume-controls{display:none;}
div.jp-audio ul.jp-controls,
div.jp-audio-stream ul.jp-controls{padding-right:0;}
}
@media (max-width: 29em) {
div.jp-audio,
div.jp-audio-stream{height:64px;}
.jp-rw-ff-controls{width:100%; position:relative;float:left; left:auto; top:auto;}
.jp-rw-ff-controls a{float:none;}
ul.jp-controls .bar{padding-left: 34px;}
div.jp-current-time{left:34px;}
}