.multi-range-slider *{box-sizing:border-box;margin:0;padding:0}.multi-range-slider{border:1px solid gray;border-radius:10px;box-shadow:1px 1px 4px #000;display:flex;flex-direction:column;padding:20px 10px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.multi-range-slider .bar{display:flex}.multi-range-slider .bar-left{border-radius:10px 0 0 10px;padding:4px 0}.multi-range-slider .bar-left,.multi-range-slider .bar-right{background-color:#f0f0f0;box-shadow:inset 0 0 5px #000;width:25%}.multi-range-slider .bar-right{border-radius:0 10px 10px 0}.multi-range-slider .bar-inner{background-color:#0f0;border:1px solid #000;box-shadow:inset 0 0 5px #000;display:flex;flex-grow:1;flex-shrink:1;justify-content:space-between;position:relative}.multi-range-slider .bar-inner-left,.multi-range-slider .bar-inner-right{width:50%}.multi-range-slider .thumb{background-color:red;cursor:pointer;position:relative;z-index:1}.multi-range-slider .thumb:before{background-color:#fff;border:1px solid #000;border-radius:50%;box-shadow:0 0 3px #000,inset 0 0 5px gray;content:"";cursor:pointer;height:20px;margin:-8px;position:absolute;width:20px;z-index:1}.multi-range-slider .input-type-range:focus+.thumb:after{border:1px dotted #000;border-radius:50%;box-shadow:0 0 5px #fff,inset 0 0 10px #000;content:"";height:11px;left:-4px;position:absolute;top:-4px;width:11px;z-index:2}.multi-range-slider .caption{align-items:center;bottom:35px;display:flex;display:none;height:2px;justify-content:center;left:1px;overflow:visible;position:absolute;width:2px}.multi-range-slider .thumb .caption *{background-color:#00f;border-radius:15px;box-shadow:0 0 5px #000;color:#fff;font-size:75%;height:30px;line-height:30px;min-width:30px;padding:0 5px;position:absolute;text-align:center;white-space:nowrap}.multi-range-slider .input-type-range:focus+.thumb .caption,.multi-range-slider .thumb:active .caption{display:flex}.multi-range-slider .input-type-range{left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.multi-range-slider .ruler{display:flex;margin:10px 0 -5px;overflow:hidden}.multi-range-slider .ruler .ruler-rule{border-bottom:1px solid;border-left:1px solid;display:flex;flex-grow:1;flex-shrink:1;padding:5px 0}.multi-range-slider .ruler .ruler-rule:last-child{border-right:1px solid}.multi-range-slider .sub-ruler{display:flex;margin:-2px 0 -5px}.multi-range-slider .sub-ruler .ruler-sub-rule{border-bottom:1px solid;border-left:1px solid;display:flex;flex-grow:1;flex-shrink:1;padding:3px 0}.multi-range-slider .sub-ruler .ruler-sub-rule:last-child{border-right:1px solid}.multi-range-slider .labels{display:flex;justify-content:space-between;margin-bottom:-20px;margin-top:10px;padding:0}.multi-range-slider .label{display:flex;font-size:80%;justify-content:center;width:1px}.multi-range-slider .label:first-child{justify-content:start}.multi-range-slider .label:last-child{justify-content:end}.multi-range-slider.zero-ranage-margin .thumb-left{right:12px}.multi-range-slider.zero-ranage-margin .thumb-right{left:8px}.multi-range-slider-black *{box-sizing:border-box;margin:0;padding:0}.multi-range-slider-black{background-color:#000;border:1px solid gray;color:#fff;display:flex;flex-direction:column;padding:30px 10px 25px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.multi-range-slider-black .bar{display:flex}.multi-range-slider-black .bar.active *{transition:none}.multi-range-slider-black .bar-left{background-color:gray;border:1px solid #000;border-radius:10px 0 0 10px;box-shadow:inset 0 0 5px #000;padding:5px 0;width:25%}.multi-range-slider-black .bar-right{background-color:gray;border:1px solid #000;border-radius:0 10px 10px 0;box-shadow:inset 0 0 5px #000;width:25%}.multi-range-slider-black .bar-inner{background-color:#0f0;border:1px solid #000;box-shadow:inset 0 0 5px #000;display:flex;flex-grow:1;flex-shrink:1;justify-content:space-between;position:relative}.multi-range-slider-black .bar-inner-left,.multi-range-slider-black .bar-inner-right{width:50%}.multi-range-slider-black .thumb{background-color:red;cursor:pointer;position:relative;z-index:1}.multi-range-slider-black .thumb:before{background-color:#fff;border:1px solid #000;border-radius:7px;box-shadow:0 0 5px #000,inset 0 0 10px gray;content:"";cursor:pointer;height:30px;margin:-10px;position:absolute;width:20px;z-index:1}.multi-range-slider-black .input-type-range:focus+.thumb:after{border:1px dotted #000;border-radius:7px;box-shadow:0 0 5px #fff,inset 0 0 10px #000;content:"";height:22px;left:-6px;position:absolute;top:-6px;width:12px;z-index:2}.multi-range-slider-black .caption{align-items:center;bottom:45px;display:flex;height:2px;justify-content:center;left:1px;overflow:visible;position:absolute;width:2px}.multi-range-slider-black .thumb .caption *{background-color:#00f;border-radius:15px;box-shadow:0 0 5px #000;color:#fff;font-size:75%;height:30px;line-height:30px;min-width:30px;padding:0 5px;position:absolute;text-align:center;white-space:nowrap}.multi-range-slider-black .input-type-range:focus+.thumb .caption,.multi-range-slider-black .thumb:active .caption{display:flex}.multi-range-slider-black .input-type-range{left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.multi-range-slider-black .ruler{display:flex;margin:10px 0 -5px;overflow:hidden}.multi-range-slider-black .ruler .ruler-rule{border-bottom:1px solid;border-left:1px solid;display:flex;flex-grow:1;flex-shrink:1;padding:5px 0}.multi-range-slider-black .ruler .ruler-rule:last-child{border-right:1px solid}.multi-range-slider-black .sub-ruler{display:flex;margin:-2px 0 -5px}.multi-range-slider-black .sub-ruler .ruler-sub-rule{border-bottom:1px solid;border-left:1px solid;display:flex;flex-grow:1;flex-shrink:1;padding:3px 0}.multi-range-slider-black .sub-ruler .ruler-sub-rule:last-child{border-right:1px solid}.multi-range-slider-black .labels{display:flex;justify-content:space-between;margin-bottom:-20px;margin-top:10px;padding:0}.multi-range-slider-black .label{font-size:80%}.multi-range-slider-black.zero-ranage-margin .thumb-left{right:12px}.multi-range-slider-black.zero-ranage-margin .thumb-right{left:8px}.multi-range-slider-bar-only *{box-sizing:border-box;margin:0;padding:0}.multi-range-slider-bar-only{border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;padding:10px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.multi-range-slider-bar-only .bar{display:flex}.multi-range-slider-bar-only .bar-left{background-color:#f0f0f0;border-radius:10px 0 0 10px;box-shadow:inset 0 0 5px #000;padding:4px 0;width:25%}.multi-range-slider-bar-only .bar-right{background-color:#f0f0f0;border-radius:0 10px 10px 0;box-shadow:inset 0 0 5px #000;width:25%}.multi-range-slider-bar-only .bar-inner{background-color:#00f;border:1px solid #000;box-shadow:inset 0 0 5px #000;display:flex;flex-grow:1;flex-shrink:1;justify-content:space-between;position:relative}.multi-range-slider-bar-only .bar-inner-left,.multi-range-slider-bar-only .bar-inner-right{width:50%}.multi-range-slider-bar-only .thumb{background-color:red;cursor:pointer;position:relative;z-index:1}.multi-range-slider-bar-only .thumb:before{background-color:#fff;border:1px solid #000;border-radius:50%;box-shadow:0 0 3px #000,inset 0 0 5px gray;content:"";cursor:pointer;height:20px;margin:-8px;position:absolute;width:20px;z-index:1}.multi-range-slider-bar-only .input-type-range:focus+.thumb:after{border:1px dotted #000;border-radius:50%;box-shadow:0 0 5px #fff,inset 0 0 10px #000;content:"";height:11px;left:-4px;position:absolute;top:-4px;width:11px;z-index:2}.multi-range-slider-bar-only .caption{align-items:center;bottom:35px;display:flex;display:none;height:2px;justify-content:center;left:1px;overflow:visible;position:absolute;width:2px}.multi-range-slider-bar-only .thumb .caption *{background-color:#00f;border-radius:15px;box-shadow:0 0 5px #000;color:#fff;font-size:75%;height:30px;line-height:30px;min-width:30px;padding:0 5px;position:absolute;text-align:center;white-space:nowrap}.multi-range-slider-bar-only .input-type-range:focus+.thumb .caption,.multi-range-slider-bar-only .thumb:active .caption{display:flex}.multi-range-slider-bar-only .input-type-range{left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.multi-range-slider-bar-only .ruler{display:flex;display:none;margin:10px 0 -5px;overflow:hidden}.multi-range-slider-bar-only .ruler .ruler-rule{border-bottom:1px solid;border-left:1px solid;display:flex;display:none;flex-grow:1;flex-shrink:1;padding:5px 0}.multi-range-slider-bar-only .ruler .ruler-rule:last-child{border-right:1px solid}.multi-range-slider-bar-only .sub-ruler{display:flex;display:none;margin:-2px 0 -5px}.multi-range-slider-bar-only .sub-ruler .ruler-sub-rule{border-bottom:1px solid;border-left:1px solid;display:flex;flex-grow:1;flex-shrink:1;padding:3px 0}.multi-range-slider-bar-only .sub-ruler .ruler-sub-rule:last-child{border-right:1px solid}.multi-range-slider-bar-only .labels{display:flex;display:none;justify-content:space-between;margin-bottom:-20px;margin-top:10px;padding:0}.multi-range-slider-bar-only .label{display:flex;font-size:80%;justify-content:center;width:1px}.multi-range-slider-bar-only .label:first-child{justify-content:start}.multi-range-slider-bar-only .label:last-child{justify-content:end}.multi-range-slider-bar-only.zero-ranage-margin .thumb-left{right:12px}.multi-range-slider-bar-only.zero-ranage-margin .thumb-right{left:8px}