jschan/gulp/res/css/style.css

body {
	font-family: arial, helvetica, sans-serif;
	font-size: 10pt;
	color: var(--font-color);
	background: linear-gradient(var(--background-top) 3em, var(--background-rest) 230px);
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

main {
	margin: 3em 0 0 0;
}
main.minimal {
	margin: 0;
	background: var(--post-color);
	height: 100vh;
}

.form-post {
	display: flex;
	flex-direction: column;
	max-width: 100%;
}

.row {
	display: flex;
	flex-direction: row;
	max-width: 100%;
	margin-bottom: 1px;
	overflow: hidden;
	flex-shrink: 0;
}

.col {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.wrap {
	flex-wrap: wrap;
}

.sb {
	justify-content: space-between;
}

.flexcenter {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.em {
	font-style: italic;
}

.strike {
	text-decoration: line-through;
}

@keyframes rainbow-anim {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 400% 0;
	}
}

.rainbow {
	background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: rainbow-anim 10s linear infinite;
	background-size: 400% 100%;
	text-shadow: #00000050 0px 0px 1px;
}

.underline {
	text-decoration: underline;
}

.bold {
	font-weight: bold;
}

pre {
	font-family: inherit;
	margin: 1em 2em;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.navbar {
	background: var(--navbar-color);
	box-shadow: 0 0 3px 1px var(--darken);
	border-bottom: 1px solid var(--post-outline-color);
	position: fixed;
	width: 100%;
	z-index: 2;
	top: 0;
}

.replies {
	padding-top: 5px;
	font-size: smaller;
	clear: both;
}

.code {
	text-align: left;
	border-style: solid;
	border-color: var(--darken);
	display: block;
	margin: 0.5em 0;
	overflow-x: auto;
	white-space: pre;
}

.aa {
	font-family: Monapo, Mona, 'MS Pgothic', 'MS P繧ｴ繧ｷ繝<EFBFBD>け', IPAMonaPGothic, 'IPA 繝｢繝翫<EFBFBD> P繧ｴ繧ｷ繝<EFBFBD>け', submona !important;
	font-size: 16px;
	display: block;
	overflow-x: auto;
	white-space: pre;
	max-width: calc(100vw - 50px);
}

.code:not(.hljs) {
	white-space: unset;
}

.code, .mono {
	background: var(--darken);
	padding: 2px;
	font-family: monospace;
	max-width: calc(100vw - 50px);
}
.twofactor { /* importants to try and prevent themes overriding */
	background: white!important;
	color: black!important;
	line-height: 1.15em!important;
	font-family: monospace!important;
	margin: 10px auto!important;
	letter-spacing: -0.2px!important;
}
.edit {
	background: transparent!important;
	border-color: transparent!important;
	width: 80px;
}
.fw, #filter-form {
	width: 100%;
}
.pr-20 {
	padding-right: 20px;
}
.ml-1 {
	margin-left: 1px;
}
.ml-5 {
	margin-left: 5px!important;
}
.mr-1 {
	margin-right: 1px!important;
}
.mr-5 {
	margin-right: 5px;
}
.mv-10 {
	margin: 10px 0;
}
.mt-10 {
	margin-top: 10px;
}
.mt-5 {
	margin-top: 5px;
}
.mt-1 {
	margin-top: 1px;
}
.mv-5 {
	margin: 5px 0;
}
.mr-0 {
	margin-right: 0px!important;
}
.mv-0 {
	margin: 0 auto;
}
.mb-10 {
	margin-bottom: 10px;
}
.ph-5 {
	padding: 0 5px;
}
.pv-5 {
	padding: 5px 0;
}
.vh {
	visibility: hidden!important;
}
#settings, .dummy-link {
	cursor: pointer;
}
#settings::after {
	content: attr(data-label);
}
.expand-omitted {
	background-color: var(--post-color);
	border: 1px solid var(--font-color);
	border-radius: 2px;
	vertical-align: bottom;
	margin-right: 5px;
}
#postform-dragHandle, #threadwatcher-dragHandle {
	flex-grow: 1;
	background: var(--darken);
	height: 1.75em;
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	width: 100%;
}

.wrapbar {
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}

.wrapbar + form hr:first-of-type {
	margin-top: 1px;
}

.pages, #livetext, #threadstats {
	box-sizing: border-box;
	padding: 10px;
	width: -moz-max-content;
	width: max-content;
	max-width: 100%;
	margin-bottom: 5px;
}

.pages.jsonly {
	padding: 8px;
}

a, a:visited, a.post-name {
	text-decoration: underline;
	color: var(--link-color);
}

.invalid-quote {
	cursor:pointer;
	text-decoration: line-through;
}

