/* pages.css — page-specific parts: search, registration, feedback and complaint, profile, users, members,
   private messages, statistics, the exam trainer. */

/* Search */

.searchtable {
	padding: 24px 0px;
}
.base.infoblock .searchtable {
	padding: 16px 0 0;
}
/* one hit in the short result list */
.searchitem {
	font-size: 0.9em;
	margin-bottom: 6px;
	padding: 10px 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
}
.searchitem:hover {
	background-color: var(--soft);
}
/* the found words in the results */
mark.search-hl {
	padding: 0 1px;
	color: #c00;
	background-color: #fff176;
}
/* search page (do=search): the form is searchform.tpl — .sf-simple is the one-line form, .sf-full the advanced one */
.searchpage .searchtable {
	padding: 14px 0 2px;
}
.sf .textin,
.sf #searchuser,
.sf select {
	width: 100%;
	max-width: 100%;
	height: 38px;
	margin: 0;
	padding: 6px 10px;
	font-size: 15px;
	color: var(--text);
}
.sf select[multiple] {
	height: auto;
	padding: 4px;
}
.sf select[multiple] option {
	padding: 3px 6px;
	border-radius: 3px;
}
.sf #searchinput {
	padding-left: 36px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c838e' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 12px 50%;
}
.sf .textin:focus,
.sf select:focus {
	border-color: var(--link);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(57,141,216,0.15);
}
.sf input[type=checkbox],
.sf input[type=radio] {
	margin: 0;
	accent-color: var(--link);
}
.sf label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
/* buttons: «Почати пошук» is the primary action, the rest stay quiet */
.sf .bbcodes {
	height: 38px;
	margin: 0;
	padding: 0 18px;
	border-radius: 6px;
}
.sf .sf-go {
	color: #fff;
	background-color: var(--link);
	border-color: var(--link-hover);
}
.sf .sf-go:hover {
	background-color: var(--link-hover);
}
/* simple form: [ field ............ ][ Почати пошук ]  розширений пошук */
.sf-simple {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}
.sf-simple #searchinput {
	flex: 1 1 240px;
	width: auto;
	height: 42px;
	font-size: 16px;
}
.sf-simple .sf-go {
	height: 42px;
}
.sf-simple .sf-more {
	height: auto;
	padding: 4px 2px;
	font-weight: normal;
	color: var(--link);
	background: none;
	border: 0;
}
.sf-simple .sf-more:hover {
	color: var(--link-hover);
	text-decoration: underline;
}
/* advanced form: two columns of cards, buttons across the bottom */
.sf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}
.sf-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.sf-buttons {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 2px;
}
.sf fieldset {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 10px 14px 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	min-width: 0;
}
.sf legend {
	padding: 0 6px;
	font-size: 0.95em;
	font-weight: bold;
	color: var(--text-2);
}
.sf .sf-cap {
	margin-bottom: -6px;
	font-size: 0.9em;
	color: var(--muted);
}
.sf .sf-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--text-2);
}
.sf .sf-row > select {
	flex: 1 1 150px;
	width: auto;
}
.sf #replylimit {
	flex: 0 0 76px;
	width: 76px;
	text-align: center;
}
.sf .sf-radios {
	gap: 8px 18px;
}
.sf .sf-radios label {
	color: var(--text);
}
/* the "found N results" line and the title-only result list */
.searchpage .searchmsg {
	margin-top: 14px;
	padding: 9px 14px;
	font-size: 0.95em;
	color: var(--text-2);
	background: var(--strip);
	border: 1px solid var(--line);
	border-radius: 6px;
}
.searchpage .searchmsg:empty {
	display: none;
}
#page-content .searchitem {
	margin: 0 0 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
}
#page-content .searchitem h3 {
	margin: 0 0 4px;
	font-size: 1.1em;
	line-height: 1.3;
}
.searchitem .simeta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	font-size: 0.9em;
	color: var(--muted);
}
.searchitem .simeta span:empty {
	display: none;
}

@media (min-width: 621px) {
	/* the category list fills its card down to the left column's bottom */
	.sf-cats select[multiple] {
		flex: 1 1 auto;
		min-height: 220px;
	}
}

@media (max-width: 800px) {
	.base.infoblock .searchtable {
		padding-top: 12px;
	}
	.searchitem {
		padding: 10px 12px;
	}
}

@media (max-width: 620px) {
	.sf-grid {
		grid-template-columns: 1fr;
	}
	.sf-simple #searchinput {
		flex-basis: 100%;
	}
	.sf-simple .sf-go {
		flex: 1 1 auto;
	}
	.sf-buttons .sf-go {
		flex: 1 1 100%;
	}
	.sf-buttons .bbcodes:not(.sf-go) {
		flex: 1 1 0;
	}
	.sf .textin,
	.sf #searchuser,
	.sf select {
		font-size: 16px;
	}
}

/* Registration and login */

/* where am I: one plain strip, the current step underlined in blue */
.regsteps {
	display: flex;
	margin: 0 0 12px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}
.regsteps li {
	flex: 1 1 0;
	padding: 8px 10px;
	font-size: 0.92em;
	line-height: 1.3;
	color: var(--muted);
	text-align: center;
	border-left: 1px solid var(--line);
}
.regsteps li:first-child {
	border-left: 0;
}
.regsteps li.is-done {
	background-color: var(--strip);
}
.regsteps li.is-now {
	font-weight: bold;
	color: var(--text);
	box-shadow: inset 0 -3px 0 var(--link);
}
.regform .reg-intro p {
	margin: 0 0 6px;
}
.regform .reg-intro p:last-child {
	margin-bottom: 0;
}
.regform .tableform td.label {
	vertical-align: top;
	padding-top: 16px;
}
.regform .tableform td.label label {
	font-weight: bold;
}
.regform .f_input {
	width: 100%;
	max-width: 320px;
}
.regform .f_input.reg-short {
	width: 90px;
}
.regform .reg-area {
	width: 100%;
	max-width: 520px;
	padding: 5px 7px;
}
.reg-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	max-width: 420px;
}
.reg-line .f_input {
	flex: 1 1 180px;
}
.reg-line .bbcodes {
	flex: 0 0 auto;
}
.reg-hint {
	margin-top: 4px;
	font-size: 0.92em;
	line-height: 1.4;
	color: var(--muted);
}
.reg-q {
	margin-bottom: 6px;
	color: var(--text);
}
.reg-show {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.92em;
	color: var(--text-2);
	cursor: pointer;
}
.reg-show input {
	vertical-align: -2px;
	margin: 0 3px 0 0;
}
.reg-file {
	max-width: 100%;
}
/* the answer of the call-sign check */
#result-registration:empty {
	display: none;
}
.reg-note {
	margin-top: 5px;
	font-size: 0.92em;
	line-height: 1.4;
	color: var(--muted);
}
.reg-note.is-ok {
	color: var(--ok);
}
.reg-note.is-bad {
	color: var(--danger);
}
/* browsers mark a wrong field only after the visitor has typed in it */
.regform .f_input:user-invalid {
	border-color: var(--danger-line);
}

@media (max-width: 620px) {
	/* only the current step keeps its name, the others shrink to their number */
	.regsteps li {
		flex: 0 0 34px;
		padding: 8px 4px;
	}
	.regsteps li span {
		display: none;
	}
	.regsteps li.is-now {
		flex: 1 1 auto;
	}
	.regsteps li.is-now span {
		display: inline;
	}
	.regform .tableform td.label {
		padding-top: 4px;
	}
	.regform .f_input,
	.reg-line {
		max-width: none;
	}
	.regform .f_input.reg-short {
		width: 120px;
	}
}

/* Feedback and complaint */

