body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

  background-color: #f4f4f4;

  color: #333;

}



.container {

  display: flex;

  flex-direction: row;

  min-height: 100vh;

}



.controls {

  flex: 1;

  padding: 20px;

  border-right: 1px solid #ccc;

}



.recordings {

  flex: 1;

  padding: 20px;

  overflow-y: auto;

}



button {

  display: block;

  margin: 10px 0;

  padding: 10px 20px;

  font-size: 16px;

  cursor: pointer;

}



button:disabled {

  background-color: #ccc;

  cursor: not-allowed;

}



button:focus {

  outline: 2px solid #007BFF;

}



button:hover:not(:disabled) {

  background-color: #007BFF;

  color: white;

}



#statusMessage {

  margin-top: 20px;

  font-weight: bold;

}



#timer {

  margin-top: 10px;

  font-size: 18px;

}



ul {

  list-style: none;

  padding: 0;

}



li {

  margin-bottom: 15px;

}



.audio-controls {

  margin-top: 5px;

}



.recordings #emptyMessage {

  color: #888;

  font-style: italic;

}