.al-track{display: inline-flex;align-items: center;background-color: #e3e3e3;padding: 10px 10px;border-radius: 30px;margin-bottom: 10px;}
.al-track:not(:last-child){margin-right: 10px;}
.al-track > i{display: inline-block;margin: 0 5px 0 0;width: 30px;height: 30px;}
.al-track > i svg{width: 100%;height: 100%;}
.al-track > span{color: #5b5b5b;}
.al-track.cover{padding: 0 10px 0 0;border-radius: 6px;}
.al-track.cover > img{display: inline-block;width: 50px;height: 50px;margin: 0 10px 0 0;border-radius: 6px;}

#alterlit-audio-player-wrap{display: none;position: fixed;z-index: 50;width: 600px;height: 80px;bottom: 10px;left: 20px;}
body.comment-form #alterlit-audio-player-wrap{bottom: auto;top: 60px;}
#alterlit-audio-player{position: relative;width: 100%;height: 100%;padding: 6px 0 6px 40px;}
#alterlit-audio-player .volume{display: none;position: absolute;right: 40px;bottom: 100%;width: 100px;height: 6px;border-radius: 3px;background-color: #e3e3e3;cursor: pointer;}
#alterlit-audio-player .volume .ui-slider-range{position: relative;z-index: 1;height: 100%;background-color: #e02e2e;border-radius: 3px;}
#alterlit-audio-player .volume .ui-slider-handle{position: absolute;z-index: 3;top: -2px;width: 10px;height: 10px;margin-left: -5px;border-radius: 50%;background-color: #e02e2e;}
#alterlit-audio-player .rates{display: none;position: absolute;left: 50%;bottom: calc(100% - 2px);align-items: center;}
#alterlit-audio-player .rate-btn{position: relative;padding: 3px 8px;background-color: #e3e3e3;border-radius: 3px;font-size: .8em;font-family: 'Open Sans';margin: 0 4px 0 0;}
#alterlit-audio-player .rate-btn::before{content: attr(data-value);}
#alterlit-audio-player .rate-btn::after{content: 'x';}
#alterlit-audio-player .close-player{position: absolute;z-index: 7;width: 36px;height: 100%;right: 0;top: 0;padding: 9px;background-color: #d7d7d7;border-top-right-radius: 40px;border-bottom-right-radius: 40px;}
#alterlit-audio-player .close-player svg{width: 100%;height: 100%;}
#alterlit-audio-player .disc{position: absolute;z-index: 5;width: 80px;height: 80px;left: 0;top: 0;border-radius: 50%;border: 2px solid #000;background-color: #2d2d2d;background-position: center;background-size: cover;}
#alterlit-audio-player .disc::before{content: '';position: absolute;z-index: 1;width: 26px;height: 26px;left: 25px;top: 25px;border-radius: 50%;background-color: #e02e2e;}
#alterlit-audio-player .disc::after{content: '';position: absolute;z-index: 1;width: 4px;height: 4px;left: 36px;top: 36px;border-radius: 50%;background-color: #fff;}
#alterlit-audio-player.load .disc{transform: none !important;}
#alterlit-audio-player .a-wrap{position: relative;width: 100%;height: 100%;display: grid;grid-template: "ctrls ctrls" 1fr "ttl dur" auto "progr progr" 10px / 1fr auto;padding: 0 36px 0 45px; background-color: #e3e3e3;border-top-right-radius: 40px;border-bottom-right-radius: 40px;}
#alterlit-audio-player .title{grid-area: ttl;padding: 1px 8px 0 4px;font-size: .8em;font-family: 'Open Sans';white-space: nowrap;overflow: hidden;text-overflow: ellipsis;opacity: .6;}
#alterlit-audio-player .duration{grid-area: dur;padding: 0 7px 0 0;font-size: .8em;opacity: .4;font-family: 'Open Sans';}
#alterlit-audio-player .ctrls{grid-area: ctrls;position: relative;display: grid;grid-template: "tmp1 prev play next rate vol" auto / 1fr auto auto auto auto 1fr;align-items: center;grid-gap: 0 8px;padding: 3px 5px 0 0; }
#alterlit-audio-player .ctrls button{position: relative;width: 26px;height: 26px;}
#alterlit-audio-player .ctrls button svg{width: 100%;height: 100%;}
#alterlit-audio-player .ctrls .play-btn{grid-area: play;padding: 2px;}
#alterlit-audio-player .ctrls .play-btn .play{fill: #e02e2e;}
#alterlit-audio-player .ctrls .play-btn .pause{opacity: 0;fill: #b5b5b5;}
#alterlit-audio-player.played .ctrls .play-btn .play{opacity: 0;}
#alterlit-audio-player.played .ctrls .play-btn .pause{opacity: 1;}
#alterlit-audio-player .ctrls .play-btn .icon-loader{display: none;position: absolute;left: -10px;top: -10px;width: calc(100% + 20px);height: calc(100% + 20px);}
#alterlit-audio-player .ctrls .play-btn .icon-loader circle{stroke: #e02e2e;}
#alterlit-audio-player.load .ctrls .play-btn .icon-play{opacity: 0;}
#alterlit-audio-player.load .ctrls .play-btn .icon-loader{display: block;}
#alterlit-audio-player.played.wait .ctrls .play-btn .icon-play{opacity: 0;}
#alterlit-audio-player.played.wait .ctrls .play-btn .icon-loader{display: block;}
#alterlit-audio-player .ctrls .rate-change{grid-area: rate;font-family: 'Open Sans';font-size: .8em;background-color: #cacaca;color: #000;border-radius: 4px;width: 36px;height: 20px;}
#alterlit-audio-player .ctrls .rate-change::before{content: attr(data-value);}
#alterlit-audio-player .ctrls .rate-change::after{content: 'x';}
#alterlit-audio-player.load .ctrls .rate-change{visibility: hidden;}
#alterlit-audio-player .ctrls .volume-change{grid-area: vol;justify-self: end;}
body:not(.hover) #alterlit-audio-player .ctrls .volume-change{display: none;}
#alterlit-audio-player.load .ctrls .volume-change{visibility: hidden;}
#alterlit-audio-player.semimuted .ctrls .volume-change svg path:nth-of-type(2){opacity: 0;}
#alterlit-audio-player.muted .ctrls .volume-change svg path:nth-of-type(1){fill: #c0c0c0;}
#alterlit-audio-player.muted .ctrls .volume-change svg path:nth-of-type(2){opacity: 0;}
#alterlit-audio-player.muted .ctrls .volume-change svg path:nth-of-type(3){opacity: 0;}
#alterlit-audio-player .progr{grid-area: progr;position: relative;z-index: 8;}
#alterlit-audio-player.load .duration{opacity: 0;}
#alterlit-audio-player .progr::before,
#alterlit-audio-player .pr-load,
#alterlit-audio-player .pr-duration{position: absolute;left: 0;bottom: 0;width: 0;height: 6px;}
#alterlit-audio-player .progr::before{content: '';z-index: 1;width: 100%;background-color: #d7d7d7;}
#alterlit-audio-player .pr-load{z-index: 2;background-color: #c8c8c8;}
#alterlit-audio-player .pr-duration{z-index: 3;width: 100%;cursor: pointer;}
#alterlit-audio-player .pr-duration .ui-seeks{position: absolute;z-index: 2;width: 100%;height: 6px;left: 0;bottom: 0;}
#alterlit-audio-player .pr-duration .ui-seek{position: absolute;bottom: 0;height: 100%; background-color: #000;opacity: .1;}
#alterlit-audio-player .pr-duration .ui-slider-range{position: relative;z-index: 1;height: 100%;background-color: #e02e2e;}
#alterlit-audio-player .pr-duration .ui-slider-handle{position: absolute;z-index: 3;top: -2px;width: 10px;height: 10px;margin-left: -5px;border-radius: 50%;background-color: #e02e2e;}
#alterlit-audio-player.load .pr-load,
#alterlit-audio-player.load .pr-duration{opacity: 0;}

@media screen and (max-width: 640px) {
    #alterlit-audio-player-wrap{width: 100%;left: 0;bottom: 0;}
    body.comment-form #alterlit-audio-player-wrap{}
    body.comment-form #alterlit-audio-player .close-player{top: calc(100% + 5px);bottom: auto;border-bottom-right-radius: 40px;border-top-right-radius: 0;}
    #alterlit-audio-player{padding: 0;}
    #alterlit-audio-player .close-player{top: auto;bottom: calc(100% + 5px);right: 0;width: 40px;height: 40px;padding: 9px;border-radius: 40px;border-bottom-right-radius: 0;}
    #alterlit-audio-player .disc{width: 64px;height: 64px;left: 5px;top: 14px;border: 1px solid #000;}
    #alterlit-audio-player .disc::before{width: 22px;height: 22px;left: 20px;top: 20px;}
    #alterlit-audio-player .disc::after{left: 29px;top: 29px;}
    #alterlit-audio-player .rates{bottom: calc(100% + 4px);left: 10px;right: auto;}
    #alterlit-audio-player .rate-btn{padding: 4px 10px;font-size: 1em;color: #646464;}
    #alterlit-audio-player .a-wrap{grid-template: "progr progr" 10px "ttl dur" auto "ctrls ctrls" 1fr / 1fr auto;padding: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;overflow: visible;}
    #alterlit-audio-player .progr::before,
    #alterlit-audio-player .pr-load,
    #alterlit-audio-player .pr-duration{height: 100%;}
    #alterlit-audio-player .pr-duration .ui-seeks{height: 100%;}
    #alterlit-audio-player .pr-duration .ui-slider-handle{top: -4px;width: 18px;height: 18px;margin-left: -9px;}
    #alterlit-audio-player .title{padding: 3px 7px 0 76px;}
    #alterlit-audio-player .ctrls{padding: 0 10px 0 70px;}
    #alterlit-audio-player .duration{padding-top: 3px;padding-right: 12px;}
    #alterlit-audio-player .volume{right: auto;left: 10px;bottom: calc(100% + 12px);width: calc(100% - 70px);height: 10px;border-radius: 6px;}
    #alterlit-audio-player .volume .ui-slider-range{border-radius: 6px;}
    #alterlit-audio-player .volume .ui-slider-handle{top: -4px;width: 18px;height: 18px;margin-left: -9px;}
}
@media screen and (max-width: 600px) {
    body.comment-form #alterlit-audio-player-wrap{top: 50px;}
}