.PaymentGroupDetails {
    &-approval-count {
        color: var(--gray-500);
        display: inline-block;
        float: left;
        font-size: 14px;
        font-weight: 500;
        margin-right: 5px;
        margin-top: 11px;
    }

    &-post-payment {
        float: left;
        padding: 7px;
        width: 134px;

        span {
            color: var(--gray-500);
            margin-left: 4px;
        }

        .CheckGlyphIcon {
            color: var(--success);
        }
    }

    &-help-popup {
        margin: 15px;
    }

    &-section {
        margin-top: 15px;
    }

    &-top-header {
        display: flex;
        gap: 12px;

        span {
            color: var(--gray-500);
        }

        &-right {
            display: flex;
            gap: 12px;
        }
    }

    &-failed-batches-banner {
        margin-bottom: 35px;

        .batchFailedMsg {
            margin-top: 5px;
        }

        .batchNum {
            font-weight: 500;
        }

        .contactMsg {
            font-weight: 500;
            width: 100%;
        }
    }

    .paymentOptions {
        .dropdown-item {
            color: var(--danger);
        }

        .dropdown-item.disabled {
            color: var(--gray-400);
        }

        .deleteButton {
            margin-right: 6px;
            padding: 6px;
            border-radius: 50%;
        }
    }

    .HelpTooltip {
        margin-left: 4px;
    }

    .generating {
        color: var(--gray-700);
        padding-top: 2%;
        text-align: center;
    }

    .RefreshGlyphIcon {
        cursor: pointer;
        color: var(--gray-700);
    }

    .RefreshGlyphIcon:hover {
        color: var(--gray-500);
    }

    .payment-group-payment-refresh-text {
        padding: 2px;
    }

    .nav-item.nav-link[role='tab'] {
        color: var(--gray-500);
    }

    .nav-item.nav-link[role='tab'].active {
        color: var(--gray-800);
    }

    .ClearFilters {
        padding: 25px 0 0 39px;
    }

    .GridTable-cell {
        white-space: normal;
    }

    .SearchableList-filter {
        height: 80px;
    }

    .SearchField {
        width: 350px;
    }

    .SearchFieldInput {
        font-size: 14px;
    }

    &-result-count {
        height: 36px;
        position: relative;
        width: 100%;
    }

    td,
    th {
        padding-left: 0;
        word-break: break-word;

        &.col-right-aligned {
            padding-right: 18px;
            text-align: right;
        }
    }

    &-pending-payment {
        .headerName {
            float: left;
        }
    }

    .payment-diff-green {
        color: var(--success);
        text-align: center;
    }

    .payment-diff-red {
        color: var(--danger);
        text-align: center;
    }

    &-accounts {
        .btn {
            padding: 0;
        }

        .Glyph.ChevronDownGlyph,
        .Glyph.ChevronUpGlyph {
            vertical-align: inherit;
            width: 11px;
        }

        .TableActionBtn {
            align-items: center;
            background: var(--gray-100);
            border: none;
            border-radius: 100%;
            display: inline-flex;
            height: 24px;
            justify-content: center;
            padding: 0;
            width: 24px;
        }

        .TableActionBtn:hover {
            background: var(--gray-200);
            border: none;
            box-shadow: 0 0 5px var(--gray-700);
            scale: 1.15;
            border-radius: 100%;
        }

        &-delete {
            display: none;
            position: relative;
            /* stylelint-disable max-nesting-depth */

            .TrashGlyphIcon {
                cursor: pointer;
                color: var(--danger);
                width: 16px;
            }

            .confirm {
                background-image: linear-gradient(
                    to right,
                    rgb(255 0 0 / 0%),
                    var(--gray-200) 10%
                );
                color: var(--gray-900);
                min-width: 240px;
                overflow: hidden;
                position: absolute;
                right: 5px;
                text-align: right;
                top: -10px;
                white-space: nowrap;
                z-index: 10;
            }

            .divider {
                padding: 0 2%;
            }
        }

        .TableSorting {
            width: 150%;

            .active {
                color: var(--gray-800);

                .Glyph.ChevronDownGlyph,
                .Glyph.ChevronUpGlyph {
                    fill: var(--black);
                }
            }

            th {
                cursor: pointer;
                top: -1px;
            }

            td {
                padding-left: 10px;
                text-align: right;
            }

            .account_id {
                width: 7%;
            }

            .account_name,
            .current_balance,
            .last_payment,
            .tax_withholding {
                width: 9%;
            }

            .balance_after_tax,
            .currency_code {
                width: 8%;
            }

            td:nth-child(1),
            td:nth-child(3) {
                text-align: left;
            }

            .delete_payment_account {
                width: 2%;
            }

            .last_statement_period_id {
                width: 10%;
            }

            .headerName {
                float: left;
                width: 87%;
                text-align: right;
            }

            .sortIcon {
                float: right;
                width: 6%;
            }

            .balance_after_tax,
            .current_balance,
            .last_statement_period_id,
            .tax_withholding {
                .sortIcon {
                    margin-top: 8%;
                }
            }

            .payment_error_code {
                .sortIcon {
                    margin-top: 13%;
                }
            }

            /* stylelint-enable max-nesting-depth */
        }

        tr:hover &-delete {
            display: block;
            text-align: center;
        }
    }

    &-add-note-popup header h3,
    &-confirm-delete-popup header h3 {
        margin-left: 0;
    }

    &-confirm-delete-popup section {
        margin-bottom: 20px;
        min-width: 450px;
    }

    &-add-note-popup textarea {
        height: 120px;
        width: 100%;
    }

    .sticky {
        &-view {
            margin: auto;
            max-height: 75vh;
        }

        &-wrapper {
            position: relative;
            overflow: visible;

            table {
                border-collapse: collapse;
            }

            thead {
                th {
                    background-color: var(--white);
                    position: sticky;
                    top: 0;
                    z-index: 2;
                    border-top: none !important;
                    border-bottom: none !important;
                    box-shadow:
                        inset 0 0 0 #000,
                        inset 0 -1px 0 var(--koala);
                    background-clip: padding-box;
                }

                > tr > th:first-of-type {
                    z-index: 3;
                }
            }

            thead > tr > th:first-child,
            td:first-of-type {
                left: -1px;
            }

            thead > tr > th:first-child,
            td:first-of-type,
            tr:hover {
                background: var(--gray-100);
            }

            tbody {
                td:first-of-type,
                tr > td:last-child {
                    position: sticky;
                }

                tr > td:last-child {
                    right: 0;
                    width: 40px;
                    vertical-align: middle;
                    padding: 0;
                }
            }
        }
    }

    .PaymentGroup-overview {
        margin-top: 24px;
    }

    .PaymentGroupProgramCurrencyTotals {
        .table td:last-child,
        .table th:last-child {
            padding-right: 1em;
            text-align: right;
        }
    }

    .ProgramCurrencyTotalHeading {
        padding: 20px 0;
    }

    &-accounts-reset-warning-popup {
        z-index: 4;

        .ReactModal-content {
            max-width: 25%;
        }

        .ReactModal-header-text {
            margin-left: 0;
        }
    }

    &-accounts-table {
        overflow: auto;
    }

    &-accounts-table::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    &-accounts-table::-webkit-scrollbar-thumb {
        background-color: var(--gray-500);
        border-radius: 10px;
    }

    .NoPaymentsFound {
        height: 200px;
    }

    /* stylelint-disable no-descending-specificity */
    .PaymentSent {
        .delete_payment_account {
            width: 0;
        }

        // hide col with Delete button
        tr > td:last-child {
            display: none;
        }
    }

    .sticky-view tr:hover td:last-child {
        background: var(--gray-100);
    }

    table tbody:nth-of-type(1) tr:nth-of-type(1) td {
        border-top: none;
    }

    /* stylelint-enable no-descending-specificity */

    .singleBatchError {
        width: 100%;

        .batchFailedMsg {
            width: 100%;
        }
    }

    .mutipleBatchErrors {
        .Alert-content {
            width: 80%;
        }
    }
}

.PayoneerProgramsListTable {
    .GridTable-cell-text {
        white-space: break-spaces;
    }
}