.mobile #timeControlContainer {

    grid-template-columns: 60px 1fr 100px;
    grid-template-rows: var(--mobile-element-height);
    grid-template-areas: "left slider right";

    bottom: calc(3 * var(--mobile-element-height));
    right: 0;
    width: 95vw;

    pointer-events: all;

}



.mobile #timeControlContainer.single {

    display: grid;

}



.mobile #timeControlContainer.closed {

    right: unset;
    margin-left: calc(95vw - 50px);

}



.mobile #timeControlContainer:not(.closed) .icon {

    fill: var(--hover-rgb);

}



/* TOGGLE */

.mobile #timeMobileToggle {

    grid-area: left;

    display: flex;
    flex-flow: row;

    justify-self: end;

}



.mobile #timeMobileToggle .icon.off {

    margin-left: 10px;
    margin-right: -6px;

}



.mobile #timeControlContainer.closed #timeMobileToggle .icon.on {

    display: none;

}



.mobile #timeControlContainer.closed #timeMobileToggle .icon.off {

    display: block;

}



.mobile #timeControlContainer #timeMobileToggle .icon.on {

    display: block;

}



.mobile #timeControlContainer #timeMobileToggle .icon.off {

    display: none;

}





.mobile #timeControlSelected {

    grid-area: right;

    display: block;

    width: 100%;
    height: 100%;
    padding-right: 10px;

}



.mobile #timeControlContainer.single #timeControlSelected {

    grid-area: 1 / 2 / 2 / -1;

}




.mobile #timeControlSelected>p {

    text-align: center;
    line-height: 20px;
    padding-top: calc(var(--mobile-element-height) - 60px);
    padding-bottom: calc(var(--mobile-element-height) - 60px);

    white-space: pre-wrap;

}



.mobile #timeControlContainer.single #timeControlSelected>p {

    line-height: var(--mobile-element-height);

    padding: 0;

    white-space: nowrap;

}


.mobile #timeBackground {

    grid-area: 1 / 1 / 2 / -1;

    border-radius: 0;
    border-top-left-radius: var(--border-radius-mobile);
    border-bottom-left-radius: var(--border-radius-mobile);

}



.mobile #timeControlContainer.single #timeBackground {

    display: block;

}



.mobile #timeControl {

    width: 90%;
    left: 0;
    margin-left: 5%;

}



.mobile #timeItems {

    display: flex;

    width: 90%;
    left: 0;
    margin-left: 5%;
    padding: 0;

}



.mobile #timeControlContainer.single #timeItems {

    display: none;

}



.mobile #timeItems .text {

    display: none;

}



.mobile #timeItems .time {

    width: 26px;
    height: 26px;
    border-radius: 13px;

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

}



.mobile #timeSlider {

    padding: 0;

}


/* THUMB */

.mobile #timeSlider::-webkit-slider-thumb {

    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin-top: -13px;

}

.mobile #timeSlider::-moz-range-thumb {

    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin-top: -83x;

}

.mobile #timeSlider::-ms-thumb {

    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin-top: -83x;

}