.dataTable,
.teal-table,
.red-table {
    border: 1px solid black;
}

table.dataTable.hover > tbody > tr:hover > * {
    background-color: var(--oxidised-copper-20) !important; /*important required to override default datatables styles*/
}


.teal-table th {
    background-color: var(--oxidised-copper);
    color: var(--alternate-text);
}

.teal-table th button {
    color: var(--alternate-text);
    border: 1px solid var(--alternate-text);
}

.teal-table > tbody > tr > td.edit:hover,
.teal-table > tbody > tr > td.exButton1:hover,
.teal-table > tbody > tr > td.exButton1A:hover,
.teal-table > tbody > tr > td.exButton2:hover,
.teal-table > tbody > tr > td.exButton3:hover {
    background-color: var(--oxidised-copper) !important; /*important required to override the override above! */
}

.teal-table > tbody > tr > td.delete:hover {
    background-color: var(--negative-colour) !important; /*important required to override the override above! */
}

.teal-table > tbody > tr > td.undelete:hover {
    background-color: var(--positive-colour) !important; /*important required to override the override above! */
}

.red-table thead th {
    background-color: red;
    color: var(--alternate-text);
}

.red-table .fas {
    color: red;
}

.red-table .fa-play {
    color: white;
}
.table-hover tbody tr:hover th.add {
    background-color: #62bd3c;
}

/* next line allows the span to be coloured too */
.table-hover tbody tr:hover th .add {
    background-color: #62bd3c;
}

.table-hover tbody tr:hover td.edit {
    background-color: #4f9dc4;
}

/* next line allows the span to be coloured too */
.table-hover tbody tr:hover td .edit {
    background-color: #4f9dc4;
}