/* .desc { */
/*     border-top: 2px solid maroon; */
/*     background-color: bisque; */
/*     padding-left: 2rem; */
/* } */

.header-desc-container {
  display: flex;
  justify-content: space-between;
}

.dbg-note {
  display: none;
}

.header-desc {
  flex-basis: 75%;
  background-color: rgb(253, 252, 254);
  border-radius: 1rem;
  margin: 1ch;
  padding: 5px;
}

.header-placeholder {
  /* opacity: 10; */
}

.header-thumbnail {
  border-style: none;
  border-radius: 50%;
  float: right;
}

/* .header-desc::empty {
  display: none;
} */

.header-right {
  flex-basis: 10%;
  max-width: 10%;
  min-width: 15ch;
}

.header-created {
  font-size: 0.8rem;
  text-align: right;
  margin-bottom: 5px;
  padding-right: 2ch;
}

.header-writings {
  /* We display or not depending on media settings */
  display: none;
}

.err-note {
  background-color: yellow;
  color: red;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 1rem;
  display: none;
}

.err-note:empty {
  display: none;
}

.err-extra {
  text-decoration: underline;
  text-shadow: 2px gray;
  font-size: 1.5em;
}

/* For document table of contents */

.doc-toc {
  list-style-type: none;
  column-count: 2;
  column-rule: 1px solid black;
  column-width: 3in;
  font-size: 1rem;
  /*    max-width: 7in; */
}

/* Used for the generated table of contents */

.toc-entry {
  margin-top: .75rem;
}

.toc-body {
  margin-left: 1in;
}


.toc-feature {
  margin-left: 0in;
}

.toc-feature {
  font-size: 1.25em;
  font-weight: bold;
}

.toc-date,
.toc-title {}

.toc-desc {
  font-size: 1rem;
}

.toc-title {
  font-weight: normal;
}

/* The entire sidebar */
.side-bar {
  background-color: var(--backGray, white);
  font-family: calibri, "trebuchet MS", sans-serif;
  font-size: 9pt;
  font-size: calc(var(--barSize, 9pt) + 1pt);
  text-align: center;
  max-width: 100%
}

.side-item {
  /* Font-family: 'Trebuchet MS', 'san serif'; */
  margin-bottom: 2px;
  padding-top: 2px;
  border-bottom: 1px solid var(--lightFore, white);
  color: #fef0f0;
  color: var(--lightFore, white);
}

.side-title {
  /* border: 3px inset var(--darkColor, rgb(20, 20, 112)); */
  /* background-color: rgb(244, 246, 247); */
  color: var(--lightFore, white);
}

.side-top {
  font-size: 12pt;
}

.side-ref {
  text-decoration: none;
  color: var(--lightFore, white);
}

.social-social {
  font-style: italic;
  font-size: 0.8em;
  text-align: center;
  border: 3px inset var(--backGray, rgb(20, 20, 112));
  background-color: var(--lightBack, white);
}

.social-social>div {
  border-bottom: solid black 1px;
}

#share-icons {
  display: flex;
  background-color: var(--lightBack, white);
  justify-content: center;
  align-items: center;
  /* gap: 20px; */
}

.share-btn {
  /* padding: 10px; */
  border: none;
  cursor: pointer;
  font-size: 10px;
}

.share-icon {
  width: 1rem;
  height: 1rem;
  margin-right: 5px;
}

/* You can add more specific styling for each icon here */
.toc-draft,
.side-draft {
  background-color: rgb(218, 238, 217);
}

#banner p {
  font-size: 11pt;
}


#draftinfo {
  background-color: rgb(218, 238, 217);
  border: 2px solid black;
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}

/* Screen between 1000 and 1600 pixels */
@media (min-width: 800px) and (max-width: 1000px) {

  .social-share {
    width: 100%;
  }

  .social-presence,
  .social-share {
    width: 50%;
    height: 100%;
    float: left;
    border-bottom: none;
  }

  .social-presence {
    border-right: 1px solid black;
    margin-right: -2px;
  }
}