.admin {
	padding: 4px;
	border-radius: 4px;
	background: green;
	margin: 6px;
	width: 200px;
	display: inline-block;
}
.admin.protected {
	background: red;
}
.admin INPUT[type="submit"] {
	width: 100%;
}
.admin.protected INPUT[type="submit"] {
	width: 90%;
}


.bbcode {
	overflow-wrap: anywhere;
}
.bbcode BLOCKQUOTE {
	border: 1px solid black;
	padding: 8px;
	background: #DDD;
}
.bbcode .anchor A.alink {
	visibility: hidden;
}
.bbcode .anchor:hover A.alink {
	visibility: visible;
}

.comment {
	text-align: left;
	position: relative;
	overflow-wrap: anywhere;
}
.comment IMG {
	max-width: 100%;
}
.comment .info {
	visibility: hidden;
	text-align: center;
	padding: var(--block-padding);
	background: var(--block);
	border: 1px solid var(--block-border);
	position: absolute;
	top: 0;
	left: -180px;
	width: 180px;
	z-index: 1;
	box-shadow: 0 0 4px #000;
	border-radius: 4px;
}
.comment:hover .info {
	visibility: visible;
}

.comment_add INPUT:not([type="checkbox"]):not([type="radio"]),
.comment_add TEXTAREA,
.comment_add BUTTON,
.comment_add SELECT {
	width: 100%;
}

#comment-list-recent .more {
	display: block;
	padding-top: 8px;
}
.comment_big_list {
	display: flex;
	gap: 1em;
}
.comment_big_list .thumb {
	flex: 0;
}
.comment_big_list .comment_list {
	flex: 1;
	border-left: 1px solid var(--block-border);
}
.comment_big_list .comment {
	margin-left: 0;
}

/* checkbox, title, doc link */
.ext-list TD:nth-child(1) {
    width: 1em;
}
.ext-list TD:nth-child(2) {
    width: 12em;
}
.ext-list TD:nth-child(3) {
    width: 1em;
}

#handle_pixel_media IMG {
    max-width: 100%;
}

.command_example {
	margin: 12pt;
	padding-left: 16pt;
}

.command_example code {
    padding:4pt;
    border: dashed 2px black;
    background: inherit;
}

.command_example p {
    padding-left: 16pt;
}

@media (min-width: 750px) {
    .command_example code {
        display: table-cell;
        width: 256px;
    }

    .command_example p {
        display: table-cell;
    }
}

SECTION#image-list {
	box-shadow: none;
}
SECTION#image-list .blockbody {
	background: none;
	border: none;
	padding: 0px;
	text-align: left;
}
.shm-image-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, calc(var(--thumb-width) + 42px) );
	place-items: center;
}
.shm-image-list .thumb {
	margin-bottom: 8px;
}

.setupblocks {
	column-width: 400px;
	column-gap: 1em;
	max-width: 1200px;
	margin: auto;
}
.setupblocks > .setupblock:first-of-type { margin-top: 0; }

.setupblock {
	break-inside: avoid;
	text-align: center;
}
.setupblock TEXTAREA {
	width: 100%;
	font-size: 0.75rem;
	resize: vertical;
}
.setupblock SELECT[multiple] {
	width: 100%;
}

.advanced_settings INPUT {
	width: 100%;
}

#Setupmain {
	box-shadow: none;
}
#Setupmain>.blockbody {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}
.setupblock .form {
	width: 100%;
}
.setupblock .form TH {
	font-weight: normal;
}
.setupblock .advanced {
    color: var(--danger-color);
    background: var(--danger-background);
}
.setupsubmit {
	margin-top: 1em;
	padding: 1em;
	width: 100%;
}

:root {
	--added-background: lightgreen;
	--removed-background: lightcoral;

	--flash-color: #882;
	--flash-border: #660;
	--blink-base-color: #FF70;
	--blink-blink-color: #FF7F;
}

@media (prefers-color-scheme: dark) {
	:root {
		--added-background: green;
		--removed-background: coral;
	}
}

INPUT, TEXTAREA, SELECT, BUTTON {
	box-sizing: border-box;
	font-size: 1em;
}

TABLE.form {width: 300px;}
TABLE.zebra {width: 100%;}

TABLE.form TD, TABLE.form TH {vertical-align: middle;}
TABLE.form TBODY TR TD {text-align: left;}
TABLE.form TBODY TR TH {text-align: right; padding-right: 4px; width: 1%; white-space: nowrap;}
TABLE.form TBODY TR.header TD,
TABLE.form TBODY TR.header TH {text-align: center; width: auto;}
TABLE.form TD + TH {padding-left: 8px;}
TABLE.form INPUT:not([type="checkbox"]):not([type="radio"]),
TABLE.form SELECT,
TABLE.form TEXTAREA,
TABLE.form BUTTON {width: 100%;}