.post-message a {
	text-decoration: underline;
	color: var(--post-link-color);
}

.pages a, .stickynav a {
	text-decoration: none;
}

object {
	object-fit: contain;
}

.board-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.catalog-tile {
	padding: 5px;
	margin: 5px;
	text-align: center;
	height: 340px;
	width: 280px;
	overflow: hidden;
	border: 1px solid var(--post-outline-color);
	box-sizing: border-box;
	flex-grow: 1;
	max-width: 280px;
}

.catalog-tile:focus {
	overflow-y: auto;
}

p {
	margin: 5px;
}

.no-m-p {
	margin: 0px;
	padding: 0px;
}

.catalog-thumb {
	display: block;
	box-shadow: 0 0 3px black;
	width: auto;
	max-height: 100px;
	box-sizing: border-box;
	object-fit: cover;
	margin: 3px;
	padding: 2px;
}

.catalog-thumb.attachmentimg, .catalog-thumb.audioimg, .catalog-thumb.spoilerimg {
	height: 64px;
	width: 64px;
}

.catalog-thumb.small {
	max-height: 48px;
	max-width: 48px;
}

.ct-r1 {
	justify-content: center;
}

.ct-r2 {
	justify-content: space-evenly;
}

.upload-list {
	max-height: 75px;
	overflow-x: hidden;
	overflow-y: auto;
	max-width: 100%;
	/*scrollbar-width: none;*/
	border: 1px solid var(--input-borders);
	margin-top: 1px;
	display: none;
}
/*
.upload-list::-webkit-scrollbar { 
	display: none; 
}
*/
.upload-item {
	display: flex;
	align-items: center;
	position: relative;
}

.upload-item p {
	max-width: calc(100% - 85px);
	max-height: 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	position: absolute;
	margin-left: 60px;
}

.upload-item a {
	height: 50px;
	display: flex;
	align-items: center;
}

.upload-thumb {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.catalog {
	display:flex;
	align-items:flex-start;
	justify-content: center;
	flex-flow: row wrap;
}

.detected {
	background: #FAF8F8;
	color: #3060A8;
}

.horscroll {
	overflow-x:auto;
}

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

.spoiler:hover, .spoiler:hover a {
	color: white;
}

.spoiler:not(:hover) * {
	color: black;
	background: black!important;
}

.filelabel {
	position: relative;
	z-index: 1;
	cursor: pointer;
	border-style: dashed !important;
	justify-content: center;
	padding: 5px;
	min-width: 220px;
	flex-grow: 1;
	flex-direction: column;
	min-height: 38px;
}

.form-file {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
	align-items: center;
	display: flex;
	margin-top: 1px;
}

.banposts .thread {
	display: none;
	text-align: left;
}

.banposts:hover .thread {
	display: block;
	position: fixed;
	z-index: 1;
	left:10px;
	right:10px;
}

.ban {
	color: red;
	font-weight: bold;
}
.reason::before {
	content:"\0028";
}
.reason::after {
	content:"\0029";
}

.edited {
	font-style: italic;
}

.close {
	text-decoration: none;
	justify-content: center;
	font-weight: bolder;
	margin-left: auto;
	width: 25px;
	cursor: pointer;
	font-size: initial;
}

.reports {
	margin-top: 5px;
	background: var(--highlighted-post-color) !important;
	border-color: var(--highlighted-post-outline-color)!important;
	border-width: 1px 0;
	border-style: solid none;
}

.dice {
	color: var(--dice-color);
}

.title, .required {
	font-weight: bold;
}

.required {
	color: maroon;
	margin: 0 .5em;
}

.title {
	color: var(--title-color);
}

#bottom {
	margin-bottom: 10px;
}

.pinktext {
	color: var(--pinktext-color);
}

.greentext {
	color: var(--greentext-color);
}

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

.thread, .action-wrapper, .form-wrapper, .table-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

table {
	background: var(--background-rest);
	border: 1px solid var(--box-border-color);
	border-spacing: 0;
	width: 700px;
}

#tegakiwidth-setting, #tegakiheight-setting {
	max-width: 50px;
}

input[name="move_to_board"], input[name="move_to_thread"] {
	max-width: 80px;
}

.w900 {
	width: 900px;
}

th {
	background: var(--label-color);
}

.alt {
	background: var(--alt-label-color, --label-color);
	color: var(--alt-font-color, --font-color)
}

.fw td, .fw th {
    width: 8%; /*Fixes log tables when large actions are taken*/
}

td, th {
	padding: 5px;
	/*word-break: break-all;*/
	overflow-wrap: anywhere;
}

