/* The admin page centres its content; a post list reads like a board, so it is left-aligned. */
#recentPosts { text-align: left; }

/************************ Dropdown Menus ******************************/

.postMenuContainer {
	display: inline-block;
}

/* Bracketed [Link] row shown in place of a dropdown when JS is off */
.noscriptMenu {
	font-size: var(--font-size-small);
}

.noscriptMenu a {
	text-decoration: none;
}

/* Shared toggle arrow (▶) for all dropdown menus */
.menuToggle {
	cursor: pointer;
	display: inline-block;
	transition: transform 0.15s ease;
	font-family: var(--font-family-sans-serif);
	line-height: 1;
	user-select: none;
}

.menuToggle.menuOpen {
	transform: rotate(90deg); /* ▶ rotates to ▼ */
}

/* Shared dropdown menu base */
.dropdownMenu {
	position: absolute;
	background: var(--color-bg-reply);
	border: 1px solid var(--color-hi-contrast-border);
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	min-width: 120px;
	z-index: 9999;
	padding: 2px 0;
}

.dropdownMenu a {
	display: block;
	padding: 2px 4px;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	cursor: pointer;
}

.dropdownMenu a:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* Attachment menu toggle — extra spacing in file bar */
.attachmentMenuToggle {
	margin-left: 4px;
	font-size: var(--font-size-x-small);
}

/* Attachment dropdown — slightly smaller than post menu */
.attachmentMenuDropdown {
	min-width: 100px;
	font-size: var(--font-size-small);
}

.attachmentMenuDropdown a {
	padding: 1px 4px;
}

/************************ Posts & Threads ******************************/

.post .nameContainer,
.post .time,
.post .userIP,
.post .postnum,
.post .adminFunctions,
.post .host,
.post .filterpostContainer,
.post .soudaneContainer,
.post .replyButton,
.post .backlinks {
	display: inline-block;
}

.heading {
	color: #af0a0f;
	font-size: 1.125em;
	font-weight: bold;
}

.threadUpdater {
	display: inline;
}

/************************ Attachments & Images ************************/

.multiAttachment {
	display: inline-block;
	vertical-align: top;
}

.multiAttachment .postimg {
	float: none;
}

.multiAttachment .fileProperties {
	display: block;
}

.attachmentButton {
	font-size: var(--font-size-small);
}

.expandimg {
	max-width: 100%;
	cursor: pointer;
}

/************************ Reader-facing module pages *******************/

/* Return link pageRenderer puts above every non-staff page. */
.userNavBar {
	margin-bottom: 0.5em;
}

/* Prose-and-tables documentation pages (currently only the postApi reference). Long-form
   reading, so the column is capped and centred rather than spanning the window. */
.documentationPage {
	max-width: 640px;
	margin: 0 auto;
}

/************************ Collapsible Details Boxes ********************/

.indicatorHidden {
	display: none !important;
}

.detailsbox {
	background-color: var(--color-bg-main);
	border-color: var(--color-lo-contrast-border) var(--color-hi-contrast-border) var(--color-hi-contrast-border) var(--color-lo-contrast-border);
  border-style: solid;
	border-width: 1px;
}

.detailsbox > summary {
  cursor: pointer;
	background-color: var(--color-bg-postblock);
	padding: 2px 4px;
	font-weight: var(--font-weight-bold);
}

.detailsbox[open] > summary {
	border-bottom: 1px solid var(--color-hi-contrast-border);
}

.detailsboxContent {
	padding: 0.25em;
}

.detailsboxForm {
	display: table;
} 

/************************ JS Alert/Messages *******************************/

/* Container that holds all messages */
.messageStackContainer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	pointer-events: none; /* allow clicks to pass through except on messages */
}

