:root {
    --ffx-col-gap: 20px;
}

.grid-row-evenly {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: var(--ffx-col-gap);
}

.command-flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding-block-start: 1rem;
    gap: var(--ffx-col-gap);
}

.desktop-flex-row {
    display: flex;
    flex-direction: column;
}

.desktop-flex-row-control-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 1ch;
    column-gap: 1rem;
}

.desktop-flex-column {
    display: flex;
    flex-direction: row;
}

.desktop-grid-row {
    display: grid;
    grid-template-columns: 1fr;
}

/* ============================================================= Form-Controls-Desktop */
@media (768px <=width < 99000px) {

    .desktop-flex-row {
        flex-direction: row;
        column-gap: var(--ffx-col-gap);
    }

    .desktop-flex-row-control-group {
        flex-direction: row;
        align-items: center;
    }

    .desktop-flex-column {
        flex-direction: column;
    }

    .desktop-grid-row {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        column-gap: var(--ffx-col-gap);
    }

    .desktop-grid-row__auto-max-content {
        display: grid;
        grid-template-columns: auto max-content;
        column-gap: var(--ffx-col-gap);
    }

    .desktop-grid-row__max-content-auto {
        display: grid;
        grid-template-columns: max-content auto;
        column-gap: var(--ffx-col-gap);
    }
}

.appx_body:not(.appx-custom-layout) {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;

    &>#appx_body_main {
        /* !padding for main top must be at least 1px to avoid h1, h2 margin-top to leak out */
        padding: 1px 5px 35px 5px;
    }

    &>#appx_body_header,
    &>#appx_body_footer {
        position: relative;
        max-width: calc(var(--vw100, 1vw) * 100);

        &:empty {
            display: none;
        }
    }

    &>#appx_body_footer {
        background-color: #c3d3d3;
        padding: 5px;
    }
}