.mobile #floorSelectionContainer {

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

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

    pointer-events: all;

}


.mobile #floorSelectionContainer.closed {

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

}



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

    fill: var(--hover-rgb);

}


/* GRID CHILDREN */


/* TOGGLE */

.mobile #floorMobileToggle {

    grid-area: left;

    display: flex;
    flex-flow: row;
    align-items: center;

    height: 100%;

    justify-self: end;

    pointer-events: all;

}



/* TOGGLE DISABLED */

.mobile #floorOff {

    fill: var(--icon-disabled-rgb);

}



.mobile #floorSelectionContainer.disabled #floorMobileToggle {

    pointer-events: none;

}



.mobile #floorSelectionContainer.disabled #floorMobileToggle #floorOff {

    display: block;

}



.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor0,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor1,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor2,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor3 {

    display: none;

}



.mobile #floorSelectionContainer #floorMobileToggle #floorOff,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor0,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor1,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor2,
.mobile #floorSelectionContainer.disabled #floorMobileToggle #floor3 {

    display: none;

}



/* TOGGLE TOGGLING */

.mobile #floorMobileToggle .icon.on,
.mobile #floorMobileToggle .icon.off {

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

}



.mobile #floorSelectionContainer.disabled #floorMobileToggle .icon.on,
.mobile #floorSelectionContainer.disabled #floorMobileToggle .icon.off {

    fill: var(--icon-disabled-rgb);

}


.mobile #floorSelectionContainer.closed #floorMobileToggle .icon.on {

    display: none;

}



.mobile #floorSelectionContainer.closed #floorMobileToggle .icon.off {

    display: block;

}



.mobile #floorSelectionContainer #floorMobileToggle .icon.on {

    display: block;

}



.mobile #floorSelectionContainer #floorMobileToggle .icon.off {

    display: none;

}





.mobile #floorControlSelected {

    grid-area: right;

    display: block;

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

}



.mobile #floorControlSelected>p {

    text-align: end;
    line-height: var(--mobile-element-height);

}



.mobile #floorSelectionHover {

    display: none;

    pointer-events: none;

}



.mobile #floorSliderBackground,
.mobile #floorSelectionContainer:hover #floorSliderBackground {

    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 #floorSliderThumbs {

    grid-area: slider;

    flex-flow: row;

    width: 90%;
    margin-left: 5%;
    height: var(--mobile-element-height);

}



.mobile #floorSliderContainer {

    grid-area: slider;
    height: var(--mobile-element-height);

}



.mobile #floorSliderThumbTexts {

    grid-area: slider;

    flex-flow: row;

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

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

}



.mobile #floorSliderThumbTexts .text {

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

}



/* SLIDER */

.mobile #floorSlider {

    width: 90%;
    margin-left: 5%;
    height: var(--mobile-element-height);
    left: 0;
    top: 0;

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


}



/* FLOOR LIST */

.mobile #floorList {

    grid-area: slider;

    display: none;

}