.pp_container{
	position: relative; width:100%; height:70px!important;  border-radius:5px;   padding:0!important; margin: 0 auto; margin-top:7px;  
}
.pp_container h5{
	position: absolute; right:70px; top:15px;   z-index:2; font-family:Tajawal; font-size:13px; color:rgba(0,0,0,0.4);
}
#myAudio  .ppq-audio-player {
background-color: #43ac6a!important; border:#3c9a5f solid 1px!important;
background-image: url("https://www.transparenttextures.com/patterns/black-thread-light.png")!important;
}
#myAudio  .ppq-audio-player .player-bar {
  background-color: rgba(255,255,255,0.01)!important;  
}
#myAudio   .ppq-audio-player .player-bar .player-bar-loaded {
  background-color: #DBFFE0!important; 	
}
#myAudio .ppq-audio-player .player-bar .player-bar-played {
background-color: #38703F!important;	
}
#myAudio .ppq-audio-player .player-time {
color: rgba(255,255,255,0.5)!important;
}
#myAudio .ppq-audio-player .play-pause-btn .play-pause-icon {
background-color:  rgba(0,0,0,0.4)!important; border-color: rgba(255,255,255,0.9)!important;		
}
#myAudio .bb:before  ,#myAudio .aa:before{color: rgba(255,255,255,0.9)!important;}
.ppq-audio-player  {
  position: absolute!important; 
  top:0!important; right:0!important;  width:100%!important; height:70px!important; z-index:1;
   border:red solid 0px;
  background:white!important; margin:0!important; border-radius:5px;border:rgba(0,0,0,0.3) solid 1px;
}
.ppq-audio-player .play-pause-btn .play-pause-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.ppq-audio-player .play-pause-btn .play-pause-icon:after, .ppq-audio-player.player-playing .play-pause-icon:after {
 /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAASCAMAAADrP+ckAAABNVBMVEUAAAAAmIcAmYgAm4sAnIsAnIwAnI0AnY0AnY4Ano4Ano8An5AAoJEAoZEAoZIAopMBn5ABoJABoJEBoZEBoZIBoZMBopMCoZICopMCopQCo5QDoJEDoZEDo5QDo5UFopMGo5QKpJYLpJYMpZcMppgNpZcNppgNp5gOppcOppgOp5gOp5kQqJoSp5kSqJoTqZsbrJ4drJ8irZ8mrqEnsKMrsqUtsqYytKg0tak5t6tHvLJJvbNLvbNqycBrysFsycFwy8Jwy8N3zsZ+0MiA0cqD0suH1M2L1c6P1tCk3tmm39mv4t285+PE6ebH6ufN7erS7+zV7+3W8O3X8O7a8u/k9fPs+Pft+Pfx+fjx+fnx+vny+vr1+/v2+/v5/fz7/f38/f38/v38/v79/v7+/v7+//////+ALAV1AAAAAXRSTlMAQObYZgAAATxJREFUKM+F0tlWwjAQBuAgQgHTRFFrqaK4IALiiuKugPsKrqUo0DbO+z+CDYHIFZ279nznP3P+DHLh4+L8HWybAQM+qDdlUgGXMRcqpIwYnIwoG7ct6LjAfgdUKlZoAmPQLMRSCBrLZH4idPAEbqcb11eamm1w1ciqGgJrFVPNiMydfkLH8X5LhXMWV1YOc7WCKSGGHty6A9Z2ZRbFGaEymApFKaHJceXoFRxnmPKcZoQXL79huPLijKng/ouP4nFJZcdXUWJML/gpLyo6du2zPTUmQ3uPw7cnWiK8dPUDzn+rUvVaFXUdv4Fjy+51nBcqj3XxQl71o9v33eqlipO0yZWZJnEE5pqqJZTZsy/xjHKvYqBk82+7FCgiaO1GZqKHz/2TkKpWrYv7qldryIGH9c2bFrR75yXV4PwBrZh1OjRqx9oAAAAASUVORK5CYII=);*/
  background-size: 37px 18px;
}

.ppq-audio-player {
  line-height: 111px;
  position: relative;
  overflow: hidden;
  height: 111px;
  margin: 0 auto;
  background: #f4f4f4
}

