.table-responsive {
    padding-bottom: 1rem;
    margin: 1rem 0 2rem 0;

    &::-webkit-scrollbar {
        height: 12px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-400);
        border-radius: 6px;
    }

    &::-webkit-scrollbar-track {
        background-color: var(--bs-gray-200);
        border-radius: 6px;
    }
}

.table {
    &:not(th) {
        border: 1px solid var(--bs-gray-300);
        border-radius: 10px;
    }

    & th {
        white-space: nowrap;
        background-color: var(--bs-gray-700);
        color: var(--bs-white);
        border: 1px solid var(--bs-gray-700);
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    & td {
        white-space: nowrap;
        vertical-align: middle;
    }

    th:first-child {
        border-top-left-radius: 10px;
    }

    th:last-child {
        border-top-right-radius: 10px;
    }

    tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }
}

.pagination {
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-focus-color: var(--bs-primary);

    .page-item {
        &:not(.previous):not(.next) {
            .page-link {
                border-radius: 0;
            }
        }

        &.previous {
            .page-link {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        &.next {
            .page-link {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }
}

#bank-table-wrapper {
    #bank-table-info {
        align-items: center;
    }

    #bank-table-paginate {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.form-control {
    height: 38px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid var(--bs-indigo-200);
    box-shadow: none;

    &:focus {
        border-color: none;
        box-shadow: none;
        border-bottom: 2px solid var(--bs-indigo-300);
    }
}

#bank-table-wrapper:not(.dt-ready) .dataTables_filter {
    display: none;
}

#bank-table tbody tr:hover, #bank-table tbody tr:hover > td {
    background-color: var(--bs-gray-200);
    transition: background-color 0.15s ease-in-out;
}

@media screen and (max-width: 767px) {
    #bank-table-wrapper {
        #bank-table-info {
            text-align: center;
        }

        #bank-table-paginate {
            margin-top: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    }
}