H1, H2, H3 {
    overflow-wrap: anywhere;
}

*[onclick],
H3[class~="shm-toggler"] {
    cursor: pointer;
}

@keyframes blink {
    0% {background-color: var(--blink-base-color);}
    25% {background-color: var(--blink-blink-color);}
    50% {background-color: var(--blink-base-color);}
    75% {background-color: var(--blink-blink-color);}
    100% {background-color: var(--blink-base-color);}
}
.blink {
    animation: blink 2s linear 1;
}

#flash {
    color: #444;
    background-color: var(--flash-color);
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--flash-border);
}
#flash B {
    display: block;
    padding: 8px;
    border-radius: var(--border-radius);
}

.tag {
    overflow-wrap: anywhere;
}

.prose {
    text-align: left;
}
.prose P:first-child {
    margin-top: 0;
}
.prose P:last-child {
    margin-bottom: 0;
}

TABLE#large_upload_form.form {
	width: 100%;
}

.mini_upload INPUT:not([type="checkbox"]):not([type="radio"]),
.mini_upload TEXTAREA,
.mini_upload BUTTON,
.mini_upload SELECT {
	width: 100%;
}

TABLE.form.image_info {
    width: 550px;
    max-width: 100%;
}

.image_info .edit {
    display: block;
}
.image_info .view {
    display: none;
}

.image_info.infomode-view .edit {
    display: none;
}
.image_info.infomode-view .view {
    display: block;
}

.image_info TEXTAREA {
    min-width: 100%;
    min-height: 3rem;
}
.image_info .image-info-sidebar-box {
    vertical-align: top;
}

.post_controls FORM {
    margin-bottom: 0.75em;
}
.post_controls FORM:last-child {
    margin-bottom: 0;
}

.autocomplete_completions {
    position: absolute;
    z-index: 1000;
    border: 1px solid #ccc;
    color: #000;
    background-color: #fff;
    padding: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}
.autocomplete_completions LI {
    padding: 0.15em;
}
.autocomplete_completions .selected {
    background-color: #ccc;
    outline: none;
}

.bulk_selected {
	outline: 3px solid blue;
}

.bulk_action {
	margin-top: 8pt;
}
.bulk_selector_controls table td {
	width: 33%;
}
#downtime #message, #downtime #login {
	text-align: center;
}
#downtime H3 {
	margin-top: 32px;
}
#downtime #login_table {
	margin: auto;
}


div#front-page h1 {font-size: 4rem; margin-top: 2em; margin-bottom: 0; text-align: center; border: none; background: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
div#front-page h1 A {text-decoration: none;}
div#front-page {text-align:center;}
div#front-page .space {margin-bottom: 1em;}
div#front-page div#links a {display: inline-block; margin: 0 0.5em;}
div#front-page li {list-style-type: none; margin: 0;}
@media (max-width: 800px) {
	div#front-page h1 {font-size: 3rem; margin-top: 0.5em; margin-bottom: 0.5em;}
}
div#front-page > #search > form {margin: 0 auto;}
div#front-page > #search > form > input[type=submit]{padding: 4px 6px;}
#counter {display: grid; justify-content: center; margin: auto; max-width: 66%;}
.counter-img {grid-row: 1; max-width: 100%; height: auto;}

