.datatable-header {
    margin-bottom: 10px;
}

.datatable-scroll {
    overflow-x: auto;
}

.datatable-footer {
    text-align: right;
    padding-top: 10px;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
}

.dataTables_length {
    margin-bottom: 10px;
}

.dataTables_info {
    margin-top: 10px;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    border-radius: 5px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dataTables_wrapper .dataTables_scrollHeadInner {
    border-bottom: none;
}

.dataTables_wrapper th {
    font-weight: 500;
}

.dataTables_wrapper td {
    border-bottom: 1px solid #e5e5e5;
}

/* Customize the DataTable entries dropdown */
/* Entries dropdown */
/* Customize the "Show [X] entries" dropdown */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: transparent;
    padding: 8px 16px;
    font-size: 14px;
    color: #616161;
    appearance: none;
    -webkit-appearance: none;
    /* background-image: url('path/to/your/custom/arrow.svg'); */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M6.646 10.646a.5.5 0 0 1 .708 0L8 11.293l.646-.647a.5.5 0 0 1 .708.708l-.646.647.647-.646a.5.5 0 0 1 .708.707l-.647.647.646-.646a.5.5 0 0 1 0 .708l-1 1a.5.5 0 0 1-.708 0l-1-1a.5.5 0 0 1 0-.708l.646-.647-.647.646a.5.5 0 0 1-.708-.707l.647-.647-.646.647a.5.5 0 0 1 0-.708l1-1z"/></svg>');

    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
}

/* Hide the default arrow for IE/Edge */
.dataTables_wrapper .dataTables_length select::-ms-expand {
    display: none;
}

/* On hover style */
.dataTables_wrapper .dataTables_length select:hover {
    border-color: #1976D2;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
    padding: 8px 14px;
    font-size: 14px;
    color: #616161;
    transition: background-color 0.2s, color 0.2s;
}

/* Hover effect */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #e0e0e0;
    color: #1976D2;
}

/* Current page */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    font-weight: bold;
    background-color: #1976D2;
    color: #fff;
    border-radius: 4px;
}