/*
  Created: 26-06-2019
  Edited:  13-04-2023
*/

/* ---------- Table Start ---------- */
table.details {
    width: 100%;
}

    table.details td {
        border-radius: 0px !important;
        padding: 4px 8px !important;
    }

    table.details thead th {
        padding: 4px 8px;
    }

.td-text-right {
    text-align: right;
}

.td-text-left {
    text-align: left;
}

.td-text-centre {
    text-align: center;
}

.tr-height
{
 height: 40px;
 min-height: 40px;
}

@media (min-width: 768px) {
    table.details tbody tr:hover {
        background-color: #CCCCCC !important;
        color: #000000 !important;
    }
}

@media (max-width: 768px) {
    thead {
        display: none;
    }

    .table-data:before {
        display: inline-block;
        content: attr(data-header);
        font-weight: bold;
        text-align: left !important;
    }

    .table-data {
        display: flex;
        flex-direction: column;
    }

        .table-data:after {
            display: table;
            clear: both;
            box-sizing: border-box;
        }

    .td-text-right,
    .td-text-centre {
        text-align: left !important;
    }
}

table.details tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0,0,0,0.04);
}

table.details tbody tr:nth-of-type(2n+2) {
    background-color: rgba(0,0,0,0.01);
}

/*
    Notes:
    Enables individual table row hovering when the width of the browser reaches a minimum of 768px
*/
@media (min-width: 768px) {
    table.details tbody tr:hover {
        background-color: rgba(0,0,0,0.35);
        color: #fff;
    }

        table.details tbody tr:hover a {
            text-decoration: none;
            font-weight: 500;
            color: #fff !important;
        }
}

table.details tbody tr td a {
    text-decoration: none;
}

    table.details tbody tr td a .fa {
        color: #000;
    }
/* ---------- Table End ---------- */

table.details th button,
table.details th a {
    outline: 0;
    text-transform: none;
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: rgb(0,0,0);
    font-size: 1rem;
}