.PaymentsPage {
    display: flex;
    margin-bottom: 40px;

    &-collaborator-section {
        background-color: var(--white);
        border-radius: 3px;
        min-height: 700px;
        padding: 25px;
        width: 75%;
    }

    &-payment-amount-input-group {
        width: 130px;

        .input-group-text {
            font-weight: 500;
        }
    }

    &-table {
        display: flex;
        flex-direction: column;
        margin-top: 16px;
    }

    &-table-header {
        border-bottom: 1px solid var(--gray-400);
        border-top: 1px solid var(--gray-400);
        color: var(--gray-500);
        display: flex;
        font-weight: 500;
        padding-bottom: 7px;
        padding-top: 7px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    &-column {
        padding-left: 16px;
        padding-right: 16px;
    }

    &-collaborator-column {
       display: flex;
       width: 35%;
    }

    &-amount-column {
        display: flex;
        margin-left: auto;
        width: 16%;
    }

    &-checkmark-column {
        display: flex;
        width: 30px;

        .Checkmark {
            fill: var(--blue);
        }
    }

    &-balance-column {
        display: flex;
        justify-content: end;
        margin-left: auto;
        width: 25%;
    }

    &-table-body {
        display: flex;
        flex-direction: column;
    }

    &-collaborator-row {
        align-items: center;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        height: auto;
        min-height: 50px;

        &-active {
            background-color: var(--gray-100);
        }

        &-selected {
            background-color: #EFF7FF // No named variable for this
        }
    }

    &-collaborator-row-data {
        font-size: 14px;
    }

    &-collaborator-row-disabled {
        color: var(--gray-500);
    }

    &-collaborator-row-na {
        color: var(--gray-300);
    }

    &-balance-buttons {
        align-items: center;
        display: flex;
        margin-top: 24px;
    }

    &-balance-button-clear {
        margin-right: 16px;
    }

    &-collaborator-name-column {
        display: flex;
        width: 15%;
     }

    &-original-balance-column {
        display: flex;
        justify-content: flex-end;
        margin-left: auto;
        width: 15%;

        :first-child {
            margin-left: auto;
        }
    }

    &-original-balance-column {
        display: flex;
        margin-left: auto;
        width: 17%;
    }

    &-source-column {
        display: flex;
        justify-content: center;
        margin-left: auto;
        text-align: center;
        width: 18%;
    }

    &-target-column {
        display: flex;
        justify-content: center;
        margin-left: auto;
        text-align: center;
        width: 18%;
    }

    &-remaining-balance-column {
        display: flex;
        margin-left: auto;
        margin-right: 16px;
        width: 16%;

        :first-child {
            margin-left: auto;
        }
    }

    &-balance-warning {
        color: var(--orange);
        display: flex;
        margin-left: 8px;

        .Glyph {
            fill: var(--orange);
            margin-right: 4px;
        }
    }

    &-checkmark {
        width: 2%;

        .Checkmark {
            fill: var(--green);
        }
    }

    .Toast-body {
        border-left: 5px solid var(--red);
    }
}