/* hide elements that not need */
.esri-time-slider__time-extent,
.esri-time-slider__min,
.esri-time-slider__max,
.esri-time-slider__previous,
.esri-time-slider__animation,
.esri-time-slider__next {
    display: none !important;
}
.time-slider-container.esri-time-slider__layout--compact
    .esri-time-slider__row:nth-child(1),
.time-slider-container.esri-time-slider__layout--compact
    .esri-time-slider__row:nth-child(3) {
    display: none !important;
    height: 0;
}

/* set widget background to transparent*/
.customized-time-slider.esri-widget {
    background-color: transparent;
    box-shadow: none !important;
}

/* remove min width of time slider when screen is 1500px wide or smaller to make the layout more responsive */
@media only screen and (max-width: 1500px) {
    .customized-time-slider.esri-widget {
        min-width: auto;
    }
}

.customized-time-slider .esri-time-slider__slider {
    background: transparent;
    padding: 0 20px;
}

.customized-time-slider .esri-time-slider__slider .esri-slider {
    background: transparent;
}

/* use theme color */
.customized-time-slider .esri-slider__ticks {
    @apply text-custom-light-blue;
}

.esri-time-slider__mode--time-window .esri-slider__segment-1 {
    @apply bg-custom-light-blue;
}

.esri-time-slider__mode--time-window .esri-slider__segment-2,
.esri-time-slider__mode--time-window .esri-slider__segment-0,
.esri-time-slider__mode--instant .esri-slider__segment-0,
.esri-time-slider__mode--instant .esri-slider__segment-1 {
    background-color: #00232f;
    border: 1px solid #193d49;
}

.customized-time-slider .esri-slider__thumb {
    @apply border-2 border-custom-light-blue bg-custom-light-blue;
    filter: drop-shadow(2px 2px 6px black);
}
