:root{--green:#136936;--grey:#d5d5d5}.dot{border-radius:50%;width:15px;height:15px;background:var(--grey);cursor:pointer}.completed-dot{background-color:#fff}.bar-wrapper{display:flex;width:fit-content;margin-left:15px;border-radius:10px}.bar{position:relative;width:110px;height:15px}.grey-bar{background:var(--grey);position:absolute}.green-bar{height:15px;width:0;background:var(--green);position:absolute;z-index:1}.completed-bar{-webkit-animation:bar-width-animation 1s;animation:bar-width-animation 1s;animation-fill-mode:forwards}.timeline-item{display:flex;align-items:center;background:var(--grey)}.timeline-item:first-child{border-radius:10px}.timeline-item:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}.timeline-item.completed-timeline-item{background-color:var(--grey);-webkit-animation:color-grade-animation 2s;animation:color-grade-animation 2s;animation-fill-mode:forwards}@keyframes bar-width-animation{0%{width:0}to{width:110px}}@keyframes color-grade-animation{0%{background:var(--grey)}50%{background:var(--grey)}75%{background:var(--grey)}to{background:var(--green)}}.label{position:relative;top:15px;left:-15px}