#modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

#closeModal {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  width: 50px;
  height: 50px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}

#modalBackdrop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000000cc;
}

#modalContent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}

/* Subdropdown (e.g. Effects menu) */
.sub-dropdown {
  border: 1px solid #00d5d5;
  border-radius: 4px;
  background: black;
}

.sub-dropdown#insertInstrumentMenu {
  left: 2px;
  border: 1px solid #d46700;
  min-width: 300px;
}

.sub-dropdown#insertEffectMenu {
  right: 2px;
  border: 1px solid #00d5d5;
  min-width: 220px;
}

.sub-dropdown .heading {
  padding: 12px 10px;
}

.sub-dropdown#insertInstrumentMenu .heading {
  color: #d46700;
}

.sub-dropdown#insertEffectMenu .heading {
  color: #00d5d5;
}

.sub-dropdown .item {
  padding: 16px;
  font-size: 20px;
  width: 100%;
}

.menu-item {
  background-color: #303030;
}

.menu-item:nth-child(even) {
  background-color: #222;
}

.menu-item[data-instrument-name] {
  background-color: #221100bd;
}

.menu-item[data-instrument-name]:nth-child(even) {
  background-color: #381a00bd;
}

.menu-item[data-effect-name] {
  background-color: #004f4f;
}

.menu-item[data-effect-name]:nth-child(even) {
  background-color: #003737;
}


/* AUDIO LIBRARY */
#audioLibrary {
  background-color: rgb(0, 52, 52);
  width: 97vw;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
  padding: 4px 6px;
  padding-bottom: 4rem;
  border-radius: 6px;
}

#audioLibrary .heading {
  font-size: 26px;
  padding: 12px 8px;
}

.library-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: teal;
  margin-bottom: 6px;
  border-radius: 4px;
}

.library-row:nth-child(odd) {
  background-color: rgb(0, 88, 88);
}

.file-name {
  font-size: 20px;
  padding: 10px 8px;
}

.library-row .left-side {
  width: 100%;
}

.library-row .right-side {
  padding: 4px 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.library-row .svg-btn {
  width: 42px;
  border-radius: 6px;
}

.row-btn {
  background-color: #002525;
  padding: 9px 14px;
  font-size: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.row-btn[data-action-type="useInSampler"] {
  color: #ff8f00;
}

.row-btn[data-action-type="playClip"] {
  color: #43bb50;
}

.row-btn[data-action-type="playClip"].playing svg {
  color: #ff3434;
  width: 22px;
}

.row-btn[data-action-type="deleteClip"] {
  color: #bf0000;
}

/* PROJECTS LIBRARY */
#projects {
  background-color: rgb(0, 52, 52);
  width: 97vw;
  max-width: 600px;
  max-height: 80vh;
  overflow: auto;
  padding: 4px 6px;
  padding-bottom: 4rem;
  border-radius: 6px;
}

#projects .heading {
  font-size: 26px;
  padding: 12px 8px;
}

.project-name {
  font-size: 20px;
  padding: 10px 8px;
}