@font-face {
  font-family: 'DOOM';
  src: url('./fonts/doom.ttf');
}

html {
  scroll-behavior: auto;
}

.no-js {
  display: none;
}

body {
  background: var(--background-color) no-repeat;
  background-image: linear-gradient(to bottom,var(--background-gradient) 0,transparent 260px);
  color: var(--text-color);
  font: 10pt Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-x: hidden;
  min-height: 255px;
}

body {
  margin-top: 5px;
  padding: 0 5px;
}

body .container {
  margin-top: 0;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--hover-link-color);
}

p {
  margin: 0;
}

hr {
  border: none;
  border-bottom: 1px solid var(--border-alt);
  clear: both;
}

hr.above-post-form {
  margin: 8px auto;
  width: 90%;
}

input,
textarea {
  color: var(--text-color);
  margin: 0;
}

input[type="text"] {
  margin: 0px;
  margin-right: 2px;
  padding: 2px 4px 3px 4px;
  border: 1px solid #AAA;
  outline: none;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}

.input-text {
  background: var(--input);
  border: 1px solid var(--border-color);
  color: var(--text-color);
}

@keyframes headerFlash {
  0% {
    background-color: var(--background-gradient);
  }
  30% {
    background-color: var(--header-highlight);
  }
  100% {
    background-color: var(--background-gradient);
  }
}

@keyframes rainbow {
  0% { color: red; }
  20% { color: orange; }
  40% { color: yellow; }
  60% { color: green; }
  80% { color: blue; }
  100% { color: purple; }
}

.rules{
    font-size: 9px;
}

.rules ul {
    margin: 0;
    padding-left: 11px;
}

.announcement{
    font-weight: bold;
    color: #ff0000;
}

.navtopright a:hover {
  color: var(--hover-link-color);
}

.header-flash {
  animation: headerFlash 0.3s ease-out;
}

.navtopright {
  float:right;
  font-size: 9pt;
}

/* The login form is the first thing on its page, and the default theme turns the board
   list into a fixed bar across the top of the window - without this the bar sits over the
   Login button and swallows the clicks aimed at it. */
#mod-login-form {
  margin-top: 20px;
}

.header-search-form {
  display: inline-flex;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

.header-search-input {
  font-size: 12px;
  width: 140px;
}

.header-search-btn {
  cursor: pointer;
  font-size: 12px;
}

.op {
  display: inline;
  overflow: hidden;
}

.post-container {
  display: block;
}

.op-container {
  display: inline;
}

.post {
  margin: 4px 0;
}

.thread {
  clear: both;
  margin: 0;
  padding: 0;
}

.thread-refresh-controls {
  padding: 0 5px;
}

.nav-arrows a {
  display: inline;
  font-size: large;
}

.nav-arrows {
  display: inline-block;
  white-space: nowrap;
}

.subject {
  color: var(--subject-color);
  font-weight: bold;
}

.post-info,
.thread-header {
  color: var(--text-color);
  display: block;
  padding: 3px 5px;
  width: 100%;
}

.name {
  color: var(--name-color);
  font-weight: bold;
}

/* A tripcode imported from vichan: there, `name` holds only the name and the tripcode sits in its
   own column, so it is appended when the post is rendered. It goes inside `.name`, which is bold,
   and a tripcode is not - Koshi's own posts carry the same markup in the name column itself, with
   the weight set inline. */
.name .trip {
  font-weight: normal;
}

.name-block {
  display: inline-block;
}

.hash {
  word-break: break-all;
  font-size: 12px;
}

.you::after,
.youName::after {
  content: ' (You)';
  font-style: italic;
}

.you.opReply::after {
  content: ' (You) (OP)';
  font-style: italic;
}

.opReply::after {
  content: ' (OP)';
  font-style: italic;
}

.admin-name,
.admin-name a {
  color: red;
  font-weight: bold;
}

.mod-name {
  color: #800080;
  font-weight: bold;
}

/* A capcode vichan stored that is not one of the site's own role labels - "## Mod",
   "## Owner", "## Niceland" and the like. Shown as it was stored, as staff (the
   stored label is what vichan printed after ##). */
.capcode-name {
  color: #800080;
  font-weight: bold;
}

/* A post that was deleted while the thread was open, kept in place instead of being
   removed (`deletedPostDisplay: "mark"` in the server config). The label is inserted
   just before the post's name by `public/js/thread.js`. */
.deleted-label {
  color: #ff0000;
  font-weight: bold;
  margin-right: 0.4em;
}

/* The post editor (`public/js/edit-post.js`): a floating panel like the quick reply,
   plus the live preview it injects right under the post being edited. */
#editPost {
  position: fixed;
  right: 20px;
  top: 126px;
  z-index: 9;
  display: none;
  background-color: var(--background-color);
  border: 1px solid var(--border-alt);
  border-radius: 5px;
  width: 420px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

#editPostHeader {
  padding: 2px 5px;
  background-color: var(--post-color);
  border-top-left-radius: 10%;
  border-top-right-radius: 10%;
  cursor: move;
  font-size: 14px;
  font-weight: bold;
  user-select: none;
}

#editPostHeader p {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#editPostClose {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

#editPostBody {
  padding: 6px;
}

#editPostMessage {
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 13px;
  resize: vertical;
}

#editPostTools {
  margin-top: 4px;
}

#editPostMode {
  background: none;
  border: 1px solid var(--border-alt);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
}

#editPostHint {
  margin: 4px 0 0;
  opacity: 0.7;
}

#editPostActions {
  margin-top: 6px;
  text-align: right;
}

#editPostActions button {
  border: 1px solid var(--border-alt);
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
  padding: 2px 10px;
}

#editPostStatus {
  margin: 4px 0 0;
  min-height: 1em;
}

.edit-preview {
  margin: 6px 0 6px 20px;
  padding: 4px 8px 8px;
  border: 1px dashed var(--border-alt);
  border-radius: 4px;
  opacity: 0.9;
}

.edit-preview-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Nothing in the preview is a link: it is a picture of the post, not the post. */
.edit-preview .post,
.edit-preview .reply {
  pointer-events: none;
}

.file-info details summary a {
  pointer-events: all;
}

.file-link {
  color: var(--link-color);
  display: inline-block;
  max-width: 250px;
  overflow: hidden;
  pointer-events: all;
  text-decoration: underline;
  vertical-align: bottom;
  white-space: nowrap;
}

.file-link:hover {
  display: contents;
  overflow-wrap: anywhere;
  white-space: normal;
}

.file-info details summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
}

.file-info details::-webkit-details-marker {
  display: none;
}

.file-info details::marker {
  display: none;
}

.file-info {
  color: var(--file-info-color);
  display: block;
  margin-top: 1px;
  margin-left: 5px;
  max-width: 600px;
  pointer-events: none;
  width: 100%;
}

.file-text {
  color: var(--file-info-color);
  display: block;
  font-size: 10pt;
  max-width: 600px;
  width: 100%;
}

.hide-file-button {
  cursor: pointer;
  display: inline-block;
  height: 16px;
  pointer-events: all;
  width: 16px;
}

.hide-file-button::before {
  content: '[-]';
  cursor: pointer;
  pointer-events: all;
}

.hide-file-button:hover {
  color: var(--hover-link-color);
}

.post-files {
  align-items: start;
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-top: 4px;
    display: flex;
    flex-wrap: nowrap;
}

/* Responsive post files thing */

.post-files .op-upload-cell {
  display: block;
  min-width: 0;
}

@media (max-width: 600px) {
    .post-files {
        flex-direction: column;
    }
}

.op-upload-cell {
  display: inline-block;
}

.watch-thread-off::before {
  content: url('/img/watch_thread_off.png');
  cursor: pointer;
  position: relative;
  top: 3px;
}

.watch-thread-on::before {
  content: url('/img/watch_thread_on.png');
  cursor: pointer;
  position: relative;
  top: 3px;
}

.close-watch-list {
  background: transparent;
  border: none;
  color: var(--link-color);
  font-size: 20px;
  cursor: pointer;
  padding: 0;	
}

.close-watch-list:hover,
.close-watch-list:focus,
.close-watch-list:active {
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--hover-link-color);
}

.watch-list-modal {
  background-color: var(--post-color);
  color: var(--text-color);
  font-family: sans-serif;
  font-size: 11px;
  max-height: 500px;
  overflow: auto;
  position: fixed;
  top: 25px;
  right: 10px;
  width: 292px;
  z-index: 1000;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.25);
  padding-left: 2px;
  padding-right: 2px;
  box-sizing: border-box;
}

.watch-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 3px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
  user-select: none;
  -webkit-user-select: none;
  cursor: move;
}

.watch-list-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding:3px;
}

.watch-list-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--text-color);
  padding: 1px 2px;
  font-size: 13px;
  line-height: 1.2;
}

/* The title is cut short with an ellipsis; the row's flex box cannot do that itself. */
.watch-list-item a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-list-item a:hover {
  color: var(--hover-link-color);
}

.unread-count{
	color: var(--subject-color);
}

