/* CSS for progress bar container */
  .sp-progress-bar {
      width: 100%;
      height: 20px; /* Adjust the height as needed */
      background-color: #f0f0f0; /* Default background color */
      border-radius: 15px; /* Rounded corners for the progress bar */
      overflow: hidden; /* Hide any overflowing content */
      margin-bottom: 20px; /* Add some spacing between progress bars */
      position: relative; /* For positioning the progress text */
  }
  /* CSS for the progress bar itself */
  .sp-progress {
      height: 100%;
      background-color: #4CAF50; /* Default primary color */
      width: 0; /* The width will be adjusted with JavaScript or inline style */
      border-radius: 15px; /* Rounded corners for the progress bar */
      transition: width 0.3s ease-in-out; /* Smooth animation for progress change */
  }
  /* CSS for the progress text */
  .sp-progress-text {
      position: absolute;
      height: 20px;
      display: flex;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      color: #000000;
      font-size: 16px;
      font-weight: bold;
      align-content: center;
      align-items: center;
	  padding-top: 5px;
	  padding-bottom: 5px;
  }