#audio-demo {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f0f0f0;
  overflow: hidden;
}

#header {
  background-color: lightblue;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: start;
  gap: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  /* border: 1px solid lightcoral; */
}

.headerItem {
  font-weight: bold;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: darkgray;
  padding: 8px;
  min-height: 100px;
}

.presentationPanel {
  border-width: 1px;
  border-style: solid;
  border-color: darkgray;
  border-radius: 5px;
  width: fit-content;
}

#warpOptions {
  font-style: normal;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#dropArea {
  width: 300px;
  border-style: dashed;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

#dropArea.dragover {
  background-color: #8ec499;
  border-color: #478529;
  border-width: 2px;
}

.disabled {
  color: gray;
}

#taskList {
  font-size: small;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  margin: 2px;
}

.taskItem {
  /* background-color: rgb(181, 213, 224); */
  width: 98%;
  border-width: 2px;
  border-radius: 4px;
  border-style: solid;
  padding: 1px;
  background-position: 99%;
  background-repeat: no-repeat;
  background-size: 12px;
}
/* 
#taskList :nth-child(odd) {
  background-color: #bcc8d3;
} */

.task-planned {
  border-color: #0857a1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Z"></path></svg>');
}

.task-in-progress {
  border-color: #c28b14;
  border-style: dotted;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"></path></svg>');
}

.task-completed {
  border-color: #09662d;
  border-style: solid;
  /* OK */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm1.5 0a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm10.28-1.72-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l1.47 1.47 3.97-3.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path></svg>');
}

.task-failed {
  border-color: #980a0a;
  border-style: solid;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM3.965 13.096a6.5 6.5 0 0 0 9.131-9.131ZM1.5 8a6.474 6.474 0 0 0 1.404 4.035l9.131-9.131A6.499 6.499 0 0 0 1.5 8Z"></path></svg>');
}

.info {
  /* background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 7.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-3 3.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v4.25h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75V12h-.75a.75.75 0 0 1-.75-.75Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></svg>'); */
  align-self: flex-start;
}

/* score-audio-containers should be used to group audio elements */
/* stacked vertically and styled to be visually appealing */

#score-audio-containers { 
  width: 100%;
  height: 90%;
  overflow: scroll;
}

.score-audio-container {
  margin-bottom: 2em;
  background-color: #fffffa;
  border-radius:9px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: fit-content;
  overflow:hidden;
}