td pre {
	overflow-wrap: anywhere;
}

.flex-center {
	align-items: center;
}

.f1 {
	flex: 1;
}

.stickynav {
	bottom: 5px;
	right: 5px;
	position: fixed;
	z-index: 1;
}

.ml-0 {
	margin-left: 0;
}
.ml-a {
	margin-left: auto;
}

.dot {
	margin-right: 7px;
	height: .75em;
	width: .75em;
	background-color: orange;
	border-radius: 50%;
	animation: pulsate 2s ease infinite;
	display: inline-block;
}

.spin {
	animation: spin 1s infinite linear;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
 	100% {
		transform: rotate(360deg);
	}
}

@keyframes pulsate {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
.post-container, #float .post-container, .stickynav, .pages, .catalog-tile, #livetext, #threadstats, .bottom-reply, .collapse {
	background: var(--post-color);
	border-width: 1px;
	border-style: solid;
	border-color: var(--post-outline-color);
}

.bottom-reply {
	display: block;
	max-width: 100%;
	margin: 5px 0;
	padding: 10px;
	width: -moz-max-content;
	width: max-content;
}

.nomarks {
	margin: 5px;
	padding: 0 15px;
	/*list-style: none;*/
	word-break: break-all;
}

.modal-bg {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #00000070;
	z-index: 4;
}

.modal {
	display: flex;
	flex-direction: column;
	max-width: calc(100% - 10px);
	max-height: calc(100% - 50px);
	position: fixed;
	top: 3em;
	background-color: var(--post-color);
	z-index: 5;
	box-sizing: border-box;
	border: 5px solid var(--post-color);
	align-self: center;
	overflow: auto;
}

details.actions div {
	display: flex;
	flex-direction: column;
}

.actions {
	text-align: left;
	display: flex;
	flex-direction: column;
	margin: 2px 0;
	padding: 2px;
}

.action-wrapper {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.actions label, .actions div {
	padding: 2px 0;
}

.floatactions[open] {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	flex-direction: column;
	max-width: calc(100% - 10px);
	max-height: calc(100% - 50px);
	position: fixed;
	background-color: var(--post-color);
	z-index: 3;
	box-sizing: border-box;
	border: 5px solid var(--post-color);
	align-self: center;
	overflow: auto;
}

.floatactions[open] #action-menu {
	list-style-type: none;
	font-size: 0px;
	font-weight: bold;
	float: right;
	overflow: hidden;
	margin-right: 1px;
	position: absolute;
    right: 0;
	padding: 8px;
}

.floatactions[open] #action-menu:hover {
	color: var(--link-hover);
}

.floatactions[open] #action-menu::before {
	content: "×";
	font-size: initial!important;
}

div.captchafield {
	padding: 0px;
	grid-template-columns: var(--captcha-grid-size);
	display: grid;
	width: var(--captcha-w);
	height: var(--captcha-w);
	margin-left: 1px;
	box-sizing: border-box;
	border: 1px solid var(--font-color);
}

label.captchachecklabel {
	border: 1px solid var(--font-color);
	/*max-width: 50px;*/
	padding: 0px;
}

label.captchachecklabel input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

label.captchachecklabel input:checked ~ .captchacheckbox {
	background-color: var(--font-color);
}

span.captchacheckbox {
	display: flex;
	cursor: pointer;
	height: 100%;
}

.collapse {
	padding: 10px;
	cursor: pointer;
}

.sfw {
	float: left;
	background-color: gray;
}

.help {
	cursor: help;
}

.notallowed {
	cursor: not-allowed;
}

#float {
	box-shadow: 0 0 3px 1px var(--darken);
	max-width: calc(100% - 10px);
	z-index: 3;
	position: fixed;
}

#postform:target + #action-menu {
	visibility: hidden;
}

.toggle-label {
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-flow: column wrap;
	width: -moz-max-content;
	width: max-content;
}

.toggle, .togglable {
	display: none;
}

.toggle:checked + * {
	display: flex;
}

.user-id {
	text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
	color: white;
	padding: 0px 2px;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 1px;
	cursor: pointer;
}

.user-id:hover::after {
	content: attr(data-count);
}

.post-check {
	position: relative;
	top: 2px;
	margin: -3px 1px;
}

.post-files {
	float: left;
	margin: 0 .5em .5em .5em;
	display: flex;
	flex-flow: row wrap;
	align-items: start;
}

.fn {
	float: none;
}

a, video, img, input, summary, select, option, textarea {
	outline: 0;
}

option {
	background: var(--post-color);
}

.post-data {
	overflow: hidden;
}

.post-file {
	display: flex;
	flex-direction: column;
	padding: .5em .5em 0 0;
	align-items: center;
}