/* Each message */
.messageContainer {
	margin: 10px auto;
	padding: 10px;
	width: 90%;
	max-width: 600px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: auto; /* allow close button clicks */
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Appearance for success / failure */
.messageSuccess {
	background-color: var(--color-bg-theading3);
	color: var(--color-fg-theading);
	border: 1px solid var(--color-fg-theading);
}

.messageFailure {
	background-color: var(--color-bg-theading);
	color: var(--color-fg-theading);
	border: 1px solid var(--color-fg-theading);
}

.messagePending {
	background-color: var(--color-bg-theading2, #0040e0);
	color: var(--color-fg-theading);
	border: 1px solid var(--color-fg-theading);
	border-radius: 4px;
}

@keyframes messageSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.messageSpin {
	font-size: var(--font-size-large);
	display: inline-block;
	animation: messageSpin 1.5s linear infinite;
}

/* Show & hide animation states */
.messageContainer.show {
	opacity: 1;
	transform: translateY(0);
}

.messageContainer.hide {
	opacity: 0;
	transform: translateY(-20px);
}

/* Text inside the message */
.messageText {
	flex: 1;
}

/* Close button */
.messageClose {
	cursor: pointer;
	margin-left: 10px;
	font-weight: bold;
}

/************************ Deleted Posts (Mod) **************************/

.deletedPostEntry {
	text-align: left;
}

.deletedPost, .deletedFile {
	opacity: 0.75;
}

/* The deletion entry the [View entry] widget opens in a window */
.dpEntryWindow {
	text-align: left;
	padding: 4px;
}

.dpEntryWindow .deletedPostTable td {
	padding: 1px 4px;
	vertical-align: top;
}

.dpEntryWindow .dpEntryActions {
	margin: 4px 0;
}

/* the post is a copy of the one on the page, so keep it from stretching the window */
.dpEntryWindow .dpEntryPost {
	overflow: auto;
	max-height: 40vh;
}

.dpEntryWindow .dpEntryPost .post,
.dpEntryWindow .dpEntryPost .thread {
	opacity: 1;
}

.dpEntryFooter {
	font-size: var(--font-size-small);
}

.managepostsCommentWrapper {
	word-break: break-word;
	max-height: 200px;
	overflow: auto;
	word-wrap: break-word;
}

.staffNotesContainer {
	font-size: var(--font-size-small);
	color: var(--color-fg-warning);
}

/* Notes on the poster's host rather than the post, so they read as a separate block under
   their own header and in a colour post notes never use. */
.hostNotesContainer {
	font-size: var(--font-size-small);
	color: var(--color-fg-link);
}

.hostNotesHeader {
	display: block;
	font-weight: var(--font-weight-bold);
}

.hostNotesPanel .hostNotesPanelList {
	margin-bottom: 0.5em;
}

.hostNotesPanel .hostNoteOnPost {
	font-size: var(--font-size-small);
}

.hostNotesPanelEmpty {
	font-size: var(--font-size-small);
	font-style: italic;
}

/* The host-note form picks between the post's two targets rather than asking for either, so the
   choices sit on their own lines with the value they stand for beside them. */
.hostNoteTargetChoice label {
	display: block;
}

.hostNoteFormPattern,
.hostNoteFormToken {
	font-family: monospace;
}

/*********************** Editing a post *******************************/

/* One removable file per row, thumbnail beside its name. */
.editAttachmentList {
	margin-bottom: 0.3em;
}

.editAttachmentEntry {
	align-items: center;
	display: flex;
	gap: 0.4em;
}

.editAttachmentThumb {
	max-height: 40px;
	max-width: 40px;
}

.editAttachmentName {
	font-family: monospace;
	font-size: var(--font-size-small);
}

.editAttachmentsEmpty {
	font-size: var(--font-size-small);
}

/* A post's edit history: one block per revision, oldest at the bottom. */
.postRevision {
	border: 1px solid var(--color-border, rgba(128, 128, 128, 0.4));
	margin-bottom: 0.8em;
	padding: 0.4em;
}

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

.postRevisionWho {
	font-weight: normal;
}

.postRevisionValue {
	word-break: break-word;
}

.postRevisionsEmpty {
	font-style: italic;
}

/* Failed-login notice on the admin landing page. Deliberately loud: it only appears when
   somebody has been guessing at the account the reader just logged into. */
.loginFailureWarning {
	color: var(--color-fg-warning);
	font-weight: var(--font-weight-bold);
	margin: 0 auto 1em;
	max-width: 60ch;
}

/************************ Overboard ***********************************/

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

.filterSelectBoardItem {
	display: block;
}

#reloadTable {
	margin: 0.5em auto;
}

.littlelist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mergeThreadList {
	max-height: 220px;
	overflow-y: auto;
}

.mergeThreadItem label {
	cursor: pointer;
}

.mergeThreadHelp {
	margin: 0 0 4px;
	font-size: smaller;
}

/************************ Post Form & Dropzone ************************/

.formattingDetails summary {
  width: fit-content;
  font-weight: normal;
  cursor: pointer;
}

.formattingDetails summary:hover {
  font-weight: bold;
}

.dropzoneWrap {
  user-select: none;
  margin-top: 4px;
}

.dropzone {
  border: 2px dashed #888;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  color: #666;
  transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.dropzone:hover {
  color: var(--color-hi-contrast-border);
  border-color: var(--color-hi-contrast-border);
}

.dropzone.dragover {
  border-color: #33a;
  color: #33a;
}

.dropzoneFilePicker {
  display: none;
}

/************************ Filters *************************************/

.filter .comment,
.filter .post,
.filter .omittedposts,
.filter .filesize,
.filter .postimg,
.filter > .reply-container {
  display: none;
}

.filter .post.op {
  display: block;
}

.filter .postinfo,
.filter .category {
  opacity: 0.5;
}

/* post still being parsed, held until filter.js can match it */
.filterPending {
  visibility: hidden;
}

/* .filterpost {
  text-decoration: none;
  font-weight: var(--font-weight-bold);
	font-size: 9pt;
} */

/* .filterpostContainer::before {
	content: "["
}

.filterpostContainer::after {
	content: "]"
} */

.filterpost:hover {
  opacity: 1;
}

.filterImage .postimg {
  opacity: 0;
}

.filterImage .attachmentAnchor {
  position: relative;
}

/************************ Search **************************************/

#searchresult {
	margin-top: 1em;
	text-align: left;
}

/************************ Private Messages *****************************/

.pmNameLink {
	font-size: var(--font-size-small);
}

.pmSendForm {
	margin: 0.5em 0;
}

.pmBodyInput {
	width: 30em;
	height: 5em;
}

.pmRow.pmRead {
	opacity: 0.85;
}

.pmRow.pmUnread {
	font-weight: var(--font-weight-bold);
}

.pmUnreadIndicator {
	color: var(--color-fg-warning);
	font-weight: var(--font-weight-bold);
}

.pmStatusCell {
	width: 1.5em;
	text-align: center;
}

.pmDateCell {
	white-space: nowrap;
}

.pmViewCell {
	white-space: nowrap;
}

.pmEncryptionDiclaimer {
	font-size: var(--font-size-small);
}

/* View message page */

.pmViewContainer {
	text-align: left;
}

.pmViewNav {
	margin-bottom: 0.5em;
}

.pmViewMeta td {
	padding: 2px 8px 2px 0;
}

.pmViewBody {
	padding: 0.5em 0;
	word-break: break-word;
}

/************************ Media ***************************************/

.pmStickyWrap {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: var(--pm-slot-width, 728px);
	height: var(--pm-slot-height, 90px);
	max-width: 100%;
	z-index: 900;
	background: transparent;
}

.pmStickyClose {
	position: absolute;
	top: -1.4em;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	padding: 0 0.4em;
	cursor: pointer;
	font-size: 1em;
	line-height: 1.4em;
	z-index: 901;
}

.pmSlotMobile {
	display: none;
}

.pmPostAd .postinfo {
	margin-bottom: 0.25em;
}

.pmInlineRow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0.5em auto;
	overflow-x: auto;
}

.pmPostAdBadge {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	background: var(--color-bg-theading, #800000);
	color: var(--color-fg-theading, #fff);
	padding: 0 4px;
}

.pmAdImage {
	max-width: 100%;
	height: auto;
	display: inline;
}

.pmPostAdSlot {
	max-width: 100%;
	overflow: hidden;
}

.pmPostAdFrame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: transparent;
}

/************************ Catalog *************************************/

#catalogSettings {
	float: right;
}

#catalogSortForm {
	float: left;
}

#catalogTable {
	margin: 0 auto;
	text-align: center;
	clear: both;
}

/* Auto columns: flex wrapping, centered */
#catalogTable.auto-cols {
	text-align: center;
}

#catalogTable.auto-cols tr,
#catalogTable.auto-cols tbody {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}

#catalogTable.auto-cols .thread {
	display: inline-block;
	margin: 0.5em;
}

/* Fixed columns: CSS grid */
#catalogTable.fixed-cols tr,
#catalogTable.fixed-cols tbody {
	display: grid;
	grid-template-columns: repeat(var(--cat-cols, 5), auto);
	justify-content: center;
}