.remove-watch {
  order: -1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px 0 0;
  color: var(--link-color);
  font-size: 20px;
  height: auto;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  height: 13px;
}

.remove-watch:hover {
  color: var(--hover-link-color);
  background: none;
}

.no-watched-threads,
.no-results {
  text-align: center;
  color: var(--hover-link-color);
  font-style: italic;
  padding: 4px 0;
}

.image-container,
.image-container a {
  pointer-events: all;
}

.thread-image {
  float: left;
  margin: 0;
  max-height: 250px;
  max-width: 250px;
}

.thread-image.expanded,
.reply-image.expanded,
.img-expanded {
  display: block;
  float: left;
  max-height: 100vh;
  max-width: 100%;
}

.image-container {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 3px;
  margin-bottom: 5px;
}

.image-container video,
.image-container audio {
  max-width: 100%;
}

.hide-link {
  cursor: pointer;
  display: none;
  vertical-align: top;
}

.hover-preview {
  position: fixed;
  pointer-events: none;
  z-index: 1500;
}

.board-description {
  font-size: x-small;
  margin-bottom: 10px;
}

.thread-content p,
.reply-content p {
  white-space: pre-wrap;
}

.thread-content,
.reply-content {
  color: var(--text-color);
  display: block;
  white-space: pre-wrap;
  word-wrap: anywhere;
}

.summary,
.thread-footer {
  color: #707070;
  display: block;
  margin: 4px 0;
}

.collapsed-post .post-info {
  align-items: center;
  display: flex;
  gap: 8px;
}

.reply {
  background: var(--post-color);
  border: 1px solid var(--border-alt);
  border-left: none;
  border-top: none;
  display: table;
  overflow: visible;
}

.reply.highlight {
  border-right: 1px solid var(--marked-border-color);
  border-bottom: 1px solid var(--marked-border-color);
}

.collapsed-post {
  background: var(--post-color);
  border: 1px solid var(--border-alt);
  margin: 4px 0;
  padding: 4px 8px;
}

.collapsed-post .expand-post {
  color: var(--link-color);
  cursor: pointer;
}

.filtered-post {
  display: none !important;
}

.side-arrows {
  color: var(--border-alt);
  float: left;
  font-size: small;
  margin: 0 2px;
}

.filter-unhide-button {
  background: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  display: block;
  margin: 5px 0;
  padding: 5px;
  text-align: left;
  width: 100%;
}

.filter-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.filters-list {
  margin-top: 15px;
}

.filter-item {
  align-items: center;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
  padding: 5px;
}

.options-list {
  margin-top: 15px;
}

.option-item label {
  cursor: pointer;
  margin-left: 10px;
}

.option-item {
  align-items: center;
  border: 1px solid var(--border-color);
  display: flex;
  margin: 5px 0;
  padding: 8px 5px;
}

.expired {
  opacity: 0.5;
}

.reply-image {
  float: left;
  margin: 0;
  max-width: 125px;
  max-height: 125px;
  width: auto !important;
  height: auto !important;
  display: block;
}

.quote-preview .reply-content p,
.quote-preview .thread-content p {
  margin: 0 0 0.5em;
  padding: 0;
}

.quote-preview .reply-content p:last-child,
.quote-preview .thread-content p:last-child {
  margin-bottom: 0;
}

.quote-preview .thread,
.quote-preview .reply {
  background: none;
  border: none;
  display: block;
  margin: 0;
  overflow: visible;
  padding: 0;
}

.quote-preview .post-info {
  line-height: 1.35;
  margin: 0 0 4px;
  padding: 0;
  width: auto;
}

.quote-preview .thread-image,
.quote-preview .reply-image {
  float: none;
  margin: 0;
  max-height: 150px;
  max-width: 150px;
  object-fit: contain;
}

.quote-preview .reply-content,
.quote-preview .thread-content {
  clear: none;
  display: block;
  margin: 0;
  overflow: visible;
  padding: 0;
  white-space: pre-wrap;
  width: auto;
}

.quote-preview .reply-content > :last-child,
.quote-preview .thread-content > :last-child {
  margin-bottom: 0;
}

.quoteLink {
  color: var(--hover-link-color);
  cursor: pointer;
  text-decoration: underline;
}

.quoteLink:hover,
.quoteLink:hover,
.backlink:hover {
  color: #f00;
}

.quote-preview .backlinks,
.quote-preview .small-button,
.quote-preview .dropdown-toggle {
  display: none;
}

.quote-preview .file-info {
  margin-top: 0;
  max-width: none;
  width: auto;
}

.quote-preview {
  background: var(--background-color);
  border: 1px solid var(--border-alt);
  display: block;
  line-height: 1.35;
  max-height: calc(100vh - 16px);
  max-width: calc(100vw - 16px);
  overflow: auto;
  padding: 8px;
  position: fixed;
  /* Never the hover target: if the preview ends up over the link it must not
     steal the pointer, or the browser fires mouseout on the link and the
     preview reopens in a loop. Clicks fall through to the link as well. */
  pointer-events: none;
  width: max-content;
  z-index: 1002;
}

.quote-preview .preview-content {
  display: contents;
}

.quote-preview .image-container {
  float: left;
  margin: 0 8px 4px 0;
}

.pagination {
  display: flex;
  margin: 5px 15px;
  width: fit-content;
}

.pagelist {
  background: var(--post-color);
  border-right: 1px solid var(--border-alt);
  border-bottom: 1px solid var(--border-alt);
  color: #89a;
  float: left;
  font-size: 13px;
  margin: 0;
  overflow: hidden;
  padding: 3px 7px;
}

.pagelist > div {
  float: left;
}

.pagelist .page-button {
  padding: 4px 0 4px 4px;
}

.pagelist .current {
  text-decoration: underline;
  font-weight: bold;
}

.pagelist .pages,
.pagelist .catalog-link {
  padding: 4px;
}

.pagelist .catalog-link {
  border-left: 1px solid var(--border-alt);
  margin-left: 7px;
  padding-left: 12px;
}

.pagelist strong {
  color: #000;
}

.page-nav a {
  color: var(--link-color);
}

.page-nav {
  border-top: 1px solid var(--border-alt);
  border-bottom: 1px solid var(--border-alt);
  clear: both;
  color: #89a;
  font-size: 9pt;
  margin: 4px 0;
  padding: 5px;
}

.page-link {
  border: 1px solid var(--border-alt);
  color: var(--text-color);
  margin: 2px;
  padding: 4px 8px;
}

.page-link.active {
  background: var(--background-gradient);
}

.search-page .search-board-group .op {
  display: block;
  overflow: visible;
}

.search-page .search-board-group .thread > .post-container {
  display: block;
}

.search-page .reply-form-container {
  margin-left: 0;
}

.search-header h2 {
  margin: 1em 0 0.25em;
}

.search-empty {
  padding: 1em 0;
}

.search-board-list label {
  display: block;
  line-height: 1.35;
}

.search-page fieldset.search-board-group {
  margin: 0.75em 0;
  padding: 0 8px 8px;
}

.search-page fieldset.search-board-group legend {
  padding: 0 4px;
}

#search-unselect-boards {
  font-size: 11px;
  font-weight: normal;
}

/* Search-term highlighting on /search (toggled by #search-highlight). */
mark.search-hit {
  color: #fff;
  background: #000;
}

#search-op {
  height: 16px;
  line-height: 16px;
  margin-left: 2px;
  padding: 0 2px;
  width: 120px;
}

.small-button:not(:empty)::before {
  content: '[';
}

.small-button:not(:empty)::after {
  content: ']';
}

.greenText, .quote {
  color: #429406;
}

.mikutext {
  color: #00b585;
}

.heading {
  color: #AF0A0F;
  font-size: 11pt;
  font-weight: bold;
}

.redtext {
  color: red;
  text-shadow: rgba(112,0,0,1) 0px 0px 16px;
  font-weight: bold;
}

.s1 { font-size: 70%; }

.s2 { font-size: 120%; }

.s3 { font-size: 140%; }

.s4 { font-size: 160%; }

.s5 { font-size: 180%; }

.s6 { font-size: 200%; }

.s7 { font-size: 220%; }

.powerful {
  animation: rainbow 0.5s infinite;
}

.c1 { color: red; }

.c2 { color: orange; }

.c3 { color: brown; }

.c4 { color: purple; }

.c5 { color: pink; }

.c6 { color: yellow; }

.c7 { color: green; }

.c8 { color: blue; }

.c9 { color: lightblue; }

.redText { color: var(--board-title-color); font-size: 125%; font-weight: bold; }

.board-title,
.board-description {
  color: var(--board-title-color);
  text-align: center;
}

.board-title {
  font: bold 28px Tahoma, sans-serif;
  letter-spacing: -2px;
  margin: 0;
}

.board-top {
  text-align: center;
}

.page-content {
  clear: both;
  margin: 10px;
  overflow: hidden;
}

.box-layout .c-thread img {
  border: 1px solid #888;
  display: inline-block;
  max-height: 150px;
  max-width: 150px;
}

