/* VIEW CONTROL CONTAINER */

#spaceControlContainer {

    position: absolute;

    display: none;
    gap: 0px;
    grid-template-columns: 1fr 100px 1fr;
    grid-template-rows: var(--titleBar-height);
    grid-template-areas:
        "model slider pano";

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

    width: 300px;
    left: 50%;
    bottom: var(--titleBar-bottom);
    margin-left: -150px;

    overflow: hidden;

}



#spacesMobileToggle {

    display: none;

}

#spaceControlModel {

    grid-area: model;
    justify-self: end;

    line-height: var(--titleBar-height);
    height: var(--titleBar-height);
    padding-right: 10px;

    cursor: pointer;

}

#spaceControlPano {

    grid-area: pano;
    justify-self: start;

    line-height: var(--titleBar-height);
    height: var(--titleBar-height);
    padding-left: 10px;

    cursor: pointer;

}



#spaceControlSelected {

    display: none;

}




/* VIEW CONTROL SLIDER */

#spaceControl {

    grid-area: slider;

    display: inline-block;
    position: absolute;

    width: 100px;
    height: var(--titleBar-height);
    left: 50%;

    margin-left: -50px;

    overflow: hidden;
}



/* If there is a fullscreen button, viewControlToggle must placed a bit to the left */
body.fullscreen-enabled #spaceControl {
    margin-right: calc(2 * var(--titleBar-height));
}



/* CUSTOM SLIDER STYLING */

#spaceSlider {

    position: absolute;
    cursor: pointer;
    -webkit-appearance: none;
    margin: 0px 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);

}

#spaceSlider:focus {
    outline: none;
}

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

}

#spaceSlider::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: var(--hover-rgb);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}

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

}

#spaceSlider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border: 0px;
    border-radius: 10px;
    background: var(--hover-rgb);
    cursor: pointer;
    margin-top: -8px;
}

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

}

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

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

#spaceSlider::-ms-thumb {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background: var(--hover-rgb);
    cursor: pointer;
    margin-top: -8px;
}



/* VIEW CONTROL MARKER */

.spaceControlMarker {

    grid-area: slider;

    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100px;
    height: var(--titleBar-height);
    left: 50%;

    margin-left: -50px;

    overflow: hidden;

}

.spaceControlMarker>div {

    width: 16px;
    height: 16px;
    border-radius: 8px;

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

}