.table-responsive {
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    overflow: hidden;
}

    .table-responsive table[id$="_tblData"] {
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        font-family: var(--primary-font, Arial, sans-serif);
        font-size: 0.95rem;
    }

        .table-responsive table[id$="_tblData"] th,
        .table-responsive table[id$="_tblData"] td {
            padding: .5rem .5rem;
            border-top: 1px solid rgba(3,150,194,.15);
            vertical-align: middle;
            background-color: transparent;
        }

        .table-responsive table[id$="_tblData"] thead {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: transparent !important;
            border-bottom: 1px solid var(--border-color);
        }

            .table-responsive table[id$="_tblData"] thead th {
                position: sticky;
                top: 0;
                background-color: transparent !important;
                color: var(--text-color);
                font-weight: 600;
                white-space: nowrap;
                border-bottom: 1px solid var(--border-color);
            }

                .table-responsive table[id$="_tblData"] thead th:hover {
                    background-color: rgba(3,150,194,.08) !important;
                }

            .table-responsive table[id$="_tblData"] thead th {
                position: sticky;
                top: 0;
                background-color: transparent !important;
                color: var(--text-color);
                font-weight: 600;
                white-space: nowrap;
                border-bottom: 1px solid var(--border-color);
            }

            .table-responsive table[id$="_tblData"] thead th {
                cursor: pointer;
            }

                .table-responsive table[id$="_tblData"] thead th::after {
                    content: "▾";
                    font-size: .8rem;
                    line-height: 1;
                    opacity: .35;
                    margin-left: .35rem;
                    display: inline-block;
                    transition: transform .15s ease, opacity .15s ease, color .15s ease;
                }

                .table-responsive table[id$="_tblData"] thead th[aria-sort="ascending"]::after {
                    content: "▴";
                    opacity: 1;
                    color: var(--primary-color);
                }

                .table-responsive table[id$="_tblData"] thead th[aria-sort="descending"]::after {
                    content: "▾";
                    opacity: 1;
                    color: var(--primary-color);
                }

                .table-responsive table[id$="_tblData"] thead th .sort::after {
                    content: none;
                }

        .table-responsive table[id$="_tblData"] tbody tr:nth-child(odd) {
            background-color: rgba(3,150,194,.03);
        }

        .table-responsive table[id$="_tblData"] tbody tr {
            transition: background-color .15s ease, box-shadow .15s ease;
            cursor: pointer;
        }

            .table-responsive table[id$="_tblData"] tbody tr:hover {
                background-color: rgba(3,150,194,.08) !important;
            }

            .table-responsive table[id$="_tblData"] tbody tr:focus-within {
                outline: 2px solid var(--border-color);
                outline-offset: -2px;
                background-color: rgba(3,150,194,.12);
            }

        .table-responsive table[id$="_tblData"] td[data-align="right"],
        .table-responsive table[id$="_tblData"] td.text-end {
            text-align: right;
        }

        .table-responsive table[id$="_tblData"] td.truncate {
            max-width: 18rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-responsive table[id$="_tblData"] .badge {
            background: var(--secondary-color);
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }

.input-group [id$="_txtSearch"] {
    border-color: var(--border-color);
}

    .input-group [id$="_txtSearch"]:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 .2rem rgba(0,114,154,.15);
    }

.input-group .input-group-text {
    background-color: var(--secondary-color);
    border-color: var(--border-color);
}

button[id$="_btnClearSearch"],
button[id$="_btnApplyFilters"] {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

ul[id$="_pager"].pagination .page-link {
    color: var(--primary-color);
    border-color: rgba(3,150,194,.35);
    background-color: transparent
}

    ul[id$="_pager"].pagination .page-link:hover {
        color: var(--primary-color);
        background-color: rgba(3,150,194,.08);
        border-color: var(--primary-color);
    }

ul[id$="_pager"].pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

ul[id$="_pager"].pagination .page-item.disabled .page-link {
    color: #9aa6ac;
    border-color: rgba(3,150,194,.2);
}

.dropdown-menu {
    border-color: rgba(3,150,194,.35);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        background-color: rgba(3,150,194,.08);
        color: var(--text-color);
    }

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
    }

@media (max-width: 768px) {
    .table-responsive table[id$="_tblData"] thead {
        display: none;
    }

    .table-responsive table[id$="_tblData"],
    .table-responsive table[id$="_tblData"] tbody,
    .table-responsive table[id$="_tblData"] tr,
    .table-responsive table[id$="_tblData"] td {
        display: block;
        width: 100%;
    }

        .table-responsive table[id$="_tblData"] tbody tr {
            background: #fff;
            border-bottom: 1px solid rgba(3,150,194,.2);
            padding: .5rem .75rem;
        }

        .table-responsive table[id$="_tblData"] tbody td {
            border: none;
            /*  padding: .4rem 0;
            display: grid;
            grid-template-columns: 12rem 1fr;
            gap: .5rem;*/
        }

            .table-responsive table[id$="_tblData"] tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #6c757d;
                padding-right: 10px;
            }

    .table-responsive {
        border-radius: .75rem;
    }
}

.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

    .table-responsive::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background-color: rgba(3,150,194,.5);
        border-radius: 8px;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: transparent;
    }

.search {
    border: 1px solid var(--border-color);
}

    .search:active, .search:focus {
        outline: 2px solid var(--border-color);
    }