:root{--line-border-fill: #00704E;--line-border-empty: #e0e0e0;}
.container{width:600px;margin:auto;}
.progress-container{position: relative;display: flex;align-items: center;justify-content: space-between;max-width: 100%;margin-bottom: 10px;}
.progress-container::before{content: '';position: absolute;background-color: var(--line-border-empty);top: 50%;left: 0;height: 4px;width: 100%;z-index: -1;transform: translateY(-50%);}
.progress{position: absolute;background-color: var(--line-border-fill);top: 50%;left: 0;height: 4px;width: 0%;z-index: -1;transform: translateY(-50%);transition: .4s ease;}
.circle{background-color: #fff;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: #999;width: 30px;height: 30px;
border: 3px solid var(--line-border-empty);transition: .4s ease;}
.circle.active{border-color: var(--line-border-fill);}