.box-layout .image-link img {
  max-height: 120px;
  max-width: 100%;
  object-fit: contain;
  width: 110px;
}

.box-layout {
  margin: 10px auto 0;
  max-width: 750px;
}

.box-layout .left-col {
  padding-right: 10px;
  vertical-align: top;
  width: 365px;
}

.box-layout .right-col {
  vertical-align: top;
  width: 365px;
}

.box-outer {
  background: #fff;
  border: 1px solid #000;
  margin-bottom: 10px;
}

.boxbar {
  background: #9988EE;
  color: #000;
  line-height: 2em;
  padding-left: 0.5em;
  position: relative;
}

.boxbar h2 {
  font-size: 131%;
  font-weight: bold;
  margin: 0;
}

.boxcontent {
  line-height: 130%;
  padding: 0.25em 0.5em 0.5em;
}

.box-green {
  background: #edf8eb;
  border-color: #006600;
}

.box-green .boxbar {
  background: #99cc66;
  color: #006600;
}

.box-blue {
  background: #eaf2fb;
  border-color: #000066;
}

.box-blue .boxbar {
  background: #5599aa;
  color: #fff;
}

.box-layout #c-threads {
  text-align: center;
}

.box-layout .c-thread {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 5px;
  max-height: 320px;
  overflow: hidden;
  padding: 5px 0 3px;
  position: relative;
  vertical-align: top;
  width: 175px;
  word-wrap: break-word;
}

.box-layout .c-board {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-layout .c-teaser {
  margin-bottom: 5px;
  padding: 0 2px;
  text-align: center;
  white-space: pre-line;
}

.news-title {
  clear: both;
  content: ' ';
  display: block;
  background: var(--background-color);
  border: 1px solid var(--border-alt);
  color: var(--text-color);
  font-size: 116%;
  font-weight: bold;
  padding: .5em;
}

.news-content {
  padding: 5px;
}

/* An article opened from the front page (/news#<id>): clear of the fixed board bar,
   and picked out from the others. */
.news-title {
  scroll-margin-top: 30px;
}

.news-title:target {
  border-color: var(--hover-link-color);
  outline: 1px solid var(--hover-link-color);
}

.list-empty {
  color: #4d4d4d;
}

.images-list {
  padding: 8px 10px 6px;
}

.posts-list {
  width: 350px;
}

.stats-list {
  line-height: 1.4;
}

.board-banner {
  clear: both;
  color: var(--board-title-color);
  text-align: center;
}

#bannerCnt {
  margin: 5px auto;
  max-width: 100%;
}

.banner-img {
  border: 1px solid var(--border-color);
  display: block;
  margin: 0 auto;
}

#board-delete-modal {
  background: rgba(0, 0, 0, 0.4);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.modal-content {
  margin: 15% auto;
  width: 400px;
}

.modal-content .box-outer {
  margin-bottom: 0;
}

.modal-content .boxcontent {
  padding: 0.5em;
}

/* alert() replacement (public/js/alert.js): a centred box in the theme's post colours,
   like vichan's, above every other modal. */
#alert_handler {
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: opacity 0.15s ease-out, visibility 0.15s;
  visibility: hidden;
  width: 100%;
  z-index: 9900;
}

#alert_handler.open {
  opacity: 1;
  visibility: visible;
}

#alert_background {
  background: #000;
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
}

#alert_div {
  background: var(--background-color);
  background-image: linear-gradient(to bottom, var(--background-color), var(--post-color));
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  color: var(--text-color);
  font-size: 10pt;
  left: 50%;
  max-width: calc(100% - 20px);
  padding: 15px;
  position: absolute;
  text-align: center;
  top: 50px;
  transform: translate(-50%, -15px);
  transition: transform 0.15s ease-out;
  width: 500px;
}

#alert_handler.open #alert_div {
  transform: translate(-50%, 0);
}

#alert_close {
  background: none;
  border: none;
  color: var(--link-color);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 2px;
}

#alert_close:hover {
  color: var(--hover-link-color);
}

#alert_message {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

#alert_div .alert_button {
  margin-top: 8px;
}

.error-message {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
}

.notification {
  background: #4caf50;
  bottom: 20px;
  color: #fff;
  padding: 15px;
  position: fixed;
  right: 20px;
  z-index: 1000;
}

#settings-modal {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* The panel: a title bar, the sections (each a <details> that opens on its own), and
   the Save button at the bottom. Buttons inside keep the theme's own button look. */
#settings-modal .settings-panel {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  max-height: calc(100% - 40px);
  max-width: calc(100% - 10px);
  padding: 0;
  position: relative;
  width: 420px;
  z-index: 1001;
}

#settings-modal .settings-header {
  align-items: center;
  background: rgba(128, 128, 128, 0.12);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  padding: 5px 30px;
  position: relative;
}

#settings-modal .settings-title {
  color: var(--subject-color);
  font-size: 14px;
  font-weight: bold;
}

#settings-modal .modal-close {
  align-items: center;
  background: none;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 16px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 6px;
  width: 16px;
}

#settings-modal .modal-close:hover {
  border-color: var(--hover-link-color);
  color: var(--hover-link-color);
}

#settings-modal .settings-expand-all {
  padding: 5px 0 2px;
  text-align: center;
}

#settings-modal .settings-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 10px 6px;
}

#settings-modal .settings-section > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: bold;
  gap: 7px;
  list-style: none;
  padding: 5px 0;
  user-select: none;
}

#settings-modal .settings-section > summary::-webkit-details-marker {
  display: none;
}

/* The [+] / [-] box in front of each section's name. */
#settings-modal .settings-section > summary::before {
  align-items: center;
  border: 1px solid var(--text-color);
  content: '+';
  display: inline-flex;
  flex: none;
  font-size: 12px;
  height: 12px;
  justify-content: center;
  line-height: 1;
  width: 12px;
}

#settings-modal .settings-section[open] > summary::before {
  content: '\2212';
}

#settings-modal .settings-section > summary:hover {
  color: var(--hover-link-color);
}

#settings-modal .settings-section-body {
  padding: 0 0 6px 19px;
}

#settings-modal .settings-option {
  cursor: pointer;
  display: grid;
  gap: 1px 5px;
  grid-template-columns: auto 1fr;
  padding: 4px 0;
}

#settings-modal .settings-option input {
  grid-row: 1;
  margin: 0;
}

#settings-modal .settings-option-name {
  font-size: 12px;
}

#settings-modal .settings-option-desc {
  font-size: 10px;
  grid-column: 2;
  opacity: 0.75;
}

#settings-modal p.settings-option-desc {
  margin: 0 0 4px;
}

#settings-modal .filter-controls {
  gap: 6px;
  margin-bottom: 8px;
}

#settings-modal .filters-list {
  margin-top: 0;
}

#settings-modal .filter-item {
  gap: 8px;
  overflow-wrap: anywhere;
}

#settings-modal textarea.settings-code {
  background: var(--input);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  color: var(--text-color);
  font-family: monospace;
  height: 200px;
  padding: 6px;
  resize: vertical;
  width: 100%;
}

#settings-modal .settings-footer {
  border-top: 1px solid var(--border-color);
  padding: 7px;
  text-align: center;
}

details:not([open]) .hide-file-button::before {
  content: '[+]';
}

.post-label {
  background: var(--background-gradient);
  border: 1px solid var(--border-alt);
  display: inline-block;
  font-size: 13px;
  padding: 3px;
  text-align: center;
  width: 57px;
}

.form-button,
.formatting-details button {
  cursor: pointer;
}

#toggle-post-form-link a {
  color: var(--link-color);
}

.reply-form-container {
  clear: both;
  margin: auto;
}

#toggle-post-form-link {
  margin: 4px 0;
  text-align: center;
}

.post-block {
  background: var(--header-highlight);
  border: 1px solid var(--text-color);
  font-weight: bold;
  padding: 0 5px;
  white-space: nowrap;
}

.postform-input-cell {
  width: 100%;
}

#drop-zone {
  background: var(--background-gradient);
  border: 2px dashed var(--border-alt);
  color: var(--file-info-color);
  cursor: pointer;
  padding: 10px;
  text-align: center;
}

.preview-container,
#preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-item img {
  display: block;
  /* One box for every thumbnail, letterboxed rather than cropped, so the text below
     starts at the same height in each card of a row. */
  height: 100px;
  margin-bottom: 5px;
  max-width: 125px;
  object-fit: contain;
  width: 100%;
}

.preview-item {
  margin-bottom: 10px;
  position: relative;
  width: 125px;
}

/* The name gets a line of its own, the size the next one: the name is truncated to
   the configured length (see upload.js), so the cards in a row line up. */
.preview-text {
  line-height: 1.25;
}

.preview-name,
.preview-size {
  display: block;
  overflow-wrap: anywhere;
}

.preview-size {
  color: var(--file-info-color);
}

.remove-file {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
}

/* Every field in the form shares the text inputs' font (input[type="text"], above). */
#postformTable textarea#message,
#postformTable select {
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}

#postformTable textarea#message {
  box-sizing: border-box;
  min-width: 250px;
  resize: vertical;
  width: 100%;
}

