/**
 * hot cues
 */

.hot-cues {
  height: 50px;
  top: 20px;
  left: 50%;
  position: absolute;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hot-cues .slots .slot {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
  width: 50px;
  height: 50px;
  display: inline-flex;
  flex: 1;
  flex-flow: column;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  border: solid 2px rgba(0, 0, 255, 0.5);
  border-radius: 4px;
  color: rgba(0, 0, 255, 0.5);
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.hot-cues .slots .slot:not(.existing):hover {
  background-color: blue;
  color: white;
  cursor: pointer;
}

.hot-cues .slots .slot.existing:hover {
  background-color: blue;
  color: white;
}

.hot-cues .slots .slot:last-child {
  margin-right: 0;
}

.hot-cues .dirty-indicator {
  display: none;
}

.hot-cues .dirty .dirty-indicator {
  display: inline;
}

.hot-cues .slot.existing {
  border-color: blue;
  color: blue;
}

.hot-cues .slot.saved {
  animation: saved .25s linear 1;
}

.hot-cues .slot.active {
  background-color: blue;
  color: white;
}

.hot-cues #open-close {
  cursor: pointer;
}

.hot-cues:not(.hidden) #open-close {
  margin-top: 10px;
}

.hot-cues .slot.jumping:not(.active) {
  animation: jumping 0.5s linear infinite;
}

.hot-cues.hidden .slots {
  display: none;
}

@keyframes jumping {
  50% {
    opacity: 0.5;
  }
}

@keyframes saved {
  from {
    transform: scale(1.0);
  }

  50% {
    transform: scale(1.1);
  }

  to {
    transform: scale(1.0);
  }
}

/**
 * progress indicator
 */

.progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.progress-indicator .progress {
  background: white;
  height: 100%;
}