.activity-feed {
    padding: 15px;
}

    .activity-feed .feed-item, .activity-feed .feed-item.history, .activity-feed .feed-item.process, .activity-feed .feed-item.cancel {
        position: relative;
        padding-bottom: 10px;
        padding-left: 30px;
        border-left: 3px solid #e4e8eb;
    }

        .activity-feed .feed-item:last-child, .activity-feed .feed-item.history:last-child, .activity-feed .feed-item.process:last-child, .activity-feed .feed-item.cancel:last-child {
            border-color: transparent;
        }

        .activity-feed .feed-item:after, .activity-feed .feed-item.history:after, .activity-feed .feed-item.process:after, .activity-feed .feed-item.cancel:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -8px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid #e4e8eb;
        }


        .activity-feed .feed-item.history {
            border-left: 3px solid #009d11;
        }

            .activity-feed .feed-item.history:after {
                background: #009d11;
                border: 2px solid #009d11;
            }


        .activity-feed .feed-item.cancel {
            border-left: 3px solid #fd4c4c;
        }

            .activity-feed .feed-item.cancel:after {
                background: #fd4c4c;
                border: 2px solid #fd4c4c;
            }

        .activity-feed .feed-item.process:after {
            border: 2px solid #009d11;
        }

        .activity-feed .feed-item .date {
            position: relative;
            top: -5px;
            color: #009d11;
        }

        .activity-feed .feed-item .text {
            position: relative;
            top: -3px;
        }