#postformTable input.input-text,
#postformTable select.input-text {
  max-width: 100%;
  width: 180px;
}

#postformTable select {
    width: 190px;
}

/* Options: a dropdown of checkboxes (post-form.ejs). The closed box is a plain <select>
   inside the <summary>, so it is drawn like every other dropdown; it takes no clicks
   itself (they fall through to the summary, which opens the <details>). The open list
   hangs under it like a select's own list: same width, font, border and highlight. */
.post-options {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.post-options > summary {
  display: block;
  list-style: none;
}

.post-options > summary::-webkit-details-marker {
  display: none;
}

.post-options > summary::marker {
  content: '';
}

.post-options > summary:focus {
  outline: none;
}

#postformTable select.post-options-select {
  display: block;
  pointer-events: none;
}

.post-options > summary:focus-visible .post-options-select {
  outline: auto;
}

.post-options-menu {
  background: var(--input);
  border: 1px solid ButtonBorder;
  box-sizing: border-box;
  left: 0;
  min-width: 100%;
  padding: 1px 0;
  position: absolute;
  top: 100%;
  z-index: 1000;
}

.post-options-menu label {
  align-items: center;
  color: FieldText;
  cursor: default;
  display: flex;
  font: 10pt arial, helvetica, sans-serif;
  gap: 4px;
  padding: 1px 4px;
  user-select: none;
  white-space: nowrap;
}

.post-options-menu label:hover {
  background: Highlight;
  color: HighlightText;
}

.post-options-menu input[type="checkbox"] {
  margin: 0;
}

#postformTable > tbody > tr > td {
  vertical-align: middle;
}

#postformTable > tbody > tr.search-board-row > td {
  vertical-align: top;
}

#postformTable {
  margin: 0 auto 10px;
  max-width: 380px;
  width: 100%;
}

#emotebox {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 400px;
    height: 100px;
    overflow-y: auto;
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
}

#emo {
    width: 315px;
    overflow: auto;
}

#emo .emote{
    border: 1px dashed currentColor;
	margin: 4px;
}

#emo .emote:hover{
    cursor:pointer;
    filter: grayscale(1);
    opacity: 0.5;
}

#emo[open] {
    height: 130px;
}

.comment-block-extra {
  margin-top: 4px;
}

.comment-block-extra > .form-button {
  display: block;
}

#delPasswordInfo {
  color: var(--file-info-color);
  font-size: 11px;
}

.format-summary,
.format-summary-qr {
  color: var(--link-color);
  cursor: pointer;
}

.format-summary:hover,
.format-summary-qr:hover {
  color: var(--hover-link-color);
}

#reply-form,
#search-form {
  margin: auto;
}

.footer-board-list,
.footer-nav-tools {
  font-size: 9pt;
  margin: 5px 0;
}

.footer-board-list {
  text-align: left;
}

.footer-nav-tools {
  text-align: right
}

#footer-links {
  font-size: x-small;
  margin: 5px 0 10px;
  text-align: center;
}

.footer-text {
  font-size: x-small;
  padding: 5px;
  text-align: center;
}

.catalog-controls {
  border-top: 1px solid var(--border-alt);
  border-bottom: 1px solid var(--border-alt);
  margin-bottom: 10px;
  padding: 5px 10px;
  margin-top: 8px;
}

.catalog-sort {
  display: flex;
  gap: 15px;
  margin-bottom: 5px;
}

.catalog-buttons {
  display: flex;
  gap: 5px;
  align-items: center;
}

.feed-link {
  display: inline-flex;
  vertical-align: middle;
}

.feed-icon {
  display: inline-block;
  vertical-align: middle;
}

.catalog-search {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.catalog-threads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 5px 15px;
}

.catalog-thread {
  display: inline-block;
  font-size: 11px;
  height: 210px;
  margin: 0;
  overflow: hidden;
  padding: 5px;
  position: relative;
  width: 180px;
}

.catalog-thread.size-large {
  height: 300px;
  width: 200px;
}

.catalog-thread.size-large .catalog-content {
  width: 100%;
}