:root {
   	--level-debug: #999;
	--level-info: var(--text);
	--level-warning: #880;
	--level-error: #C50;
	--level-critical: #F00;
}
/* tweak for dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --level-debug: #666;
        --level-info: var(--text);
        --level-warning: #FFA;
        --level-error: #F88;
        --level-critical: #F55;
    }
}
SPAN.level-debug { color: var(--level-debug); }
SPAN.level-info { color: var(--level-info); }
SPAN.level-warning { color: var(--level-warning); }
SPAN.level-error { color: var(--level-error); }
SPAN.level-critical { color: var(--level-critical); }

.blur IMG {
	filter: blur(5px);
	transition: all .3s ease-in;
}
.blur IMG:hover {
	filter: blur(0px);
}
.thumb IMG {
	border-width: 2px !important;
}

.shm-thumb-has_child img {
	border-color: lime !important;
}

.shm-thumb-has_parent img {
	border-color: #cc0 !important;
}

.shm-thumb-has_child.shm-thumb-has_parent img {
	border-color: lime #cc0 #cc0 lime !important;
}

#reportedimage .reason {
	max-width: 30em;
	overflow-wrap: anywhere;
}
#reportedimage .formstretch INPUT {
	width: 100%;
}

.stats-table{display:inline-table;width:auto;}
.stats-container{display:inline-block;margin:10px;}
.tagcategoryblock {
	margin:0.6rem 1rem 0.6rem 0;
	padding:0.5rem 0.6rem 0.7rem;
	width:18rem;
	border:1px solid #AAAAAA;
	border-radius:0.25rem;
	display:inline-block;
}
.tagcategoryblock table {
	width:100%;
	border-spacing:0;
}
.tagcategoryblock input, .tagcategoryblock span {
	width:100%;
	height:100%;
}
.tagcategoryblock td:first-child {
	padding:0.3rem 0.7rem 0.4rem 0;
	text-align:right;
	width:40%;
}
.tagcategoryblock td:last-child {
	width:60%;
}
.tagcategoryblock td:last-child span {
	width:7ch;
	padding:0.24rem 0.7rem 0.5rem 0;
}
.tagcategoryblock button {
	width:100%;
	margin-top:0.4rem;
	padding:0.2rem 0.6rem;
}

.tagcategoryblock input[type="color"] {
	height: 22px;
}

.tagcategoryblock .tc_colorswatch {
	display:inline-block;
	vertical-align:middle;
	height:1.25rem;
	width:1.25rem;
	border-radius:4px;
}

/* State-based visibility rules */
/* Hide all state-dependent elements by default */
.tagcategoryblock .tc-view,
.tagcategoryblock .tc-edit,
.tagcategoryblock .tc-delete {
	display: none;
}

/* In viewing mode: show view elements only */
.tagcategoryblock.tc-viewing .tc-view {
	display: inline-block;
}

/* In editing mode: show edit elements only */
.tagcategoryblock.tc-editing .tc-edit {
	display: block;
}

/* In deleting mode: show edit and delete elements */
.tagcategoryblock.tc-deleting .tc-edit,
.tagcategoryblock.tc-deleting .tc-delete {
	display: block;
}

.added-tag{background:var(--added-background);}
.deleted-tag{background:var(--removed-background);text-decoration:line-through;}

.wiki-page {
	text-align: left;
}
.wiki-footer {
	text-align: center;
}
.wiki-all-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
}
.wiki-all-grid A {
	font-size: 1.5em;
	background-color: #8881;;
}
.diff-html TD {
    text-align: left;
}

.glightbox-container {
	.gprev, .gnext {
		display: none;
	}

	.gslide-description {
		background: var(--page);
	}

	.gdesc-inner {
		padding: 1rem;
	}

	.gslide-title {
		color: var(--text);
		margin-top: 0;
		margin-bottom: 1rem;
	}
}
#handle_image_media IMG.fit-full {
    max-width: none;
    max-height: none;
}

#handle_image_media IMG.fit-width {
    max-width: 100%;
    max-height: none;
}

#handle_image_media IMG.fit-both {
    max-width: 100%;
    max-height: 95vh;
}

#handle_video_media VIDEO {
    width: 100%;
    max-height: 85vh;
    background: black;
}

TABLE#threadPosts {
	table-layout:fixed;
	overflow-wrap:anywhere;
	text-align:left;
	width: 100%;
}
TH#threadHeadUser{
	width: 15%;
	overflow: hidden;
}
DIV#returnLink{
	float:left;
	font-size:150%;
}
TD.forumUser, TD.forumMessage{
	vertical-align:top !important; /*Someone, somewhere will hate me*/
	text-align:left !important; /*Someone, somewhere will hate me*/
}
DIV.postDate {
	float:left;
}
DIV.deleteLink , DIV.postNumber{
	float:right;
}
DIV.postMessage {
	text-align:left;
}

