/* Data Table */
.fb__wrapper {
    .dataTables_length label,
    .dataTables_filter label {
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        margin-bottom: 30px;
    }

    .dataTables_filter {
        label {
            display: flex;
            align-items: center;
        }
        input {
            margin-left: 15px;
            padding: 5px 14px 6px;
            border-radius: 4px;
            &:focus {
                offset: none;
                outline: none;
                border-color: #66afe9;
            }
        }
    }

    .dataTables_length select {
        margin: 0 11px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        height: 40px;
        &:focus {
            border-color: #66afe9;
        }
    }

    table.dataTable {
        border-collapse: collapse;
        thead,
        tfoot {
            th,
            td {
                color: $heading-color;
                border-bottom: 1px solid #ccc;
            }
        }
        > tbody > tr:nth-of-type(odd) {
            background-color: #f9f9f9;
        }
        td,
        th {
            padding: 10px 18px;
            font-size: 14px;
        }
    }

    .dataTables_wrapper {
        display: block;
        width: 100%;
        @include customMax(991) {
            overflow-x: auto;
        }
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid #ddd !important;
        padding: 4px 10px;
        border-radius: 4px;
        &.disabled {
            background-color: rgba(237, 217, 217, 0.16) !important;
            cursor: not-allowed;
            opacity: 0.8;
        }
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: transparent;
    }

    .dataTables_wrapper .dataTables_paginate > span .paginate_button {
        min-width: 34px;
    }

    .dataTables_wrapper
        .dataTables_paginate
        .paginate_button:not(.disabled):hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: $c1 !important;
        color: #fff !important;
        border-color: $c1 !important;
    }
    .dataTables_wrapper .dataTables_info {
        padding-top: 40px;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 30px;
    }
    td.dataTables_empty {
        background-color: rgba(237, 217, 217, 0.16);
    }
}
