pre {
    background-color: ghostwhite;
    border: 1px solid silver;
    padding: 10px 20px;
    margin: 20px;
}
.json-key {
    color: brown;
    }
.json-value {
    color: navy;
    }
.json-string {
    color: olive;
}

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.loader {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   text-align: center;
   font-size: 18px;
   top: 45%;
   font-family: Arial, Helvetica, sans-serif
}

@keyframes logoFadeInOut {
   0% {transform: scale(1.1);}
   50% {transform: scale(0.9);}
   100% {transform: scale(1.1);}
}

.loader img {
   animation-name: logoFadeInOut;
   animation-iteration-count: infinite;
   animation-duration: 2s;
}

.chatcontainer {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

/* Clear floats */
.chatcontainer::after {
  content: "";
  clear: both;
  display: table;
}

/* Style images */
.chatcontainer img {
  float: left;
  max-width: 60px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

/* Style time text */
.chattime-right {
  float: right;
  color: #aaa;
}