.slider-container{position:relative;width:100%;max-width:700px;margin:2rem auto;font-family:Arial,sans-serif;display:flex;align-items:center}input[type=range]{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;background:#e0e0e0;border-radius:5px;outline:none;margin:0 1rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:#b2b3b4;border-radius:50%;cursor:pointer;border:2px solid #4e4f50;margin-top:-6px}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#818488;border-radius:50%;cursor:pointer;border:2px solid #4e4f50}.tick-marks{display:flex;justify-content:space-between;position:absolute;bottom:-14px;left:0;width:calc(100% - 5rem);margin:0 2.5rem;pointer-events:none}.tick{position:relative;text-align:center;flex:1}.tick-line{height:6px;width:2px;background:#555;margin:0 auto}.tick-label{margin-top:6px;font-size:11px;color:#555}.tick.bold .tick-label{font-weight:700;color:#000}.slider-button{width:30px;height:30px;background-color:#818488;color:#fff;font-size:22px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}.slider-button:hover{background-color:#4e4f50}@media (min-width: 768px){.tick-marks{width:calc(100% - 4rem);margin:0 2rem}.tick-line{height:8px}.tick-label{font-size:15px}input[type=range]::-webkit-slider-thumb{width:22px;height:22px}input[type=range]::-moz-range-thumb{width:22px;height:22px}.slider-button{width:33px;height:33px}}@media (min-width: 1024px){.tick-line{height:10px}.tick-marks{margin:0 1.5rem;width:calc(100% - 3rem)}.tick-label{font-size:16px}input[type=range]::-webkit-slider-thumb{width:25px;height:25px}input[type=range]::-moz-range-thumb{width:25px;height:25px}.slider-button{width:36px;height:36px}}