/* base stylesheet started from vichans yotsuba b look */
/* colours come from theme variables with the default themes values as fallbacks theme files only override the variables */
/* the page background goes on html so scrolling past the top or bottom shows the theme colour and not white */
html {
  background-color: var(--theme-body-bg-color, #EEF2FF);
  background-image: var(--theme-body-bg-image, url('fade-blue.png'));
  background-repeat: repeat-x;
  background-position: 50% 0%;
}

body {
  color: var(--theme-body-color, black);
  font-family: var(--theme-body-font, arial,helvetica,sans-serif);
  font-size: 10pt;
  margin: 0 4px;
  padding-left: 4px;
  padding-right: 4px;
}

.hidden {
  display: none;
}

a,a:visited {
  text-decoration: underline;
  color: var(--theme-link-color, #34345C);
}

a:hover,.intro a.post_no:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

a.post_no {
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.intro a.post_no {
  color: inherit;
}

.intro a.post_no,p.intro a.email,p.intro a.post_anchor {
  margin: 0;
}

/* the name is a mailto link when an email was given */
p.intro a.email {
  text-decoration: none;
}

.intro a.email span.name {
  color: var(--theme-link-color, #34345C);
}

.intro a.email:hover span.name {
  color: var(--theme-link-hover-color, #ff0000);
}

.intro label {
  display: inline;
}

.intro time,p.intro a.ip-link,p.intro a.capcode {
  direction: ltr;
  unicode-bidi: embed;
}

h2 {
  color: var(--theme-header-color, #AF0A0F);
  font-size: 11pt;
  margin: 0;
  padding: 0;
}

header {
  margin: 1em 0;
}

h1 {
  font-family: var(--theme-header-font, tahoma);
  letter-spacing: -2px;
  font-size: 20pt;
  margin: 0;
}

header div.subtitle,h1 {
  color: var(--theme-header-color, #AF0A0F);
  text-align: center;
}

header div.subtitle {
  font-size: 8pt;
}

form {
  margin-bottom: 4em;
}

form table {
  margin: auto;
}

form table input {
  height: auto;
}

/* form controls dont inherit text colour by themselves */
input[type="text"],input[type="password"],textarea {
  border: 1px solid var(--theme-input-border, #a9a9a9);
  color: var(--theme-field-text-color, black);
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  word-spacing: normal;
  max-width: 100%;
}

select, option {
  color: var(--theme-field-text-color, black);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--theme-placeholder-color, var(--theme-muted-ui-color, #767676));
}

textarea {
  width: 100%;
}

form table tr td {
  text-align: left;
  margin: 0;
  padding: 0;
}

form table tr th {
  text-align: left;
  padding: 4px;
}

form table tr th {
  background: var(--theme-th-bg, #98E);
}

form table tr td div.center {
  text-align: center;
  float: left;
  padding-left: 3px;
}

form table tr td div input {
  display: block;
  margin: 2px auto 0 auto;
}

form table tr td div label {
  font-size: 10px;
}

.unimportant,.unimportant * {
  font-size: 10px;
}

/* attachments float left so the comment wraps beside them */
/* the column layout centres media that is narrower than its file info line */
.file {
  float: left;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* replies give every p a small top margin which used to be swallowed by the float clearing keep it out so heights stay the same */
div.post .file > p.fileinfo {
  margin-top: 0;
}

/* two or more files a wrapping row instead of floats */
.files.multifile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.files.multifile .file {
  float: none;
  margin-right: 0;
}

.files.multifile .post-image {
  float: none;
}

p.fileinfo {
  display: block;
  margin: 0;
  /* file info sits under the image */
  clear: both;
  font-size: 10px;
  text-align: center;
}

img.banner,img.board_image {
  display: block;
  border: 1px solid var(--theme-input-border, #a9a9a9);
  margin: 12px auto 0 auto;
}

.post-image {
  display: block;
  float: left;
  margin: 5px 20px 10px 20px;
  border: none;
  /* thumbnails are already resized by the server this is just a cap */
  max-width: 255px;
  max-height: 255px;
  width: auto;
  height: auto;
}

.post-audio {
  display: block;
  float: left;
  margin: 5px 20px 10px 20px;
}

/* audio flash and other files show the vichan file pictures audio and flash until clicked */
.post-file-icon {
  display: block;
  float: left;
  margin: 5px 20px 10px 20px;
  border: none;
}

img.post-file-icon[data-role="audio-reveal"] {
  cursor: pointer;
}

/* flash tile swapped for the player on click a load error shows under the picture */
.post-flash-placeholder {
  float: left;
  max-width: 250px;
  margin: 5px 20px 10px 20px;
  font-size: 11px;
  cursor: pointer;
}

.post-flash-placeholder .post-file-icon {
  float: none;
  margin: 0;
}

.post-flash-message:empty {
  display: none;
}

.post-flash {
  float: left;
  margin: 5px 20px 10px 20px;
  font-size: 11px;
}

.post-flash-frame {
  display: block;
  border: 1px solid var(--theme-bevel-dark, #7d8192);
  background: #000;
}

/* expanded image */
.full-image {
  max-width: 98%;
  max-height: none;
}

div.post .post-image {
  padding: 5px;
  margin: 0;
}

/* small inline icons sticky locked flags */
.icon {
  display: inline;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* op deliberately not a float container the replies wrap around its image */
div.post.op {
  margin-right: 20px;
  margin-bottom: 5px;
}

div.post.op hr {
  border-color: var(--theme-op-hr-color, #D9BFB7);
}

.intro {
  margin: 0.5em 0 0 0;
  padding: 0;
}

input.delete {
  float: left;
  margin: 1px 6px 0 0;
}

.intro span.subject {
  color: var(--theme-subject-color, #0F0C5D);
  font-weight: bold;
  /* long unbroken subjects wrap instead of stretching the page */
  overflow-wrap: anywhere;
}

.intro span.name {
  color: var(--theme-name-color, #117743);
  font-weight: bold;
}

.tripcode {
  color: var(--theme-tripcode-color, #000);
  font-weight: bold;
}

.capcode {
  font-weight: normal;
}

/* you label */
.own-post-label {
  margin-left: 4px;
  color: #808080;
  font-weight: normal;
}

.own-post-label-tight {
  margin-left: 0;
}

/* reply backlinks hidden unless show replies is on */
.post-backrefs {
  font-size: 10px;
}

/* bump sage markers after the name */
.email-keyword {
  font-weight: normal;
  color: inherit;
}

.intro a.email span.email-keyword-supersage {
  color: var(--theme-link-hover-color, #ff0000);
}

.intro a {
  margin-left: 8px;
}

/* dice and fortune lines */
.email-dice-roll {
  display: flex;
  align-items: center;
  gap: 4px;
}

.email-dice-icon {
  width: 14px;
  height: 14px;
}

.email-line-spacer {
  min-height: 1em;
}

.email-fortune-line {
  font-weight: bold;
  color: #ff8c00;
}

div.delete {
  float: right;
}

div.post.reply p {
  margin: 0.3em 0 0 0;
}

div.post.reply div.body {
  margin-left: 0;
  margin-top: 0.5em;
  padding-bottom: 0.3em;
}

/* needs three classes to beat the reply background rule */
div.post.op.highlighted,
div.post.reply.highlighted {
  background: var(--theme-post-highlight-bg, #D6BAD0);
}

div.post.reply div.body a {
  color: #D00;
}

div.post {
  padding-left: 20px;
  position: relative;
}

/* staff view wider gutter for the checkbox next to the arrow */
body.mod-view div.post {
  padding-left: 32px;
}

/* post arrow menu */
.post-menu {
  position: absolute;
  left: 6px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.post-moderate-checkbox {
  width: 11px;
  height: 11px;
  margin: 0;
  cursor: pointer;
}

/* draggable staff moderate window */
.moderate-window {
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 1000;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  width: 340px;
}

.moderate-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  background: var(--theme-panel-bg, #D6DAF0);
  cursor: move;
  user-select: none;
}

.moderate-window-title {
  font-size: 10pt;
  font-weight: bold;
}

.moderate-window-body {
  padding: 2px;
}

.moderate-window-body .post-form-options-item {
  display: block;
}

/* thread watcher window */
.watch-window {
  position: fixed;
  top: 100px;
  left: 460px;
  z-index: 1000;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  width: 320px;
}

.babybot-window {
  top: 320px;
  left: 100px;
}

/* phones tool windows are pinned inside the viewport */
@media (max-width: 799px) {
  .moderate-window {
    left: 8px;
    right: 8px;
    width: auto;
    top: 60px;
  }
  .watch-window {
    left: 8px;
    right: 8px;
    width: auto;
    top: 180px;
  }
  .babybot-window {
    top: 300px;
  }
}

.watch-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  background: var(--theme-panel-bg, #D6DAF0);
  cursor: move;
  user-select: none;
}

.watch-window-title {
  font-size: 10pt;
  font-weight: bold;
}

.watch-window-body {
  padding: 2px;
}

.watch-window-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.watch-window-row-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9pt;
}

.watch-window-row-remove,
.watch-window-row-open {
  flex: none;
}

/* media embed window */
.embed-window {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 1000;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  width: 320px;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  min-width: 240px;
  min-height: 160px;
  max-width: 90vw;
  max-height: 90vh;
}

.embed-window-titlebar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  background: var(--theme-panel-bg, #D6DAF0);
  cursor: move;
  user-select: none;
}

.embed-window-title {
  font-size: 10pt;
  font-weight: bold;
}

.embed-window-body {
  padding: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.embed-window-item {
  flex: 1 1 auto;
  min-height: 120px;
  margin-bottom: 8px;
}

.embed-window-item:last-child {
  margin-bottom: 0;
}

.embed-window-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* display flex above would beat the plain hidden rule */
.embed-window.hidden {
  display: none;
}

@media (max-width: 799px) {
  .embed-window {
    left: 8px;
    right: 8px;
    width: auto;
    top: 240px;
  }
}

/* rows inside the moderate window */
.moderate-window-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.moderate-window-row .post-form-options-item {
  margin: 0;
}

.moderate-window-row-select {
  flex: 1;
  margin-left: auto;
}

.moderate-window-row > .custom-select {
  flex: 1;
  margin-left: auto;
}

.moderate-ban-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 8px 18px;
}

.moderate-ban-fields > select,
.moderate-ban-fields > .custom-select,
.moderate-ban-fields > .post-form-options-item {
  margin: 0;
}

.moderate-ban-reason-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.moderate-ban-reason-row > .custom-select {
  flex-shrink: 0;
}

.moderate-ban-reason-row > .moderate-ban-text {
  flex: 1;
  min-width: 0;
}

.moderate-ban-text[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 4px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

/* arrow position next to the name line tuned by hand for op and reply */
.post.op .intro {
  margin-top: 0;
}

.post.op .post-menu {
  top: 4px;
}

.post.reply .post-menu {
  top: 8px;
}

.post-menu-toggle {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 10px;
  color: var(--theme-muted-ui-color, #89A);
  cursor: pointer;
  /* arrow points down while the menu is open */
  transform-origin: center;
}

.post-menu-toggle:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

.post-menu-toggle[aria-expanded="true"] {
  transform: rotate(90deg);
}

/* ip cookie id badges staff */
.ip-id-badge,
.cookie-id-badge {
  display: inline-block;
  padding: 0 3px;
  margin-right: 2px;
  font-size: 9pt;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
}

.ip-id-badge:hover,
.cookie-id-badge:hover {
  filter: brightness(80%);
}

/* the dropdown sits over the quick reply bar so an item near the bottom of the screen can still be clicked */
.post-menu-dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
  z-index: 1001;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 2px;
  white-space: nowrap;
}

.post-menu-dropdown.hidden {
  display: none;
}

.post-menu-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-panel-bg, #D6DAF0);
  border: none;
  padding: 3px 8px;
  font: inherit;
  text-align: left;
  color: var(--theme-panel-text-color, #2E303D);
  cursor: pointer;
}

.post-menu-item:hover {
  background: var(--theme-menu-item-hover-bg, #c3c9e6);
}

/* filtered state of the hide item */
.post-menu-item:disabled,
.post-menu-item:disabled:hover {
  background: var(--theme-panel-bg, #D6DAF0);
  color: var(--theme-disabled-text-color, #767a85);
  cursor: not-allowed;
}

/* self moderation items only show once the thread is unlocked */
.thread:not([data-selfmod-unlocked]) .selfmod-unlocked-only {
  display: none;
}

.thread[data-selfmod-unlocked] .selfmod-locked-only {
  display: none;
}

/* filter submenu opens on hover */
.post-menu-item-parent {
  position: relative;
  cursor: default;
}

.post-menu-submenu {
  display: none;
  margin-left: 0;
}

.post-menu-item-parent:hover > .post-menu-submenu {
  display: block;
}

/* no menu inside hover previews */
#postref-preview .post-menu {
  display: none;
}

/* hidden posts collapse to their name line */
.post.post-hidden .body,
.post.post-hidden .files,
.post.post-hidden .omitted,
.post.post-hidden .controls,
.post.post-hidden .op-reply-btn {
  display: none;
}

/* display contents so the preview replies lay out as if they were direct children of the thread */
.thread-replies-preview {
  display: contents;
}

/* display contents above would beat the plain hidden rule */
.thread-replies-preview.hidden {
  display: none;
}

.thread-replies-preview .post.reply {
  vertical-align: top;
}

/* hiding an op hides its reply preview too */
.post.op.post-hidden + .thread-replies-preview {
  display: none;
}

/* flash when a thread changes live */
div.post div.body {
  word-wrap: break-word;
  white-space: pre-wrap;
  margin-top: 0.4em;
}

/* comment starts level with the image */
div.post.op .files + div.body {
  margin-top: 0;
}

/* board index only clear the reply button that sits in the name line */
#board-threads div.post.op > div.body {
  margin-top: 0.9em;
}

#board-threads div.post.op > .files + div.body {
  margin-top: 0.5em;
}

div.post.reply {
  background: var(--theme-post-reply-bg, #D6DAF0);
  margin: 0.2em 4px 0.2em 1px;
  padding: 0.2em 1em 0.5em 1.5em;
  border-width: 1px;
  border-style: none solid solid none;
  border-color: var(--theme-post-reply-border, #B7C5D9);
  /* replies shrink to fit their content */
  display: inline-block;
  max-width: 94%!important;
}

/* on a phone the padding counts inside that cap so a wide reply never runs past the screen */
@media (max-width: 799px) {
  div.post.reply {
    box-sizing: border-box;
  }
}

body.mod-view div.post.reply {
  padding-left: 2.4em;
}

span.trip {
  color: #228854;
}

span.toolong {
  display: block;
  margin-top: 15px;
}

/* homepage */
body.homepage .site-logo {
  text-align: center;
  margin: 8px 0;
  /* the box is reserved up front so nothing moves when the logo loads or is swapped */
  height: 100px;
  line-height: 0;
}

/* every logo is shown in the same 100 by 100 box whatever its real size */
body.homepage .site-logo-img {
  width: 100px;
  height: 100px;
  /* this one line decides how a non square logo fills the box contain keeps its shape fill stretches cover crops */
  object-fit: contain;
}

body.homepage .site-logo-img[data-logos] {
  cursor: pointer;
}

body.homepage .box-wrap {
  max-width: 670px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.homepage .box {
  background: white;
  border: 1px solid var(--theme-box-border, #98E);
  width: 330px;
  margin: 8px 0;
  padding: 0;
  /* so full width includes the border */
  box-sizing: border-box;
}

body.homepage .box.middle {
  background: var(--theme-box-bg, #ffffff);
  color: var(--theme-box-color, #000000);
  border: 1px solid var(--theme-box-border, #000000);
  width: 100%;
}

body.homepage .box.middle table {
  border-collapse: collapse;
}

body.homepage .box ul {
  padding: 2px 15px;
  list-style: none;
}

body.homepage .about-body {
  text-align: center;
  margin-top: 8px;
}

/* rules page */
body.homepage.rules-page .about-body {
  text-align: left;
}

.rules-bullet-line {
  font-size: 12px;
}

.rules-bullet-line::before {
  content: "• ";
}

.rules-bullet-line.rules-indent-1::before,
.rules-bullet-line.rules-indent-2::before,
.rules-bullet-line.rules-indent-3::before,
.rules-bullet-line.rules-indent-4::before,
.rules-bullet-line.rules-indent-5::before,
.rules-bullet-line.rules-indent-6::before {
  content: "◦ ";
}

.rules-numbered-line {
  font-size: 10pt;
}

.rules-blank-line {
  height: 1em;
}

.rules-bold {
  font-weight: bold;
  font-size: 1.15em;
}

/* tab indents */
.rules-indent-1 { margin-left: 1.5em; }
.rules-indent-2 { margin-left: 3em; }
.rules-indent-3 { margin-left: 4.5em; }
.rules-indent-4 { margin-left: 6em; }
.rules-indent-5 { margin-left: 7.5em; }
.rules-indent-6 { margin-left: 9em; }

body.homepage .box h2 {
  margin: 0;
  padding: 3px 7px;
  font-size: 12pt;
  background: #98E;
  color: black;
}

body.homepage .box.middle h2 {
  font-size: var(--theme-box-header-font-size, 12pt);
  font-style: var(--theme-box-header-font-style, normal);
  background: var(--theme-box-middle-header-bg, #98E);
  color: var(--theme-box-header-color, black);
}

body.homepage .box-body {
  padding: 6px 10px;
}

body.homepage .box-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.homepage .box-row > .box,
body.homepage .box-row > .box-column {
  flex: 1 1 300px;
}

body.homepage .box-column {
  display: flex;
  flex-direction: column;
}

body.homepage .box.left {
  background: var(--theme-box-left-bg, #efe);
  color: var(--theme-box-left-color, #060);
  border: 1px solid var(--theme-box-left-border, #060);
  float: left;
}

body.homepage .box.left h2 {
  background: var(--theme-box-left-header-bg, #9C6);
  color: var(--theme-box-left-header-color, #060);
  font-size: 16px;
}

body.homepage .box.right {
  background: var(--theme-box-right-bg, #eef);
  color: var(--theme-box-right-color, #006);
  border: 1px solid var(--theme-box-right-border, #006);
  float: right;
}

body.homepage .box.right h2 {
  background: var(--theme-box-right-header-bg, #59A);
  color: var(--theme-box-right-header-color, white);
  font-size: 16px;
}

/* phones boxes stack full width */
@media (max-width: 799px) {
  body.homepage .box.left {
    width: 100%;
  }
}

body.homepage table.news-table {
  width: 100%;
  border-collapse: collapse;
}

body.homepage table.news-table td,
body.homepage table.news-table th {
  padding: 3px 7px;
  text-align: left;
}

body.homepage table.news-table td {
  border-style: solid;
  border-width: 1px 0;
  border-color: var(--theme-hr-color, #B7C5D9);
}

body.homepage table.news-table tr:first-child td,
body.homepage table.news-table tr:nth-child(2) td {
  border-top: none;
}

/* board announcement */
.announcement {
  white-space: pre-wrap;
}

.board-announcement-box {
  max-width: 500px;
  margin: 8px auto;
  background: var(--theme-box-bg, #ffffff);
  color: var(--theme-box-color, #000000);
  border: 1px solid var(--theme-box-border, #000000);
}

.board-announcement-box h2 {
  margin: 0;
  padding: 3px 7px;
  font-size: 12pt;
  background: var(--theme-th-bg, #98E);
  color: var(--theme-th-text-color, black);
}

.board-announcement-box p.announcement {
  margin: 0;
  padding: 6px 10px;
}

.board-locked-notice {
  text-align: center;
  margin: 10px auto;
}

.board-locked-notice .icon {
  margin-right: 4px;
}

/* staff pms and notes */
.pm-view-box {
  max-width: 700px;
}

.pm-view-body {
  padding: 10px;
}

.pm-body-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.pm-body-list li {
  word-break: break-word;
}

.pm-body-list .rules-bullet-line,
.pm-body-list .rules-numbered-line {
  font-size: 1em;
}

.pm-view-back {
  max-width: 700px;
  margin: 8px auto;
}

.staff-back-link,
.staff-back-link:visited {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 3px 5px;
  color: var(--theme-panel-text-color, #2E303D);
  text-decoration: none;
}

.staff-back-link:hover,
.staff-back-link:active {
  background: var(--theme-panel-bg, #D6DAF0);
}

.pm-unread-badge {
  display: inline-block;
  background: var(--theme-link-hover-color, #ff0000);
  color: #fff;
  font-size: 9pt;
  font-weight: bold;
  padding: 1px 6px;
}

.ip-note-textarea {
  display: block;
  width: 480px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  font: inherit;
  padding: 4px 6px;
  resize: vertical;
}

.ip-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}

.staff-audit-link {
  margin: 4px 0;
}

.staff-audit-link a,
.staff-audit-link a:visited {
  text-decoration: none;
  color: var(--theme-panel-text-color, #2E303D);
}

/* board banner */
.board-banner {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 8px auto;
}
.board-banner-empty {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 3 / 1;
  box-sizing: border-box;
  border: 1px solid var(--theme-input-border, #a9a9a9);
}

/* 404 page */
.not-found-return {
  text-align: center;
}

.not-found-return .thread-links {
  float: none;
  display: inline-block;
}

body.homepage table.board-table {
  width: 100%;
  border-collapse: collapse;
}

body.homepage table.board-table th,
body.homepage table.board-table td {
  padding: 3px 7px;
  text-align: left;
}

body.homepage table.board-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--theme-hr-color, #b7c5d9);
}

body.homepage table.board-table th {
  background: var(--theme-box-middle-header-bg, #98E);
  color: var(--theme-box-header-color, black);
  font-size: var(--theme-box-header-font-size, 12pt);
  font-style: var(--theme-box-header-font-style, normal);
}

/* narrow phones get tighter cells and long names may wrap so the board list never runs off the right edge */
@media (max-width: 480px) {
  body.homepage table.board-table th,
  body.homepage table.board-table td {
    padding: 3px 4px;
  }

  body.homepage table.board-table td {
    overflow-wrap: anywhere;
  }
}

body.homepage ul.latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.homepage ul.latest-posts li {
  margin-bottom: 0.3em;
}

body.homepage ul.recent-images {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.homepage ul.recent-images li {
  margin: 0 0 8px 0;
}

body.homepage ul.recent-images .post-image {
  max-width: 220px;
  max-height: 220px;
  float: none;
  margin: 0;
}

/* top bottom nav */
div.boardlist {
  margin-top: 3px;
  color: var(--theme-muted-ui-color, #89A);
  font-size: 9pt;
  /* holds its own floated options link so a wrapped second line never pushes the logo or banner sideways */
  display: flow-root;
}

div.boardlist a {
  text-decoration: none;
}

.options-nav-link {
  float: right;
}

@media (min-width: 800px) {
  div.boardlist:not(.bottom) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    z-index: 30;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    border-bottom: 1px solid;
    background-color: var(--theme-navbar-bg, #D6DAF0);
  }

  body {
    padding-top: 30px;
  }
}

/* staff tables */
table.modlog {
  margin: auto;
  width: 100%;
  border-collapse: collapse;
}

table.modlog tr td {
  text-align: left;
  margin: 0;
  padding: 3px 7px;
}

table.modlog tr th {
  text-align: left;
  padding: 3px 7px;
  white-space: nowrap;
  background: var(--theme-th-bg, #98E);
  font-size: 12pt;
}

table.staff-table {
  border: 1px solid var(--theme-box-border, #000000);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--theme-box-bg, #ffffff);
}

.staff-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--theme-hr-color, #b7c5d9);
}

/* public bans page */
/* the columns keep their share of the width and a long unbroken reason or link wraps instead of widening the page */
.bans-page-table {
  table-layout: fixed;
}

.bans-page-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bans-page-table th:nth-child(1),
.bans-page-table td:nth-child(1) {
  width: 50%;
}

.bans-page-table th:nth-child(2),
.bans-page-table td:nth-child(2) {
  width: 20%;
}

.bans-page-table th:nth-child(3),
.bans-page-table td:nth-child(3) {
  width: 30%;
}

.bans-page-intro {
  padding: 6px 10px;
}

.bans-page-box {
  border: 1px solid var(--theme-box-border, #000);
}

div.ban {
  background: var(--theme-box-bg, white);
  border: 1px solid var(--theme-box-border, #000);
  max-width: 700px;
  margin: 30px auto;
}

div.ban p, div.ban h2 {
  padding: 3px 7px;
}

div.ban h2 {
  background: var(--theme-th-bg, #98E);
  color: var(--theme-th-text-color, black);
  font-size: 12pt;
}

div.ban p {
  font-size: 12px;
  margin-bottom: 12px;
}

div.ban p.reason {
  font-weight: bold;
}

/* ban notice page and appeal form */
.banned-post-quote {
  margin: 0 7px 12px;
  padding: 4px 7px;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ban-appeal {
  margin: 0 7px 12px;
}

.ban-appeal-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 90px;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
  resize: vertical;
}

.ban-appeal-textarea:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.ban-appeal-submit-row {
  margin-top: 8px;
  text-align: center;
}

span.omitted {
  display: block;
  margin-top: 1em;
  color: var(--theme-muted-ui-color, #707070);
}

/* clear the floats inside a thread */
.thread::after {
  content: "";
  display: block;
  clear: left;
}

span.controls {
  float: right;
  margin: 0;
  padding: 0;
  font-size: 80%;
}

span.controls.op {
  float: none;
  margin-left: 10px;
}

span.controls a {
  margin: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--theme-hr-color, #B7C5D9);
  height: 0;
  clear: left;
}

div.top_notice {
  text-align: center;
  margin: 5px auto;
}

div.blotter {
  color: var(--theme-error-color, red);
  font-weight: bold;
  text-align: center;
}

div.pages {
  color: var(--theme-muted-ui-color, #89A);
  background: var(--theme-panel-bg, #D6DAF0);
  display: block;
  padding: 8px;
  margin: 8px 0 4px 0;
  border-right: 1px solid var(--theme-hr-color, #B7C5D9);
  border-bottom: 1px solid var(--theme-hr-color, #B7C5D9);
}

pre {
  margin: 0;
}

/* catalog grid of fixed size tiles */
.theme-catalog #Grid {
  display: grid;
  /* auto fill with a fixed column width keeps tiles the same size at any window width */
  grid-template-columns: repeat(auto-fill, 180px);
  justify-content: center;
  gap: 12px;
}

div.mix {
  display: block;
}

.theme-catalog div.thread {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-weight: normal;
  width: 180px;
  height: 304px;
  padding: 8px;
  overflow: hidden;
  position: relative;
  font-size: 11px;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  box-sizing: border-box;
}

.theme-catalog div.thread strong {
  display: block;
  flex: none;
}

.theme-catalog div.threads {
  text-align: center;
}

.theme-catalog div.thread:hover {
  background: var(--theme-field-bg, #EEF2FF);
}

.theme-catalog div.thread::after {
  content: none;
}

/* thumbnail */
.theme-catalog .thread-image {
  display: block;
  flex: none;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 220px;
  margin: 0 auto 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.theme-catalog div.replies {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.theme-catalog div.replies p.intro {
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* comment preview clipped to the tile */
.catalog-comment {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  word-break: break-word;
  text-align: left;
}

.clearfix {
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
  box-sizing: border-box;
  border: none;
  height: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  zoom: 1;
}

/* button rows above and below threads return catalog top bottom and the counters */
.thread-interactions {
  margin: 8px 0;
  clear: both;
  /* contain the floated buttons */
  overflow: hidden;
}

.thread-links {
  float: left;
  margin-left: 1px;
}

.thread-links > a {
  display: inline-block;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 1px;
  border-style: none solid solid none;
  border-color: var(--theme-hr-color, #B7C5D9);
  padding: 3px 5px;
  margin-right: 0px;
  color: var(--theme-panel-text-color, #2E303D);
  text-decoration: none;
}

.thread-stats {
  float: right;
}

.thread-stat {
  display: inline-block;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 1px;
  border-style: none solid solid none;
  border-color: var(--theme-hr-color, #B7C5D9);
  padding: 3px 5px;
  margin-right: 0px;
  color: var(--theme-panel-text-color, black);
}

.thread-stat strong {
  font-weight: bold;
}

.board-pagination-current {
  font-weight: bold;
}

/* phones counters drop under the buttons */
@media (max-width: 799px) {
  .thread-stats {
    float: none;
    clear: both;
    display: block;
    text-align: left;
    padding-top: 10px;
  }
}

/* reply button and staff m d z buttons in the name line */
p.intro .op-reply-btn {
  display: inline-block;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 1px;
  border-style: none solid solid none;
  border-color: var(--theme-hr-color, #B7C5D9);
  padding: 3px 5px;
  margin-right: 0px;
  color: var(--theme-panel-text-color, #2E303D);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.post.reply .op-reply-btn {
  background: var(--theme-field-bg, #EEF2FF);
}

@media screen and (min-width: 768px) {
  .intro {
    clear: none;
  }

  div.post div.body {
    clear: none;
  }
}

/* form error banner */
.form-error {
  color: var(--theme-error-color, red);
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
}

/* comment formatting headings quotes spoilers code */
span.heading {
  color: var(--theme-header-color, #AF0A0F);
  font-size: 11pt;
  font-weight: bold;
}

span.heading2 {
  color: #2424ad;
  font-size: 11pt;
  font-weight: bold;
}

span.markup-purple {
  color: #720b98;
  font-weight: bold;
}

span.markup-pink {
  color: rgb(253, 61, 152);
}

/* text between plus pairs is a plain colour like the others */
span.markup-magenta {
  color: #ff00ff;
}

/* size only so bold around it stays bold */
span.markup-12pt {
  font-size: 12pt;
}

span.spoiler {
  background: black;
  color: black;
  padding: 0 1px;
}

span.spoiler:hover {
  color: white;
}

/* everything inside a spoiler is hidden with it whatever colour or glow it has */
span.spoiler:not(:hover) * {
  color: black !important;
  background-image: none !important;
  text-shadow: none !important;
  text-decoration-color: black !important;
}

span.quote {
  color: #789922;
}

span.quote2 {
  color: #f6750b;
}

span.markup-caret {
  color: #6577E6;
}

/* gray line the value comes from the theme since no single gray reads on every background */
span.markup-tilde {
  color: var(--theme-tilde-color, #6b6b6b);
}

/* rainbow a gradient clipped to the letters with a plain colour where that is not supported */
span.markup-rainbow {
  color: #c2255c;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  span.markup-rainbow {
    background-image: var(--theme-rainbow, linear-gradient(90deg, #c2255c, #d9480f, #8a6500, #2b8a3e, #0b7285, #1864ab, #5f3dc4, #c2255c));
    background-size: 14em 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
  }

  /* strike and underline lines would be transparent too */
  span.markup-rainbow,
  span.markup-rainbow s,
  span.markup-rainbow u {
    text-decoration-color: var(--theme-tilde-color, #6b6b6b);
  }
}

/* shake position moves instead of a transform so it stays inline and wraps underlines and colours pass through */
span.markup-shake {
  position: relative;
  animation: markup-shake 0.3s linear infinite;
}

@keyframes markup-shake {
  0% { left: 0; top: 0; }
  20% { left: -1px; top: 1px; }
  40% { left: 1px; top: -1px; }
  60% { left: -1px; top: -1px; }
  80% { left: 1px; top: 1px; }
  100% { left: 0; top: 0; }
}

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

/* stacking the innermost colour effect wins */
/* glows only add a shadow like vichan so a colour inside a glow keeps it */
/* the rainbow has see through letters so a glow behind it would smear */
span.markup-rainbow {
  text-shadow: none;
}

span.glow-red {
  text-shadow: 0px 0px 40px #fe0000, 0px 0px 2px #fe0000;
}

span.glow-green {
  text-shadow: 0px 0px 40px #00fe20, 0px 0px 2px #00fe20;
}

span.glow-yellow {
  text-shadow: 0px 0px 40px #fffb00, 0px 0px 2px #fffb00;
}

span.glow-blue {
  text-shadow: 0px 0px 40px #36d7f7, 0px 0px 2px #36d7f7;
}

/* a glow inside another colour keeps that colour like vichan but is never rainbow */
span.markup-rainbow :is(span.glow-red, span.glow-green, span.glow-yellow, span.glow-blue) {
  color: var(--theme-body-color, black);
}

div.post div.body code,
div.replies code {
  font-family: monospace;
}

/* quote links */
a.postref,
a.postref:visited,
a.postref:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

span.postref-dead {
  color: #999;
  text-decoration: line-through;
}

/* references to posts on approved sites open in a new tab */
a.xref,
a.xref:visited,
a.xref:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

/* the hover preview of a remote post */
.xref-post .xref-source {
  font-weight: bold;
}

.xref-post .xref-thumb {
  float: left;
  max-width: 125px;
  max-height: 125px;
  width: auto;
  height: auto;
  margin: 2px 10px 4px 0;
}

.xref-post .xref-spoiler {
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin: 2px 10px 4px 0;
  text-align: center;
  background: var(--theme-hr-color, #B7C5D9);
  color: var(--theme-body-color, #000000);
}

.xref-post .xref-cut {
  opacity: 0.6;
}

a.board-link {
  color: var(--theme-error-color, red);
  text-decoration: underline;
}

/* hover preview for quote links */
#postref-preview {
  display: none;
  position: fixed;
  z-index: 1000;
  max-width: 500px;
  background: var(--theme-field-bg, #EEF2FF);
  border: 1px solid var(--theme-hr-color, #B7C5D9);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* audit log previews can be moused into */
#postref-preview.interactive {
  pointer-events: auto;
}

#postref-preview .post {
  margin: 0;
}

#postref-preview .body {
  clear: both;
}

/* post form */
form.post-form {
  background: var(--theme-postform-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 15px 10px;
  max-width: 100%;
  box-sizing: border-box;
  /* shrink to fit and centre */
  width: fit-content;
  margin: 0 auto 1em auto;
}

.post-form-row {
  margin-bottom: 10px;
}

.post-form-row:last-child {
  margin-bottom: 0;
}

.post-form-row-fixed {
  display: flex;
  gap: 10px;
}

.post-form-field {
  position: relative;
  display: block;
}

.post-form-field-fixed {
  width: 160px;
  flex: none;
}

.post-form-field-full {
  width: 100%;
}

/* recessed field look */
.post-form-field input[type="text"],
.post-form-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.post-form-field input[type="text"]:hover,
.post-form-field textarea:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.post-form-field textarea {
  resize: both;
  /* floor for the resize handle but never wider than a small phone */
  min-width: min(330px, calc(100vw - 60px));
  min-height: 66.6667px;
  /* never wider than the screen */
  max-width: calc(100vw - 60px);
}

/* floating labels shown like placeholders until something is typed */
.post-form-label {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-label-text-color, #5b5f6b);
  pointer-events: none;
  font-size: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
  max-width: calc(100% - 6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-form-field textarea ~ .post-form-label {
  top: 4px;
  transform: none;
}

.post-form-field input:not(:placeholder-shown) ~ .post-form-label,
.post-form-field textarea:not(:placeholder-shown) ~ .post-form-label {
  display: none;
}

.post-form-row-dropzone {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.post-form-dropzone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  padding: 0px 8px;
  text-align: center;
  color: var(--theme-label-text-color, #4b4f5a);
  background: var(--theme-field-bg, #EEF2FF);
  border: 2px dashed var(--theme-hr-color, #b9c3d4);
  cursor: pointer;
}

.post-form-dropzone:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

/* while a file is dragged over it */
.post-form-dropzone.drag-active {
  background: var(--theme-field-bg, #eef2ff);
  border-color: var(--theme-link-color, #34345C);
  color: var(--theme-link-color, #34345C);
}

/* buttons same bevel as the fields turned outwards */
.post-form-submit {
  flex: none;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  box-shadow: none;
  padding: 3px 5px;
  color: var(--theme-panel-text-color, #2E303D);
  font: inherit;
  cursor: pointer;
}

.post-form-submit::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.post-form-submit:hover,
.post-form-submit:active {
  background: var(--theme-panel-bg, #D6DAF0);
}

/* flood cooldown countdown */
.post-form-submit:disabled,
.post-form-submit:disabled:hover {
  background: var(--theme-panel-bg, #D6DAF0);
  color: var(--theme-disabled-text-color, #767a85);
  cursor: not-allowed;
}

/* attachment rows */
.post-form-attachments:not(:empty) {
  margin-top: 6px;
}

.post-form-attachment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 10px 8px;
  margin-top: 4px;
  box-sizing: border-box;
}

.post-form-attachment-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex: none;
  border: none;
  background: var(--theme-field-bg, #eee);
}

.post-form-attachment-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.post-form-attachment-actions {
  flex: none;
  display: flex;
  gap: 15px;
  margin-left: 12px;
}

.post-form-attachment-icon-btn {
  border: none;
  background: none;
  padding: 0;
  cursor: default;
  color: var(--theme-link-color, #333460);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.post-form-attachment-icon-btn:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

/* modals rename file options search staff dialogs all share this */
.edit-file-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* options and search used to sit inside the nav bar and still use its text size and colour
   so they look the same whether or not the sidebar is on */
#options-modal-overlay,
#search-modal-overlay {
  font-size: 9pt;
  color: var(--theme-muted-ui-color, #89A);
}

/* two classes so it beats the display rule above */
.edit-file-modal-overlay.hidden {
  display: none;
}

.edit-file-modal {
  background: var(--theme-box-bg, #ffffff);
  color: var(--theme-box-color, #000000);
  border: 1px solid var(--theme-box-border, #000000);
  width: 360px;
  max-width: 90vw;
}

.edit-file-modal.options-modal {
  width: 560px;
}

/* options scrolls on short screens */
.options-modal .edit-file-modal-body {
  max-height: 80vh;
  overflow-y: auto;
}

/* move edit overlay */
.edit-file-modal.moderate-transfer-modal {
  width: 640px;
}

.moderate-transfer-modal .edit-file-modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.moderate-transfer-heading {
  margin: 0 0 6px;
  font-size: 11pt;
}

.moderate-transfer-section + .moderate-transfer-section {
  margin-top: 14px;
}

.moderate-edit-post {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-bevel-light, #bdc2cf);
}

.moderate-edit-post-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.moderate-edit-post-file {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1px solid var(--theme-bevel-dark, #7d8192);
  cursor: pointer;
  overflow: hidden;
  background: var(--theme-field-bg, #fff);
}

.moderate-edit-post-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moderate-edit-post-file-marked {
  border-color: var(--theme-link-hover-color, #ff0000);
}

.moderate-edit-post-file-marked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 0, 0, 0.45);
}

.moderate-edit-post-comment {
  width: 100%;
  min-height: 60px;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 4px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
  resize: vertical;
}

.moderate-edit-post-idflags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 10pt;
}

.moderate-edit-post-idflags label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-file-modal-titlebar {
  position: relative;
  padding: 3px 7px;
  font-size: 12pt;
  font-weight: bold;
  background: var(--theme-th-bg, #98E);
  color: var(--theme-th-text-color, black);
  text-align: center;
}

.edit-file-modal-close {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.edit-file-modal-body {
  padding: 10px;
  background: var(--theme-panel-bg, #D6DAF0);
}

.edit-file-modal-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10pt;
}

/* options modal rows */
.options-setting-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10pt;
}

.options-setting-row + .options-setting-row {
  margin-top: 8px;
}

.options-postpw-row {
  margin-top: 8px;
}

.options-postpw-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10pt;
}

.options-postpw-input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.options-postpw-input[type="text"]:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

/* a slider drawn like the other beveled controls a sunken track and a raised square handle
   the options volume slider and the image viewer slider both use it */
input[type="range"].beveled-range {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"].beveled-range::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--theme-field-bg, #EEF2FF);
  border: 2px inset var(--theme-box-border, #9093a8);
}

input[type="range"].beveled-range::-moz-range-track {
  height: 6px;
  background: var(--theme-field-bg, #EEF2FF);
  border: 2px inset var(--theme-box-border, #9093a8);
}

input[type="range"].beveled-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 20px;
  margin-top: -8px;
  background: var(--theme-panel-bg, #D6DAF0);
  border: 2px outset var(--theme-box-border, #9093a8);
  border-radius: 0;
}

input[type="range"].beveled-range::-moz-range-thumb {
  width: 10px;
  height: 16px;
  background: var(--theme-panel-bg, #D6DAF0);
  border: 2px outset var(--theme-box-border, #9093a8);
  border-radius: 0;
}

input[type="range"].beveled-range:disabled {
  opacity: 0.5;
  cursor: default;
}

input[type="range"].beveled-range:focus-visible {
  outline: 1px dotted var(--theme-panel-text-color, #2E303D);
  outline-offset: 2px;
}

/* the volume slider in the options window */
.options-postpw-row input[type="range"].beveled-range {
  display: block;
  width: min(260px, 100%);
}

/* login and change password forms */
.mod-form-input[type="text"],
.mod-form-input[type="password"] {
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.mod-form-input[type="text"]:hover,
.mod-form-input[type="password"]:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.mod-form-submit {
  display: block;
  margin: 8px auto 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 1px;
  border-style: none solid solid none;
  border-color: var(--theme-hr-color, #B7C5D9);
  padding: 3px 5px;
  color: var(--theme-panel-text-color, #2E303D);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.mod-login-submit {
  display: block;
  margin: 8px auto 0;
}

.mod-login-form {
  margin-bottom: 0;
}

.mod-auth-link {
  outline: none;
  font-size: 10pt;
}

/* filters table in options */
.options-filters-row {
  margin-top: 8px;
}

.options-filters-table {
  margin-top: 4px;
  width: 100%;
  border: 1px solid var(--theme-box-border, #000000);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10pt;
}

.options-filters-table th {
  text-align: left;
  padding: 3px 6px 4px 4px;
  white-space: nowrap;
  background: var(--theme-th-bg, #98E);
}

.options-filters-table td {
  text-align: left;
  padding: 3px 6px 3px 4px;
  vertical-align: middle;
}

.options-filters-pattern-cell {
  word-break: break-word;
  /* makes the column respect its share so long patterns ellipsize */
  max-width: 0;
}

.options-filters-pattern-input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.options-filters-pattern-input[type="text"]:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

/* custom dropdowns custom select js and the filter field picker */
.filter-field-picker,
.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select-block {
  display: block;
  width: 100%;
}

.filter-field-picker-toggle,
.custom-select-toggle {
  box-sizing: border-box;
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 16px 2px 4px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
  text-align: left;
  color: var(--theme-panel-text-color, #2E303D);
  cursor: pointer;
  position: relative;
}

.filter-field-picker-toggle:hover,
.custom-select-toggle:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.filter-field-picker-toggle::after,
.custom-select-toggle::after {
  content: "▾";
  position: absolute;
  right: 4px;
  top: 2px;
}

/* the real select stays in the page hidden */
.custom-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.filter-field-picker-dropdown,
.custom-select-dropdown {
  left: 0;
  top: 100%;
  margin-left: 0;
  margin-top: 2px;
  min-width: 100%;
}

.options-filters-regex-cell {
  text-align: center;
  white-space: nowrap;
}

.options-filters-add-btn {
  flex: none;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 3px 8px;
  color: var(--theme-panel-text-color, #2E303D);
  font: inherit;
  cursor: pointer;
}

.options-filters-remove-btn {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  color: var(--theme-panel-text-color, #2E303D);
  font: inherit;
  cursor: pointer;
}

.options-filters-add-btn:hover,
.options-filters-add-btn:active,
.options-filters-remove-btn:hover,
.options-filters-remove-btn:active {
  background: var(--theme-panel-bg, #D6DAF0);
}

.options-filters-error-row.hidden {
  display: none;
}

.options-filters-error {
  color: var(--theme-error-color, red);
  font-weight: bold;
  text-align: center;
  padding-top: 4px;
}

.options-login-row {
  margin-top: 8px;
  text-align: center;
}

.options-login-row form {
  margin-bottom: 0;
}

.post-self-delete-submit-row {
  margin-top: 8px;
  text-align: center;
}

.post-report-submit-row {
  margin-top: 8px;
  text-align: center;
}

/* staff dashboard */
.mod-dashboard-groups {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

/* phones groups stack */
@media (max-width: 799px) {
  .mod-dashboard-groups {
    flex-direction: column;
    align-items: center;
  }
}

.mod-dashboard-group-wrap {
  border: 1px solid var(--theme-box-border, #000000);
  min-width: 160px;
  background: var(--theme-box-bg, #fff);
}

.mod-dashboard-group {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.mod-dashboard-group th {
  text-align: left;
  padding: 3px 6px 4px 4px;
  white-space: nowrap;
  background: var(--theme-th-bg, #98E);
  font-size: 10pt;
  line-height: normal;
  font-weight: bold;
}

.mod-dashboard-group td {
  text-align: left;
  padding: 4px 6px;
  vertical-align: top;
}

.mod-dashboard-group form {
  margin: 0;
  padding: 0;
}

.mod-dashboard-link-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--theme-link-color, #34345C);
  text-decoration: underline;
  cursor: pointer;
}

/* board create delete modify dialogs */
.mod-board-modal-field + .mod-board-modal-field {
  margin-top: 8px;
}

.mod-board-modal-form {
  margin-bottom: 0;
}

.mod-board-modal-submit-row {
  margin-top: 8px;
  text-align: center;
}

.mod-board-modify-edit-link {
  text-decoration: none;
}

.mod-board-modify-list {
  margin-top: 4px;
}

.mod-board-modify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.options-login-button {
  text-decoration: none;
}

/* text inputs inside modals same look as post form fields */
.edit-file-modal-input[type="text"],
.edit-file-modal-input[type="password"],
.edit-file-modal-input[type="number"],
textarea.edit-file-modal-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.edit-file-modal-input[type="text"]:hover,
.edit-file-modal-input[type="password"]:hover,
.edit-file-modal-input[type="number"]:hover,
textarea.edit-file-modal-input:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.options-customcss-textarea {
  resize: none;
  height: 120px;
  overflow-y: auto;
}

@media (max-width: 799px) {
  .post-form-row-fixed,
  .post-form-row-dropzone {
    flex-direction: column;
  }

  .post-form-field-fixed {
    width: 100%;
  }
}

/* quick reply bar fixed to the bottom of a thread page */
.quick-reply-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.quick-reply-box {
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 8px;
  box-sizing: border-box;
}

.quick-reply-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.quick-reply-icon-box {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  box-shadow: none;
  color: var(--theme-link-color, #333460);
  cursor: pointer;
  padding: 0;
}

.quick-reply-icon-box:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

.quick-reply-icon-box:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quick-reply-icon-box:disabled:hover {
  color: inherit;
}

.quick-reply-input {
  flex: 1;
  min-width: 0;
  resize: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
  box-sizing: border-box;
  /* border plus padding plus this is 24px same height as the buttons */
  line-height: 16px;
}

.quick-reply-input:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.quick-reply-input::placeholder {
  color: var(--theme-label-text-color, #5b5f6b);
  opacity: 1;
}

/* submit errors */
.post-form-error-banner {
  color: var(--theme-error-color, red);
  font-weight: bold;
  text-align: center;
  padding: 6px 8px 0 8px;
  margin: 0;
}

.post-form-error-banner.hidden {
  display: none;
}

/* expanded part name email subject files */
.quick-reply-expanded {
  margin-bottom: 8px;
}

.quick-reply-expanded > * + * {
  margin-top: 8px;
}

.quick-reply-expanded.hidden {
  display: none;
}

.quick-reply-row-fields {
  display: flex;
  gap: 8px;
}

.quick-reply-field {
  flex: 1;
  min-width: 0;
}

.quick-reply-field input[type="text"] {
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
}

/* attachment tiles scroll sideways */
.quick-reply-attachments {
  display: flex;
  flex-direction: row;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
}

.quick-reply-attachments:empty {
  display: none;
}

.post-form-attachment-tile {
  flex: none;
  width: 330px;
  height: 88px;
  box-sizing: border-box;
  margin-top: 0;
}

/* board settings pages */
.mod-board-edit-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}

.mod-board-edit-tab,
.mod-board-edit-tab:visited {
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--theme-panel-text-color, #2E303D);
}

.mod-board-edit-tab.active {
  font-weight: bold;
}

.pm-compose-textarea {
  min-width: 800px;
  max-width: 100%;
}

.mod-board-edit-field + .mod-board-edit-field,
.mod-board-edit-checkbox-group {
  margin-top: 8px;
}

.mod-board-edit-checkbox-group + .mod-board-edit-field {
  margin-top: 8px;
}

.mod-board-edit-checkbox-group .options-setting-row + .options-setting-row {
  margin-top: 6px;
}

/* file inputs */
.mod-file-input::file-selector-button,
.mod-file-input::-webkit-file-upload-button {
  background: var(--theme-field-bg, #EEF2FF);
  border: 2px dashed var(--theme-hr-color, #b9c3d4);
  color: var(--theme-label-text-color, #4b4f5a);
  padding: 3px 8px;
  cursor: pointer;
  font: inherit;
  margin-right: 8px;
}

.mod-file-input::file-selector-button:hover,
.mod-file-input::-webkit-file-upload-button:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.mod-board-edit-submit-row {
  margin-top: 10px;
  text-align: center;
}

.rules-edit-textarea {
  min-width: 800px;
  max-width: 100%;
}

.site-edit-about-textarea {
  width: 400px;
  max-width: 100%;
}

.board-edit-announcement-textarea {
  width: 400px;
  max-width: 100%;
}

.board-edit-tab-form {
  min-width: 700px;
  min-height: 800px;
  box-sizing: border-box;
}

/* account history */
.account-history-section {
  margin-bottom: 14px;
}

.account-history-section:last-child {
  margin-bottom: 0;
}

.account-history-range-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}

.account-history-range-tab,
.account-history-range-tab:visited {
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--theme-panel-text-color, #2E303D);
}

.account-history-range-tab.active {
  font-weight: bold;
}

.board-edit-panel {
  background: var(--theme-postform-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 15px 10px;
  box-sizing: border-box;
  width: fit-content;
  margin: 0 auto 1em auto;
}

form.post-form.site-edit-fixed-panel,
.board-edit-panel.site-edit-fixed-panel {
  width: 704px;
}

.board-edit-banner-upload-field {
  text-align: center;
}

.board-edit-banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  max-width: 700px;
}

.mod-board-edit-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--theme-field-bg, #EEF2FF);
  border: 1px solid var(--theme-hr-color, #B7C5D9);
}

.mod-board-edit-banner img {
  display: block;
  width: 150px;
  height: 50px;
}

.mod-board-edit-banner form {
  margin: 0;
}

.mod-board-edit-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

@media (max-width: 799px) {
  input[type="text"],
  input[type="password"],
  textarea,
  .post-form-field input[type="text"],
  .post-form-field textarea,
  .quick-reply-input,
  .options-postpw-input[type="text"],
  .edit-file-modal-input[type="text"],
  .edit-file-modal-input[type="password"],
  .edit-file-modal-input[type="number"] {
    font-size: 16px;
  }
  .post-form-label {
    font-size: 16px;
  }
}

/* post options panel */
.post-form-options {
  text-align: center;
  margin-top: 4px;
  padding-top: 2px;
}

.post-form-options-toggle {
  background: none;
  border: none;
  color: var(--theme-muted-ui-color, #89a);
  cursor: pointer;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.post-form-options-toggle:hover {
  color: #b86;
}

.post-form-options-panel {
  padding: 4px 0 2px;
  width: 100%;
  max-width: calc(100vw - 60px);
  box-sizing: border-box;
}

.post-form-options-item {
  display: inline-block;
  margin: 3px 8px;
  font-size: 10pt;
  cursor: pointer;
  user-select: none;
}

button.post-form-options-item {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* poll creation */
.poll-form {
  width: 100%;
  max-width: calc(100vw - 60px);
  box-sizing: border-box;
}

.poll-form-checkbox-row {
  text-align: center;
}

.poll-form-add-row {
  margin-top: 10px;
  text-align: center;
}

.poll-form-expires-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10pt;
}

.poll-form-expires-input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
}

.poll-form-expires-input[type="text"]:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

/* polls */
.poll {
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  padding: 8px 10px;
  margin: 0.5em 4px 0.5em 1px;
  max-width: 400px;
  box-sizing: border-box;
  /* drop below a floated image */
  clear: both;
}

.poll-result-row {
  position: relative;
  margin-bottom: 4px;
  min-height: 1.6em;
}

/* the track */
.poll-result-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  box-sizing: border-box;
}

/* the fill width and colour set inline per option */
.poll-result-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  background: var(--theme-header-color, #AF0A0F);
  max-width: calc(100% - 4px);
}

.poll-result-label {
  position: relative;
  padding: 2px 6px;
  font-size: 10pt;
  color: var(--theme-poll-result-label-color, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* black copy of the label clipped to the bars width so text over the bar is always readable */
.poll-result-label-on-bar {
  position: absolute;
  inset: 0;
  color: #000;
  pointer-events: none;
}

.poll-total {
  font-size: 9pt;
  color: var(--theme-muted-ui-color, #444);
  margin-top: 4px;
}

.poll-results-hidden,
.poll-voted,
.poll-closed {
  font-size: 10pt;
  font-style: italic;
  color: var(--theme-muted-ui-color, #444);
  margin-bottom: 4px;
}

.poll-vote-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: 0;
}

.poll-choice-option {
  font-size: 10pt;
  cursor: pointer;
  user-select: none;
}

.poll-vote-form .post-form-submit {
  margin-top: 6px;
}

.poll-vote-error {
  color: var(--theme-error-color, red);
  font-weight: bold;
  font-size: 9pt;
  margin: 4px 0;
}

/* poll preview on the board index */
.poll-preview {
  margin: 6px 4px 6px 1px;
}

.poll-preview-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 9pt;
}

/* poster id badge colour set inline */
.poster-id-badge {
  display: inline-block;
  padding: 0 3px;
  font-size: 9pt;
  font-weight: normal;
}

.flag {
  vertical-align: middle;
  margin: 0 2px;
}

/* staff audit log */
.audit-log-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.audit-log-postref {
  color: var(--theme-link-hover-color, #ff0000);
}

/* accounts list */
.accounts-list-role-form {
  margin-bottom: 0;
}

.accounts-list-delete-form {
  margin-bottom: 0;
}

.audit-log-delete-form {
  display: block;
  margin-top: 2px;
  margin-bottom: 0;
}

/* purge button centred above the log table */
.audit-log-purge-form {
  text-align: center;
  margin: 0 0 8px 0;
}

/* staff word filters */
.filters-row-connector-form {
  display: none;
}

.filters-pattern-input,
.filters-reason-input {
  min-width: 160px;
}

#audit-log-delete-all-modal-overlay .unimportant {
  font-size: 10pt;
}

#confirm-modal-overlay .unimportant {
  font-size: 10pt;
}

#mod-board-delete-modal-overlay .unimportant {
  font-size: 10pt;
}

/* ban appeals review */
.mod-bans-appeal-review {
  background: var(--theme-field-bg, #EEF2FF);
  border: 1px solid var(--theme-hr-color, #B7C5D9);
  padding: 6px 10px;
}

.mod-bans-appeal-message {
  white-space: pre-wrap;
  word-break: break-word;
}

.mod-bans-appeal-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 0;
}

.mod-bans-deny-reason-input[type="text"] {
  flex: none;
  width: 220px;
}

/* reports grid boxes are compact until clicked then expand as an overlay */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  align-items: start;
  gap: 16px;
  margin: 12px 0;
}

.report-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 440px;
  overflow: hidden;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

.report-box-content {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.report-box-content a.post_anchor,
.report-box-content > br {
  display: none;
}

.report-box .post.reply,
.report-box .post.reply.highlighted {
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  font-size: 10pt;
  margin-bottom: 6px;
}

/* compact state fixed height image and comment share whats left */
.report-box:not(.expanded) .post.reply,
.report-box:not(.expanded) .post.reply.highlighted {
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.report-box .post.reply > .intro {
  flex: none;
}

.report-box:not(.expanded) .post.reply .files {
  float: none;
  flex: 12 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  margin-right: 0;
}

.report-box:not(.expanded) .post.reply .files .file {
  float: none;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  margin-right: 0;
}

.report-box:not(.expanded) .post.reply .files img.post-image,
.report-box:not(.expanded) .post.reply .files video.post-image {
  float: none;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.report-box:not(.expanded) .post.reply div.body {
  flex: 1 1 auto;
  min-height: 1.35em;
  max-height: 4.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* only the first attachment in the compact box */
.report-box:not(.expanded) .post.reply .files .file:not(:first-child) {
  display: none;
}

.report-box-deleted {
  flex: 0 1 auto;
  min-height: 0;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  margin-bottom: 6px;
  padding: 20px 8px;
  text-align: center;
}

.report-box-meta {
  flex: none;
}

.report-box-footer {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 10pt;
}

.report-box-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.report-box-meta > div {
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-meta-label {
  font-weight: bold;
}

.report-reason-short {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

.report-reason-full {
  display: none;
  white-space: pre-wrap;
}

.report-box-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* things that only show in the expanded box */
.report-overlay-only {
  display: none;
}

.report-box-close {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--theme-panel-text-color, #2E303D);
  z-index: 1;
}

/* expanded same element repositioned over the page */
.report-box.expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 92vw);
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1401;
  cursor: default;
}

.report-box.expanded .post.reply .files:not(.multifile) .file,
.report-box.expanded .post.reply .files:not(.multifile) img.post-image,
.report-box.expanded .post.reply .files:not(.multifile) video.post-image {
  float: left;
}

.report-box.expanded .post.reply .files .file:not(:first-child) {
  display: block;
}

.report-box.expanded .report-reason-short {
  display: none;
}

.report-box.expanded .report-reason-full {
  display: block;
}

.report-box.expanded .report-overlay-only {
  display: inline-block;
}

.report-box.expanded .report-box-close {
  display: block;
}

.reports-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1400;
}

.reports-overlay-backdrop.hidden {
  display: none;
}

/* hidden button the staff pages click to open the moderate window */
.moderate-open-trigger {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
}

.thread-autosaged-tag {
  margin-left: 5px;
}

/* media approval grid */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  gap: 16px;
  margin: 12px 0;
}

.media-tile {
  display: flex;
  flex-direction: column;
  height: 320px;
  overflow: hidden;
  background: var(--theme-panel-bg, #D6DAF0);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 8px;
  box-sizing: border-box;
}

.media-tile-image {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: transparent;
}

.report-box-content .media-tile {
  background: var(--theme-field-bg, #EEF2FF);
  margin-bottom: 8px;
}

.media-tile-meta {
  flex: none;
  font-size: 10pt;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-tile-comment {
  flex: none;
  font-size: 10pt;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  color: var(--theme-panel-text-color, #333);
}

.media-tile-buttons {
  flex: none;
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.media-tile-buttons .post-form-submit {
  flex: 1 1 0;
}

/* a held file a reviewer can act on from the post gets a red frame around it and its buttons */
.file[data-review-id] {
  border: 2px solid #ff0000;
  padding: 3px;
}

/* the approve and hashban buttons under it look like the ones in the queue */
.fileinfo.mpa-review {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-size: 10pt;
}

.fileinfo.mpa-review .post-form-submit {
  min-width: 34px;
}

.fileinfo.mpa-review .post-form-submit:disabled {
  cursor: default;
}

/* captcha dialog proof of work checkbox */
.snaptcha-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  background: var(--theme-field-bg, #f7f8fb);
}

.snaptcha-checkbox {
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--theme-field-bg, #ffffff);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  cursor: pointer;
}
.snaptcha-checkbox-solving,
.snaptcha-checkbox-solved {
  cursor: default;
}

/* spinner */
.snaptcha-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  /* border box so the rings border doesnt change its size */
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--theme-panel-bg, #D6DAF0);
  border-top-color: var(--theme-panel-text-color, #2E303D);
  border-radius: 50%;
  animation: snaptcha-spin 0.7s linear infinite;
}
.snaptcha-checkbox-solving .snaptcha-spinner {
  display: block;
}
@keyframes snaptcha-spin {
  to {
    transform: rotate(360deg);
  }
}

.snaptcha-checkmark {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  color: #2e7d32;
}
.snaptcha-checkbox-solved .snaptcha-checkmark {
  display: block;
}

.snaptcha-info {
  flex: 1 1 auto;
  min-width: 0;
}

.snaptcha-title {
  font-family: var(--theme-header-font, tahoma);
  color: var(--theme-header-color, #AF0A0F);
  font-size: 14pt;
  letter-spacing: -1px;
  font-weight: bold;
}

.snaptcha-progress {
  font-size: 10pt;
  color: var(--theme-placeholder-color, var(--theme-muted-ui-color, #707070));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snaptcha-refresh {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  color: var(--theme-panel-text-color, #2E303D);
  cursor: pointer;
}

/* form builder */
.form-builder-button-link {
  text-decoration: none;
}

form.post-form.form-builder-panel {
  width: 700px;
  max-width: 100%;
}

.form-builder-panel .post-form-field-full textarea {
  min-width: 100%;
}

.form-builder-question hr {
  margin: 14px 0;
}

.form-builder-question-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.form-builder-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.form-builder-option-row .post-form-field-full {
  width: auto;
  flex: 1;
}

.form-builder-question-prompt {
  margin: 0 0 4px 0;
}

.form-builder-choice {
  display: block;
  margin: 2px 0;
  cursor: pointer;
  user-select: none;
}

.form-builder-other-input[type="text"] {
  display: inline-block;
  width: 220px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192);
  padding: 2px 1px;
  font: inherit;
  font-family: var(--theme-body-font, arial, helvetica, sans-serif);
  margin-left: 4px;
  vertical-align: middle;
}

.form-builder-other-input[type="text"]:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.form-builder-other-input[type="text"]:disabled {
  background: var(--theme-panel-bg, #D6DAF0);
  color: var(--theme-disabled-text-color, #767a85);
}

.form-response-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0;
  text-align: left;
}

.form-response-meta-row form {
  display: inline;
  margin: 0;
}

/* captcha settings */
.site-edit-captcha-fields {
  margin-top: 6px;
}
.site-edit-captcha input[type="range"] {
  width: 100%;
  accent-color: var(--theme-panel-text-color, #2E303D);
}
.site-edit-captcha-hint {
  margin: 2px 0 0;
  font-size: 9pt;
}

/* distorted text captcha */
.captcha-text-box {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.captcha-text-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* the image is only an alpha mask painted in the field text colour so it works on every theme */
.captcha-text-image {
  flex: none;
  width: 240px;
  height: 80px;
  max-width: calc(100% - 36px);
  background-color: var(--theme-field-text-color, black);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.captcha-text-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: monospace;
  font-size: 14pt;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* turnstile */
.captcha-turnstile-box {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 65px;
}

/* display flex above would beat the plain hidden rule */
.snaptcha-box.hidden {
  display: none;
}
.snaptcha-box .snaptcha-refresh,
.snaptcha-box .post-form-submit {
  color: var(--theme-field-text-color, #2E303D);
}

/* no js captcha in the post form */
.nojs-captcha-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 6px;
  background: var(--theme-field-bg, #fff);
  border: 1px solid var(--theme-input-border, #aaa);
}
.post-form-row.nojs-captcha {
  margin-bottom: 10px;
}

/* the real file input shown when the dropzone cant work */
.post-form input[data-role="file-input"] {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  min-height: 2.4em;
  padding: 3px 8px;
  font: inherit;
  color: var(--theme-label-text-color, #4b4f5a);
  background: var(--theme-field-bg, #EEF2FF);
  border: 2px dashed var(--theme-hr-color, #b9c3d4);
  cursor: pointer;
}
.post-form input[data-role="file-input"]:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}
.post-form input[data-role="file-input"]::file-selector-button {
  margin-right: 8px;
  padding: 3px 5px;
  font: inherit;
  color: var(--theme-panel-text-color, #2E303D);
  background: var(--theme-field-bg, #EEF2FF);
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
  cursor: pointer;
}
.post-form input[data-role="file-input"]::file-selector-button:hover {
  background: var(--theme-panel-bg, #D6DAF0);
}

.nojs-notice {
  font-size: 0.9em;
  color: var(--theme-label-text-color, inherit);
}

/* options without javascript */
.options-page-body {
  padding: 10px 14px;
}
.options-page-body > p {
  margin: 0 0 10px;
}
.options-page-body hr {
  margin: 12px 0;
}
.options-page-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 460px;
  margin-bottom: 0;
}
.options-page-row > .options-postpw-label {
  margin-bottom: 0;
}
.options-page-row-stacked > .options-postpw-label {
  margin-bottom: 4px;
}
.options-page-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.options-page-row > .options-postpw-label {
  min-width: 5em;
}
.options-page-row > select {
  flex: 1;
}
.options-page-row-stacked {
  flex-direction: column;
  align-items: stretch;
}
.options-page-buttons,
.options-page-account {
  display: flex;
  gap: 8px;
}
.options-page-account {
  margin-bottom: 10px;
}
.options-page-account form {
  margin-bottom: 0;
}
.options-page-saved {
  font-weight: bold;
}

/* the js class on html is set by an inline script in head so no js only content never flashes */
html.js .nojs-only {
  display: none !important;
}

/* post form without javascript */
html:not(.js) .post-form-dropzone,
html:not(.js) .post-form-options-toggle,
html:not(.js) [data-role="tegaki-open"],
html:not(.js) [data-role="poll-add-choice"],
html:not(.js) .quick-reply-container {
  display: none;
}
html:not(.js) .post-form input[data-role="file-input"] {
  display: block;
}
html:not(.js) .post-form-options-panel.hidden {
  display: block;
}
html:not(.js) .post-form-options:not(:has(input)) {
  display: none;
}
html:not(.js) .post-form:has([data-role="poll-toggle"]:checked) [data-role="poll-form"].hidden,
html:not(.js) .post-form:has([data-role="embed-toggle"]:checked) [data-role="embed-row"].hidden {
  display: block;
}

/* reply embeds the placeholder takes no space until a player is in it */
.post-embed {
  display: none;
}

.post-embed.post-embed-loaded {
  display: block;
  float: left;
  margin: 5px 25px 5px 5px;
  max-width: calc(100% - 30px);
}

/* comment always goes under the media in a reply with an embed */
div.post .post-embed.post-embed-loaded + div.body {
  clear: both;
}

.post-embed-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.post-embed-video {
  width: 320px;
  aspect-ratio: 16 / 9;
}

.post-embed-soundcloud {
  width: 320px;
  height: 166px;
}

.post-embed-spotify {
  width: 320px;
  height: 80px;
}

/* search */
.search-form-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.search-form-row .search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;
}

.search-modal-form {
  margin-bottom: 0;
}

form.search-page-form {
  margin-bottom: 1em;
}

mark.search-hit {
  background: #ffe95c;
  color: #000;
  padding: 0 1px;
}

/* download arrow after the file name */
.fileinfo .file-download-btn {
  margin-left: 2px;
  color: var(--theme-link-color, #34345C);
  text-decoration: none;
  font-variant-emoji: text;
}

/* hide and the staff mpa button look like the download arrow plain text with no box */
.fileinfo .file-hide-btn,
.fileinfo .file-requeue-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: 2px;
  font: inherit;
  color: var(--theme-link-color, #34345C);
  cursor: pointer;
  font-variant-emoji: text;
}
/* only shown in place of hide while the file is hidden */
.fileinfo .file-hide-text {
  display: none;
}
.fileinfo .file-hide-btn:hover,
.fileinfo .file-requeue-btn:hover {
  color: var(--theme-link-hover-color, #ff0000);
}
.fileinfo .file-requeue-btn:disabled {
  color: var(--theme-disabled-text-color, #767a85);
  cursor: default;
}

/* button hover red text and a darker box for buttons that are already the panel colour */
.post-form-submit:hover,
.staff-back-link:hover,
.options-filters-add-btn:hover,
.options-filters-remove-btn:hover,
.thread-links > a:hover,
p.intro .op-reply-btn:hover,
.mod-form-submit:hover,
.fileinfo .file-download-btn:hover {
  color: var(--theme-link-hover-color, #ff0000);
}

.thread-links > a:hover,
p.intro .op-reply-btn:hover,
.mod-form-submit:hover {
  background: var(--theme-menu-item-hover-bg, #c3c9e6);
}

p.intro .op-reply-btn:disabled,
.mod-form-submit:disabled {
  color: var(--theme-disabled-text-color, #767a85);
  background: var(--theme-panel-bg, #D6DAF0);
  cursor: not-allowed;
}

/* keep line breaks in dialog messages */
#confirm-modal-message {
  white-space: pre-line;
}

/* alerts have no cancel and the submit button display would beat the plain hidden rule */
#confirm-modal-cancel.hidden {
  display: none;
}

/* quick quote a bare green arrow at the end of the name line */
/* it is in every post but only shows on a thread page with the option on */
.quick-quote-btn {
  display: none;
  background: none;
  border: 0;
  padding: 0 3px;
  margin: 0;
  font: inherit;
  font-weight: bold;
  line-height: inherit;
  color: #789922;
  text-decoration: none;
  cursor: pointer;
}

html.quick-quote .thread[data-board-slug] .quick-quote-btn {
  display: inline;
}

.quick-quote-btn:hover,
.quick-quote-btn:focus {
  background: none;
  color: #789922;
  text-decoration: none;
}

/* logo thumbnails on the edit homepage page keep their shape inside the square */
.site-edit-logo-thumb {
  object-fit: contain;
}

/* the discord page status tables and test button sit apart from the form above them */
.discord-status-table {
  margin: 14px auto;
}

.discord-test-form {
  margin-top: 6px;
}

/* while a post is being sent the form is frozen and dimmed so it is clear something is happening */
.post-form-busy .post-form-dropzone,
.post-form-busy .post-form-attachment-actions,
.post-form-busy .post-form-submit,
.post-form-busy [data-role="quick-reply-send"],
.post-form-busy [data-role="tegaki-open"] {
  pointer-events: none;
  opacity: 0.5;
}

.post-form-busy,
.post-form-busy textarea {
  cursor: progress;
}

/* an image that is fetching its bigger or hidden version says so with the cursor */
.post-image-loading {
  cursor: progress;
}

/* tapping an image twice on a phone should open and close it not zoom the page */
img.post-image {
  touch-action: manipulation;
}

/* held posts sit in the same grid and tile size as the media */
.held-post-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  text-align: left;
}
.held-post-view .post.reply {
  display: block;
  margin: 0;
  max-width: none;
  border: 0;
  background: transparent;
}
/* in a narrow tile files go above the text not beside it */
.held-post-view .files,
.held-post-view .file,
.held-post-view .post-image {
  float: none;
}
.held-post-view .body {
  clear: both;
  margin-left: 0;
}
.held-post-form {
  flex: 1 1 0;
  display: flex;
  margin: 0;
}

/* stays hidden until the server says this account can use it */
.options-setting-row[hidden] {
  display: none;
}

/* theres a note or a script between these rows and the one above so they set their own gap */
.options-setting-row[data-role="setting-datamining-row"],
.options-setting-row[data-role="setting-mpa-show-row"] {
  margin-top: 8px;
}

/* halloween candy counter spaced from options like the other blocks */
.candy-nav-link {
  margin-right: 0.3em;
}

/* a won flag sits right after the geo flag */
.flag.custom-flag {
  margin-left: 1px;
}

/* name and email shrink a little so the form keeps its width with the flags picker */
@media (min-width: 800px) {
  .post-form-row-fixed.has-flag-field .post-form-field-fixed {
    width: 127px;
  }
}
.post-form-field-flag {
  flex: none;
  width: 56px;
}
.post-form-field-flag .flag-select-toggle {
  border-width: 2px;
  height: 100%;
  padding-right: 14px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--theme-label-text-color, #5b5f6b);
}
.flag-select-toggle .flag {
  margin: 0;
}
.flag-select-dropdown {
  min-width: 120px;
}
.flag-select-dropdown .post-menu-item {
  white-space: nowrap;
}
.flag-select-dropdown .flag {
  margin: 0 3px 0 0;
}
/* the quick reply fields are raised instead of sunk in so the flags box is too */
.quick-reply-row-fields .flag-select-toggle {
  border-color: var(--theme-bevel-light, #bdc2cf) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-dark, #7d8192) var(--theme-bevel-light, #bdc2cf);
}
/* the quick reply sits at the bottom of the screen so its list opens upward */
.quick-reply-row-fields .flag-select-dropdown {
  top: auto;
  bottom: 100%;
  left: auto;
  right: 0;
  margin-top: 0;
  margin-bottom: 2px;
}

@media (max-width: 799px) {
  .post-form-row-fixed .post-form-field-flag {
    width: 100%;
  }
  .post-form-field-flag .flag-select-toggle {
    font-size: 16px;
  }
  /* the bigger phone text needs the quick reply box to fit its words with room for the arrow */
  .quick-reply-row-fields .post-form-field-flag {
    width: auto;
  }
  .quick-reply-row-fields .post-form-field-flag .flag-select-toggle {
    padding-right: 22px;
  }
}

/* halloween text effects won from the text effect crate */
span.fx-candle {
  color: #e8590c;
  text-shadow: 0 0 4px rgba(255, 160, 40, 0.8);
}
span.fx-candycorn {
  color: #f08c00;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  span.fx-candycorn {
    background-image: linear-gradient(to bottom, #fff4d6 0 35%, #ff8c1a 35% 68%, #ffd43b 68%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
    filter: drop-shadow(0 0 1px rgba(110, 50, 0, 0.9));
  }
}
span.fx-ghost {
  color: #6f88c2;
  opacity: 0.7;
  text-shadow: 0 0 4px rgba(200, 215, 255, 0.9);
}
span.fx-bleed {
  color: #a10000;
  text-shadow: 0 0 40px #fe0000, 0 0 2px #fe0000, 1px 2px 2px rgba(0, 0, 0, 0.55);
}
span.fx-possessed {
  text-shadow: -1.5px 0 rgba(255, 0, 70, 0.85), 1.5px 0 rgba(0, 220, 255, 0.85);
}

/* halloween store page */
.store-crates {
  text-align: center;
  padding: 8px 0;
}
.store-crates .post-form-submit {
  margin: 4px;
}
.store-open-row {
  text-align: center;
  margin-top: 10px;
}

/* the spin names slide up past a plain line across the middle */
.store-wheel {
  position: relative;
  overflow: hidden;
  height: 120px;
  background: var(--theme-field-bg, #EEF2FF);
  border: 1px solid var(--theme-box-border, #000000);
}
.store-wheel-row {
  height: 24px;
  line-height: 24px;
  text-align: center;
}
.store-wheel-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 1px solid #000000;
  pointer-events: none;
}

/* the fold boxes are only for the sidebar */
.nav-toggle {
  display: none;
}

/* sidebar option the nav bar becomes a column down the left with foldable sections
   phones keep the top bar since a column would squeeze the page */
@media (min-width: 800px) {
  html.sidebar body {
    padding-top: 0;
    margin-left: 186px;
  }
  html.sidebar div.boardlist:not(.bottom) {
    top: 0;
    bottom: 0;
    right: auto;
    width: 186px;
    box-sizing: border-box;
    padding: 6px 8px 12px;
    overflow-y: auto;
    border-bottom: none;
    border-right: 1px solid var(--theme-hr-color, #b7c5d9);
    box-shadow: none;
    /* just the page colour with no fades or pictures */
    background: var(--theme-body-bg-color, #EEF2FF);
    text-align: left;
    white-space: normal;
    font-size: 10pt;
    display: flex;
    flex-direction: column;
  }
  html.sidebar .nav-b,
  html.sidebar .nav-sep {
    display: none;
  }
  /* headings look like the homepage box headings */
  html.sidebar .nav-group[data-group]::before {
    display: block;
    padding: 3px 7px;
    font-size: var(--theme-box-header-font-size, 12pt);
    font-style: var(--theme-box-header-font-style, normal);
    font-weight: bold;
    line-height: 1.25;
    background: var(--theme-box-middle-header-bg, #98E);
    color: var(--theme-box-header-color, black);
  }
  html.sidebar .nav-group[data-group]::before {
    content: attr(data-group);
    margin-bottom: 2px;
  }
  html.sidebar .nav-group,
  html.sidebar .options-nav-link {
    display: block;
    float: none;
    position: relative;
    margin: 10px 0 0;
  }
  /* irc sits under site and candy under options so they get no heading of their own */
  html.sidebar .nav-group[data-key="site"] { order: 1; margin-top: 0; }
  html.sidebar .nav-group[data-key="irc"] { order: 2; }
  html.sidebar .nav-group[data-key="boards"] { order: 3; }
  html.sidebar .nav-group[data-key="info"] { order: 4; }
  html.sidebar .nav-group[data-key="staff"] { order: 5; }
  html.sidebar .nav-group[data-key="options"] { order: 6; }
  html.sidebar .nav-group[data-key="event"] { order: 7; }
  html.sidebar .nav-group[data-key="media"] { order: 8; }
  html.sidebar .nav-group[data-key="irc"],
  html.sidebar .nav-group[data-key="event"] {
    margin-top: 0;
  }
  html.sidebar .nav-group[data-key="irc"]::before,
  html.sidebar .nav-group[data-key="event"]::before {
    display: none;
  }
  /* plain underlined links one per line with no highlight on hover */
  html.sidebar .nav-group a,
  html.sidebar #staff-nav-counts a {
    display: block;
    padding: 0 7px;
    text-decoration: underline;
    background: none;
  }
  html.sidebar .nav-group a:hover {
    color: var(--theme-link-hover-color, #ff0000);
  }
  /* boards read like the old menus slug then name */
  html.sidebar a[data-board-name]::before {
    content: "/";
  }
  html.sidebar a[data-board-name]::after {
    content: "/ - " attr(data-board-name);
  }
  /* the plus and minus box at the right of each heading */
  html.sidebar .nav-toggle {
    display: block;
    position: absolute;
    /* halfway down the heading whatever size the theme makes it */
    top: calc(3px + var(--theme-box-header-font-size, 12pt) * 0.625);
    transform: translateY(-50%);
    right: 4px;
    padding: 0 4px;
    font: inherit;
    font-size: 9px;
    line-height: 12px;
    background: var(--theme-panel-bg, #D6DAF0);
    color: var(--theme-panel-text-color, #2E303D);
    border: 1px solid var(--theme-hr-color, #b7c5d9);
    cursor: pointer;
  }
  html.sidebar .nav-toggle:hover {
    color: var(--theme-link-hover-color, #ff0000);
  }
  html.sidebar .nav-group.nav-folded > :not(.nav-toggle) {
    display: none;
  }
  /* the quick reply bar starts after the column */
  html.sidebar .quick-reply-container {
    left: 186px;
  }
}

/* how far along a send with files is shown next to the quick reply send button */
.quick-reply-progress {
  flex: none;
  align-self: center;
  white-space: nowrap;
  font-size: 9pt;
  color: var(--theme-label-text-color, #5b5f6b);
}