.knob{box-sizing:border-box;position:relative;display:inline-block;vertical-align:middle;border-radius:50%;margin:25px}.knob:not(.dragging) .knob-dial{--knob-anchor-angle-transition-distance:1;--knob-anchor-angle-transition-speed:0.5;transition-property:transform;transition-timing-function:linear;transition-duration:calc(var(--knob-anchor-angle-transition-distance)*var(--knob-anchor-angle-transition-speed)*1s)}.knob-dial{box-sizing:border-box;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;overflow:hidden;transform-origin:center center;z-index:100}.knob-dial-anchor{position:absolute;left:50%;top:50%;height:50%;width:0}.knob-dial-pointer{position:absolute;left:-1px;bottom:-2px;width:2px;height:30%}.knob-label-anchor{position:absolute;left:50%;top:50%;height:50%;word-break:keep-all;white-space:nowrap;transform-origin:top left}.knob-label{position:absolute;cursor:pointer;top:100%}.knob-label-center>.knob-label,.knob-label-left>.knob-label,.knob-label-right>.knob-label{transform-origin:center center;margin:10px;width:20px;height:20px;line-height:20px}.knob-label-left{z-index:1}.knob-label-left>.knob-label{right:-20px}.knob-label-left>.knob-label>div{position:absolute;right:0}.knob-label-right{z-index:1}.knob-label-right>.knob-label{left:-20px}.knob-label-right>.knob-label>div{position:absolute;left:0}.knob-label-center{z-index:0}.knob-label-center>.knob-label{right:-20px}.knob-label-center>.knob-label>div,.knob-label-center>.knob-label>div>*{margin-left:-100%;margin-right:-100%;text-align:center}.knob,.knob-md{width:100px;height:100px}.knob-xl{width:250px;height:250px}.knob-lg{width:140px;height:140px}.knob-sm{width:75px;height:75px}.knob-xs{width:50px;height:50px}.knob{background-color:#fafafa;border:2px solid #cacaca}.knob-dial-pointer{background-color:#7a7a7a}.knob-label{color:#9a9a9a}.knob-label.active{color:#333;font-weight:700}.knob-label-anchor{-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased}