.custom-range {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 5px;
    background: linear-gradient(to right, #f8c4a3, #e66a30);
    outline: none;
    opacity: 0.9;
    transition: opacity .2s;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e66a30;
    cursor: pointer;
    transition: background .3s;
}

.custom-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e66a30;
    cursor: pointer;
    transition: background .3s;
}

.custom-range::-ms-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e66a30;
    cursor: pointer;
    transition: background .3s;
}

.custom-range:focus {
    opacity: 1;
}

.custom-range::-webkit-slider-thumb:hover {
    background: #cc5b27;
}

.custom-range::-moz-range-thumb:hover {
    background: #cc5b27;
}

.custom-range::-ms-thumb:hover {
    background: #cc5b27;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: 0 0 10px 0;
    list-style: none;
}

.range-labels li {
    font-size: 14px;
    flex: 1;
    text-align: center;
    color: #e66a30;
}

.highlight-top-border {
    border-top: 2px solid #e66a30;
}

.highlight-text {
    font-weight: bold;
    font-size: large;
}

.highlight-text-color {
    color: #e66a30;
    font-weight: bold;
    font-size: large;
}