.horizontal_bar {
  height: 50px;
  width: 0;
  background: red;
  position: absolute;
  border-radius: 10px;
  border: 1px solid #012880;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF89D6), to(#C01F9E));
  background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);
  -webkit-box-shadow: 0 1rem 1.25rem 0 rgba(22, 75, 195, 0.5), 0 -0.25rem 1.5rem #6e0f9b inset, 0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, 0 0.25rem 0.5rem 0 #b446cf inset;
  box-shadow: 0 1rem 1.25rem 0 rgba(22, 75, 195, 0.5), 0 -0.25rem 1.5rem #6e0f9b inset, 0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, 0 0.25rem 0.5rem 0 #b446cf inset;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
}

.horizontal_bar::before {
  content: "";
  display: block;
  height: 0.1rem;
  position: absolute;
  top: 0.3rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  background: #fff;
  border-radius: 100%;
  opacity: 0.7;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(20%, #FFFFFF), color-stop(80%, #FFFFFF), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0) 100%);
}

.vertical_bar {
  position: absolute;
  top: 11.5rem;
  width: 100%;
  height: 1.5rem;
  border-radius: 10px;
  font-size: 2rem;
  font-weight: 600;
  border: 1px solid #012880;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FF89D6), to(#C01F9E));
  background-image: linear-gradient(-180deg, #FF89D6 0%, #C01F9E 100%);
  -webkit-box-shadow: 0 1rem 1.25rem 0 rgba(22, 75, 195, 0.5), 0 -0.25rem 1.5rem #6e0f9b inset, 0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, 0 0.25rem 0.5rem 0 #b446cf inset;
  box-shadow: 0 1rem 1.25rem 0 rgba(22, 75, 195, 0.5), 0 -0.25rem 1.5rem #6e0f9b inset, 0 0.75rem 0.5rem rgba(255, 255, 255, 0.4) inset, 0 0.25rem 0.5rem 0 #b446cf inset;
  -webkit-animation-duration: 2s;
}

/*@-webkit-keyframes mymove {
  from {
    height: 10px;
  }
  to {
    height: 200px;
  }
}*/
@-webkit-keyframes vertup {
  from {
    height: 1.5rem;
    top: 11.5rem;
  }
  to {
    height: 100%;
    top: 0px;
  }
}
@keyframes vertup {
  from {
    height: 1.5rem;
    top: 11.5rem;
  }
  to {
    height: 100%;
    top: 0px;
  }
}

@-webkit-keyframes vertdown {
  from {
    height: 100%;
    top: 0px;
  }
  to {
    height: 1.5rem;
    top: 11.5rem;
  }
}

@keyframes vertdown {
  from {
    height: 100%;
    top: 0px;
  }
  to {
    height: 1.5rem;
    top: 11.5rem;
  }
}

@-webkit-keyframes stop {}

@keyframes stop {}@-webkit-keyframes horright {
  from {
    width: 0px;
  }
  to {
    width: 300px;
  }
}@keyframes horright {
  from {
    width: 0px;
  }
  to {
    width: 300px;
  }
}

@-webkit-keyframes horleft {
  from {
    width: 300px;
  }
  to {
    width: 0px;
  }
}

@keyframes horleft {
  from {
    width: 300px;
  }
  to {
    width: 0px;
  }
}

.vertical_bar::before {
  content: "";
  display: block;
  height: 0.25rem;
  position: absolute;
  top: 0.5rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  background: #fff;
  border-radius: 100%;
  -webkit-animation: myopacity 3s alternate infinite;
  animation: myopacity 3s alternate infinite;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(20%, #FFFFFF), color-stop(80%, #FFFFFF), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(-270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%, #FFFFFF 80%, rgba(255, 255, 255, 0) 100%);
}

/*@media (prefers-reduced-motion: reduce) {
	.horizontal_bar {
	  animation: none;
	}
  }*/
/*# sourceMappingURL=progressBars.css.map */