html {
  font-family: sans-serif;
}

h1 {
  overflow-wrap: anywhere;
}

th {
  text-align: center;
}

th, td {
  padding: 0.1rem 0.4rem;
}

td > pre {
  margin: 0;
}

.alert--transient {
  left: 50vw;
  position: fixed;
  top: 50vh;
  transform: translate(-50%, -50%);
  z-index: 1020;
}

.logo {
  max-width: 20rem;
  max-height: 20rem;
}

.text-blue { color: #007bff; }
.text-green { color: green; }
.text-grey { color: grey; }
.text-red { color: red; }
.text-white { color: white; }

.flex-110 {
  flex: 1 1 0;
}

[data-unread=False] .bi-envelope-fill.text-blue,
[data-unread=True] .bi-envelope-open-fill.text-grey,
[data-flagged=False] .bi-flag-fill.text-red,
[data-flagged=True] .bi-flag-fill.text-grey,
[data-completed=False] .bi-check-circle-fill.text-green,
[data-completed=True] .bi-check-circle-fill.text-grey {
  display: none;
}

ul.messages {
  padding-bottom: calc(100vh - 200px);
}

.messages-summary {
  position: fixed;
  top: 50vh;
  transform: translateY(-50%);
  margin-left: -1rem;
}

.messages-summary > * {
  display: flex;
}

.messages-summary .text-blue { background: #007bff; }
.messages-summary .text-green { background: green; }
.messages-summary .text-grey { background: grey; }
.messages-summary .text-red { background: red; }

.messages-summary i.bi {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
}

.messages-summary i.bi:before {
  display: none;
}

ul > iframe.seamless {
  display: block;
}

.emoji-list-item {
  list-style: none;
  position: relative;
}

.emoji-icon {
  position: absolute;
  left: -24px;
}

.favourite-this-page {
  float: right;
}

.task__item > span > p {
  margin: 0;
}

.tasks-show-completed:not(:has(:checked)) + .tasks-show-unimportant:not(:has(:checked)) ~ .tasks :is(.task--completed, .task--unimportant):not(:has(.task--uncompleted.task--important)),
.tasks-show-completed:has(:checked) + .tasks-show-unimportant:not(:has(:checked)) ~ .tasks .task--unimportant:not(:has(.task--important)),
.tasks-show-completed:not(:has(:checked)) + .tasks-show-unimportant:has(:checked) ~ .tasks .task--completed:not(:has(.task--uncompleted)) {
  display: none;
}