html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #1d1F21;
  color: #abb2bf; }

p {
  margin: 0; }

a,
a:visited {
  color: #81A1C1; }

.message {
  display: flex;
  flex-direction: row;
  margin-bottom: 17px; }
  .message > img {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  .message .media {
    cursor: pointer;
    max-width: 100%; }
    .message .media.small {
      max-width: 200px; }
      .message .media.small.video {
        width: 360px;
        max-height: 360px; }
  .message .audio {
    width: 100%; }
  .message .right {
    margin-left: 12px; }
  .message .time {
    opacity: 0.35; }

button#grid-btn {
  margin-bottom: 1em; }

#dl {
  color: #abb2bf;
  position: absolute;
  transform: translateX(-100%);
  text-decoration: none;
  font-size: 1.5em;
  background: rgba(29, 31, 33, 0.75);
  font-weight: bold; }

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; }
  .grid .message {
    min-width: 30em;
    max-width: 100%;
    flex: 1;
    overflow: auto; }
    .grid .message .msg {
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word; }

.emoji {
  height: 2.3em; }

.horizontal {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.focused {
  font-weight: bold; }