@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

#piano-roll {
  display: flex;
  user-select: none;
}

.note {
  width: 100px;
  height: 25px;
  background-color: #2ff083;
  text-align: center;
}

.note.piano {
  background-color: #0de7bf;
}

.note.drumkit {
  background-color: #0c71f5;
}

.note.bass {
  background-color: #c7f50e;
}

.note.pad {
  background-color: #ee6307;
}

.note:hover {
  background-color: rgba(139, 33, 232, 0.383);
}

.timeline-row-grid {
  display: flex;
}

.timeline-row {
  display: flex;
  border-top: #fff solid 1px;
}

.timeline-cell {
  width: 10px;
  height: 25px;
  background-color: rgb(83, 83, 83);
  border-right: rgb(107, 107, 107) solid 1px;
}

.timeline-cell.play-head {
    background-color: rgb(101, 16, 175);
}

.timeline-cell.active {
  background-color: rgb(192, 14, 241);
}

.timeline-cell:nth-child(16n) {
  border-right: #a7a7a7 solid 1px;
}

.timeline-cell:hover {
  background-color: rgb(139, 33, 232);
}

.timeline-cell.active:hover {
  background-color: rgb(189, 80, 26);
}

button {
  padding: 8px 16px;
  margin: 5px;
  background-color: #535353;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #666;
}

button:active {
  background-color: #ff0606;
}

#loop-btn.active {
  background-color: #2ff083;
  color: black;
  animation: pulse 0.8s ease-in-out infinite;
}

#play-btn.active {
  background-color: #0691e2; /* Change this to whatever color you want */
  color: rgb(194, 229, 17);
}



input[type=range] {
  user-select: none;
}