#catalogTable.fixed-cols .thread {
	margin: 0.5em;
}

#catalogTable.fixed-cols .catComment {
	max-height: 100px;
	overflow: hidden;
}

#catalogTable.fixed-cols .catComment:hover {
	overflow: auto;
}

/* Full width: stretch table and distribute threads across the page */
#catalogTable.full-width {
	display: block;
	width: 100%;
}

#catalogTable.full-width tbody {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

#catalogTable.full-width tr {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-evenly;
}

#catalogTable.full-width.fixed-cols tr {
	display: grid;
	grid-template-columns: repeat(var(--cat-cols, 5), 1fr);
	justify-items: center;
}

#catalogTable .thread {
	padding: 0 0 0.5em;
	width: 180px;
	max-height: 250px;
	max-width: 170px;
	text-align: center;
	vertical-align: top;
	overflow-y: hidden;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

#catalogTable .thread:hover {
	overflow-y: auto;
}

#catalogTable .thumb {
	display: block;
	margin: 0 auto 0.75em;
	width: 150px;
	height: 150px;
	object-fit: scale-down;
}

#catalogTable .catPostInfo {
	font-size: var(--font-size-small);
}

#catalogTable .catPostInfo .title {
	display: inline-block;
	font-size: inherit;
  max-width: 100%;
	vertical-align: text-bottom;
	overflow: hidden;
	text-overflow: ellipsis;
  white-space: nowrap;
}

#catalogTable .catPostInfo .Replies {
	display: inline-block;
}

.catComment {
	display: table;
  margin: 0 auto;
	text-align: left;
	font-size: var(--font-size-small);
}

/************************ Utility Classes ******************************/

.buttonLink {
	background: none;       /* No background */
	border: none;           /* No border */
	color: var(--color-fg-link);         /* Link-like blue color */
	font: inherit;          /* Inherit font styles */
	cursor: pointer;       /* Pointer cursor to show it's clickable */
	padding: 0;             /* Remove padding */
}

.alignLeft, .modPagePostContainer {
	text-align: left;
}

/* Define the fixed position class with padding and bottom-right placement */
.fixedPosition {
	position: sticky;
	bottom: 5px; /* Adjust the distance from the bottom */
	right: 5px;  /* Adjust the distance from the right */
}

/************************ Mass moderation ******************************/

.massModerateHidden {
	display: none;
}

/* the same control docked in the staff alerts panel, where the bar isn't used */
.massModerateButton {
	display: block;
	width: 100%;
	cursor: pointer;
}

.massModerateButton[disabled] {
	cursor: default;
	opacity: 0.5;
}

.massModerateFloating {
	position: fixed;
	right: 5px;
	bottom: 5px;
	z-index: 999;
}

.massModerateWindow {
	padding: 0.5em;
	text-align: center;
	font-size: var(--font-size-small);
}

.massModerateStatus {
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.4));
}

.massModerateList {
	max-height: 50vh;
	overflow-y: auto;
}

/* Each section is its own list under its own header. */
.massModerateGroup + .massModerateGroup {
	margin-top: 0.5em;
}

.massModerateGroupHeader {
	margin-bottom: 0.2em;
	font-size: var(--font-size-x-small);
	font-weight: var(--font-weight-bold);
	border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.4));
}

.massModerateGroup .littlelist {
	margin: 0 auto;
}

.massModerateList .massModerateItem a {
	display: block;
	padding: 0.2em 0.6em;
	cursor: pointer;
}

.massModerateList .massModerateItem a:hover {
	font-weight: var(--font-weight-bold);
}

.massModerateExtra {
	text-align: left;
	max-height: 50vh;
	overflow-y: auto;
}

.massModerateExtra:not(:empty) {
	padding: 0.4em 0;
}

.massModerateControls {
	padding-top: 0.4em;
}

.massModerateBusy {
	opacity: 0.5;
	pointer-events: none;
}

.selectlinktextjs {
	font-size: var(--font-size-x-small);
	user-select: none;
}

/* Action log event filter: one column per group, wrapping when the form is narrow */
.actionTypeGroups {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1.4em;
	text-align: left;
}

.actionTypeGroupLabel {
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
}

.actionTypeGroupToggle {
	font-weight: normal;
}

/* Sortable column headers on the action log table */
.sortableColumn a {
	text-decoration: none;
	cursor: pointer;
}

.sortableColumn.sortedColumn a {
	font-weight: var(--font-weight-bold);
}

.url-input {
	min-width: 35ch;
}

.mod-extra-info {
	text-align: center;
}

/************************ Tables *******************************/
/* A long table repeats its action buttons above itself as well as below, so a decision made
   at the top of the page does not mean scrolling to the bottom to submit it. The top copy
   needs the gap under it that the bottom copy gets over it. */
.buttonSection + .tableViewportWrapper,
.buttonSection + .formtable {
	margin-top: 0.5em;
}

.tableViewportWrapper {
	max-width: 100%;
	overflow: auto;
}

.formtable {
	display: table;
	margin: 1em auto;
}

/************************ BBcode **************************************/

.neon {
    color: #ff1414;
    text-shadow: 0 0 5px #ff1414, 0 0 10px #ff1414, 0 0 20px #ff1414;
}

.echoText {
    text-shadow:
        2px 2px 0 rgba(0,0,0,0.45),
        4px 4px 0 rgba(0,0,0,0.35),
        6px 6px 0 rgba(0,0,0,0.25),
        8px 8px 0 rgba(0,0,0,0.15),
        10px 10px 0 rgba(0,0,0,0.08);
}

/************************ Mobile **************************************/

.pmMobileOnly {
	display: none;
}

@media screen and (max-width: 650px) {
	.pmMobileOnly {
		display: block;
	}

	.dropdownMenu a { line-height: 2 }

	.pmSlotTop {
		display: none;
	}

	.pmSlotMobile {
		display: block;
	}

	.pmDesktopOnly {
		display: none;
	}

	.pmStickyWrap {
		display: none;
	}
}

/* Thread watcher module */
.threadWatcherContent {
	padding: 0.75em;
	max-height: 60vh;
	overflow-y: auto;
	font-size: var(--font-size-x-small);
}

/* Fixed (non-scrolling) header bar above the scrollable watch list. */
.threadWatcherHeader {
	padding: 0.25em 0.5em;
	border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, 0.4));
}

.threadWatcherRefresh,
.threadWatcherMarkAllRead,
.threadWatcherClearAll {
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	line-height: 1;
	padding: 0.1em 0.25em;
}

