.dt-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.dt-header > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


.wrap-dt-std {
    /* border-radius property does not work properly while using border-collapse:collapse */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow-x: hidden;
}


.dt-std {
    border-collapse: collapse;
    font-family: monospace, sans-serif;
    overflow-x: hidden;
    width: 100%;
}

.dt-std thead {
    background-color: lightsteelblue;
    color: #353c47;
}

.dt-std th {
    cursor: pointer;
    padding: 0.7rem;
    text-align: left;
}

.dt-std th[data-order='null']::after { content: '◃▹'; }
.dt-std th[data-order='asc']::after { content: ' ▴'; }
.dt-std th[data-order='desc']::after { content: ' ▾'; }


.dt-std td {
    overflow: hidden;
    padding: 0.5rem 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 15rem;
}


.dt-std tbody {
    color: #2f2f2f;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.dt-std tbody tr:nth-child(even) {
    background: whitesmoke;
}

.dt-std tbody tr:hover {
    background: #d4d5d5;
    color: black;
    transition: all 0.1s ease-in-out;
    a { color: navy; }
}

.dt-std tr a {
    color: steelblue;
    padding: 0.3rem;
    text-decoration: none;
}

.dt-std tr a.button {
    color: #fff;
}


.dt-footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    bottom: 0;
}


button.pager {
    height: 2.5rem;
    margin: 0.25rem 0.25rem;
    width: 2.5rem;
    background: transparent;
    color: #353c47;
}

button.pager[disabled] {
    background: #0085b6;
    color: white;
    font-weight: bold;
    cursor: default;
}