p {
  line-height: 2;
}

  .endnotes_an, .endnotes_tx, .endnotes {
    max-width: 60%;
    margin: 0 auto;

  }

  /*  .endnote .pb  {
      display: none;
    }*/



/* tocBox style moved to tnBox */
  .tocBox {

  }

/* div.toc styles the Hugo-generated ToC; the XML-based toc is in a ul element*/
  div.toc {
    display: none;
    overflow: hidden;
    overflow-y: scroll;
    height: 30em;

background-color: white; /*rgb(240,248,255,0.5);*/ /* This sets the background to aliceblue with 50% opacity */
  }



  .toc.active {
      display: block;
      min-width: 11em;
      border-style: solid;
      border-color: lightgrey;
      border-width: 1px;
      padding: 5px;
    }

    .toc.active ul {
      text-align: left;
      padding: 5px;

    }

    .toc.active ul li {
      display: block;
    }

    .noteBox {
      width: 7em;

    }




    .legend {
      position:sticky;
      background-color:white;
      float:left;
      display:block;
      opacity: 1;
      background-color: WhiteSmoke;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


    }

    @media (min-width: 1051px) {
  .legend {
    position: sticky;
    top: 5px;
    padding: 15px;
    margin-left: 2em;
    margin-top: 2em;
    max-width: 10em;
    font-size: 12pt;
  }
}

  @media (max-width: 1050px) {
    .legend {
      text-align: center;
      background-color: WhiteSmoke;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      position: relative;
      font-size: 10pt;
      top: 0px;
      opacity: 1;
      width: 100%;
      float: none;

    }
  }



    .pb_mtp {
  display: inline;
  display: none;
}

span.orig > p > span.pb {
  display: inline;
}


.lb {
  display:none;
}

span.orig {
  display: none;
}

.collapsible {
  max-width: 40%;
  margin: 0 auto;
}

  .collapsibleNote {
   color: black;
   background-color: WhiteSmoke; /*rgb(240,248,255,0.5);*/


    text-align: left;
    border: solid;
    border-width: 1px;
    border-color: lightgrey;


    width: 3.5em;
    text-align: center;
    margin-top: 7px;
  }


  .collapsibleToc {
    color: black;
    background-color: white; /*rgb(240,248,255,0.5);*/


     text-align: left;
     border: solid;
     border-width: 1px;
     border-color: lightgrey;

     width: 3.5em;
     text-align: center;
     margin-top: 5px;
  }

  .collapsibleNote::after {
  content: "Notes"; /* right arrow */
  font-size: 14pt;
}

.collapsibleToc::after {
content: "Contents"; /* right arrow */
font-size: 14pt;
}

  .collapsibleNote:hover {
    color: blue;
    cursor: pointer;
  }

.collapsibleToc:hover {
  color: blue;
  cursor: pointer;
}

/*named this css active1 to differentiate it from active legend, which repeated the arrow after the legend box*/
.active1::after {
  content: "Hide"; /* left arrow */
  font-size: 16pt;

}

.active1 {
  border-bottom: none;
  width: 129px;
}

.content {
  display: none;
  overflow: hidden;
}




.topButton {
display: none;
color: blue;
background-color: WhiteSmoke;
text-align:center;
position:sticky;
bottom: 50px;
border-style: solid;
border-width: 2px;
border-color: blue;
width: 6.3em;
margin: auto;

}

a.top {
background-color: WhiteSmoke;
color: blue;
width: 6em;
display:block;
padding:0;
}

a.top:hover {
  background-color: white;
}





.endnote.highlighted-endnote {
  background-color: yellow;
}

.endnote.highlighted-endnote * {  /* Target all elements within */
  background-color: inherit;
}

  /* using classes for a elements to isolate the hover, active, focus effect didn't work, so the use of background-color white below is to silence the effect on a elements where I don't want it to work.*/
  a.popup:hover, a.popup:active, a.popup:focus {
   background-color:white;
  }

  li > a:hover, li > a:active, li > a:focus {
   background-color:white;
  }



  span.popup {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-indent:0em;
}

a.alt:hover .popup,
a.te:hover .popup,
a.an:hover .popup,
a.app:hover .popup,
a.e:hover .popup,
a.em:hover .popup,
a.hc:hover .popup {
  display: block;
  top: 100%; /* position below the link */
  left: 0;
}

/* Adjust the positioning of the popup */
a.alt,
a.te,
a.an,
a.app,
a.e,
a.em,
a.hc {
  position: relative;
}

.highlighted {
  background-color: yellow;
}

.flex-container {
  display: flex;

}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }

  a.alt:hover .popup,
  a.te:hover .popup,
  a.an:hover .popup,
  a.app:hover .popup,
  a.e:hover .popup,
  a.em:hover .popup,
  a.hc:hover .popup {
    display: none;
  }




}

/* noteBox style moved to tnBox */


.tokens {
  color:blue;

}

.note-ref {
  vertical-align: super;

}


  .headnote, .commentary {

            cursor: pointer;
        }

        .tei-rs {
            background-color: #e8f4fd;
            border-bottom: 2px solid #2196F3;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 3px;
        }

        .tei-rs:hover {
            background-color: #bbdefb;
        }

        /* Remove hover effects when popups are disabled */
.tei-rs[data-ref].popups-disabled:hover {
    background-color: transparent !important;
}

/* Optional: Add a subtle visual indicator that the feature is disabled */
.tei-rs[data-ref].popups-disabled {
    opacity: 0.7;
}

        .annotation-popup {
            position: absolute;
            background: white;
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 12px;
            max-width: 500px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            font-size: 14px;
            line-height: 1.4;
            display: none;
        }

        .popup-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 4px;
        }

        .sample-text {
            margin: 20px 0;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 4px solid #2196F3;
        }

        a.an-ref {
          font-style: italic;
          font-weight: bold;
          background-color: #bbdefb;
        }

        span.popup {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        text-indent:0em;
        color: black;
      }

      a.alt:hover .popup,
      a.te:hover .popup,
      a.an:hover .popup,
      a.app:hover .popup,
      a.e:hover .popup,
      a.em:hover .popup,
      a.hc:hover .popup
       {
        display: block;
        top: 100%; /* position below the link */
        left: 0;
        font-variant: none;
        font-style: none;
        font-size: 13pt;
        color: black;
        font-weight: normal;

      }

span.ref a.crossref:hover .popup {
  display: block;
  top: 100%;
  left: 0;
  font-variant: none;
  font-style: none;
  font-size: 13pt;
  color: black;
  font-weight: normal;
}

/* Adjust the positioning of the popup */
a.alt,
a.te,
a.an,
a.app,
a.e,
a.em,
a.hc,
a.edr,
a.crossref {
  position: relative;
}

.ref {
  color:blue;
  cursor: pointer;
  position: relative;
}

.refPopup {
  color: black;
}