.post-file-info {
	text-align: center;
	margin: 2px;
	margin-top: 0px;
	width: 100%;
	max-width: var(--thumbnail-size);
	font-size: x-small;
}

.post-file-info .filename {
	display: inline-block;
	max-width: calc(100% - 3em);;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	word-break: break-all;
	white-space: nowrap;
}

/*.post-file-info .filename:hover {
	word-break: break-all;
	white-space: unset;
}*/

video, img {
	max-height: 90vh;
}

.mh-100 {
	max-height: 100%;
}

.post-file-src {
	justify-content: center;
	display: flex;
	image-orientation: from-image;
	position:relative;
	flex-direction: column;
}

.expanded {
	max-width: unset!important;
	max-height: unset!important;
}

.file-thumb {
	object-fit: contain;
	max-width: var(--thumbnail-size);
	max-height: var(--thumbnail-size);
}

.spoilerimg, .attachmentimg, .audioimg {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain; /* make it full */
	height: var(--thumbnail-size);
	width: var(--thumbnail-size);
}
.attachmentimg {
	background-image: var(--attachment-img);
}
.spoilerimg {
	cursor: help;
	background-image: var(--spoiler-img);
}
.audioimg {
	background-image: var(--audio-img);
}

input:invalid, textarea:invalid {
	box-shadow: none;
}

.no-resize {
	resize: none;
}

.container {
	padding: 10px;
}

.board-title {
	color: var(--board-title);
	font: bolder 28px Tahoma,sans-serif;
	letter-spacing: -2px;
	text-align: center;
	margin: 0;
}

.no-decoration {
	text-decoration: none;
}

.board-banner {
	margin: 10px;
	max-width: 100%;
	border: 1px solid var(--post-outline-color);
	min-width: 300px;
	min-height: 100px;
}

.asset-check {
	display: flex;
	align-items: center;
	padding: 10px;
}

.asset-banner {
	margin: 0 5px;
	max-width: 100%;
	border: 1px solid var(--post-outline-color);
	min-width: 300px;
	min-height: 100px;
}

.asset-generic {
	margin: 0 5px;
	border: 1px solid var(--post-outline-color);
	height: 100px;
	width: 100px;
	object-fit: scale-down;
}

.asset-flag {
	margin: 0 5px;
	max-width: 100%;
	border: 1px solid var(--post-outline-color);
	width: 32px;
	height: 22px;
}

#selected-flag[src^='/'] {
	border: 1px solid var(--post-outline-color);
	height: 22px;
	width: 32px;
}

.board-description {
	text-align:center;
	margin: 0;
}

.post-message {
	text-align: left;
}

.post-container {
	box-sizing: border-box;
	padding: .5em;
	max-width: 100%;
	min-width: 30em;
}

.postmenu {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	width: 1.5em;
	height: 1em;
	color: var(--font-color);
	border: none;
	background: transparent;
	position: relative;
	top: 2px;
	font-size: 9pt;
	border-bottom: .5em solid transparent;
	border-right: .5em solid transparent;
	border-left: calc(2 * .5em * 0.866) solid var(--font-color);
	border-top: .5em solid transparent;
	vertical-align: top;
	margin-left: 3px;
}

.catalog-tile.hidden {
	height: min-content;
}

.catalog-tile.hidden .post-message, .catalog-tile.hidden .post-file-src {
	display: none;
}

.catalog-tile.hidden .post-info {
	opacity: .5;
	margin-bottom: -6px;
}

.post-container.hidden .post-data {
	display: none;
}

.post-container.hidden .post-info {
	margin-bottom: -6px;
	opacity: .5;
	border: none;
	background: none;
}

.post-container.marked::after {
	content: attr(data-mark) " ";
	font-weight: bold;
	color: var(--title-color);
}

.post-container.marked .post-data, .post-container.marked .post-info {
	opacity: 0.75
}

.anchor:target + .post-container,
.anchor:target + .catalog-tile,
.post-container.highlighted,
.post-container.hoverhighlighted,
.anchor:target + table tbody tr th,
.anchor:target + table {
	background-color: var(--highlighted-post-color) !important;
	border-color: var(--highlighted-post-outline-color) !important;
}

.anchor {
	height: 50px;
	margin-top: -45px;
}

.post-container.op {
	background: none;
	border-color: transparent;
	width: 100%;
}

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

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

.post-icons {
	filter:var(--icon-color);
	vertical-align: middle;
}

.post-icons img {
	image-rendering: auto;
}

.post-tripcode, .post-name {
	color: var(--name-color);
}

.post-name {
	font-weight: bold;
}

