.premium-table-container {
    container-type: inline-size;
    container-name: table-wrapper;
}

.premium-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    border-bottom: none !important;
}

.premium-table thead th {
    padding: 10px 16px !important;
    white-space: nowrap !important;

}

.premium-table tbody tr {
    transition: all 0.3s ease;

}

.premium-table tbody tr:hover {
    background-color: color-mix(in srgb, currentColor 2%, transparent) !important;

}

.premium-table tr th {
    border-bottom: none !important;
}

.premium-table tbody td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
}

.premium-table tbody tr td:first-child {
    border-left: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
    border-radius: 12px 0 0 12px !important;
}

.premium-table tbody tr td:last-child {
    border-right: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
    border-radius: 0 12px 12px 0 !important;
}

.premium-table-container.is-card-view {

    .premium-table,
    .premium-table thead,
    .premium-table tbody,
    .premium-table tr,
    .premium-table td {
        display: block !important;
        width: 100% !important;
    }

    .premium-table thead {
        display: none !important;
    }

    .premium-table tbody tr {
        border: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
        border-radius: 20px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    .premium-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 8px !important;
        border: none !important;

        text-align: right !important;
        border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
    }

    .premium-table tbody td:last-child {
        border-bottom: none !important;
    }

    table.dataTable th,
    table.dataTable td {
        box-sizing: border-box !important;
    }

    .premium-table tbody td::before {
        content: attr(data-label);
        text-transform: uppercase;
        text-align: left;
        font-weight: 700;
        font-size: 10px;
        white-space: nowrap;
    }

}