.demo__socialmedia {
  height: calc(100vh - var(--topnav-height));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  background-color: var(--neutral-color900);
}

.demo__timeline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  -ms-flex-preferred-size: 60%;
      flex-basis: 60%;
}

.demo__rhs-panel {
  width: 22vw;
  z-index: 2;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.demo__options-panel {
  background-color: transparent;
}

.annotation-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
}

.annotation-box {
  display: none;
  height: 100%;
  position: absolute;
  z-index: 1;
  -o-object-fit: contain;
     object-fit: contain;
}

.annotation-handle {
  display: none;
  outline: 1px solid white;
  position: absolute;
  -webkit-transform-origin: left;
          transform-origin: left;
}

div.message-chain {
  border-radius: 4px;
  border: 2px solid lightslategray;
}

div.single-message {
  padding: 10px;
  padding-bottom: 30px;
}

div.message {
  background-color: slategray;
}

div.message-highlighted {
  background-color: royalblue;
}

span.message-datestamp {
  padding: 5px;
  float: right;
  font-size: 80%;
}

.event-glyph {
  position: absolute;
  font-size: 5px;
  display: none;
}

.fa-comment:hover:only-child {
  -webkit-filter: contrast(50%);
          filter: contrast(50%);
}

.fa-stack:hover > .fa-circle {
  -webkit-filter: contrast(50%);
          filter: contrast(50%);
}

.dark {
  color: #242c32;
}

.white {
  color: white;
}