/* Feedback (?do=feedback) - feedback.tpl, 2026-11-02 One column of fields of one width; every label sits on the first text line of its field; server errors appear in the form, above the button. */
.fbform .fb-intro {
	padding: 10px 16px;
	line-height: 1.45;
	color: var(--text-2);
	border-bottom: 1px solid var(--line);
}
.fbform .fb-intro p {
	margin: 0;
}
.fbform .tableform td {
	vertical-align: top;
}
/* 10px cell padding + 6px = the text line of a 29px field */
.fbform .tableform td.label {
	width: 25%;
	padding-top: 16px;
}
.fbform .fb-plain b,
.fbform .fb-to {
	display: inline-block;
	padding-top: 6px;
	color: var(--text);
}
.fbform .f_input,
.fbform .fb-select,
.fbform .fb-area {
	width: 100%;
	max-width: 480px;
}
.fbform .fb-area {
	min-height: 170px;
	padding: 6px 8px;
	font: inherit;
	line-height: 1.45;
	resize: vertical;
}
.fbform .f_input.fb-short {
	width: 122px;
}
/* as wide as the picture above it */
.fbform .fb-hint {
	margin-top: 4px;
	font-size: 0.92em;
	line-height: 1.4;
	color: var(--muted);
}
/* picture and its «оновити» link on one line, the answer field under them */
.fbform .fb-captcha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 8px;
}
.fbform #captcha-box img {
	display: block;
	border: 1px solid var(--border);
	border-radius: 4px;
}
.fbform .fb-reload {
	font-size: 0.92em;
}
/* browsers mark a wrong field only after the visitor has typed in it */
.fbform .f_input:user-invalid,
.fbform .fb-area:user-invalid {
	border-color: var(--danger-line);
}
/* the server's answer (wrong code, limits...), between the fields and the button */
.fb-msg {
	padding: 10px 16px;
	line-height: 1.45;
	color: var(--danger-text);
	background: var(--danger-bg);
	border-top: 1px solid var(--danger-line);
}
.fb-msg[hidden] {
	display: none;
}
.fb-msg ul {
	margin: 0;
	padding: 0 0 0 18px;
}
.fb-msg li {
	list-style: disc;
}
.fbform .fieldsubmit .fbutton[disabled] {
	opacity: 0.6;
	cursor: default;
}
/* --- «Поскаржитися» (?do=complaint, complaint.tpl, 2026-11-04): the feedback form's layout --- */
.cpform .cp-target {
	padding-top: 16px;
	color: var(--text);
	line-height: 1.45;
}
.cpform .cp-what {
	color: var(--text-2);
}
.cpform .cp-title {
	display: inline-block;
	margin-top: 2px;
	font-weight: bold;
}
.cpform .cp-quote {
	max-width: 480px;
	margin: 8px 0 0;
	padding: 8px 12px;
	box-sizing: border-box;
	color: var(--text-2);
	background: var(--soft);
	border-left: 3px solid var(--border);
	border-radius: 0 6px 6px 0;
	overflow-wrap: anywhere;
}
.cpform .fieldsubmit {
	display: flex;
	align-items: center;
	gap: 16px;
}
.cpform .cp-cancel {
	color: var(--muted);
}

@media (max-width: 620px) {
	.fbform .tableform td.label {
		width: auto;
		padding-top: 4px;
	}
	.fbform .fb-plain b,
	.fbform .fb-to {
		padding-top: 0;
	}
	.fbform .f_input,
	.fbform .fb-select,
	.fbform .fb-area {
		max-width: none;
	}
	.cpform .cp-target {
		padding-top: 0;
	}
	.cpform .cp-quote {
		max-width: none;
	}
}

/* Profile */

