.audioplayer {display: flex; flex-wrap: wrap; flex-direction: row; box-sizing: border-box; width: 100%; align-items: center;}
.audioplayer-playpause {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all .2s ease-in-out;}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause {background: #02939a; border: #02939a; color: white;}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause:hover {background: #04868c;}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {color: white; font-size: 0;}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a:empty:before {content: ''; justify-content: center; width: 0; height: 0; margin-left: 2px; border-top: 7px solid transparent; border-right: none; border-bottom: 7px solid transparent; border-left: 12px solid white;}
.audioplayer-playing .audioplayer-playpause {background: #f0f4f5; border: #ebebeb; color: #101010;}
.audioplayer-playing .audioplayer-playpause:hover {background: #ebebeb;}
.audioplayer-playing .audioplayer-playpause a {content: ''; display: flex; justify-content: space-between; width: 12px; height: 14px;}
.audioplayer-playing .audioplayer-playpause a::before, .audioplayer-playing .audioplayer-playpause a::after {content: ''; width: 4px; height: 14px; background-color: #101010;}
.audioplayer-time {display: flex; width: 40px; justify-content:center; font-size: 12px; color: rgba(51, 51 ,51, .6)}
.audioplayer-time-current {margin-left: 16px;}
.audioplayer-bar {position: relative; display: flex; margin: 0 12px; height: 12px; flex-basis: 0; flex-grow: 1; cursor: pointer; width: 100px; background: #f0f4f5; border-radius: 6px;}
.audioplayer-bar > div {position: absolute; left: 0; border-radius: 6px;}
.audioplayer-bar-loaded {z-index: 1; height: 12px; background: #ebebeb;}
.audioplayer-bar-played {flex-direction: row-reverse; z-index: 2; height: 12px; background: -webkit-linear-gradient(left, #02939a, #04868c);}
.audioplayer-bar-played::after {display: flex; position: absolute; content: ''; box-sizing: border-box; right: -1px; margin-right: -10px; margin-top: -4px; width: 20px; height: 20px; background-color: #fff; border-radius: 10px;}
.audioplayer:not(.audioplayer-playing) .audioplayer-bar-played::after {border: 3px solid #ebebeb;}
.audioplayer-playing .audioplayer-bar-played::after {border: 3px solid #02939a;}
.audioplayer-volume {flex-basis: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); margin-top: 16px; gap: 16px;}
.audioplayer-volume-button {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; cursor: pointer; background: #ebebeb; border-radius: 50%;}
.audioplayer-volume-button svg {width: 14px; height: 14px;}
.audioplayer-mute .audioplayer-volume-button {background: #b95a65;}
.audioplayer-volume-button a {color: #101010; font-size: 0;}
.audioplayer-mute .audioplayer-volume-button a {color: white; position: relative;}
.audioplayer-mute .audioplayer-volume-button a:after {position: absolute; content: ''; background: white; width: 2px; height: 20px; left: 6px; top: -3px; transform: rotate(45deg); border-radius: 3px;}
.audioplayer-volume-button a:empty:before {width: 0; height: 0; border-top: 8px solid transparent; border-right: 9px solid #9A9FB0; border-bottom: 8px solid transparent; border-left: none; top: -4px;}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:empty:after {left: 10px; top: -2px; width: 6px; height: 6px; border: 6px double #9A9FB0; border-width: 6px 6px 0 0; border-radius: 0 12px 0 0; transform: rotate(45deg);}
.audioplayer-mute .audioplayer-volume-button a:before {border-right: 9px solid #FD4F1A;}
.audioplayer-volume-adjust {display: flex; align-items: center; margin-left: 8px;}
.audioplayer-volume-adjust > div {position: relative; display: flex; min-width: 200px; height: 8px; border-radius: 6px; cursor: pointer; background-color: #ebebeb;}
.audioplayer-volume-adjust div div {position: absolute; top: 0; left: 0; height: 8px; background-color: #02939a; border-radius: 6px;}
.audioplayer-volume-adjust div div:after {display: flex; position: absolute; content: ''; box-sizing: border-box; right: -1px; margin-right: -10px; margin-top: -6px; width: 20px; height: 20px; background-color: #fff; border-radius: 10px; border: 3px solid #02939a;}
.audioplayer-mute .audioplayer-volume-adjust div div:after {border: 3px solid #b95a65;}