/* Good guide:
	https://www.cssigniter.com/css-style-guide-for-the-default-wordpress-media-player/
 */

.soundShareMainContainer h1,
.soundShareMainContainer p,
.soundshare_abschnitt_text {
	text-shadow: 0 0 5px rgba(0,0,0,0.8);
}

.soundshare_abschnitt_text a,
.soundshare_abschnitt_text a:hover,
.soundshare_abschnitt_text a:active {
	color: #103579;
	font-weight: bold;
	text-decoration: underline;
	text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.floaudiocontainer,
.soundShareTitelIntroContainer {
	padding: 15px; 
	background-color: rgba(255,255,255,0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	margin: 1.5em 0;

}
.mejs-container {
	background: rgba(0,0,0,0.5);
	background: none;
	
/* padding: 10px; */
border-radius: 10px;

}

.mejs-container .mejs-controls {

	background-color: rgba(255,255,255,0.0);
	background: none;
/* 	padding: 10px; */
/* 	border-radius: 10px; */
	bottom: auto;


}

.mejs-controls .mejs-pause button {background-position: -20px 0px;}
.mejs-controls .mejs-mute button { background-position: -60px 0px; }
.mejs-controls .mejs-unmute button { background-position: -40px 0px;}

.floaudiocontainer .mejs-controls .mejs-time-rail .mejs-time-current {
	transition: width 0.25s linear;
	border-radius: 5px;
}

.floaudiocontainer .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.floaudiocontainer .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, 
.floaudiocontainer .mejs-controls .mejs-time-rail .mejs-time-total {
	border-radius: 5px;
}

.mejs-controls .mejs-button > button {
  background-image: url(img/mejs-controls-dark.svg);
}

.mejs-container .mejs-controls div {
	width: 30px;
	height: 30px;
}
.mejs-controls .mejs-button button {
	margin: 5px 5px;
	height: 20px;
	width: 20px;
}

.mejs-container .mejs-controls .mejs-time {
/* 	color: gray; */
	color: rgb(50,50,50);
	text-shadow: none;
	font-size: 12px;
}

/* Progress and audio bar background */
.floaudiocontainer .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.floaudiocontainer .mejs-controls .mejs-time-rail .mejs-time-total {
/*   background-color: #fff; */
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.floaudiocontainer .mejs-controls .mejs-time-rail .mejs-time-loaded {
/*   background-color: rgba(219, 78, 136, 0.075); */
	background-color: rgba(255,255,255,0.6);
	border-radius: 5px;
}

/* Current track progress and active audio volume level bar */
.floaudiocontainer .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.floaudiocontainer .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #103579;
}

/* Reduce height of the progress and audio bars */
.floaudiocontainer .mejs-time-buffering,
.floaudiocontainer .mejs-time-current,
.floaudiocontainer .mejs-time-float,
.floaudiocontainer .mejs-time-float-corner,
.floaudiocontainer .mejs-time-float-current,
.floaudiocontainer .mejs-time-hovered,
.floaudiocontainer .mejs-time-loaded,
.floaudiocontainer .mejs-time-marker,
.floaudiocontainer .mejs-time-total,
.floaudiocontainer .mejs-horizontal-volume-total,
.floaudiocontainer .mejs-time-handle-content {
  height: 3px;
}

.floaudiocontainer .mejs-time-handle-content {
  top: -6px;
}

.floaudiocontainer .mejs-time-total {
  margin-top: 8px;
}

.floaudiocontainer .mejs-horizontal-volume-total {
  top: 19px;
}

.floaudiocontainer .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .floaudiocontainer .mejs-controls .mejs-time-rail .mejs-time-total:focus {
	outline: none;
}

.mejs-controls .mejs-time-rail .mejs-time-float {
	border: none;
	border-radius: 5px;
	padding: 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
	text-shadow: none;
	border: none;
	border-radius: 5px;
	padding: 2px;
}