.xfields textarea,
.xprofile textarea {
	width: 98%;
	height: 86px;
	margin: 0 1px 0 0;
}
.xfields input,
.xprofile input {
	width: 250px;
	height: 14px;
}
.users_search {
	margin-bottom: 12px;
}
.users_search div {
	padding-top: 12px;
}
.users_search .loginform {
	width: 280px;
}
.users_search input[type=submit] {
	width: 132px;
	float: right;
}
/* profile (/user/NAME/: userinfo.tpl + engine/modules/profile.php) — One block like the sidebar menu: title strip «Радіоаматор UR5SNM» with the rating (and «Редагувати профіль» on your own page, «В адмінці» for admins on others' pages), photo + name, group, last visit and the contact buttons, a row of counters, the details as label/value rows, then the latest articles and photos. The edit form is a second block of the same kind, opened from the button; articles waiting for moderation (author / admins) are a third one under it. Rewritten 2026-11-03. */
.up-box {
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	color: var(--text);
}
.up-formwrap {
	display: block;
}
/* base.css makes every form inline */
.up-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	min-height: 32px;
	padding: 6px 8px 6px 16px;
	background: var(--strip);
	border-bottom: 1px solid var(--border);
}
.up-top .btl {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	font-size: 1.15em;
	line-height: 32px;
	color: var(--text-2);
	background: none;
	border: 0;
}
.up-kind {
	margin-right: 4px;
	font-weight: normal;
	color: var(--muted);
}
.up-rate {
	flex: 0 0 auto;
}
.up-rate .rate {
	width: 85px;
	height: 17px;
	margin: 0;
}
.up-top-acts {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
}
.up-top-acts:empty {
	display: none;
}
.up-flash {
	padding: 9px 16px;
	line-height: 1.45;
	color: var(--ok-dark);
	background: var(--ok-bg);
	border-bottom: 1px solid var(--ok-line);
}
.up-main {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 16px;
}
#midside .up-ava {
	flex: 0 0 auto;
	display: block;
	box-sizing: border-box;
	width: 112px;
	height: 112px;
	object-fit: cover;
	background: var(--hover);
	border: 1px solid var(--border);
	border-radius: 8px;
}
#midside .up-ava.is-small {
	width: 72px;
	height: 72px;
}
.up-who {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.45;
}
.up-name {
	font-size: 1.25em;
	font-weight: bold;
	color: var(--text);
	overflow-wrap: anywhere;
}
.up-group {
	color: var(--muted);
}
.up-group b {
	font-weight: normal;
}
.up-group span[style] {
	color: var(--danger) !important;
}
/* the admin group's red prefix from the DB, in the site's own red */
.up-seen {
	margin-top: 2px;
	font-size: 0.92em;
	color: var(--muted);
}
.up-seen.is-on {
	color: var(--ok);
}
.up-seen.is-on:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 5px;
	vertical-align: 1px;
	background: #4caf50;
	border-radius: 50%;
}
.up-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.up-acts:empty {
	display: none;
}
.up-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 16px;
	box-sizing: border-box;
	font: 14px/1 Arial, Helvetica, sans-serif;
	color: var(--text-2);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.up-btn:hover {
	color: var(--link-hover);
	background: var(--hover);
	text-decoration: none;
}
.up-btn.is-main {
	color: #fff;
	background: var(--link);
	border-color: var(--link-hover);
}
.up-btn.is-main:hover {
	color: #fff;
	background: var(--link-hover);
}
/* counters: four equal cells across the block, linked when there is something to see */
.up-nums {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--soft);
}
.up-num {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 9px 6px;
	text-align: center;
	color: var(--muted);
	text-decoration: none;
}
.up-num + .up-num {
	border-left: 1px solid var(--line);
}
.up-num b {
	font-size: 1.3em;
	line-height: 1.2;
	color: var(--text);
}
.up-num span {
	font-size: 0.9em;
	line-height: 1.25;
}
a.up-num:hover {
	background: var(--strip);
	text-decoration: none;
}
a.up-num:hover b {
	color: var(--link-hover);
}
.up-num.is-zero b {
	color: var(--placeholder);
}
/* details: label / value rows */
.up-facts {
	margin: 0;
	padding: 4px 16px;
}
.up-facts > div {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 12px;
	padding: 7px 0;
	line-height: 1.45;
}
.up-facts > div + div {
	border-top: 1px solid var(--line);
}
.up-facts dt {
	color: var(--muted);
}
.up-facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.up-age {
	color: var(--muted);
}
.up-moder table {
	width: auto;
	border: 0;
}
.up-moder td {
	padding: 0;
	border: 0;
}
/* latest articles and photos */
.up-sec {
	padding: 12px 16px 14px;
	border-top: 1px solid var(--line);
}
.up-sec h2 {
	margin: 0 0 8px;
	font-size: 1.05em;
	font-weight: bold;
	color: var(--text-2);
}
.up-news {
	margin: 0;
	padding: 0;
	list-style: none;
}
.up-news li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	margin: 0;
	padding: 6px 0;
	background: none;
	border-bottom: 1px solid var(--line);
}
.up-news li a {
	flex: 1 1 280px;
	min-width: 0;
	color: var(--link-hover);
}
.up-news-meta {
	display: flex;
	gap: 10px;
	margin-left: auto;
	font-size: 0.9em;
	color: var(--muted);
	white-space: nowrap;
}
.up-news-cat:after {
	content: "·";
	margin-left: 10px;
	color: var(--placeholder);
}
.up-news-meta a {
	color: var(--muted);
}
.up-news-meta a:hover {
	color: var(--link-hover);
}
.up-more {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 10px;
	font-size: 0.92em;
}
.up-more a {
	color: var(--link);
}
.up-photos {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 6px;
}
.up-ph {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--hover);
	border: 1px solid var(--line);
	border-radius: 6px;
}
#midside .up-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.up-ph:hover {
	border-color: var(--link-soft);
}
/* ---- the edit form ---- Sections as rows of label | field (one 560px field width, so the right edges line up), the rarely used password and IP-address sections folded, and the save bar sticking to the bottom of the window while the form is longer than the screen. */
.up-editbox {
	display: none;
	overflow: visible;
	scroll-margin-top: 12px;
}
/* visible: the sticky save bar needs it */
.up-editbox.is-open {
	display: block;
}
.up-editbox > .up-top {
	border-radius: 8px 8px 0 0;
}
.up-err {
	padding: 9px 16px;
	line-height: 1.45;
	color: var(--danger-text);
	background: var(--danger-bg);
	border-bottom: 1px solid var(--danger-line);
}
.up-err ul {
	margin: 4px 0 0;
	padding: 0 0 0 18px;
}
.up-err li {
	list-style: disc;
}
.up-form {
	padding: 0 16px;
}
.up-fs {
	min-width: 0;
	margin: 0;
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
}
/* base.css rounds every fieldset */
.up-fs legend,
.up-fs summary {
	float: left;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-size: 1.05em;
	font-weight: bold;
	color: var(--text-2);
}
.up-fs legend + * {
	clear: left;
}
.up-fold summary {
	float: none;
	margin: 0;
	list-style: none;
	cursor: pointer;
}
.up-fold summary::-webkit-details-marker {
	display: none;
}
.up-fold summary:before {
	content: "";
	display: inline-block;
	margin-right: 8px;
	vertical-align: 1px;
	border: 5px solid transparent;
	border-right-width: 0;
	border-left-color: var(--muted);
	transition: transform 0.15s;
}
.up-fold summary:hover {
	color: var(--link-hover);
}
.up-fold[open] summary {
	margin-bottom: 12px;
}
.up-fold[open] summary:before {
	transform: rotate(90deg);
}
.up-f {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	align-items: start;
	gap: 4px 12px;
	margin-bottom: 10px;
}
.up-f:last-child {
	margin-bottom: 0;
}
.up-f > label {
	padding-top: 7px;
	color: var(--text-2);
}
.up-f > :not(label) {
	grid-column: 2;
}
.up-form .f_input,
.up-form .f_textarea {
	width: 100%;
	padding: 5px 8px;
}
.up-form .f_input,
.up-form .f_textarea,
.up-select {
	max-width: 560px;
	box-sizing: border-box;
	font: 14px Arial, Helvetica, sans-serif;
	color: var(--text);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 4px;
}
.up-form .f_input,
.up-select {
	height: 32px;
}
.up-form .f_textarea {
	display: block;
	min-height: 52px;
	max-height: 260px;
	line-height: 1.45;
	resize: vertical;
	field-sizing: content;
}
/* grows with the text where supported */
.up-form .f_input:focus,
.up-form .f_textarea:focus,
.up-select:focus {
	border-color: var(--link-soft);
	outline: 2px solid rgba(57, 141, 216, 0.2);
	outline-offset: 0;
}
.up-form .f_input[readonly] {
	color: var(--muted);
	background: var(--soft);
}
.up-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 560px;
}
.up-form .up-date {
	width: 160px;
}
.up-select {
	width: auto;
	padding: 4px;
}
.up-hint {
	margin-top: 4px;
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--muted);
}
.up-hint-top {
	margin: 0 0 10px;
}
.up-hint code {
	padding: 0 3px;
	background: var(--strip);
	border-radius: 3px;
}
.up-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	color: var(--text);
	cursor: pointer;
}
.up-check input {
	width: 16px;
	height: 16px;
	margin: 0;
}
.up-f ~ .up-check {
	margin-left: 182px;
}
.up-photo-edit {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
#midside .up-ava.is-del {
	opacity: 0.35;
	filter: grayscale(1);
}
.up-photo-edit input[type=file] {
	max-width: 100%;
	font: 13px Arial, Helvetica, sans-serif;
	color: var(--muted);
}
.up-photo-edit input[type=file]::file-selector-button {
	height: 32px;
	margin-right: 10px;
	padding: 0 14px;
	font: 14px/1 Arial, Helvetica, sans-serif;
	color: var(--text-2);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 4px;
	cursor: pointer;
}
.up-photo-edit input[type=file]::file-selector-button:hover {
	color: var(--link-hover);
	background: var(--hover);
}
.up-ignore {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.up-ignore li {
	margin: 0;
	padding: 3px 10px;
	background: var(--strip);
	border: 1px solid var(--border);
	border-radius: 14px;
}
.up-unignore {
	margin-left: 4px;
	font-size: 0.9em;
	color: var(--danger-dark);
}
.up-xf {
	width: 100%;
	margin-top: 4px;
}
.up-submit {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 -16px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 -6px 10px -8px rgba(63, 75, 81, 0.25);
}
.up-submit .up-btn {
	height: 34px;
	padding: 0 22px;
	font-weight: bold;
}
.up-cancel {
	color: var(--muted);
}
/* ---- articles waiting for moderation (author / admins; userpending.tpl, wrapped in show.short.php) ---- */
.up-pend-note {
	padding: 9px 16px 0;
	font-size: 0.92em;
	line-height: 1.4;
	color: var(--muted);
}
.up-pend-list {
	padding: 4px 16px 12px;
}
.up-pend-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
}
.up-pend-title {
	flex: 1 1 280px;
	min-width: 0;
}
.up-pend-title a {
	color: var(--link-hover);
}
.up-pend-edit {
	display: inline-block;
	padding: 1px 9px;
	font-size: 12px;
	line-height: 18px;
	color: var(--text-2);
	background: var(--strip);
	border: 1px solid var(--border);
	border-radius: 10px;
	white-space: nowrap;
}
.up-pend-list .navigation {
	margin: 12px 0 0;
}

