.tl-item {
    z-index: 2;
}

.tl-item {
    border-radius: 3px;
    font-size: .90em;
    position: relative;
    display: -ms-flexbox;
    display: flex
}

.tl-item>* {
    padding: 8px 5px 10px 10px
}

.tl-item:last-child .tl-dot:after {
    display: none
}

.tl-dot {
    position: relative;
    border-color: rgba(160, 175, 185, .15)
}

.tl-dot:after,
.tl-dot:before {
    content: '';
    position: absolute;
    border-color: inherit;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    top: 14px;
    left: 50%;
    transform: translateX(-50%)
}

.tl-dot:after {
    width: 0;
    height: auto;
    top: 25px;
    bottom: -15px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0
}

.tl-content p:last-child {
    margin-bottom: 0
}

.tl-date {
    font-size: .80em;
    margin-top: 2px;
}

.tl-date2 {
    font-size: .70em;
    margin-top: 2px;
}

.b-warning {
    border-color: #f4c414 !important
}
.tl-item.active-warning .tl-dot:before {
    border-color: #f4c414;
    box-shadow: 0 0 0 6px rgba(255, 255, 71, 0.2)
}

.b-primary {
    border-color: #448bff !important
}
.tl-item.active-primary .tl-dot:before {
    border-color: #448bff;
    box-shadow: 0 0 0 6px rgba(68, 139, 255, .2)
}

.b-danger {
    border-color: #f54394 !important
}
.tl-item.active-danger .tl-dot:before {
    border-color: #f54394;
    box-shadow: 0 0 0 6px rgba(255, 99, 71, 0.2)
}

.b-success {
    border-color: #22bb33 !important
}
.tl-item.active-success .tl-dot:before {
    border-color: #22bb33;
    box-shadow: 0 0 0 6px rgba(0, 255, 0, 0.2)
}

.b-info {
    border-color: #17a2b8 !important;
}
.tl-item.active-info .tl-dot:before {
    border-color: #17a2b8;
    box-shadow: 0 0 0 6px rgba(23, 162, 184, 0.2);
}