/* Mark-all-read (☑) and clear-all (🗑): a touch smaller so they read as secondary
   to the refresh icon. */
.threadWatcherMarkAllRead,
.threadWatcherClearAll {
	font-size: var(--font-size-small);
}

.threadWatcherRefresh.twSpinning {
	animation: twSpin 0.6s linear infinite;
}

/* Locked: during a poll or the post-refresh cooldown — not clickable, dimmed. */
.threadWatcherRefresh.twLocked {
	pointer-events: none;
	opacity: 0.5;
}

@keyframes twSpin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* "Updated: <time>" text after the refresh button. */
.threadWatcherUpdatedLabel {
	margin-left: 0.5em;
	font-size: var(--font-size-small);
	opacity: 0.7;
}

.threadWatcherUpdated {
	margin-left: 0.25em;
	font-size: var(--font-size-small);
	opacity: 0.7;
}

/* Watcher status colors: green = unread replies, red = an unread reply quotes you.
   Applies to both the admin-bar top-link and the watched-thread list entries. */
.threadWatcherToplink.twUnread,
.threadWatcherList .threadWatcherLink.twUnread {
	color: #2e7d32;
	font-weight: var(--font-weight-bold);
}

.threadWatcherToplink.twQuoted,
.threadWatcherList .threadWatcherLink.twQuoted {
	color: var(--color-fg-warning);
	font-weight: var(--font-weight-bold);
}

.threadWatchStar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	line-height: 0;
	cursor: pointer;
}

.threadWatchStar,
.threadWatchStar:link,
.threadWatchStar:visited,
.threadWatchStar:hover,
.threadWatchStar:focus,
.threadWatchStar:active {
	color: var(--color-thread-watch-star) !important;
}

.threadWatchStar .threadWatchStarIcon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.threadWatchStar.twStarWatched .threadWatchStarIcon {
	fill: currentColor;
}

.threadWatchStar:hover .threadWatchStarIcon {
	opacity: 0.8;
}

@media screen and (max-width: 600px) {
	#catalogTable .thread {
		width: 140px;
		max-width: 140px;
	}
	
	#catalogTable .thumb {
		max-width: 135px;
	}
}

/************************ Windows *************************************/

/* Shared window-manager, settings, and quick-reply logic for both the
   kokoimg and kokotxt style sets. Theme-specific colors/z-index that differ
   between the two live as overrides in their respective base.css files. */

#formfuncs a,
a.linkjs {
	text-decoration: underline;
	color: inherit;
}

/* Window Manager */
@keyframes fade {
	0% { filter: opacity(0); transform: scale(0.95); }
	100% { filter: opacity(1); transform: scale(1); }
}

@keyframes fadeout {
	0% { filter: opacity(1); transform: scale(1); }
	100% { filter: opacity(0); transform: scale(0.95); }
}

.window {
	position: fixed;
	z-index: 1000;
	background-color: inherit;
	border-width: 1px;
	border-style: solid;
	min-width: 220px;
	min-height: 220px;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
	opacity: 0.75;
	animation: fade 0.1s;
}

/* .wclosing {
	animation: fadeout 0.1s;
} */

#wintop,
.window:hover {
	opacity: 1;
}

.window.minimized {
	border-bottom: none;
	min-height: 1em;
}

/* When minimized, hide everything in the window except its title bar.
   Generic so any window content (forms, tables, the thread watcher, etc.) collapses. */
.window.minimized > *:not(.winbar) {
	display: none;
}

.winbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid;
	cursor: move;
	vertical-align: middle;
}

.winname {
	flex-grow: 1;
	margin: 0.125em 0.25em;
	font-weight: var(--font-weight-bold);
	text-align: left;
}

.winctrl {
	display: flex;
	justify-content: space-between;
	flex-grow: 0;
	justify-content: flex-end;
	gap: 0.25em;
	margin: 0.25em;
	text-align: right;
}

.winctrl button {
	background-color: transparent;
	border: none;
	border-radius: 4px;
	padding: 0;
	width: 1em;
	height: 1em;
	min-width: 16px;
	min-height: 16px;
	cursor: pointer;
	font-size: var(--font-size-regular);
	/* transition: all 0.1s; */
}

.winctrl button img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Settings */

#settabs {
	padding: 0.5em;
	padding-bottom: 0;
}

#settabs a {
	padding: 0.125em 0.25em;
}

#settarea {
	display: flex;
	flex-direction: column;
	padding: 0.5em;
	padding-top: 0;
	max-height: calc(100vh - 5em);
	overflow: auto;
}

#settarea > * {
	display: flex;
	flex-direction: row;
	/* transition: all 0.1s; */
	user-select: none;
}

/* General tab: fixed height, scroll overflow */
#settarea.settarea_general {
	height: 420px;
	max-height: calc(100vh - 5em);
}

#settarea > .settsection {
	flex-direction: column;
}

.settsection label {
	display: flex;
	flex-direction: row;
	user-select: none;
}

.settsectionheader {
	margin: 0.5em 0 0.125em;
	font-size: var(--font-size-small);
	font-weight: bold;
	opacity: 0.7;
	border-bottom: 1px solid var(--color-bg-window-item-highlight);
}

#settarea [type=number] {
	width: 5em;
}

.winctrl button:hover,
#settarea > label:hover,
.settsection label:hover,
.settab_selected {
	background-color: var(--color-bg-window-item-highlight);
}

#settusercss,
#settuserfilter {
	width: 100%;
	height: 199px;
	min-width: 202px;
	min-height: 110px;
	max-width: calc(100vw - 35px);
	max-height: calc(100vh - 119px);
}

#settarea details {
	max-width: fit-content;
	font-size: var(--font-size-small);
}

#settarea details ul {
	margin: 0;
	padding-left: 1em;
}

#filterdie {
  display: block;
  font-size: var(--font-size-small);
}

/************************ Quick reply  ********************************/

#qrinputs {
	display: flex;
	flex-direction: column;
}

#qrinputs > div {
	display: flex;
	flex-direction: row;
}

#qrinputs > div > .inputtext {
	flex-basis: -moz-available;
	width: 100%;
}

#qrinputs button {
	white-space: nowrap;
}

#qrcaptcha {
	padding: 0.2em;
	margin: 0.2em 0;
}

#qrcom {
	width: 250px;
	height: 110px;
	min-width: 250px;
	min-height: 110px;
	max-width: calc(100vw - 35px);
	max-height: calc(100vh - 119px);
}

