:root {

    --times-slider-width: 300px;
    --times-slider-height: 40px;

}


#timeControlContainer {

    position: absolute;

    display: none;
    gap: 0px;
    grid-template-columns: 1fr var(--times-slider-width) 1fr;
    grid-template-rows: auto var(--times-slider-height);
    grid-template-areas:
        "left list right"
        "left slider right";

    align-items: center;
    align-content: center;

    width: 100vw;
    height: auto;
    right: unset;

    bottom: calc(var(--titleBar-height) + 2 * var(--titleBar-bottom));

    pointer-events: none;

}



#timeControlSelected,
#timeMobileToggle {

    display: none;

}



#timeBackground {

    grid-area: slider;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: var(--border-radius);
    background-color: var(--background-rgb);
    background-color: var(--background-rgba);

}



#timeControlContainer.single #timeBackground {

    display: none;

}



/* ITEM STYLING */

#timeItems {

    grid-area: slider;

    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;

    width: unset;
    height: var(--times-slider-height);
    left: unset;
    padding: 0px 5px;

    pointer-events: all;

}



#timeControlContainer.single #timeItems {

    justify-content: center;

}



#timeItems .time {

    width: 20px;
    height: 20px;
    border-radius: 10px;

    background-color: var(--highlight-rgb);
    cursor: pointer;

}



#timeControlContainer.single #timeItems .time {

    width: 100%;

    background-color: rgba(0, 0, 0, 0);
    cursor: auto;

}



#timeItems .time.current {

    font-weight: 600;
    color: var(--hover-rgb);

}

#timeItems .text {

    position: absolute;

    line-height: var(--times-slider-height);

    width: max-content;
    height: var(--times-slider-height);

    padding: 0px 10px;
    bottom: 27px;

    border-radius: var(--border-radius);
    background-color: var(--background-rgb);
    background-color: var(--background-rgba);

    -webkit-transform-origin: 0px center;
    -ms-transform-origin: 0px center;
    transform-origin: 0px center;

    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);

}



#timeControlContainer.single #timeItems .text {

    position: relative;

    height: var(--titleBar-height);
    margin: auto;
    bottom: var(--titleBar-bottom);

    -webkit-transform-origin: 0px center;
    -ms-transform-origin: 0px center;
    transform-origin: 0px center;

    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);

}



/* SLIDER STYLING */

#timeControl {

    grid-area: slider;

    display: inline-block;
    position: absolute;

    width: 100%;
    height: 100%;
    left: unset;
    margin-left: unset;

    overflow: visible;

    pointer-events: all;

}



#timeControlContainer.single #timeControl {

    display: none;

}



#timeSlider {

    cursor: pointer;
    -webkit-appearance: none;

    width: 100%;
    height: 100%;

    padding: 0px 5px;
    margin: 0px 0px;

    background: rgba(0, 0, 0, 0);

}



#timeSlider:focus {
    outline: none;
}

#timeSlider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--highlight-rgb);
    border-radius: 2px;
}

#timeSlider::-webkit-slider-thumb {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background: var(--hover-rgb);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -13px;
}

#timeSlider::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--highlight-rgb);
    border-radius: 2px;
}

#timeSlider::-moz-range-thumb {
    height: 30px;
    width: 30px;
    border: 0px;
    border-radius: 15px;
    background: var(--hover-rgb);
    cursor: pointer;
    margin-top: -13px;
}

#timeSlider::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-radius: 2px;
    color: transparent;
}

#timeSlider::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

#timeSlider::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

#timeSlider::-ms-thumb {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    background: var(--hover-rgb);
    cursor: pointer;
    margin-top: -13px;
}