.sidebar { form { .sidebar-block { border-radius: 16px; padding: clamp(20px, 2.083vw, 40px); padding: clamp(20px, 1.25vw, 30px); background: $accent-4; .input-box { position: relative; margin-bottom: 22px; padding: 13px; border-radius: 8px; background: $accent-3; label { font-size: 13px; } input { font-size: 13px; width: 100px; border: none; &:focus { border: none; } &:focus-visible { border: none; outline: none; } } } } } h2 { color: #0f0f0f; text-align: center; } .head { padding: clamp(35px,2.083vw,50px); background: #ecf3f9; h2 { color: $black-2; text-align: center; } h6 { color: $accent-1; } p { color: $accent-1; } .slider { img { stroke-width: 3px; stroke: $accent-1; } } } } .sidebar-block-2 { border-radius: 16px; padding: clamp(20px, 2.083vw, 40px); .wrapper { display: flex; align-items: center; justify-content: space-between; gap: $gap-16; .price-input { width: 120px; display: flex; gap: clamp(8px, 0.83vw, 24px); .field { display: flex; align-items: center; gap: 2px; input { width: 100%; outline: none; border: none; -moz-appearance: textfield; color: $accent-1; background: transparent; } } } .slider-parent { width: -webkit-fill-available; .slider { height: 4px; position: relative; background: $lightest-gray; border-radius: 5px; .progress { height: 100%; left: 25%; right: 25%; position: absolute; border-radius: 5px; background: $accent-1; } } } .range-input { position: relative; input { position: absolute; width: 100%; height: 3px; top: -3.5px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; } } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="range"]::-webkit-slider-thumb { height: 14px; width: 14px; border-radius: 50%; background: $accent-1; pointer-events: auto; -webkit-appearance: none; cursor: pointer; border: 2px solid $accent-1; } } .checkbox { h6 { margin-top: 22px; color: $accent-1; } } .head { padding: clamp(35px,2.083vw,50px); background: $accent-3 h2 { color: $black-2; text-align: center; } h6 { color: $accent-1; } p { color: $accent-1; } .slider { img { stroke-width: 3px; stroke: $accent-1; } } } }