@media only screen and (max-width: 767px) {
    #DT-div {
        padding: 0 !important;
    }
}

/* Table container */
.dt-container {
    background-color: var(--surfaceColor);
    border: 2px solid var(--inputBorderColor);
    border-radius: 6px;
}

div.dt-processing > div:last-child > div,
.dt-container div.dt-processing > div:last-child > div {
    background: var(--primary) !important;
}


@media only screen and (max-width: 767px) {
    .dt-container .row:not(:first-child) {
        overflow-x: auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media only screen and (min-width: 768px) {
    .dt-container .row {
        overflow-x: auto;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.dt-container .row > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dt-container a:not(.button):not(.subButton) { color: var(--secondary); }

/* Above table header */
.flex-row {
    display: flex;
    align-items: center;
    margin: 0;
    height: 60px;
}
 
.flex-row .button {
    margin-right: 8px;
}

.row-flex > * {
    flex: 1;
    margin: 0;
}

.dt-search { margin: 8px; }

.dt-search input,
.dataTables_filter input {
    border: 1px solid var(--neutral) !important;
    border-radius: 4px;
    background-color: var(--background);
    box-shadow: none !important;
    outline: none;
}

/* Table header */
.dt-container thead {
    border: none;
}

.dt-container thead tr th {
    text-align: left !important;
}

.dt-container thead tr:last-child {
    background-color: var(--accentDarker);
}

.dt-container thead tr:last-child th {
    color: var(--background);
    font-weight: 300;
    font-size: 18px;
}

#DamagedItemTable_wrapper thead tr:first-child th,
#MissingItemTable_wrapper thead tr:first-child th,
#RetiredItemTable_wrapper thead tr:first-child th {
    min-width: 110px;
}

/* Table body */
.dt-container tbody {
    font-weight: 400;
}

.dt-container tbody .child {
    padding-left: 10px;
}

.dt-container tbody tr td {
    text-align: left !important;
}

.dt-container table.dataTable tbody tr,
.dt-container table.dataTable tbody tr.even,
.dt-container table.dataTable tbody tr:nth-child(odd) {
    background-color: var(--background) !important;
}

.dt-container table.dataTable tbody tr.odd,
.dt-container table.dataTable tbody tr:nth-child(even) {
    background-color: var(--disabled) !important;
}

.dt-container table.dataTable tbody tr > *,
.dt-container table.dataTable tbody tr.odd > *,
.dt-container table.dataTable tbody tr.even > *,
.dt-container table.dataTable tbody tr:nth-child(odd) > *,
.dt-container table.dataTable tbody tr:nth-child(even) > *,
.dt-container table.dataTable.display tbody tr > *,
.dt-container table.dataTable.stripe tbody tr > *,
.dt-container table.dataTable.order-column tbody tr > *,
.dt-container table.table-striped tbody tr > *,
.dt-container table.dataTable.display tbody tr > .sorting_1,
.dt-container table.dataTable.display tbody tr > .sorting_2,
.dt-container table.dataTable.display tbody tr > .sorting_3 {
    box-shadow: none !important;
}

.dt-container table.dataTable tbody tr.even > *,
.dt-container table.dataTable tbody tr:nth-child(odd) > *,
.dt-container table.table-striped tbody tr:nth-of-type(odd) > *,
.dt-container table.table-striped tbody tr:nth-of-type(odd) td,
.dt-container table.table-striped tbody tr:nth-of-type(odd) th {
    background-color: var(--background) !important;
}

.dt-container table.dataTable tbody tr.odd > *,
.dt-container table.dataTable tbody tr:nth-child(even) > *,
.dt-container table.table-striped tbody tr:nth-of-type(even) > *,
.dt-container table.table-striped tbody tr:nth-of-type(even) td,
.dt-container table.table-striped tbody tr:nth-of-type(even) th {
    background-color: var(--disabled) !important;
}

.dt-container table.dataTable tbody tr.selected > *,
.dt-container table.dataTable tbody tr:focus > *,
.dt-container table.dataTable tbody tr:focus-within > *,
.dt-container table.dataTable tbody tr > *:focus,
.dt-container table.dataTable tbody tr > *:focus-within {
    color: var(--text) !important;
}

.dt-container table.dataTable tbody tr.selected a:not(.button):not(.subButton),
.dt-container table.dataTable tbody tr:focus a:not(.button):not(.subButton),
.dt-container table.dataTable tbody tr:focus-within a:not(.button):not(.subButton),
.dt-container table.dataTable tbody tr > *:focus a:not(.button):not(.subButton),
.dt-container table.dataTable tbody tr > *:focus-within a:not(.button):not(.subButton) {
    color: var(--secondary) !important;
}

.dt-container table.dataTable tbody tr.selected i,
.dt-container table.dataTable tbody tr.selected svg,
.dt-container table.dataTable tbody tr:focus i,
.dt-container table.dataTable tbody tr:focus svg,
.dt-container table.dataTable tbody tr:focus-within i,
.dt-container table.dataTable tbody tr:focus-within svg {
    color: inherit !important;
    fill: currentColor !important;
}

.dt-container table.dataTable tbody tr:hover a:not(.button):not(.subButton),
.dt-container table.dataTable tbody tr:hover i,
.dt-container table.dataTable tbody tr:hover svg {
    color: var(--secondaryDarker) !important;
    fill: currentColor !important;
}

/* Table footer */
.pagination li:not(.active) a {
    background-color: rgba(var(--text-rgb), 0) !important;
    border: none;
    color: var(--text);
    outline: none;
}

.pagination .active a {
    background-color: var(--primary) !important;
    border-radius: 4px;
    border: none;
    outline: none;
    color: var(--background) !important;
}

.dt-length { margin: 8px; }

.dt-length select,
.dataTables_length select {
    border: 1px solid var(--neutral) !important;
    border-radius: 4px;
    box-shadow: none !important;
    background-color: var(--background);
    outline: none;
}

.dt-info { margin: 8px; }

#DamagedItemTable td:first-child {
    width: 10px !important;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    color: var(--secondary);
    opacity: 1;
}