:root {
	color-scheme: light dark;

	/* BeanBooru redesign: one value per slot via light-dark(light, dark).
	   The plain declaration above each one is the fallback for older
	   browsers that do not understand light-dark() -- they get light mode.
	   A manual theme choice works by setting color-scheme on <html>. */

	--page: #FFFFFF;
	--page: light-dark(#FFFFFF, #1E1E2C);
	--text: #000000;
	--text: light-dark(#000000, #E8E8EC);
	--bg-overlay: rgba(255, 255, 255, 0.9);
	--bg-overlay: light-dark(rgba(255, 255, 255, 0.95), rgba(30, 30, 44, 0.94));

	--danger-color: #000000;
	--danger-color: light-dark(#000000, #E8E8EC);
	--danger-background: #FAA;
	--danger-background: light-dark(#FAA, #955);

	--link-first: #FF3333;
	--link-first: light-dark(#FF3333, #FF5A5B);
	--link-default: #006FFA;
	--link-default: light-dark(#006FFA, #009BE9);
	--link-hover: #33CFFF;
	--link-hover: light-dark(#0057C7, #33CFFF);
	--link-header: #000000;
	--link-header: light-dark(#000000, #E8E8EC);

	--header-selected: #EEEEFF;
	--header-selected: light-dark(#EEEEFF, #2C2D3F);
	--footer-fg: #555555;
	--footer-fg: light-dark(#555555, #9A9AAE);
	--tag-count: #AAAAAA;
	--tag-count: light-dark(#767684, #8E8EA4);
	--comment-meta: gray;
	--comment-meta: light-dark(#666672, #9A9AAE);

	--paginator-border: #EEEEEE;
	--paginator-border: light-dark(#D8D8E0, #3A3B50);
	--paginator-hover-bg: blue;
	--paginator-hover-bg: light-dark(#006FFA, #009BE9);
	--paginator-hover-fg: #FFFFFF;

	--block-border: #AAAAAA;
	--block-border: light-dark(#D8D8E0, #3A3B50);

	--zebra-heading-fg: #171BB3;
	--zebra-heading-fg: light-dark(#171BB3, #E8E8EC);
	--zebra-hover-bg: #FFD;
	--zebra-hover-bg: light-dark(#F4F4F8, #2C2D3F);

	/* named slots for the identity colours that used to be hardcoded */
	--action: #D81B45;
	--action: light-dark(#C2001D, #FF8FB3);
	--action-strong: #C2001D;
	--action-strong: light-dark(#9E0017, #E60023);
	--action-fg: #FFFFFF;
	--action-fg: light-dark(#FFFFFF, #1E1E2C);
	--nav: #006FFA;
	--nav: light-dark(#006FFA, #009BE9);

	--panel: #F7F7F9;
	--panel: light-dark(#F7F7F9, #262636);
	--panel-head: #ECECF1;
	--panel-head: light-dark(#ECECF1, #2F3043);
	--panel-border: #D8D8E0;
	--panel-border: light-dark(#D8D8E0, #3A3B50);
	--panel-fg-muted: #60606C;
	--panel-fg-muted: light-dark(#60606C, #A0A0B4);
}

/* A manual choice overrides the device setting. Set by the theme toggle. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }


:root {
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size-adjust: none;
	font-stretch: normal;
	font-size: 87.5%;
	line-height: normal;
	-x-system-font: none;

	/* BeanBooru redesign: one font stack and one type scale */
	--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fs-xs: 0.75rem;
	--fs-sm: 0.8125rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
}

HEADER {
	grid-column: 1 / 3;
	grid-row: 1;
	margin-bottom: 0.9rem;
	text-align: left;
}

HEADER h1 {
	text-align: left;
}

HEADER #site-title {
	margin-left: 30px;
	font-family: var(--font-ui);
}
HEADER #site-title IMG {
	vertical-align: middle;
	margin-right: .5rem;
}

HEADER ul#navbar,
HEADER ul#subnavbar {
	font-family: var(--font-ui);
}

HEADER ul#navbar {
	margin: 0;
	padding: 0 30px 0 30px;
}

HEADER ul#navbar li {
	margin: 0;
}

HEADER ul#navbar li a {
	display: inline-block;
	margin: 0 0.15rem;
	padding: 0.4rem 0.6rem;
}

HEADER ul#navbar li:first-child a {
	margin-left: -0.6rem;
	color: var(--link-first);
	font-weight: bold;
}

HEADER ul#navbar li a.current-page {
	background-color: var(--header-selected);
	font-weight: bold;
}

HEADER ul#subnavbar {
	padding: 0 30px 0 30px;
	background-color: var(--header-selected);
}

HEADER ul#subnavbar li {
	display: inline-block;
	margin: 0 0.15rem;
	padding: 0.4rem 0.6rem;
}

HEADER ul#subnavbar li:first-child {
	margin-left: -0.6rem;
}

html, body {
	min-height: 100vh;
	background-color: var(--page);
	background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), url(../../../themes/danbooru2/bg.png);
	background-repeat: no-repeat, repeat;
}

body {
	color: var(--text);
}

BODY.layout-grid {
	display: grid;
	grid-template-columns: 11.5rem auto;
	grid-gap: 0 4rem;
}
BODY.layout-no-left NAV {
	display: none;
}
BODY.layout-no-left ARTICLE {
	margin-left: 2rem;
}

h1 {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0.35rem;
	font-size: 2rem;
}

h1 a {
	color: var(--link-header);
}

h3 {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0.2rem 0.2rem 0.2rem 0;
	font-size: 1rem;
}

h4 {
	font-size: var(--fs-lg);
}

h5 {
	font-size: var(--fs-base);
}

table.zebra {
	border-spacing: 0;
	border-collapse: collapse;
}

table.zebra>tbody>tr:hover {
	background: var(--zebra-hover-bg);
}

table.zebra th {
	padding-right: 0.4rem;
	color: var(--zebra-heading-fg);
}

table.zebra td {
	margin: 0;
	padding-right: 0.6rem;
	border: 1px dotted #EEE;
}

table.zebra th {
	margin: 0;
	text-align: left;
}

thead {
	font-weight: bold;
	-moz-background-clip: border;
	-moz-background-inline-policy: continuous;
	-moz-background-origin: padding;
}

td {
	vertical-align: top;
}

#subtitle {
	margin: auto;
	width: 256px;
	border-top: medium none;
	text-align: center;
	font-size: 0.75em;
}

#short-wiki-description {
	padding: 0 2em;
	font-size: 1.2em;
}

#short-wiki-description h2 {
	padding-bottom: 0.2em;
}

FOOTER {
	grid-column: 1 / 3;
	grid-row: 3;
	clear: both;
	border-top: solid 1px var(--block-border);
	margin-top: 1rem;
	text-align: center;
	color: var(--footer-fg);
	font-size: 0.8rem;
}

FOOTER>DIV {
	margin: 1rem 2rem;
}

CODE {
	background: #DEDEDE;
	font-size: 0.9rem;
}

form {
	margin: 0;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

NAV {
	grid-column: 1;
	grid-row: 2;
	padding: 0 1rem 0.2rem 2rem;
	width: 11.5rem;
	text-align: left;
}

NAV section+section {
	margin-top: 1rem;
}

NAV table {
	width: 15rem;
}

NAV td {
	vertical-align: middle;
}

NAV input {
	padding: 0;
	width: 100%;
}

NAV select {
	padding: 0;
	width: 100%;
}

NAV h3 {
	text-align: left;
}

#comments p {
	overflow: hidden;
	max-width: 150px;
	width: 15rem;
	text-align: left;
}

SPAN.comment-info SPAN {
    margin-right: 2em;
}
SPAN.comment-info SPAN B {
    margin-right: 0.5em;
}

TABLE.tag_list {
	width: auto;
	border-collapse: collapse;
}

TABLE.tag_list>THEAD {
	display: none;
}

TABLE.tag_list>TBODY>TR>TD {
	display: inline;
	padding: 0;
	line-height: 1em;
}

TABLE.tag_list>TBODY>TR>TD:after {
	content: " ";
}

.tag_count {
	display: inline-block;
	margin-left: 0.4rem;
	color: var(--tag-count);
}

.more {
	content: "More â";
}

.comment {
	margin-bottom: 8px;
}

.comment .meta {
	width: 15rem;
	color: var(--comment-meta);
}

.comment TD {
	text-align: left;
}

.withleft {
	margin-left: 1rem;
}

div#paginator {
	display: block;
	clear: both;
	padding: 2em 0 1em;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
}

.paginator {
	margin: 16px;
	text-align: center;
}

div#paginator b {
	margin: 3px;
	padding: 4px 8px;
}

div#paginator a {
	margin: 3px;
	padding: 4px 8px;
}

div#paginator a:hover {
	background: var(--paginator-hover-bg) none repeat scroll 0 0;
	color: var(--paginator-hover-fg);
}

#pagelist {
	margin-top: 32px;
}

#large_upload_form {
	width: 600px;
}

.setupblock,
.tagcategoryblock {
	margin: 0.6rem 1rem 0.6rem 0;
	padding: 0.5rem 0.6rem 0.7rem;
	border: 1px solid var(--block-border);
	border-radius: 0.25rem;
}

.tagcategoryblock {
	display: inline-block;
	width: 18rem;
}

.tagcategoryblock table {
	width: 100%;
	border-spacing: 0;
}

.tagcategoryblock input,
.tagcategoryblock span {
	width: 100%;
	height: 100%;
}

.tagcategoryblock td:first-child {
	padding: 0.3rem 0.7rem 0.4rem 0;
	text-align: right;
	width: 40%;
}

.tagcategoryblock td:last-child {
	width: 60%;
}

.tagcategoryblock td:last-child span {
	padding: 0.24rem 0.7rem 0.5rem 0;
	display: block;
}

.tagcategoryblock button {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.2rem 0.6rem;
}

/* username size is set in the redesign block at the end of this file */

* {
	margin: 0;
	padding: 0;
	font-family: var(--font-ui);
}

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

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

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

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

ul.flat-list {
	display: block;
	margin: 0;
	padding: 0;
}

ul.flat-list * {
	display: inline;
	text-align: left;
}

ul.flat-list li {
	margin: 0 1.3em 0 0;
	list-style-type: none;
	text-align: left;
	font-weight: bold;
}

ul.flat-list li a {
	font-weight: normal;
}

#tips {
	margin-left: 16px;
}

#blotter1 {
	position: relative;
	margin-right: 16px;
	margin-left: 16px;
	font-size: 90%;
}

#blotter2 {
	margin-right: 16px;
	margin-left: 16px;
	font-size: 90%;
}

