/* Estilo básico para o player */
.jp-audio {
		position:relative;
	  width: 100%; 
	  margin-top: 10px;
	  padding: 1.5em 2.5em;
	  border-radius: 0.5em;
	  background: rgb(143,227,136);
	  background: linear-gradient(180deg, rgba(143,227,136,1) 0%, rgba(88,188,130,1) 100%);
box-shadow: 0 0 35px 0px rgba(22,12,96,0.09);
	  color: #fff;
	  min-height: 300px;
}
.jp-controls {
	  border-top: 2px solid #fff;
	  display: flex;
	  justify-content: left;
	  width: 100%; 
	  padding:1em 0;
}

.audio-header{
	min-height:200px;
}

.audio-top-header{
	position:relative;
}

.audio-button{
	border: 0.3em solid #fff;
	border-radius: 100%;
	padding: 0.3em 0.6em;
	width: 84px;
	height: 84px;
}

.audio-options{
	position:absolute;
	bottom:1.5em;
	right:2.1em;
}

.audio-options label{
	display:inline;
	margin:0 0.3em;
	cursor:pointer;
}

.jp-play, .jp-pause {
	cursor: pointer;
	font-size:2.7em;
}
.jp-pause {
	display: none;
}

/* Barra de progresso personalizada usando div */
.jp-progress {
	margin: 10px auto;
	width: 100%;
	height: 8px;
	background: #fff;
	border-radius: 5px;
	position: relative;
	cursor: pointer;
}

@media (max-width: 480px) {

	.jp-progress {
		width: 50%;
	}

}

.jp-progress-filled {
	height: 100%;
	background-color: #801a86;
	border-radius: 5px;
	width: 0%;
}

.jp-progress-handle {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 16px;
	width: 16px;
	background-color: #801a86;
	border-radius: 50%;
	cursor: pointer;
	left: 0;
}

/* Cronômetro */
.jp-timer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	font-size: 16px;
}

/* Cronômetro */
.jp-timer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	font-size: 16px;
}