body {
}

.timeline.timeline-4 {
    position: relative;
    width: 100%;
}

    .timeline.timeline-4:after {
        content: '';
        position: absolute;
        width: 5px;
        top: 0;
        margin-top: 0.1rem;
        bottom: 0;
        left: 50%;
        margin-left: -2.5px;
        background-color: #EBEDF3;
        border-radius: 0.42rem;
    }

    .timeline.timeline-4.timeline-center {
        margin: 0 auto;
    }

    .timeline.timeline-4 .timeline-bar {
        border-radius: 0.42rem;
        width: 20px;
        height: 5px;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        background-color: #EBEDF3;
    }

    .timeline.timeline-4 .timeline-items {
        position: relative;
    }

        .timeline.timeline-4 .timeline-items .timeline-item {
            position: relative;
            margin-left: 0;
            width: 50%;
            min-height: 3rem;
        }

            .timeline.timeline-4 .timeline-items .timeline-item:after {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                top: 3rem;
                left: 100%;
                margin-left: -3rem;
                border-left: solid 10px #F3F6F9;
                border-bottom: solid 17px transparent;
                border-right: solid 17px transparent;
                border-top: solid 17px transparent;
            }

        /*Time Line After Color*/
        .timeline.timeline-4 .timeline-items .timeline-item1:after {
            border-left: solid 10px #22367c;
        }

        .timeline.timeline-4 .timeline-items .timeline-item3:after {
            border-left: solid 10px #6067f0;
        }

        .timeline.timeline-4 .timeline-items .timeline-item5:after {
            border-left: solid 10px #666bef;
        }

        .timeline.timeline-4 .timeline-items .timeline-item .timeline-badge {
            background: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            z-index: 1;
            position: absolute;
            top: 3.5rem;
        }

            .timeline.timeline-4 .timeline-items .timeline-item .timeline-badge > div {
                border-radius: 50%;
                width: 10px;
                height: 10px;
            }

        .timeline.timeline-4 .timeline-items .timeline-item .timeline-label {
            display: block;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .timeline.timeline-4 .timeline-items .timeline-item .timeline-content {
            position: relative;
            border-radius: 0.42rem;
            padding: 1rem 1.5rem;
            background-color: #F3F6F9;
        }

        .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-left {
            left: 0;
            padding-right: 2.85rem;
            position: relative;
        }

            .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-left .timeline-badge {
                right: -10px;
            }

            .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-left .timeline-label {
                text-align: right;
            }

        .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right {
            left: 50%;
            padding-left: 2.86rem;
        }

            .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right .timeline-badge {
                left: -10px;
            }

            .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right .timeline-label {
                text-align: left;
            }

            .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right:after {
                right: 100%;
                left: auto;
                margin-right: -3rem;
                border-right: solid 10px #F3F6F9;
                border-left: solid 17px transparent;
            }

        /*time line Right After Color*/
        .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right2:after {
            border-right: solid 10px #5cc38b;
        }

        .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right4:after {
            border-right: solid 10px #7b6cd2;
        }

        .timeline.timeline-4 .timeline-items .timeline-item:first-child {
            top: 2rem;
        }

        .timeline.timeline-4 .timeline-items .timeline-item:last-child {
            bottom: 2rem;
        }

    .timeline.timeline-4.timeline-justified .timeline-bar {
        left: 5px;
    }

    .timeline.timeline-4.timeline-justified:after {
        left: 5px;
    }

    .timeline.timeline-4.timeline-justified .timeline-items {
        padding: 1rem 0;
    }

        .timeline.timeline-4.timeline-justified .timeline-items .timeline-item {
            width: 100%;
            left: 0;
            padding-left: 2.85rem;
            position: relative;
            top: 0;
            bottom: 0;
            margin-bottom: 1.5rem;
        }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item:after {
                right: 100%;
                left: auto;
                margin-left: auto;
                margin-right: -3rem;
                border-right: solid 10px #F3F6F9;
                border-left: solid 17px transparent;
            }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item .timeline-badge {
                left: -5px;
            }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item .timeline-label {
                text-align: left;
            }

            .timeline.timeline-4.timeline-justified .timeline-items .timeline-item:last-child {
                margin-bottom: 0;
            }

@media (max-width: 991.98px) {
    .timeline.timeline-4 .timeline-bar {
        left: 5px !important;
    }

    .timeline.timeline-4:after {
        left: 5px !important;
    }

    .timeline.timeline-4 .timeline-items {
        padding: 1rem 0;
    }

        .timeline.timeline-4 .timeline-items .timeline-item {
            width: 100% !important;
            left: 0 !important;
            padding-right: 0 !important;
            padding-left: 2.85rem !important;
            position: relative;
            top: 0 !important;
            bottom: 0 !important;
            margin-bottom: 1.5rem;
        }



            .timeline.timeline-4 .timeline-items .timeline-item:after {
                right: 100%;
                left: auto !important;
                margin-left: auto;
                margin-right: -3rem;
                border-right: solid 10px #F3F6F9;
                border-left: solid 17px transparent;
            }

        /*Time Line After Color*/
        .timeline.timeline-4 .timeline-items .timeline-item1:after {
            border-right: solid 10px #22367c;
        }

        .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right2:after {
            border-right: solid 10px #5cc38b;
        }

        .timeline.timeline-4 .timeline-items .timeline-item3:after {
            border-right: solid 10px #6067f0;
        }

        .timeline.timeline-4 .timeline-items .timeline-item.timeline-item-right4:after {
            border-right: solid 10px #7b6cd2;
        }

        .timeline.timeline-4 .timeline-items .timeline-item5:after {
            border-right: solid 10px #666bef;
        }

        .timeline.timeline-4 .timeline-items .timeline-item .timeline-badge {
            left: -5px !important;
        }

        .timeline.timeline-4 .timeline-items .timeline-item .timeline-label {
            text-align: left !important;
        }

        .timeline.timeline-4 .timeline-items .timeline-item:last-child {
            margin-bottom: 0 !important;
        }
}