:root{--primary-color:#181818;--primary-background-color:#ddd;--secondary-color:#4b4b4b;--secondary-background-color:#fff;--highlight-color:#fd8924;--box-shadow-color:#c9c9c9;--disabled-button-color:#afafaf;--border-radius:1rem}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}html{font-size:62.5%}body{color:var(--primary-color);background-color:var(--primary-background-color);font-family:Arial,Helvetica,sans-serif;font-size:1.5rem;font-weight:400}.container{background-color:var(--primary-background-color);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex}.audio-player{background-color:var(--secondary-background-color);border-radius:var(--border-radius);width:100%;max-width:100rem;box-shadow:.2rem .2rem 1rem .2rem var(--box-shadow-color);margin:2rem 1rem;display:flex}.play-button{cursor:pointer;background-color:#0000;border:none;outline:none;min-width:13rem;min-height:13rem}.play-button-icon{width:35px}.player-body{width:100%;padding:1rem}.title{width:100%;font-weight:600}.waveform{width:100%;min-height:8rem;padding:.5rem 0}.controls{justify-content:space-between;display:flex}.timecode{color:var(--secondary-color)}.volume{align-items:center;display:flex}.volume-icon{cursor:pointer}.volume-slider{cursor:pointer;-webkit-appearance:none;background:0 0;outline:none;width:100%;margin:0 1rem}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--highlight-color);border:none;border-radius:50%;width:1.5rem;height:1.5rem;margin-top:-.6rem}.volume-slider::-moz-range-thumb{-webkit-appearance:none;background:var(--highlight-color);border:none;border-radius:50%;width:1.5rem;height:1.5rem}.volume-slider::-ms-thumb{-webkit-appearance:none;background:var(--highlight-color);border:none;border-radius:50%;width:1.5rem;height:1.5rem}.volume-slider::-webkit-slider-runnable-track{background-color:var(--secondary-color);border-radius:var(--border-radius);width:100%;height:.25rem}.volume-slider::-ms-track{color:#0000;background:0 0;background-color:var(--secondary-color);border-radius:var(--border-radius);border-color:#0000;width:100%;height:.25rem}.volume-slider[disabled]{cursor:not-allowed}.volume-slider[disabled]::-webkit-slider-thumb{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-moz-range-thumb{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-ms-thumb{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-webkit-slider-runnable-track{background-color:var(--disabled-button-color)}.volume-slider[disabled]::-ms-track{background-color:var(--disabled-button-color)}input[type=range]{border:1px solid #fff}input[type=range]::-moz-range-track{background:#ddd;border:none;border-radius:3px;height:5px}input[type=range]:-moz-focusring{outline-offset:-1px;outline:1px solid #fff}input[type=range]:focus::-moz-range-track{background:#ccc}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-runnable-track{background:#ddd;border:none;border-radius:3px;width:300px;height:5px}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-runnable-track{background:#ccc}input[type=range]::-ms-track{color:#0000;background:0 0;border-width:6px 0;border-color:#0000;width:300px;height:5px}input[type=range]::-ms-fill-lower{background:#777;border-radius:10px}input[type=range]::-ms-fill-upper{background:#ddd;border-radius:10px}input[type=range]:focus::-ms-fill-lower{background:#888}input[type=range]:focus::-ms-fill-upper{background:#ccc}