.AccountDetail {
    &-edit-btn-help {
        display: block;
        float: right;
        line-height: 37px;
    }

    .EditGlyphIcon {
        background-color: var(--midnight-150);
        color: var(--midnight-750);
    }

    &-header {
        // Overrides the Solfege Label
        &-label label.form-label {
            color: var(--gray-700);
            font-size: 12px;
            letter-spacing: normal;
            margin-bottom: 0;
            text-transform: none;
        }

        // Created a flex container for horizontal links.
        // Not offered by Solfege at the time of commit.
        &-links {
            display: flex;
            gap: 8px;
        }

        // Overrides the Solfege PageHeader.MainContent
        &-main {
            align-items: flex-start;
            display: flex;
            line-height: 32px;
            width: 100%;
        }

        // Overrides the Solfege PageHeader.Title
        &-title {
            font-size: 32px;
            font-weight: 400;
            margin-bottom: 0;
        }

        // Overrides the Solfege AccountIcon (default is 24x24)
        .BrandIcon {
            width: 32px;
            height: 32px;
        }

        // Overrides the Solfege GlyphIcon
        .dotIcon {
            align-items: center;
            display: flex;
            float: left;
            padding: 8px;
            height: 32px;
            .DotGlyphIcon {
                color: var(--gray-700);
            }
        }

        // Overrides the Solfege PageHeader.MainContent
        .id {
            color: var(--gray-700);
            float: left;
            font-size: 24px;
            line-height: 32px;
        }
    }

    &-payment-help-popup {
        font-size: 13px;
        padding: 10px;
    }

    &-payment-help-content {
        margin-top: 5px;

        a:hover {
            text-decoration: none;
        }

        .table td {
            border: 0;
            padding: 2px 0;
        }

        td:first-child {
            font-weight: 500;
        }
    }

    // Some tweaks needed to match the design related to this PR's ticket,
    // partly due to Solfege not currently having a generic flex container,
    // and other css in this file adds to much padding above the header.
    .SuitePageHeader {
        .SuitePageHeader-metadata {
            display: flex;
            align-items: baseline;
        }
    }

    .SuiteSection-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &-section:first-child {
        margin-top: 3%;
    }

    &-section:not(:first-child) {
        margin-top: 6%;
    }

    &-ledger-details {
        clear: both;
    }

    &-ledger-table {
        position: relative;
        top: 40px;

        .GridTable-cell:nth-child(2),
        .GridTable-cell:nth-child(5) {
            white-space: initial;
        }
    }

    &-payment-details {
        float: left;
        width: 25%;
    }

    &-payee-name-history {
        margin-top: 40px;
    }

    &-tax-info .container {
        max-width: unset;
    }

    &-tax-info-history {
        margin-top: 40px;
    }

    .Alert {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .Glyph.Warning {
        fill: var(--warning);
    }

    .no-activity-text {
        position: relative;
        text-align: center;
        top: 102px;
    }

    .outstanding-balance {
        font-weight: 700;
    }

    .overflowed-col {
        margin-top: 2%;
    }

    .payment-method-label {
        .FRCLabel {
            display: inline;
        }
    }

    .section-title {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 24px;
    }

    .circle-with-glyph {
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;

        &.error {
            border: 2px solid var(--glyphs-error);
            svg {
                color: var(--glyphs-error);
            }
        }
        &.warning {
            border: 2px solid var(--glyphs-warning);
            svg {
                color: var(--glyphs-warning);
            }
        }
        &.success {
            border: 2px solid var(--glyphs-success);
            svg {
                color: var(--glyphs-success);
            }
        }
    }
}

.PayeeDetail {
    background: var(--white);

    &-hold-history {
        margin-top: 40px;
    }

    &-help-popup {
        font-size: 12px;
        margin: 15px;
    }

    &-payment-info {
        .HelpTooltip {
            padding: 5px;
        }
    }

    &-payee-metadata {
        display: flex;

        &-item {
            width: 25%;
        }
    }
}

.DesignAudit {
    .AccountDetail {
        &-payment-general-details {
            .SuiteSection-header-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        &-general-details,
        &-payment-general-details {
            hr {
                display: none;
            }
        }

        &-section {
            padding-bottom: 20px;
            margin-top: 0;
        }

        .contracts-section {
            padding: 0;
        }

        .table,
        td,
        th {
            border: 1px solid #d9d2d0;
        }
    }
}

.PaymentDetailWhitelabel {
    &__header {
        .last-edit-date {
            color: var(--text-label);
            gap: 4px;
        }
    }

    .Stepper-Step {
        flex: 1 1 0;

        &.inactive {
            color: var(--gray-600);

            .title {
                color: var(--gray-600);
            }
        }

        .Alert {
            margin: 0;

            .alert-text-link {
                padding-top: 10px;
            }
        }

        &.rejected {
            .title-action {
                /* no simple way for now to add glyph icon into step title action */
                .btn::before {
                    content: '\2714';
                    font-size: 7px;
                    padding-top: 3px;
                }
            }
        }
    }

    .SuiteSection-nested {
        margin-top: 20px;
    }
}

.SuitePageHeader .PaymentEligibilityStatus {
    margin-left: 10px;
    display: flex;
}

.PaymentDetail-contracts-title {
    padding-bottom: 8px;
}

// Required to display the contract card in grid format
// with 2 card per row and a gap between cards
.PaymentDetail-contracts-cardView {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

// Align text in card header on same line
.PaymentDetail-contracts-contractCardHeaderText {
    margin: 0;
    display: flex;
    align-items: center;
}

// Align items in card header on same line
.PaymentDetail-contracts-contractCardHeader {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;

    &-Left {
        display: flex;
    }
}

// Align items in card body on the left and right of the card
.PaymentDetail-contracts-cardView-cardBody {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}