/* Base font size bump -- slightly larger than Bootstrap default (1rem / 16px) */
body { font-size: 1.2rem; }

/* Theme Default sentinel: #010101 in TinyMCE HTML means "use theme colour" */
span[style*="color: #010101"],
span[style*="color: rgb(1, 1, 1)"] {
  color: inherit !important;
}

.main-wrapper {
  height: 100vh;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.main-wrapper::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.mh-50 {
  max-height: 50vh !important;
  overflow-y: auto;
}

.vh-20 {
  height: 20vh !important;
  overflow-y: auto;
}

.vh-25 {
  height: 25vh !important;
  overflow-y: auto;
}

.vh-30 {
  height: 30vh !important;
  overflow-y: auto;
}

.vh-35 {
  height: 35vh !important;
  overflow-y: auto;
}

.vh-50 {
  height: 50vh !important;
  overflow-y: auto;
}

.vh-60 {
  height: 60vh !important;
  overflow-y: auto;
}

.vh-75 {
  height: 75vh !important;
  overflow-y: auto;
}

.vh-80 {
  height: 80vh !important;
  overflow-y: auto;
}

.vh-85 {
  height: 85vh !important;
  overflow-y: auto;
}

.vh-90 {
  height: 90vh !important;
  overflow-y: auto;
}

.vh-95 {
  height: 95vh !important;
  overflow-y: auto;
}
.bg-ksbg {
  background-color: #272b30;
}

.bg-superhero {
  background-color: #0f2537;
}

.bg-solarized {
  background-color: #002b36;
}

.bg-vapor {
  background-color: #231042;
}

.bg-vapor-bright{
  background-color: #6f42c1;
}

.bg-vapor-teal{
  background-color: #3f81a2;
}

.nobott{
  border: none;
}

.ks_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.fg-yellow {
	color: #ffaf00;
	display: inline;
}

.fg-brightyellow {
	color: #ffff00;
	filter: brightness(200%);
	display: inline;
}

.fg-cyan {
	color: #00d7ff;
	display: inline;
}

.fg-brightcyan {
	color: #00ffff;
	display: inline;
}

.fg-red {
	color: #800000;
	display: inline;
}

.fg-brightred {
	color:#ff0000;
	display: inline;
}

.fg-magenta{
	color:#800080;
	display: inline;
}

.fg-brightmagenta{
	color:#ff00ff;
	display: inline;
}
.fg-black{
	color:#000000;
	display: inline;
}

.fg-brightblack{
	color:#808080;
	display: inline;
}

.fg-green {
	color:#00af00;
	stroke: #00af00;
	display: inline;	
}

.fg-white {
	color:#ffffff;
	display: inline;
}

.fg-grey {
	color:#808080;
	display: inline;
}

.fg-brightgrey {
	color:#c0c0c0;
	display: inline;
}

.fg-brightwhite {
	color:#ffffff;
	display: inline;
}
.fg-brightblue {
	color:#0087ff;
	display: inline;
}
.fg-blue {
	color:#005fd7;
	display: inline;
}

.fg-darkblue {
	color:#000080;
	display: inline;
}
.fg-brightgreen {
	color:#00ff00;
	display: inline;
}


.bg-yellow {
	background: #808000;
	display: inline;
}

.bg-brightyellow {
	background: #ffff00;
	display: inline;
}

.bg-cyan {
	background: #00d7ff;
	display: inline;
}

.bg-brightcyan {
	background: #00ffff;
	display: inline;
}

.bg-red {
	background: #800000;
	display: inline;
}

.bg-brightred {
	background:#ff0000;
	display: inline;
}

.bg-magenta{
	background:#800080;
	display: inline;
}

.bg-brightmagenta{
	background:#ff00ff;
	display: inline;
}
.bg-black{
	background:#000000;
	display: inline;
}

.bg-brightblack{
	background:#808080;
	display: inline;
}

.bg-darkblue {
	background:#000080;
	display: inline;
}

.bg-blue {
	background:#005fd7;
	display: inline;
}

.bg-green {
	color:#008000;
	display: inline;
}

.bg-white {
	color:#ffffff;
	display: inline;
}

.bg-grey {
	color:#808080;
	display: inline;
}

.bg-brightgrey {
	color:#c0c0c0;
	display: inline;
}

.bg-brightwhite {
	color:#ffffff;
	display: inline;
}

.bg-brightblue {
	color:#0000ff;
	display: inline;
}

.bg-brightgreen {
	color:#00ff00;
	display: inline;
}

.fg-green:focus {
  color: #00ff00;
}

.fg-brightgreen:focus {
  color: #00ff00;
}

.fg-yellow:focus {
  color: #ffff00;
}

.fg-brightyellow:focus {
  color: #ffff00;
}

.fg-blue:focus {
  color: #0087ff;
}

.fg-brightblue:focus {
  color: #0087ff;
}

.fg-cyan:focus {
  color: #00ffff;
}

.fg-brightcyan:focus {
  color: #00ffff;
}

.fg-red:focus {
  color: #ff0000;
}

.fg-brightred:focus {
  color: #ff0000;
}

.fg-magenta:focus {
  color: #ff00ff;
}

.fg-brightmagenta:focus {
  color: #ff00ff;
}

.fg-white:focus {
  color: #ffffff;
}

.fg-brightwhite:focus {
  color: #ffffff;
}

.fg-grey:focus {
  color: #c0c0c0;
}

.fg-brightgrey:focus {
  color: #c0c0c0;
}

.monospace {
	font-family: "Consolas", monospace;
}

.text-08{
	font-size: 0.8em;
}

.text-10{
	font-size: 1em;
}

.text-11 {
	font-size: 1.1em;	
}

.text-12 {
	font-size: 1.2em;
}

.text-14 {
	font-size: 1.4em;
}

/* A message body is a block (#60). It also carries a colour class such as
   fg-brightgrey, and those set display: inline so they can colour spans
   inside a message. Inline, the body's lines sat in its PARENT's line boxes,
   ~29px apart at the page's normal size whatever font the body was sized
   to: at 80 columns on a phone (7px text) every line was followed by what
   looked like an empty one, and at 40 lines were still twice as far apart as
   they should be. It also made overflow-x on art bodies do nothing, since
   overflow does not apply to inline boxes. This rule must stay AFTER the
   fg-* rules: same specificity, so the later one wins. */
.messagebody{
	display: block;
	line-height: 1.1;
}

/* Lets a flex item shrink below its content, so text-truncate and wrapping
   can work inside it. Bootstrap has no such utility; views used this class
   before anything defined it. */
.min-width-0 {
	min-width: 0;
}

/* Area listings (/messages, /files). On a phone they were 627-664px wide on
   a 390px screen: the header's title, toggle, sort, search and buttons all on
   one line, and five or six table columns. Below lg the header wraps and the
   search takes the width; below md the description moves under the area name
   (a .d-md-none line in the name cell) instead of taking a column; below sm
   the count column and the last poster go. Desktop is unchanged. */
.area-search {
	width: 220px;
}
.area-table td.area-num,
.area-table td.area-badge {
	width: 80px;
}
.area-table td.area-last {
	width: 200px;
}
@media (max-width: 991.98px) {
	.area-list-header {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}
	.area-list-header .area-tools {
		flex: 1 1 100%;
	}
	.area-list-header .area-search {
		flex: 1 1 auto;
		width: auto;
	}
}
@media (max-width: 575.98px) {
	.area-table td.area-badge {
		width: auto;
	}
	.area-table td.area-last {
		width: auto;
		white-space: nowrap;
	}
}

/* Threads list (/messages/area/X for threaded areas). From md up the subject
   is cut to its column; below md each thread is one cell, the subject wraps in
   full and .thread-meta under it carries who started it, replies, unread and
   the last reply. */
.thread-subject {
	overflow-wrap: anywhere;
}
@media (min-width: 768px) {
	.thread-subject {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.thread-meta {
	white-space: normal;
}
/* Phone only (d-md-none in the markup): the counts column to the right of the
   subject, narrow and right-aligned, so they are not run into the text. */
.thread-counts,
.list-counts {
	width: 3.5rem;
	text-align: right;
	vertical-align: top;
	white-space: nowrap;
}
/* Hidden below md by our own rule: Bootstrap has no d-*-table-header-group,
   so d-none there would hide the header on desktop too. */
@media (max-width: 767.98px) {
	.thread-head,
	.list-head {
		display: none;
	}
}

/* Message headers. The left side (who, subject, date) is a flex item beside
   the buttons; without min-width: 0 it cannot shrink below its content, so
   text-truncate never truncated and a long subject pushed the header, buttons
   and all, off the right of a phone screen. Below lg the subject has a
   full-width row of its own under the header (.msg-subject-row) and wraps in
   full; from lg up it stays on the who line and truncates. After the fg-*
   rules, like .messagebody, since those set display: inline. */
.msg-head {
	flex: 1 1 auto;
	min-width: 0;
}
.msg-who {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.msg-subject-row {
	display: block;
	overflow-wrap: anywhere;
}
@media (min-width: 992px) {
	.msg-line {
		display: flex;
		align-items: baseline;
		gap: 0.5em;
		min-width: 0;
	}
	.msg-line .msg-who {
		flex: 0 1 auto;
	}
	.msg-line .msg-subject {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Prevent unclosed HTML tags in message body_html from leaking styles to siblings */
.msg-card {
	text-decoration: none !important;
}

.ansi{
	line-height: 1.0;
}

/* Art is laid out in rows and a row that wraps is a broken picture. It is sized
   to 80 columns (public/js/readerWidth.js); if a font still makes a row a hair
   too wide, scroll sideways rather than break it onto a second line. */
.messagebody[data-art="true"] {
	white-space: nowrap;
	overflow-x: auto;
}

/* --- Error wiggle animation --- */
@keyframes error-wiggle {
	0%   { transform: translateX(0); }
	15%  { transform: translateX(-6px); }
	30%  { transform: translateX(6px); }
	45%  { transform: translateX(-4px); }
	60%  { transform: translateX(4px); }
	75%  { transform: translateX(-2px); }
	90%  { transform: translateX(2px); }
	100% { transform: translateX(0); }
}
.error-wiggle {
	animation: error-wiggle 0.5s ease-in-out 0.15s both;
}

/* --- Admin dashboard cards --- */
.dash-card {
	background: #2a2e33;
	border: 1px solid #444;
	transition: border-color 0.15s, background 0.15s;
}
.dash-card:hover {
	border-color: #375a7f;
	background: #333840;
}
.dash-card i.bi {
	color: #adb5bd;
}
.dash-card:hover i.bi {
	color: #fff;
}