.slider-container {
    width: 100%;
}

.slider-container, .slider-container * {
    pointer-events: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

.slider-label {
    font-size: 1.4em;
    /* font-family: 'Open Sans' !important; */
    min-height: 1rem;
}

.slider-label span {
    position: relative;
    width: 53px;
}

.slider-control {
    background: #e9ecef;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 20px;
    transition: .2s;
    -webkit-transition: .2s;
    height: 25px;
}

/* chrome, opera, safari, edge unselected slider handle styling */
.slider-control::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e9ecef;
    cursor: pointer;
    z-index: 9999;
}

/* firefox specific unselected slider handle styling */
.slider-control::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-color: #e9ecef;
    background: #e9ecef;
    cursor: pointer;
}

/* this styles the thumb for firefox on click before we have a value persisted */
.slider-control:focus::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-color: var(--thumb-color);
    /* border-color: #189edf; */
    background: var(--thumb-color);
    /* background: #189edf; */
    cursor: pointer;
}

/* this styles the thumb for chrome on click before we have a value persisted */
.slider-control:focus::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-color: var(--thumb-color);
    /* border-color: #189edf; */
    background: var(--thumb-color);
    /* background: #189edf; */
    cursor: pointer;
}

.slider-control-selected {
    background: #e9ecef;
    appearance:none;
    -webkit-appearance: none;
    border-radius: 20px;
    transition: .2s;
    -webkit-transition: .2s;
    height: 25px;
}

/* chrome, opera, safari, edge selected slider handle styling */
.slider-control-selected::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-color: var(--thumb-color);
    /* border-color: #189edf; */
    background: var(--thumb-color);
    /* background: #189edf; */
    cursor: pointer;
}

/* firefox specific selected slider handle styling */
.slider-control-selected::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-color: var(--thumb-color);
    /* border-color: #189edf; */
    background: var(--thumb-color);
    /* background: #189edf; */
    cursor: pointer;
}

.datalist {
    display: flex;
    justify-content: space-between;
}

.slider {
    pointer-events: visible;
    user-select: unset;
    cursor: pointer;
}

.slider:focus-visible {
    outline-style: solid;
    outline-offset: 13px;
    outline-color: black;
}