/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

 .audio-player {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: row;
	 -webkit-box-orient: horizontal;
	 -webkit-box-direction: normal;
	         flex-direction: row;
	 -ms-flex-wrap: wrap;
	     flex-wrap: wrap;
	 -webkit-box-align: center;
	     -ms-flex-align: center;
	         align-items: center;
	 background-color: #eaf7ef;
     padding: 6px 10px;
     border: solid 1px blue;
     border-radius: 7px;
	 position: relative;
	 
}

.playpause {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 0px;
          flex: 0 1 0;
}

.seek-bar {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

.time{
   -ms-flex: 1;
   -webkit-box-flex: 1;
           flex: 1;
   -webkit-box-ordinal-group: 4;
       -ms-flex-order: 3;
           order: 3;
   position: absolute;
   bottom: 4px;
   right: 10px;
}
.additional{
   -webkit-box-flex: 100%;
       -ms-flex: 100%;
           flex: 100%;
   -webkit-box-ordinal-group: 5;
       -ms-flex-order: 4;
           order: 4;
   position: absolute;
   top: 4px;
   right: 10px;
   direction:rtl;
}

.current, .duration, .additional {
	font-family: monospace;
	font-size: .9em;
    font-weight: bold;
}

 .audio-player .play {
	 display: block;
	 width: 60px;
	 height: 60px;
	 border: 0;
	 background-color: #0af;
	 color: white;
	 font-size: 30px;
	 border-radius: 100000px;
	 cursor: pointer;
	 outline: none;
	 text-align: center; 	 
}
.play-small{	
	 display: block;
	 width: 22px;
	 height: 22px;
	 border: 0;
	 background-color: #0af;
	 color: white;
	 font-size: 13px;
	 border-radius: 100000px;
	 cursor: pointer;
	 outline: none;
	 text-align: center; 	
	 margin:auto;	 
}
 .audio-player .seek-bar {
	 margin-left: 20px;
	 background-color: #bbcad6;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: row;
	 -webkit-box-align: center;
	     -ms-flex-align: center;
	         align-items: center;
	 cursor: pointer;
}
 .audio-player .seek-bar .fill {
	 height: 10px;
	 background-color: #0af;
	 border-radius: 100000px;
}
 .audio-player .seek-bar .handle {
	 width: 10px;
	 height: 10px;
	 background-color: #0af;
	 border-radius: 100000px;
	 margin-left: -5px;
	 -webkit-transform: scale(2);
	     -ms-transform: scale(2);
	         transform: scale(2);
	 -webkit-transition: all 0.1s;
	 -o-transition: all 0.1s;
	 transition: all 0.1s;
}
 .audio-player .seek-bar .handle:hover {
	 background-color: #3bf;
	 -webkit-transform: scale(3);
	     -ms-transform: scale(3);
	         transform: scale(3);
}
.audio-player .time .current ,  .audio-player .time .duration {
	 float: left;
}

/* @media screen and (max-width: 640px) {
	.play-small{	
		 display: block;
		 width: 37px;
		 height: 12px;
	}
} */
 
 
 .ion-ios-play, .ion-play  {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M133 440a35.37 35.37 0 0 1-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0 1 35.77.45l247.85 148.36a36 36 0 0 1 0 61l-247.89 148.4A35.5 35.5 0 0 1 133 440'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.ion-pause, .ion-ios-pause {
  display: inline-block;
  width: 1em;
  height: 1em;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16m144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}