.progress-container {
	display:flex;
	align-items:center ;
	justify-content: center;
  }
  
  .progress {
	padding: 3px;
	background: rgba(0, 0, 0, 0.25);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  }
  
  .progress-bar {
	height: 18px;
	background-color: #ee303c;
	border-radius: 4px;
	transition: 0.4s linear;
	transition-property: width, background-color;
  }
  
  .progress-striped .progress-bar {
	background-color: #FCBC51;
	width: 100%;
	background-image: linear-gradient(45deg, #fca311 25%, transparent 25%, transparent 50%, #fca311 50%, #fca311 75%, transparent 75%, transparent);
	animation: progressAnimationStrike 6s;
  }
  
  @keyframes progressAnimationStrike {
	from {
	  width: 0;
	}
	to {
	  width: 100%;
	}
  }
  .progress2 .progress-label{
	text-align:center;
	line-height: 10px;
    color: #8e8787;
	margin-bottom: 0px;
	/* visibility:visible; */
  }
  .progress2 .progress-label-done{
	text-align:center;
	line-height: 10px;
    color: white;
	margin-bottom: 0px;
  }
  .progress-moved .progress-bar2 .progress-label{
	color:white;
  }
  .progress2 {
	flex-grow: 1;
	padding: 1px;
	background: #fbfbfb;
	/* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); */
	/* box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.25), 0 3px 2px rgba(255, 255, 255, 0.08); */
	box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.25), inset 0px 0px 2px rgba(0, 0, 0, 0.25);
  }
  .progress-moved{
	padding:0px;
  }
  .progress-bar2 {
	/* height: 14px; */
	padding: 7px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
	transition: 0.4s linear;
	transition-property: width, background-color;
  }
  .progress-label-done{
	/* visibility:collapse; */
	display:none;
  }
  .progress-moved .progress-label-done {
	/* visibility:visible; */
	display:block;
  }
  .progress-moved .progress-label {
	/* visibility:collapse; */
	display:none;
  }
  .progress-moved .progress-bar2 {
	width: 100%;
	background-color: #6c757d;
	border-right: 1px solid white;
	animation: progressAnimation 1s;
  }
  .progress-moved .progress-final {
	width: 100%;
	/* background-color: #111111;
	animation: progressAnimationFinal 1s; */
	background: linear-gradient(#343030, grey, #343030);
   /*  animation: shine 4s ease-in infinite, end 1s ease-out 1 7s;
    transition: width 3s ease 3s; */
  }
  
  @keyframes progressAnimation {
	0% {
	  width: 50%;
	  background-color: #9aa4ae;
	}
	100% {
	  width: 100%;
	  background-color: #6c757d;
	}
  }
  @keyframes progressAnimationFinal {
	0% {
	  width: 50%;
	  background-color: #9aa4ae;
	}
	100% {
	  width: 100%;
	  background-color: #111111;
	}
  }
  @keyframes shine {
	0% { background-position: 0 0; }
	100% { background-position: 0 50px; }
  }
  
  @keyframes end {
	0%, 100% { box-shadow: 0 0 10px 0px #9aa4ae; }
	50% { box-shadow: 0 0 15px 5px #9aa4ae; }
  }
  .progress-bar3 {
	height: 18px;
	border-radius: 4px;
	background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
	transition: 0.4s linear;
	transition-property: width, background-color;
  }
  
  .progress-infinite .progress-bar3 {
	width: 100%;
	background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
	animation: colorAnimation 1s infinite;
  }
  
  @keyframes colorAnimation {
	0% {
	  background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55);
	}
	20% {
	  background-image: linear-gradient(to right, #5ac8fa, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964);
	}
	40% {
	  background-image: linear-gradient(to right, #007aff, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa);
	}
	60% {
	  background-image: linear-gradient(to right, #7DC8E8, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff);
	}
	100% {
	  background-image: linear-gradient(to right, #5856d6, #ff2d55, #4cd964, #5ac8fa, #007aff, #7DC8E8);
	}
  }