.timeline .content {
    margin-left: 20px;
}

.timeline ul, .timeline-item{
    list-style: none;
    padding: 0;
}

.timeline .message {
    margin-bottom: 0px;
}

.timeline .author {
    font-size: 10px;
    margin-bottom: 0px;
}

.timeline{
    margin-top: 2rem;
    border-radius: 12px;
    position: relative;
}
.timeline .icon {
    position: absolute;
}

.timeline .icon svg {
    width: 12px;
    height: 12px;
    margin-left: -7px;
}

.timeline .icon i {
    font-size: 13px;
    margin-left: -3px;
    text-align: center;
}

.timeline .icon i.icon-offset-extra {
    margin-left: -8px;
}

.timeline .icon i.icon-offset-extra-7px {
    margin-left: -7px;
}

.timeline .icon i.icon-offset-extra-8px {
    margin-left: -8px;
}

.timeline .icon i.icon-offset-extra-9px {
    margin-left: -9px;
}

.timeline .icon i.icon-offset-extra-10px {
    margin-left: -10px;
}

.timeline .timeline-item{
    padding-bottom: 0.5rem;
    border-left: 1px solid #000000;
    position: relative;
    margin-left: 10px;
    &:last-child{
         border: 0px;
         padding-bottom: 0;
     }
    &:before{
         content: '';
         width: 24px;
         height: 24px;
         background: white;
         border: 1px solid #000000;
         border-radius: 50%;
         position: absolute;
         left: -13px;
         top: 0px;
     }
}
.timeline .time{
    font-size: 10px;
    margin-bottom: 0px;
}
body{
    font-family: sans-serif;
}

.timeline .timeline-item .message .timeline-color-badge {
    padding: 4px 10px 4px 10px;
}