/* DLE 20.0 compatibility layer for the C400 Bootstrap 3 theme.
   Covers the official template changes from DLE 15.3 through 20.0. */

/* DLE 16.0: image modifiers and links to comment author profiles. */
.image-bordered { border: 1px solid #ddd; }
.image-shadows { box-shadow: 0 4px 8px -2px rgba(9, 30, 66, .25), 0 0 0 1px rgba(9, 30, 66, .08); }
.image-padded { padding: .5rem; }
.comments-user-profile {
	color: #337ab7;
	font-weight: 700;
	cursor: pointer;
}

/* DLE 16.1: SVG spoiler marker and separate fast-search result template. */
.title_spoiler svg {
	width: 16px;
	height: 16px;
	margin: -4px 7px 0 0;
	vertical-align: middle;
}
.c400-fast-search-result {
	display: block;
	padding: 9px 11px;
	color: #434a54;
	text-decoration: none;
}
.c400-fast-search-result:hover,
.c400-fast-search-result:focus {
	background: #f4f6f8;
	color: #337ab7;
	text-decoration: none;
}
.c400-fast-search-result .searchheading {
	display: block;
	margin-bottom: 3px;
	font-weight: 600;
}

/* DLE 17.0: editor accordions and account deletion. */
.mce-accordion summary { cursor: pointer; }
.c400-profile-save-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.self_delete_link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #b74747;
	border-radius: 4px;
	background: #b74747;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
	color: #fff;
	text-decoration: none !important;
	cursor: pointer;
}
.self_delete_link:hover,
.self_delete_link:focus {
	border-color: #9f3d3d;
	background: #9f3d3d;
	color: #fff;
}

/* DLE 17.1: push notifications and guest comment name field. */
.DLEPush {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2001;
}
@keyframes DLEPush-show {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
.DLEPush-notification.wrapper {
	position: relative;
	display: grid;
	grid-template-columns: 45px minmax(0, 1fr);
	align-items: center;
	width: 100%;
	max-width: 400px;
	margin-bottom: 10px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
	color: #333;
	animation: DLEPush-show .35s ease-out;
}
.DLEPush-notification .DLEPush-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 100%;
	border-radius: 6px 0 0 6px;
	color: #fff;
}
.DLEPush-notification .DLEPush-icon svg { width: 24px; height: 24px; }
.DLEPush-notification .DLEPush-header {
	grid-column: 2;
	grid-row: 1;
	margin: 9px 34px 0 14px;
	font-size: 14px;
	font-weight: 600;
}
.DLEPush-notification .DLEPush-header:empty { margin-top: 0; }
.DLEPush-notification .DLEPush-message {
	grid-column: 2;
	grid-row: 2;
	margin: 8px 34px 12px 14px;
	font-size: 13px;
}
.DLEPush-notification .DLEPush-message ul,
.DLEPush-notification .DLEPush-message li { margin: 0; padding-left: 0; list-style: none; }
.DLEPush-notification .DLEPush-close {
	position: absolute;
	top: 7px;
	right: 9px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}
