.oldMobileControlsOverlay {
    touch-action: none;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 10;

    will-change: display;
}

.oldMobileControlsOverlay .bottomLeftLeft {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 25%;
    height: 50%;
}

.oldMobileControlsOverlay .bottomLeftRight {
    position: fixed;
    bottom: 0;
    left: 25%;

    width: 25%;
    height: 50%;
}

.oldMobileControlsOverlay .bottomRightUp {
    position: fixed;
    bottom: 25%;
    left: 50%;

    width: 50%;
    height: 25%;
}

.oldMobileControlsOverlay .bottomRightUp.full {
    bottom: 0;
    height: 50%;
}

.oldMobileControlsOverlay .bottomRightDown {
    position: fixed;
    bottom: 0;
    left: 50%;

    width: 50%;
    height: 25%;
}

.oldMobileControlsOverlay .bottomRightDown.gone {
    display: none;
}

.mobileControlsOverlay {
    position: fixed;

    transform: translateX(-50%) translateY(-50%);

    /* width and height are set in the manager */
    /* border radius is set in the manager */
    border: 2px solid rgba(255, 255, 255, 0.6);

    background-color: rgba(255, 255, 255, 0.2);

    will-change: display, left, top, opacity;
}

.mobileControlsOverlay .mobileControlsCircle {
    transform: translateX(-50%) translateY(-50%);

    width: 40px;
    height: 40px;

    border-radius: 20px;

    background-color: #ffffff;
}

.mobileControlsOverlay .mobileControlsCircle.mobileControlsInnerCircle {
    position: absolute;
    top: 50%;
    left: 50%;
}

.mobileControlsOverlay .mobileControlsCircle.mobileControlsTouchCircle {
    position: absolute;

    will-change: left, top;
}