.ppq-audio-player audio {
  position: absolute;
  vertical-align: baseline
}

.ppq-audio-player .play-pause-btn {
  float: right !important;
  margin: 12px   12px  0 10px!important;
}

.ppq-audio-player .play-pause-btn .play-pause-icon {
  position: relative;
  display: block;
  width: 47px;
  height: 47px;
  border: 3px solid #00a293;
  border-radius: 100%;
  background-color: #fff
}

.ppq-audio-player .play-pause-btn .play-pause-icon:after {
  display: block;
  content: "";
  background-position: 0 0;
  width: 17px;
  height: 18px
}

.ppq-audio-player.player-playing .play-pause-icon:after {
  background-position: -25px 0;
  width: 12px;
  height: 17px
}
.aa{  
  position: relative;
  display: block;
  width: 47px;
  height: 47px;
  border: 3px solid #00a293;
  border-radius: 100%;
  text-decoration: none;
} 

.bb{ 
  position: relative;
  display: block;
  width: 47px;
  height: 47px;
  border: 3px solid #00a293;
  border-radius: 100%;
  text-decoration: none;
}
.bb:before{ 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  content: "\f04b"; 
  color:#00a293; 
  position: relative; z-index:1;
  display: block;
  width: 47px;
  height: 47px; top:-35px; right:18px;
  }
.aa:before{ 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  content: "\f04c"; 
  color:#00a293; 
  position: relative; z-index:1;
  display: block;
  width: 47px;
  height: 47px; top:-35px; right:19px;
  }
.ppq-audio-player .player-time {
  float: left;
  width: 51px;
  margin-right: 8px; margin-top: -19px!important;
  text-align: right; color:#888 !important;
}

.ppq-audio-player .player-time-duration {
  float: right;
  margin: 0 0 0 8px;
  text-align: left;
  display:none!important;
}
.ppq-audio-player .player-bar {
  position: relative;
  overflow: hidden;
  height: 5px;
  margin-top:35px!important;
  background-color: #fff;
 direction:rtl!important;   
}

.ppq-audio-player .player-bar .player-bar-loaded {
  position: absolute;
  top: 0;
  right: 0!important;  
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: #ddd; width:100%!important; direction:rtl!important;  
}

.ppq-audio-player .player-bar .player-bar-played {
  position: absolute; 
  top: 0;
  right: 0!important;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: #00a293; direction:rtl!important;  
}
















figcaption {
	font: 600 1.6rem consolas;
	text-transform: uppercase;
	margin-top: 7px;
	text-align: center;
	text-shadow: 1px 1px #000;
}
.progressvC{ display:none;}
.successv {
	color: #00cc74;
}

 

@-webkit-keyframes f {
	0% {
		background-position: 40px 0;
	}

	to {
		background-position: 0 0;
	}
}

@keyframes f {
	0% {
		background-position: 40px 0;
	}

	to {
		background-position: 0 0;
	}
}

.progressv { position: absolute; z-index:2;
	overflow: hidden;
	margin-top: 0; opacity:0.2;
	height: 100%; width:100%;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-barv {
	height: 100%;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.progress-bar-stripedv,
.progress-stripedv .progress-barv {
	background-image: linear-gradient(
		45deg,
		hsla(0, 0%, 95%, 0.8) 25%,
		transparent 0,
		transparent 50%,
		hsla(0, 0%, 95%, 0.8) 0,
		hsla(0, 0%, 95%, 0.8) 75%,
		transparent 0,
		transparent
	);
	background-size: 40px 40px;
}

.progress-barv.activev,
.progress.activev .progress-barv {
	-webkit-animation: f 2s linear infinite;
	animation: f 2s linear infinite;
}

.progress-bar-successv {
	background-color: #00cc74;
}

.progress-stripedv .progress-bar-successv {
	background-image: linear-gradient(
		45deg,
		hsla(0, 0%, 100%, 0.15) 25%,
		transparent 0,
		transparent 50%,
		hsla(0, 0%, 100%, 0.15) 0,
		hsla(0, 0%, 100%, 0.15) 75%,
		transparent 0,
		transparent
	);
}