.mui-appbar, .mui-appbar--flex{
    background-color: var(--coal);
    color: var(--white);
    display: flex;
    align-items: center;
    height: 100px;
    position: fixed;
    width: 100vw;
    z-index: 10;
}

.menu-open{
    z-index: 0;
}

.mui-appbar--flex{
    justify-content: space-between;
}

.mui-appbar .appbar-item, .mui-appbar--flex .appbar-item{
    max-height: 60px;
    /* max-width: 156px; */
}

.js-header-logo picture img{
    height: 60px;
}

.js-header-logo{
    z-index: 3;
    margin: auto;
}

.js-header-username{
    font-size:20px;
    padding-left: 30px;
}

#js-logout svg{
    height: 36px;
    width: 36px;
}

#js-logout{
    padding: 20px;
}

.js-hamburger-menu-overlay{
    background-color: var(--turquoise);
    min-height: 100vh;
    min-width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

.appbar-menu-open{
    background-color: transparent;
}

.appbar-menu-open #js-logout{
    color: transparent;
}

.appbar-menu-open #maticstatus{
    color: transparent;
}

#maticstatus{
    font-size: 1.8rem;
}

#maticstatus.error{
    color:var(--red);
}
#maticstatus.busy{
    color:var(--orange);
}



#js-hamburger-btn{
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.transparent-transition{
    background-color: transparent;
    transition: background-color .8s ease-in-out;
}