.opp-filter .range_container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.opp-filter .sliders_control {
    position: relative;
}

.opp-filter .slider-tooltip {
    position: absolute;
    top: -40px;
    left: 0;
    width: fit-content;
    background-color:#FFF;
    font-size: 12px;
    border-radius: 4px;
    text-align: center;
    transform: translateX(-50%);
}

.opp-filter .slider-tooltip::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    rotate: 45deg;
    z-index: -1;
    background-color: inherit;
}

.opp-filter input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.opp-filter input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.opp-filter .range_container input[type=range]::-webkit-slider-thumb:hover {
    background: #F0F0F0;
}

.opp-filter input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    width: 100%;
    position: absolute;
    pointer-events: none;
    left: 0;
}

.opp-filter .scale {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    position: relative;
    width: 98.8%;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
}

.opp-filter .scale div {
    position: absolute;
    transform: translateX(-50%);
}

.opp-filter .scale div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -125%);
    width: 1px;
    height: 10px;
    background-color:#666;
}

.opp-filter .age-scale {
    display: flex;
    justify-content: space-between;
}

.opp-filter .age-scale div {
    font-size: 14px;
}


.range_container.orange input[type=range]::-moz-range-thumb {
    background-color: #EE7200;
    box-shadow: 0 0 0 1px #EE7200;
}

.range_container.orange input[type=range]::-webkit-slider-thumb {
    background-color: #EE7200;
    box-shadow: 0 0 0 1px #EE7200;

}

.range_container.rose input[type=range]::-webkit-slider-thumb {
    background-color: #F82D9F;
    box-shadow: 0 0 0 1px #F82D9F;

}

.range_container.blue input[type=range]::-webkit-slider-thumb {
    background-color: #02269E;
    box-shadow: 0 0 0 1px #02269E;

}

.range_container.black input[type=range]::-webkit-slider-thumb {
    background-color: #000000;
    box-shadow: 0 0 0 1px #000000;

}

.range_container.dark_blue input[type=range]::-webkit-slider-thumb {
    background-color: #002869;
    box-shadow: 0 0 0 1px #002869;

}

.range_container.violet input[type=range]::-webkit-slider-thumb {
    background-color: #AA6DFF;
    box-shadow: 0 0 0 1px #AA6DFF;

}

.range_container.pink input[type=range]::-webkit-slider-thumb {
    background-color: #FF6586;
    box-shadow: 0 0 0 1px #FF6586;

}

.range_container.dark_pink input[type=range]::-webkit-slider-thumb {
    background-color: #AF2A97;
    box-shadow: 0 0 0 1px #AF2A97;

}

.range_container.pure_yellow input[type=range]::-webkit-slider-thumb {
    background-color: #ffdc00;
    box-shadow: 0 0 0 1px #ffdc00;

}

.range_container.red input[type=range]::-webkit-slider-thumb {
    background-color: #C51A1B;
    box-shadow: 0 0 0 1px #C51A1B;

}

.range_container.green input[type=range]::-webkit-slider-thumb {
    background-color: #53DA3F;
    box-shadow: 0 0 0 1px #53DA3F;

}

.range_container.dark_violet input[type=range]::-webkit-slider-thumb {
    background-color: #8400C6;
    box-shadow: 0 0 0 1px #8400C6;

}

.range_container.light_blue input[type=range]::-webkit-slider-thumb {
    background-color: #0BBBEF;
    box-shadow: 0 0 0 1px #0BBBEF;

}