/* 
	AUDIOFLIX 
	Design
*/

	body { background:#262626; color:#fff; font-family:Arial; }
	.play { background:#404040; width:800px; }
	.play .playing { padding:5px; border-bottom:1px solid #666; margin-bottom:10px; font-size:23px; }
	.play .player { padding:10px;  width:300px; float:left; margin-right:20px; border-radius:10px; background-size:cover !important; height:150px; }
	.play .playlist { text-align:left; float:left; padding:5px; width:400px; max-height:200px; overflow-y:auto; }
	.play .playlist.full { width:100%; }
	.play .playlist.full #loading { max-width:120px; display:none; }
	.play .playlist #loading { max-width:50px; display:none; }
	.play .playlist .song { text-align:left !important; background:#2F2F2F; padding:10px; border-bottom:1px solid #151515; background-size:cover !important; text-shadow: 2px 0px 1px rgba(0, 0, 0, 0.65); }
	.play .playlist .song:hover, .play .playlist .song.selected { background:#1E1E1E;}
	.play .playlist .song:hover { opacity:0.9; color:#CCCCCC; }
	.play .playlist a { color:#fff; text-decoration:none; }
	.play .playlist .song .close { float:right; color:12px; color:#999999; text-decoration:none; }
	.play .playlist .song .close:hover { color:#666666; }
	.play .playlist .song img { max-width:20px; }
	.play .playlist .song #id { color:#999999; font-size:15px; margin-right:10px; text-align:left; } 
	.play .playlist .add { background:#282828; padding:10px; border-bottom:1px solid #151515; }
	.play .playlist .add .plus { font-size:28px; padding:5px; text-align:center; vertical-align:middle; cursor:pointer; display:inline; }
	.play .playlist .add .plus:hover { color:#CCCCCC; }	
	.play .playlist .input_search { border:1px solid #000; background:#2D2D2D; color:#fff; padding:10px; font-family:Arial; font-size:14px; width:62%; }
	.play .playlist .input_search.amount { text-align:center; display:inline; width:15%; }
	.jp-audio {  background:#212121;  }
	.jp-audio, .jp-interface { width:800px; padding:5px; font-family:Arial, Helvetica, sans-serif; }
	.jp-interface .jp-controls { float:left; width:30px; margin-left:10px; }
	.jp-audio, .jp-audio:focus  { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline-style:none; }
	.jp-interface .jp-progress { float:left; width:50%; margin-left:20px; margin-top:8px; }
	.jp-interface .jp-progress .jp-seek-bar { height:8px; border-radius:5px; background:#000; position:relative; }
	.jp-interface .jp-progress .jp-seek-bar .jp-play-bar { position:absolute; z-index:2; width:0px; height:100%; background:#FF6600; border-radius:5px; }
	.jp-interface .jp-progress .jp-seek-bar .jp-progress-bar { width:0px; height:100%; position:absolute; overflow:hidden; border-radius:5px; background:#545454; }
	.jp-interface .jp-progress .jp-ball { position: absolute; z-index: 999; border-radius: 30px; top: -1px;
    width: 1em; height: 1em; margin: -0.2em 0px 0px -0.5em; width: 14px; height: 14px; width: 0.9333em; height: 0.9333em; margin: -0.175em 0px 0px -0.466em; background-color: #fff; padding: 0px; -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; }
	.jp-interface .jp-progress:hover .jp-ball { background:#E35B02; }
	.jp-interface .jp-time-holder { float:left; width:100px; margin-left:10px; font-size:12px; margin-top:5px; }
	.jp-interface .jp-time-holder .jp-current-time, .jp-interface .jp-time-holder .jp-duration { display:inline; font-size:13px; }
	.jp-interface .jp-time-holder .jp-current-time { color:#fff; }
	.jp-interface .jp-time-holder .jp-duration::before { content:'/ '; }
	.jp-interface .jp-time-holder .jp-duration { color:#929292; }
	.jp-interface button { display: block; overflow: hidden; text-indent: -9999px; border: none; cursor: pointer; }
	.jp-audio .jp-controls .jp-play { background: url("blue.monday/image/skin.png") 0 0 no-repeat; width:25px; height:30px; margin-top:-2px; }
	.jp-audio .jp-controls .jp-play:hover { background-position:0 -29px; }
	
	.jp-audio.jp-state-playing .jp-controls .jp-play { background: url("blue.monday/image/skin.png") -25px 0 no-repeat; width:25px; height:30px; margin-top:-2px; }
	.jp-audio.jp-state-playing .jp-controls .jp-play:hover { background-position:-25px -29px; }
	.jp-interface .jp-volume-controls { float:left; width:100px;  }
	.jp-interface .jp-volume-controls .jp-volume-bar { height:5px; border-radius:5px; background:#000; position:relative; left:40px; top:10px; }
	.jp-interface .jp-volume-controls .jp-volume-bar .jp-volume-bar-value { position:absolute; z-index:2; width:0px; height:100%; background:#fff; border-radius:5px; }
	.jp-interface .jp-volume-controls .jp-volume-bar .jp-ball { position: absolute; z-index: 999; border-radius: 30px; top: -1px;
    width: 1em; height: 1em; margin: -0.2em 0px 0px -0.5em; width: 14px; height: 14px; width: 0.9333em; height: 0.9333em; margin: -0.175em 0px 0px -0.466em; background-color: #fff; padding: 0px; -webkit-transition: -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out; }
	.jp-interface .jp-volume-controls .jp-volume-bar:hover .jp-ball, .jp-interface .jp-volume-controls .jp-volume-bar .jp-ball:focus { background:#E35B02; }
	.jp-interface .jp-volume-controls .jp-mute { float:left; background: url("blue.monday/image/skin_volume.png") 0px 0 no-repeat; width:22px; height:15.7px; margin-top:5px; }
	.jp-interface .jp-volume-controls .jp-mute:hover { background-position: 0px -18.2px; }
	.jp-audio.jp-state-muted .jp-volume-controls .jp-mute { background: url("blue.monday/image/skin_volume.png") -26.1px 0px no-repeat; }
	.jp-audio.jp-state-muted .jp-volume-controls .jp-mute:hover { background: url("blue.monday/image/skin_volume.png") -26.1px -18.2px no-repeat; }