/*========================================================================
	ADVANCED CUSTOM FLEX
========================================================================*/
[data-flex] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
}

/*========================================================================
	ADVANCED CUSTOM GRID
========================================================================*/
[data-grid] {
	display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    gap: 1rem;
    align-items: baseline;
}
[data-grid] > * {
    --sm-start: auto;/* Default column start */
    grid-column-start: var(--sm-start);
    
    --sm-span: 12; /* Default column span */
    grid-column-end: span var(--sm-span);
    
    --sm-halign: flex-start;
    justify-content: var(--sm-halign);
    
    --sm-valign: baseline;
    align-items: var(--sm-valign);
    
    margin: 0;
}
/*form[data-grid] > :not([data-grid]) {
	display: flex;
    flex-wrap: wrap;
}*/
@media only screen and (min-width: 650px) {
    [data-grid] > * {
        --md-start: var(--sm-start, auto);/* Default column start */
        grid-column-start: var(--md-start);

        --md-span: var(--sm-span, 12); /* Default column span */
        grid-column-end: span var(--md-span);
    
        --md-halign: var(--sm-halign, flex-start);
        justify-content: var(--md-halign);

        --md-valign: var(--sm-valign, baseline);
        align-items: var(--md-valign);
    }
}
@media only screen and (min-width: 1200px) {
    [data-grid] > * {
        --lg-start: var(--md-start, auto);/* Default column start */
        grid-column-start: var(--lg-start);

        --lg-span: var(--md-span, 12); /* Default column span */
        grid-column-end: span var(--lg-span);
    
        --lg-halign: var(--md-halign, flex-start);
        justify-content: var(--lg-halign);

        --lg-valign: var(--md-valign, baseline);
        align-items: var(--lg-valign);
    }
}
/*========================================================================
	ADVANCED CUSTOM FLEX/GRID CHILDREN
========================================================================*/
[data-flex] > .valign,
[data-grid] > .valign {
	align-items: center;
}
[data-flex] > [data-label],
[data-grid] > [data-label] {
    
}
[data-flex] > [data-label]::before,
[data-grid] > [data-label]::before {
	content: attr(data-label);
    display: block;
    font-size: .85em;
    font-style: italic;
    color: #444;
    width: 100%;
    white-space: nowrap;
    overflow-y: hidden;
}
[data-grid] > [data-controls] {
	display: flex;
    gap: 1rem;
    align-items: center;
}
/* A data-flex within a data-grid should grow to fit the grid area */
[data-grid] > [data-flex] > :last-child {
    flex-grow: 1;
}
/* allow an input within a grid, flex, or table cell item to fill its container */
[data-flex] > * > .fill,
[data-grid] > * > .fill,
td > .fill {
	width: 100%;
}

/*==============================================================================
    Loading Indicator
==============================================================================*/
[data-loading]:empty {
    display: flex !important;
    flex-direction: column !important;
    place-content: center !important;
/*    background-color: #eee;*/
    padding: 1rem 0;
}
[data-loading]:empty::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 900 (Solid), 400 (Regular or Brands), 300 (Light) */
    content: '\f110'; /* spinner */
    animation: fa-spin 3s infinite linear;
    align-self: center;
    font-size: 2.6em;
}
[data-loading]:empty::after {
    content: attr(data-loading);
    text-align: center;
    font-size: 1.4em;
    margin-top: 0.25em;
}