#flash {
	background: #FDF5D9;
	border: 1px solid #FCEEC1;
	margin: 1rem 0;
	padding: 1rem;
	text-align: center;
	border-radius: 0.5rem;
}

ARTICLE {
	grid-column: 2;
	grid-row: 2;
	margin-right: 1rem;
}

ARTICLE section+section {
	margin-top: 1rem;
}

form+form {
	margin-top: 0.5rem;
}

#Imagemain h3 {
	display: none;
}

@media screen and (width <=800px) {
	BODY.layout-grid {
		grid-template-columns: auto;
	}

	HEADER {
		grid-column: 1;
		grid-row: 1;
	}

	ARTICLE {
		grid-column: 1;
		grid-row: 2;
		margin: 0 16px;
	}

	NAV {
		grid-column: 1;
		grid-row: 3;
		margin: auto;
		width: auto;
	}

	FOOTER {
		grid-column: 1;
		grid-row: 4;
	}

	.withleft {
		margin: 0;
	}

	#image-list .blockbody {
		margin: 0;
	}

	.shm-image-list {
		justify-content: center;
	}
}

/* BeanBooru: let line breaks in the front page welcome message actually show */
#message { white-space: pre-line; }

/* BeanBooru: comment like button - pink when not liked, red when liked */
.comment-like-btn {
	display: inline-block;
	width: auto;
	margin-top: 0.3em;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	border: 1px solid var(--action);
	background: transparent;
	color: var(--action);
	font-weight: bold;
	cursor: pointer;
}
.comment-like-btn:hover {
	background: var(--action);
	color: var(--action-fg);
}
.comment-like-btn.liked {
	border-color: var(--action-strong);
	background: var(--action-strong);
	color: white;
}
.comment-like-btn.liked:hover {
	background: var(--action-strong);
	border-color: var(--action-strong);
}
.comment-like-count {
	color: var(--action-strong);
	font-weight: bold;
}

