.timeline{position:relative;max-width:500px;margin:30px 0;padding-left:30px}.timeline::before{content:'';position:absolute;left:10px;top:5px;bottom:5px;width:2px;background-color:#ddd}.timeline-item{position:relative;margin-bottom:15px}.timeline-dot{position:absolute;left:-30px;width:20px;height:20px;border-radius:50%;background-color:#fff;border:2px solid #ddd;display:flex;align-items:center;justify-content:center}.timeline-dot.active{border-color:#3498db;background-color:#3498db}.timeline-dot.active::before{content:'';width:8px;height:8px;border-radius:50%;background-color:#fff}.timeline-content{padding-left:10px}.timeline-time{font-weight:700;margin-right:5px;color:#333;font-size:.85em}.timeline-status{color:#777;font-size:.85em}.timeline-item.completed+.timeline-item.active::before,.timeline-item.completed+.timeline-item.completed::before{content:'';position:absolute;left:-29px;top:-16px;height:16px;width:2px;background-color:#3498db}