.audio-player {
--player-button-width: 3em;
--sound-button-width: 2em;
--space: .5em;
width: 100%;
height: auto;
padding: 5px 0px 10px 0px;
}

.audioblock{
	background-color: rgba(175,175,175,0.2); 
	margin: 25px auto; 
	padding: 15px 15px 10px 15px; 
	max-width: 100%
}

.icon-container {
max-width: 100%;
max-height: 100%;
width: 40px;
height: 40px;
color: #fff;
margin: 0px 0px 0px 25px;
padding: 5px 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
}

.icon-container img{
width: 100%;
height: auto;
}

.audio-icon {
width: 90%;
height: 90%;
}

.controls {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}

.player-button {
background-color: transparent;
border: 0;
width: var(--player-button-width);
height: var(--player-button-width);
cursor: pointer;
padding: 0;
position: relative;
z-index: 1;
}

.timeline {
-webkit-appearance: none;
/*width: calc(100% - (var(--player-button-width) + var(--sound-button-width)));*/
width: 100%;
height: .5em;
background-color: #cdcccc;
border-radius: 5px;
background-size: 0% 100%;
background-image: linear-gradient(rgb(0,158,224),rgb(0,158,224));
background-repeat: no-repeat;
margin: 0px 0px;
}

.timeline::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all .1s;
background-color: rgb(0,158,224);
}

.timeline::-moz-range-thumb {
-webkit-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all .1s;
background-color: rgb(0,158,224);
}

.timeline::-ms-thumb {
-webkit-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transition: all .1s;
background-color: rgb(0,158,224);
}

.timeline::-webkit-slider-thumb:hover {
background-color: rgb(0,158,224);
}

.timeline:hover::-webkit-slider-thumb {
opacity: 1;
}

.timeline::-moz-range-thumb:hover {
background-color: #943f65;
}

.timeline:hover::-moz-range-thumb {
opacity: 1;
}

.timeline::-ms-thumb:hover {
background-color: #943f65;
}

.timeline:hover::-ms-thumb {
opacity: 1;
}

.timeline::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}

.timeline::-moz-range-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}

.timeline::-ms-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}

.sound-button {
background-color: transparent;
border: 0;
width: var(--sound-button-width);
height: var(--sound-button-width);
cursor: pointer;
padding: 0;
}

.audio-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px 15px 5px 5px;
border-radius: 5em;
background-color: rgba(175,175,175,0.2);
margin: 0px 0px 0px 0px;
}

.audioblock h5{
font-size: 1.3rem;
color: #009ee0;
font-weight: 600;
padding: 0px 0px 0px 0px;
margin: 0px 0px 10px 0px;
}

.audioblock p{
font-size: 0.85rem;
color: #444444;
padding: 0px 0px 10px 0px;
margin: 0px 0px 0px 0px;
line-height: 140%;
}

.audioicon{
display: inline-block;
height: 15px;
width: 15px;
margin: 0px 0px 0px 5px;
vertical-align: text-bottom;
}

.player-button::after{
content: '';
position: absolute;
background-color: rgba(255,255,255,0.8);
width: 55%;
height: 55%;
display: block;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 5em;
}

.timer{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
display: flex;
flex-wrapper: nowrap;
justify-content: center;
align-content: center;
align-items: center;
width:100%;
}

.timer .time{
font-size: 11px;
display: inline-block;
margin: 0px var(--space);
}