.sn-responsive-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

table.sn-responsive-table {
    display: table !important;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

@media (max-width: 767px) {
    .sn-responsive-table-wrap {
        overflow: visible;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.sn-responsive-table {
        display: block !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    table.sn-responsive-table caption {
        display: block;
        width: 100%;
        padding: 10px 4px 0 !important;
        color: #667b8e;
        text-align: right;
        line-height: 1.9;
    }

    table.sn-responsive-table > thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    table.sn-responsive-table > tbody {
        display: grid !important;
        width: 100%;
        gap: 12px;
    }

    table.sn-responsive-table > tbody > tr {
        display: block !important;
        width: 100%;
        overflow: hidden;
        border: 1px solid #dce7ef;
        border-radius: 14px;
        background: #fff !important;
        box-shadow: 0 8px 24px rgba(16, 43, 67, .07);
    }

    table.sn-responsive-table > tbody > tr > th,
    table.sn-responsive-table > tbody > tr > td {
        display: grid !important;
        grid-template-columns: minmax(92px, 35%) minmax(0, 1fr);
        align-items: start;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 12px 14px !important;
        gap: 12px;
        border: 0 !important;
        border-bottom: 1px solid #e8eef2 !important;
        background: #fff !important;
        color: #183149;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    table.sn-responsive-table > tbody > tr > :last-child {
        border-bottom: 0 !important;
    }

    table.sn-responsive-table > tbody > tr > th::before,
    table.sn-responsive-table > tbody > tr > td::before {
        content: attr(data-label);
        color: #62778a;
        font-size: 11px;
        font-weight: 750;
        line-height: 1.9;
    }

    table.sn-responsive-table > tbody > tr > th[scope="row"] {
        color: #102a43;
        font-weight: 850;
    }

    table.sn-responsive-table > tbody > tr > .sn-table-wide-cell {
        display: block !important;
        padding: 24px 16px !important;
        text-align: center !important;
    }

    table.sn-responsive-table > tbody > tr > .sn-table-wide-cell::before {
        display: none;
    }

    table.sn-responsive-table .status-form,
    table.sn-responsive-table .table-actions {
        flex-wrap: wrap;
        min-width: 0;
    }

    table.sn-responsive-table input,
    table.sn-responsive-table select,
    table.sn-responsive-table textarea,
    table.sn-responsive-table button {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    table.sn-responsive-table > tbody > tr > th,
    table.sn-responsive-table > tbody > tr > td {
        grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
        padding: 11px 12px !important;
        gap: 9px;
        font-size: 12px;
    }
}