/******************** Windows/settings/quick reply (mobile) **********/

@media screen and (max-width: 450px) {
	.window {
		top: 0 !important;
		left: 50% !important;
		transform: translate(-50%, 0%) !important;
		width: 100vw !important;
		min-height: initial;
		animation: none;
	}

	.window.minimized {
		top: auto !important;
		bottom: 0;
	}

	.winname {
		font-size: 1.25em;
	}

	.winctrl {
		font-size: 1.5em;
	}

	#settarea {
		line-height: 1.5;
	}

	#settusercss,
	#settuserfilter {
		height: calc(100vh - 23em);
		min-height: initial;
		max-width: 100% !important;
		max-height: 100% !important;
	}

	#qrcom {
		width: 100%;
		max-width: initial;
	}
}

/* ── Board / global config editor (admin > boards, admin > global config) ────────────
   The editor markup is built by code/Kokonotsuba/libraries/html/configForm.php and the
   templates/admin/config/ blocks; its behaviour lives in static/js/boardConfigForm.js. */
.configModuleHeader h3 { margin: 0; }
.configArrayList { list-style: none; margin: 0; padding: 0; }
.configArrayRow, .configArrayAddRow { display: flex; gap: 4px; margin-bottom: 3px; align-items: center; }
.configArrayRow input, .configArrayAddRow input { flex: 1 1 auto; min-width: 0; }
.configArrayKey, .configArrayNewKey { flex: 0 0 32%; }
.configArrayEditor button { flex: 0 0 auto; cursor: pointer; padding: 0 8px; line-height: 1.6; }
.configArrayAddRow { margin-top: 4px; }

/* ── The section navigator ───────────────────────────────────────────────────────────
   Rendered hidden with the form; boardConfigForm.js lifts it into an ordinary koko window,
   the same way the staff alerts widget floats. The window's bar carries the title and the
   close button, so the list takes the whole body. Without the window manager it stays hidden. */
.configEditorGroups { text-align: left; }

.configNavWindow {
	min-height: 0;
	width: auto;
	font-size: var(--font-size-x-small);
}
.configNav { width: 15em; max-width: 100%; }

.configNavList, .configNavSubList { list-style: none; margin: 0; padding: 0; }
.configNavList { overflow-y: auto; max-height: 60vh; padding: 3px 4px; }

.configNavRow { display: flex; align-items: baseline; gap: 3px; }
.configNavLink {
	flex: 1 1 auto;
	display: block;
	padding: 1px 3px;
	text-decoration: none;
	/* A group or module label is short: keep each entry on one line rather than reflowing
	   the whole list when one of them is long. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.configNavLink:hover { text-decoration: underline; }

/* The entry for the section currently under the top of the viewport. */
.configNavLink.configNavCurrent {
	background-color: var(--color-bg-window-item-highlight);
	font-weight: var(--font-weight-bold);
}

/* A group whose settings have been edited but not yet saved. */
.configNavRow.configNavChanged::after {
	content: "*";
	flex: 0 0 auto;
	color: var(--color-fg-warning);
	font-weight: var(--font-weight-bold);
}

/* Only the open group spells out its modules - a list of every module in every group would be
   longer than the form it navigates. */
.configNavToggle {
	flex: 0 0 auto;
	cursor: pointer;
	padding: 0;
	width: 1.2em;
	background: none;
	border: 0;
	color: inherit;
	font-size: inherit;
}
.configNavToggle::before { content: "\25B8"; }
.configNavItem.configNavOpen > .configNavRow > .configNavToggle::before { content: "\25BE"; }
.configNavSubList { display: none; padding-left: 1.2em; }
.configNavItem.configNavOpen > .configNavSubList { display: block; }

/* Once anything in the form is edited, the save button follows the viewport so it stays
   reachable without scrolling to the end of a long form. */
#boardConfigForm.configFormDirty .buttonSection { position: sticky; bottom: 8px; z-index: 20; }
#boardConfigForm.configFormDirty #boardConfigSaveButton { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }

/* The save-confirmation window. The table is a .postlists table, so it inherits the admin
   panel's colours; everything here only bounds it against the viewport.

   A kkwm window sizes itself to its contents, so the body is capped to the viewport (less room
   for the window's title bar and a margin) and laid out as a column: the change list takes
   whatever height is left and scrolls inside it, and the buttons stay visible however many
   settings changed. */
.configChangesBody {
	width: min(600px, calc(100vw - 60px));
	max-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 8px;
}
/* min-height:0 is what actually lets a flex child shrink below its content and scroll. */
.configChangesList { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.configChangesTable { width: 100%; table-layout: fixed; }
.configChangesTable th, .configChangesTable td {
	vertical-align: top;
	/* A value can be a long path or an unbroken string: wrap it rather than widen the window. */
	word-break: break-word;
	overflow-wrap: anywhere;
}
/* The key column is the narrow one - the two value columns get the remaining width evenly. */
.configChangesTable .configChangeKey { width: 34%; font-family: monospace; }

/* A list setting is shown one entry per line instead of as raw JSON. Only the edited elements
   are spelled out; each run of unedited ones collapses to a muted "...N more..." line.

   Entries keep a real list marker and hanging indent: an entry can wrap over several lines, and
   without the marker the entries run together into a block of text instead of reading as a list. */
.configChangeEntries { list-style: disc; margin: 0; padding-left: 1.25em; }
.configChangeEntries li { padding: 0; margin: 0; }
.configChangeEntries li.configChangeEdited { white-space: pre-wrap; }

/* The run of text that actually differs, inside an edited entry. An entry is cut around this, so
   it is always on screen; the surrounding unchanged context is plain, and a leading/trailing … marks
   where text was cut away. Removed text is struck through, added text is not. */
.configChangeDelta { font-weight: bold; border-radius: 2px; padding: 0 1px; }
.configChangeFrom .configChangeDelta {
	background-color: rgba(220, 70, 70, 0.35);
	text-decoration: line-through;
}
.configChangeTo .configChangeDelta {
	background-color: rgba(70, 180, 90, 0.35);
}
/* The collapsed-run summaries are notes about the list, not entries in it, so they get no marker. */
.configChangeEntries li.configChangeMore {
	list-style: none;
	margin-left: -1.25em;
	opacity: 0.6;
	font-size: 0.9em;
	font-style: italic;
}
.configChangeCount { opacity: 0.7; font-size: 0.9em; }
.configChangeEmpty { opacity: 0.7; font-style: italic; }
.configChangeText { white-space: pre-wrap; }

.configChangesButtons { flex: 0 0 auto; display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
.configChangesButtons button { cursor: pointer; padding: 2px 10px; }

/************************ Global **************************************/

/* saitamaar_light from https://fonts.aahub.org */
@font-face {
	font-family: "saitamaar_light";
	src:
		url("fonts/saitamaar_light/saitamaar_light.woff2") format("woff2"),
		url("fonts/saitamaar_light/saitamaar_light.woff") format("woff"),
		url("fonts/saitamaar_light/saitamaar_light.ttf") format("ttf");
	font-display: swap;
}

:root {
	--font-family-serif: 'Times New Roman', 'Times', serif, "MS PGothic", "Mona", "Monapo", "IPAMonaPGothic", "IPAPGothic", "submona";
	--font-family-sans-serif: system-ui, 'Segoe UI', Tahoma, Arial, sans-serif, Meiryo, 'Hiragino Sans', Osaka;
	--font-family-msgothic: "MS Gothic", "IPAMonaGothic", "IPAGothic", "BIZ UDGothic", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace;
	--font-family-aa-2ch: "MS PGothic", "Mona", "Monapo", "IPAMonaPGothic", "IPAPGothic", "saitamaar_light", "submona", sans-serif;
	--font-size-regular: 1em;
	--font-size-small: 0.8125em;
	--font-size-x-small: 0.75em;
	--font-size-xx-small: 0.625em;
	--font-weight-bold: 700;
}

/*** Better sizing ***/
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
	background-color: var(--color-bg-main);
	color: var(--color-fg-main);
	font-family: var(--font-family-main);
  font-size: var(--font-size-main);
}

a,
a:link,
a:visited {
	color: var(--color-fg-link);
}

a:hover,
a:focus {
	color: var(--color-fg-link-hover) !important;
}

a[href*="youtube.com"] {
	text-decoration: underline dotted !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
	font-weight: var(--font-weight-bold);
}

pre {
	white-space: pre-wrap;
}

pre,
code {
	padding: 0;
	font-size: var(--font-size-small);
	word-break: break-all;
}

button,
input,
textarea,
select {
	font-size: var(--font-size-small);
}

caption h3 {
	margin: 0;
	font-size: var(--font-size-regular);
}

#slp {
	position: absolute;
	z-index: 499;
	background-color: inherit;
	border-style: solid;
	border-width: 1px;
	padding: 2px;
}

#slptmp {
	display: none;
}

