Cultivation/src/ui/components/common/ProgressBar.css

.ProgressBar,
.InnerProgress {
  border-radius: 4px;
}

.ProgressBarWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ProgressBar {
  height: 20px;
  width: 100%;
  background-color: rgba(204, 204, 204, 0.5);
  color: #c5c5c5;

  border: 1px solid #ccc;
}

.InnerProgress {
  height: 100%;
  background-color: #fff;
}

.MainProgressText,
.ProgressText {
  color: #c5c5c5;
  padding: 0px 10px;
  width: 30%;
}

.MainProgressText {
  width: 80%;
}

.MainProgressBarWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  color: #fff;
  text-shadow: 1px 1px 14px black;
}

.MainProgressBarWrapper .MainProgressText {
  font-size: 20px;
  font-weight: bold;
  color: #fff !important;
}

.MainProgressBarWrapper .ProgressBar {
  box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 20%);
}

.MainProgressBarWrapper:hover {
  cursor: pointer;
}

.ProgressBarWrapper div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.ProgressBarWrapper .InnerProgress {
  background-color: #ffc61e;
}

.ProgressBarWrapper .ProgressBar {
  border: none;
}

.DownloadControls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  margin-left: 10px;
}

.DownloadControls div {
  height: 20px;
}

.DownloadControls div img {
  height: 100%;
}

.downloadStop:hover {
  cursor: pointer;
}