.dataTables_wrapper table.dataTable {
    width: 100% !important;
}

.dataTables_wrapper .dataTables_filter input {
    background-color: var(--white-color);
}

div#DataTables_Table_0_filter {
    margin-bottom: 20px;
}

.dataTables_wrapper .dataTables_length select {
    background-color: var(--white-color);
    color: var(--black-color);
}

.dataTables_wrapper th {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.dataTables_wrapper tbody td {
    hyphens: auto;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: var(--black-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--white-color);
    color: var(--black-color) !important;
}

@media (max-width: 767.98px) {
    tbody tr td:first-child:before {
        top: 8px;
        left: 4px;
        height: 16px;
        width: 16px;
        display: block;
        color: var(--white-color);
        border: 2px solid var(--white-color);
        border-radius: 16px;
        box-shadow: 0 0 3px #444;
        box-sizing: content-box;
        text-align: left;
        text-indent: 4px;
        content: '+';
        background-color: #77b9ba;
        text-indent: 3px;
    }

    tbody tr.show td:first-child:before {
        content: '-';
    }

    .open-table * {
        color: var(--black-color) !important;
    }

    div#c17819 .frame-group-inner {
        padding: 0;
    }

    table thead tr th:nth-child(5), table tbody tr td:nth-child(5) {
        display: none;
    }

    tbody .open-table {
        width: 100%;
        height: 40px;
    }

    tbody {
        position: relative;
    }

    tbody .open-table .text {
        width: 100%;
        position: absolute;
    }
}

@media (max-width: 699.98px) {
    tbody .open-table {
        width: 100%;
        height: 64px;
    }

    table thead tr th:nth-child(4), table tbody tr td:nth-child(4) {
        display: none;
    }
}

@media (max-width: 599.98px) {
    tbody .open-table {
        width: 100%;
        height: 85px;
    }

    table thead tr th:nth-child(3), table tbody tr td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 469.98px) {
    tbody .open-table {
        width: 100%;
        height: 110px;
    }
}