.samplearea-wrapper {
  padding: 5px 0
}

.samplearea-wrapper a.samplearea-item span, .samplearea-wrapper div.legend-item {
  display:          inline-block;
  background-color: #FFFFFF;
  font-weight:      bold;
  font-size:        90%;
  opacity:          1;
  min-width:        110px;
  text-align:       center;
  border-radius:    20px;
  padding:          3px 6px;
  color:            #333333;
  white-space:      nowrap;
  border:           1px solid transparent;
  margin:           3px auto;
}

.samplearea-wrapper a.samplearea-item {
  display: block;
}

.samplearea-wrapper a.samplearea-item.active span, .samplearea-wrapper div.legend-item.active {
  background-color: #FF7700;
}

.samplearea-wrapper a.samplearea-item.done span, .samplearea-wrapper div.legend-item.done {
  background-color: #B8E994;
}

.samplearea-wrapper a.samplearea-item.fin span, .samplearea-wrapper div.legend-item.fin {
  background-color: #7ED6DF;
}