body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
  line-height: 1.8;
}

input, output, select, button, textarea {
  display: inline-block;
  padding: 8px;
  margin-bottom:8px;
  margin-right:4px;
  font-size: 12pt;
  border-radius: 3px;
  border: 1px solid #ddd;
}

video {
  border-radius: 3px;
}

button, input[type="submit"], input[type="file"] {
  border: 1px solid #ccc;
  background-color: #ddd;
}

button:hover, input[type="submit"]:hover, input[type="file"]:hover {
  border: 1px solid #999;
  background-color: #ccc;
  cursor: pointer;
}

input[type="number"] {
  width: 42px;
}

#search {
  width: 230px;
  margin-right: 4px;
}

#pbr-holder {
  padding-top: 20px;
}

.top-bar-container {
  /*display: flex;*/
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

dialog::backdrop {
  backdrop-filter: blur(1px);
}

.vertically-centre {
  padding-top: 40%;
}

.hyperaudio-transcript {
  font-size: 13pt;
}

/* for accessibility */
.hidden-label-holder {
  height:0;
  opacity: 0;
}

/* former inline styles */
.transcript-holder {
  display: flex; 
  justify-content: center; 
  background-color: #ffffff; 
  overflow-y:scroll;
  position: absolute;
  top: 70px;
  left: 400px;
  right: 0;
  bottom: 0;
  transition: left 0.5s ease;
}

.hyperaudio-transcript {
  position: absolute; 
  top: 10px; 
  bottom: 0px; 
  background-color: #ffffff; 
  padding-top: 48px; 
  width: 90%; 
  outline: none;
}

#file-dropdown-mobile, #file-dropdown-symbol-mobile, #transcribe-label-mobile {
  display: none;
}

@media screen and (max-width: 1120px) {
  #file-dropdown-symbol-mobile {
    display: block;
  }

  #file-dropdown-text, #file-dropdown-symbol {
    display: none;
  }

  .hyperaudio-transcript {
    position: relative;
    width: 90%;
  }

  .transcript-holder {
    display: block;
    justify-content: center; 
    background-color: #ffffff; 
    overflow-y:scroll;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 8px;
  }

  #transcribe-label {
    display: none;
  }

  #transcribe-label-mobile {
    display: block;
  }


}

@media screen and (max-width: 480px) {
  
  .hyperaudio-transcript {
    top: 40px; 
    bottom: 0px; 
    background-color: #ffffff; 
    padding-top: 48px; 
    width: 90%; 
    outline: none;
  }

  .transcript-holder {
    left: 0px;
  }

  .side-panel, #transcribe-label {
    display: none;
  }

  .main-panel {
    left: 0;
  }

  .holder {
    left: 0;
  }

  #search-box, #sidebar-toggle, #regenerate-icon{
    display: none;
  }

  /*.navbar-start {
    width: 36%;
  }*/

  .modal-box {
    width:300px;
  }

  .caption-row input.line1, .caption-row input.line2 {
    width: 24ch;
  }

  .caption-row input.start, .caption-row input.end {
    width: 12ch;
  }
  

}