/* 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: 2em 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: .8vw .6vw;
    transition: all 0.5s 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: .8vw 1.6vw .8vw .6vw;
}

.dlist-container th.orderby-asc::after,
.dlist-container th.orderby-desc::after {
    content: "\02191";
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    position: absolute;
    top: 0;
    bottom: 0;
    right: .4vw;
    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%;
}

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


.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% !important;
}

.dlist-container td>input,
.dlist-container td>select,
.dlist-container td>span>input,
.dlist-container td>span>select {
    background-color: var(--bg-color-input);
    color: rgb(var(--colorBlack));
    border: solid 1px rgb(var(--colorLightGrey)) !important;
    border-radius: var(--borderRadius) !important;
    font-size: 1vw;
    padding: .8vw !important;
    margin: .4vw 0 !important;
    width: 20vw;
}

.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;
    border-radius: 5px;
    width: min-content;
    padding: .5em;
}

.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;
    color: var(--font-color);
}

.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;
}

[class*="fa-backward-fast"]:before {
    content: "<<";
}

[class*="fa-backward-step"]:before {
    content: "<";
}

[class*="fa-forward-fast"]:before {
    content: ">>";
}

[class*="fa-forward-step"]:before {
    content: ">";
}