@media (max-width: 800px) {
	.up-top {
		padding-left: 12px;
	}
	.up-flash,
	.up-err {
		padding-left: 12px;
		padding-right: 12px;
	}
	.up-main {
		padding: 12px;
		gap: 14px;
	}
	.up-facts,
	.up-sec,
	.up-form,
	.up-pend-list {
		padding-left: 12px;
		padding-right: 12px;
	}
	.up-pend-note {
		padding-left: 12px;
		padding-right: 12px;
	}
	.up-submit {
		margin: 0 -12px;
		padding: 10px 12px;
	}
	.up-photos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	#midside .up-ava {
		width: 84px;
		height: 84px;
	}
	.up-name {
		font-size: 1.1em;
	}
	.up-acts {
		margin-top: 10px;
	}
	.up-acts .up-btn {
		flex: 1 1 auto;
	}
	/* photo beside the name lines, the buttons across the block under them */
	.up-main {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 0 14px;
	}
	.up-who {
		display: contents;
	}
	.up-main .up-ava {
		grid-row: 1 / span 3;
	}
	.up-name,
	.up-group,
	.up-seen {
		grid-column: 2;
	}
	.up-main .up-acts {
		grid-column: 1 / -1;
		grid-row: 4;
	}
	.up-nums {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.up-num:nth-child(3) {
		border-left: 0;
	}
	.up-num:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}
	.up-facts > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.up-facts dt {
		font-size: 0.9em;
	}
	.up-news-meta {
		margin-left: 0;
	}
	.up-pend-row .up-news-meta {
		flex: 1 1 auto;
	}
	.up-top-acts {
		flex: 1 0 100%;
		margin-bottom: 2px;
	}
	.up-top-acts .up-btn {
		flex: 1 1 0;
	}
	.up-f {
		grid-template-columns: minmax(0, 1fr);
	}
	.up-f > label {
		padding-top: 0;
	}
	.up-f > :not(label) {
		grid-column: 1;
	}
	.up-form .f_input,
	.up-form .f_textarea {
		max-width: none;
		font-size: 16px;
	}
	.up-form .f_input {
		height: 38px;
	}
	.up-form .f_textarea {
		height: auto;
	}
	.up-select {
		height: 38px;
		font-size: 16px;
	}
	.up-inline {
		max-width: none;
	}
	.up-f ~ .up-check {
		margin-left: 0;
	}
	.up-submit .up-btn {
		flex: 1 1 auto;
		height: 40px;
	}
	.up-submit .up-cancel {
		flex: 0 0 auto;
		padding: 0 6px;
	}
}

/* Users */

/* «Користувачі сайту» (?do=users: users_search.tpl + users.tpl) — One block like the sidebar menu: title strip, search form, count line, then the member rows as the block's bordered rows; the last row closes the block. */
.ulist-head {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px 8px 0 0;
}
.ulist-head:not(:has( + .ulist-row)) {
	margin-bottom: 12px;
	border-radius: 8px;
}
.ulist-head h1.btl {
	margin: 0;
	padding: 8px 16px;
	font-size: 1.15em;
	color: var(--text-2);
	background: var(--strip);
	border-bottom: 1px solid var(--border);
	border-radius: 7px 7px 0 0;
}
.ulist-form {
	display: block;
	padding: 12px 16px;
}
/* base.css makes every form inline */
.ulist-form label {
	color: var(--muted);
}
.ulf-find {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ulf-find .loginform {
	flex: 0 1 260px;
	min-width: 0;
	height: 30px;
	box-sizing: border-box;
}
.ulist-form .usersbmt {
	height: 30px;
	padding: 0 18px;
	color: #fff;
	background: var(--link) none;
	border-color: var(--link-hover);
}
.ulist-form .usersbmt:hover {
	background-color: var(--link-hover);
}
.ulf-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 10px;
}
.ulf-opts label {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ulf-opts select {
	height: 28px;
	padding: 2px 4px;
}
.ulist-total {
	padding: 7px 16px;
	font-size: 0.92em;
	color: var(--muted);
	background: var(--soft);
	border-top: 1px solid var(--line);
}
.ulist-row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas: "ava who nums" "ava dates acts";
	gap: 4px 14px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--border);
	border-top: 0;
}
.ulist-row:hover {
	background-color: var(--soft);
}
.ulist-row:not(:has( + .ulist-row)) {
	margin-bottom: 12px;
	border-radius: 0 0 8px 8px;
}
.ul-ava {
	grid-area: ava;
	display: block;
	width: 64px;
	height: 64px;
}
#midside .ul-ava img {
	display: block;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	object-fit: cover;
	background: var(--hover);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.ul-who {
	grid-area: who;
	min-width: 0;
	line-height: 1.4;
}
.ul-call a {
	font-size: 1.1em;
	font-weight: bold;
	color: var(--link-hover);
	text-decoration: none;
}
.ul-call a:hover {
	text-decoration: underline;
}
.ul-on {
	margin-left: 6px;
	font-size: 0.9em;
	color: var(--ok);
	white-space: nowrap;
}
.ul-on:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 4px;
	vertical-align: 1px;
	background: #4caf50;
	border-radius: 50%;
}
.ul-name {
	color: var(--text);
}
.ul-group {
	font-size: 0.92em;
	color: var(--muted);
}
.ul-group b {
	font-weight: normal;
}
.ul-group span[style] {
	color: var(--danger) !important;
}
/* the admin group's red prefix from the DB, in the site's own red */
.ul-dates {
	grid-area: dates;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	margin: 0;
	font-size: 0.92em;
	align-self: end;
}
.ul-dates dt {
	color: var(--muted);
}
.ul-dates dd {
	margin: 0 14px 0 0;
	color: var(--text);
}
.ul-nums {
	grid-area: nums;
	display: flex;
	gap: 18px;
	margin: 0;
	text-align: center;
}
.ul-nums div {
	display: flex;
	flex-direction: column-reverse;
}
.ul-nums dt {
	font-size: 0.85em;
	color: var(--muted);
}
.ul-nums dd {
	margin: 0;
	font-size: 1.15em;
	font-weight: bold;
	line-height: 1.2;
	color: var(--text);
}
.ul-acts {
	grid-area: acts;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92em;
	align-self: end;
}
.ul-acts li {
	margin: 0;
	padding: 0;
	background: none;
}
.ul-acts a {
	color: var(--link);
}

@media (max-width: 800px) {
	.ulist-head h1.btl,
	.ulist-form,
	.ulist-total,
	.ulist-row {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 620px) {
	.ulf-find {
		flex-wrap: wrap;
	}
	.ulf-find label {
		flex: 1 0 100%;
	}
	.ulf-find .loginform {
		flex: 1 1 0;
	}
	.ulf-opts {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	.ulf-opts label {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
	}
	.ulf-opts .ulf-sort {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.ulf-opts .ulf-sort span {
		grid-column: 1 / -1;
	}
	.ulf-opts select {
		width: 100%;
		min-width: 0;
		margin: 0;
	}
	.ulist-row {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas: "ava who" "ava nums" "dates dates" "acts acts";
		gap: 6px 12px;
	}
	.ul-ava,
	#midside .ul-ava img {
		width: 56px;
		height: 56px;
	}
	.ul-nums {
		justify-content: flex-start;
		gap: 16px;
		text-align: left;
	}
	.ul-nums div {
		flex-direction: row;
		align-items: baseline;
		gap: 4px;
	}
	.ul-nums dt {
		font-size: 0.92em;
	}
	.ul-nums dt:after {
		content: ":";
	}
	.ul-nums dd {
		font-size: 1em;
	}
	.ul-dates {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2px 8px;
		padding-top: 6px;
		border-top: 1px solid var(--line);
	}
	.ul-dates dd {
		margin: 0;
	}
	.ul-acts {
		justify-content: flex-start;
		gap: 0 16px;
	}
	.ul-acts a {
		display: inline-block;
		padding: 6px 0;
	}
}

/* Members («Члени клубу», shortstory_members.tpl): a grid of member cards */

#page-content:has( > .base.member) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 14px;
}
#page-content:has( > .base.member) > :not(.member) {
	grid-column: 1 / -1;
}

.base.member {
	display: flex;
	flex-direction: column;
}
.base.shortstory.member > .dpad {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 0 12px;
}
.base.shortstory.member > .dpad > .btl {
	margin: 0 -12px 8px;
	padding: 8px 12px;
	font-size: 1.1em;
}
.base.shortstory.member > .dpad > .mlink {
	margin: auto -12px 0;
}
.base.member .maincont {
	flex: 1 1 auto;
	margin-bottom: 10px;
	font-size: 0.95em;
	line-height: 1.35;
}
.base.member .maincont p,
.base.member .maincont div {
	margin: 0;
	text-align: left !important;
}
.base.member .maincont div:empty,
.base.member .maincont p:empty,
.base.member .maincont .clr {
	display: none;
}
.base.member .maincont img {
	float: none !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 8px 0 0;
}
#midside .base.member .mlink {
	padding: 7px 12px;
	gap: 6px 10px;
}

