.mainlayout.mud-drawer-close-mini-md-left.mud-drawer-left-clipped-never .mud-appbar.app-bar,
.mainlayout.mud-drawer-open-mini-md-left.mud-drawer-left-clipped-never .mud-appbar {
    width: 100%;
    margin-left: 0;
}

.mainlayout .app-bar .user-name {
    color: white;
    margin-right: 1rem;
}

.mainlayout .drawer {
    top: var(--mud-appbar-height);
}


.mainlayout .mud-main-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.mainlayout .mud-container {
    display: flex;
    flex-grow: 1;
    padding-bottom: 1rem;
    margin-top: 1rem;
}


.mainlayout .main-paper {
    padding: 1.5rem 2rem 2rem 2rem;
    width: 100%;
    height: 100%;
}

.mainlayout .user-avatar > button {
    background: white;
    color: black;
}

    .mainlayout .user-avatar > button:hover,
    .mainlayout .user-avatar > button:focus-visible {
        box-shadow: 0 0 0 0.3rem #404040;
    }

.derivative-xpert-title {
    margin-top: 9.5rem;
    padding-bottom: 2rem;
    font-size: 2.7rem !important;
}

@media screen and (max-width: 1700px) {
    .mainlayout .main-paper {
        padding: 1rem 2rem 2rem 2rem;
    }


}
@media screen and (max-width: 1300px) {
    .derivative-xpert-title {
        margin-top: 2rem;
        padding-bottom: 1.5rem;
        font-size: 2.2rem !important;
    }
}