control-bar.component.css

.control-bar {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: row;
  padding-right: 10px;
  overflow: hidden;
}

.control-button {
  min-width: 20px;
  padding: 0 5px;
}

.enabled-control:hover{
  color: #006064;
}

.time {
  cursor: pointer;
  white-space: nowrap;
  padding: 17px 5px 0 5px;
}

.runs {
  white-space: nowrap;
  padding: 17px 5px 0 5px;
}

.time:hover {
  color: #006064;
}

.active-control{
 color: #006064;
}

.duration{
  flex-grow: 5;
  min-width: 20%;
  margin-top: 3px;
}

.volume{
  flex-grow: 2;
  min-width: 10%;
  margin-top: 3px;
}

.status-bar{
  padding: 10px;
  color: #f44336;
  font-size: 75%;
}

.hint-border{
  border: 2px #f44336 solid;
}

::ng-deep app-control-bar .mat-accent .mat-slider-thumb {
  background-color: #006064;
}
::ng-deep app-control-bar .mat-accent .mat-slider-thumb-label {
  background-color: #006064;
}
::ng-deep app-control-bar .mat-accent .mat-slider-track-fill {
  background-color: #006064;
}