tr, td, th {
    border: none !important;
}

table {
    margin: 0 !important;
}

thead > tr > th {
    border-top: none !important;
    background-color: var(--table-header-color);
    color: var(--white);
}

tbody:not(#cartBody) > tr:nth-of-type(2n):not(.available) {
    background-color: var(--table-color-even) !important;
}

table:not(.table-condensed) > tbody:not(#cartBody) > tr:not(.available):hover, tr:nth-of-type(2n):hover {
    background-color: #cecece !important;
}

tbody > tr.available {
    background-color: #9ae699 !important;
}

tbody > tr.available:nth-of-type(2n) {
    background-color: #87d086 !important;
}

tr.available:hover, tr.available:nth-of-type(2n):hover{
    background-color: #6bba6a !important;
}


@media screen and (max-width: 992px) {

    .table-collapse tr:nth-of-type(2n+1) td + td {
        border-top: 1px solid #dee2e6 !important;
    }

    .table-collapse tr:nth-of-type(2n+1) td {
        border-top: none !important;
    }

    .table-collapse tr:nth-of-type(2n) td + td {
        border-top: 1px solid #c6c7c8 !important;
    }

    .table-collapse tr:nth-of-type(2n) td {
        border-top: none !important;
    }

    table.table-collapse thead tr {
        display: none !important;
    }

    table.table-collapse tbody tr {
        display: block;
    }

    table.table-collapse tbody td[data-table-header] {
        text-align: left !important;
        display: block;
        position: relative;
        padding-left: 40% !important;
    }

    table.table-collapse tbody td[data-table-header]:empty {
        display: none;
    }

    table.table-collapse tbody td[data-table-header]:before {
        content: attr(data-table-header);
        font-size: 14px;
        color: #999999;
        line-height: 1.2;
        font-weight: unset;
        position: absolute;
        left: 30px;
        top: 15px;
    }

    table.table-collapse tbody td[data-table-action] {
        text-align: center !important;
        font-size: xx-large;
        display: flex;
    }

    table.table-collapse tbody td[data-table-action] > * {
        flex-grow: 1;
        margin: 0 !important;
    }

    table.table-collapse tbody td[data-table-action] > *:not(:first-child):before {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 50px;
        background-color: #bdbdbd;
    }

    table.table-collapse tbody td {
        text-align: left;
        display: block;
    }

    table.table-collapse tbody td, table tbody td[data-table-action]:empty {
        display: none;
    }
}