button{padding:0;border:0;background:transparent;cursor:pointer;outline:none;width:40px;height:40px}#audio-player-container{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.5px;--seek-before-width: 0%;--volume-before-width: 100%;--buffered-width: 0%;position:relative;margin:100px 2.5% auto;width:95%;max-width:500px;height:265px;background:#fff}#audio-player-container:before{position:absolute;content:"";width:calc(100% + 4px);height:calc(100% + 4px);left:-2px;top:-2px;background:linear-gradient(to left,#007db5,#ff8a00);z-index:-1}#audio-player-container p{position:absolute;top:-18px;right:5%;padding:0 5px;margin:0;font-size:28px;background:#fff}.play-section,.volume-section{display:flex}#play-icon{margin:25px 12px 10px 5%}#track-logo{display:inline-block;width:32px;text-align:center;font-size:20px;margin:2px 2.5% 0 5%}path{stroke:#007db5}.time{display:inline-block;width:37px;text-align:center;font-size:20px;margin:34px 0 18.5px;vertical-align:text-bottom}output{display:inline-block;width:32px;text-align:center;font-size:20px;margin:16px 2% 0}#volume-slider{margin:18px 1%;width:56%}#volume-slider::-webkit-slider-runnable-track{background:#007db599}#volume-slider::-moz-range-track{background:#007db599}#volume-slider::-ms-fill-upper{background:#007db599}#volume-slider:before{width:var(--volume-before-width)}#mute-icon{margin:8px 1.5%}input[type=range]{position:relative;-webkit-appearance:none;width:56%;padding:0;height:19px;margin:36px 10px 20px;outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:3px;cursor:pointer;background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}input[type=range]:before{position:absolute;content:"";top:8px;left:0;width:var(--seek-before-width);height:3px;background-color:#007db5;cursor:pointer}input[type=range]::-webkit-slider-thumb{position:relative;-webkit-appearance:none;box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer;margin:-7px 0 0}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background:#007db5}input[type=range]::-moz-range-track{width:100%;height:3px;cursor:pointer;background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}input[type=range]::-moz-range-progress{background-color:#007db5}input[type=range]::-moz-focus-outer{border:0}input[type=range]::-moz-range-thumb{box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer}input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background:#007db5}input[type=range]::-ms-track{width:100%;height:3px;cursor:pointer;background:transparent;border:solid transparent;color:transparent}input[type=range]::-ms-fill-lower{background-color:#007db5}input[type=range]::-ms-fill-upper{background:linear-gradient(to right,rgba(0,125,181,.6) var(--buffered-width),rgba(0,125,181,.2) var(--buffered-width))}input[type=range]::-ms-thumb{box-sizing:content-box;border:1px solid #007db5;height:15px;width:15px;border-radius:50%;background-color:#fff;cursor:pointer}input[type=range]:active::-ms-thumb{transform:scale(1.2);background:#007db5}.loading{background-color:#1c2020;height:100%;position:relative}.loading .loader,.loading .loader-background{display:block}.loader-background{display:none;position:absolute;opacity:50%;height:100%;background-color:#333;z-index:10;width:100%}.loader{display:none;margin:0 auto;width:60px;height:50px;z-index:20;text-align:center;font-size:10px;position:absolute;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%)}.loader>div{height:100%;width:8px;display:inline-block;float:left;margin-left:2px;-webkit-animation:delay .8s infinite ease-in-out;animation:delay .8s infinite ease-in-out}.loader .bar1{background-color:#754fa0}.loader .bar2{background-color:#09b7bf;-webkit-animation-delay:-.7s;animation-delay:-.7s}.loader .bar3{background-color:#90d36b;-webkit-animation-delay:-.6s;animation-delay:-.6s}.loader .bar4{background-color:#f2d40d;-webkit-animation-delay:-.5s;animation-delay:-.5s}.loader .bar5{background-color:#fcb12b;-webkit-animation-delay:-.4s;animation-delay:-.4s}.loader .bar6{background-color:#ed1b72;-webkit-animation-delay:-.3s;animation-delay:-.3s}@-webkit-keyframes delay{0%,40%,to{-webkit-transform:scaleY(.05)}20%{-webkit-transform:scaleY(1)}}@keyframes delay{0%,40%,to{transform:scaleY(.05);-webkit-transform:scaleY(.05)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}