html,
body {
  height: 100%;
  color: #b3ebef;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -100px;
  padding-bottom: 100px;
}
footer {
  height: 100px;
}
a {
  color: #00e5a8 !important;
  font-family: "Bai Jamjuree", sans-serif;
  text-decoration: none;
}
a:hover {
  color: #00e5a8 !important;
  text-decoration: underline;
}
a:visited {
  color: #82bcad !important;
}
code {
  font-family: "Roboto Mono", monospace;
  color: #04dac6 !important;
}
blockquote {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 20px;
  padding-left: 7px;
  border-left: 3px solid #82bcad;
} 
hr {
  background-color: #00FFFF;
  border-width: 1px;
  margin-left: 15%;
  margin-right: 15%;
  border-color: none;
}
body {
  font-family: "Mada", sans-serif;
}
.imgresize{
  height:75%;
  width:75%;
  margin: auto;
}
.imgsml{
  height:40%;
  width:40%;
  margin: auto;
}
figcaption {
  font-family: "Mada", sans-serif;
  text-transform: none !important;
  font-style: italic !important;
}
.content {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  justify-content:center;
}
.page {
  max-width: 1024px;
}
.article {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
}
.sidebar{
  margin-right: 20px;
  margin-left: 20px;
  flex-basis: 350px;
  flex-grow: 1;
  min-width: 350px;
  max-width: 750px;
}
.sticktoc {
  background-color: #005760 !important;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  position: -webkit-sticky;
  position: sticky;
  top: 20px; 
  overflow: auto;
  max-height: calc(100vh - 40px);
  height: auto;
}
.toc { 
  background-color: #005760 !important;
  border-radius: 20px !important;
  border: #00FFFF 2px solid;
  width: 100%;
  z-index: 2;
  font-size: 1.2em;
  overflow: hidden;
  height: auto;
/*  float: left;
  overflow: auto;
  display: inline-block;
  position: absolute; 
  left: -400px; 
  width: 350px; 
  display: inline-block; 
  float:right;
  height: auto;*/
}
.smoltoc{
  width: 100%;
  display:none;
}
.bg-dark,
.btn-dark {
  background-color: #004951 !important;
  border-color: #00FFFF !important;
}
.bg-dark2 {
  background-color: #005760 !important;
}

.map {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
.seqname {
  position: absolute;
  top: -0.7em;
  right: 0.5em; 
  z-index: 2; 
  padding-left: .75rem;
  padding-right: .75rem;
  background-color: #004951 !important;
  border-color: #00FFFF !important;
  border: 1px solid;
  border-radius: 4px;
  font-weight: bold;
}
.sequence {
  position: relative;
  width: 30%;
  min-width: 250px;
  background-color: #004951 !important;
  border-color: #00FFFF !important;
  border: 1px solid;
  border-radius: 4px;
  margin: .75rem;
  padding: .75rem;
}

.toc ul {
  list-style-type: "⧱";
  padding-left: 5px; 
}
.toc ul ul {
  list-style-type: decimal;
  padding-left: 16px; 
}
.toc ul ul ul {
  list-style-type: "-  ";
  padding-left: 16px; /* indent per child */ 
}
.toc ul ul ul ul {
  list-style-type: "└  "; 
/* Remove list bullets by setting to list-style: none; */
  padding: 0px;
  padding-left: 16px;
  margin: 0px;
}
.toc li li li li:before {
  list-style-type: "└  "; 
/*  content: "\f094";  Insert content that looks like bullets */
  padding-right: 30px; /* Space between bullet and content */
/*  color: red; */
  padding-left: 0px;
  margin:-20px;
}


.social-icon {
  font-size: 1.7em;
}
.social-icon:hover {
  font-size: 1.6em;
}
.menu-item {
  font-size: 1em;
}
.shadow {
  box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.75) !important;
}
.dropbtn {
  color: #82bcad !important;
  font-family: "Bai Jamjuree", sans-serif;
}
.dropbtn:hover {
  cursor: pointer;
  color: #00e5a8 !important;
}
.dropdown-content {
  position: absolute;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown {
  cursor: pointer;
  position: relative !important;
  display: inline-block !important;
}
.dropdown:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .dropdown-content {
  display: block;
}
.page-link {
  background-color: #004951 !important;
}
.page-item.active .page-link {
  border-color: #82bcad !important;
  background-color: #004951 !important;
  color: black !important;
}
.page-item.disabled .page-link {
  color: #4d4d4d !important;
}
.more {
  color: #82bcad !important;
}
.more:hover {
  cursor: pointer;
}
.metadata {
  transition: all 0.25s;
}
.metadata-value {
  font-size: 0.8em;
  color: #D2DDDD;
}
.pagination {
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 750px) {
  .home-flex-item {
    width: 100% !important;
  }
}
@media only screen and (max-width: 1500px) {
  .sticktoc {
  display:none;
  }
  .sidebar {
  display:none;
  }
  .smoltoc {
  display:block;  
  }
}

@media only screen and (max-width: 1080px)  {
  .article {
  max-width: calc(90vw);
  width: 768px;
  }

}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.6rem;
}
h3 {
  font-size: 1.3rem;
}
h4 {
  font-size: 1.1rem;
}
table {
  width: 100%;
}
td {
  border-top: 1px solid #0B5F66;
  padding: 2px;
}