/* dlist - datalist maintentance ? */

body.scroll-horizontal {
    overflow-x: auto;
}

body.busy,
body.busy * {
    cursor: wait !important;
}

.dlist-container table, .dlist-container .dlist-footer {
    width: 100%;
}

.dlist-container table {
    padding: 0 0 1vw 0;
}

.dlist-container th
{
    position: relative;
    background-color: var(--theme-color-background);
    border: .2px inset var(--theme-color-border);
    border-radius: .2em;
    color: var(--theme-color-inset);
    padding: .2em .4em;
    transition: all 0.5 ease;
}

.dlist-container thead.clone th {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dlist-container th:not(.dlist-no-sort):hover {
    cursor: pointer;
    opacity: 0.8;
}

.dlist-container th.orderby-asc,
.dlist-container th.orderby-desc {
    padding: .2em .8em .2em .4em;
}

.dlist-container th.orderby-asc::after,
.dlist-container th.orderby-desc::after {
    content: "\02191";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9vw;
    float: right;
    color: rgba(255,255,255,0.6);
    background-color: rgba(0,0,0,0.2);
    border: dotted 1px rgba(0,0,0,0.2);
    border-radius: 50%;
    width: 1.5vw;
    height: 1.5vw;
}

.dlist-container th.orderby-desc::after {
    content: "\02193";
}

.dlist-container th, .dlist-container td {
   xheight: 2.5em;
}

.dlist-header-input
{
    border: .2px inset var(--theme-color-border);
}

.dlist-container td {
    padding: .3em .5em;
    background-color: var(--theme-color-inset);
    border: .2px inset var(--theme-color-border);
    border-radius: .2em;
}

.dlist-container tr.dlist-edit td {
    background-color: #f7f7f7;
}

.dlist-container td > input, .dlist-container td > select,
.dlist-container td > span > input, .dlist-container td > span > select {
    border: solid 1px rgba(0,0,0,0.1) !important;
    background-color: #f0f0f0;
    padding: .2em !important;
    min-width: 4em;
    width: 100%;
}

.dlist-container td > span.select-wrapper {
    width: 100%;
}

.dlist-container tr td:hover:not(.dlist-row-no-edits) {
    cursor: pointer;
}

.dlist-container tbody tr td:hover:not(.dlist-row-no-edits) {
    opacity: 0.8;
}

.dlist-container button {
    width: auto;
}

.dlist-container .dlist-header-text {
    display: inline-block;
    padding: 0 .5vw;
}

.dlist-container .dlist-header-reset {
    margin: 0 .5vw;
}

.dlist-container .dlist-header-add-row {
    float: right;
    margin: 0;
}

.dlist-container .dlist-edit-column {
    white-space: nowrap;
    width: 5%;
    text-align: center;
}

.dlist-edit-column button
{
    cursor: pointer;
    min-height: 0;
}

.dlist-container .dlist-pagination-button {
    width: 5%;
    margin: 0 1px;
}

.dlist-container .dlist-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.dlist-container .dlist-footer .dlist-pagination-text {
    flex: 1;
    text-align: center;
}

.dlist-footer
{
    padding: 0;
}

/* header grid */

.dlist-container .dlist-header {
    display: grid;
    width: 100%;
    grid-template-areas: "text input reset add-row";
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
}

.dlist-container .dlist-header .dlist-header-text {
    grid-area: text;
}

.dlist-container .dlist-header .dlist-header-input {
    grid-area: input;
}

.dlist-container .dlist-header .dlist-header-reset {
    grid-area: reset;
}

.dlist-container .dlist-header .dlist-header-add-row {
    grid-area: add-row;
    justify-self: right;
}


/* header */

.dlist-container .dlist-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    width: 100%;
}

/* footer */

.dlist-container .dlist-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0px;
}