pre {
  background: #ececec;
  border: 5px solid #d3d3d3;
  border-radius: 10px;
  padding: 1em 1.5em;
  text-align: left;
  max-width: 100%;
  text-wrap: balance;
  font-size: 16pt;
}

.log-container {
  background: #ececec;
  border: 5px solid #d3d3d3;
  border-radius: 10px;
  padding: 1em 1.5em;
  text-align: left;
  max-width: 100%;
  max-height: calc(65vh - 3em);
  text-wrap: wrap;
  font-size: 16pt;
  overflow-y: scroll;
}

.log-container > * {
  transition: all 0.2s ease-in-out;
}

.entry {
  font-size: medium !important;
}

.new-entry {
  animation: flash 1s ease-in-out;
  background-color: transparent;
}

.old-entry, .info {
  background-color: transparent;
}

/* Log types */
.success {
  background-color: #ccffcc;
}

.warning {
  background-color: #ffffcc;
}

.error {
  background-color: #ffcccc;
}

.critical {
  background-color: #ff9999;
}

@keyframes flash {
  0% {
    background-color: yellow;
  }
  100% {
    background-color: transparent;
  }
}

.filter-container {
  display: inline-block;
  text-align: center;
  text-wrap: balance;
}

.filter-label {
  margin-right: 20px;
  font-size: 15px;
  user-select: none;
}

.clear-logs-button {
  background-color: #ff9999;
}

.clear-logs-button:hover {
  background-color: #ff6666;
}

.scroll-bottom {
  display: flex;
  justify-content: center;
  color: grey;
  text-align: right;
  cursor: pointer;
  text-decoration: none;
  font-size: small;
}