.indicator-line{
    position: relative;
    background: var(--color-black-10);
    overflow: hidden;
    width: 100%;
    height: 4px;
    background: var(--color-black-10);
    border-radius: var(--border-radius);
}
.indicator-line::before{
    content: "";
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    transition: var(--transition);
}
.indicator-line._1:before {
    width: 1%;
    background: var(--color-yellow-100);
}
.indicator-line._2:before {
    width: 2%;
    background: var(--color-yellow-100);
}
.indicator-line._3:before {
    width: 3%;
    background: var(--color-yellow-100);
}
.indicator-line._4:before {
    width: 4%;
    background: var(--color-yellow-100);
}
.indicator-line._5:before {
    width: 5%;
    background: var(--color-yellow-100);
}
.indicator-line._6:before {
    width: 6%;
    background: var(--color-yellow-100);
}
.indicator-line._7:before {
    width: 7%;
    background: var(--color-yellow-100);
}
.indicator-line._8:before {
    width: 8%;
    background: var(--color-yellow-100);
}
.indicator-line._9:before {
    width: 9%;
    background: var(--color-yellow-100);
}
.indicator-line._10:before {
    width: 10%;
    background: var(--color-yellow-100);
}
.indicator-line._11:before {
    width: 11%;
    background: var(--color-yellow-100);
}
.indicator-line._12:before {
    width: 12%;
    background: var(--color-yellow-100);
}
.indicator-line._13:before {
    width: 13%;
    background: var(--color-yellow-100);
}
.indicator-line._14:before {
    width: 14%;
    background: var(--color-yellow-100);
}
.indicator-line._15:before {
    width: 15%;
    background: var(--color-yellow-100);
}
.indicator-line._16:before {
    width: 16%;
    background: var(--color-yellow-100);
}
.indicator-line._17:before {
    width: 17%;
    background: var(--color-yellow-100);
}
.indicator-line._18:before {
    width: 18%;
    background: var(--color-yellow-100);
}
.indicator-line._19:before {
    width: 19%;
    background: var(--color-yellow-100);
}
.indicator-line._20:before {
    width: 20%;
    background: var(--color-yellow-100);
}
.indicator-line._21:before {
    width: 21%;
    background: var(--color-yellow-100);
}
.indicator-line._22:before {
    width: 22%;
    background: var(--color-yellow-100);
}
.indicator-line._23:before {
    width: 23%;
    background: var(--color-yellow-100);
}
.indicator-line._24:before {
    width: 24%;
    background: var(--color-yellow-100);
}
.indicator-line._25:before {
    width: 25%;
    background: var(--color-yellow-100);
}
.indicator-line._26:before {
    width: 26%;
    background: var(--color-yellow-100);
}
.indicator-line._27:before {
    width: 27%;
    background: var(--color-yellow-100);
}
.indicator-line._28:before {
    width: 28%;
    background: var(--color-yellow-100);
}
.indicator-line._29:before {
    width: 29%;
    background: var(--color-yellow-100);
}
.indicator-line._30:before {
    width: 30%;
    background: var(--color-yellow-100);
}
.indicator-line._31:before {
    width: 31%;
}
.indicator-line._32:before {
    width: 32%;
}
.indicator-line._33:before {
    width: 33%;
}
.indicator-line._34:before {
    width: 34%;
}
.indicator-line._35:before {
    width: 35%;
}
.indicator-line._36:before {
    width: 36%;
}
.indicator-line._37:before {
    width: 37%;
}
.indicator-line._38:before {
    width: 38%;
}
.indicator-line._39:before {
    width: 39%;
}
.indicator-line._40:before {
    width: 40%;
}
.indicator-line._41:before {
    width: 41%;
}
.indicator-line._42:before {
    width: 42%;
}
.indicator-line._43:before {
    width: 43%;
}
.indicator-line._44:before {
    width: 44%;
}
.indicator-line._45:before {
    width: 45%;
}
.indicator-line._46:before {
    width: 46%;
}
.indicator-line._47:before {
    width: 47%;
}
.indicator-line._48:before {
    width: 48%;
}
.indicator-line._49:before {
    width: 49%;
}
.indicator-line._50:before {
    width: 50%;
}
.indicator-line._51:before {
    width: 51%;
}
.indicator-line._52:before {
    width: 52%;
}
.indicator-line._53:before {
    width: 53%;
}
.indicator-line._54:before {
    width: 54%;
}
.indicator-line._55:before {
    width: 55%;
}
.indicator-line._56:before {
    width: 56%;
}
.indicator-line._57:before {
    width: 57%;
}
.indicator-line._58:before {
    width: 58%;
}
.indicator-line._59:before {
    width: 59%;
}
.indicator-line._60:before {
    width: 60%;
}
.indicator-line._61:before {
    width: 61%;
}
.indicator-line._62:before {
    width: 62%;
}
.indicator-line._63:before {
    width: 63%;
}
.indicator-line._64:before {
    width: 64%;
}
.indicator-line._65:before {
    width: 65%;
}
.indicator-line._66:before {
    width: 66%;
}
.indicator-line._67:before {
    width: 67%;
}
.indicator-line._68:before {
    width: 68%;
}
.indicator-line._69:before {
    width: 69%;
}
.indicator-line._70:before {
    width: 70%;
    background: var(--color-green-100);
}
.indicator-line._71:before {
    width: 71%;
    background: var(--color-green-100);
}
.indicator-line._72:before {
    width: 72%;
    background: var(--color-green-100);
}
.indicator-line._73:before {
    width: 73%;
    background: var(--color-green-100);
}
.indicator-line._74:before {
    width: 74%;
    background: var(--color-green-100);
}
.indicator-line._75:before {
    width: 75%;
    background: var(--color-green-100);
}
.indicator-line._76:before {
    width: 76%;
    background: var(--color-green-100);
}
.indicator-line._77:before {
    width: 77%;
    background: var(--color-green-100);
}
.indicator-line._78:before {
    width: 78%;
    background: var(--color-green-100);
}
.indicator-line._79:before {
    width: 79%;
    background: var(--color-green-100);
}
.indicator-line._80:before {
    width: 80%;
    background: var(--color-green-100);
}
.indicator-line._81:before {
    width: 81%;
    background: var(--color-green-100);
}
.indicator-line._82:before {
    width: 82%;
    background: var(--color-green-100);
}
.indicator-line._83:before {
    width: 83%;
    background: var(--color-green-100);
}
.indicator-line._84:before {
    width: 84%;
    background: var(--color-green-100);
}
.indicator-line._85:before {
    width: 85%;
    background: var(--color-green-100);
}
.indicator-line._86:before {
    width: 86%;
    background: var(--color-green-100);
}
.indicator-line._87:before {
    width: 87%;
    background: var(--color-green-100);
}
.indicator-line._88:before {
    width: 88%;
    background: var(--color-green-100);
}
.indicator-line._89:before {
    width: 89%;
    background: var(--color-green-100);
}
.indicator-line._90:before {
    width: 90%;
    background: var(--color-green-100);
}
.indicator-line._91:before {
    width: 91%;
    background: var(--color-green-100);
}
.indicator-line._92:before {
    width: 92%;
    background: var(--color-green-100);
}
.indicator-line._93:before {
    width: 93%;
    background: var(--color-green-100);
}
.indicator-line._94:before {
    width: 94%;
    background: var(--color-green-100);
}
.indicator-line._95:before {
    width: 95%;
    background: var(--color-green-100);
}
.indicator-line._96:before {
    width: 96%;
    background: var(--color-green-100);
}
.indicator-line._97:before {
    width: 97%;
    background: var(--color-green-100);
}
.indicator-line._98:before {
    width: 98%;
    background: var(--color-green-100);
}
.indicator-line._99:before {
    width: 99%;
    background: var(--color-green-100);
}
.indicator-line._100:before {
    width: 100%;
    background: var(--color-green-100);
}