@media (max-width: 800px) {
	/* two cards in a row */
	#page-content:has( > .base.member) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 10px;
	}
	.base.shortstory.member > .dpad {
		padding: 0 10px;
	}
	.base.shortstory.member > .dpad > .btl {
		margin: 0 -10px 8px;
		padding: 8px 10px;
		font-size: 1em;
	}
	.base.shortstory.member > .dpad > .mlink {
		margin: auto -10px 0;
	}
	#midside .base.member .mlink {
		padding: 6px 10px;
	}
	.base.member .maincont {
		font-size: 13px;
	}
}

/* Private messages */

/* «Особисті повідомлення» (?do=pm: pm.tpl + engine/modules/pm.php) — One block like the sidebar menu: title strip with «Написати», a tab row (Розмови · Вхідні · Надіслані), then the rows; a conversation shows its messages as quiet bordered boxes (yours on the right, tinted) and the reply form under them; the mailbox fill line closes the block. Rewritten 2026-11-03. */
.pm-box {
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	color: var(--text);
}
.pm-top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px 6px 16px;
	background: var(--strip);
	border-bottom: 1px solid var(--border);
}
.pm-top h1.btl {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	font-size: 1.15em;
	line-height: 32px;
	color: var(--text-2);
	background: none;
	border: 0;
}
.pm-write {
	flex: 0 0 auto;
	height: 32px;
	padding: 0 16px;
	line-height: 30px;
	box-sizing: border-box;
	color: #fff;
	background: var(--link);
	border: 1px solid var(--link-hover);
	border-radius: 4px;
	text-decoration: none;
}
.pm-write:before {
	content: "+";
	margin-right: 6px;
	font-weight: bold;
}
.pm-write:hover,
.pm-write.on {
	color: #fff;
	background-color: var(--link-hover);
	text-decoration: none;
}
.pm-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--line);
}
.pm-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	color: var(--text-2);
	border: 1px solid transparent;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
}
.pm-tab:hover {
	color: var(--link-hover);
	background: var(--strip);
	text-decoration: none;
}
.pm-tab.on {
	color: var(--link-hover);
	font-weight: bold;
	background: var(--strip);
	border-color: var(--border);
}
.pm-n {
	font-weight: normal;
	font-size: 0.9em;
	color: var(--muted);
}
.pm-new {
	min-width: 18px;
	padding: 0 6px;
	box-sizing: border-box;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: var(--link);
	border-radius: 9px;
}
/* the one-line answer after sending, deleting, marking */
.pm-flash {
	padding: 9px 16px;
	line-height: 1.45;
	color: var(--ok-dark);
	background: var(--ok-bg);
	border-bottom: 1px solid var(--ok-line);
}
.pm-flash.is-err {
	color: var(--danger-text);
	background: var(--danger-bg);
	border-bottom-color: var(--danger-line);
}
.pm-with {
	padding: 8px 16px;
	color: var(--text-2);
	background: var(--soft);
	border-bottom: 1px solid var(--line);
}
.pm-with a {
	color: var(--link-hover);
}
/* rows: [☐] (avatar) who · count · date / subject / first words */
.pm-list {
	display: block;
}
/* base.css makes every form inline */
.pm-item {
	position: relative;
	display: grid;
	grid-template-columns: 16px 40px minmax(0, 1fr);
	align-items: center;
	gap: 0 12px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
}
.pm-item:hover {
	background: var(--soft);
}
.pm-item.is-sel {
	background: var(--strip);
}
.pm-item.is-new {
	background: #f4f9fd;
}
.pm-item.is-new:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--link);
}
.pm-item .pm-check {
	position: relative;
	z-index: 2;
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
}
#midside .pm-ava {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
	background: var(--hover);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--border);
}
.pm-open {
	display: block;
	min-width: 0;
	color: var(--text);
	text-decoration: none;
}
.pm-open:hover {
	text-decoration: none;
}
.pm-open:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* the whole row opens it */
.pm-open:focus-visible {
	outline: none;
}
.pm-open:focus-visible:after {
	outline: 2px solid var(--link);
	outline-offset: -2px;
}
.pm-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
.pm-who {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--link-hover);
}
.pm-to {
	font-weight: normal;
	color: var(--muted);
}
.pm-cnt {
	flex: 0 0 auto;
	padding: 0 6px;
	font-size: 0.85em;
	line-height: 17px;
	color: var(--text-2);
	background: var(--hover);
	border-radius: 9px;
}
.pm-replied {
	flex: 0 0 auto;
	font-size: 0.85em;
	color: var(--muted);
}
.pm-replied:before {
	content: "↩ ";
}
.pm-date {
	flex: 0 0 auto;
	margin-left: auto;
	padding-left: 8px;
	font-size: 0.9em;
	color: var(--muted);
	white-space: nowrap;
}
.pm-subj,
.pm-snip {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pm-subj {
	margin-top: 1px;
	color: var(--text);
}
.pm-snip {
	margin-top: 1px;
	font-size: 0.92em;
	color: var(--muted);
}
.pm-snip i {
	font-style: normal;
	color: var(--text-2);
}
.is-new .pm-subj,
.is-new .pm-who {
	font-weight: bold;
}
.is-new .pm-date {
	font-weight: bold;
	color: var(--link-hover);
}
.pm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 10px 16px;
	background: var(--soft);
}
.pm-all-l {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: 6px;
	color: var(--text-2);
	cursor: pointer;
}
.pm-all-l input {
	width: 16px;
	height: 16px;
	margin: 0;
}
.pm-btn {
	height: 30px;
	padding: 0 14px;
	font: 14px Arial, Helvetica, sans-serif;
	color: var(--text-2);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 4px;
	cursor: pointer;
}
.pm-btn:hover:not(:disabled) {
	color: var(--link-hover);
	background: var(--hover);
}
.pm-btn.pm-del:hover:not(:disabled) {
	color: var(--danger-dark);
	background: var(--danger-bg);
	border-color: var(--danger-line);
}
.pm-btn:disabled {
	opacity: 0.5;
	cursor: default;
}
.pm-selcount {
	margin-left: auto;
	font-size: 0.92em;
	color: var(--muted);
}
.pm-empty {
	padding: 32px 24px;
	line-height: 1.5;
	text-align: center;
	color: var(--muted);
}
.pm-empty b {
	display: block;
	margin-bottom: 6px;
	font-size: 1.1em;
	color: var(--text-2);
}
/* mailbox fill: 12 з 20 [====      ] */
.pm-quota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	padding: 8px 16px;
	font-size: 0.9em;
	color: var(--muted);
	background: var(--soft);
	border-top: 1px solid var(--line);
}
.pm-quota-bar {
	flex: 0 0 120px;
	height: 6px;
	overflow: hidden;
	background: var(--hover);
	border-radius: 3px;
}
.pm-quota-bar i {
	display: block;
	height: 100%;
	background: var(--link-soft);
	border-radius: 3px;
}
.pm-quota.is-warn .pm-quota-bar i {
	background: #e0a84f;
}
.pm-quota.is-full {
	color: var(--danger-text);
	background: var(--danger-bg);
}
.pm-quota.is-full .pm-quota-bar i {
	background: var(--danger);
}
.pm-quota-msg {
	color: inherit;
}
.pm-quota.is-warn .pm-quota-msg {
	color: #8a6418;
}
.pm-list + .pm-quota,
.pm-empty + .pm-quota {
	border-top: 1px solid var(--line);
}
/* ---- a conversation ---- */
.pm-thead {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 12px 16px 0;
}
.pm-back {
	white-space: nowrap;
	color: var(--link);
}
.pm-thead h2 {
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
	font-size: 1.25em;
	line-height: 1.3;
	color: var(--text);
	overflow-wrap: anywhere;
}
.pm-peer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 16px 14px;
	padding: 10px 12px;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 8px;
}
#midside .pm-peer .pm-ava {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
}
.pm-peer-who {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.4;
}
.pm-peer-call a {
	font-weight: bold;
	font-size: 1.05em;
	color: var(--link-hover);
}
.pm-peer-name {
	color: var(--text);
}
.pm-peer-group {
	font-size: 0.9em;
	color: var(--muted);
}
.pm-peer-group b {
	font-weight: normal;
}
.pm-peer-group span[style] {
	color: var(--danger) !important;
}
.pm-peer-acts {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 14px;
	font-size: 0.92em;
}
.pm-peer-acts a {
	color: var(--link);
}
.pm-msgs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 16px 16px;
}
.pm-msg {
	max-width: 86%;
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	scroll-margin-top: 16px;
}
.pm-msg.is-mine {
	align-self: flex-end;
	background: #f2f7fb;
	border-color: #cfe0ea;
}
.pm-msg.is-current {
	border-color: var(--link-soft);
}
.pm-msg.is-new {
	border-left: 3px solid var(--link);
}
.pm-msg-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	padding: 8px 12px 0;
	font-size: 0.9em;
	color: var(--muted);
}
.pm-msg-who {
	color: var(--text);
}
.is-mine .pm-msg-who {
	color: var(--text-2);
}
.pm-msg-new {
	padding: 0 6px;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 16px;
	color: #fff;
	background: var(--link);
	border-radius: 8px;
}
.pm-msg-acts {
	display: flex;
	gap: 12px;
	margin-left: auto;
}
.pm-msg-acts a {
	color: var(--faint);
}
.pm-msg-acts a:hover {
	color: var(--link);
}
.pm-msg-acts a.pm-del-one:hover {
	color: var(--danger-dark);
}
.pm-msg-subj {
	padding: 4px 12px 0;
	font-weight: bold;
	color: var(--text-2);
}
.pm-msg-text {
	padding: 6px 12px 10px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.pm-msg-text p {
	margin: 0 0 0.6em;
}
.pm-msg-text > :last-child {
	margin-bottom: 0;
}
.pm-msg-text ul,
.pm-msg-text ol {
	margin: 0.3em 0 0.6em;
	padding-left: 22px;
}
.pm-msg-text li {
	list-style: inherit;
}
.pm-msg-text ol li {
	list-style: decimal;
}
.pm-msg-text ul li {
	list-style: disc;
}
.pm-msg-text img {
	max-width: 100%;
	height: auto;
}
/* ---- the forms: reply under a conversation, and «Написати» ---- */
.pm-reply {
	padding: 12px 16px 16px;
	background: var(--soft);
	border-top: 1px solid var(--line);
	scroll-margin-top: 16px;
}
.pm-reply h3 {
	margin: 0 0 10px;
	font-size: 1em;
	font-weight: bold;
	color: var(--text-2);
}
.pm-reply-off {
	color: var(--muted);
}
.pm-compose {
	padding: 14px 16px 16px;
}
.pm-form {
	display: block;
}
.pm-field {
	margin-bottom: 14px;
}
.pm-field > label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: var(--text-2);
}
.pm-form .f_input {
	width: 100%;
	max-width: 480px;
	height: 32px;
	box-sizing: border-box;
	padding: 4px 8px;
	font: 14px Arial, Helvetica, sans-serif;
}
.pm-form .f_input.pm-code {
	width: 120px;
}
.pm-form .editorcomm textarea {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}
.pm-hint {
	margin-top: 4px;
	font-size: 0.9em;
	color: var(--muted);
}
.pm-to-chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	max-width: 100%;
	padding: 4px 14px 4px 4px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 22px;
}
#midside .pm-to-chip .pm-ava {
	width: 32px;
	height: 32px;
}
.pm-to-chip b {
	color: var(--text);
}
.pm-to-chip span {
	color: var(--muted);
}
.pm-to-chip a {
	font-size: 0.92em;
	color: var(--link);
}
.pm-captcha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}
.pm-captcha img {
	display: block;
	border: 1px solid var(--border);
	border-radius: 4px;
}
.pm-recode {
	font-size: 0.92em;
}
.pm-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}
.pm-send {
	height: 34px;
	padding: 0 22px;
	font: bold 14px Arial, Helvetica, sans-serif;
	color: #fff;
	background: var(--link);
	border: 1px solid var(--link-hover);
	border-radius: 4px;
	cursor: pointer;
}
.pm-send:hover {
	background: var(--link-hover);
}
.pm-send:disabled {
	opacity: 0.7;
	cursor: wait;
}
.pm-copy {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-2);
	cursor: pointer;
}
.pm-copy input {
	margin: 0;
}
.pm-err {
	margin-bottom: 12px;
	padding: 9px 12px;
	line-height: 1.45;
	color: var(--danger-text);
	background: var(--danger-bg);
	border: 1px solid var(--danger-line);
	border-radius: 4px;
}
.pm-err[hidden] {
	display: none;
}
.pm-err ul {
	margin: 0;
	padding: 0 0 0 18px;
}
.pm-err li {
	list-style: disc;
}
/* new-message notice in the corner (pm_alert.php) — */
.pm-toast {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	width: 330px;
	max-width: calc(100% - 32px);
	color: var(--text);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(40, 70, 90, 0.16);
}
.pm-toast-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 8px 6px 12px;
	font-weight: bold;
	color: var(--text-2);
	background: var(--strip);
	border-bottom: 1px solid var(--border);
	border-radius: 7px 7px 0 0;
}
.pm-toast-x {
	width: 26px;
	height: 26px;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: var(--muted);
	border-radius: 4px;
	text-decoration: none;
}
.pm-toast-x:hover {
	color: var(--text);
	background: var(--hover);
	text-decoration: none;
}
.pm-toast-body {
	padding: 10px 12px 12px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.pm-toast-snip {
	margin-top: 4px;
	font-size: 0.92em;
	color: var(--muted);
}
.pm-toast-acts {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px;
}
.pm-toast-go {
	height: 30px;
	padding: 0 16px;
	line-height: 28px;
	box-sizing: border-box;
	color: #fff;
	background: var(--link);
	border: 1px solid var(--link-hover);
	border-radius: 4px;
	text-decoration: none;
}
.pm-toast-go:hover {
	color: #fff;
	background: var(--link-hover);
	text-decoration: none;
}
.pm-toast[hidden] {
	display: none;
}

@media (max-width: 800px) {
	.pm-top,
	.pm-item,
	.pm-actions,
	.pm-quota,
	.pm-flash,
	.pm-with,
	.pm-reply,
	.pm-compose {
		padding-left: 12px;
		padding-right: 12px;
	}
	.pm-thead {
		padding-left: 12px;
		padding-right: 12px;
	}
	.pm-peer {
		margin-left: 12px;
		margin-right: 12px;
	}
	.pm-msgs {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 620px) {
	.pm-tabs {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 8px;
	}
	.pm-tab {
		justify-content: center;
		padding: 0 4px;
		gap: 4px;
	}
	.pm-item {
		grid-template-columns: 16px 36px minmax(0, 1fr);
		gap: 0 10px;
	}
	#midside .pm-item .pm-ava {
		width: 36px;
		height: 36px;
	}
	.pm-actions .pm-btn {
		flex: 1 1 auto;
	}
	.pm-selcount {
		flex: 1 0 100%;
		margin: 0;
	}
	.pm-peer {
		flex-wrap: wrap;
	}
	.pm-peer-acts {
		flex: 1 0 100%;
		justify-content: flex-start;
		padding-left: 60px;
	}
	.pm-msg {
		max-width: 94%;
	}
	.pm-send {
		flex: 1 1 100%;
	}
}

/* Statistics */

table.userstop {
	border-collapse: collapse;
	border-spacing: 0;
}
.userstop td {
	border: 1px solid #d8d8d8;
	padding: 2px;
	background-color: #fff;
}
.userstop thead td {
	font-size: 0.9em;
	background: #fff;
	height: 22px;
	padding: 0;
	font-weight: bold;
	text-align: center;
	color: #4e4e4e;
}
/* Statistics page (?do=stats) - stats.tpl, 2026-11-02 Every part is a sidebar-style block: title strip + bordered rows. */
.stpage {
	margin-top: 4px;
}
.st-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 14px;
}
.st-box {
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}
.st-cols .st-box {
	margin-bottom: 0;
}
.stpage h3.st-ttl {
	margin: 0;
	padding: 8px 16px;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.4;
	color: var(--text-2);
	background: var(--strip);
	border-bottom: 1px solid var(--border);
}
/* label ............ number */
.stpage ul.st-list {
	margin: 0;
	padding: 4px 0;
	list-style: none;
}
.stpage ul.st-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 6px 16px;
	background: none;
	border-top: 1px solid var(--line);
}
.stpage ul.st-list li:first-child {
	border-top: 0;
}
.stpage ul.st-list span {
	color: var(--text-2);
}
.stpage ul.st-list b {
	font-size: 1.15em;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.stpage ul.st-list li:first-child b {
	color: var(--link-hover);
}
/* link closing a block, like a footer strip */
.stpage a.st-more {
	margin-top: auto;
	padding: 7px 16px;
	color: var(--link);
	text-decoration: none;
	border-top: 1px solid var(--line);
}
.stpage a.st-more:after {
	content: " \2192";
}
.stpage a.st-more:hover {
	color: var(--link-hover);
	background: var(--strip);
}
/* tables: "Нове на сайті" (st-period) and the top authors (DLE's {topusers}) */
.stpage table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}
.stpage table th,
.stpage table td {
	height: auto;
	padding: 7px 12px;
	text-align: right;
	vertical-align: baseline;
	background: #fff;
	border: 0;
	border-top: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}
