.x-slide-ratio-ctr{padding:10px 0 20px;font-size:12px}.x-slide-ratio-ctr.slide-disable .x-slide-ratio-inner-ctr{cursor:not-allowed}.x-slide-ratio-ctr.slide-disable .x-slide-cursor-point:hover:before{display:none}.x-slide-ratio-ctr .x-slide-ratio-inner-ctr{position:relative;width:100%;height:6px;background:hsla(0,0%,100%,.12);border-radius:10px;cursor:pointer}.x-slide-ratio-ctr .x-slide-spot{position:absolute;z-index:1;height:12px;width:12px;border-radius:50%;background:var(--Content-Inverse);border:2px solid var(--Container-Contrast);top:-3px}.x-slide-ratio-ctr .x-slide-spot.show-spot-label:after{position:absolute;top:20px;width:30px;content:attr(data-spot)}.x-slide-ratio-ctr .x-slide-spot:first-of-type,.x-slide-ratio-ctr .x-slide-spot:first-of-type:after{left:0}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(2){left:calc(25% - 6px)}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(2):after{left:-6px}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(3){left:calc(50% - 6px)}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(3):after{left:-6px}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(4){left:calc(75% - 6px)}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(4):after{left:-6px}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(5),.x-slide-ratio-ctr .x-slide-spot:nth-of-type(5):after{right:0}.x-slide-ratio-ctr .x-slide-spot.over-spot{border-color:var(--Brand-Default)}.x-slide-ratio-ctr .x-slide-spot.on-spot{outline:2px solid var(--Brand-Default)}.x-slide-ratio-ctr .x-slide-cursor{position:absolute;height:6px;top:0;left:0;border-radius:8px;background:var(--Brand-Default)}.x-slide-ratio-ctr .x-slide-cursor-point{position:absolute;box-sizing:border-box;z-index:1;content:"";height:14px;width:14px;border-radius:50%;background:var(--Content-Inverse);border:4px solid var(--Brand-Default);right:-7px;top:-4px;bottom:0}.x-slide-ratio-ctr .x-slide-cursor-point.full-ratio-point{right:-2px}.x-slide-ratio-ctr .x-slide-cursor-point.full-ratio-point:hover:before{right:0}.x-slide-ratio-ctr .x-slide-cursor-point.zero-ratio-point{right:-13px}.x-slide-ratio-ctr .x-slide-cursor-point.point-label:hover:before{box-sizing:content-box;content:"";position:absolute;right:-10px;top:-10px;height:4px;width:4px;border:12px solid var(--Brand-Default-Opacity);border-radius:50%}.x-slide-ratio-ctr .x-slide-cursor-point.point-label:hover:after{content:attr(data-current-ratio);position:absolute;right:-14px;bottom:20px;padding:0 4px;background:var(--Brand-Default);border-radius:10px;color:var(--trade-font-black);animation:currentRatio 60ms linear forwards}@keyframes currentRatio{0%{transform:scale(0)}to{transform:scale(1)}}