.slider-container{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;width:300px;z-index:10}.slider{position:relative;height:50px;width:100%;background-color:#f0f0f0;border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:0 4px 8px #0003;display:flex;border:2px solid #ddd}.slider-section{height:100%;flex:1;opacity:.4}.slider-section.cool{background-color:#00bfff}.slider-section.warm{background-color:#0f0}.slider-section.hot{background-color:#ff0}.slider-section.very-hot{background-color:#ff4500}.slider-fill{position:absolute;height:100%;width:0%;background-color:#ffffff80;border-radius:10px}.slider-labels{position:absolute;width:100%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:#333;font-weight:700;font-size:12px;padding:5px;pointer-events:none}.slider-labels span{position:relative}.slider-value{margin-top:10px;font-size:20px;font-weight:700;color:#333;background-color:#f0f0f0;padding:5px 10px;border-radius:5px;text-align:center}html,body,#root{height:100%;margin:unset}body{margin:0}