@charset "utf-8";
/* CSS Document */
.playerBox{
	width: 100%;
	display: inline-block;
	vertical-align: top;
	/*background-color:#d8f0c2;*/
	margin: 1em auto 0;
	padding:1em ;
	border-radius:50px;
	border: #393939 3px solid;
	position: relative;
	overflow: hidden;
	border-left-width: 5px;
	border-right-width: 5px;
}
.playerBox:has(.selected){
	border: var(--green) 3px solid;
	border-left-width: 5px;
	border-right-width: 5px;
}
.soundTitle{
	/*background-color: var(--baseBg);*/
	/*margin-bottom: 0.5em;*/
	padding: 0.5em 0.5em;
	border-radius: 50px;
	position: relative;
	z-index: 2;
	text-align: left;
}
.playerBox .btArea{
	width: 3em;
	height: 3em;
	display: inline-block;
	vertical-align:middle;
	
}
.playerBox .btArea .playBT{
	width: 100%;
	height: 3em;
	display: block;
	border: var(--red) 2px solid;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	z-index: 2;
	background-color: var(--red);
	/*background-color: var(--baseBg);*/
}

.playerBox .btArea .playBT:hover{
	opacity: 0.6;
}
.playerBox .btArea .playBT span:after{
	content: "▲";
	display: block;
	position: absolute;
	transform: rotate(90deg);
	width: 100%;
	text-align: center;
	top:50%;
	margin-top: -0.5em;
	line-height: 1em;
}
.playerBox .btArea .playBT.selected{
		border: var(--green) 2px solid;
	background-color: #000;

}
.playerBox .btArea .playBT.selected span:after{
	content: "■";
	transform: rotate(0);
}

.barArea{
	width: calc(100% - 3.5em);
	height: 3em;
	display: inline-block;
	vertical-align:middle;
	padding:0;
	margin-left: 0.5em;
}

.jp-progress{overflow:hidden;background-color:#222;left:0;width:100%;/*top:0.5em;*/ height: 5px; border-radius: 50px; position: absolute; bottom: 0;}
/*.jp-progress{overflow:hidden;height:auto;left:0;width:100%; position: absolute;top:0;bottom: 0;}*/
.jp-seek-bar{width:0;height:100%;cursor:pointer;}
.jp-play-bar{width:0;height:100%; background: none;background-color: var(--green);}

.jp-audio .jp-time-holder{position:absolute;right:0;width:5em; top:50%;margin-top: -0.7em; text-align: right;}
.jp-current-time,.jp-duration{width:3.5em;font-size:.64em;font-style:oblique}
.jp-current-time{float:left;display:inline;cursor:default; text-align: center;}
.jp-duration{float:left;display:inline;text-align:center;cursor:pointer}
.jp-duration:before{ content: "/";margin-right: 0.5em;}