.centerText {
	text-align: center;
}

.centerBlock {
	display: table;
	margin: 0 auto;
}

.centerBlock h3 {
	text-align: center;
}

.hidden {
	display: none !important;
}

/************************ Navigation/admin bar ************************/

/* Clearfix hax so parents of float elements retain their height */
.boardlist::after,
.neomenu::after { 
	content: "";
	display: table;
	clear: both;
}

.boardlist a {
	text-decoration: none;
}

/******** Classic menu ********/

.classicmenuGroup::before {
	content: "["
}

.classicmenuGroup::after {
	content: "]"
}

/******** Neomenu ********/

.neomenuEnabled .toplinks {
	margin-top: 0;
}

.neomenuTitle,
.neomenuTopLevel {
  float: left;
  max-width: 15em;
}

.neomenuTitle {
	padding-right: 2em;
}

.persistnav .neomenuTopLevel {
	border-color: var(--color-hi-contrast-border);
}

.neomenu h1,
.neomenu h2 {
	margin: 0;
	font-size: var(--font-size-regular);
	line-height: 1.2;
	text-align: left;
}

.neomenu h1 a { 
	color: inherit;
}

.neomenu h2 {
	padding: 0 0.25em;
}

.neomenuTopLevel:hover .neomenuList {
  display: initial;
}

.neomenu .neomenuTopLevel h2:hover,
.neomenu .neomenuList li:hover {
  background-color: rgba(0,0,0,0.1);
}

.neomenuList {
	max-height: 100vh;
	max-height: calc(100vh - 8em);
	overflow-y: auto;
}

.neomenuList .extr {
	display: block;
	padding-left: 0.25em;
}

/************************ Board header ********************************/

#bannerContainer {
	height: 118px;
	width: 100%;
}

#banner {
	display: block;
	width: 302px;
	max-width: 100%;
	margin: 8px auto;
}

#banner,
.fullbannerIframe {
	border: 1px solid var(--color-fg-main);
}

.subtitle {
	font-size: var(--font-size-small);
}

.theading,
.theading2,
.theading3 {
	color: var(--color-fg-theading);
	margin: 4px 0;
	padding: 1px 0;
	font-size: var(--font-size-regular);
	font-weight: var(--font-weight-bold);
	text-align: center;
}

.theading {
	background-color: var(--color-bg-theading);
}

.theading2 {
	background-color: var(--color-bg-theading2);
}

.theading3 {
	background-color: var(--color-bg-theading3);
}

.theading3 h2 {
	font-size: var(--font-size-regular);
	margin: 0;
}

/************************ Post form ***********************************/

#toggleFlagContainer {
	text-align: center;
}

#postformTable #emailjs {
	margin-left: auto;
}

#postformTable #emailjs,
.nokosagedump {
	display: inline-block;
}

#postarea2 {
	clear: both;
}

#anigifContainer,
#continuousContainer {
	display: inline-block;
}

#anigifContainer::before,
#continuousContainer::before {
	content: "[";
}

#anigifContainer::after,
#continuousContainer::after {
	content: "]";
}

.postformOption {
	color: inherit !important;
	text-decoration: underline !important;
}

#emotesContainer,
#kaomojiContainer,
#bbcodeContainer {
	max-width: 390px;
}

#emojiContainer {
	max-width: 300px;
}

#emojiContainer .row-end {
  margin-bottom: 1.5em;
}

.emojiButton,
.emoteButton,
.kaomojiButton {
	border-color: var(--color-border-button);
	border-width: 1px;
	border-radius: 0;
	padding: 1px;
	margin: 1px;
	vertical-align: top;
}

.kaomojiButton {
	padding: 2px;
}

.emoteButton {
	width: 45px;
	height: 35px;
}

.emoteImage,
.emojiImage {
	display: block;
	margin: 0 auto;
}

.emoteImage {
	max-height: 100%;
	max-width: 100%;
}

#bbcodeButtonContainer {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
}

#bbcodeContainer .code,
#bbcodeContainer pre {
	padding: 0;
	font-size: var(--font-size-regular);
}

