.timeline{

    position:relative;

    margin:30px 0;

}

.timeline-item{

    position:relative;

    padding-left:70px;

    padding-bottom:35px;

}

.timeline-item:last-child{

    padding-bottom:0;

}

.timeline-line{

    position:absolute;

    left:24px;

    top:35px;

    width:4px;

    height:100%;

    background:#ced4da;

}

.timeline-item.done .timeline-line{

    background:#198754;

}

.timeline-item.active .timeline-line{

    background:linear-gradient(#0d6efd,#ced4da);

}

.timeline-dot{

    position:absolute;

    left:5px;

    top:0;

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

    z-index:2;

}

.timeline-item.done .timeline-dot{

    background:#198754;

}

.timeline-item.active .timeline-dot{

    background:#0d6efd;

    animation:pulse 1.4s infinite;

}

.timeline-item.pending .timeline-dot{

    background:#adb5bd;

}

.timeline-card{

    background:#fff;

    border-radius:14px;

    padding:18px;

    box-shadow:0 3px 12px rgba(0,0,0,.08);

}

.timeline-title{

    font-size:18px;

    font-weight:700;

}

.timeline-desc{

    color:#666;

    margin:10px 0;

}

.timeline-date{

    color:#888;

    font-size:13px;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(13,110,253,.5);

}

70%{

box-shadow:0 0 0 12px rgba(13,110,253,0);

}

100%{

box-shadow:0 0 0 0 rgba(13,110,253,0);

}

}

.table{

    table-layout: fixed;

    width:100%;

}

.table th{

    width:220px;

    white-space:nowrap;

    vertical-align:top;

}

.table td{

    white-space:normal !important;

    word-break:break-word;

    overflow-wrap:anywhere;

    vertical-align:top;

}