body {
  font-family: sans-serif;
}

svg {
  user-select: none;
  overflow:visible;
}

#zoomBox {
  position: fixed;
  z-index: 1;
  background: white;
  border: 1px solid darkorange;
  border-radius:20px;
}

.zoomBoxLine {
  fill:darkorange !important;
  stroke:darkorange !important;
}

.zoomBoxLabel, .zoomBoxXIndicatorLabel {
  fill:darkgrey;
  font-size: 8pt;
}

.zoomBoxXIndicatorLine {
  fill:darkgrey;
}

.selected {
  fill: rgb(35, 144, 194) !important;
}

.scoreAnnotation.selected {
  fill: rgba(35,144,194, .5)!important;
  stroke: rgb(35, 144, 194) !important;
}


.videoWrapper {
  max-width:945px;
  margin-left:20px;
}

.videoWrapper audio {
  height: 25px !important;
}

button.active {
  background-color:darkorange;
}

.active {
  fill:darkorange;
  stroke:darkorange;
}

.deleted {
  fill: #00aaff;
  stroke: #00aaff;
}

.inserted {
  fill: #ff6666;
  stroke: #ff6666;
}

.wasActive{
  fill:black;
  stroke:black;
  -webkit-animation-name: wasActive; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration:0.3s; /* Safari 4.0 - 8.0 */
  animation-name: wasActive;
  animation-duration:0.43;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes wasActive {
  from{fill:darkorange; stroke:darkorange}
  to{fill:black; stroke:black;}
}

@keyframes wasActive {
  from{fill:darkorange; stroke:darkorange}
  to{fill:#663300; stroke:#663300;}
}

.scorepane {
  min-height: 460px;
  display:block;
  position: relative;
  z-index: -1;
}

.scorepane.featureVis {
  min-height: 230px;
  max-height: 230px;
}

/* MIDI Recorder Styles */
.midi-status {
  margin: 15px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.midi-header {
  background-color: #f8f9fa;
  padding: 12px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease;
}

.midi-header:hover {
  background-color: #e9ecef;
}

.midi-header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.midi-header-text {
  font-weight: 600;
  color: #495057;
}

.midi-header-arrow {
  color: #6c757d;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.midi-content {
  padding: 15px;
  background-color: white;
}

.device-select-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
}

.device-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
  margin-bottom: 15px;
}

.device-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.selected-device-info {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.selected-device-info p {
  margin: 5px 0;
  font-size: 0.9em;
  color: #495057;
}

.loading-spinner {
  text-align: center;
  padding: 20px;
  color: #666;
  font-style: italic;
}

.isNotRecording {
  color: #666;
  font-style: italic;
}

.noDeviceSelected {
  color: #dc3545;
  font-weight: bold;
  background-color: #f8d7da;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
}

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

#instantBoundingBoxes {
  position: absolute;
}

.currentPerformanceLabel button{
  display: block;
}

.selectable-score-postButton {
  display:inline;
  margin-left: 10px;
}

.errorDetected {
  fill:black;
  stroke:black;
  -webkit-animation-name: errorDetected; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration:0.3s; /* Safari 4.0 - 8.0 */
  animation-name: errorDetected;
  animation-duration:0.3s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes errorDetected {
  from {fill:black; stroke:black;}
  to {fill:red; stroke:red;}
}

@keyframes errorDetected {
  from {fill:black; stroke:black;}
  to {fill:red; stroke:red;}
}

#pageControlsWrapper {
  border-radius: 10px;
  border: 1px solid rgb(255,102,0);
  max-width: 945px;
  margin-left: 20px;
  height: 1.3em;
  display: flex;
  justify-content: space-between;
  padding-left: .3em;
  padding-right: .3em;
  font-weight: bold;
  max-width: 1253px;
  color: rgba(255, 102, 0);
}

#pageControlsWrapper.featureVis {
  max-width: 1253px;
}

#pageControlsWrapper.following{
  background: rgb(255,102,0);
  background: linear-gradient(90deg, rgba(255,102,0,1) 0%, rgba(223,157,7,1) 50%, rgba(255,102,0,1) 100%);
  color:white;
}

#pageControlsWrapper .selectable-score-prevPageButton,
#pageControlsWrapper .selectable-score-nextPageButton {
  margin-top: .1em;
  cursor: pointer;
}

#pageControlsWrapper.following .selectable-score-prevPageButton,
#pageControlsWrapper.following .selectable-score-nextPageButton {
  cursor: default;
}

#selectWrapper {
  clear:both;
  margin-left:20px;
  padding-top:20px;
  padding-bottom:20px;
}

.loadingMsg {
  margin-left:20px;
}

#logoWrapper {
  margin-bottom: -15px;
  display: flex;
  justify-content: space-between;
  max-width: 950px;
  margin-left: 20px;
  z-index:-2;
  cursor:pointer;
}

#logoWrapper.featureVis {
  max-width: 1765px;
}

#trompaLogo {
  height:32px;
}

#mdwLogo {
  height:64px;
}

.hidden {
  visibility:hidden;
}

.removedFromDisplay {
  display: none;
}

#featureVisContainer, #featureVisContainerLoading {
  margin-top: 80px;
  margin-bottom:-80px;
  overflow:visible;
  height:auto;
  width:1280px;
}

#tempoCurve, #dynamicsVis svg {
  display:block;
  margin-block: .5em;
}