.you:after {
	margin-left: 3px;
	content: '(' attr(data-label) ')';
	font-weight: lighter;
	font-style: italic;
}

.noselect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.post-info {
	margin: -5px -5px 0 -5px;
	padding: 5px;
	padding-left: 3px;
	display:block;
	overflow-wrap: break-word;
}

.post-container.op .post-info {
	background: none;
	border: none;
}

.nav-item {
	line-height: 3em;
	text-decoration: none;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}

.nav-item.short-nav {
	line-height: 1.5em;
}

.left {
	float: left;
}
.cb {
	clear: both;
}
.right {
	float: right;
}

.footer {
	text-align: center;
	flex-shrink: 0;
	margin-top: auto;
	line-height: 1.5em;
}

a.button {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	text-decoration: none;
	cursor: pointer;
	color: black;
}

.button:hover {
	color: initial!important;
}

input[type="button"][disabled] {
	opacity: 0.5;
}

input, textarea, select {
	accent-color: var(--accent-color);
	border: 1px solid var(--input-borders);
	border-radius: 0px;
	background: var(--input-background);
	color: var(--input-color);
	font-family: arial, helvetica, sans-serif;
	font-size: inherit;
}

input[type="button"], input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], textarea, select {
	margin: 0;
	flex-grow: 1;
}

.nogrow * {
	flex-grow: 0;
}

.nogrow input[type="submit"] {
	width: min-content;
}

textarea {
	max-height: 100%;
	max-width: 100%;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance:textfield;
	-webkit-appearance: textfield;
	appearance:textfield;
}

input[type="submit"] {
	min-height: 2.5em;
	cursor: pointer;
}

input[type="file"] {
	width: 220px;
	background: var(--input-background);
}

#postform, #threadwatcher {
	display: none;
	max-width: calc(100% - 10px);
	max-height: calc(100% - 50px);
	position: fixed;
	top: 3.5em;
	right: 5px;
	background-color: var(--post-color);
	z-index: 2;
	box-sizing: border-box;
	border: 5px solid var(--post-color);
	overflow-y: auto;
}

#threadwatcher {
	display: none;
	white-space: nowrap;
	flex-direction: column;
}

#threadwatcher.minimised .watched-thread {
	display: none;
}

.watched-thread {
	width: 100%;
	/*justify-content: space-between;*/
	padding: 3px;
	box-sizing: border-box;
}

.watched-thread a {
	margin-right: 5px;
}

.watched-thread .close {
	margin-left: 0px;
	width: 1em;
}

.watched-thread[data-unread]::after {
	content: "(" attr(data-unread) ")";
	font-weight: bold;
}

#postform:target {
	display: flex;
}

.postform-style {
	display: flex;
	border: 1px solid var(--input-borders);
	background: var(--input-background);
	align-items: center;
	box-sizing: border-box;
}

iframe.captcha, iframe.bypass {
	/*dumb hack cos of noscript wrapping in unstyleable span*/
	/*margin-bottom: -2px;*/
}

iframe.captcha {
	/*width: 100%;*/
}

iframe.embed-video {
	width: 500px;
	height: 280px;
	margin-top: 3px;
}

iframe.bypass {
	height: var(--bypass-height);
	width: 350px;
}

.captcha {
	border: 1px solid var(--input-borders);
	background: white;
	margin-bottom: 1px;
	min-width: var(--captcha-w);
	height: var(--captcha-h);
	box-sizing: border-box;
	object-fit: contain;
	overflow: hidden;
	position: relative;
}

.captcharefresh {
	line-height: 18px;
	position: absolute;
	bottom: 5px;
	left: 5px;
	font-size: 18px;
	cursor: pointer;
	text-shadow: rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px, rgb(0, 0, 0) 0px 0px 1px;
	color: white;
}

.label, .rlabel {
	padding: 3px;
	border: 1px solid var(--box-border-color);
	min-width: 80px;
	background: var(--label-color);
	display: flex;
	font-weight: bold;
	margin-right: 1px;
	align-items: start;
	flex-direction: column;
	justify-content: center;
}
.rlabel {
	margin-right: 0;
	margin-left: 1px;
}
.box-wrap .label {
	flex: 0 1 175px;
}

hr {
	border-top: 1px solid var(--hr);
	border-left: none;
	border-right: none;
	border-bottom: none;
	margin: 6px 0 5px 0;
}

hr + .thread {
	margin-top: -5px;
}

.bantable {
  max-width: unset;
  word-break: keep-all;
  white-space: nowrap;
}

.bantable td, .bantable th {
	padding: 5px 10px;
}

tr:nth-child(odd) {
	 background: var(--post-color);
}

