.BlackTemplateTable table.fixed {
    table-layout: fixed;
}

.BlackTemplateTable table {
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #fff;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    text-align: left;
    line-height: 20px;
}

.BlackTemplateTable th {
    background: linear-gradient(#777, #444);
    border-left: 1px solid #555;
    border-right: 1px solid #777;
    border-top: 1px solid #555;
    border-bottom: 1px solid #333;
    box-shadow: inset 0 1px 0 #999;
    color: #fff;
    font-weight: bold;
    padding: 0px 5px;
    position: relative;
    text-shadow: 0 1px 0 #000;
}

    .BlackTemplateTable th:after {
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
        display: block;
        height: 25%;
        left: 0;
        margin: 1px 0 0 0;
        position: absolute;
        top: 25%;
        width: 100%;
    }

    .BlackTemplateTable th:first-child {
        border-left: 1px solid #777;
        box-shadow: inset 1px 1px 0 #999;
        border-radius: 10px 0px 0px 0px;
    }

    .BlackTemplateTable th:last-child {
        box-shadow: inset -1px 1px 0 #999;
        border-radius: 0px 10px 0px 0px;
    }

.BlackTemplateTable td {
    border-right: 1px solid #fff;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 5px;
    position: relative;
    transition: all 300ms;
}

    .BlackTemplateTable td:first-child {
        box-shadow: inset 1px 0 0 #fff;
    }

    .BlackTemplateTable td:last-child {
        border-right: 1px solid #e8e8e8;
        box-shadow: inset -1px 0 0 #fff;
    }


    .BlackTemplateTable tr:nth-child(odd) td {
        background: #f1f1f1;
    }

    .BlackTemplateTable tr:last-of-type td {
        box-shadow: inset 0 -1px 0 0 lightgray;
    }


.BlackTemplateTable tbody:hover td {
    color: transparent;
    text-shadow: 0 0 3px #aaa;
}

.BlackTemplateTable tbody:hover tr:hover td {
    color: #444;
    text-shadow: 0 1px 0 #fff;
}



.BlueTableFade table.fixed {
    table-layout: fixed;
}

.BlueTableFade table {
    border-collapse: separate;
    box-shadow: inset 0 1px 0 #fff;
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    text-align: left;
    line-height: 20px;
}

.BlueTableFade th {
    background: linear-gradient(#021689, #A4598F);
    border-left: 1px solid #555;
    border-right: 1px solid #777;
    border-top: 1px solid #555;
    border-bottom: 1px solid #333;
    box-shadow: inset 0 1px 0 #999;
    color: #fff;
    font-weight: bold;
    padding: 0px 5px;
    position: relative;
    text-shadow: 0 1px 0 #000;
}

    .BlueTableFade th:after {
        background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
        display: block;
        height: 25%;
        left: 0;
        margin: 1px 0 0 0;
        position: absolute;
        top: 25%;
        width: 100%;
    }

    .BlueTableFade th:first-child {
        border-left: 1px solid #777;
        box-shadow: inset 1px 1px 0 #999;
        border-radius: 10px 0px 0px 0px;
    }

    .BlueTableFade th:last-child {
        box-shadow: inset -1px 1px 0 #999;
        border-radius: 0px 10px 0px 0px;
    }

.BlueTableFade td {
    border-right: 1px solid #fff;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0px 5px;
    position: relative;
    transition: all 300ms;
}

    .BlueTableFade td:first-child {
        box-shadow: inset 1px 0 0 #fff;
    }

    .BlueTableFade td:last-child {
        border-right: 1px solid #e8e8e8;
        box-shadow: inset -1px 0 0 #fff;
    }


.BlueTableFade tr:nth-child(odd) td {
    background: #f1f1f1;
}

.BlueTableFade tr:last-of-type td {
    box-shadow: inset 0 -1px 0 0 lightgray;
}


.BlueTableFade tbody:hover td {
    color: transparent;
    text-shadow: 0 0 3px #aaa;
}

.BlueTableFade tbody:hover tr:hover td {
    color: #444;
    text-shadow: 0 1px 0 #fff;
}