.catalog-thread .thread-subject {
  color: var(--subject-color);
  font-weight: bold;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-thread .thread-text {
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  word-wrap: break-word;
}

.catalog-content {
  color: var(--text-color);
  font-size: 13px;
  overflow: hidden;
  text-align: center;
  width: 180px;
}

.catalog-file {
  text-align: center;
}

.catalog-image {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  max-height: 140px;
  max-width: 140px;
  object-fit: contain;
}

.thread-stats {
  font-size: 11px;
}

.reply-count,
.image-count {
  font-weight: bold;
}

.size-large .catalog-image {
  max-height: 190px;
  max-width: 190px;
}

/* Catalog hover preview (public/js/catalog.js): a larger copy of the item over the
   grid, with the whole opening post and the thread's latest replies. */
.catalog-preview {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  font-size: 11px;
  padding: 5px;
  position: absolute;
  z-index: 900;
}

.catalog-preview .catalog-content {
  overflow: visible;
  width: auto;
}

.catalog-preview .thread-subject {
  color: var(--subject-color);
  font-weight: bold;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

/* Long posts stop after 15 whole lines with an ellipsis, not halfway through a line. */
.catalog-preview .thread-text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 15;
  display: -webkit-box;
  font-size: 11px;
  line-clamp: 15;
  line-height: 1.3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.catalog-preview-fileinfo {
  align-items: center;
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 3px;
  white-space: nowrap;
}

/* A long file name gives way (with an ellipsis) to the download icon and the size. */
.catalog-preview-filename {
  color: var(--link-color);
  min-width: 0;
  overflow: hidden;
  text-decoration: underline;
  text-overflow: ellipsis;
}

.catalog-preview-fileinfo img {
  display: block;
}

.catalog-preview-replies {
  border-top: 1px solid var(--border-alt);
  color: var(--text-color);
  margin-top: 5px;
  padding-top: 3px;
  text-align: left;
}

.catalog-preview-reply {
  border-bottom: 1px solid var(--border-alt);
  color: var(--text-color);
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 2px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The body keeps its formatting but stays on the row's single line. */
.catalog-preview-body * {
  display: inline !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  white-space: nowrap !important;
}

.catalog-preview-reply:last-child {
  border-bottom: none;
}

.catalog-preview-reply:hover {
  background: rgba(128, 128, 128, 0.12);
}

.catalog-preview-age {
  color: var(--link-color);
  font-weight: bold;
  text-decoration: none;
}

.catalog-preview-file {
  font-style: italic;
}

.doomText { color: #cd3b2b; font-family: DOOM, serif; }

.dropdown {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.dropdown-toggle {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  height: 1em;
  line-height: 1em;
  opacity: 0.8;
  outline: none;
  padding: 0;
  text-align: center;
  transition: transform 0.15s ease;
  width: 1em;
}

.dropdown-toggle:hover,
.dropdown-toggle.active {
  color: var(--hover-link-color);
  opacity: 1;
}

.dropdown-toggle.active {
  transform: rotate(90deg);
}

.dropdown-menu {
  background: var(--post-color);
  border: 1px solid var(--border-alt);
  border-radius: 3px;
  color: var(--text-color);
  min-width: 70px;
  overflow: hidden;
  padding: 1px 0 3px;
  position: fixed;
  z-index: 2000;
}

.dropdown-item {
  background: none;
  border: none;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: block;
  font: 10pt Arial, Helvetica, sans-serif;
  min-width: 70px;
  outline: none;
  padding: 2px 10px;
  position: relative;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255, 255, 255, 0.33);
  color: inherit;
}

.latest-post {
  color: #556;
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-post:hover {
  background: #d7ebf2;
}

.latest-link {
  color: #2a7a80;
  font-weight: bold;
}

.latest-quote,
.latest-text {
  color: #556;
}

.latest-entry {
  margin-bottom: 16px;
  overflow: auto;
}

.featured-thread {
  color: inherit;
  display: flex;
  gap: 8px;
  margin: 0 -0.5em 2px;
  padding: 6px 0.5em;
  text-decoration: none;
}

.featured-thread:hover {
  background: #d9efd0;
}

.featured-thumb {
  flex: 0 0 72px;
  height: 72px;
  object-fit: cover;
  width: 72px;
}

.featured-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.featured-title {
  color: #2a7a80;
  display: block;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-teaser {
  color: #222;
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
}

.featured-board {
  color: #4a6b6d;
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.highlight {
  background: var(--marked-color);
}

/* An inlined post (`public/js/post-inline.js`): the post a quote link or backlink points
   at, rendered inside the post that mentions it - 4chanX's inline quotes. The boxes nest,
   so each level steps in (border + padding + the margins below) and carries its own accent
   edge; apart from that the box is shaped exactly like a regular reply - the same 1px
   border, 5px padding and 5px margin the theme gives `div.post.reply` - so it sizes and
   spaces like the posts around it. */
.post-inline {
  border: 1px solid var(--border-alt);
  border-radius: 3px;
  margin: 5px;
  padding: 5px;
  /* A post's file block is floated, and a box that is not a formatting context of its own
     lets the picture hang out of its bottom border onto whatever follows. `flow-root`
     contains the float without clipping what is inside, which `overflow: hidden` would. */
  display: flow-root;
  /* A quote link sits inside the post's `.reply-content`, which is `pre-wrap`; without
     this the indentation of the preview markup would break its header onto four lines.
     The inlined post's own text keeps `pre-wrap` from `.reply-content` further down. */
  white-space: normal;
  /* `.reply` is a shrink-to-fit table, so a box that only inherited its parent's width
     would lose a hundred pixels with every nesting level: a minimum keeps each level
     readable, and the table it opens in grows to fit it. On a phone there is no room to
     grow into - the post's own margins already use the screen - so the minimum is dropped
     and the box stays inside the width it is given. */
  min-width: 400px;
}

@media (max-width: 640px) {
  .post-inline {
    min-width: 0;
  }
}

/* The file block inside a box, sized the way the hover preview sizes it: a post's own
   picture (an OP's is up to 250px, the gallery's margins 20px a side) is what used to
   stick out of a box a third that wide and leave nothing for the text. */
.post-inline .image-container {
  float: left;
  margin: 0 8px 4px 0;
}

.post-inline .thread-image,
.post-inline .reply-image {
  max-height: 150px;
  max-width: 150px;
  object-fit: contain;
}

/* Nothing an inlined post renders may be wider than the box it is drawn in - a nested box
   is narrower than the one around it, and an embedded player or a long `<details>` header
   would otherwise run out of the border. */
.post-inline img,
.post-inline video,
.post-inline iframe {
  max-width: 100%;
}

.post-inline .reply-content,
.post-inline .thread-content {
  margin: 0;
}

/* The page's post header is `width: 100%` on a content box, so with its own padding it is
   a few pixels wider than whatever holds it - a table cell absorbs that, a box's border
   does not, and the header poked out of the right edge. A block already fills the width it
   is given, so that rule is simply dropped inside a box (the hover preview does the same). */
.post-inline .post-info {
  width: auto;
}

/* The number of an inlined post is its switch: a different shade from a real post's
   number, and the thing that closes or reopens the posts opened inside it. */
.post-inline .post-num {
  color: var(--hover-link-color);
  cursor: pointer;
  user-select: none;
}

.post-inline.inline-collapsed .post-num {
  opacity: 0.6;
}

/* Who replied to the inlined post, shown above its text the way a real post shows its
   backlinks. */
.post-inline .inline-backlinks {
  margin: 0 0 4px;
}

.post-inline .inline-note {
  opacity: 0.7;
}

.backlinks {
  display: inline;
}

.backlink {
  color: var(--link-color);
  text-decoration: underline;
  font-size: 0.8em !important;
  padding: 0;
}

.spoiler a {
  color: inherit !important;
}

.spoiler {
  background: #000;
  color: #000;
  padding: 0 1px;
}

.spoiler:hover {
  color: #fff !important;
}

.poll-wrapper {
  display: block;
  margin: 0px 20px 12px;
}

.poll-container {
  display: inline-block;
  margin-top: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 240px;
  max-width: 450px;
  margin-top: 0;
}

.poll-header h4 {
  margin: 0 0 2px;
  color: var(--subject-color);
}

.poll-options {
  font-size: 12px;
  margin: 10px 0 8px;
}

.poll-option {
  margin-bottom: 8px;
}

.poll-option:last-child {
  margin-bottom: 0;
}

.poll-bar-container {
  height: 16px;
  background: rgba(128, 128, 128, 0.15);
  border: 1px solid var(--border-color);
  margin-top: 5px;
  overflow: hidden;
  position: relative;
}

.poll-bar {
  height: 100%;
  opacity: 0.85;
  min-width: 0;
  transition: width 0.3s ease;
}

.poll-stats {
  color: var(--text-color);
  font-size: 0.9em;
  position: absolute;
  right: 6px;
  font-size: 0.9em;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
}

.poll-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.7em;
}

.poll-expired {
  color: #666;
}

.option-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 5px;
}

#media-viewer {
  background: #111111a3;
  color: #ccc;
  display: flex;
  flex-direction: column;
  inset: 0;
  position: fixed;
  z-index: 9000;
}

.mv-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mv-stage {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  touch-action: none;
}

.mv-frame {
  align-items: center;
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  line-height: 0;
  width: 100%;
}

.mv-stage.mv-dragging,
.mv-stage.mv-dragging .mv-frame,
.mv-stage.mv-dragging img {
  cursor: grabbing;
}

.mv-stage img {
  cursor: grab;
}

.mv-stage img,
.mv-stage video {
  -webkit-user-drag: none;
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  width: auto;
}

.mv-nav {
  background: none;
  border: 0;
  color: #888;
  cursor: pointer;
  flex: 0 0 2.5rem;
  font-size: 2rem;
  line-height: 1;
  padding: 0;
}

.mv-nav:hover {
  color: #fff;
}

.mv-toolbar,
.mv-strip {
  align-items: center;
  border-top: 1px solid #222;
  display: flex;
  gap: 0.75rem;
}

.mv-toolbar {
  flex: 0 0 auto;
  justify-content: center;
  padding: 0.4rem 0.75rem;
}

.mv-toolbar button,
.mv-zoom-pct,
.mv-dismiss {
  background: none;
  border: 0;
  color: #aaa;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.mv-toolbar button:hover,
.mv-filename:hover,
.mv-dismiss:hover {
  color: #fff;
}

.mv-filename,
.mv-counter {
  color: #aaa;
  text-decoration: none;
}

.mv-strip {
  flex: 0 0 auto;
  justify-content: safe center;
  overflow: auto hidden;
  padding: 0.35rem 0.5rem;
}

.mv-chip {
  background: none;
  border: 0;
  cursor: pointer;
  flex: none;
  opacity: 0.45;
  padding: 0;
}

.mv-chip:hover,
.mv-chip-active {
  opacity: 1;
}

.mv-chip img {
  display: block;
  max-height: 56px;
  max-width: 56px;
}

.mv-chrome {
  position: fixed;
  right: 0.75rem;
  top: 0.35rem;
  z-index: 9001;
}

.mv-dismiss {
  font-size: 1.5rem;
  line-height: 1;
}

.ban-message {
  color: #f00;
  font-weight: bold;
  margin: 5px 0;
}

.warning-message {
  color: #fa0;
  font-weight: bold;
  margin: 5px 0;
}

.embed-container > summary {
  list-style: none;
}

.embed-container > summary::-webkit-details-marker {
  display: none;
}

.side-catalog-thread {
  border: 1px solid var(--border-alt);
  color: inherit;
  cursor: pointer;
  display: flex;
  margin-bottom: 10px;
  padding: 5px;
}

.side-catalog-thumb {
  height: 100px;
  margin-right: 10px;
  object-fit: cover;
  width: 100px;
}

.side-catalog-info .replies {
  color: #666;
  font-size: 0.8em;
}

.side-catalog-info {
  flex: 1;
  font-size: 0.9em;
}

.side-catalog {
  background: var(--background-color);
  border-left: 1px solid var(--border-alt);
  height: 100vh;
  overflow-y: auto;
  padding: 10px;
  position: fixed;
  right: -330px;
  top: 0;
  transition: right 0.3s;
  width: 300px;
  z-index: 1001;
}

.ascii {
  font-family: Mona, 'MS PGothic' !important;
}

.scroll {
  max-height: 200px;
  overflow: scroll;
}
/*
.codeblock,
code {
  background: #181a1b;
}

.codeblock {
  padding: 20px;
}

code {
  display: inline-block;
  font-size: 13px;
  max-width: 100%;
  overflow-x: auto;
  padding: 0 0.25em;
}
*/
.archive-table {
  background: var(--post-color);
  border-collapse: collapse;
  margin: 10px;
  width: 98.5%;
}

.archive-header th,
.archive-thread td {
  border: 1px solid var(--border-alt);
  padding: 4px;
}

.archive-header {
  background: var(--header-highlight);
  font-weight: bold;
}

.archive-thread {
  background: var(--post-color);
}

.archive-thread-expiring {
  border-color: orange;
}

.archive-col-id {
  text-align: center;
  width: 8%;
}

.archive-col-content {
  max-width: 800px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 65%;
}

.archive-col-date,
.archive-col-expiration {
  text-align: center;
  width: 12%;
}

.archive-subject {
  color: var(--subject-color);
  font-weight: bold;
}

.archived-warning {
  color: red;
  display: inline-block;
}

.moeText {
  position: relative;
}

.moeText:before {
  background: url('/img/moesparkle.gif') repeat-x;
  background-size: 8em;
  content: '';
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.mod-nav button {
  font: inherit;
}

.mod-media img {
  max-width: 128px;
  max-height: 128px;
  display: block;
}

/* Fixed 128x128 box that centers each thumbnail, so captions line up across
   a row no matter what aspect ratio the image has. */
.mod-media .media-thumb {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod-panel h2 {
  margin: 0 0 8px;
  font-size: 16px;
  text-align: right;
}

.mod-table th,
.mod-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
}

.mod-nav {
  margin-top: 10px;
  margin-bottom: 12px;
}

.mod-nav .user {
  float: right;
}

.mod-table {
  width: 100%;
  border-collapse: collapse;
}

.mod-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mod-media > div {
  width: 136px;
  font-size: 12px;
  word-break: break-all;
}

.mod-panel {
  border: 1px solid var(--border-alt);
  padding: 8px;
  margin: 16px 0;
  max-width: 640px;
}

/* ---------------------------------------------------------------------------
   Captcha (`be/lib/captchaService.js`, `public/js/captcha.js`)
   The widget sits in the post forms; the rest of the block is the mod panel.
   --------------------------------------------------------------------------- */

.captcha {
  box-sizing: border-box;
  max-width: 340px;
  width: 100%;
}

.captcha * {
  box-sizing: border-box;
}

.captcha-puzzle {
  margin: 0;
}

/* Opening and closing the puzzle. Both buttons are for the script only: a reader without it
   cannot solve the captcha either, so they are simply shown the puzzle (`captcha-scripted` is
   set by public/js/captcha.js when it takes over). The state is one state for the whole page -
   see the script - so the reply form and the quick reply open and close together. */
.captcha-actions {
  margin: 0;
}

.captcha-open,
.captcha-hide {
  background: var(--background-gradient);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  display: none;
  font: inherit;
  padding: 2px 8px;
}

.captcha-open:hover,
.captcha-hide:hover {
  color: var(--hover-link-color);
}

.captcha-scripted .captcha-open,
.captcha-scripted .captcha-hide {
  display: inline-block;
}

/* Open: the button that would open it is pointless. */
.captcha:not(.captcha-collapsed) .captcha-actions-open {
  display: none;
}

/* Closed: only the button. */
.captcha-collapsed .captcha-puzzle,
.captcha-collapsed .captcha-actions-hide {
  display: none;
}

/* Solved (this visit, or the pass cookie from an earlier one): the widget says so and asks
   nothing - one solve covers the whole session. */
.captcha-verified {
  border-left-color: #6fdc8c;
}

.captcha-verified-line {
  color: #6fdc8c;
  display: none;
  font-weight: bold;
  margin: 0;
}

.captcha-verified .captcha-verified-line {
  display: block;
}

/* Kept as a guard for the puzzle markup of a widget that was verified while the page was open
   (the script removes it; a page the server rendered for a solved visitor never had one). */
.captcha-verified .captcha-puzzle {
  display: none;
}

.captcha-tick {
  margin-right: 4px;
}

.captcha-title {
  color: var(--text-color);
  font-weight: bold;
  margin: 0 0 4px;
}

.captcha-image {
  background: #fff;
  border: 1px solid var(--border-alt);
  display: block;
  margin: 0 0 4px;
  max-height: 200px;
  max-width: 200px;
}

.captcha-controls {
  align-items: center;
  display: flex;
  gap: 6px;
  margin: 0;
}

/* The theme sizes a text input for the form it is in (`#postformTable input.input-text` is
   180px), the quick reply's own style block makes every input in that panel full width
   (`#quickReply input[type="text"]`, in views/partials/quick-reply.ejs, which loads after this
   file), and their box models differed too - so the same widget came out a different width in
   each form. This holds both: one published width, whatever is around it. */
.captcha .captcha-answer,
#postformTable input.captcha-answer,
#quickReply input.captcha-answer,
#quickReply #quick-reply-form input.captcha-answer {
  flex: 0 0 auto;
  font: inherit;
  width: 160px;
}

.captcha-message {
  font-size: 11px;
  margin: 4px 0 0;
  opacity: 0.8;
}

.captcha-message.captcha-bad,
.captcha-error,
.captcha-bad {
  color: #ff6b6b;
  opacity: 1;
}

.captcha-hint,
.captcha-intro {
  font-size: 12px;
  max-width: 80ch;
  opacity: 0.85;
}

.captcha-status td:first-child {
  padding-right: 12px;
}

.captcha-grid td:first-child {
  padding-right: 12px;
}

.captcha-grid input[type='number'] {
  width: 6em;
}

.captcha-images td,
.captcha-images th {
  padding: 2px 10px 2px 0;
  text-align: left;
  vertical-align: top;
}

.captcha-files {
  border-left: 2px solid var(--border-alt);
  font-size: 11px;
  margin-top: 4px;
  padding-left: 6px;
}

.captcha-file {
  display: block;
}

.captcha-file-size {
  opacity: 0.7;
}

.captcha-none {
  opacity: 0.6;
}

#captcha-log {
  background: var(--background-color);
  border: 1px solid var(--border-alt);
  font-size: 11px;
  max-height: 260px;
  max-width: 100%;
  overflow: auto;
  padding: 6px;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   Moderation pages (views/mod/*, which the layout marks with `mod-page`)
   The look of vichan's panel - a title, a nav strip, and everything else in boxes
   with a legend - drawn in the theme's own colours. The moderator views of a board
   or a thread are the public templates and are not touched by any of this.
   --------------------------------------------------------------------------- */

/* Starts below the header's floated top-right links, as the boxes do (.box-layout), so
   the nav bar neither runs under them nor narrows to fit beside them. */
.mod-page {
  clear: both;
  margin: 0 auto;
  max-width: 960px;
  padding-top: 15px;
}

.mod-page h1 {
  color: var(--board-title-color);
  font: bold 26px Tahoma, sans-serif;
  letter-spacing: -1px;
  margin: 14px 0 6px;
  text-align: center;
}

.mod-page h2 {
  border-bottom: 1px solid var(--border-color);
  color: var(--subject-color);
  font-size: 15px;
  margin: 18px 0 8px;
  padding-bottom: 3px;
}

.mod-page .mod-nav {
  align-items: center;
  background: var(--post-color);
  border: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  margin: 0 0 12px;
  padding: 6px 10px;
}

.mod-page .mod-nav a {
  font-weight: bold;
}

.mod-page .mod-nav .user {
  float: none;
  white-space: nowrap;
}

.mod-page .mod-subnav {
  margin: 0 0 12px;
  text-align: center;
}

.mod-page .mod-board-nav {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  line-height: 1.7;
  margin: 0 0 8px;
  padding: 5px 10px;
  text-align: center;
}

.mod-page fieldset {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  margin: 0 0 14px;
  min-width: 0;
  padding: 8px 12px 10px;
}

.mod-page legend {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  color: var(--subject-color);
  font-weight: bold;
  padding: 2px 8px;
}

.mod-page fieldset > ul {
  line-height: 1.7;
  margin: 0;
  padding-left: 18px;
}

.mod-page .mod-hint,
.mod-page .mod-unit {
  font-size: 11px;
  opacity: 0.75;
}

.mod-page p.mod-hint {
  margin: 2px 0 6px;
}

.mod-page .mod-error {
  border: 1px solid #c33;
  color: #f44;
  font-weight: bold;
  margin: 0 0 8px;
  padding: 4px 8px;
}

.mod-page .mod-actions {
  margin-top: 10px;
  text-align: center;
}

.mod-page .mod-actions button {
  min-width: 110px;
}

/* Label | field rows, labels right-aligned against the fields. */
.mod-page .mod-settings {
  border-collapse: collapse;
  width: 100%;
}

.mod-page .mod-settings th {
  font-weight: bold;
  padding: 5px 12px 5px 0;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  width: 35%;
}

.mod-page .mod-settings td {
  padding: 5px 0;
  vertical-align: middle;
}

.mod-page .mod-settings tr + tr > * {
  border-top: 1px dashed var(--border-color);
}

.mod-page .mod-settings input[type="text"],
.mod-page .mod-settings input:not([type]),
.mod-page .mod-settings input[type="password"] {
  box-sizing: border-box;
  max-width: 100%;
  width: 260px;
}

.mod-page .mod-settings input[type="number"] {
  width: 80px;
}

.mod-page .mod-settings input.mod-uri {
  width: 110px;
}

.mod-page .mod-checks label {
  display: block;
  padding: 1px 0;
}

.mod-page .mod-inline-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0 8px;
}

.mod-page .mod-wide {
  box-sizing: border-box;
  width: 100%;
}

.mod-page .mod-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  list-style: none;
  padding: 0;
}

.mod-page .mod-emergency {
  margin: 8px 0 0;
}

.mod-page .mod-link-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
}

.mod-page .mod-link-columns ul {
  line-height: 1.7;
  margin: 0;
  padding-left: 18px;
}

/* Data tables: a header row in a tint of the post colour, rows that light up. */
.mod-page .mod-table,
.mod-page .logs-table {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  border-collapse: collapse;
  width: 100%;
}

.mod-page .mod-table th,
.mod-page .logs-table th {
  background: rgba(128, 128, 128, 0.14);
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
  padding: 4px 6px;
  text-align: left;
}

.mod-page .mod-table td,
.mod-page .logs-table td {
  padding: 4px 6px;
}

.mod-page .mod-table tr:hover > td,
.mod-page .logs-table tr:hover > td {
  background: rgba(128, 128, 128, 0.07);
}

.mod-page fieldset .mod-table {
  margin-top: 4px;
}

.mod-page .mod-cell-action {
  text-align: right;
  width: 1%;
}

/* Bans list */
.mod-page .mod-board-filter {
  justify-content: center;
  margin: 0 0 12px;
}

.mod-page .mod-bans td {
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}

.mod-page .mod-ban-target {
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.mod-page .mod-ban-links {
  font-size: 11px;
  margin-top: 2px;
}

.mod-page .mod-ban-reason {
  overflow-wrap: anywhere;
}

.mod-page .mod-nowrap {
  white-space: nowrap;
}

.mod-page .mod-tag {
  border: 1px solid #d90;
  color: #d90;
  font-size: 10px;
  font-weight: bold;
  padding: 0 3px;
  text-transform: uppercase;
}

/* Captcha page */
.mod-page .mod-intro {
  margin: 0 auto 14px;
  max-width: 80ch;
  text-align: center;
}

.mod-page .mod-settings input.mod-wide {
  width: 100%;
}

.mod-page .mod-block {
  display: block;
  margin-top: 4px;
}

.mod-page textarea.mod-code {
  font-family: monospace;
  font-size: 12px;
  resize: vertical;
}

.mod-page .captcha-images td {
  border-top: 1px solid var(--border-color);
}

/* Latest posts: the posts run from the left edge of the page, as on vichan, rather
   than in the centred column the other mod pages use. */
.mod-page:has(> .mod-latest) {
  max-width: none;
}

.mod-page .mod-latest-search {
  justify-content: center;
  margin-bottom: 12px;
}

.mod-page .latest-entry {
  margin: 0 0 12px;
  overflow: visible;
}

.mod-page .latest-board {
  border-top: 1px solid var(--border-color);
  margin: 0 0 2px;
  padding-top: 6px;
}

.mod-page .latest-board a {
  font-weight: bold;
  text-decoration: underline;
}

/* Login: one small box in the middle of the page. */
.mod-login {
  margin: 30px auto 0;
  max-width: 380px;
}

.mod-login .mod-settings th {
  width: 30%;
}

@media (max-width: 600px) {
  .mod-page .mod-settings th,
  .mod-page .mod-settings td {
    display: block;
    text-align: left;
    width: auto;
  }

  .mod-page .mod-settings th {
    padding-bottom: 0;
  }

  .mod-page .mod-settings tr + tr > td {
    border-top: none;
  }

  .mod-page .mod-nav {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Phones and narrow windows
   Layout only: colours, borders and fonts stay the theme's. The 768px line is the
   one the default theme already splits on (its page list is a fixed bar above it).
   Some rules need !important because a script sets the same property inline: the
   quick reply's left/top (qr.js), the watcher's transform (thread-watcher.js).
   --------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  body {
    padding: 0 4px;
  }

  /* Header: the board bar wraps, centred, onto as many lines as it needs. A fixed bar
     of unknown height would cover the links under it, so here it sits at the top of
     the page instead of following the scroll. The links under it are centred too. */
  .board-list {
    margin: -5px -4px 0;
    position: static;
    text-align: center;
  }

  .navtopright {
    float: none;
    line-height: 1.9;
    margin-top: 6px;
    text-align: center;
  }

  /* Its own row, centred above the links; the input keeps its normal width. */
  .header-search-form {
    display: flex;
    margin: 0 auto 2px;
    width: fit-content;
  }

  .banner-img {
    height: auto;
    max-width: 100%;
  }

  hr.above-post-form {
    width: 100%;
  }

  /* Post form */
  #postformTable {
    max-width: 100%;
  }

  #postformTable .post-block {
    width: 1%;
  }

  #postformTable textarea#message {
    min-width: 0;
  }

  #emo,
  #emotebox {
    max-width: 100%;
    width: auto;
  }

  #emo[open] {
    height: auto;
    max-height: 200px;
  }

  /* Threads and posts: full width, with the side gutters taken back. */
  .thread {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The OP is inline on desktop, so its floated picture hangs down beside the first
     replies. Here the OP holds its own picture and the replies start below it. */
  .op-container,
  .op {
    display: flow-root;
  }

  .thread > .replies,
  .thread > .summary,
  .thread > .additional-replies {
    clear: both;
  }

  .side-arrows {
    display: none;
  }

  .reply,
  .post-container > div.post.reply {
    box-sizing: border-box;
    display: flow-root;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .post-info,
  .thread-header {
    box-sizing: border-box;
  }

  .image-container {
    margin: 3px 10px 5px 0;
  }

  .thread-image:not(.expanded) {
    height: auto;
    max-width: 40vw;
  }

  .reply-image:not(.expanded) {
    max-width: 30vw;
  }

  .thread-image.expanded,
  .reply-image.expanded,
  .img-expanded {
    height: auto;
    max-height: none;
  }

  .image-container:has(.expanded) {
    float: none;
    margin-right: 0;
  }

  .file-info,
  .file-text {
    margin-left: 0;
    max-width: 100%;
  }

  .file-link {
    max-width: 45vw;
  }

  .poll-wrapper {
    margin: 0 0 12px;
  }

  .poll-container {
    min-width: 0;
  }

  /* Page list and the forms at the bottom of a board or thread */
  .pagination {
    margin: 5px 0;
    max-width: 100%;
  }

  .pagelist {
    flex-wrap: wrap;
    float: none;
    justify-content: center;
    row-gap: 4px;
  }

  .pagelist .catalog-link {
    margin-left: 4px;
    padding-left: 8px;
  }

  #delete-form {
    float: none !important;
    margin: 10px 0 0 !important;
    text-align: right;
  }

  .footer-board-list,
  .footer-nav-tools {
    text-align: center;
  }

  .footer-board-list {
    word-spacing: 2px;
  }

  /* Catalog: a grid of cards that fills the width, two or more to a row. */
  .catalog-search {
    align-items: center;
    flex-direction: column;
    gap: 6px;
  }

  .catalog-sort {
    flex-wrap: wrap;
    gap: 8px 15px;
    justify-content: center;
    margin-bottom: 0;
  }

  .catalog-threads {
    gap: 8px;
    padding: 5px 0;
  }

  .catalog-thread {
    box-sizing: border-box;
    width: 150px;
  }

  .catalog-thread.size-large {
    box-sizing: border-box;
    width: 170px;
  }

  .catalog-content {
    width: 100%;
  }

  .catalog-image,
  .size-large .catalog-image {
    max-width: 100%;
  }

  /* Floating panels become sheets across the bottom (quick reply, post editor) or
     the top (thread watcher) of the screen. Dragging is a mouse thing, so the
     handles stop looking draggable. */
  #quickReply,
  #editPost {
    border-bottom: none !important;
    bottom: 0;
    left: 0 !important;
    max-height: 75vh;
    max-height: 75dvh;
    min-height: 0;
    overflow-y: auto;
    right: 0 !important;
    top: auto !important;
    width: 100%;
    z-index: 1001;
  }

  #quickReplyHeader,
  #editPostHeader {
    cursor: default;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .watch-list-modal {
    left: 5px;
    max-height: 60vh;
    right: 5px;
    top: 30px;
    transform: none !important;
    width: auto;
  }

  .watch-list-header {
    cursor: default;
  }

  /* The watcher is part of the page here (thread-watcher.js moves it under the
     banner, above the post form): no frame, just the title and the list on the
     page's own background, the full width of the screen, its list scrolling once
     it is long. */
  .watch-list-modal.watch-list-inline {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 6px 0 0;
    max-height: none;
    max-width: none;
    padding: 0;
    position: static;
    transform: none !important;
    width: 100%;
    z-index: auto;
  }

  /* The title centred, with the close button kept at the right edge. */
  .watch-list-inline .watch-list-header {
    border-bottom: none;
    font-weight: bold;
    justify-content: center;
    padding: 0 24px;
    position: relative;
  }

  .watch-list-inline .close-watch-list {
    position: absolute;
    right: 0;
  }

  .watch-list-inline .watch-list-body {
    max-height: 150px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .watch-list-inline .watch-list-item {
    min-height: 24px;
  }

  .watch-list-inline .remove-watch {
    height: 24px;
    justify-content: center;
    width: 22px;
  }

  .modal-content {
    box-sizing: border-box;
    margin: 20vh auto 0;
    max-width: calc(100% - 20px);
    width: 400px;
  }

  .side-catalog {
    max-width: 85vw;
  }

  .quote-preview {
    max-width: calc(100vw - 16px) !important;
    width: auto;
  }

  /* Text pages, archive and staff pages */
  .box-layout .left-col,
  .box-layout .right-col {
    display: block;
    padding-right: 0;
    width: auto;
  }

  .posts-list {
    width: 100%;
  }

  .archive-table {
    margin: 10px 0;
    width: 100%;
  }

  .archive-col-content {
    max-width: none;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .mod-table,
  .logs-table {
    display: block;
    overflow-x: auto;
  }

  .mod-nav .user {
    float: none;
    display: block;
    margin-top: 4px;
  }
}

/* ---------------------------------------------------------------------------
   Post dialogs: report, ban and delete (`dialogMarkup` in public/js/post-menu.js)
   Floating windows like 4chan X's (and the quick reply's): no backdrop, a slim title
   bar to drag them by, the fields as joined boxes and the buttons bottom right.
   #report-modal etc. is the window itself, shown with `display: block` and placed by
   the script; on a phone it is a sheet across the top of the screen.
   --------------------------------------------------------------------------- */

#delete-modal,
#report-modal,
#mod-ban-modal {
  display: none;
  left: calc(50% - 160px);
  max-width: calc(100vw - 4px);
  position: fixed;
  top: 126px;
  width: 320px;
  z-index: 1000;
}

#mod-ban-modal {
  width: 360px;
}

