codeocean/app/assets/stylesheets/exercise_collections.scss

$time-color: var(--bs-blue);
$min-color: var(--bs-yellow);
$avg-color: var(--bs-teal);
$max-color: var(--bs-red);

path.line.minimum-working-time {
  stroke: $min-color;
}

path.line.average-working-time {
  stroke: $avg-color;
}

path.line.maximum-working-time {
  stroke: $max-color;
}

rect.value-bar {
  fill: $time-color;
  cursor: pointer;
}

#legend {
  display: flex;
  margin-top: 20px;

  .legend-entry {
    flex-grow: 1;
    display: flex;

    .box {
      width: 20px;
      height: 20px;
      border: solid 1px var(--bs-emphasis-color);
    }

    .box.time {
      background-color: $time-color;
    }

    .box.min {
      background-color: $min-color;
    }

    .box.avg {
      background-color: $avg-color;
    }

    .box.max {
      background-color: $max-color;
    }

    .box-label {
      margin-left: 5px;
      margin-right: 15px;
    }
  }
}

.exercise-id-tooltip {
  position: absolute;
  display: none;
  min-width: 80px;
  height: auto;
  background: none repeat scroll 0 0 var(--bs-body-bg);
  border: 1px solid var(--bs-primary);
  padding: 14px;
  text-align: center;
}

#exercise-list {
  margin-bottom: 20px;
}

#add-exercise-list {
  min-height: 450px;
}

.exercise-actions {
  margin-bottom: 20px;

  button {
    margin-right: 10px;
  }
}