:root {
    --app-content-max: 1280px;
    --app-content-gutter: clamp(20px, 3vw, 36px);
}

body:not(.login-body) > .app-content-container {
    box-sizing: border-box;
    flex: 1 0 auto;
    margin: 24px auto 0 !important;
    max-width: var(--app-content-max) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: calc(100% - (var(--app-content-gutter) * 2)) !important;
}

body:not(.login-body) > .app-content-container > :is(
    .dashboard,
    .monitored-page,
    .process-page,
    .notifications-page,
    .mission-notifications-page,
    .parts-page,
    .mission-record-page,
    .new-mission-page,
    .party-details-page,
    .party-form-page,
    .party-link-page,
    .settings-page
) {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.new-mission-page > .mission-page-inner {
    width: 100%;
}

@media (max-width: 720px) {
    :root {
        --app-content-gutter: 16px;
    }

    body:not(.login-body) > .app-content-container {
        margin-top: 18px !important;
    }
}

@media (max-width: 430px) {
    :root {
        --app-content-gutter: 12px;
    }
}