/* Optional custom styling */
td.highlight {
    /* background-color: rgba(255, 255, 255, 0.5) !important; /* Lighten the highlight color */
    background-color: rgba(var(--dt-row-hover), 0.052) !important;    
}

tr.highlight {border: 1px solid rgb(223, 209, 209) !important;}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #1c1e1f; 
    color: #c8c6c3;
}


table {
    border: 1px solid rgb(223, 209, 209);
    margin: 20%;
}

table tr td {
    border-bottom:  1px solid rgb(223, 209, 209);
}

.search-row th input, .search-row th select, #dt-search-0 {
    background-color: #3b495749; 
    color: #ffffffe0;
}

/* because dt-center doesnt work */ 
tr.highlight:nth-child(1) > td:nth-child(2), 
tr.highlight:nth-child(1) ~ tr > td:nth-child(2) {
    text-align: center;
}

/* Center the inputs */ 
.search-row > th:nth-child(6) > select:nth-child(1), .search-row > th:nth-child(11) > select:nth-child(1) {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.dt-input {
    width: 360px;   
}

.search-row > th:nth-child(4) > input:nth-child(1) {
    width: 460px; 
}


/* This doesnt work 
.dt-search {
    float: center !important;
} */

.ascii-art {
    text-align: center;
    white-space: pre;
    font-family: monospace;
}


.dt-button.buttons-columnVisibility {
    background: #212529 !important;
    color: #ffffffe0 !important;
    opacity: 0.9 !important;
 }
.dt-button.buttons-columnVisibility.active {
    background: black !important;
    color: #ffffffe0 !important;
    opacity: 1;
 }