.standard-form-title.flex { margin: 32px 0 8px; font-size: 20px } .standard-form-title a { font-size: 16px } .pending-transaction-section { color: #fff } .pending-transaction-section .head { display: flex; justify-content: space-between; text-transform: uppercase } .pending-transaction-section .head span { color: var(--pending-transaction-section-head-color) } .pending-transaction-section .head a { color: var(--pending-trans-section-head-a-color) } .pending-transaction-section .head a:hover { color: var(--pending-trans-section-head-a-hover-color) } .pending-transaction-carousel { display: flex; flex-direction: row; width: 100%; max-width: 100%; overflow-x: scroll; gap: 8px; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 16px 0 } .transaction-item { width: 310px; min-height: 72px; max-height: 120px; scroll-snap-align: start; flex-shrink: 0; padding: 16px 12px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; gap: 8px; cursor: pointer; background-color: var(--pending-trans-car-item-bg) } .transaction-item .info-section { display: flex; align-items: center; gap: 8px } .transaction-item img { width: 38px; height: 38px } .transaction-item .info-section .details { flex-grow: 1; display: flex; flex-direction: row; justify-content: space-between; font-size: 14px } .transaction-item .info-section .details .highlight { padding-left: 4px; color: #f99702 } .transaction-item .info-section .details small { font-size: 12px } .transaction-item .info-section .details small.ticket-number { display: flex; gap: 4px; align-items: center } .transaction-item .info-section .details small .copy-btn { height: 12px; width: auto; filter: invert(50%); cursor: pointer } .transaction-item .info-section .details .primary { color: var(--pending-trans-car-item-info-section-details-primary-color) } .transaction-item .info-section .details .secondary { color: var(--pending-trans-car-item-info-section-details-secondary-color) } .transaction-item .info-section .details>div:last-child { text-align: right } .transaction-item .download-qr-btn { background: var(--pending-trans-car-item-download-qr-btn-bg); color: var(--pending-trans-car-item-download-qr-btn-color); align-self: flex-end; border: 0 } .transaction-item .download-qr-btn:hover { background: var(--pending-trans-car-item-download-qr-btn-hover-bg); color: var(--pending-trans-car-item-download-qr-btn-hover-color) } table:has(+.empty-table-container) { margin-bottom: 0; padding-bottom: 0 } table tr td { cursor: pointer } .empty-table-container { width: 100%; height: 233px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; margin-bottom: 16px; background-color: var(--empty-table-cntr-bg); color: var(--empty-table-cntr-color) } .empty-table-container img { filter: var(--empty-table-cntr-img-filter) } .pending-transaction-detail-container { display: flex; flex-direction: column; gap: 24px } .pending-transaction-detail-container .primary { color: var(--pending-trans-detail-primary-color) } .pending-transaction-detail-container .secondary { color: var(--pending-trans-detail-secondary-color) } .pending-transaction-detail-container .pending { color: #f99702 } .pending-transaction-detail-container .pending-transaction-detail-header { display: flex; flex-direction: column; align-items: center; gap: 16px } .pending-transaction-detail-container .pending-transaction-detail-header img { width: 74px; height: 74px } .pending-transaction-detail-container .pending-transaction-detail-header .payment-method-info-container { display: flex; flex-direction: column; align-items: center; gap: 8px } .pending-transaction-detail-container .pending-transaction-detail-header .payment-method-info-container .status-title { line-height: 16px; font-size: 16px; font-weight: 500 } .pending-transaction-detail-container .pending-transaction-detail-header .payment-method-info-container .payment-method { line-height: 16px; font-size: 12px; font-weight: 500 } .pending-transaction-detail-body { display: flex; flex-direction: column; gap: 16px } .pending-transaction-payment-link-container { display: flex; flex-direction: column; align-items: center; gap: 12px } .pending-transaction-payment-link-container a { color: #f99702 } .pending-transaction-detail-card { display: flex; flex-direction: column; border-radius: 8px; background-color: var(--pending-trans-detail-card-bg); border: 1px solid var(--pending-trans-detail-card-border-color) } .pending-transaction-detail-card .secondary-section { background-color: var(--pending-trans-detail-card-secondary-section-bg) } .pending-transaction-detail-card>div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; font-size: 14px } .pending-transaction-detail-card>div .bank-icon { max-width: 120px; max-height: 20px } .pending-transaction-detail-card>div>div { width: calc((100% - 8px)/2); flex-grow: 0; flex-shrink: 0 } .pending-transaction-detail-card>div>div:first-child,.pending-transaction-detail-card>div>span:first-child { text-align: left } .pending-transaction-detail-card .destination-account-name { text-align: left } .pending-transaction-detail-card .destination-account-number-section .destination-account-number { width: 80%; display: flex; flex-direction: column; gap: 4px; font-size: 20px; font-weight: 500; line-height: 24px } .pending-transaction-detail-card .destination-account-number-section .destination-account-number span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left } .pending-transaction-detail-card .destination-account-number-section .destination-account-number .payment-account-name-label { font-size: 12px } .pending-transaction-detail-card[data-payment-type="CRYPTO"] .destination-account-number-section,.pending-transaction-detail-card[data-payment-type="QR"] .destination-account-number-section { align-items: end } .pending-transaction-detail-card[data-payment-type="QR"] .destination-account-number-section .destination-account-number { font-size: 16px; gap: 0 } .pending-transaction-detail-card[data-payment-type="QR"] .destination-account-number-section .destination-account-number .payment-account-name-label { font-size: 14px } .pending-transaction-detail-card .destination-account-number-section .standard-button-group { width: max-content; text-align: right } .pending-transaction-detail-card .standard-button-group,.pending-transaction-detail-card .standard-button-group .btn { width: 100%; margin: 0; text-transform: capitalize; color: #fff } .pending-transaction-detail-card .copy-account-number-button { padding: 4px 8px; margin: 0 } .pending-transaction-detail-card .pending-transaction-detail-qr-code-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 16px; background-color: var(--pending-trans-detail-card-secondary-section-bg) } .pending-transaction-detail-card .pending-transaction-detail-qr-code-container img { width: 156px; height: 156px; border-radius: 8px; background-color: #fff } .pending-transaction-detail-card .pending-transaction-detail-qr-code-container br { display: none } .pending-transaction-detail-card .pending-transaction-detail-qr-code-container p { margin: 0; font-size: 14px; text-align: center } .pending-transaction-detail-card .pending-transaction-detail-qr-code-container .standard-button-group { align-self: stretch } .pending-transaction-remarks { display: flex; justify-content: center; align-items: center; padding: 12px; border-radius: 4px; text-align: center; background-color: #f8e68917; border: 1px dashed #f8e689; color: var(--pending-trans-detail-remarks-color) } .pending-transaction-info-section { display: flex; flex-direction: column; gap: 8px } .pending-transaction-info-section .icon { width: 16px; height: 16px; margin-top: -2px } .pending-transaction-info-section .icon.chevron-icon { width: 16px; height: 16px; transform: rotate(270deg); filter: var(--pending-trans-info-chevron-icon-filter) } .pending-transaction-info-section.open .icon.chevron-icon { transform: rotate(90deg) } .pending-transaction-info-section .icon.copy-icon { filter: var(--pending-trans-info-copy-icon-filter) } .pending-transaction-info-section .info-section-header { padding: 16px; cursor: pointer } .pending-transaction-info-section .info-section-body { display: none; padding: 0 16px 16px } .pending-transaction-info-section.open .info-section-body { display: flex; flex-direction: column; gap: 10px; border-top: 0 } .pending-transaction-info-section .info-section-body>div { display: flex; justify-content: space-between; align-items: center; width: 100% } .pending-transaction-info-section .info-section-body>div>div { width: calc((100% - 8px)/2); flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; gap: 4px } .pending-transaction-info-section .info-section-body>div>div:nth-child(2) { justify-content: flex-end; text-align: right } .how-to-pay-list { list-style: decimal; padding-left: 24px } .how-to-pay-list li { margin-bottom: 8px; padding-left: 8px; text-align: left } .transactions-table.table { font-weight: 500; font-size: 14px; border-radius: 8px; border: 1px solid var(--transactions-table-border); background: var(--transactions-table-bg) } .transactions-table.table thead { background: var(--transactions-table-head-bg); color: var(--transactions-table-head-color); border: 1px solid var(--transactions-table-head-border) } .transactions-table.table thead tr th { color: var(--transactions-table-head-color) } .transactions-table.table tbody { background: var(--transactions-table-body-bg); color: var(--transactions-table-body-color) } .transactions-table.table thead>tr>th,.transactions-table.table tbody>tr>th,.transactions-table.table thead>tr>td,.transactions-table.table tbody>tr>td { border: 0; padding: 16px 6px } .transactions-table.table thead tr th:first-child,.transactions-table.table tbody tr td:first-child { padding-left: 16px } .transactions-table.table thead tr th:last-child,.transactions-table.table tbody tr td:last-child { padding-right: 16px } .transactions-table.table tbody tr td { color: var(--transactions-table-body-color) } .transactions-table.table tbody span.transfer-status-4,.transactions-table.table tbody span.transfer-status-4 { color: var(--transactions-table-body-span-app-color) } .transactions-table.table tbody span.transfer-status-7,.transactions-table.table tbody span.transfer-status-8 { color: var(--transactions-table-body-span-reject-color) } .transactions-table.table tbody span.transfer-status-1,.transactions-table.table tbody span.transfer-status-2 { color: var(--transactions-table-body-span-pending-color) } .transactions-table.table .transfer-type-3.transfer-status-4::before,.transactions-table.table .positive.transfer-type-5.transfer-status-4::before { content: '+ ' } .transactions-table.table .transfer-type-4.transfer-status-4::before { content: '- ' } .transactions-table.table tbody span.amount:not(.transfer-status-4),.transactions-table.table tbody span.amount:not(.transfer-type-3) { color: var(--transactions-table-body-color) } .transactions-table.table tbody tr:nth-child(odd) { background: var(--transactions-table-body-tr-odd-bg) } .transactions-table.table tbody tr:nth-child(even) { background: var(--transactions-table-body-tr-even-bg) } .transactions-table.table tfoot>tr>td { border: 0 } .transactions-table+.empty-table-container { background-color: var(--empty-table-cntr-bg); color: var(--empty-table-cntr-color); border: 1px solid var(--transactions-table-head-border) } .transactions-table+.empty-table-container img { filter: var(--empty-table-cntr-img-filter) } .transactions-table.table tfoot>tr>td,.transactions-table .pagination-section { text-align: right; font-size: 14px } .transactions-table.table tfoot>tr>td>a,.transactions-table .pagination-section a { margin: 0 4px } .transactions-table .reporting-button-group { margin: 0 } .transactions-table .reporting-button-group .btn { width: 100px; padding: 4px 8px }