#dynamicsVis svg {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(220, 220, 220, .2) 5%, rgba(220, 220, 220, .2) 95%, rgba(255, 255, 255, .2) 100%);
}

#tempoCurve {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(220, 220, 220, .2) 5%, rgba(220, 220, 220, .2) 95%, rgba(255, 255, 255, .2) 100%);
}

#featureVisContainer ellipse:not(".zoomBoxPoint") {
  stroke:lightgrey;
  fill: lightgrey;
  cursor: pointer;
  display:block;
}

#featureVisContainer line {
  stroke:lightgrey;
  fill: lightgrey;
  cursor: pointer;
  display:block;
}

#featureVisContainer line.currentTl, #featureVisContainer ellipse.currentTl, #featureVisContainer polygon.currentTl{
  stroke:rgb(255, 102, 0);
  fill:rgb(255, 102, 0);
  stroke-width:2px;
}

#featureVisContainer line.active, #featureVisContainer ellipse.active{
  stroke:orange !important;
  fill:orange !important;
}

#featureVisContainer line.barLineAttr {
  stroke:lightgrey;
}

#featureVisContainer line.bpmMarker {
  stroke-dasharray:1;
  stroke:lightgrey;
}

#featureVisContainer line.estimated {
  stroke-dasharray: 1.5;
}

#featureVisContainer text.bpmLabel {
  font-size: 6px;
  fill: lightgrey;
}

.clickableBoundedInstant {
  cursor:pointer;
}

#dynamicsVis ellipse, #dynamicsVis .dynamicsConnector,
#tempoCurve ellipse, #tempoCurve .tempoConnector{
  stroke:black;
  fill:black;
  stroke-width:1px;
}

#midiEvents {
  max-height:10em;
  overflow:auto;
  display:flex;
  flex-direction: column-reverse;
}

#recordingIndicator {
  font-family: "Lucida Console", Monaco, monospace;
  margin-left:1em;
  padding:.2em;
  color: white;
}

#recordingIndicator .isRecording {
  background: green;
}

#recordingIndicator .isNotRecording {
  background: red;
}
line.dynamicsConnector.active{
  stroke:red;
  fill:red;
}

.visLabel {
  position:relative;
  top: -40px;
  font-size: xx-small;
}

#dynamicsLegend {
  position:relative;
  top: -60px;
  font-size: xx-small;
}

#dynamicsLegend span {
  width: 1em;
  height: 1em;
  margin-left:4em;
  margin-right:1em;
}

#dynamicsVis :not(#dynamicsVisSummary) polygon:not(.currentTl) {
  stroke:#00000099;
  fill:#00000099;
}

/*
#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer1 {
  stroke:#a6cee399;
  fill:#a6cee399;
  background:#a6cee399;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer2 {
  stroke:#1f78b499;
  fill:#1f78b499;
  background:#1f78b499;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer3 {
  stroke:#b2df8a99;
  fill:#b2df8a99;
  background:#b2df8a99;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer4 {
  stroke:#33a92c99;
  fill:#33a92c99;
  background:#33a92c99;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer5 {
  stroke:#fb9a9999;
  fill:#fb9a9999;
  background:#fb9a9999;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer6 {
  stroke:#e31a1c99;
  fill:#e31a1c99;
  background:#e31a1c99;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer7 {
  stroke:#fdbf6f99;
  fill:#fdbf6f99;
  background:#fdbf6f99;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer8 {
  stroke:#ff7f0099;
  fill:#ff7f0099;
  background:#ff7f0099;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer9 {
  stroke:#cab2d699;;
  fill:#cab2d699;;
  background:#cab2d699;;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer10 {
  stroke:#6a3d9a99;
  fill:#6a3d9a99;
  background:#6a3d9a99;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer11 {
  stroke:#ffff9999;
  fill:#ffff9999;
  background:#ffff9999;
}

#dynamicsVis :not(#dynamicsVisSummary) .currentTl.layer12 {
  stroke:#b1592899;
  fill:#b1592899;
  background:#b1592899;
}
*/

#featureVisControls {
  position:relative;
  top: -40px;
  font-size: xx-small;
}

.selectDynamicsAggregate {
  margin-left:1em;
  border-bottom: 2px solid lightgrey;
  display: inline-block;
  line-height: 0.85;
}

.scorepane .annotations {
  position:absolute;
}

.scorepane .annotations .highlightEllipse {
  fill:none;
  stroke:red;
  stroke-width: 2;
  stroke-opacity: .7;
}

.midi-header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.midi-status-indicator {
  font-size: 0.9em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.recording-status {
  color: #dc3545;
}

.recording-status .emoji {
  animation: pulse 1.5s infinite;
}

.elapsed-time {
  background-color: rgba(220, 53, 69, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  font-family: monospace;
  font-weight: 600;
  margin-left: 8px;
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: #dc3545;
  display: inline-block;
  min-width: 45px;
  text-align: center;
}

.ready-status {
  color: #28a745;
}



.countdown-status {
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 6px;
}

.countdown-time {
  background-color: rgba(108, 117, 125, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  font-family: monospace;
  font-weight: 600;
  margin-left: 8px;
  border: 1px solid rgba(108, 117, 125, 0.3);
  color: #6c757d;
}



.saved-recording-indicator {
  color: #ffc107;
  font-weight: 500;
  background-color: #fff3cd;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8em;
}