.mg-navbar-collapse {
    width: calc((var(--topbar-height) / 2) - 10px);
    height: calc((var(--topbar-height) / 2) - 10px);
    outline: none;
    border: none;
    background: var(--bright-background-color);
    border-radius: var(--border-radius);

    position: fixed;
    right: 15px;
    top: 10px;
    z-index: 999;
    padding: 5px;

    display: none;
}

.mg-navbar-collapse:focus {
    outline: none;
}

.mg-navbar-collapse-icon {
    position: absolute;
    width: calc((var(--topbar-height) / 2) - 30px);
    height: calc((var(--topbar-height) / 2) - 30px);
    left: 10px;
    top: 10px;
}

@media (max-width: 800px) {
    .mobile-seehelper {
        border-top: 1px solid rgba(255, 255, 255, 0.1)
    }

    .mg-sidebar {
        display: none;
    }

    .mg-sidebar-mobile {
        display: block;
        width: 100%;
        top: calc(var((--topbar-height) / 2) +60px) !important;
        height: calc(100% - (var(--topbar-height) / 2)) !important;
        z-index: 999;
        background: var(--background-color);
    }

    .fixedAvatar-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: 15px;
    }

    .fixedNotification-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: calc(20px + 60px + 5px);
    }

    .fixedSearch-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: calc(20px + 60px + 60px + 20px);
    }

    .fixedServer-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: calc(20px + 60px + 60px + 20px + var(--searchbar-width) + 15px);
    }

    :root {
        --searchbar-width: 200px !important;
    }

    .fixedAvatar, .fixedNotification, .fixedSearch, .fixedServer {
        display: none;
    }

    .mg-topbar {
        height: calc(var(--topbar-height) / 2);
        left: 0;
        top: 0;
    }

    .mg-content {
        width: calc(100%);
        left: 0;
        top: calc(var(--topbar-height) / 2);
        height: calc(100% - (var(--topbar-height) / 2));
    }

    .mg-navbar-collapse {
        display: block;
    }
}

@media (max-width: 500px) {
    .mobile-seehelper {
        border-top: 1px solid rgba(255, 255, 255, 0.1)
    }

    .mg-dropdown-menu {
        top: calc((var(--topbar-height) / 2) + 72px);
    }

    .mg-dropdown-menu-notification {
        top: calc((var(--topbar-height) / 2) + 72px);
    }

    .mg-sidebar {
        display: none;
    }

    .serverBrowser {
        width: 100%;
        overflow: auto;
        z-index: 9999 !important;
    }

    .hidden {
        right: -100%;
    }

    .mg-sidebar-mobile {
        display: block !important;
        width: 100%;
        top: calc(var((--topbar-height) / 2) +60px) !important;
        height: calc(100% - (var(--topbar-height) / 2)) !important;
        z-index: 999;
        background: var(--background-color);
    }

    .fixedAvatar-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: 15px;
    }

    .fixedNotification-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: calc(20px + 60px + 5px);
    }

    .fixedSearch-mobile {
        position: fixed;
        z-index: 999;
        top: 130px !important;
        display: block !important;
        right: 10px;
    }

    .fixedServer-mobile {
        position: fixed;
        z-index: 999;
        top: 60px !important;
        display: block !important;
        right: calc(20px + 60px + 60px + 20px) !important;
    }

    :root {
        --searchbar-width: 200px !important;
    }

    .fixedAvatar,
    .fixedNotification,
    .fixedSearch,
    .fixedServer {
        display: none;
    }

    .mg-topbar {
        height: calc(var(--topbar-height) / 2);
        left: 0;
        top: 0;
    }

    .mg-content {
        width: calc(100%);
        left: 0;
        top: calc(var(--topbar-height) / 2);
        height: calc(100% - (var(--topbar-height) / 2));
    }

    .mg-navbar-collapse {
        display: block;
    }
}

@media (max-width: 1350px) {
    .mg-sidebar {
        height: calc(100% - var(--topbar-height));
        top: var(--topbar-height);
    }

    .mg-topbar {
        left: 0;
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .mg-sidebar {
        height: calc(100% - var(--topbar-height));
        top: var(--topbar-height);
    }

    .mg-topbar {
        left: 0;
        width: 100%;
    }

    :root {
        --searchbar-width: 200px;
    }
}