.slidecontainer {
    height: 60px;
    padding-top: 22px;
    max-width: 550px;
}


:root {
    --slider-max-width: 550px;
    --slider-handle-size: 60px;
    --slider-handle-border-radius: 50%;
    --slider-handle-margin-top: -22px;
    --slider-handle-background: url(/Images/ShiftButton_M.png);
    --slider-track-color: #D0D0D0;
    --slider-track-height: 16px;
    --slider-track-border-radius: 8px;
    --slider-track-top-position: calc(var(--slider-handle-size) / 2 - var(--slider-track-height) / 2);
    --slider-progress-color: #27AE60;
    --slider-tick-height: 18px;
    --slider-tick-top-margin: 16px;
    --slider-tick-top-position: calc(var(--slider-track-top-position) + var(--slider-track-height) + var(--slider-tick-top-margin));
    --slider-tick-label-top-margin: 6px;
}

* {
    box-sizing: border-box;
}

.tick-slider-container {
    width: 100%;
    height: fit-content;
    min-height: calc(var(--slider-tick-top-position) + var(--slider-tick-height) * 2);
    max-width: var(--slider-max-width);
}

.tick-slider {
    position: relative;
    width: 100%;
}

.tick-slider-background,
.tick-slider-progress,
.tick-slider-tick-container {
    position: absolute;
    left: 0;
    top: var(--slider-track-top-position);
    height: var(--slider-track-height);
    pointer-events: none;
    border-radius: var(--slider-track-border-radius);
    z-index: 1;
}

.tick-slider-background {
    width: 100%;
    background-color: var(--slider-track-color);
}

.tick-slider-progress {
    background-color: var(--slider-progress-color);
}

.tick-slider-tick-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(var(--slider-handle-size) / 2);
    top: var(--slider-tick-top-position);
}

.tick-slider-tick {
    width: 1px;
    height: var(--slider-tick-height);
    background-color: #707070;
}

.tick-slider-label {
    opacity: 0.85;
    transition: opacity 0.1s ease;
}

    .tick-slider-label.hidden {
        opacity: 0;
    }

/* REMOVE SLIDER STYLE DEFAULTS */

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: var(--slider-handle-size);
    background: transparent;
    outline: none;
    margin: 0;
    padding: 0;
    border: none;
    z-index: 10;
    position: absolute;
}

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        z-index: 10;
    }

    input[type="range"]:focus {
        outline: none;
    }

    input[type="range"]::-moz-focus-outer {
        border: 0;
    }

datalist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    top: calc(var(--slider-tick-top-position) + var(--slider-tick-height) + var(--slider-tick-label-top-margin));
}

    datalist option {
        width: var(--slider-handle-size);
        text-align: center;
        padding: 0;
        font-size: 18px;
        font-weight: bold;
        line-height: 21px;
        color: #00693D;
    }
/* HANDLE */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--slider-handle-size);
    height: var(--slider-handle-size);
    background: var(--slider-handle-background);
    border-radius: var(--slider-handle-border-radius);
    cursor: pointer;
    margin-top: var(--slider-handle-margin-top);
    /*-webkit-transform: scale(1);
    transform: scale(1);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    width: var(--slider-handle-size);
    height: var(--slider-handle-size);
    background: var(--slider-handle-background);
    border: none;
    border-radius: var(--slider-handle-border-radius);
    cursor: pointer;
    /*transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
}


/* TRACK */

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--slider-track-height);
    cursor: pointer;
    background: none;
    border-radius: var(--slider-track-border-radius);
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: var(--slider-track-height);
    cursor: pointer;
    background: none;
    border-radius: var(--slider-track-border-radius);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: none;
}

input[type="range"]:active::-webkit-slider-runnable-track {
    background: none;
}