.mobile #titleBar {

    width: 50vw;
    height: var(--banner-height);
    bottom: 0;
    left: 25vw;
    right: unset;

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

}



.mobile #leftTitlebarContainer {

    grid-template-columns: 50vw;
    grid-template-rows: 20% 80%;
    grid-template-areas:
        "toggle"
        "text";

    justify-items: center;
    align-items: center;

    width: 50vw;
    height: var(--banner-height);
    left: 25vw;
    bottom: 0;

}



/* TOGGLE */

.mobile #positionMobileToggle {

    grid-area: toggle;

    display: flex;
    justify-content: center;

    width: 100%;
    height: 100%;

}



.mobile #positionMobileToggle .icon {

    width: 100%;
    fill: var(--highlight-rgb);

}



.mobile #positionMobileToggle.enabled .icon.on {

    display: block;

}



.mobile #positionMobileToggle.enabled .icon.off {

    display: none;

}



.mobile #positionMobileToggle .icon.on {

    display: none;

}



.mobile #positionMobileToggle .icon.off {

    display: block;

}



/* SCENE NAME */

.mobile #sceneNameDiv {

    grid-area: text;

    max-width: unset;
    width: 100%;

}



.mobile #sceneName {

    text-align: center;

}