.flowgraph {
    padding-top: 50px;

    .flowitem {
        position: relative;

        @media (min-width: 768px) {
            height: 200px;
        }
    }

    .flowitem-content {
        position: relative;

        @media (min-width: 768px) {
            width: 30%;
        }

        h4 {
            font-weight: bold;
        }
    }

    .flowitem-image {
        background-color: #fff;
        padding: 10px;
        width: 100px;

        @media (min-width: 768px) {
            position: absolute;
            top: -45px;
            width: 120px;
        }

        @media (min-width: 992px) {
            top: -60px;
            width: 160px;
        }
    }

    .flowitem-connector {
        @media (max-width: 539px) {
            display: block;
            height: 60px;
            margin: 0 30%;
            margin-bottom: 20px;
            position: relative;

            &::after,
            &::before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                width: 45%;
                height: 60px;
                border: 3px solid transparent;
            }

            &::before {
                left: 0;
                border-top-right-radius: 42px;
                border-top-color: var(--abc-light-gray);
                border-right-color: var(--abc-light-gray);
            }

            &::after {
                right: 0;
                border-top-left-radius: 42px;
                border-top-color: var(--abc-light-gray);
                border-left-color: var(--abc-light-gray);
            }
        }

        @media (min-width: 768px) {
            position: absolute;
            display: block;
            top: 16px;
            left: 30%;
            right: 30%;
            height: 160px;
            border: 2px solid transparent;
            z-index: -1;
            margin: 0 20px;
        }

        @media (min-width: 992px) {
            top: 20px;
        }
    }

    @media (max-width: 539px) {
        &.begin-left {
            .odd {
                .flowitem-image {
                    float: right;
                }

                .flowitem-content {
                    top: 0 !important;
                }
            }

            .even {
                .flowitem-image {
                    float: left;
                    margin-right: 10px;
                }

                .flowitem-content {
                    top: 0 !important;
                }
            }
        }

        &.begin-right {
            .odd {
                .flowitem-image {
                    float: left;
                }

                .flowitem-content {
                    top: 0 !important;
                }
            }

            .even {
                .flowitem-image {
                    float: right;
                    margin-right: 10px;
                }

                .flowitem-content {
                    top: 0 !important;
                }
            }
        }
    }

    @media (min-width: 768px) {
        &.begin-left {
            .odd {
                .flowitem-content {
                    float: left;
                    clear: left;
                    text-align: right;
                }

                .flowitem-image {
                    left: 31%;
                }

                .flowitem-connector {
                    border-top-right-radius: 42px;
                    border-top-color: var(--abc-light-gray);
                    border-right-color: var(--abc-light-gray);
                    margin-right: 68px;
                }
            }

            .even {
                .flowitem-content {
                    clear: right;
                    float: right;
                }

                .flowitem-image {
                    right: 31%;
                }

                .flowitem-connector {
                    border-top-left-radius: 42px;
                    border-top-color: var(--abc-light-gray);
                    border-left-color: var(--abc-light-gray);
                    margin-left: 68px;
                }
            }
        }

        &.begin-right {
            .odd {
                .flowitem-content {
                    float: right;
                    clear: right;
                    text-align: left;
                }

                .flowitem-image {
                    right: 31%;
                }

                .flowitem-connector {
                    border-top-left-radius: 42px;
                    border-top-color: var(--abc-light-gray);
                    border-left-color: var(--abc-light-gray);
                    margin-left: 68px;
                }
            }

            .even {
                .flowitem-content {
                    clear: left;
                    float: left;
                }

                .flowitem-image {
                    left: 31%;
                }

                .flowitem-connector {
                    border-top-right-radius: 42px;
                    border-top-color: var(--abc-light-gray);
                    border-right-color: var(--abc-light-gray);
                    margin-right: 68px;
                }
            }
        }

        @media (min-width: 992px) {
            &.begin-left {
                .odd {
                    .flowitem-connector {
                        margin-right: 90px;
                    }
                }

                .even {
                    .flowitem-connector {
                        margin-left: 90px;
                    }
                }
            }
        }

        &::after {
            content: "";
            display: table;
            clear: both;
        }
    }
}