.post-dialog {
  background: var(--post-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  color: var(--text-color);
  font-size: 12px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  padding: 2px;
}

.post-dialog *,
.post-dialog *::before,
.post-dialog *::after {
  box-sizing: border-box;
}

.post-dialog-header {
  align-items: center;
  cursor: move;
  display: flex;
  gap: 4px;
  padding: 1px 2px 3px;
  user-select: none;
}

.post-dialog-title {
  font-weight: bold;
  white-space: nowrap;
}

.post-dialog-ref {
  flex: 1;
  min-width: 0;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-dialog-close {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  padding: 0 2px;
}

.post-dialog-close:hover {
  color: var(--hover-link-color);
}

.post-dialog-body .error-message {
  margin: 0 0 3px;
}

.post-dialog input[type="text"],
.post-dialog select,
.post-dialog textarea {
  background: var(--input);
  border: 1px solid var(--border-color);
  border-radius: 0;
  color: var(--text-color);
  font: 12px Arial, Helvetica, sans-serif;
  margin: 0;
  max-width: 100%;
  min-width: 0;
  padding: 2px 4px;
  width: 100%;
}

.post-dialog input[type="text"],
.post-dialog select {
  height: 22px;
}

/* Fields without labels (report, delete): stacked boxes sharing their borders. */
.post-dialog-fields {
  display: flex;
  flex-direction: column;
}

.post-dialog-fields > * + * {
  border-top: none !important;
}

.post-dialog textarea {
  display: block;
  height: 90px;
  min-height: 50px;
  resize: vertical;
}

/* Label | field rows (ban), the boxes joined down the right. */
.post-dialog-form {
  align-items: center;
  display: grid;
  gap: 0 6px;
  grid-template-columns: max-content minmax(0, 1fr);
}

.post-dialog-form > input + label + input,
.post-dialog-form > input + label + select {
  border-top: none;
}

.post-dialog-form > label {
  font-weight: bold;
}

.post-dialog-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  grid-column: 1 / -1;
  padding-top: 3px;
}

.post-dialog-checks label {
  align-items: center;
  display: inline-flex;
  gap: 3px;
  white-space: nowrap;
}

.post-dialog-checks input {
  margin: 0;
}

.post-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-end;
  padding-top: 3px;
}

