body{font-family:sans-serif}.metronome{width:30%;min-width:360px;padding:20px}.player{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.beats{font-size:50px;color:#3e3e3e;display:inline-block;margin-right:5px;margin-top:10px}.bpm{font-size:14px;color:#c3c3c3}.play{width:50px;height:50px;outline:0;border-radius:50%;border:0px solid #fff;background-color:#60d08e;color:#fff;font-size:14px;transition:all 0.2s ease-out}.hit-effect{box-shadow:0px 0px 8px 12px rgba(204,204,204,0.2),0px 0px 2px 4px rgba(184,184,184,0.23)}.beat-slider{width:100%;-webkit-appearance:none;outline:none}.beat-slider::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;margin-top:-6px;border-radius:50%;background-color:#60d08e;cursor:pointer;box-shadow:0px 1px 1px rgba(0,0,0,.2)}.beat-slider::-moz-range-thumb{-webkit-appearance:none;height:16px;width:16px;margin-top:-6px;border-radius:50%;border:none;background-color:#7e7e7e;cursor:pointer;box-shadow:0px 1px 1px rgba(0,0,0,.2)}.beat-slider::-webkit-slider-runnable-track{width:100%;cursor:pointer;box-shadow:0px 1px 1px rgba(0,0,0,.2);background:#e3e3e3;height:2px}.beat-slider::-moz-range-track{width:100%;cursor:pointer;box-shadow:0px 1px 1px rgba(0,0,0,.2);background:#e3e3e3;height:2px;outline:none}.beat-slider::-moz-focus-outer{border:0}.play-text{font-size:20px}.fa-play{margin-left:4px;margin-top:3px}.fa-pause{margin-top:3px}