.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:8px;background:#ffffff1f;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(--module-title-bg);top:-2px}.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:nth-of-type(1){left:0}.x-slide-ratio-ctr .x-slide-spot:nth-of-type(1):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){right:0}.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:8px;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:16px;width:16px;border-radius:50%;background:var(--Content-Inverse);border:4px solid var(--Brand-Default);right:-8px;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:-14px}.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 linear 60ms forwards}@keyframes currentRatio{0%{transform:scale(0)}to{transform:scale(1)}}