.stpage table th:first-child,
.stpage table td:first-child {
	padding-left: 16px;
	text-align: left;
}
.stpage table th:last-child,
.stpage table td:last-child {
	padding-right: 16px;
}
.stpage table thead th,
.stpage table thead td {
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 0.9em;
	font-weight: normal;
	color: var(--muted);
	background: var(--soft) none;
	border-top: 0;
	border-bottom: 1px solid var(--line);
}
.stpage table tbody tr:first-child > * {
	border-top: 0;
}
.stpage table tbody tr:hover > * {
	background: var(--soft);
}
.st-period tbody th {
	font-weight: normal;
	color: var(--text-2);
}
.st-period td {
	width: 22%;
	font-weight: bold;
	color: var(--text);
}
/* top authors: Позивний | Група | Реєстрація | Останнє відвідування | Публікацій | Коментарів | ПП */
.userstop td:nth-child(1) a {
	font-weight: bold;
	text-decoration: none;
}
.userstop td:nth-child(2) {
	text-align: left;
	white-space: nowrap;
	color: var(--muted);
}
.userstop td:nth-child(2) b {
	font-weight: normal;
}
.userstop td:nth-child(2) span[style] {
	color: var(--text) !important;
	font-weight: bold;
}
/* admins: DLE prints them red */
.userstop tbody td:nth-child(3),
.userstop tbody td:nth-child(4) {
	color: var(--text-2);
	white-space: nowrap;
}
.stpage .userstop td {
	padding-left: 8px;
	padding-right: 8px;
	vertical-align: middle;
}
.stpage .userstop td:first-child {
	padding-left: 16px;
}
.stpage .userstop td:last-child {
	padding-right: 16px;
}
.userstop tbody td:nth-child(5) {
	font-weight: bold;
	color: var(--text);
}
/* last column: DLE's "[ ПП ]" becomes a quiet «Написати» button; brackets and header hidden */
.userstop td:nth-child(7) {
	width: 1%;
	white-space: nowrap;
	font-size: 0;
}
.userstop td:nth-child(7) a {
	display: inline-block;
	padding: 2px 10px;
	font-size: 0;
	line-height: 20px;
	color: var(--text);
	text-decoration: none;
	background: var(--strip);
	border: 1px solid var(--border);
	border-radius: 4px;
}
.userstop td:nth-child(7) a:after {
	content: "Написати";
	font-size: 12px;
}
.userstop td:nth-child(7) a:hover {
	color: #fff;
	background: var(--link);
	border-color: var(--link-hover);
}
.stpage p.st-db {
	margin: 0;
	padding: 0 2px;
	font-size: 0.9em;
	color: var(--muted);
}
.stpage p.st-db b {
	color: var(--text-2);
}

