.xPG,
.xPG > tbody > tr,
.xPG > tbody > tr > td,
.xPG > tbody > tr > td > table,
.xPG > tbody > tr > td > table > tbody {
    display: block;
}

.xPG > tbody {
    display: flex;
    flex-direction: column;
    gap: var(--propertygrid-gap-row) 0;
}

.xPG > tbody > tr > td > table > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: var(--propertygrid-gap-column);
}


.xPG > tbody > tr > td > table > tbody > tr > td {
    width: auto !important;
    display: block;
    flex: 1 0 auto;
    padding: var(--propertygrid-padding) !important;
    border-width: var(--propertygrid-border-width);
    border-style: var(--propertygrid-border-style);
    border-color: var(--propertygrid-border-color);
    border-radius: var(--propertygrid-border-radius); 
    background-color: var(--propertygrid-background-color);
    box-shadow: var(--propertygrid-shadow);
}


@media (max-width: 64rem) {
    .xPG > tbody > tr > td > table > tbody > tr {
        flex-direction: column;
        gap: var(--propertygrid-gap-row) 0;
    }
}
/* ---
-------------------------------------------- */


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
/* Property Grid */
/* all flow grids - category display state */
:is(.xRgn[locked='prop'], .xRgn[locked='cat']) .xPG,
:is(.xRgn[locked='prop'], .xRgn[locked='cat']) .xPG :is(input, textarea, .xComboBox),
/* all flow grids  - property display state */
.xPG tr[proplocked],
.xPG tr[proplocked] :is(input, textarea, .xComboBox),
/* single option flow grid - option display state */
.xPG[locked],
.xPG[locked] :is(input, textarea, .xComboBox) {
    color: darkgray !important;
}

/* all category grids - category display state */
.xRgn[locked='prop'] .xCatGrid,
.xRgn[locked='prop'] .xCatGrid .xCtl,
.xRgn[locked='prop'] .xCatGrid .xCtl input:not([type=range]),
.xRgn[locked='prop'] .xCatGrid .xCtl > .xHelper > .xInputPlaceholder,
.xRgn[locked='prop'] .xCatGrid .xCtl > div,
.xRgn[locked='prop'] .xCatGrid .xStatic,
/* horiz grid - option display state */
.xCatGrid tr[locked] .xCtl,
.xCatGrid tr[locked] .xCtl input:not([type=range]),
.xCatGrid tr[locked] .xCtl > .xHelper > .xInputPlaceholder,
.xCatGrid tr[locked] .xCtl > div,
.xCatGrid tr[locked] .xStatic,
/* horiz grid - property display state */
.xCatGrid tr[proplocked] .xCtl,
.xCatGrid tr[proplocked] .xCtl input:not([type=range]),
.xCatGrid tr[proplocked] .xCtl > .xHelper > .xInputPlaceholder,
.xCatGrid tr[proplocked] .xCtl > div,
.xCatGrid tr[proplocked] .xStatic,
/* vert grid - option display state */
.xCatGrid .xCtl[locked],
.xCatGrid .xCtl[locked] input:not([type=range]),
.xCatGrid .xCtl[locked] > div,
.xCatGrid .xStatic[locked],
/* vert grid - property display state */
.xCatGrid .xCtl[proplocked],
.xCatGrid .xCtl[proplocked] input:not([type=range]),
.xCatGrid .xCtl[proplocked] > div,
.xCatGrid .xStatic[proplocked] {
    background-color: #efefef !important;
    color: darkgray !important;
}

.xRgn[locked='cat'] .xCatGrid,
.xRgn[locked='cat'] .xCatGrid .xSys,
.xRgn[locked='cat'] .xCatGrid .xBtn {
    background-color: #efefef !important;
    color: darkgray !important;
}

.xPG[maxgridwidth],
.xPGOuter[maxgridwidth],
.xPG[maxgridwidth] table,
.xPGOuter[maxgridwidth] table {
    width: 100%
}

table.xPGOuter,
fieldset.xPGOuter>table,
table.xPG,
fieldset.xPG>table {
    border-collapse: collapse;
}

/* row, column header style id */
table.xPG td[hdr],
fieldset.xPG>table td[hdr] {
    height: 19px;
    vertical-align: middle;
    padding: 2px 3px;
    font-weight: bold;
}

table.xPGOuter td[title] {
    padding: 2px 3px;
    font-weight: bold;
}

fieldset.xPG {
    display: block;
}

fieldset.xPGOuter legend[title] {
    padding-left: 3px;
    padding-right: 5px;
    font-weight: bold;
}

.xPG > tbody > tr > td > table,
fieldset.xPG > table > tbody > tr > td > table {
    border-collapse: collapse;
    text-align: left;
}