.gap-3 {
  gap: 0.25rem !important;
}

g.mud-charts-xaxis text {
  font-size: 8px;
}

g.mud-charts-yaxis text {
  font-size: 8px;
}

.sonagram-image-wrapper {
  position: relative;
  aspect-ratio: 1280 / 600;
  background: #000;
  border-radius: 4px;
  overflow: scroll;
}

.sonagram-image-axis-text {
  fill: rgba(128, 128, 255, 0.9);
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: normal;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.9));
}

.sonagram-image-axis-line-main {
  stroke: rgba(128, 128, 255, 0.6);
  stroke-width: 3;
}

.sonagram-image-detection-rect-line {
  stroke: rgba(255, 128, 255, 0.7);
  stroke-width: 3;
}

.sonagram-training-rect-enabled {
  fill: none;
  stroke: rgba(0, 200, 0, 0.6);
  stroke-width: 1.5;
}

/* The spectrogram is light with dark sounds: dark, opaque colours and long dashes. */
.sonagram-sound-event-echolocation {
  fill: none;
  stroke: rgba(0, 80, 220, 0.9);
  stroke-width: 2;
  stroke-dasharray: 6 3;
}

.sonagram-sound-event-concurrent {
  fill: none;
  stroke: rgba(180, 0, 180, 0.9);
  stroke-width: 2.5;
  stroke-dasharray: 10 4;
}

.sonagram-sound-event-other {
  fill: none;
  stroke: rgba(255, 110, 0, 0.9);
  stroke-width: 2;
}

.sonagram-sound-label {
  fill: none;
  stroke-width: 3;
}

.sonagram-sound-label-text {
  font-size: 12px;
  font-weight: bold;
  stroke: none;
}

rect.sonagram-sound-label-social { stroke: rgb(200, 0, 60); }
text.sonagram-sound-label-social { fill: rgb(200, 0, 60); }
rect.sonagram-sound-label-insect { stroke: rgb(0, 140, 40); }
text.sonagram-sound-label-insect { fill: rgb(0, 140, 40); }
rect.sonagram-sound-label-technical { stroke: rgb(90, 90, 90); }
text.sonagram-sound-label-technical { fill: rgb(90, 90, 90); }

.sonagram-sound-selected {
  fill: none;
  stroke: rgb(0, 0, 0);
  stroke-width: 2;
  stroke-dasharray: 2 2;
}

.sonagram-training-rect-disabled {
  fill: none;
  stroke: rgba(160, 160, 160, 0.5);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.sonagram-image-species-sci-name {
  fill: darkmagenta;
  font-size: 14px;
}

.sonagram-image-species-local-name {
  fill: darkgreen;
  font-size: 16px;
  font-weight: bold;
}

.sonagram-image-species-probability {
  fill: darkmagenta;
  font-size: 14px;
  font-weight: bold;
}

.sonagram-image-grid-line {
  stroke: rgba(128, 128, 255, 0.3); /* Minimal transparenter, da es mehr Linien sind */
  stroke-width: 2;
  stroke-dasharray: 20, 10;
}

.thumb-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.check-overlay {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  opacity: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transition: opacity 0.15s ease-in-out;
}

.check-overlay button {
  pointer-events: none;
}

.thumb-container:hover .check-overlay,
.thumb-container.selected .check-overlay {
  opacity: 1;
}

/* Marks top right on a spectrogram mini: T = training data, A = manual species determination. */
.mini-marks {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  display: flex;
  gap: 1px;
  pointer-events: none;
}

.mini-marks span {
  font-size: 10px;
  font-weight: bold;
  line-height: 12px;
  padding: 0 2px;
  border-radius: 2px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  width: 12px;
  text-align: center;
}

.mini-marks span.empty {
  visibility: hidden;
}

/* Position of the audio playback in the spectrogram. */
.sonagram-playhead {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  background-color: #e53935;
  pointer-events: none;
  z-index: 1;
}

.sonagram-playhead-grip {
  position: absolute;
  left: -9px;
  top: 0;
  width: 20px;
  height: 22px;
  background-color: #e53935;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}

.sonagram-playhead-time {
  position: absolute;
  left: 12px;
  top: 2px;
  padding: 0 4px;
  border-radius: 2px;
  background-color: #e53935;
  color: white;
  font-size: 12px;
  white-space: nowrap;
}

.sonagram-playhead-time-left {
  left: auto;
  right: 12px;
}