#bbcodeContainer label {
	display: inline-block;
}

.bbcodeButton {
	min-width: 1.25em;
  min-height: 1.25em;
  padding: 0.0625em;
}

#delPasswordInfo {
	display: inline-block;
	font-size: var(--font-size-small);
}

/************************ Board info **********************************/

/******** Online counter ********/

#counterListItemNoJS noscript {
	display: contents;
}

#counterIframeBody {
	margin: 0;
	font-size: var(--font-size-x-small);
}

#counterIframeBody #usercounter {
	font-family: var(--font-family-mspgothic);
}

#countnumber {
	font-weight: var(--font-weight-bold);
}

/******** Blotter ********/

#blotter {
	display: table;
	margin: 0 auto;
	padding: 0 8px;
	max-width: 600px;
	font-size: var(--font-size-x-small);
	font-size: max(var(--font-size-x-small), 8pt);
	list-style: none;
}

#blotter ul {
	list-style-type: none;
}

/******** Global message ********/

#globalmsg {
	color: var(--color-fg-global-message);
	font-size: 1.125em;
	text-align: center;
}

/************************ Posts/replies *******************************/

#galfuncs {
	float: right;
	margin-right: 0.25em;
}

.tnav {
	float: right;
	font-family: var(--font-family-mspgothic) !important;
	clear: both;
}

.centerthreads {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 8px;
}

.replyPosition {
	font-size: var(--font-size-small);
}

.download {
	vertical-align: text-bottom; 
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	display: inline-block;
	background-image: url(../image/download.png);
}

.fileProperties,
.imageOptions {
	display: inline-block;
	font-size: var(--font-size-small);
}

#hoverimg {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	max-height: calc( 100% - 2px );
	max-width: calc( 100% - 2px );
	pointer-events: none;
	z-index: 495;
}

.postinfo {
	display: flex;
  align-items: baseline;
  gap: 0 0.25em;
  flex-wrap: wrap;
}

.name {
	color: var(--color-fg-name);
}

.postername,
.postercap {
	font-weight: var(--font-weight-bold);
}

.sageText,
.autosage {
	color: var(--color-fg-warning);
	font-weight: var(--font-weight-bold);
}

.staffico {
	vertical-align: middle;
  image-rendering: crisp-edges; /* Pre-2022 Firefox */
  image-rendering: pixelated;
}

.postInfoExtra {
	display: contents;
}

.sod.noVotes {
	font-family: monospace;
}

.icon {
	vertical-align: text-bottom;
}

.backlinks {
	font-size: var(--font-size-small);
	font-style: italic;
}

.emote,
.emoji {
	vertical-align: text-bottom;
}

.time > * {
	display: inline-block;
}

.fortune,
.roll {
	font-weight: var(--font-weight-bold);
	margin-bottom: 0;
}

.roll {
	color: var(--color-fg-warning);
}

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

.banIcon {
	vertical-align: baseline;
}

.ipWarning {
	color: var(--color-fg-warning-ip);
	font-weight: var(--font-weight-bold);
}

.omittedposts {
	color: var(--color-fg-omitted);
}

/************************ Post formatting *****************************/

.quotelink,
.quotelink a {
  color: var(--color-fg-quotelink) !important;
}

.quotelink:hover,
.quotelink a:hover {
	color: var(--color-fg-quotelink-hover) !important;
}

.inline-quote {
	display: table;
	border: 1px dashed var(--color-hi-contrast-border);
}

.oplink:after {
	content: " (OP)";
	font-size: var(--font-size-small);
}

.crossThreadLink:after {
	content: " (Cross-thread)";
	font-size: var(--font-size-small);
}

.unkfunc {
	color: var(--color-fg-quote);
}

.unkfunc2 {
	color: var(--color-fg-quote2);
}

.spoiler {
	background-color: var(--color-bg-spoiler);
	color: var(--color-bg-spoiler);
}

.spoiler:hover {
	background-color: inherit;
	color: inherit;
}

.scrollText {
	height: 300px;
	overflow: auto;
	resize: vertical;
}

.code {
	background-color: var(--color-bg-code);
	color: var(--color-fg-code);
	margin: 0;
	padding: 4px;
	max-width: 100%;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-wrap: anywhere;
	overflow: auto;
}

.codeComment {
	color: #6a9955;
	font-style: italic;
}

.codeKeyword {
	color: #569cd6;
	font-weight: var(--font-weight-bold);
}

.copyButton {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 1;
	bottom: 8px;
	right: 8px;
	font-size: var(--font-size-regular);
}

.fontSize1 {
	font-size: 0.625em;
}

.fontSize2 {
	font-size: 0.8125em;
}

.fontSize3 {
	font-size: 1em;
}

.fontSize4 {
	font-size: 1.125em;
}

.fontSize5 {
	font-size: 1.5em;
}

.fontSize6 {
	font-size: 2em;
}

.fontSize7 {
	font-size: 3em;
}

.rabienrose {
	background-color: #ffe6f9;
	color: #78376d;
	font-family: serif;
	font-weight: var(--font-weight-bold);
}

.partybus {
	font-family: "Comic Sans MS", cursive;
	font-size: 1.5em;
	text-shadow: 0.0625em 0.0625em 0 #000000a8;
}

.partybusColor1 {
	color: #ff00ff;
}

.partybusColor2 {
	color: #ffff80;
	position: relative;
	bottom: 0.125em;
}

.partybusColor3 {
	color: #00ff80;
}

.partybusColor4 {
	color: #80ffff;
	position: relative;
	top: 0.125em;
}

.partybusColor5 {
	color: #8080ff;
}

.partybusColor6 {
	color: #ff0080;
}

.partybusColor7 {
	color: #ff8040;
	position: relative;
	bottom: 0.125em;
}

.partybusColor8 {
	color: #0080ff;
}

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

.bokuGreen {
	color: #489b67;
}

.bokuRed {
	color: #d30615;
}

/******** All AA ********/

.ascii,
.sw {
	margin: 0;
	word-break: break-word;
}

/******** 2channel-style AA ********/

.ascii {
	font-family: var(--font-family-aa-2ch) !important;
	font-size: 12pt;
	line-height: 1;
	white-space: wrap;
}

/******** Ayashii World-style AA ********/

.sw {
	font-family: var(--font-family-msgothic) !important;
	line-height: 1.16;
	white-space: pre-wrap;
}

/************************ Footer **************************************/

#pager th,
#pager td {
	border: 1px inset;
	padding: 0.125em 0.25em;
}

