/*Player*/
div.jp-audio,
div.jp-audio-stream{color: #fff; background-color:#aeaeae; overflow:auto; height:50px;}

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:50px;}

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

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

div.jp-audio ul.jp-controls,
div.jp-audio-stream ul.jp-controls {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:50px; position:absolute; left:0; top:0px; z-index: 20;}
ul.jp-controls .buttons a{ width:50px; height:50px; color:#fff; float:left; background:#61adcc; text-align:center; border-right:1px solid #fff}
ul.jp-controls .buttons a:hover{opacity:0.8;}
a.jp-play .play-icon { display:inline-block; width: 0; height: 0; border-top: 10px solid transparent; border-left: 20px solid #ffffff; border-bottom: 10px solid transparent; position:relative; top:50%;}
a.jp-pause .pause-icon { display:inline-block; width: 5px; height: 20px; background:#ffffff;  position:relative; top:50%; left:-5px;}
a.jp-pause .pause-icon::after{content:""; display:block; width: 5px; height: 20px; background:#ffffff; margin-left:9px;}
a.jp-play span, a.jp-pause span{-webkit-transform:translate(0px, -50%); transform:translate(0px, -50%);}
/* @end */

/* @group progress bar */
ul.jp-controls .bar{height: 50px; padding-left: 50px; width: 100%; position: relative;}
div.jp-audio div.jp-progress {height:50px; overflow:hidden; background-color: #686868;}
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:#aeaeae; width:0px; height:100%; cursor: pointer;}
div.jp-play-bar { background:#011d4d; 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%; padding:0 10px 0 60px; position:absolute; z-index:10; top:50%; left:0; -webkit-transform:translate(0px, -50%); transform:translate(0px, -50%);}

div.jp-current-time,
div.jp-duration { width: 40px; font-size:12px; font-style:oblique; color:#ffffff; position:absolute; z-index:10; top:50%; -webkit-transform:translate(0px, -50%); transform:translate(0px, -50%);}
div.jp-current-time {display:inline; text-align:left; left:60px;}
div.jp-duration {display:inline; text-align: right; right:10px;}

/* @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 */