body { font-family: sans-serif; margin: 0; padding: 0; display: flex; height: 100vh; overflow: hidden;}
header { background: #222; color: white; padding: 1em; }
.sidebar { width: 300px; background: #f0f0f0; padding: 1em; display: flex;
    flex-direction: column;}
.content { flex: 1; padding: 1em; background: #fff; height: 100%;overflow-y: scroll; margin-bottom: 40px;}
.topbar { background: #444; color: white; padding: 0.5em 1em; }
.logout { float: right; }


#burgerButton {
    font-size: 14px;
    background: rgb(240,240,240);
    border: none;
    margin-right: 10px;
    cursor: pointer;
    display: none;
}

.page
{
    display:flex;
    height: calc(100vh - 40px);
}

@media (max-width : 768px) {


    .hideOnMobile {
        display: none;
    }

    .sidebar {
        display: none;
    }

    .page {
        width: 100%;
    }

    .sidebar {
        display: none;
    }

    #burgerButton {
        display: inline-flex;
    }

    .opened {
        display: block !important;
        position: absolute;
        left: 0;
        top: 37px;
        right: 0;
        bottom: 0;
        z-index: 9999;
        max-width: 100vw;
        width: auto;
        max-height: calc(100vh - 40px);
    }

    .mobilebutton
    {
        font-size: 16px !important;
        height: 22px !important;
        width: 90px !important;
    }
}