@charset "utf-8";

	/* -------Animation-------- */
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }

}

@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-ms-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}


/* --------------- */

progress {
  opacity: 0;
}

.progress-container {
  appearance: none;
    border: none;
    width: 100%;
    height: 20px;
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 50%) inset;
    color: royalblue;
    position: relative;
    margin: 1em 0 0;
    overflow: hidden;
}

.progress-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  background-color: #990067 !important;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  background-size: 40px 40px !important;
  /* animation: progress-animation 10s ease-in forwards; */
  animation: progress-bar-stripes 2s linear infinite, progress-animation 2s ease-in forwards;
}

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.progress-label::before {
  counter-reset: num var(--num);
  content: counter(num) ' ';
  position: relative;
  top:0;
  left: 0;
  font-weight: bold;
  animation: progress-text 1s ease-in forwards;
}

#value {
	display: inline-block;
}