table.boardtable td:nth-child(3), table.boardtable th:nth-child(3),
table.boardtable td:nth-child(4), table.boardtable th:nth-child(4),
table.boardtable td:nth-child(5), table.boardtable th:nth-child(5),
table.boardtable td:nth-child(6), table.boardtable th:nth-child(6) {
	word-break: keep-all;
	overflow-wrap: break-word;
}

table.boardtable.w900 th:last-child {
	min-width: 100px;
}
table.boardtable.w900 td:last-child {
	text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
	color: white;
}

/* ^="f" means only where attachment is false, to prevent showing on attachment files with audio or video mime type */
.post-file-src[data-type="audio"][data-attachment^="f"]::after,
.post-file-src[data-type="video"][data-attachment^="f"]::after {
	content: "▶";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	background: #000;
	color: #fff;
	border-radius: 100%;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align:center;
	box-sizing:border-box;
	font-size: 20px;
	padding-left: 4px;
	transform: translate(-50%, -50%);
	opacity: 0.8;
	box-shadow: 0 0 3px #fff;
	pointer-events: none;
}
.post-file-src[data-attachment^="f"]:hover::after {
	opacity: 1;
}

.post-file-src[data-type="image"][data-loading]::after,
.post-file-src[data-type="image"][data-loading]::before {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 1.2em;
	box-sizing: border-box;
	transform: translate(-50%,-50%);
	pointer-events: none;
	z-index: 1;
}
.post-file-src[data-type="image"][data-loading]::before {
	content:"";
	background: black;
	width: 100%;
	border-left: var(--data-loading) solid darkgreen;
	transition: all 0.3s;
}
.post-file-src[data-type="image"][data-loading]::after {
	content: attr(data-loading) "%";
	color: white;
}

.post-file-src * {
	max-width: 100%;
	visibility: visible;
}

.di {
	display: inline;
}

table, .boardtable {
	max-width: 100%;
}

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

#settingsmodal{
	min-width: 400px;
}
#settingsmodal .form-wrapper.flexleft.mt-10, #settingsmodal .form-wrapper.flexleft.mt-10 .row {
	width: 100%
}
row.wrap.sb .col {
	flex-basis: calc(50% - 5px);
}

#hotposts td:nth-child(1) {
	white-space: nowrap;
}

.tabs.group:after {
	display: block;
	content: " ";
	clear: both;
}

.tabs li {
	display: inline;
}

.tabs li a {
	color: var(--font-color);
	float: left;
	display: block;
	padding: 4px 10px;
	margin-left: -1px;
	position: relative;
	left: 1px;
	background: var(--post-color);
	text-decoration: none;
}

.tabs li:last-of-type {
	margin-right: 1px;
}

.tabs {
	padding: 0;
	margin: 0 0 -1px 0;
	list-style: none;
}

.box-wrap .col {
	background: var(--background-rest);
	padding: 10px;
}

.box-wrap, .tabs li a {
	border: 1px solid var(--post-outline-color);
}

/* Default selected tab 1 */
.tab {
	display: none;
	margin: 1px;
	padding: 1px;
}
.tab-1 {
	display: flex;
}
:target .tab-1 {
	display:none;
}

.sm {
	scroll-margin-top: 100px;
}

#tab-1:target .tab-1,
#tab-2:target .tab-2,
#tab-3:target .tab-3,
#tab-4:target .tab-4,
#tab-5:target .tab-5,
#tab-6:target .tab-6,
#tab-7:target .tab-7,
#tab-8:target .tab-8,
#tab-9:target .tab-9,
#tab-10:target .tab-10 { 
	display: flex;
}

#tab-1:target a[href="#tab-1"],
#tab-2:target a[href="#tab-2"],
#tab-3:target a[href="#tab-3"],
#tab-4:target a[href="#tab-4"],
#tab-5:target a[href="#tab-5"],
#tab-6:target a[href="#tab-6"],
#tab-7:target a[href="#tab-7"],
#tab-8:target a[href="#tab-8"],
#tab-9:target a[href="#tab-9"],
#tab-10:target a[href="#tab-10"] {
	border-bottom: 1px solid var(--background-rest);
	background: var(--background-rest);
}

@media only screen and (max-height: 400px) {
	.modal {
		top: 5px;
		max-height: calc(100% - 10px);
	}
}

/*fuck off with mobile chromeshit*/
@media only screen and (max-width: 920px) {
	.w900 {
		width: 100%
	}
}


@media only screen and (min-width: 600px) {
	/* not-completely-shit way to "fix" short text squishing on single file posts */
	.post-files:not(.fn) + .post-message {
		min-width: 40em;
	}
}

