.verse-trop-syntax {font-style: italic; font-weight: bold;}
.verse-trop, .verse-syntax { cursor: pointer; }
.verse-trop {font-style: italic; }
tr:nth-child(2) .verse-trop { display: inline-block; height: 100%; padding: 5px 2px; margin: -5px 0; margin-right: 0.2em; }
.verse-syntax {font-weight: bold; }
.branch-end, .branch-start {padding: 5px 2px; margin: -5px 0; margin-right: 0.2em; cursor: pointer; display: inline-block;}

.syntax-part {color: green; margin-right: 0.2em;}
.trop-level-1 { color: #1f77b4; }
.trop-level-2 { color: #ff7f0e; }
.trop-level-3 { color: #2ca02c; }
.trop-level-4 { color: #d62728; }
.syntax-level-1 { color: #9467bd; }
.syntax-level-2 { color: #8c564b; }
.syntax-level-3 { color: #e377c2; }
.syntax-level-4 { color: #7f7f7f; }
.mismatch-pair { font-size: 1.2em; font-weight: bold; }
.highlight-pair { background-color: yellow; }

.highlight-trop-dim { background-color: gold; border: 1px solid black; opacity: 0.5; }
.highlight-trop-bright { background-color: gold; border: 1px solid black; opacity: 1; }
.highlight-syntax-dim { background-color: lightblue; border: 1px solid black; opacity: 0.5; }
.highlight-syntax-bright { background-color: lightblue; border: 1px solid black; opacity: 1; }
.highlight-overlap { background-color: rgba(221, 160, 221, 0.5); border: 1px solid black; }
.highlight-trop-dim.highlight-syntax-dim,
.highlight-trop-bright.highlight-syntax-dim,
.highlight-trop-dim.highlight-syntax-bright,
.highlight-trop-bright.highlight-syntax-bright { background-color: #dda0dd; border: 1px solid black; opacity: 0.7; }
.highlight-pair-trop { background-color: gold !important; color: black; }
.highlight-pair-syntax { background-color: lightblue !important; color: black; }
.temp-highlight-trop { background-color: rgba(255, 215, 0, 0.3); border: 1px dashed orange; }
.temp-highlight-syntax { background-color: rgba(173, 216, 230, 0.3); border: 1px dashed blue; }

/* CSS for highlighting mismatch ranges */
.highlight-trop {
  border: 3px solid orange;
  background-color: rgba(255, 165, 0, 0.3);
  box-shadow: 0 0 5px orange;
}

.highlight-syntax {  position: relative !important;
  z-index: 2 !important;

  border: 3px solid blue;
  background-color: rgba(0, 0, 255, 0.3);
  box-shadow: 0 0 5px blue;
  position: relative !important;
  z-index: 3 !important;
 }

table {border: 1px solid black; border-collapse: collapse; table-layout: auto; }
td {border: 1px solid black; padding: 5px; text-align: right; white-space: nowrap; 
	transition: background-color 0.3s ease, border 0.3s ease;
}
.mismatch_data {
  margin-bottom: 10px;
  font-weight: bold;
  text-align: right;
  width: 100%;
}

.verse-container {
  text-align: right;
  width: 100%;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: 0;
  display: block;
}

/* Styles for mismatch tables to align right */
.table-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 10px;
}

.segment-table {
  margin-left: auto;
  margin-right: 0;
  position: relative;
  border-collapse: collapse;
}

.cell-highlight {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  box-sizing: border-box;
}

.cell-highlight-trop {
  border: 2px solid orange !important;
}

.cell-highlight-syntax {
  border: 2px solid blue !important;
}

.cell-highlight.start {
  border-left: 0 !important;
}

.cell-highlight.middle {
  border-left: 0 !important;
  border-right: 0 !important;
}

.cell-highlight.end {
  border-right: 0 !important;
}

/* Styles for all verses display with selectable mismatches */
.mismatch-selector {
  margin: 10px 0;
  text-align: right;
}

.mismatch-info {
  margin: 10px 0;
  text-align: right;
}

.mismatch-data {
  font-weight: bold;
}

.active-trop {
  border: 2px solid orange !important;
  font-weight: bold;
  font-size: 1.2em;
}

.active-syntax {
  border: 2px solid blue !important;
  font-weight: bold;
  font-size: 1.2em;
}