#TargetWaveformLabel {
  font-size: 4vmin;
  color: green;
  margin-top: 2vh;
}

#SpeechWaveformLabel {
  font-size: 4vmin;
  color: red;
  margin-top: 2vh;
}

.Target_Speech_Wrapper, .User_Speech_Wrapper {
  position: relative;
  border-radius: 2vmin;
  width: 90%;
  min-height: 45vmin;
  margin: auto;
}

.Target_Speech_Wrapper{
  border: green ridge 1vmin;
}

.User_Speech_Wrapper{
  border: red ridge 1vmin;
}

.Waveform_Container {
  width: 79.5%;
  margin-left: 1vmin;
}

.Waveform_Container ::part(wrapper) {
  --box-size: 9%;
  background-image: 
    linear-gradient(transparent calc(var(--box-size) - 1px), black var(--box-size), transparent var(--box-size));
  background-size: 100% var(--box-size), 100% var(--box-size);
}


.ASR_Display {
  border-radius: 1vmin;
  margin-left: 1vmin;
  border: inset;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.ASR_Display div {
  width: 100%;
  border: inset;
  font-weight: bold;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.Word, .Syllable, .Phoneme, .Score {
  color: blue; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%; /* Set a fixed height */
  overflow: hidden; /* Prevent overflow from adjusting height */
}

.Word { 
  font-size: 4vmin; 
}

.Syllable { 
  font-size: 7vmin;
  font-style: italic;
}

.Phoneme { 
  font-size: 8vmin;
  font-style: italic;
}

.Score {
  font-size: 3vmin;
  font-weight: normal;
  font-style: normal;
  max-height: 3.5vmin;
}

.ASR_Display_Container {
  position: absolute;
  top: 1vmin;
  bottom: 1vmin;
  right: 1vmin;
  width: 18%; 
  background-color: ivory;
  border-left: inset;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch; 
}

/* Levels visual Display */
#WaveformContainer {
  height: 15vmin;
  width: 40%;
  padding: 2vmin;
  margin: auto;
  position: relative;
  border-radius: 3vmin;
}

#SoundLevel {
  border-radius: 2vmin;
  position: absolute;
  top: -2vmin;
  left: 2%;
  width: 92%;
  font-size: 2.5vmin;
  font-weight: bold;
  padding: 2%;
  text-align: left;
  border: gray solid 1px;
}

#SoundLevelBTN {
  position: absolute;
  top: -1vmin;
  right: 2%;
  font-size: 5vmin;
  cursor: pointer;
}

#SoundLevelBTN:hover {
  color: red;
}

#WaveformContainer, #SoundLevel {
  background: linear-gradient(135deg, #e6e6e6 0%, #d4d4d4 30%, #aaaaaa 50%, #d4d4d4 70%, #e6e6e6 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
}

#Waveform {
  margin-top: 2.5vmin;
  background: white;
  border-radius: 2vmin;
  padding-left: 2vmin;
  padding-right: 2vmin;
}

#Waveform ::part(wrapper) {
  --box-size: 22%;
  background-image: 
    linear-gradient(transparent calc(var(--box-size) - 1px), gray var(--box-size), transparent var(--box-size));
  background-size: 100% var(--box-size), 100% var(--box-size);
}