.content-receiving {
  border-width: 4px !important;
  padding: 5px !important;
}

.content-render {
  max-width: 840px;
  padding: 0 10px;
  overflow: auto;
  margin: 4px;
  /* margin: auto; */
  /* margin-top: 80px; */
  position: relative;
}

.content-render table {
  margin-bottom: 1rem;
}

.content-render table th, .content-render table td {
  padding: 6px 13px;
  border: 1px solid #d1d9e0;
}

.content-render h1 {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #d1d9e0b3;
}

.content-render h2 {
  padding-top: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #d1d9e0b3;
}

.content-render ul {
  /* bay: remove indent from the list */
  padding-inline-start: 15px;
}

.content-render li {
  /* bay: bump from 24px to 28px */
  line-height: 28px;
}

/* can't put a background on code, since overrides inside <pre> */
.content-render code {
  /* color: #888; */
  background-color: #f0f0f080;
}

/*
  The formatter putes a <code> block inside the <pre>, so we can
  override that to make the background transparent unlike the inline bits.
*/
.content-render pre code {
  background-color: transparent;
}

.content-render pre {
  border: 1px solid #d1d9e0b3;
  padding: 15px;
  font-size: 13px;
  line-height: 1.4rem;
}

.content-render a {
  /* text-decoration: none; */
  /* color: #f7931e; */
  /* color: rgb(102, 102, 102); */

  /* color: #999; */
  /* border-bottom: 1px solid #eee; */

  /* bay: use bootstrap -info colors */
  color: #17a2b8 !important;
  font-weight: 500;
}

.content-render a:hover, a:focus {
  /* text-decoration: underline; */
  /* color: rgb(239, 100, 35); */
  /* border-bottom: 1px solid rgba(239, 100, 35, 1); */

  /* bay: use bootstrap -info colors */
  color: #117a8a !important;
}

/*
  These are classes produced by pygments when doing syntax highlighting
  Reference: https://pygments.org/docs/tokens/
  Example: https://github.com/sglyon/pygments/blob/master/pygments/styles/tango.py
*/
.content-render code .c1 {
  /* double slash comment */
  color: #aaaaaa;
}

.content-render code .cm {
  /* block comment */
  color: #aaaaaa;
}

.content-render code .kd {
  /* function, let */
  color: #8154bf;
}

.content-render code .mf {
  /* numbers? */
  color: #ff6d00;
}

.content-render code .nx {
  /* Name.Other */
  color: #008cda;
  /* color: #555; */
}

.content-render code .o {
  /* operators */
  color: #aaa;
}

.content-render code .p {
  /* punctuation */
  color: #333;
}

.content-render code .s1 {
  /* single quoted strings */
  color: #6e8716;
}

.content-render code .s2 {
  /* double quoted strings */
  color: #6e8716;
}

.content-render code .w {
  /* whitespace */
}

.content-render .headerlink {
  background-color: rgb(80, 80, 80);
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  margin-left: 10px;
  font-size: 18px;
  vertical-align: middle;
  text-decoration: none;
  background-size: 1em;
  -webkit-mask-size: 1em;
  mask-size: 1em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8v2m9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5Z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8v2m9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5Z"/></svg>');
  transition: opacity 0.1s;
  opacity: 0;
}

.content-render h1:hover .headerlink,
.content-render h2:hover .headerlink,
.content-render h3:hover .headerlink,
.content-render h4:hover .headerlink,
.content-render h5:hover .headerlink,
.content-render h6:hover .headerlink {
  opacity: 1;
}