@media only screen and (max-width: 600px) {
	.twofactor {
		font-size: 50%;
	}
	.ct-r2 .catalog-thumb.small {
		max-width: 32px;
		max-height: 32px;
	}
	.box-wrap .label {
		flex: unset;
	}
	.tabs li a {
		padding: 8px 15px;
		margin-top: -1px;
		border: 1px solid var(--post-outline-color)!important;
	}
	select[name="countries"] {
		max-width: 220px;
	}
	.postmenu {
		border-left: .5em solid transparent;
		border-right: .5em solid transparent;
		border-top: calc(2 * .5em * 0.866) solid var(--font-color);
		border-bottom: .5em solid transparent;
		vertical-align: top;
		margin-left: 3px;
		width: 1em;
	}
	#hotposts td:nth-child(3) {
		display: none;
	}
	#settings::after {
		content: "\2699"!important;
	}
	#settingsmodal {
		width: 100%;
		min-width: unset;
	}
 	[title] {
		position:relative
 	}
	[title]:hover:after {
		color: white;
		font-size: small;
		border-radius: 2px;
		background:black;
		position:absolute;
		top:-1.75em;
		left:50%;
		transform:translateX(-50%);
		width:-moz-max-content;
		width:max-content;
		padding:1px 2px;
 	}
	[title]:hover:after {
		content:attr(title);
	}
	.user-id[title]:hover:after {
		content: attr(title-mobile);
	}
	[title]:hover:before {
		content: '';
		position: absolute;
		top: -6px;
		left: calc(50% - 5px);
		border-top: 5px solid black;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
	}

	table.boardtable td:nth-child(3), table.boardtable th:nth-child(3),
	table.boardtable td:nth-child(4), table.boardtable th:nth-child(4),
	table.boardtable td:nth-child(5), table.boardtable th:nth-child(5),
	table.boardtable td:nth-child(6), table.boardtable th:nth-child(6),
	table.boardtable td:nth-child(7), table.boardtable th:nth-child(7) {
		display: none;
	}

	table.newstable td:nth-child(2), table.newstable th:nth-child(2) {
		display: none;
	}

	.board-banner {
		object-fit: contain;
		height: unset;
	}

	.modal {
		top: 5px;
		max-height: calc(100% - 10px);
	}

	.post-file-info {
		max-width: 150px;
	}

	iframe.bypass {
		height: 100vh;
		width: 100vw;
	}

	iframe.embed-video {
		height: unset;
		width: 100%;
		max-width: 300px;
	}

	.file-thumb {
		max-width: 128px;
		max-height: 128px;
		object-fit: cover;
	}

	.post-info{
		background: var(--darken);
		margin: -6.5px -6.5px 5px -6.5px;
		border-bottom: 1px solid var(--post-outline-color);
	}

	.anchor:target + .post-container .post-info,
	.post-container.highlighted .post-info,
	.post-container.hoverhighlighted .post-info {
		border-bottom: 1px solid var(--highlighted-post-outline-color);
	}

	.close {
		width: 2.25em;
	}

	input[type="range"], input[type="number"], input[type="text"], input[type="submit"], input[type="password"], input[type="file"], .postform-style, select, #postform-dragHandle {
		min-height: 2.25em;
		box-sizing: border-box;
	}

	.postmenu {
		float: right;
		min-height: 1em;
	}

	.filelabel {
		min-width: 0;
	}

	.fh	{
		height: 100%;
	}

	.form-post {
		width: 100%;
	}

	.form-login {
		width: 100%;
	}

	pre {
		margin: 1em;
	}

	.post-check {
		top: 1px;
		margin-left: 2px;
	}

	.pages {
		/*width:100%;*/
	}

	.pad-anchor {
		width: 100%;
	}

	.post-container {
		box-shadow: none;
		width: 100%;
		min-width: unset;
	}

	.catalog-tile {
		width: calc(50% - 10px);
		margin: 5px;
	}

	table {
		width: 100%;
	}

	#postform {
		width: 100%;
	}

	input#file {
		width: 100%;
	}

	#filter-value-input {
		width: 100%;
	}

}

.flag, .customflag, .customflag::before {
	display: inline-block;
	width: 16px;
	height: 11px;
	background:url(/file/flags.png) no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}

.customflag {
	background: none;
}
.customflag::before {
	content: ' ';
	background-position:-48px -165px;
}

.flag.flag-xx {
	background-position:-48px -165px;
}
.flag.flag-tor, .flag.flag-t1 { /* t1 is cloudflare tor exit node */
	background-position:-64px -165px;
}
.flag.flag-loki {
	background-position:-80px -165px;
}

