table.dataTable > tbody > tr > .selected {
    background-color: rgba(13, 110, 253, 0.9);
    color: white
}

table.dataTable > tbody > tr > .dt-select {
    text-align: center;
    vertical-align: middle
}

table.dataTable > thead > tr > .dt-select {
    text-align: center
}

table.dataTable input.dt-select-checkbox {
    appearance: none;
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid;
    border-radius: 3px;
    vertical-align: middle;
    margin-top: 1px;
    color: inherit;
    font-size: 20px;
    line-height: 1em
}

    table.dataTable input.dt-select-checkbox:checked:after {
        display: block;
        content: "✓";
        margin-top: -8px
    }

    table.dataTable input.dt-select-checkbox:indeterminate:after {
        display: block;
        position: absolute;
        content: " ";
        top: 3px;
        left: 3px;
        height: 4px;
        width: 4px;
        background-color: black;
        border-radius: 2px
    }

table.dataTable > tbody > tr.selected input.dt-select-checkbox:checked {
    border: 1px solid
}

table.dataTable > tbody > tr > td.select-checkbox, table.dataTable > tbody > tr > th.select-checkbox {
    position: relative
}

    table.dataTable > tbody > tr > td.select-checkbox:before, table.dataTable > tbody > tr > th.select-checkbox:before {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
        content: " ";
        margin-top: -6px;
        margin-left: -6px;
        border: 1px solid;
        border-radius: 3px
    }

table.dataTable > tbody > tr.selected > td.select-checkbox:before, table.dataTable > tbody > tr.selected > th.select-checkbox:before {
    border: 1px solid;
    content: "✓";
    font-size: 20px;
    line-height: 6px;
    text-align: center
}

table.dataTable.compact > tbody > tr > td.select-checkbox:before, table.dataTable.compact > tbody > tr > th.select-checkbox:before {
    margin-top: -12px
}

table.dataTable.compact > tbody > tr.selected > td.select-checkbox:after, table.dataTable.compact > tbody > tr.selected > th.select-checkbox:after {
    margin-top: -16px
}

div.dt-container span.select-info, div.dt-container span.select-item {
    margin-left: .5em
}

html.dark table.dataTable input.dt-select-checkbox:indeterminate:after, html[data-bs-theme=dark] table.dataTable input.dt-select-checkbox:indeterminate:after {
    background-color: white
}

@media screen and (max-width: 640px) {
    div.dt-container span.select-info, div.dt-container span.select-item {
        margin-left: 0;
        display: block
    }
}