/* BeanBooru: site logo above the front page title */
.site-logo { display: block; margin: 0 auto; max-height: 360px; width: auto; }
body.layout-front-page div#front-page h1 { margin-top: 0.2em; }  /* BeanBooru: ext/home/style.css sets 2em, meant for an empty top before the logo existed */

/* BeanBooru: small version number beside the site title */
h1 .site-version { font-size: 0.75rem; font-weight: normal; opacity: 0.6; margin-left: 0.4em; vertical-align: middle; }
div#front-page h1 .site-version { font-size: 0.9rem; }

/* BeanBooru: push the credit and the serving line to the bottom of the front page */
body.layout-front-page div#front-page { min-height: 100vh; display: flex; flex-direction: column; }
body.layout-front-page div#front-page #foot { margin-top: auto; margin-bottom: 1em; }

/* BeanBooru: make the site credit line bold and bigger */
#site-credit small small { font-weight: bold; font-size: 1.2rem; }

/* BeanBooru: make the Upload link stand out, on every page */
a.upload-tab, #links a[href$="q=upload"] { color: #c00; font-weight: bold; }


/* BeanBooru 2026-09-15: the comment "Del" control became a POST form (CSRF fix).
   Keep it looking and sitting exactly like the inline text link it replaced. */
form[name="comment_del"] { display: inline; }
input.comment-del-btn {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}


/* ==========================================================================
   BeanBooru redesign, part 2: panels
   Shimmie wraps each section of a page in <section><h3/><div.blockbody/>.
   The stock theme styled none of it, so sections had no visible container.
   ========================================================================== */

ARTICLE > SECTION,
NAV > SECTION {
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 3px;
	margin-bottom: 0.75rem;
	overflow: hidden;
}

ARTICLE > SECTION > h3,
NAV > SECTION > h3 {
	padding: 0.4rem 0.6rem;
	background: var(--panel-head);
	border-bottom: 1px solid var(--panel-border);
	border-left: 2px solid var(--action);
	font-size: var(--fs-sm);
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

ARTICLE > SECTION > h3.shm-toggler,
NAV > SECTION > h3.shm-toggler {
	cursor: pointer;
}

.blockbody {
	padding: 0.6rem;
}

/* form controls must not spill out of their new panel */
.blockbody input,
.blockbody select,
.blockbody textarea,
.blockbody button {
	max-width: 100%;
	box-sizing: border-box;
}

/* the thumbnail grid needs its own tighter padding */
#image-list > .blockbody {
	padding: 0.4rem;
}

