button {
  gap: 10px;
  border-width: 0;
  border-radius: 3px;
  margin-right: 0.4em;
}

.selected {
  background-color: #4e4e4e;
}

.unselected {
  background-color: #eeedef;
}



.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.word.selected {
  border: 2px solid #007bff;
  background-color: #e6f0ff;
  border-radius: 4px;
}

.theme-labels {
  border-radius: 10px; 
  padding: 10px 15px 10px 15px;
  min-width: 100px;
  box-shadow: 0px 4px 4px rgba(0, 48, 83, 0.25);
  font-weight: 700; 
  font-size: 16px;
  background: #ffffff;
}

.sections {
  border-radius: 10px; 
  background: #ffffff; 
  box-shadow: 0px 4px 4px rgba(0, 48, 83, 0.25);
}

.play {
  margin-top: 5px;
  margin-left: 7px;
}

.pause {
  margin-top: 7px;
  margin-left: 6.5px;
}

.speech {
  display: flex;
  padding: 10px;
  border: 2px solid #BEBEBE;
  border-radius: 10px;
  margin: 10px;
  flex-wrap: wrap;
  opacity: 0.5;
}

.menu {
  margin-top: 45px;
  margin-left: 5px;
  width: 45px;
  padding: 3px;
}

#audios {
  cursor: default;
}

#audios > div[id^='audiofile'] {
  cursor: grab;
}

#participantsMatching {
  cursor: default !important;
}


.arrow {
  margin-top: 45px; 
  width: 40px;
  margin-left: 235px;
  padding: 0;
}

.settings {
  position: absolute;
  margin-left: 2px;
  bottom: 2%;
  height: 40px;
  width: 50px;
  padding: 0; 
  border-radius: 0; 
  background: #ffffff;
}

.filter-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100px;
  flex-wrap: wrap;
  margin-right: 20px;
  width: 100px;
}

#bar {
  width: 5px;
	height: 90px;
	fill: red;
  cursor: pointer;
}

.tabs {
  height: 60px;
	display: flex;
	align-items: center;
  width: auto;
}

.error {
  position: absolute;
  z-index: 7;
  font-family: "Nunito";
  background: #ffa3a3;
  border-radius: 10px;
  border: 3px solid #e14947;
  padding: 10px;
}

.tick{
  font-size: "20px";
}

.tick text{
  font-size: "20px";
}

.hidden {
  display: none;
}
.axis line, .axis path {
  shape-rendering: crispEdges;
  stroke: black;
  fill: none;
}

.toggle-container {
  display: flex;
  background-color: #eaeaea;
  border-radius: 25px;
  padding: 5px;
}

.toggle-button {
  border: none;
  padding: 10px 10px;
  border-radius: 5%;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  outline: none;
  transition: background-color 0.3s, color 0.3s;
}

.toggle-button.active {
  background-color: #fff;
  color: #007bff;
}

.search-container input {
  border: none;
  outline: none;
  width: 100%;
}

.resizer {
  margin-bottom: 50%;
  margin-left: 40%;
  width: 10px;
  cursor: ew-resize;
  background-color: #666;
  box-sizing: border-box;
}

.infos { 
    justify-content:left; /* Adjusts spacing between the elements */
    align-items: center;
    gap: 20px;
}

.speech_edit {
  display: flex;
  padding: 10px;
  margin: 10px;
  flex-wrap: wrap;
  opacity: 0.5;
}

.step {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #ccc;
  color: #333;
  padding: 15px;
  background-color: #fff;
  cursor: pointer;
}
.step.active {
  background-color: #5865F2;
  color: #fff;
}
.line {
  width: 40px;
  height: 2px;
  background-color: #ccc;
  margin: 0 10px;
}

.tool-ribbon-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Distribute items across the available space */
  gap: 10px; /* Adjust to control spacing between elements */
  width: 100%; /* Make sure it occupies the full width */
  padding: 10px; /* Add padding to manage spacing within the container */
}


.edit {
  position: relative;
  width: 100%;
}

.editMain {
  position: absolute;
  width: 68%;
  height: 100%;
  background-color: rgb(255, 255, 255); /* Your background color */
  border-radius: 10px; 
  box-shadow: 0px 4px 4px rgba(0, 48, 83, 0.25);
}

.editTheme {
  position: relative;
  z-index: 2; /* Ensure content appears above the background */
  padding: 20px;
  background-color: #d0d0d0; /* Darker grey background */
  min-height: 100%;
}

.tippy-box[data-theme~='blue-theme'] {
  background-color: #3366cc;
  color: #f4f4f4;
  border-radius: 5px; 
  padding: 10px;
  font-size: 14px;
}

.temporary-highlight {
  background-color: yellow; /* Change as needed */
  border-radius: 5px;
  padding: 0 3px;
  font-weight: bold;
}

/* Default browser selection color for temp highlighting */
.temp-highlight-mode ::selection {
  background: rgba(255, 255, 0, 0.5); /* Light yellow */
}

#filtermenu {
  position: fixed; /* Fix the menu to the right side of the screen */
  top: 0; /* Align it to the top of the screen */
  right: 0; /* Align it to the right side of the screen */
  width: 260px; /* The width of the panel */
  height: 100%; /* The panel should take up the full height */
  background: #ffffff; /* Background color */
  visibility: hidden; /* Initially hidden */
  z-index: 5; /* Ensure the menu appears above other elements */
  display: flex;
  flex-direction: column;
  min-width: 55px; /* Minimum width */
  border-left: 2px solid #ccc;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
}

#close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

#close-btn:hover {
  color: #3366cc; /* Change color on hover */
}

/* Transcript Mode Styling */
.script-block {
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #333;
  background-color: transparent;
  border-radius: 0;
  padding: 8px 0;
  margin-bottom: 0;
  box-shadow: none;
  border: none;
}

.speechBlock {
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 12px;
  box-shadow: none;
  border: none;
  transition: background-color 0.2s ease;
}

.speechBlock:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.speechBlock.selected {
  background-color: rgba(33, 150, 243, 0.1);
  border-left: 3px solid #2196f3;
  padding-left: 17px;
}

/* Message bubble styling for transcript */
.transcript-message {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.transcript-message .timestamp {
  font-weight: 600;
  color: #666;
  font-size: 12px;
  margin-bottom: 4px;
}

.transcript-message .content {
  color: #333;
  margin-top: 4px;
}

/* Tagged word styling */
.tagged-word {
  background-color: rgba(33, 150, 243, 0.2);
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 500;
}