@layer components{.timeline{background-color:var(--heo-background);border-radius:.5rem;width:100%;height:2.5rem;margin-bottom:20px;position:relative;overflow:hidden}.progress{background-color:var(--heo-main);border-radius:.5rem;width:0;height:100%;animation:2s linear -.1s forwards progressAnimation;position:absolute}.past-time{transform-origin:0;background-color:#3498db;width:2px;height:20px;animation:3s linear forwards pastTimeAnimation;position:absolute}.percentage-label{color:var(--heo-card-bg);white-space:nowrap;visibility:hidden;font-size:14px;font-weight:700;transition:left .5s linear;position:absolute;top:10px;left:0}.time-labels{justify-content:space-between;width:100%;display:flex}.time-labels>div{color:var(--heo-fontcolor);font-size:14px}@keyframes progressAnimation{0%{width:0}to{width:var(--progress-percentage,0)}}@keyframes pastTimeAnimation{0%{transform:scaleX(0)}to{transform:scaleX(var(--past-time-percentage,0))}}.timeline:hover{cursor:pointer;animation:3s linear infinite btn31-eff}@keyframes btn31-eff{0%{box-shadow:0 0 2px var(--heo-main)}50%{box-shadow:0 0 40px var(--heo-main)}to{box-shadow:0 0 2px var(--heo-main)}}}