#pagerPagesContainer {
	overflow-y: auto;
  max-height: 5em;
}

#pagerSelectedPage {
	font-weight: var(--font-weight-bold);
}

#userdelete {
	float: right;
	text-align: right;
}

#userdelete td {
	padding: 0;
}

#userdelete #pwd2 {
	width: 100%;
	max-width: 5.5em;
}

#footer {
	font-size: var(--font-size-small);
	text-align: center;
	clear: both;
}

#styleswitch {
	text-align: right;
}

/************************ Administrator mode **************************/

.capcodeSystem {
	color: #808080;
}

.capcodeAdmin {
	color: #ff101a;
}

.capcodeManager {
	color: #ff00ff;
}

.capcodeMod {
	color: #770099;
}

.capcodeDev {
	color: #0000ff;
}

.capcodeJanitor {
	color: #3366cc;
}

#adminNavBar {
	display: flex;
  flex-wrap: wrap;
	justify-content: center;
	gap: 0 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.adminNavLink {
	display: inline-block;
}

.adminNavLink::before {
	content: "[";
}

.adminNavLink::after {
	content: "]";
}

#adminPageContent,
.modulePageContent {
	text-align: center;
}

#adminPageContent ul,
.modulePageContent ul {
	margin: 1em auto;
	text-align: left;
}

#adminPageContent table,
.modulePageContent table {
	margin: 0 auto;
	text-align: left;
}

#adminPageContent table th,
.modulePageContent table th {
	text-align: center;
}

#adminPageContent .reply,
.modulePageContent .reply {
	background-color: var(--color-bg-reply);
}

.buttonSection {
	margin-top: 0.5em;
}

#adminOptionContainer label {
	display: inline-block;
}

#adminPostFilterTable td {
	text-align: left;
}

#viewingAllFrom {
	font-weight: var(--font-weight-bold);
	text-align: center;
}

#adminNoticesContainer > ul {
	margin-top: 0;
}

#managePostsForm {
	display: block !important;
}

#tableManagePosts {
	font-size: var(--font-size-small);
}

#tableManagePosts .emoji,
#tableManagePosts .emote {
	max-height: 24px;
}

#tableManagePosts .colFunc,
#tableManagePosts .colImage {
	text-align: center;
}

#tableManagePosts .colFunc {
	min-width: 6em;
}

#tableManagePosts .colHost {
	min-width: 9.5em;
}

.username {
	font-size: var(--font-size-small);
}

.formItemDescription {
	max-width: 350px;
	font-size: var(--font-size-small);
}

.postlists .title {
	font-size: var(--font-size-regular);
}

.error,
.offline {
	color: #ff0000;
	font-weight: var(--font-weight-bold);
}

.good,
.online {
	color: #008000;
	font-weight: var(--font-weight-bold);
}

#actionlogForm {
	display: table;
	margin: 1em auto;
}

#actionlog {
	text-align: left;
}

#accountManagementList {
	margin: 0;
}

#inputGlobalMessage {
	width: 100%;
}

.pendingDeletion {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

/************************ Ban management*******************************/

#banForm {
	margin: 1em auto;
	max-width: 640px;
}

#banForm #bandays {
	width: 100%;
	max-width: 4em;
}

#banForm #banprivmsg,
#banForm #banmsg {
	width: 100%;
	height: 5em;
}

#bigredbutton {
	background-color: #ff0000;
	color: white;
	border-style: outset;
	border-width: 3px;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 1.2em;
	font-weight: var(--font-weight-bold);
	cursor: pointer;
}

#bigredbutton:active:hover {
	border-style: inset;
}

#banTableContainer {
	overflow: auto;
}

#banTable .colDel {
	text-align: center;
}

/************************ Ban screen **********************************/

#banScreen {
	display: flex;
	gap: 0.5em;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-bg-reply);
	max-width: 800px;
	margin: 0 auto;
	padding: 0.5em;
}

#banScreenText {
	flex: 1;
	vertical-align: top;
	text-align: left;
}

#banimg {
	border: 1px solid;
	max-width: 100%;
	width: 300px;
	height: auto;
}

#hrBan {
	clear: both;
}

@media screen and (max-width: 640px) {
	#banScreen {
    flex-direction: column;
	}

	#banimg {
    width: 100%; /* Makes the image container fill the width */
  }
}

/************************ Overboard ***********************************/

.boardFilterList {
	padding-left: 0;
	text-align: left;
  list-style: none;
}

.filterSelectBoardItem {
	text-align: left;
}

/************************ Blotter *************************************/

#newBlotterFormTable {
	margin: 0 auto;
}

#newBlotterFormTable #msg {
	width: 20em;
	max-width: 100%;
	max-width: calc(100vw - 6.5em);
}

.blotterListItem {
	text-align: left;
}

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

.blotterListShowAll {
	text-align: center;
}

/************************ EXIF ****************************************/

.exifInfoList {
	display: table;
	margin: 1em auto;
}

/************************ Mobile **************************************/

@media screen and (max-width: 600px) {
	.neomenuEnabled .toplinks {
		width: 100%;
		margin: 0 0 0.25em;
	}

	.neomenuTitle {
		padding: 0;
	}

	.neomenu h1,
	.neomenu h2,
	#adminNavBar {
		line-height: 2;
	}

	.neomenu h1 {
		padding: 0 0.25em;
	}

	.neomenuList .extr {
		padding: 0.5em 0.25em;
	}

	.formattingDetails {
		margin: 0.5em 0;
	}

	.bbcodeButton {
		font-size: var(--font-size-regular);
	}

	#catalogSettings,
	#catalogSortForm {
		float: none;
		text-align: center;
	}
}

@media screen and (max-width: 450px) {
	#topiclist {
		line-height: 1.5;
	}

	#adminOptionContainer {
		display: table;
		margin: 0 auto;
	}

	#adminOptionContainer label {
		display: block;
		text-align: left;
	}
}

/* The anti-spam rule form, opened from a post's menu. A kkwm window sizes itself to its contents
   and clips whatever overflows, so the form is bounded against the viewport and scrolls inside
   the window instead. Only applies in a window; the admin page shows the same form full height. */
.window .newEntryForm {
	width: min(520px, calc(100vw - 60px));
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 8px;
}

/************************ Error page ******************************/

/* The blanket error's image. Width/height are on the tag so the page does not reflow when it
   loads; this keeps it inside a narrow viewport without losing that aspect ratio. */
.errorImage {
	max-width: 100%;
	height: auto;
}