/* by default, all ticks show when TickMarks="true" */
/* hide all ticks NOT divisible by 2 - example: 2, 4, 6, 8, 10, 12 ... */
.show-every-2nd-tickmark.mud-slider .mud-slider-tickmarks div:not(div:nth-of-type(2n)),
/* hide all ticks NOT divisible by 5 - excluding the first tick - example: 1, 5, 10, 15, 20, 25 ... */
/*.show-every-5th-tickmark.mud-slider .mud-slider-tickmarks div:not(div:nth-of-type(5n+1)):not(div:first-of-type),*/
.show-every-5th-tickmark.mud-slider .mud-slider-tickmarks div:not(div:nth-of-type(5n+1)),
/* hide all ticks NOT divisible by 10 - excluding the first tick - example: 1, 10, 20, 30, 40, 50 ... */
.show-every-10th-tickmark.mud-slider .mud-slider-tickmarks div:not(div:nth-of-type(10n)):not(div:first-of-type),
/* hide all ticks NOT divisible by 20 - example: 20, 40, 60, 80 ... example: 20000, 40000, 60000, 80000 ... */
.show-every-20th-tickmark.mud-slider .mud-slider-tickmarks div:not(div:nth-of-type(20n+1)):not(div:first-of-type) {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* hide the first and last track ticks */
.hide-first-track-tick.mud-slider .mud-slider-tickmarks div:first-child .mud-slider-track-tick,
.hide-last-track-tick.mud-slider .mud-slider-tickmarks div:last-child .mud-slider-track-tick {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* by default, the slider value label shows only when sliding and ValueLabel="true" */
/* always show the slider value label */
.mud-slider .mud-slider-value-label {
    opacity: 100 !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.43;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
}

/* always show an upside-down triangle under the slider value label */
.mud-slider .mud-slider-value-label::before {
    position: absolute;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    transform: translate(-50%, 50%) rotate(45deg);
    background-color: inherit;
    bottom: 0;
    left: 50%;
}

.mud-slider.mud-slider-large .mud-slider-track-tick {
    background-color: white;
}

.mud-slider.mud-slider-large .mud-slider-value-label {
    transform: translateX(-50%) translateY(-115%);
}

.mud-slider.mud-slider-large .mud-slider-filled {
    height: 0.625rem;
    background-color: #3481a4;
    border-radius: 0.625rem;
}

.mud-slider.mud-slider-large {
    padding: 2rem 1rem 0.95rem 1rem;
}

.mud-slider.mud-slider-large .mud-slider-inner-container:first-of-type {
    margin: 0 0 0 -0.75rem;
    width: calc(100% + 1.5rem);
}

.mud-slider.mud-slider-large .mud-slider-track-tick {
    margin-left: -.25rem;
    width: .25rem;
    height: .25rem;
    z-index: 9;
}

.mud-slider.mud-slider-large .mud-slider-track-tick-label {
    width: 2.5rem;
    color: #00000099;
    text-align: center;
    transform: translateX(-1.25rem) translateY(60%);
}


/* adustments for mozilla firefox - because you can't put a negative margin on the range input */
@-moz-document url-prefix() {
    .mud-slider.mud-slider-large {
        padding: 2rem 1rem 0.95rem 1rem;
    }

    .mud-slider .mud-slider-tickmarks {
        padding: 0 0.75rem;
    }

    .mud-slider.mud-slider-large .mud-slider-value-label {
        /* todo: this needs adjustments */
    }

    .mud-slider.mud-slider-large .mud-slider-inner-container:first-of-type {
        margin: 0;
        width: 100%;
    }
}



.mud-slider.mud-slider-large .mud-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    margin-top: -0.5rem;
    border: solid 0.063rem #3481a4;
    background-color: #fff;
    transform: scale(1);
}
.mud-slider.mud-slider-large .mud-slider-input::-moz-range-thumb {
    height: 1.5rem;
    width: 1.5rem;
    margin-top: -0.6rem;
    border: solid 0.063rem #3481a4;
    background-color: #fff;
    transform: scale(1);
}
.mud-slider.mud-slider-large .mud-slider-input::-ms-thumb {
    height: 1.5rem;
    width: 1.5rem;
    margin-top: -0.6rem;
    border: solid 0.063rem #3481a4;
    background-color: #fff;
    transform: scale(1);
}


.mud-slider.mud-slider-large .mud-slider-input::-webkit-slider-runnable-track {
    height: 0.625rem;
    margin: 0.875rem -0.75rem;
}
.mud-slider.mud-slider-large .mud-slider-input::-moz-range-track {
    height: 0.625rem;
    margin: 0.875rem -0.75rem;
}
.mud-slider.mud-slider-large .mud-slider-input::-ms-track {
    height: 0.625rem;
    margin: 0.875rem -0.75rem;
}