@charset "UTF-8";
/* pages.css — styles for hand-written static pages of the Default template.
   Loaded after styles.css / engine.css / mobile.css, so it may override them.
   Cache-busted with ?v= in main.tpl — bump it whenever this file changes.

   Council page (/rada-klubu.html): laid out like the sidebar blocks of this
   template — a title strip over a bordered list of rows. */

.qrz-rada { text-align: left; }            /* .fullstory justifies text */

/* --- section: Council / Audit Commission / QTC --- */
.qrz-rada h2 {
	margin: 26px 0 14px;
	padding-bottom: 6px;
	font-size: 1.25em;
	color: #3f4b51;
	border-bottom: 1px solid #e5e5e5;
}
.qrz-rada h2.qr-first { margin-top: 4px; }

/* --- role: title strip of the block below (like .block .btl) --- */
.qrz-rada h3 {
	margin: 14px 0 0;
	padding: 7px 16px;
	font-size: 1.05em;
	font-weight: bold;
	color: #516168;
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}

/* --- the block itself --- */
.qr-grid {
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.qrz-rada h3 + .qr-grid {        /* sits right under its title strip */
	border-radius: 0 0 8px 8px;
}

/* --- one person = one row --- */
.qr-card {
	padding: 7px 16px;
	border-top: 1px solid #dbe8ed;
	overflow: hidden;
}
.qr-grid .qr-card:first-child { border-top: 0; }
.qr-card:hover { background-color: #f0f5f8; }

.qr-call {
	float: left;
	width: 76px;
	font-weight: bold;
}
.qr-name { margin-left: 76px; }
.qr-place,
.qr-note {
	margin-left: 76px;
	color: #6c838e;
	font-size: 0.9em;
}
.qr-contacts { margin-left: 76px; }
.qr-contacts a { margin-right: 14px; font-size: 0.9em; white-space: nowrap; }

/* vacant position */
.qr-card.qr-empty {
	padding: 10px 16px;
	color: #6c838e;
}
.qr-card.qr-empty:hover { background: none; }

/* --- wide screens: callsign | name | town | contacts on one line --- */
@media screen and (min-width: 620px) {
	.qr-card {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: baseline;
		-ms-flex-align: baseline;
		align-items: baseline;
	}
	.qr-call { float: none; -ms-flex: 0 0 76px; flex: 0 0 76px; width: auto; }
	.qr-name {
		-ms-flex: 1 1 140px;
		flex: 1 1 140px;
		min-width: 0;
		margin-left: 0;
	}
	.qr-place,
	.qr-contacts {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin-left: 0;
		padding-left: 12px;
	}
	.qr-place { -ms-flex: 0 0 210px; flex: 0 0 210px; }
	.qr-contacts {
		-ms-flex: 0 0 264px;
		flex: 0 0 264px;
		text-align: right;
	}
	.qr-contacts a { margin: 0 0 0 10px; }
	.qr-note {                       /* always on a line of its own */
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		margin: 2px 0 0 76px;
	}
	.qr-card.qr-empty { display: block; }
}

/* --- print: plain, no fills --- */
@media print {
	.qr-card { page-break-inside: avoid; }
	.qr-card:hover { background: none; }
	.qrz-rada h3 { background: none; }
}


/* ============================================================
   Site furniture (added 2026-11-01)

   DataLife Engine ships its own look for forms, buttons, tables
   and notices (grey slabs, sprite buttons, #96c purple accents).
   None of it matches this template, whose own language is the
   sidebar block: a #f0f5f8 title strip over a white body inside
   a 1px #cbdfe8 border, 8px corners, #f0f5f8 on hover.

   Everything below restates that language for the pages DLE
   draws itself. No cards, badges, icons, shadows or hover lifts
   are introduced -- only the template's own fills and borders.

   Palette: border #cbdfe8 | divider #dbe8ed | fill #f0f5f8
            slate #3f4b51 | muted #516168 | grey #6c838e
            blue #398dd8 | blue dark #2b7cc4
   ============================================================ */

/* --- form panels: feedback, lost password, add comment,
       profile editing, personal messages, add news --- */
.baseform {
	margin-bottom: 15px;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.baseform .tableform td {
	padding: 10px 16px;
	border-top: 1px solid #dbe8ed;
}
.baseform .tableform tr:first-child td { border-top: 0; }
.tableform td.label {
	width: 27%;
	color: #3f4b51;
}

/* submit strip closes the panel, like a block footer */
.fieldsubmit {
	padding: 10px 16px;
	background-color: #f0f5f8;
	border-top: 1px solid #cbdfe8;
	border-radius: 0 0 8px 8px;
}
.impot { color: #c0504d; }               /* required marker, was #96c */

/* --- fields --- */
.f_input,
.f_textarea,
.textin,
.tableform select,
.users_search select,
.fieldtr select,
.mass_comments_action select,
.xfields input, .xprofile input,
.xfields select, .xprofile select,
.xfields textarea, .xprofile textarea,
.users_search .loginform,
.editor input[type="text"],
.editor textarea,
#searchinput,
#searchuser {
	padding: 5px 7px;
	color: #3f4b51;
	background: #fff none;
	border: 1px solid #cbdfe8;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.f_input:focus,
.f_textarea:focus,
.textin:focus,
.users_search .loginform:focus,
.editor input[type="text"]:focus,
#searchinput:focus,
#searchuser:focus { border-color: #398dd8; }

/* --- buttons: quiet by default, like a sidebar menu item --- */
.fbutton,
.btn_reglog,
.bbcodes,
.bbcodes_poll,
.usersbmt,
.users_search input[type="submit"] {
	width: auto;
	height: auto;
	padding: 6px 16px;
	font: bold 1em/1.2 Arial, Helvetica, sans-serif;
	color: #3f4b51;
	text-shadow: none;
	background: #f0f5f8 none;
	border: 1px solid #cbdfe8;
	border-radius: 6px;
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
.fbutton:hover,
.btn_reglog:hover,
.bbcodes:hover,
.bbcodes_poll:hover,
.usersbmt:hover,
.users_search input[type="submit"]:hover { background-color: #e3eef4; }

button.fbutton span { display: inline; padding: 0; }
.users_search input[type="submit"] { width: 132px; }

/* the one action that closes a form reads as the primary one */
.fieldsubmit .fbutton,
#logform .fbutton {
	color: #fff;
	background-color: #398dd8;
	border-color: #2b7cc4;
}
.fieldsubmit .fbutton:hover,
#logform .fbutton:hover { background-color: #2b7cc4; }

/* --- notice bar shown to guests under an article (was solid #96c) --- */
.berrors {
	padding: 10px 16px;
	color: #3f4b51;
	background: #f0f5f8 none;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.berrors a { color: #398dd8; }

/* --- remaining purple accents of the stock skin --- */
.heading { color: #3f4b51; }
#votes .btl h4 { color: #3f4b51; }
.vtitle {
	padding: 8px 12px;
	color: #3f4b51;
	background: #f0f5f8 none;
	border: 1px solid #cbdfe8;
	border-radius: 6px;
}
.headlinks ul a:hover { background-color: #398dd8; }
.loginbox .lvsep .radial { background-color: #398dd8; }
.weekday { color: #6c838e; }
th.workday, th.weekday { background-color: #f0f5f8; }
#loading-layer { background: #398dd8; }

/* --- filled note panels: statistics summary, poll --- */
.infoblock {
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}

/* --- search page: a block with a proper title strip --- */
.base.infoblock {
	padding: 0 16px 14px;
	background-color: #fff;
}
.base.infoblock > h3.btl {
	margin: 0 -16px;
	padding: 8px 16px;
	font-size: 1.15em;
	color: #516168;
	background-color: #f0f5f8;
	border-bottom: 1px solid #cbdfe8;
	border-radius: 8px 8px 0 0;
}
.base.infoblock .searchtable { padding: 16px 0 0; }

/* advanced-search box */
fieldset {
	padding: 12px 16px;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
fieldset legend,
.searchtable fieldset legend {
	padding: 0 6px;
	font-weight: bold;
	color: #3f4b51;
}

/* one hit in the short result list */
.searchitem {
	margin-bottom: 6px;
	padding: 10px 16px;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.searchitem:hover { background-color: #f8fbfc; }

/* --- tables: active users on the statistics page, PM folders --- */
.userstop td,
.pm td.pm_list,
.pm td.pm_head {
	padding: 6px 10px;
	background-color: #fff;
	border: 1px solid #dbe8ed;
}
.userstop thead td,
.pm td.pm_head {
	height: auto;
	padding: 7px 10px;
	font-size: 0.9em;
	font-weight: bold;
	color: #516168;
	text-align: center;
	background: #f0f5f8 none;
	border-color: #cbdfe8;
}
.userstop tbody tr:hover td { background-color: #f8fbfc; }

/* --- members list (?do=users) --- */
.users_search.pheading {
	padding: 12px 16px;
	background-image: none;
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-bottom: 1px solid #cbdfe8;
	border-radius: 8px;
}
.user_set {
	overflow: hidden;
	margin-bottom: 8px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.user_set:hover { background-color: #f8fbfc; }

.user_set .user_avatar img { border-color: #cbdfe8; }
.user_set .user_options ul li {
	margin: 4px 0;
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-radius: 4px;
}
.user_set .user_options ul li:hover { background-color: #e3eef4; }
.user_set .user_options ul li a {
	padding: 4px 8px;
	color: #516168;
}

/* --- profile card --- */
.userinfo .lcol .avatar { border-color: #cbdfe8; }

/* --- quotes, spoilers, code and hidden text inside articles --- */
.quote,
.title_quote,
.title_spoiler,
.text_spoiler,
.scriptcode {
	background-color: #f9fbfc;
	border-color: #cbdfe8;
}
.title_quote,
.title_spoiler { color: #516168; }
.hide {
	padding: 8px 12px;
	color: #3f4b51;
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-radius: 6px;
}
.inhide {
	border-color: #cbdfe8;
	border-radius: 4px;
}

/* --- jQuery UI dialogs (profile popup, confirmations) --- */
.ui-widget-content { border-color: #cbdfe8; }
.ui-widget-header {
	color: #3f4b51;
	font-weight: bold;
	background: #f0f5f8 none;
	border-bottom: 1px solid #cbdfe8;
}
.ui-widget-header a { color: #398dd8; }
.ui-state-default,
.ui-widget-content .ui-state-default {
	color: #3f4b51;
	background: #f0f5f8 none;
	border: 1px solid #cbdfe8;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
	color: #3f4b51;
	background: #e3eef4 none;
	border: 1px solid #cbdfe8;
}

/* --- narrow screens: stack the two-column form tables --- */
@media screen and (max-width: 620px) {
	.tableform,
	.tableform tbody,
	.tableform tr,
	.tableform td { display: block; width: auto; }

	.baseform .tableform td { padding: 4px 16px; border-top: 0; }
	.baseform .tableform tr { padding: 8px 0; border-top: 1px solid #dbe8ed; }
	.baseform .tableform tr:first-child { border-top: 0; }
	.tableform td.label { width: auto; }

	.f_input,
	.f_textarea,
	.textin,
	.users_search .loginform { width: 100%; max-width: 100%; }
	.users_search input[type="submit"] { float: none; width: auto; }

	/* statistics: three summary columns become three stacked lists */
	.statistics ul.lcol {
		float: none;
		width: auto;
		min-height: 0;
		margin: 0 0 12px;
		padding-top: 0;
		background: none;
	}

	/* the active-users table scrolls on its own instead of
	   pushing the whole page sideways */
	.userstop {
		display: block;
		overflow-x: auto;
		font-size: 0.9em;
	}

	/* members list: avatar, details and actions under each other */
	.user_set .user_information { float: none; margin-right: 0; }
	.user_set .user_options { float: none; }
	.user_set .user_options ul { width: auto; }
}

/* ==========================================================================
   Site content in the template author's own style
   Derived from the author's sidebar menu block in styles.css:
     .block        border 1px #cbdfe8 - radius 8px
     .block .btl   padding 8px 16px - bg #f0f5f8 - border-bottom #cbdfe8
     .bluemenu     padding 12px 16px - li padding 4px - li:hover #f0f5f8
   Applied to the content area so pages read as the same object as the menu,
   instead of DLE's own defaults.
   ========================================================================== */

/* --- the content area becomes a block, like the menu --- */
.base.fullstory {
	background: #fff none;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
	text-align: left;
}
.base.fullstory > .dpad {
	padding: 12px 16px;
	background: none;
}
.base.fullstory > .dpad > br[clear] { display: none; }

/* --- page title is the block's title strip --- */
.base.fullstory > .dpad > h1.btl {
	margin: -12px -16px 14px;
	padding: 8px 16px;
	font: bold 1.3em/1.3 Arial, Helvetica, sans-serif;
	color: #516168;
	background-color: #f0f5f8;
	border-bottom: 1px solid #cbdfe8;
	border-radius: 8px 8px 0 0;
}

/* --- section headings repeat the strip, full width of the block --- */
.base.fullstory .dpad h2,
.base.fullstory .dpad h3 {
	margin: 20px -16px 12px;
	padding: 8px 16px;
	font: bold 1.15em/1.3 Arial, Helvetica, sans-serif;
	color: #516168;
	background-color: #f0f5f8;
	border-top: 1px solid #cbdfe8;
	border-bottom: 1px solid #cbdfe8;
}
.base.fullstory .dpad h3 { font-size: 1.05em; }
.base.fullstory .dpad > h2:first-child,
.base.fullstory .dpad > h3:first-child { margin-top: 0; }
.base.fullstory .dpad h2 + h2 { margin-top: 0; border-top: 0; }
/* a heading straight after the page title would double the strip */
.base.fullstory .dpad > h1.btl + h2,
.base.fullstory .dpad > h1.btl + h3 { margin-top: -14px; border-top: 0; }

/* --- body copy --- */
.base.fullstory .dpad p {
	margin: 0 0 10px;
	line-height: 1.55;
	color: #3f4b51;
}
.base.fullstory .dpad a { color: #398dd8; text-decoration: none; }
.base.fullstory .dpad a:hover { text-decoration: underline; }
.base.fullstory .dpad strong { color: #3f4b51; }
.base.fullstory .dpad img { max-width: 100%; height: auto; border-radius: 6px; }

/* --- lists take the menu's own rhythm: 4px rows, #f0f5f8 on hover --- */
.base.fullstory .dpad ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.base.fullstory .dpad ul li {
	position: relative;
	padding: 4px 4px 4px 16px;
}
.base.fullstory .dpad ul li:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 4px;
	height: 4px;
	background-color: #398dd8;
	border-radius: 2px;
}
.base.fullstory .dpad ol {
	margin: 0 0 12px;
	padding-left: 24px;
}
.base.fullstory .dpad ol li { padding: 4px; }
.base.fullstory .dpad ul li:hover,
.base.fullstory .dpad ol li:hover { background-color: #f0f5f8; }

/* --- data tables: bordered rows under a #f0f5f8 strip, as the blocks are --- */
.base.fullstory .dpad table.dtable,
.base.fullstory .dpad table.deftable {
	width: 100%;
	margin: 0 0 14px;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
	border-collapse: collapse;
	overflow: hidden;
}
.base.fullstory .dpad table.dtable td,
.base.fullstory .dpad table.dtable th,
.base.fullstory .dpad table.deftable td {
	padding: 6px 10px;
	line-height: 1.4;
	vertical-align: top;
	border: 1px solid #dbe8ed;
}
.base.fullstory .dpad table.dtable p,
.base.fullstory .dpad table.deftable p { margin: 0 0 4px; }
.base.fullstory .dpad table.dtable tbody tr:hover td { background-color: #f0f5f8; }

/* first row of a real data table is its heading strip */
.base.fullstory .dpad table.dtable[data-hdr] tbody tr:first-child td {
	font-weight: bold;
	color: #516168;
	text-align: center;
	background-color: #f0f5f8;
	border-color: #cbdfe8;
}
.base.fullstory .dpad table.dtable[data-hdr] tbody tr:first-child:hover td { background-color: #f0f5f8; }

/* contacts is a label/value list, so the label column carries the strip */
.base.fullstory .dpad table.deftable td:first-child {
	width: 26%;
	font-weight: bold;
	color: #516168;
	background-color: #f0f5f8;
}

/* --- mobile --- */
@media screen and (max-width: 620px) {
	.base.fullstory > .dpad { padding: 10px 12px; }
	.base.fullstory > .dpad > h1.btl { margin: -10px -12px 12px; padding: 8px 12px; font-size: 1.15em; }
	.base.fullstory .dpad h2,
	.base.fullstory .dpad h3 { margin: 16px -12px 10px; padding: 7px 12px; font-size: 1.05em; }
	.base.fullstory .dpad table.dtable,
	.base.fullstory .dpad table.deftable { display: block; overflow-x: auto; font-size: 0.9em; }
	.base.fullstory .dpad table.deftable td:first-child { width: auto; }
}

/* --- Підвал анонсу та статті (.mlink) --------------------------------------
   Стокові спрайти DLE/CENTROARTS (глянцева синя кнопка зі стрілкою, пігулки
   лічильників, велика стрілка справа, градієнтна заливка) замінені на пласкі
   елементи в палітрі шаблону. Тільки CSS — розмітка .tpl не чіпалась. */

.mlink {
	height: auto;
	padding: 7px 16px;
	background: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-width: 1px 0;
}
.mlink .mlarrow { display: none; }

.mlink .argcat {
	float: left;
	margin: 3px 0 0;
	padding: 0;
	background: none;
	color: #6c838e;
}
.mlink .argcat a { color: #516168; }
.mlink .argcat a:hover { color: #398dd8; }

/* лічильники — звичайний текст із підписом замість спрайтових пігулок */
.argviews span, .argcoms span,
.argviews span b, .argcoms span b { height: auto; background: none; }
.argviews span, .argcoms span {
	float: right;
	margin: 3px 0 0 14px;
	line-height: 24px;
	color: #6c838e;
}
.argviews span b, .argcoms span b {
	float: none;
	padding: 0;
	font-weight: bold;
	color: #516168;
}
.argviews span b:before { content: "Переглядів: "; font-weight: normal; color: #6c838e; }
.argcoms  span b:before { content: "Коментарів: "; font-weight: normal; color: #6c838e; }
.argcoms a { color: inherit; }
.argcoms a:hover b, .argcoms a:hover b:before { color: #398dd8; }

/* «Детальніше» / «Повернутись» — пласкі кнопки */
.argmore a, .argmore a b,
.argback a, .argback a b { height: auto; background: none; }
.argmore a, .argback a {
	float: right;
	margin: 0 0 0 14px;
	padding: 0;
	line-height: 24px;
	border-radius: 4px;
}
.argmore a b, .argback a b {
	float: none;
	display: block;
	padding: 0 14px;
	font-weight: normal;
}
.argmore a { background-color: #398dd8; border: 1px solid #2b7cc4; color: #fff; }
.argmore a:hover { background-color: #2b7cc4; }
.argback a { background-color: #fff; border: 1px solid #cbdfe8; color: #516168; }
.argback a:hover { background-color: #e7eff4; color: #398dd8; }

@media screen and (max-width: 620px) {
	.mlink { padding: 8px 12px; }
	.mlink .argcat { float: none; margin: 0 0 6px; }
	.argmore a, .argback a,
	.argviews span, .argcoms span { float: left; margin: 0 10px 0 0; }
}


/* --- Тренажер для іспиту на позивний (/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. */

.qx .qx-meta { color: #6c838e; }
.qx .qx-actions { margin: 6px 0 14px; }
.qx .qx-actions .fbutton { display: inline-block; margin: 0 6px 6px 0; text-decoration: none; }
.base.fullstory .dpad .qx-actions a.fbutton { color: #3f4b51; }
.qx .qx-actions .fbutton:hover { text-decoration: none; }
.base.fullstory .dpad .qx-actions a.qx-main { color: #fff; background-color: #398dd8; border-color: #2b7cc4; }
.qx .qx-actions .qx-main:hover { background-color: #2b7cc4; }
.qx .qx-only { margin-left: 6px; color: #516168; white-space: nowrap; }

.qx .qx-test { margin-bottom: 4px; }
.qx .qx-note {
	margin: 4px 0 12px;
	padding: 10px 16px;
	color: #516168;
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}

/* section list: count on the right, muted */
.qx .qx-sections .qx-cnt { float: right; color: #6c838e; font-size: 0.9em; }

/* progress / timer strip — sticks to the top while scrolling the test */
.qx .qx-bar {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 5;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	margin: 0 0 12px;
	padding: 7px 16px;
	color: #516168;
	background-color: #f0f5f8;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.qx .qx-bar .qx-late { color: #c0504d; }

/* one question = one block: question strip over its answer rows */
.qx .qx-q {
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
	overflow: hidden;
}
.qx .qx-qt {
	padding: 8px 16px;
	font-weight: bold;
	line-height: 1.45;
	color: #3f4b51;
	background-color: #f0f5f8;
	border-bottom: 1px solid #cbdfe8;
}
.qx .qx-num { color: #398dd8; }
.qx .qx-img { padding: 10px 16px 0; text-align: center; }
.qx .qx-img img { 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: #3f4b51;
	cursor: pointer;
}
.qx label.qx-a:hover { background-color: #f0f5f8; }
.qx .qx-a input { position: absolute; left: 16px; top: 8px; margin: 0; }
.qx .qx-a.qx-sel { background-color: #e3eef4; }
.qx div.qx-a { cursor: default; padding-left: 16px; }

/* checked answers (training and review) */
.qx .qx-a.qx-right { background-color: #e6f2e2; color: #2f5d27; }
.qx .qx-a.qx-wrong { background-color: #f8e4e3; color: #8a2f2c; }
.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: #b7d6ac; }
.qx .qx-q.qx-bad { border-color: #e2b5b3; }
.qx .qx-skip { padding: 0 16px 8px; color: #c0504d; font-size: 0.9em; }
.qx .qx-expl {
	padding: 8px 16px;
	font-size: 0.95em;
	line-height: 1.5;
	color: #516168;
	border-top: 1px solid #dbe8ed;
}
.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: #516168;
	border: 1px solid #cbdfe8;
	border-radius: 8px;
}
.qx .qx-result-pass { background-color: #eef6ea; border-color: #b7d6ac; }
.qx .qx-result-fail { background-color: #fbefee; border-color: #e2b5b3; }
.qx .qx-score { font: bold 2em/1.2 Arial, Helvetica, sans-serif; color: #3f4b51; }
.qx .qx-score small { font-size: 0.55em; color: #6c838e; }
.qx .qx-pass { font-weight: bold; color: #3a7a2e; }
.qx .qx-fail { font-weight: bold; color: #b0413e; }
.qx .qx-warn { margin-top: 6px; color: #b0413e; }

.qx .qx-submit { margin: 4px 0 0; border: 1px solid #cbdfe8; border-radius: 8px; text-align: center; }

@media screen and (max-width: 620px) {
	.qx .qx-qt { padding: 8px 12px; }
	.qx .qx-a { padding: 7px 12px 7px 36px; }
	.qx .qx-a input { left: 12px; top: 9px; }
	.qx div.qx-a { padding-left: 12px; }
	.qx .qx-mark { display: block; margin: 2px 0 0; }
}
@media print {
	.qx .qx-bar { position: static; }
	.qx .qx-actions, .qx .qx-submit { display: none; }
}