.preset-progress {
    width: 100%;
    margin-top:-13px
  }

#progress-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px; /* Height of the progress bar */
  background: linear-gradient(to right, #007bff 0%, #007bff 0%, #ddd 0%, #ddd 100%);
  border-radius: 0; /* Rounded corners for the track */
  outline: none;
  opacity: 0.7;
  transition: opacity 0.15s ease-in-out;
}

#progress-bar:hover {
  opacity: 1;
}

#progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 5px; /* Width of the thumb */
  height: 5px; /* Height of the thumb */
  background: red; /* Color of the thumb */
  border-radius: 50%; /* Rounded thumb */
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease-in-out;
}

#progress-bar::-moz-range-thumb {
  width: 5px;
  height: 5px;
  background: red;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease-in-out;
}

#progress-bar::-ms-thumb {
  width: 5px;
  height: 5px;
  background: red;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease-in-out;
}

#progress-bar::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent; /* We use background property directly */
  border-radius: 5px;
}

#progress-bar::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent; /* We use background property directly */
  border-radius: 5px;
}

#progress-bar::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent; /* We use background property directly */
  border-color: transparent;
  color: transparent;
}

/* For IE */
#progress-bar::-ms-fill-lower {
  background: #007bff;
  border-radius: 5px;
}

#progress-bar::-ms-fill-upper {
  background: #ddd;
  border-radius: 5px;
}