.an, .alt, .te, .app, .endnotes_an, .endnotes_tx {
    display: none;
  }

  .endnotes_an, .endnotes_tx {

  }

    .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 {

  display: none;
  overflow: hidden;
  font-style: normal;
  /*background-color: rgb(240,248,255,0.5);*/ /* This sets the background to aliceblue with 50% opacity */


  }

  .legend.active {
      display: block;
      padding: 0 10px 0 10px;
      background-color: white;
      border: solid;
      border-color: lightgrey;
      border-width: 1px;
    }

    .legend-head {
      font-size: 14pt;
      font-weight:bold;


    }

    .tnBox {

  text-align: center;
  background-color: WhiteSmoke;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-bottom-style: solid;
  border-bottom-width: 1px;


    }

    .legend-line-exp {
      text-align: center;
      font-weight: bold;

      }

      .legend-line-app {
        text-align: center;
        padding-left: 50px;
        font-weight: bold;

      }

      .legend-line-exp .toggle-button {


        background-color: WhiteSmoke;
        border-style: solid;
        border-color: lightgrey;
        border-width: 3px;
        padding: 2px;
        cursor: pointer;
        font-size: 12pt;
        font-weight: bold;

      }

          .legend-line-exp .toggle-button:hover {

            color: blue;
          }


      .legend-line-app .toggle-button {


        background-color: WhiteSmoke;
        border-style: solid;
        border-width: 3px;
        border-color: lightgrey;
        padding: 2px;
        cursor: pointer;
        font-size: 12pt;
        font-weight: bold;
      }

      .legend-line-app .toggle-button:hover {

        color: blue;
      }

    .legend-sub {

      font-size: 12pt;
      padding: 2px 2px 2px 2px;
      font-weight: bold;
      border-style: solid;
      border-width: 3px;
      border-color: lightgrey;
      text-align: center;
      background: WhiteSmoke;


    }

    .legend-sub > a:hover {
      color: blue;
    }

    .token {
      font-size:20pt;
      color: blue;
    }

  .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: 6em;
margin: auto;

}

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

  a.top:hover, a.top:active, a.top:focus {


  }





.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 */





  .headnote, .commentary {

            cursor: pointer;
        }