/* =========================================================
   TRANSACTION TABLE
   GLOBAL RESPONSIVE OVERFLOW FIX
   Works for dashboard, pay, history, etc.
   ========================================================= */

.transaction-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.transaction-card .card-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* =========================================================
   TABLE WRAPPER
   Only the table is allowed to scroll horizontally.
   The entire page will NOT overflow.
   ========================================================= */

.transaction-table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* =========================================================
   TABLE
   ========================================================= */

.transaction-table {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 0 !important;

    table-layout: auto;
}

/* =========================================================
   GENERAL CELLS
   ========================================================= */

.transaction-table th,
.transaction-table td {
    vertical-align: middle;
}

/* =========================================================
   SERIAL NUMBER
   ========================================================= */

.transaction-table .col-sn {
    width: 55px;
    min-width: 55px;

    text-align: center;
    white-space: nowrap;
}

/* =========================================================
   REFERENCE NUMBER
   ========================================================= */

.transaction-table .transaction-ref {
    min-width: 120px;
    max-width: 180px;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   RECEIVER NAME
   ========================================================= */

.transaction-table .transaction-receiver {
    min-width: 120px;
    max-width: 200px;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   TRANSACTION TYPE
   ========================================================= */

.transaction-table .transaction-type {
    min-width: 80px;

    text-align: center;

    white-space: nowrap;
}

/* =========================================================
   NARRATION
   ========================================================= */

.transaction-table .transaction-narration {
    min-width: 150px;
    max-width: 280px;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   AMOUNT
   ========================================================= */

.transaction-table .transaction-amount {
    min-width: 110px;

    white-space: nowrap;
}

/* =========================================================
   DATE
   ========================================================= */

.transaction-table .transaction-date {
    min-width: 100px;
    max-width: 150px;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   ACTION
   ========================================================= */

.transaction-table .transaction-action {
    width: 1%;
    min-width: 85px;

    text-align: center;
    white-space: nowrap;
}

.transaction-table .view-transaction {
    white-space: nowrap;
}

/* =========================================================
   DATATABLES
   ========================================================= */

.transaction-card .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Search box */

.transaction-card .dataTables_wrapper .dataTables_filter {
    max-width: 100%;
    margin-bottom: 15px;
}

.transaction-card .dataTables_wrapper .dataTables_filter input {
    max-width: 100%;
}

/* Pagination */

.transaction-card .dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .transaction-table-wrapper {
        overflow-x: auto;
    }

    /*
     * Eight columns need room to remain readable.
     * The wrapper handles the horizontal scroll.
     */
    .transaction-table {
        min-width: 850px;
    }

    .transaction-table th,
    .transaction-table td {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .transaction-card {
        margin-left: 0;
        margin-right: 0;
    }

    .transaction-card .card-inner {
        padding: 15px;
    }

    .transaction-table {
        min-width: 850px;
    }

    .transaction-table th,
    .transaction-table td {
        font-size: 12px;
        padding: 8px 7px;
    }

    .transaction-table .transaction-ref {
        max-width: 150px;
    }

    .transaction-table .transaction-receiver {
        max-width: 170px;
    }

    .transaction-table .transaction-narration {
        max-width: 180px;
    }

    .transaction-table .transaction-date {
        max-width: 130px;
    }

    .transaction-table .view-transaction {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .transaction-card .card-inner {
        padding: 10px;
    }

    .transaction-table {
        min-width: 820px;
    }

    .transaction-table th,
    .transaction-table td {
        font-size: 12px;
        padding: 7px 6px;
    }

    .transaction-table .transaction-narration {
        max-width: 160px;
    }

    .transaction-table .transaction-receiver {
        max-width: 150px;
    }
}

/* =========================================================
   TRANSACTION MODAL
   ========================================================= */

#transactionDetailsModal .modal-dialog {
    width: auto;
    max-width: 600px;

    margin-left: auto;
    margin-right: auto;
}

#transactionDetailsModal .modal-content {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
}

#transactionDetailsModal .modal-body {
    min-width: 0;
    overflow-x: hidden;
}

#transactionDetailsModal table {
    width: 100%;
    max-width: 100%;
}

#transactionDetailsModal th {
    width: 40%;
    white-space: nowrap;
}

#transactionDetailsModal td {
    max-width: 60%;

    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 767.98px) {

    #transactionDetailsModal .modal-dialog {
        width: calc(100% - 20px);
        max-width: none;

        margin: 10px auto;
    }

    #transactionDetailsModal .modal-body {
        padding: 15px;
    }

    #transactionDetailsModal th {
        width: 40%;
        white-space: normal;
    }

    #transactionDetailsModal td {
        width: 60%;
    }
}

@media (max-width: 575.98px) {

    #transactionDetailsModal .modal-dialog {
        width: calc(100% - 10px);
        margin: 5px auto;
    }

    #transactionDetailsModal .modal-body {
        padding: 10px;
    }

    #transactionDetailsModal th,
    #transactionDetailsModal td {
        font-size: 13px;
        padding: 8px 6px;
    }
}