flight-details-wrapper {
    .boarding-status-Scheduled {
        color: $gray;
    }

    .boarding-status-InProgress {
        color: $green;
    }

    .boarding-status-Finished {
        color: $red;
    }

    .details__body__row--wrapper {
        display: flex;
        flex-direction: column;

        & + .details__body__row--wrapper {
            margin-top: $space-xl;
        }

        .details__body__row {
            @include flex-center-align();

            .details__title {
                min-width: 29%;
                max-width: 29%;
                margin-right: $space-xl;
                @include flex-center-align();

                svg {
                    margin-right: $space-xl;
                }
            }

            .details__data {
                @include flex-center-align();
                flex-grow: 1;
            }
        }

        &.icons-component {
            .details__body__row {
                align-items: flex-start;

                .details__data {
                    flex-wrap: wrap;
                    margin-bottom: -$space-xl;
                }
            }
        }

        .progress-wrapper.separator {
            margin-top: $space-xl;
            height: 3px;
            @include flex-center-align();
            position: relative;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                height: 1px;
                left: 0;
                right: 0;
                border-top: 1.3px dotted $border;
            }

            .progress {
                display: none;
                height: 2px;
                position: absolute;
                top: calc(50% - 1px);
                left: 0px;
                background-color: $green;
                transition-duration: 0.2s;
                z-index: 2;
            }
        }

        &.row-with-progress {
            .progress-wrapper.separator {
                .progress {
                    display: block;
                }
            }
        }
    }

    .details__body__row--wrapper:last-child {
        .progress-wrapper.separator {
            display: none;
        }
    }
}
