.datatable-panel {
    padding: 24px;
    border-radius: var(--rnd-border-radius);
    background-color: #FFFFFF;
    box-shadow: 2px 2px 16px rgba(38, 55, 67, 0.1);
    overflow: hidden;
}

    .datatable-panel .dataTables_wrapper .dataTables_scroll + .dt-buttons {
        padding-top: 24px;
        padding-bottom: 0;
    }

    .datatable-panel .dataTables_scroll {
        padding-top: 24px;
        border-top: 1px solid #D6D5E3;
    }

        .datatable-panel .dataTables_scroll .dataTables_scrollHead {
            padding-right: 8px;
        }

            .datatable-panel .dataTables_scroll .dataTables_scrollHead .dataTables_scrollHeadInner {
                min-width: 100%;
            }

    .datatable-panel .dataTables_wrapper.no-footer .dataTables_scrollBody {
        transition: height 0.3s ease, max-height 0.3s ease;
    }

    .datatable-panel .dataTables_wrapper.no-footer .dataTables_scrollBody,
    .datatable-panel table.dataTable.no-footer {
        border-bottom: 1px solid rgba(76, 69, 150, 0.5);
    }

    .datatable-panel table.dataTable {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: var(--rnd-secondary-colour);
        --bs-table-striped-color: var(--rnd-secondary-colour);
        --bs-table-active-color: var(--rnd-secondary-colour);
        --bs-table-hover-color: var(--rnd-secondary-colour);
    }

        .datatable-panel table.dataTable .dataTables_empty {
            text-align: left;
        }

        .datatable-panel table.dataTable th,
        .datatable-panel table.dataTable td {
            padding: 4px 8px;
            position: relative;
        }

            .datatable-panel table.dataTable td svg.svg-sm {
                width: 15px;
                height: 15px;
            }

            .datatable-panel table.dataTable td svg.svg-md {
                width: 27px;
                height: 27px;
            }

            .datatable-panel table.dataTable th:not(:last-child)::before,
            .datatable-panel table.dataTable td:not(:last-child)::before {
                content: "";
                position: absolute;
                top: 8px;
                bottom: 8px;
                right: 0;
                width: 0.5px;
                background: #D6D5E3;
            }

            .datatable-panel table.dataTable th:first-child,
            .datatable-panel table.dataTable td:first-child {
                padding-left: 24px;
            }

        .datatable-panel table.dataTable thead {
            background-color: var(--rnd-light-colour);
        }

            .datatable-panel table.dataTable thead th {
                white-space: nowrap;
                font-weight: normal;
                color: rgb(82, 100, 122);
                border-bottom: none;
            }

                .datatable-panel table.dataTable thead th:first-child {
                    border-top-left-radius: 4px;
                    -webkit-border-top-left-radius: 4px;
                    -moz-border-radius-topleft: 4px;
                }

                .datatable-panel table.dataTable thead th:last-child {
                    border-top-right-radius: 4px;
                    -webkit-border-top-right-radius: 4px;
                    -moz-border-radius-topright: 4px;
                }

        .datatable-panel table.dataTable tbody tr {
            border-bottom: 1px solid #D6D5E3;
        }

            .datatable-panel table.dataTable tbody tr:hover {
                background-color: rgba(155, 160, 238, 0.2);
            }

            .datatable-panel table.dataTable tbody tr.selected {
                background-color: rgba(155, 160, 238, 0.5)
            }

                .datatable-panel table.dataTable tbody tr.selected:hover {
                    background-color: rgba(155, 160, 238, 0.4)
                }

            .datatable-panel table.dataTable tbody tr .dt-options {
                opacity: 0;
                text-align: center;
            }

                .datatable-panel table.dataTable tbody tr .dt-options svg {
                    width: 15px;
                    height: 15px;
                    margin: 0 5px;
                }

            .datatable-panel table.dataTable tbody tr:hover .dt-options {
                opacity: 1;
            }

                .datatable-panel table.dataTable tbody tr:hover .dt-options svg:hover {
                    cursor: url('/assets/images/icons/hover.svg'), auto;
                    color: rgb(142, 160, 182);
                }

    .datatable-panel .table-striped > tbody > tr:nth-of-type(odd) {
        --bs-table-accent-bg: rgba(217, 217, 217, 0.15);
    }

    .datatable-panel table.dataTable *:hover,
    .tooltip *:hover {
        cursor: url('/assets/images/icons/hover.svg') 8 0, auto !important;
    }

    .datatable-panel .dt-border-top {
        padding-top: 24px;
        border-top: 1px solid #D6D5E3;
    }

        .datatable-panel .dt-border-top .dataTables_scroll,
        .datatable-panel .dt-no-border .dataTables_scroll {
            padding-top: 0;
            border-top: none;
        }

    .datatable-panel .datatable-header h4 {
        font-weight: 600;
        font-size: 24px;
        line-height: 29px;
    }

    .datatable-panel .datatable-header h5 {
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
    }

    .datatable-panel .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
        vertical-align: middle;
    }

    .datatable-panel table.table th {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        color: var(--rnd-secondary-colour);
        padding: 4px 8px;
    }

.table .dt-head-center {
    text-align: center;
}

table.dt-rowReorder-float {
    display: none;
}

tr.dt-rowReorder-moving {
    outline: 0.5px solid #364780;
    outline-offset: -2px;
}

div.dts div.dt-scroll-body table, div.dts div.dataTables_scrollBody table {
    z-index: 0 !important;
}

@media (max-width: 280px) {
    .datatable-header {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .datatable-header {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .datatable-header {
        justify-content: center;
    }

    .datatable-panel table.dataTable tbody tr .dt-options {
        opacity: 1;
    }
}

@media screen and (max-width: 640px) {
    .dataTables_wrapper .dataTables_filter {
        margin-top: 0;
    }
}