.xP {
   display: block;
   padding: var(--property-padding) !important;
   border-width: var(--property-border-width);
   border-style: var(--property-border-style);
   border-color: var(--property-border-color);
   border-radius: var(--property-border-radius);
   background-color: var(--property-background-color);
   box-shadow: var(--property-shadow);
}

.xP > tbody,
.xP > tbody > tr,
.xP > tbody > tr > td {
   display: flex;
}

.xP > tbody {
   flex-direction: column;
   gap: var(--property-gap);
}

.xP > tbody > tr {
   gap: var(--property-label-gap);
}

.xP td[ct="c"] {
   flex: 1 0 auto;
   font-family: var(--property-label-font-family);
   font-size: var(--property-label-font-size);
   font-weight: var(--property-label-font-weight);
   font-style: var(--property-label-font-style);
   line-height: var(--property-label-line-height);
   letter-spacing: var(--property-label-letter-spacing);
   color: var(--property-label-text-color);
   align-self: center;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.xP td[ct="c"]:empty {
   flex: 0;
}

.xP td[ct="p"] {
   flex: 1 0 auto;
   max-width: 75%;
   justify-content: flex-end;
}

.xP td[ct="p"] {
   flex: 1 0 auto;
   max-width: 75%;
   justify-content: flex-end;
}

.xP td[ct="c"]:empty + td[ct="p"] {
   flex: 1;
   max-width: none;
}
.xP td[ct="cp"] {
   width: 100%;
}
.xP td[ct="cp"] input[type="text"] {
   margin-bottom: -1px;
}
.xP td[max] {
   padding-right: 1px;
}

/* ---
-------------------------------------------- */

/* ---
-------------------------------------------- */


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.xP div.xHelper {
   width: 130px;
   z-index: 99;
   white-space: nowrap;
   display: flex;
   flex-direction: row;
}

.xP div.xHelper[helperfixedwidth] {
   width: auto;
}

/*
   div.xHelper[helper='menu']          : special to display a dropdown; not an actual helper type
   div.xHelper[helper='picker']        : default, display picker dialog
   div.xHelper[helper='customdialog']  : displays a user-defined dialog window
   div.xHelper[helper='revert']        : reverts a calculated property to its underlying value
   div.xHelper[helper='reset']         : resets an input property to its default value
*/

.xP div.xHelper[helper='revert'] > :is(input:not([overridden]), textarea:not([overridden]), div:not([overridden])) + div {
   display: none;
}

.xP textarea.multiline:not(.wordwrap) {
   white-space: nowrap;
}

.xP td[cal] {
   position: absolute;
}

.xP td[b] {
   font-weight: bold;
}