.ShowCustomerAccounting {
    margin-top: 42px;

    &-popup {
        .ReactModal {
            &-content {
                max-width: 25%;

                p {
                    margin-bottom: 2rem;
                }

                .bold {
                    font-weight: bolder;
                }
            }

            &-header-text {
                margin-left: 0;
            }
        }
    }

    &-entities {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    &-live-status {
        margin: 0;
    }

    &-Redesign {
        .title {
            margin: 20px auto;
        }
    }
}

.PaymentEntityItem {
    border: 1px solid var(--gray-300);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 80px;
    padding: 20px;
    width: 100%;

    &-content {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    &-actions {
        align-items: center;
        display: flex;
    }

    &-name {
        font-size: 16px;
        font-weight: 500;
    }

    &-live-status {
        color: var(--gray-600);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        padding-left: 20px;
        position: relative;
        text-transform: uppercase;

        &::before {
            background: var(--success);
            border-radius: 50%;
            content: '';
            position: absolute;
            height: 12px;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
        }
    }

    &-alert {
        margin: 20px 0 0;
    }

    &-vat-loader {
        width: 300px;
        margin-right: 30px;
    }
}

.StatementPeriodDetail {
    &-failed-attachments-banner {
        margin-bottom: 35px;

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

    &-actionBox {
        margin-top: 20px;
    }

    &-name {
        margin-bottom: 3.5rem;
    }

    &-info-text {
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-style: italic;
    }

    &-pending-adjustments-time {
        font-size: 12px;
    }

    &-popup {
        .ReactModal-content {
            max-width: 20%;

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

        &-content {
            .top-text {
                margin-bottom: 1.5rem;
            }
        }
    }

    .UploadExchangeRates {
        .SkeletonLoader {
            width: 70%;
        }

        .UploadArea {
            border: none;
        }

        &-uploadcsv {
            label {
                color: var(--anchor-default);
                cursor: pointer;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 1px;
                margin-left: 1px;
            }

            label:hover {
                color: var(--anchor-hover);
            }
        }
    }

    .ReleaseReserves.disabled {
        font-size: 12.5px;
        text-transform: initial;
    }

    .ShowCustomerAccounting {
        position: relative;

        .PageTitle {
            bottom: 18px;
            position: relative;
        }
    }

    .CompleteIcon {
        background-color: var(--success);
        border-radius: 50%;
        display: block;
        height: 20px;
        position: absolute;
        right: 18px;
        text-align: center;
        top: -8px;
        width: 20px;

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

    .CloseStatementPeriod {
        &-btn,
        &-help-tooltip {
            float: left;
        }

        &-help-tooltip {
            padding: 8.5px 3px;
        }
    }
    .row {
        clear: both;
    }

    &-actionLinks {
        margin-bottom: 15px;

        div {
            line-height: 18px;
        }

        .ReleaseReserves.disabled {
            text-transform: uppercase;
        }

        .disabled {
            .GlyphIcon {
                opacity: 0.5;
            }
        }
    }
}

.GenerateVatDocs {
    display: flex;
    column-gap: 40px;

    &-generate-button {
        margin-right: 40px;
    }

    &-modal.ReactModal {
        .ReactModal-content {
            max-width: 560px;
        }

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

    &-modal-alert {
        margin-top: 20px;
    }

    &-modal-bold-text {
        font-weight: 500;
    }

    &-generating {
        display: flex;
        margin-top: auto;
        color: var(--gray-600);

        .LoadingSpinner {
            justify-content: normal;
            width: fit-content;
            margin: auto 10px;

            &-inner {
                height: 16px;
                width: 16px;
            }
        }
    }
}

.VatDocsStatuses {
    align-items: center;
    margin-right: 40px;
    display: flex;
    gap: 30px;

    &-status-count {
        height: 20px;
        padding: 1px 5px;
        margin-right: 10px;
        letter-spacing: 1px;
        line-height: 18px;
        font-size: 12px;

        .SuiteBadge-text {
            font-weight: 500;
        }
    }

    &-status-count.completed {
        color: var(--success);
        background-color: rgba(23 173 65 / 20%);
    }

    &-status-count.failed {
        color: var(--danger);
        background-color: rgba(232 64 49 / 20%);
    }

    &-failed-btn,
    .btn-quartenary {
        font-weight: 400;
        font-size: inherit;
        letter-spacing: 0;
        text-transform: none;
    }

    &-retry {
        display: flex;
        margin-top: auto;
        color: var(--gray-600);
    }

    .retry-failed-tooltip {
        margin-left: 13px;

        // stylelint-disable-next-line no-descending-specificity
        .GlyphIcon {
            color: var(--danger);
        }
    }

    .LoadingSpinner {
        justify-content: normal;
        width: fit-content;
        margin: auto 10px;

        &-inner {
            height: 16px;
            width: 16px;
        }
    }
}

.FailedVatDocsModal {
    &.ReactModal {
        .ReactModal-content {
            width: 100%;
            max-height: 600px;
            max-width: 850px;
        }

        .ReactModal-header {
            z-index: 1;
        }
    }

    &-title {
        align-items: center;
        display: flex;
        font-size: 18px;
        padding: 20px 0;
    }

    &-count-tag {
        background: var(--container-fills-backgrounds-semantics-error);
        color: var(--error);
        margin-left: 10px;
        padding: 1px 5px;
        font-size: 12px;
        height: 20px;

        .SuiteBadge-text {
            font-weight: 500;
        }
    }

    &-details {
        align-items: center;
        display: flex;
    }

    &-details-items {
        display: flex;
        gap: 60px;
    }

    &-details-item-label {
        color: var(--gray-600);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    &-details-item-value {
        display: block;
        margin-top: 6px;
    }

    &-retry-btn {
        margin-left: auto;
    }

    &-table {
        margin-top: 30px;
    }

    &-account-cell-id {
        color: var(--gray-600);
        display: block;
        font-size: 12px;
        margin-top: 2px;
    }

    &-failure-cell {
        .WarningGlyphIcon {
            color: var(--red);
            margin-right: 10px;
        }
    }
}

.PaymentEntityItem-redesign {
    .card {
        &:not(.Alert) {
            padding: 12px;
            padding-bottom: 0;
            border-radius: 8px;

            // TODO: remove box-shadow when the card from the Solfege will have this property set
            /* stylelint-disable */
            box-shadow: var(--Shadows-XY-Value-Small, 1px)
                var(--Shadows-XY-Value-Small, 1px)
                var(--Shadows-Blur-Small, 4px) 0px
                var(--Shadows-Color-Medium, rgba(18, 50, 73, 0.12));
            /* stylelint-enable */
            border: none;
        }

        &-header {
            border-bottom: none;
        }

        h3 {
            margin-right: 4px;
        }

        &-body {
            &:not(.Alert-body) {
                border-radius: 8px;
                background-color: var(--gray-100);
                margin-bottom: 12px;
            }

            .text {
                margin-top: 10px;
            }
            &-message {
                margin-top: 10px;
            }
        }
        .step-name {
            color: var(--gray-900);
            font-size: 16px;
            font-weight: 500;
            line-height: 22px;
            margin-left: 5px;
        }
    }

    .Alert {
        margin-top: 10px;
    }

    .VatDocsStatuses {
        gap: 12px;
    }
    .GenerateVatDocs-generate-button {
        margin-right: auto;
    }
}