.post-dialog-footer button {
  cursor: pointer;
  font-size: 12px;
  padding: 1px 8px;
}

@media (max-width: 480px) {
  #delete-modal,
  #report-modal,
  #mod-ban-modal {
    left: 0 !important;
    max-width: none;
    top: 0 !important;
    width: 100%;
  }

  .post-dialog {
    max-height: 75vh;
    max-height: 75dvh;
  }

  .post-dialog-header {
    cursor: default;
  }

  .post-dialog-footer button {
    flex: 1;
    padding: 6px 10px;
  }
}

/* ---------------------------------------------------------------------------
   Boxes (.box-layout / .box-outer: news, ban, warning, text pages)
   Nothing inside a box may push it wider than the screen: long words wrap, and
   images, videos, tables and pre blocks shrink or scroll inside it.
   --------------------------------------------------------------------------- */

/* The header's top-right links float, so a box would start beside them and run under
   them; it starts below them instead. The gap is padding, as clearing a float swallows
   a top margin. */
.box-layout {
  box-sizing: border-box;
  clear: both;
  margin-top: 0;
  max-width: 750px;
  padding-top: 15px;
  width: 100%;
}

.box-outer {
  box-sizing: border-box;
  max-width: 100%;
}

.boxbar h2 {
  overflow-wrap: anywhere;
  padding-right: 0.5em;
}