.DLEPush-notification .DLEPush-close:hover,
.DLEPush-notification .DLEPush-close:focus { opacity: 1; }
.DLEPush-notification.wrapper.push-success { background: #e8f4f2; }
.DLEPush-notification.wrapper.push-success .DLEPush-icon { background: #278578; }
.DLEPush-notification.wrapper.push-warning { background: #fff4e5; }
.DLEPush-notification.wrapper.push-warning .DLEPush-icon { background: #e39123; }
.DLEPush-notification.wrapper.push-error { background: #fbecea; }
.DLEPush-notification.wrapper.push-error .DLEPush-icon { background: #c85445; }
input[type="text"].comments_author_field { width: 100%; }

/* DLE 17.3: modern dialog delete button and generated radio/checkbox fields. */
.ui-dialog-buttonset button.ui-button-delete {
	border-color: #b74747;
	background: #b74747;
	color: #fff;
}
.ui-dialog-buttonset button.ui-button-delete:hover,
.ui-dialog-buttonset button.ui-button-delete:focus {
	border-color: #9f3d3d;
	background: #9f3d3d;
	color: #fff;
}
.form-check-label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}
.form-check-input {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	border: 1px solid #337ab7;
	background: transparent center / contain no-repeat;
	appearance: none;
}
.form-check-input[type="checkbox"] { border-radius: 3px; }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked[type="checkbox"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23337ab7' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m5 10 3 3 7-7'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23337ab7'/%3e%3c/svg%3e");
}

/* DLE 18.0: dialog-based private messages and their generated table. */
.pm th {
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
}
.pm th.pm_checkbox { text-align: center; }
.pm_list.pm_subj,
.pm_list.pm_icon,
.pm_list.pm_last_user { cursor: pointer; }
.pm_list.pm_icon svg { width: 20px; height: 20px; vertical-align: middle; }
.pm_list.pm_icon.pm-unread-image { color: #337ab7; }
.pm_list.pm_icon.pm-reply-image { color: #278578; }
.pm_list.pm_icon.pm-read-image { color: #9aa1a8; }
.pm td.pm_list.pm_icon,
.userstop td,
th.pm_head.pm_icon { border-bottom: 0; }
.pm_list .pm_last_message,
.pm_list .pm_last_date,
.pm_list .pm_with_user { color: #73808c; font-size: 12px; }
.pm tbody > tr:hover { background: #f4f6f8; }
.pm_navigation { margin-top: 14px; }
.pm_navigation .navigation {
	display: inline-block;
	padding: 6px;
	border-radius: 4px;
	background: #f5f6f7;
	color: #434a54;
}
.pm_navigation .navigation a,
.pm_navigation .navigation span { display: inline-block; min-width: 34px; padding: 7px; text-align: center; }
.pm_navigation .navigation span { background: #337ab7; color: #fff; }
.pm_navigation .navigation a { color: #434a54; text-decoration: none; }
.pm_navigation .navigation a:hover { background: #e2e6ea; }
.c400-pm-dialog-heading h2 { margin: 0; }
.c400-pm-dialog-heading p { margin: 5px 0 0; }
.c400-pm-messages { background: #f5f6f7; }
.c400-pm-message:last-child { margin-bottom: 0; }
.c400-pm-submit,
.c400-pm-message-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.c400-pm-submit { margin-top: 14px; }
.c400-pm-reply .wseditor,
.c400-pm-reply .dlepm-editor { margin-bottom: 12px; }

/* DLE 18.1 and 19.0: quote and clipboard actions generated by the engine. */
.quote_link { float: right; }
.quote_link svg,
.clipboard-copy-link svg { margin-top: -3px; color: #73808c; vertical-align: middle; }

/* DLE 19.1: Yandex captcha, formulas and hidden text. */
.smart-captcha { display: inline-block; max-width: 100%; }
.mathml-container { font-family: math, serif; }
div.mathml-block {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 5px;
	font-size: 1.1em;
	overflow-x: auto;
}
div.mathml-block .katex { font-size: 1.1em; }
span.mathml-inline { display: inline-block; margin: 0 2px; vertical-align: middle; }
.dleshowhidden {
	padding: 12px;
	border: 1px solid #8fb4d3;
	background: #edf3f8;
	box-shadow: 0 5px 12px rgba(72, 98, 125, .15);
	color: #315f86;
}

/* DLE 20.0: corrected spoiler, calendar and quick-edit editor layout. */
.text_spoiler { display: none; }
.monthselect-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3em;
}
.monthselect-title { display: inline-block; }
.dlepopupnewsedit .wseditor { border-top: 0; }
.dlepopupnewsedit .tox .tox-toolbar-overlord { background: #f7f7f7; }

/* DLE 19+ no longer emits table rows for additional fields. */
.c400-xfields { width: 100%; min-width: 0; }
.c400-xfields::after,
.c400-xfields .xfieldsrow::after { display: table; clear: both; content: ""; }
.c400-xfields .xfieldsrow { padding-top: 10px; }
.c400-xfields .xfieldscolleft { width: 30%; padding: 6px 12px 0 0; }
.c400-xfields .xfieldscolright { width: 70%; }
.c400-xfields input[type="text"],
.c400-xfields input[type="email"],
.c400-xfields input[type="number"],
.c400-xfields input[type="url"],
.c400-xfields select,
.c400-xfields textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #555;
}
.c400-xfields input[type="text"],
.c400-xfields input[type="email"],
.c400-xfields input[type="number"],
.c400-xfields input[type="url"],
.c400-xfields select { min-height: 34px; }
.c400-userinfo .timezoneselect,
.c400-userinfo .twofactorselect {
	display: block;
	width: 100% !important;
	height: 34px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #555;
}
.c400-xfields .xfieldsnote { color: #777; font-size: 12px; }
.c400-editor-field .wseditor { max-width: 100%; }
.c400-poll-closed { margin-top: 10px; }

@media (max-width: 767px) {
	.DLEPush { top: 10px; right: 10px; left: 10px; }
	.DLEPush-notification.wrapper { max-width: none; }
	.c400-xfields .xfieldscolleft,
	.c400-xfields .xfieldscolright { float: none; width: 100%; }
	.c400-xfields .xfieldscolleft { padding: 0 0 5px; }
	.monthselect-inner { gap: 1em; }
}