.GenericPaymentApprovalForm {
    &-step {
        &--disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    }
    &-steps {
        flex-direction: column;
        width: 100%;

        h4 {
            margin-bottom: 0;
        }

        .SuiteSection {
            .MetadataList {
                margin-bottom: 12px;
            }

            &-sub {
                &:last-of-type {
                    margin-bottom: var(--section-gap);
                }

                .SuiteSection {
                    &-header {
                        &-content {
                            .GlyphIcon {
                                order: -1;
                                margin-right: 12px;

                                &.SuccessGlyphIcon {
                                    color: var(--success);
                                }
                            }
                        }
                    }
                }
            }

            .SuiteSection-body:empty {
                margin-top: 0;
            }
        }
    }

    &-step-panel {
        &-error {
            color: var(--danger);
        }

        &-generated-export,
        &-approve-file {
            &-download {
                margin: 5px;
                width: auto;

                &-content {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                }

                .button-group {
                    display: flex;
                    flex-direction: row;
                    gap: 5px;
                }
            }
        }
    }

    &-step-errors,
    &-step-alert {
        &--after {
            .Alert {
                margin-top: 20px;
            }
        }
    }

    &-ConfirmApproval {
        &-Label {
            margin-top: 12px;
        }
    }

    &-ConfirmFunds,
    &-ConfirmApproval,
    &-SendPayment,
    &-Confirmation {
        .active {
            border: 1px solid var(--warning);
            border-radius: 4px;
        }

        &-box {
            padding: 10px;
        }
    }
}

.GenericPaymentApprovalFormSidecar {
    width: 500px;

    .ReactModal-content {
        min-width: 500px;
    }

    .ReactModal-body {
        padding: 0;
    }
}
