.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}