/* stock margin rule now doubles up with the panel margin */
ARTICLE SECTION+SECTION {
	margin-top: 0;
}

/* ==========================================================================
   BeanBooru redesign, part 3: the thumbnail grid
   The stock grid centred each thumb in an auto-height row, so every row was
   as tall as its tallest image and the rows never lined up. Fixed square
   cells fix that. Everything is keyed off --thumb-width, which Shimmie
   injects inline from the board setting, so changing the thumbnail size
   in the admin panel rescales this layout with no CSS change.
   ========================================================================== */

.shm-image-list {
	/* Display size is deliberately NOT var(--thumb-width). The stored
	   thumbnail is 300px so that it stays sharp on high-density phone
	   screens; the cell it is drawn into stays around 200px so the grid
	   stays dense. Tying the two together gave three huge columns. */
	--bb-cell: 200px;
	grid-template-columns: repeat(auto-fill, minmax(var(--bb-cell), 1fr));
	gap: 6px;
	place-items: stretch;
}

.shm-image-list .thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	padding: 4px;
	aspect-ratio: 1 / 1;
	background: var(--panel-head);
	border: 1px solid var(--panel-border);
	border-radius: 3px;
	overflow: hidden;
}

.shm-image-list .thumb IMG {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.shm-image-list .thumb:hover {
	border-color: var(--action);
	outline: 1px solid var(--action);
}

/* dimensions on hover, read straight off the markup Shimmie already emits */
.shm-image-list .thumb::after {
	content: attr(data-width) " x " attr(data-height);
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2px 4px;
	background: rgba(0, 0, 0, 0.78);
	color: #FFFFFF;
	font-size: var(--fs-xs);
	text-align: center;
	opacity: 0;
	transition: opacity 0.12s ease;
	pointer-events: none;
}

.shm-image-list .thumb:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.shm-image-list .thumb::after { transition: none; }
}

/* ==========================================================================
   BeanBooru redesign, part 4: comments, forms and controls
   ========================================================================== */

/* The username was 1.5em bold, so it shouted louder than the comment itself.
   The comment is the content; who wrote it is metadata. */
.comment .username {
	color: var(--nav);
	font-size: var(--fs-base);
	font-weight: bold;
}

.comment TD.meta {
	width: 11rem;
	padding-right: 0.8rem;
	border-right: 1px solid var(--panel-border);
	color: var(--comment-meta);
	font-size: var(--fs-sm);
	vertical-align: top;
}

.comment TD.meta TIME {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--fs-xs);
}

.comment TD.meta .comment-like-count {
	display: inline-block;
	margin-top: 0.3rem;
	color: var(--action-strong);
}

.comment .bbcode {
	display: block;
	padding-left: 0.8rem;
	line-height: 1.5;
}

/* the Date / Uploader / Rating / Tags strip above each comment thread */
/* .comment-info wraps the whole thread -- the meta line, every comment AND
   the reply form -- so it must NOT become a flex row. Style only its own
   direct span children, which are the meta fields. */
.comment-info {
	display: block;
	color: var(--panel-fg-muted);
	font-size: var(--fs-sm);
}

.comment-info > SPAN {
	display: inline-block;
	margin-right: 1.2rem;
}

.comment-info B {
	margin-right: 0.4em;
	color: var(--text);
}

.comment-info > TABLE.comment {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--panel-border);
	width: 100%;
}

.comment-info > DIV.comment_add {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--panel-border);
}

.comment_add TEXTAREA {
	max-width: 42rem;
}

/* ---- form controls, site-wide ---- */

INPUT[type="text"],
INPUT[type="password"],
INPUT[type="email"],
INPUT[type="search"],
SELECT,
TEXTAREA {
	padding: 0.3rem 0.45rem;
	background: var(--page);
	border: 1px solid var(--panel-border);
	border-radius: 3px;
	color: var(--text);
	font-size: var(--fs-sm);
}

INPUT[type="text"]:focus,
INPUT[type="password"]:focus,
INPUT[type="email"]:focus,
INPUT[type="search"]:focus,
SELECT:focus,
TEXTAREA:focus {
	border-color: var(--nav);
	outline: 1px solid var(--nav);
}

TEXTAREA {
	width: 100%;
	line-height: 1.45;
	resize: vertical;
}