@media (min-width: 621px) and (max-width: 800px) {
	/* 621-800px: a top-author row has room for the four values side by side */
	.userstop tr {
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
		grid-template-areas: "name group group group pm"
			"pub  com   reg   last  pm";
	}
	.userstop td:nth-child(2) {
		align-self: center;
		margin-bottom: 0;
	}
}

@media (max-width: 800px) {
	/* full-width layout (≤800px): 12px inset like every card there; every top author is one bordered row (call sign + button, group, then a 2x2 grid of labelled values) - the table needs ~770px */
	.st-cols {
		gap: 10px;
		margin-bottom: 10px;
	}
	.st-box {
		margin-bottom: 10px;
	}
	.stpage h3.st-ttl {
		padding: 8px 12px;
	}
	.stpage ul.st-list li,
	.stpage a.st-more {
		padding-left: 12px;
		padding-right: 12px;
	}
	.stpage table th:first-child,
	.stpage table td:first-child {
		padding-left: 12px;
	}
	.stpage table th:last-child,
	.stpage table td:last-child {
		padding-right: 12px;
	}
	.stpage table th,
	.stpage table td {
		padding-left: 6px;
		padding-right: 6px;
	}
	.stpage table.userstop,
	.userstop tbody {
		display: block;
	}
	.userstop thead {
		display: none;
	}
	.userstop tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "name  pm"
			"group group"
			"pub   com"
			"reg   last";
		gap: 4px 12px;
		padding: 10px 12px;
		border-top: 1px solid var(--line);
	}
	.userstop tr:first-child {
		border-top: 0;
	}
	.userstop tr:hover {
		background: var(--soft);
	}
	.stpage .userstop td,
	.stpage .userstop td:first-child,
	.stpage .userstop td:last-child {
		display: block;
		padding: 0;
		text-align: left;
		white-space: normal;
		background: none;
		border: 0;
	}
	.userstop td:nth-child(1) {
		grid-area: name;
		align-self: center;
		font-size: 1.1em;
	}
	.userstop td:nth-child(2) {
		grid-area: group;
		font-size: 0.9em;
		margin-bottom: 4px;
	}
	.userstop td:nth-child(3) {
		grid-area: reg;
	}
	.userstop td:nth-child(4) {
		grid-area: last;
	}
	.userstop td:nth-child(5) {
		grid-area: pub;
	}
	.userstop td:nth-child(6) {
		grid-area: com;
	}
	.stpage .userstop td:nth-child(7) {
		grid-area: pm;
		width: auto;
		align-self: center;
		justify-self: end;
	}
	.userstop td:nth-child(n + 3):nth-child(-n + 6):before {
		display: block;
		font-size: 11px;
		font-weight: normal;
		color: var(--muted);
	}
	.userstop td:nth-child(3):before {
		content: "Реєстрація";
	}
	.userstop td:nth-child(4):before {
		content: "Останній візит";
	}
	.userstop td:nth-child(5):before {
		content: "Публікацій";
	}
	.userstop td:nth-child(6):before {
		content: "Коментарів";
	}
	.userstop td:nth-child(4):empty {
		display: none;
	}
	.userstop td:nth-child(7) a {
		padding: 6px 12px;
	}
}

@media (max-width: 620px) {
	/* phones: summary blocks stacked */
	.st-cols {
		grid-template-columns: 1fr;
	}
}

/* Exam */

