body {
  font-family: Arial, sans-serif;
  line-height: 1.2;
  font-size:1.4em;
  margin: 0.5em;
  padding: 0;
  color: #333;
}

/* style for popup windows */
.popup {
  display: none;
  position: absolute;
  z-index: 10;
  padding: 10px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

a {opacity: 50%}

div.lesson {
  padding: 0.7em;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.lesson:not(.disable_gender_highlights) .Gender_Fem::after {
    content: " ♀";
    color: pink;
    background-color:white;
}
.lesson:not(.disable_gender_highlights) .Gender_Masc::after {
    content: " ♂";
    color: blue;
    background-color:white;
}
.lesson:not(.disable_gender_highlights) .Gender_Neut::after {
  content: " ⚧";
  color: black;
  background-color:white;

}
.lesson:not(.disable_gender_highlights) .Gender_Neut:hover,
.lesson:not(.disable_gender_highlights) .Gender_Masc:hover,
.lesson:not(.disable_gender_highlights) .Gender_Fem:hover {border: 1px dashed}

.lesson:not(.disable_gender_highlights) .Gender_Neut,
.lesson:not(.disable_gender_highlights) .Gender_Masc,
.lesson:not(.disable_gender_highlights) .Gender_Fem {border: 1px dashed transparent}

.lesson:not(.disable_animacy_highlights) .Animacy_Inan::after,
.lesson:not(.disable_animacy_highlights)  .Animacy_Hum::after,
.lesson:not(.disable_animacy_highlights)  .Animacy_Nhum::after {opacity:70%}

.lesson:not(.disable_animacy_highlights)  .Animacy_Inan::after {
    content: "⚙️♂";
    color: black;
    background-color:white;
    padding-left:3px;
}

.lesson:not(.disable_animacy_highlights)  .Animacy_Hum::after {
    content: "🙎‍♂️♂";
    color: black;
    background-color:white;
    padding-left:3px;
}
.lesson:not(.disable_animacy_highlights)  .Animacy_Nhum::after {
    content: "🐶♂";
    color: black;
    background-color:white;
    padding-left:3px;
}

.lesson:not(.disable_number_highlights) .Number_Ptan,
.lesson:not(.disable_number_highlights) .Number_Plur {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: black;
}
.lesson:not(.disable_number_highlights)  .Number_Ptan {
    text-decoration-style: dashed;
}
.lesson:not(.disable_case_highlights)  .Case_Nom {
  color: #006400a6; 
  background-color: #90ee905c;
}
.lesson:not(.disable_case_highlights)  .Case_Ins {
  color: #FF8C00; 
}
.lesson:not(.disable_case_highlights) .Case_Acc {
    color: yellow; 
    background-color:lightgray;
    
}
.lesson:not(.disable_case_highlights) .Case_Gen {
    color: #DC143C; 
}
.lesson:not(.disable_case_highlights) .Case_Loc {
    color: #9400D3; 
}
.lesson:not(.disable_case_highlights)  .Case_Dat {
    color: #ff149385; 
    background-color:#ffb6c17d;
}
.lesson:not(.disable_case_highlights)  .Case_Voc {
    color: white;
    background-color:black;
}

.lesson:not(.disable_person_highlights) .Person_1::after,
.lesson:not(.disable_person_highlights) .Person_2::after,
.lesson:not(.disable_person_highlights) .Person_3::after {
  font-size: smaller;
  font-weight: bold;
  vertical-align: super; /* This makes it appear as a superscript */
}

.lesson:not(.disable_person_highlights) .Person_1::after {
  content: "1"; 
}
.lesson:not(.disable_person_highlights) .Person_2::after {
  content: "2"; 
}
.lesson:not(.disable_person_highlights) .Person_3::after {
  content: "3"; 
}

button.click_to_disable_grammar:not(.disabled)::after {
  content: '\2713';
  color:green;
}

.hyperaudio-transcript div.trans-cont {
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease-out;
}
.hyperaudio-transcript p.trans {
  line-height: 1em;
  margin: 0;
  font-style:italic;
  color:#808080a6;
}

button {
  font-size: 0.8em;
}


button.tgl-trans.shown::after {
  content: '\2713';
  color: green;
  /* Additional styling to position the checkmark as needed */
  margin-left: 5px;
}