body {
    --menuWidth: 260px;
    --menuBarHeight: 65px;
    --menuTopBorder: 2px;
}

h1.pageTitle {
    position: fixed;
    right: inherit;
    width: calc(var(--menuWidth) - 28px);
    min-width: 260px;
    left: 14px;
}

body div.mobileSideMenu{
    position: fixed;
    float:left;
    left:0;
    transition: width 0.1s ease-in-out;
    width: var(--menuWidth);
    height: calc(100% - var(--menuBarHeight) - var(--menuTopBorder));
    padding: 1px 0 0;
    top: calc(var(--menuBarHeight) + var(--menuTopBorder));
}

body div.mobileMenu {
    /* width: var(--menuWidth); */
    z-index: 5;
    border-bottom: var(--menuTopBorder) solid rgb(255 255 255 / 30%);
}
div.mobileMenu div.menuButton{
    display:none !important;
}
.menuScroller.subMenu{
    width: calc(var(--menuWidth) - 9px);
}
div.mobileSideHolder.opened{
    /* transform: none; */
}
div.mobileSideMenu a.menuItem{
    width:50%;
    cursor: pointer;
}
.menuToggle{
    position:absolute;
    top: calc(var(--menuBarHeight) + 2px);
    left: var(--menuWidth);
    background-color: rgb(196 30 116);
    cursor:pointer;
    width: 40px;
    height: 40px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    cursor:pointer;
    z-index: 4;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 22%);
}

body.menuClosed .menuToggle{
    transform: scaleX(-1);
}
body.menuClosed{
    --menuWidth: 50px;
}
body.menuClosed div.mobileSideMenu a.menuItem{
    width:100%;
}
body.menuClosed div.mobileSideMenu .menuItem > i{
    font-size:18px;
}
body.menuClosed div.mobileSideMenu .menuItem span{
    display:none;
}