/*!
 * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) -
 */
.flag.flag-gu{background-position:-96px -55px}.flag.flag-mn{background-position:-208px -88px}.flag.flag-va{background-position:-48px -154px}.flag.flag-tibet{background-position:-32px -143px}.flag.flag-fo{background-position:-64px -44px}.flag.flag-th{background-position:-16px -143px}.flag.flag-tr{background-position:-144px -143px}.flag.flag-tl{background-position:-80px -143px}.flag.flag-kz{background-position:-144px -77px}.flag.flag-zm{background-position:-16px -165px}.flag.flag-uz{background-position:-32px -154px}.flag.flag-dk{background-position:-64px -33px}.flag.flag-scotland{background-position:-176px -121px}.flag.flag-gi{background-position:-224px -44px}.flag.flag-gy{background-position:-128px -55px}.flag.flag-bj{background-position:-112px -11px}.flag.flag-fr{background-position:-80px -44px}.flag.flag-mo{background-position:-224px -88px}.flag.flag-ir{background-position:-112px -66px}.flag.flag-io{background-position:-80px -66px}.flag.flag-tm{background-position:-96px -143px}.flag.flag-ch{background-position:-96px -22px}.flag.flag-mt{background-position:-32px -99px}.flag.flag-nl{background-position:-240px -99px}.flag.flag-gp{background-position:-16px -55px}.flag.flag-im{background-position:-48px -66px}.flag.flag-tv{background-position:-176px -143px}.flag.flag-mu{background-position:-48px -99px}.flag.flag-pe{background-position:-96px -110px}.flag.flag-vi{background-position:-112px -154px}.flag.flag-hn{background-position:-176px -55px}.flag.flag-ss{background-position:-128px -132px}.flag.flag-ae{background-position:-16px 0}.flag.flag-td{background-position:-240px -132px}.flag.flag-pw{background-position:0 -121px}.flag.flag-nu{background-position:-32px -110px}.flag.flag-bt{background-position:-208px -11px}.flag.flag-ms{background-position:-16px -99px}.flag.flag-cv{background-position:-240px -22px}.flag.flag-es{background-position:-224px -33px}.flag.flag-mh{background-position:-144px -88px}.flag.flag-la{background-position:-160px -77px}.flag.flag-vn{background-position:-128px -154px}.flag.flag-py{background-position:-16px -121px}.flag.flag-br{background-position:-176px -11px}.flag.flag-ye{background-position:-224px -154px}.flag.flag-ie{background-position:0 -66px}.flag.flag-gh{background-position:-208px -44px}.flag.flag-cg{background-position:-80px -22px}.flag.flag-cu{background-position:-224px -22px}.flag.flag-hu{background-position:-224px -55px}.flag.flag-sg{background-position:-224px -121px}.flag.flag-at{background-position:-176px 0}.flag.flag-lk{background-position:-224px -77px}.flag.flag-vu{background-position:-144px -154px}.flag.flag-bo{background-position:-160px -11px}.flag.flag-jo{background-position:-208px -66px}.flag.flag-er{background-position:-208px -33px}.flag.flag-za{background-position:-256px -154px}.flag.flag-rs{background-position:-80px -121px}.flag.flag-nr{background-position:-16px -110px}.flag.flag-ls{background-position:-256px -77px}.flag.flag-jm{background-position:-192px -66px}.flag.flag-tz{background-position:-208px -143px}.flag.flag-ki{background-position:-16px -77px}.flag.flag-sj{background-position:0 -132px}.flag.flag-cz{background-position:-16px -33px}.flag.flag-pg{background-position:-128px -110px}.flag.flag-lv{background-position:-32px -88px}.flag.flag-do{background-position:-96px -33px}.flag.flag-lu{background-position:-16px -88px}.flag.flag-no{background-position:-256px -99px}.flag.flag-kw{background-position:-112px -77px}.flag.flag-mx{background-position:-96px -99px}.flag.flag-yt{background-position:-240px -154px}.flag.flag-ly{background-position:-48px -88px}.flag.flag-cy{background-position:0 -33px}.flag.flag-ph{background-position:-144px -110px}.flag.flag-my{background-position:-112px -99px}.flag.flag-sm{background-position:-48px -132px}.flag.flag-et{background-position:-240px -33px}.flag.flag-ru{background-position:-96px -121px}.flag.flag-tj{background-position:-48px -143px}.flag.flag-ai{background-position:-64px 0}.flag.flag-pl{background-position:-176px -110px}.flag.flag-kp{background-position:-64px -77px}.flag.flag-uy{background-position:-16px -154px}.flag.flag-gb{background-position