/* --- Тренажер для іспиту на позивний (/exam/, engine/modules/exam.php) ------- Same block language as the rest of the content: #cbdfe8 borders, #f0f5f8 strips, 8px corners. Right/wrong use muted green/red fills, nothing louder. One alignment line runs through every question block: the question number, the radio buttons and the ✓/✗ marks share the first column (16px, 12px on phones); question text and answer text start together at the second (+24px). */
.qx .qx-meta {
	color: var(--muted);
}
/* action rows: buttons of one height on one centre line, the checkbox with them */
.qx .qx-actions {
	display: flex;
	flex-wrap: wrap;
	-webkit-box-align: center;
	align-items: center;
	gap: 8px;
	margin: 6px 0 14px;
}
.base.fullstory .dpad .qx-actions a.fbutton {
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	box-sizing: border-box;
	height: 32px;
	margin: 0;
	padding: 0 16px;
	color: var(--text);
	text-decoration: none;
}
.base.fullstory .dpad .qx-actions a.fbutton:hover {
	text-decoration: none;
}
.base.fullstory .dpad .qx-actions a.qx-main {
	color: #fff;
	background-color: var(--link);
	border-color: var(--link-hover);
}
.base.fullstory .dpad .qx-actions a.qx-main:hover {
	background-color: var(--link-hover);
}
.qx .qx-only {
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	color: var(--text-2);
	white-space: nowrap;
	cursor: pointer;
}
.qx .qx-only input {
	margin: 0;
}
.qx .qx-test {
	margin-bottom: 4px;
}
.qx .qx-note {
	margin: 4px 0 12px;
	padding: 10px 16px;
	color: var(--text-2);
	background-color: var(--strip);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.qx .qx-sections a {
	-webkit-box-flex: 1;
	flex: 1 1 auto;
	min-width: 0;
}
.qx .qx-sections .qx-cnt {
	flex: none;
	color: var(--muted);
	font-size: 0.9em;
	white-space: nowrap;
}
/* my last attempts: date does not break, the verdict sits under the score */
.qx table.qx-my td:first-child {
	white-space: nowrap;
}
.qx table.qx-my td.qx-res {
	white-space: nowrap;
}
.qx table.qx-my .qx-pass,
.qx table.qx-my .qx-fail {
	display: block;
	font-size: 0.9em;
}
/* progress / timer strip — sticks to the top while scrolling the test */
.qx .qx-bar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 7px 16px;
	color: var(--text-2);
	background-color: var(--strip);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.qx .qx-bar .qx-late {
	color: var(--danger);
}
/* one question = one block: question strip over its answer rows */
.qx .qx-q {
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	scroll-margin-top: 52px;
}
.qx .qx-qt {
	display: flex;
	-webkit-box-align: baseline;
	align-items: baseline;
	padding: 8px 16px;
	font-weight: bold;
	line-height: 1.45;
	color: var(--text);
	background-color: var(--strip);
	border-bottom: 1px solid var(--border);
}
.qx .qx-num {
	flex: none;
	width: 24px;
	color: var(--link);
}
.qx .qx-qtext {
	-webkit-box-flex: 1;
	flex: 1 1 auto;
	min-width: 0;
}
.qx .qx-img {
	padding: 10px 16px 0 40px;
}
.qx .qx-img img {
	display: block;
	max-width: 100%;
	height: auto;
}
.qx .qx-answers {
	padding: 4px 0;
}
.qx .qx-a {
	display: block;
	position: relative;
	margin: 0;
	padding: 6px 16px 6px 40px;
	line-height: 1.45;
	color: var(--text);
	cursor: pointer;
}
.qx label.qx-a:hover {
	background-color: var(--strip);
}
/* the 13px radio is centred on the first text line, whatever the font size */
.qx .qx-a input {
	position: absolute;
	left: 16px;
	top: calc(6px + 0.725em - 6.5px);
	width: 13px;
	height: 13px;
	margin: 0;
	font-size: inherit;
}
.qx .qx-a.qx-sel {
	background-color: var(--hover);
}
.qx div.qx-a {
	cursor: default;
}
/* checked answers (training and review); in the review the radio column carries ✓ / ✗ */
.qx .qx-a.qx-right {
	background-color: var(--ok-bg);
	color: var(--ok-dark);
}
.qx .qx-a.qx-wrong {
	background-color: var(--danger-bg);
	color: var(--danger-text);
}
.qx div.qx-a.qx-right:before,
.qx div.qx-a.qx-wrong:before {
	position: absolute;
	left: 16px;
	top: 6px;
	width: 13px;
	font-weight: bold;
	text-align: center;
}
.qx div.qx-a.qx-right:before {
	content: "\2713";
	color: var(--ok);
}
.qx div.qx-a.qx-wrong:before {
	content: "\2717";
	color: var(--danger-dark);
}
.qx .qx-mark {
	margin-left: 10px;
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.85;
	white-space: nowrap;
}
.qx .qx-q.qx-ok {
	border-color: var(--ok-line);
}
.qx .qx-q.qx-bad {
	border-color: var(--danger-line);
}
.qx .qx-skip {
	padding: 0 16px 8px 40px;
	color: var(--danger);
	font-size: 0.9em;
}
.qx .qx-expl {
	padding: 8px 16px 8px 40px;
	font-size: 0.95em;
	line-height: 1.5;
	color: var(--text-2);
	border-top: 1px solid var(--line);
}
.qx .qx-expl b {
	font: inherit;
	font-weight: bold;
	color: var(--text);
}
.qx .qx-onlybad .qx-q.qx-ok {
	display: none;
}
/* result panel */
.qx .qx-result {
	margin: 0 0 12px;
	padding: 12px 16px;
	text-align: center;
	color: var(--text-2);
	border: 1px solid var(--border);
	border-radius: 8px;
}
.qx .qx-result-pass {
	background-color: var(--ok-bg);
	border-color: var(--ok-line);
}
.qx .qx-result-fail {
	background-color: var(--danger-bg);
	border-color: var(--danger-line);
}
.qx .qx-score {
	font: bold 2em/1.2 Arial, Helvetica, sans-serif;
	color: var(--text);
}
.qx .qx-score small {
	font-size: 0.55em;
	color: var(--muted);
}
.qx .qx-pass {
	font-weight: bold;
	color: var(--ok);
}
.qx .qx-fail {
	font-weight: bold;
	color: var(--danger-dark);
}
.qx .qx-warn {
	margin-top: 6px;
	color: var(--danger-dark);
}
.qx .qx-submit {
	margin: 4px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
	text-align: center;
}
.qx .qx-submit .fbutton {
	height: 34px;
	padding: 0 20px;
}

@media (max-width: 800px) {
	/* phones and narrow windows: the site's top bar is sticky there (layout.css), so the strip sticks right under it; buttons take the 38px control height of mobile.css */
	.qx .qx-bar {
		top: 55px;
	}
	/* #toolbar: 54px row + 1px border */
	.qx .qx-q {
		scroll-margin-top: 104px;
	}
	.base.fullstory .dpad .qx-actions a.fbutton,
	.qx .qx-submit .fbutton {
		height: 38px;
	}
}

@media (max-width: 620px) {
	.qx .qx-bar {
		padding: 7px 12px;
	}
	.qx .qx-qt {
		padding: 8px 12px;
	}
	.qx .qx-img {
		padding: 10px 12px 0 36px;
	}
	.qx .qx-a {
		padding: 7px 12px 7px 36px;
	}
	.qx .qx-a input {
		left: 12px;
		top: calc(7px + 0.725em - 6.5px);
	}
	.qx div.qx-a.qx-right:before,
	.qx div.qx-a.qx-wrong:before {
		left: 12px;
		top: 7px;
	}
	.qx .qx-mark {
		display: block;
		margin: 2px 0 0;
	}
	.qx .qx-skip {
		padding: 0 12px 8px 36px;
	}
	.qx .qx-expl {
		padding: 8px 12px 8px 36px;
	}
	.qx .qx-submit {
		padding: 10px 12px;
	}
	.qx .qx-submit .fbutton {
		width: 100%;
	}
	/* two buttons side by side, equal width; the checkbox gets its own line */
	.base.fullstory .dpad .qx-actions a.fbutton {
		-webkit-box-flex: 1;
		flex: 1 1 0;
		min-width: 0;
		padding: 0 10px;
	}
	.qx .qx-only {
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* Add news */

.addnews {
	font-weight: bold;
}