.single-blog {
  display: flex;
  margin: auto;
  gap: 60px;
  justify-content: center;
}
.toc {
  align-self: flex-start;
  font-size: 16px;
  line-height: 1.4;
  font-style: italic;
}
.toc ul strong{
  font-weight: inherit;
}
.toc ul{
  list-style: none;
}
.toc>ul {
  margin-top: 24px;
}
.toc>ul>li {
  margin-bottom: 16px;
}
.toc>ul>li ul {
  margin: 16px 0 16px 1.25em;
}
.toc>ul>li ul li {
  margin-bottom: 16px;
}
.toc a {
  color: #65748e; /* gray-600 */
  position: relative;
  font-weight: 500;
  word-spacing: 2px;
}
.toc a::before {
  content: "";
  height: 5px;
  width: 5px;
  position: absolute;
  display: inline-block;
  left: -18px;
  top: 7px;
  background: #7C899F; /* gray-500 */
  border-radius: 50%;
}
.toc a:hover {
  color: #057BDE;
}
.toc a:hover::before {
  background: #057BDE;
}
.toc .active::before {
  background: #057BDE;
}
.toc .active{
  color: #057BDE;
  font-weight: 700;
  word-spacing: 0;
}
.single-blog .tray-overlay {
  visibility: visible;
  position: fixed;
}
.single-blog .tray-overlay.show {
  z-index: 1055;
  background-color: #00000059;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.toc-tray-button {
  gap: 8px;
  visibility: visible;
  position: fixed;
  font-size: 16px;
  color: #057BDE; /* mb primary */
  right: 0;
  top: 55%;
  padding: 12px 2px 10px 2px;
  border-radius: 0 8px 8px 0;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e5e6eb;
  background-color: white;
  border-left: 0;
  writing-mode: vertical-lr;
  transform: scale(-1);
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
.toc-tray-button img {
  height: 12px;
  width: 26px;
  transform: rotate(180deg);
}
.toc-tray-button.open{
  transform: translate(-299px) scale(-1);
  z-index: 10000;
}
.toc-tray-button.open img {
  transform: rotate(0deg);
}
.tray-collapse{
  position: fixed;
  max-height: 100vh;
  width: 300px;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
  background-color: white;
  overflow-y: auto;
  visibility: hidden;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.tray-collapse.open {
  visibility: visible;
  border-left: 1px solid #e5e6eb;
  z-index: 9999;
  -webkit-transform: translateX(-0%);
  transform: translateX(-0%);
}

@media screen and (min-width: 30em) { /* 480px */
  .tray-collapse{
    width: 350px;
  }
  .toc-tray-button.open{
    transform: translate(-349px)  scale(-1);
  }
}

@media screen and (min-width: 61.5625em) { /* 985px */
  .toc {
    visibility: visible;
    width: 250px;
  }
  .single-blog .tray-overlay{
    visibility: hidden;
  }
  .toc-tray-button {
    visibility: hidden;
  }
  .tray-collapse {
    max-height: calc(100vh - 400px);
    padding: 0;
    top: 140px;
    border-radius: 0;
    position: sticky;
    visibility: visible;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    box-shadow: none;
    overflow-y: scroll;
    scrollbar-color: rgba(101, 116, 142, 0.3) transparent;
    scrollbar-width: thin;
  }
  .tray-collapse::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    background-color: transparent;
  }
  .tray-collapse::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background-color: rgba(101, 116, 142, .3);
  }
  .tray-collapse:hover::-webkit-scrollbar-thumb{
    background-color: #65748e4d;
  }
  .tray-collapse.open{
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}

@media screen and (min-width: 75em) { /* >= 1200px */
  .toc {
    width: 280px;
  }
}