.boxcontent {
  overflow-wrap: anywhere;
}

.boxcontent img,
.boxcontent video,
.boxcontent iframe {
  height: auto;
  max-width: 100%;
}

.boxcontent pre,
.boxcontent table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* News (views/pages/news.ejs) */
.news-title {
  overflow-wrap: anywhere;
}

.news-content {
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.news-content:last-child {
  margin-bottom: 0;
}

/* Ban page (views/banned.ejs) */
.ban-image {
  float: right;
  height: auto;
  margin: 0 0 8px 10px;
  max-width: 50%;
}

.appeal-form {
  border-top: 1px solid var(--border-alt);
  clear: both;
  padding-top: 8px;
}

.appeal-form h3 {
  margin: 0 0 4px;
}

.appeal-form p {
  margin-bottom: 8px;
}

.appeal-text {
  background: var(--input);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  color: var(--text-color);
  display: block;
  font: 10pt Arial, Helvetica, sans-serif;
  margin-bottom: 6px;
  max-width: 100%;
  padding: 4px;
  resize: vertical;
  width: 100%;
}

.appeal-status {
  border: 1px solid var(--border-alt);
  clear: both;
  padding: 6px 8px;
}

.appeal-status.pending {
  border-color: #c90;
}

.appeal-status.denied {
  border-color: #c00;
  color: #c00;
}

/* Confirmation page after submitting a ban appeal (views/appeal-submitted.ejs). */
.appeal-done {
  box-sizing: border-box;
  color: var(--text-color);
  margin: 40px auto 20px;
  max-width: 480px;
  padding: 28px 28px 24px;
  text-align: center;
}

.appeal-done h1 {
  color: var(--board-title-color);
  font-size: 22px;
  margin: 0 0 8px;
}

.appeal-done-message {
  font-size: 11pt;
  margin: 0;
}

.appeal-done-home {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .box-layout {
    margin-left: 0;
    margin-right: 0;
  }

  .boxbar h2 {
    font-size: 116%;
  }

  .boxcontent {
    padding: 0.4em 0.5em 0.6em;
  }

  /* The image goes above the text instead of beside it. */
  .ban-image {
    display: block;
    float: none;
    margin: 0 auto 8px;
    max-width: 100%;
  }

  .news-title {
    font-size: 108%;
  }

  .appeal-done {
    margin: 20px 10px;
    padding: 20px 16px;
  }

  .appeal-form button,
  .box-outer form > button[type="submit"] {
    padding: 6px 14px;
  }
}

/* ---------------------------------------------------------------------------
   Fortunes (`be/lib/fortunes.js`): a line under the post body. Every fortune has the
   shared `fortune` class plus one naming it; posts from before the shared class
   only have the latter. Colours are mid-tones so they read on light and dark themes.
   Hidden by the "Hide fortunes" setting (public/js/settings.js).
   --------------------------------------------------------------------------- */

.fortune {
  display: block;
  font-weight: bold;
  margin-top: 10px;
  overflow-wrap: anywhere;
}

.excellentLuck { color: #fd4d32; }
.goodLuck { color: #e7890c; }
.averageLuck { color: #bac200; }
.badLuck { color: #7fec11; }
.tellYouNow { color: #2a56fb; }
.outlookGood { color: #6023f8; }
.veryBadLuck { color: #9d05da; }
.replyHazy { color: #f51c6a; }
.goodNewsMail { color: #43fd3b; } 
.mikudayo { color: #00cbb0; }
.roadRoller { color: #ebcc34; }
.fortWeird { color: #16f174; }
.fortKita { color: #00cbb0; }
.godlyLuck { color: #d302a7;}
.voicebankUpdate { color: #009614;}

@keyframes fortuneRainbow {
  to { background-position: 200% center; }
}

.goodThings {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33dd33, #00ccff, #6644ff, #ee00ee, #ff0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fortuneRainbow 3s linear infinite;
  display: table;
}

@media (prefers-reduced-motion: reduce) {
  .goodThings {
    animation: none;
  }
}

/* The rotating banner under the announcement (views/partials/rotating-banner.ejs). */
.rotating-banner {
  margin: 6px 0;
  text-align: center;
}

.rotating-banner img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* Global filters screen: word filters rewrite a post, moderation filters refuse it (and may
   ban). The second table carries more per row, so its notes are quiet and the condition is
   monospaced. */
.filter-hint {
  margin: 8px 0;
}

.filter-message,
.filter-note,
.filter-source {
  font-size: 90%;
  margin-top: 2px;
}

.filter-note {
  color: #a33;
}

.filter-source {
  opacity: .7;
}

.filter-scope {
  font-size: 90%;
  opacity: .8;
}

#mod-content .mod-table code {  
  word-break: break-all;
}