#ui.v3 {
    .ui-height-full-minus-top {
        min-height: calc(100vh - var(--layout-app-toolbar-height) - var(--layout-grid-gap));
    }
    .ui-grid-row-boxes:not(.row),
    .row.ui-grid-row-boxes>div {
        border-radius: var(--layout-card-radius);
        padding: var(--layout-card-padding);
        background-color: var(--color-bg-table-drilled-level1);
    }
    .ui-grid-row-boxes:not(.row) {
        display: block;
    }
    .ui-grid-row-borderBoxes>div {
        border-radius: var(--layout-card-radius);
        padding: var(--layout-card-padding);
        border: 1px solid var(--color-bg-table-drilled-level3);
    }
    .ui-grid-row-borderBoxes.ui-grid-row-boxes-nopadding,
    .ui-grid-row-borderBoxes.ui-grid-row-boxes-nopadding>div {
        padding: 0;
    }
    .ui-padding-card {
        padding: var(--layout-card-padding);
    }
    .ui-color-page {
        background-color: var(--layout-bg-color);
    }
    .ui-color-bg-card,
    .row.ui-grid-row-boxes>div.ui-color-bg-card {
        background-color: var(--layout-bg-color-card);
    }
    .ui-color-mono-contrast-low {
        color: var(--color-mono-contrast-low);
    }
    .ui-color-mono-contrast-min {
        color: var(--color-mono-contrast-min);
    }
    .ui-color-status-info-yellow {
        color: var(--color-yellow-info);
    }
    .ui-color-status-warning-orange {
        color: var(--color-yellow-warning);
    }
    .ui-color-status-success-green {
        color: var(--color-green-success);
    }
    .ui-color-icon-info {
        color: var(--color-icon-info);
    }
    .ui-color-status-error-red {
        color: var(--color-red-error);
    }
    .ui-radius-card {
        border-radius: var(--layout-card-radius);
    }
    .ui-margin-grid-gap {
        margin: var(--layout-grid-gap);
    }
    .ui-modal-right {
        position: fixed;
        background-color: var(--layout-bg-color-card);
        z-index: 10;
        right: 0;
        top: 0;
        bottom: 0;
        max-width: 600px;
        box-shadow: var(--color-modal-box-shadow);
        head { height: 0;}
    }
    .ui-flex-row {
        display: flex;
        flex-direction: row;
    }
    .ui-flex-column {
        flex-grow: 1;
    }
    .ui-flex-center {
        align-items: center;
        justify-content: center;
    }
    .ui-flex-space-between {
        justify-content: space-between;
    }
    .ui-flex-space-around {
        justify-content: space-around;
    }
    .ui-flex-space-evenly {
        justify-content: space-evenly;
    }
    .ui-flex-wrap {
        flex-wrap: wrap;
    }
    .ui-flex-no-wrap {
        flex-wrap: nowrap;
    }
    .ui-flex-align-center {
        align-items: center;
    }
    .ui-flex-align-start {
        align-items: flex-start;
    }
    .ui-flex-align-end {
        align-items: flex-end;
    }
    .ui-flex-justify-center {
        justify-content: center;
    }
    .ui-flex-justify-start {
        justify-content: flex-start;
    }
    .ui-flex-justify-end {
        justify-content: flex-end;
    }
    .ui-flex-justify-between {
        justify-content: space-between;
    }
    .ui-flex-justify-around {
        justify-content: space-around;
    }
    .ui-flex-justify-evenly {
        justify-content: space-evenly;
    }
    .ui-margin-top-row-height {
        margin-top: var(--layout-app-toolbar-height);
    }
    .ui-padding-top-row-height {
        padding-top: var(--layout-app-toolbar-height);
        .row > div > yon-card {
                max-height: 90vh;
                overflow-y: auto;
                display: block;
        }
    }
    .ui-margin-top-0,
    .ui-margin-grid-gap.ui-margin-top-0 {
        margin-top: 0;
    }
    .ui-margin-bottom-0,
    .ui-margin-grid-gap.ui-margin-bottom-0 {
        margin-bottom: 0;
    }
    .ui-margin-left-0 {
        margin-left: 0;
    }
    .ui-margin-right-0 {
        margin-right: 0;
    }
    .ui-margin-x-0 {
        margin-left: 0;
        margin-right: 0;
    }
    .ui-margin-y-0 {
        margin-top: 0;
        margin-bottom: 0;
    }
}