BUTTON,
INPUT[type="button"] {
	padding: 0.3rem 0.8rem;
	background: var(--panel-head);
	border: 1px solid var(--panel-border);
	border-radius: 3px;
	color: var(--text);
	font-size: var(--fs-sm);
	cursor: pointer;
}

BUTTON:hover,
INPUT[type="button"]:hover {
	border-color: var(--nav);
	color: var(--nav);
}

/* a submit is the one thing on a form that DOES something, so it gets the
   action colour, per the split: red/pink acts, blue navigates */
/* A submit does something, so it carries the action colour -- but as an
   outline that fills on hover, matching the comment like button already on
   the site. A solid pink slab was far too loud for how often these appear. */
INPUT[type="submit"] {
	width: auto;
	padding: 0.3rem 0.9rem;
	background: transparent;
	border: 1px solid var(--action);
	border-radius: 3px;
	color: var(--action);
	font-size: var(--fs-sm);
	font-weight: bold;
	cursor: pointer;
}

INPUT[type="submit"]:hover {
	background: var(--action);
	color: var(--action-fg);
}

INPUT[type="submit"]:focus-visible,
BUTTON:focus-visible {
	outline: 2px solid var(--nav);
	outline-offset: 1px;
}

/* ==========================================================================
   BeanBooru redesign, part 4b: narrow screens
   The stock theme drops the sidebar below the article below 800px, which is
   right. These rules stop the dense desktop layout from breaking there.
   ========================================================================== */

@media screen and (width <= 800px) {
	ARTICLE {
		margin: 0 8px;
	}

	NAV {
		padding: 0 8px;
		width: auto;
	}

	/* thumbnails get smaller cells so a phone still shows a grid, not a list */
	.shm-image-list {
		--bb-cell: 140px;
		gap: 4px;
	}

	/* the comment meta column cannot hold 11rem on a phone; stack it instead */
	.comment TABLE,
	.comment TBODY,
	.comment TR,
	.comment TD.meta,
	.comment TD {
		display: block;
		width: auto;
	}

	.comment TD.meta {
		width: auto;
		padding: 0 0 0.3rem 0;
		border-right: 0;
		border-bottom: 1px solid var(--panel-border);
	}

	.comment TD.meta TIME,
	.comment TD.meta .comment-like-count {
		display: inline-block;
		margin-right: 0.8rem;
	}

	.comment .bbcode {
		padding-left: 0;
		padding-top: 0.4rem;
	}

	/* the post page lays its thumbnail and text out in a 220px table cell */
	.comment_big_list TD {
		display: block;
		width: auto !important;
	}

	HEADER #site-title {
		margin-left: 8px;
		font-size: var(--fs-xl);
	}

	HEADER ul#navbar {
		padding: 0 8px;
	}

	/* the two nav rows wrap to seven lines on a phone and pushed the grid
	   most of a screen down; tighten the rows without shrinking tap targets */
	HEADER ul#navbar,
	HEADER ul#subnavbar {
		line-height: 1.3;
	}

	HEADER ul#navbar LI A,
	HEADER ul#subnavbar LI A {
		padding: 0.2rem 0.4rem;
	}

	HEADER {
		margin-bottom: 0.5rem;
	}
}

/* ==========================================================================
   BeanBooru redesign, part 5: the dark/light toggle button
   ========================================================================== */

#theme-toggle-wrap {
	position: absolute;
	top: 0.6rem;
	right: 1rem;
}

#theme-toggle-form {
	display: none;
}

.theme-toggle {
	padding: 0.2rem 0.7rem;
	background: var(--panel-head);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	color: var(--text);
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.theme-toggle:hover {
	border-color: var(--nav);
	color: var(--nav);
}

HEADER {
	position: relative;
}

@media screen and (width <= 800px) {
	#theme-toggle-wrap {
		top: 0.4rem;
		right: 0.5rem;
	}
}

/* The search form ships inline style='width:75%' / '20%', which assumed the
   block had no padding. Now that panels have padding those overflow, clipping
   the Go button. Flex makes the row fit whatever space it actually has.
   !important is needed only because the widths are inline attributes. */
#Searchleft .blockbody FORM {
	display: flex;
	gap: 0.3rem;
	align-items: center;
}

#Searchleft .blockbody FORM P {
	display: none;
}

#Searchleft .blockbody FORM INPUT[type="text"] {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
}

#Searchleft .blockbody FORM INPUT[type="submit"] {
	flex: 0 0 auto;
	width: auto !important;
}

/*# sourceMappingURL=danbooru2.1789491738.2830abcf4496f0a62ac9b14e5a2f3837.css.map */