#ProgBarContainer {

  display: flex;

  width: 50px; /* Ajusta el tamaño del contenedor */

  height: 50px; /* Ajusta el tamaño del contenedor */

  flex-direction: column;

  align-items: center;

  justify-content: center;

  margin: 10px;

  position: relative;

}



#ProgBarContainer svg {

  width: 50px; /* Asegúrate de que el SVG ocupe el 100% del contenedor */

  height: 50px; /* Asegúrate de que el SVG ocupe el 100% del contenedor */

  transform: rotate(135deg); /* Ajuste para que el progreso inicie desde arriba */

  position: absolute;

  transform-origin: center center;

  top: 0;

  left: 0;

}



#ProgBarPercent {

  font-size: 12px;

  font-weight: bold;

  color: #fff;

}



#ProgBar {

  transition: stroke-dasharray 3s ease-in-out; /* Transición para animar el progreso */

}



@media screen and (max-width: 400px) {

  #ProgBarContainer {

      width: 36px;

      height: 36px;

  }



  #ProgBarContainer svg {

      width: 36px;

      height: 36px;

      transform: rotate(133deg);

  }

}