@charset "UTF-8";

.input-file, .image-upload-wrap { cursor: pointer; }

/* .menu_left switches from overflow:hidden to overflow-y:scroll ONLY on
   :hover (vertical-responsive-menu.min.css) — the scrollbar's own width
   only exists while hovering, so everything inside visibly narrows the
   moment the mouse enters. Keep scrolling always on, just hide the bar. */
.menu_left, .menu_left:hover {
	overflow-y: scroll !important;
	scrollbar-width: none;
}
.menu_left::-webkit-scrollbar { display: none; width: 0; }

/* .shrt-cart-btn is opacity:0 by default and only revealed via
   .fcrse_1:hover (the course-card component) — our news card uses
   .blogbg_1/.cursus-story instead, so that hover rule never matches
   and the cart icon stayed permanently invisible. Just show it. */
.cursus-story .shrt-cart-btn { opacity: 1; }

/* shortstory.tpl's card always carries mt-30 (needed as a spacer between
   cards), but that stacks with .mhs_title's own margin-bottom:20px right
   after the "Сохранённое" heading in favorites — 50px gap instead of
   just the heading's own 20px, like the reference (whose first card has
   no top-margin class at all). */
.mhs_title + .mt-30 { margin-top: 0; }
/* Same idea generally: shortstory.tpl's card always carries mt-30 as a
   spacer from the PREVIOUS card, but when it's the very first thing in
   the listing (no heading above it anymore on the homepage), that top
   margin just pushes it away from the hero for no reason. */
.cursus-content > .blogbg_1:first-child.mt-30 { margin-top: 0; }
/* Same thing on the blog listing pages (cat/lastnews/allnews) — the first
   card there sits directly in .mt-50, not .cursus-content. */
.mt-50 > .blogbg_1:first-child.mt-30 { margin-top: 0; }

/* .eps_dots a {color:#afafaf!important; font-size:20px!important} (base
   theme, meant for the ⋮ trigger itself) also matches the real <a> that
   [add-favorites] renders for "Сохранить", since it's nested inside
   .eps_dots > .dropdown-content — same !important tug-of-war as the
   size issue below. Override with higher specificity, both properties. */
.eps_dots .dropdown-content .fav_btn a { color: #686f7a !important; font-size: 14px !important; }
.eps_dots .dropdown-content .fav_btn a:hover { color: #333 !important; }
.eps_dots .dropdown-content .fav_btn i { font-size: 115% !important; }

/* .ucp-table (from student_dashboard.css, not loaded sitewide — it has
   unscoped selectors like a bare `table{}` that break other tables, same
   reason instructor-dashboard.css stays disabled) — copied just the rules
   this "Мои покупки" table needs, not the whole file. */
.ucp-table { height: auto; overflow: hidden; border-radius: 4px; }
.ucp-table thead { font-weight: 500; font-family: 'Roboto', sans-serif; color: #333 !important; }
.ucp-table thead tr th:first-child { border-bottom-left-radius: 4px; }
.ucp-table thead tr th { color: #333; font-size: 14px; background-color: #ffecec; }
.ucp-table tbody { background: #fff; }
.ucp-table td, .ucp-table th { border-top: 1px solid #efefef !important; }
.ucp-table td { padding: 1.5rem .75rem !important; vertical-align: middle; font-size: 14px; font-family: 'Roboto', sans-serif; }
.ucp-table th:first-child { border-top: 0 !important; }
.ucp-table thead th { vertical-align: bottom; border-bottom: 0 !important; }
.night-mode .ucp-table thead tr th { background-color: #2a2020; color: #fff; }
.night-mode .ucp-table tbody { background: #242424; }
.my_courses_tabs { margin-top: 50px; }
.mp-30 { margin-top: 30px !important; }
.night-mode .ucp-table td { color: #c7c7c7; }

/* responsive.css hides the header's 2nd right-side <li> by raw position
   (nth-child(2)) to save space on mobile. For guests, [not-group=5]'s
   "Купить полный доступ" <li> is absent, so the login/account dropdown
   (from {login}) shifts into that 2nd slot and gets hidden with it —
   no login button on mobile for logged-out visitors. Keep it exempt
   regardless of position. */
.header_right ul li.profile-dropdown:nth-child(2) {
	display: inline-block !important;
}

/* Standalone header for the "blog" listing pages (cat/lastnews/allnews) —
   these pages skip the site's usual header+left-nav body entirely (own
   <body>, see main.tpl [available=cat|lastnews|allnews]), so this header
   needs its own minimal layout instead of inheriting .header.clearfix. */
.cursus-blog__header {
	/* The theme's base style.css has a bare `header { position: fixed; ... }`
	   rule (meant for the site's real .header.clearfix) that matches ANY
	   <header> tag, including this one — it was pinning this header to the
	   viewport and taking it out of flow, so everything after it rendered
	   hidden underneath it. Undo that here specifically. */
	position: static;
	z-index: auto;
	height: auto;
	display: block;
	box-shadow: none;
	background: #fff;
	border-bottom: 1px solid #eee;
	padding: 18px 0;
}
.cursus-blog__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
}
.cursus-blog__header-right {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* .opts_account's native padding: 12px 0 / float: right (style.css) is sized
   for the original sidebar header context — inside this flex row it just
   adds 24px of extra height to the logged-in state only (the logged-out
   state uses .cursus-login-btn, which has none), making the header visibly
   taller after logging in. */
.cursus-blog__header-right .opts_account { padding: 0; float: none; }

/* The theme's .title125 breadcrumb text inherits a small ~11px size —
   bump it to something readable in this context. */
.cursus-blog-page .title125 .breadcrumb,
.cursus-blog-page .title125 .blog_link {
	font-size: 14px;
}
.cursus-blog-page .titleright {
	line-height: 20px;
}

/* {speedbar} outputs plain <a> tags (not Bootstrap's .breadcrumb-item),
   so .ttl121 .breadcrumb-item a never matches it — it was falling back
   to Bootstrap's default link blue instead of the site's own palette. */
.cursus-blog-page .title125 .breadcrumb a {
	color: #686f7a;
	text-decoration: none;
}
.cursus-blog-page .title125 .breadcrumb a:hover {
	color: #ed2a26;
}
.night-mode .cursus-blog-page .title125 .breadcrumb a {
	color: #9aa7b3;
}
.night-mode .cursus-blog-page .title125 .breadcrumb a:hover {
	color: #ed2a26;
}

/* Night mode for the new "blog" pages — .cursus-blog__header is our own
   class (no theme variant to inherit), and the theme's own title129/
   breadcrumb/category-item1 text colors (#333) weren't written with a
   dark background in mind, so they'd go near-invisible on #242424. */
.night-mode .cursus-blog__header {
	background: #242424;
	border-bottom-color: #333;
}
.night-mode .title129 h2,
.night-mode .ttl121 .breadcrumb-item a,
.night-mode .cursus-blog-page .title125 .breadcrumb,
.night-mode .blog_link,
.night-mode .category-item1 {
	color: #c7c7c7;
}
.night-mode .category-item1.active {
	color: #fff;
}


/* Same content-box/border-box clash as the hero search (Semantic UI's
   .ui.input>input sets an explicit height/width without box-sizing —
   padding then adds on top instead of being included, so the field
   overflows both taller and wider than its white card). */
.explore_search .ui[class*="left icon"].input>input {
	box-sizing: border-box !important;
	width: 100% !important;
}

/* ElegantIcons — just the one lightbulb glyph used by the sidebar upsell
   card (ported from the Green template's own icon font, same source). */
@font-face {
	font-family: 'ElegantIcons';
	src: url('../assets/fonts/ElegantIcons.eot');
	src: url('../assets/fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
		url('../assets/fonts/ElegantIcons.woff') format('woff'),
		url('../assets/fonts/ElegantIcons.ttf') format('truetype'),
		url('../assets/fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}
.icon_lightbulb_alt:before {
	font-family: 'ElegantIcons';
	content: "\e007";
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Cursus for DataLife Engine — bridges the purchased "Cursus" HTML template
   with DLE's own tags/classes that don't exist in the original theme CSS. */

/* Two upsell widgets ported from the "Green" template (sidebar tariff-upgrade
   card + main-content subscription bar), recolored from Green's orange/purple
   to our red brand accent. Both hidden from group 3 (already has full access). */
.content-box-17 {
	padding: 15px;
	text-align: center;
	margin-bottom: 15px;
	transition: .3s;
}
.content-box-17-content-wrapper { letter-spacing: .3px; position: relative; z-index: 1; }
.content-box-17-content { color: #333; font-size: 14px; line-height: 1.5; margin: 0; }
.content-box-17-content p { margin: 0; }
.content-box-17-icon {
	position: relative;
	z-index: 2;
	width: 80px;
	height: 80px;
	box-shadow: 0 10px 25px 0 rgba(66, 69, 88, .18);
	border-radius: 50%;
	margin: 0 auto 15px;
	background: #fff;
	color: #ed2a26;
	font-size: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: .3s;
}
.content-box-17:hover .content-box-17-icon { transform: rotateY(360deg); }
.content-box-17-button {
	display: inline-block;
	margin-top: 14px;
	color: #ed2a26;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.content-box-17-button:hover { text-decoration: underline; }

.get14522 {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 20px 16px;
	padding-top: 53px;
	border-radius: 8px;
	border: 1px solid #ffd7d5;
	text-align: center;
	margin-top: -58px;
	background-color: #fff2f1;
}
.get14522:before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	background: url(../assets/images/sign.svg) no-repeat center;
	background-size: 500px auto;
	opacity: .16;
	pointer-events: none;
}
.night-mode .content-box-17-content { color: #c7c7c7; }
.night-mode .content-box-17-icon { background: #242424; }
.night-mode .get14522 {
	background-color: #2a2020;
	border-color: #4a2a28;
}
.night-mode .get14522:before { opacity: .22; }

/* .mb4d25's own margin-top:47px (style.css) was sized for a different page
   context — stacked with our own header offset it left a big empty gap
   above "Оформление заказа". Only used on course.tpl, safe to zero out. */
.mb4d25 { margin-top: 0; }

.card_dash1 {
	background: #fff;
	margin-top: 30px;
	width: 100%;
	border-radius: 3px;
	border: 1px solid #efefef;
	padding: 30px 20px;
	box-sizing: border-box;
	/* Native is float:left/float:right, which just pins each side to the top
	   with no vertical centering — looks lopsided when the two sides differ
	   in height (our button vs. icon+heading). flex + align-items:center
	   fixes that without changing any native color/spacing values. Wrapping
	   this in its own .row > .col-md-12 in the template (matching
	   instructor_dashboard.html) is what keeps it clear of the floated
	   article list above it — no clear: needed here. */
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1em;
}
.card_dash_left1 { display: flex; align-items: center; padding: 4px 0; }
.card_dash_right1 { flex: 0 0 auto; }
.card_dash_left1 h1 {
	font-size: 24px; color: #333; font-family: 'Roboto', sans-serif;
	font-weight: 400; margin-bottom: 0 !important; text-align: left; margin-top: 0;
}
.card_dash_left1 i { font-size: 30px; margin-right: 10px; color: #686f7a; }
.create_btn_dash {
	font-size: 14px; font-weight: 500; font-family: 'Roboto', sans-serif;
	color: #fff; background: #ed2a26; padding: 0 20px; border-radius: 3px;
	border: 0; height: 40px;
	/* native is a <button>, which centers its own text by default — ours is
	   an <a>, so it needs explicit centering to match. */
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none !important;
}
.create_btn_dash:hover { color: #fff !important; background: #333; }
/* .night-mode .card_dash1 / .card_dash_left1 i are already covered by the
   theme's own (loaded) assets/css/night-mode.css — don't duplicate here.
   Its h1 stays native color:#333 with no dark-mode override, which would be
   unreadable on the dark card background, so that one genuinely needs it. */
.night-mode .card_dash_left1 h1 { color: #fff; }

/* DLE's icon sprite (images/sprite.svg, <svg class="icon icon-X"><use...>)
   has no size of its own — every <svg class="icon"> renders at its raw
   intrinsic size (e.g. icon-votes came out 300x150px, looking like giant
   black bars) unless something constrains it. This is that constraint,
   applied once globally instead of chasing it icon by icon. */
svg.icon {
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
	vertical-align: middle;
}
a {
  text-decoration: none;
}

/* .main_logo/.main_logo25 constrain the CONTAINER to 135px, but nothing
   constrains the <img> itself — an SVG/PNG without matching intrinsic
   dimensions would render at its own native size instead. This locks any
   replacement logo file to the same on-screen size regardless of its own
   width/height, so swapping the file alone is enough. */
.main_logo img, .main_logo25 img {
	width: 100%;
	height: auto;
}

/* TinyMCE comment/news editor toolbar (.tox-*): this is TinyMCE's own vendor
   skin, not something to edit at the source — restyle it here instead.
   (.wseditor's accent bar is now red directly in engine.css.) */
.tox .tox-toolbar__primary, .tox .tox-toolbar-overlord { background: #fff !important; }
.tox .tox-tbtn:hover { background: #fff2f1 !important; }
.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: #ffecec !important; }
.tox .tox-tbtn--enabled svg { fill: #ed2a26 !important; }
.tox .tox-tbtn svg { fill: #6c838e; }
.tox .tox-tbtn:hover svg { fill: #ed2a26; }
.tox .tox-edit-area__iframe { background: #fff !important; }

/* Night mode: TinyMCE switches to its own "oxide-dark" skin (see
   engine/editor/comments.php) once <body> has .dle_theme_dark, which
   night-mode.js now sets alongside .night-mode — but oxide-dark's default
   grey doesn't match our palette, so recolor it to match the rest of the
   dark UI instead of leaving TinyMCE's stock dark colors. */
.night-mode .tox .tox-toolbar__primary, .night-mode .tox .tox-toolbar-overlord, .night-mode .tox.tox-tinymce { background: #242424 !important; border-color: #3a3a3a !important; }
.night-mode .tox .tox-tbtn svg { fill: #c7c7c7 !important; }
.night-mode .tox .tox-tbtn:hover { background: #333 !important; }
.night-mode .tox .tox-tbtn:hover svg { fill: #ed2a26 !important; }
.night-mode .tox .tox-tbtn--enabled, .night-mode .tox .tox-tbtn--enabled:hover { background: #3a2422 !important; }
.night-mode .tox .tox-tbtn--enabled svg { fill: #ed2a26 !important; }
.night-mode .tox .tox-edit-area__iframe { background: #242424 !important; }
.night-mode .tox .tox-statusbar { background: #242424 !important; border-color: #3a3a3a !important; color: #9a9a9a !important; }

/* {vote} widget (#votes.block_grey / #dle-vote / .vote / .form-check-*) —
   this is generated straight from PHP, no .tpl file to edit, so it's styled
   purely by class here. Layout/spacing borrowed from Default's own
   block_grey styling, recolored from DLE's stock blue to the theme's red. */
.block_grey {
	background: #fff;
	border: 1px solid #efefef;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 30px;
}
/* Sidebar poll: .fcrse_3 (rightside.tpl, kept for the same float/stacking
   fix as the other sidebar cards) already draws the white card — nesting
   .block_grey's own background/border/radius/margin inside it just doubled
   the card, leaving its bottom margin showing as an empty second box below
   the poll. Keep .block_grey's own padding (still needed for spacing), drop
   the parts that duplicate the outer card. */
.fcrse_3 .block_grey {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}
.fcrse_3 {
	border-radius: 3px;
}
.block_grey > .title { margin: 0 0 .8em; font-size: 1.05em; font-weight: 500; }
.vote_more { font-size: .9em; display: inline-block; margin-bottom: 1em; }
.vote_list { margin: 4% 0; }
.vote_list .vote { margin: .5em 0; }
.vote_votes, .pollallvotes { font-size: .9em; color: #9aa7b3; margin-top: .8em; }

/* Radio options styled like setting.html's payment-method cards
   (.radio-label_1) instead of Bootstrap's small native circle. DLE's actual
   markup here is <label class="form-check-label"><input>...</label> — the
   input is a CHILD of the label, not a preceding sibling — so an
   input:checked + label::before selector (sibling combinator) silently
   never matches. Styling the native input directly with appearance:none
   sidesteps that entirely: no dependency on DOM order. */
.block_grey .form-check, .cursus-searchpage .cursus-check { margin-bottom: .6em; }
.block_grey .form-check-label, .cursus-searchpage .cursus-check-label {
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 8px;
	cursor: pointer;
	transition: box-shadow .2s ease;
}
.block_grey .form-check-input, .cursus-searchpage .cursus-check-input {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	margin: 0 10px 0 0;
	border-radius: 50%;
	border: 1px solid #b4b4b4;
	background: #f7f7f7;
	cursor: pointer;
	transition: all .2s ease;
}
.block_grey .form-check-input:checked, .cursus-searchpage .cursus-check-input:checked {
	background-color: #ed2a26;
	border-color: #ed2a26;
}
.cursus-searchpage .cursus-check-input[type="radio"]:checked {
	box-shadow: inset 0 0 0 2px #f4f4f4;
}
.block_grey .form-check-input:focus, .cursus-searchpage .cursus-check-input:focus {
	outline: none;
	border-color: #ed2a26;
}
/* Results button: icon-only (its label is meant to be screen-reader-only via
   .title_hide), so pin it to a small square instead of letting it size
   itself off whatever content the engine puts inside. */
.block_grey .btn-border {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}
.block_grey .btn-border svg.icon { fill: #ed2a26 !important; }
.block_grey .btn-border:hover svg.icon { fill: #fff !important; }
/* .btn-white / .btn-border are already red at the source (engine.css). */

/* Article prev/next ("Назад"/"Далее"): the theme's own .bp_left/.bp_right
   don't set text-decoration, so the browser's default link underline (and
   our global red link fallback) leaks through instead of the intended
   dark, button-like look. */
/* "Назад"/"Далее" article nav: give it the same outline-card treatment as
   the rest of the site's secondary buttons instead of bare text+icon. */
.bp_left, .bp_right {
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: .6em;
	padding: .7em 1.1em !important;
	border: 2px solid #efefef !important;
	border-radius: .7em !important;
	transition: border-color .15s ease, background .15s ease;
}
.bp_left:hover, .bp_right:hover {
	text-decoration: none !important;
	border-color: #ed2a26 !important;
	background: #fff2f1 !important;
}
.bp_left i, .bp_right i { font-size: 20px !important; color: #ed2a26 !important; }
.prevlink, .prevlink1 { color: #333 !important; margin-bottom: 0 !important; }

/* .btn / .btn-big / .btn-border / .bbcodes / .self_delete_link are all styled
   directly at the source now (engine.css) — red, Roboto, 3px radius. */

/* DLE's own toast notifications (DLEPush) use the generic class "wrapper" for
   the notification card, which collides with the theme's own .wrapper class
   (padding: 90px 0 0 — the page's top offset under the fixed header). That's
   the actual cause of the oversized notification: the 90px top padding meant
   for the whole page was leaking onto this small card. Reset it explicitly. */
.DLEPush { right: 16px; top: 16px; left: 16px; }
.DLEPush-notification.wrapper {
	padding: 0 !important;
	max-width: 360px !important;
	min-width: 0 !important;
	width: auto !important;
	margin-left: auto;
	border-radius: 10px !important;
}
.DLEPush-notification .DLEPush-icon { width: 44px !important; font-size: 20px !important; }
.DLEPush-notification .DLEPush-icon svg, .DLEPush-notification .DLEPush-icon i, .DLEPush-notification .DLEPush-icon img {
	width: 22px !important;
	height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	font-size: 20px !important;
	line-height: 22px !important;
}
.DLEPush-notification .DLEPush-header { font-size: 14px !important; margin-left: 12px !important; }
.DLEPush-notification .DLEPush-message { font-size: 13px !important; margin: 12px !important; }
@media only screen and (min-width: 601px) {
	.DLEPush-notification.wrapper { min-width: 0 !important; }
}

/* Poll widget (poll.tpl). {list} is generated by the engine itself, so this
   styles it defensively/generically rather than depending on exact markup —
   including a hard cap on icons/images so nothing inside can render oversized. */
.cursus-poll__body { padding: 0 16px 16px; }
.cursus-poll__more { display: inline-block; font-size: 13px; margin-bottom: 10px; }
.cursus-poll__list, .cursus-poll__list ul { list-style: none; margin: 0; padding: 0; }
.cursus-poll__list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.cursus-poll__list input[type="radio"], .cursus-poll__list input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.cursus-poll__list img, .cursus-poll__list svg, .cursus-poll__list i { max-width: 24px; max-height: 24px; }
.cursus-poll__meta { font-size: 13px; margin-top: 8px; }
.cursus-poll__actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cursus-poll__actions .btn, .cursus-poll__actions .btn-border { padding: 8px 16px; font-size: 13px; }

/* .voteprogress/.pollprogress are now 8px/red directly in engine.css. This is
   the OTHER progress bar (DLE's own {pm-progress-bar} for the PM quota) —
   Default's own engine.css gives it a shadowed pill look (not Bootstrap's
   flat default), just recolored here to the brand red instead of Default's
   blue fill. */
.progress {
	overflow: hidden !important;
	margin: 10px 0 !important;
	height: 10px !important;
	min-height: 0 !important;
	max-width: 100% !important;
	padding: 0 !important;
	background: #eee !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 1px 4px rgba(0, 0, 0, .2) inset !important;
}
.progress .progress-bar {
	float: left;
	height: 8px !important;
	min-height: 0 !important;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	background: #ed2a26 !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15) !important;
	transition: width .6s ease;
}

/* Header search box: the theme's markup expects Semantic UI's icon-input
   positioning (which we don't load, to avoid its jQuery/OwlCarousel baggage),
   so the icon/submit button needs to be pinned inside the input by hand. */
.search120 .ui.input { position: relative; display: block; }
.search120 .ui.input input { width: 100%; box-sizing: border-box; }
.search120 .ui.input button.icon1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.67em;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: #6c838e;
	cursor: pointer;
}

/* Native <progress> bars (poll/vote results) render as a solid black block
   with zero CSS — style them explicitly instead of relying on the legacy
   .voteprogress/.pollprogress div+span pattern the engine may no longer emit. */
progress {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 8px;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #f2f4f7;
	margin: 6px 0;
}
progress::-webkit-progress-bar { background: #f2f4f7; border-radius: 4px; }
progress::-webkit-progress-value { background: #ed2a26; border-radius: 4px; }
progress::-moz-progress-bar { background: #ed2a26; border-radius: 4px; }

.cursus-avatar { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: #e9edf1; display: inline-block; overflow: hidden; text-indent: -9999px; flex-shrink: 0; }
/* .profile_link's spacing rule targets <img>; the account dropdown's own
   avatar is a background-image <span> (.cursus-avatar), so it needs the
   same gap added explicitly — same "admin" jammed against the photo. */
.profile_link .cursus-avatar { margin-right: 10px; }
.cursus-login-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f2f4f7; font-size: 18px; color: #333; }
.cursus-login-form { padding: 1.1em; width: 300px; }
.cursus-login-form .field { margin-bottom: .8em; }
.cursus-login-form .field label { display: block; font-size: .85em; margin-bottom: .3em; color: #6c838e; }
.cursus-login-form .field input { width: 100%; }
.cursus-login-form__soc { display: flex; gap: .6em; margin-bottom: 1em; }
.cursus-login-form__soc a { width: 34px; height: 34px; border-radius: 50%; background: #f2f4f7; display: flex; align-items: center; justify-content: center; }
.cursus-login-form__foot { display: flex; justify-content: space-between; margin-top: .8em; font-size: .85em; }

/* Category submenu badge (news count) */
.cursus_catmenu__count { float: right; color: #9aa7b3; font-weight: 400; font-size: .85em; }

/* Breadcrumb */
.breadcrumb { background: none; padding: 0; margin: 0; font-size: .9em; color: #6c838e; }
.breadcrumb a { color: #6c838e; }
.breadcrumb a:hover { color: #ed2a26; }
.title126__h { margin: 0 0 .6em; }

/* Story cards / listing */
.blogbg_1.cursus-story {
	padding: 20px;
}
.blogbg_1.cursus-story .hs_content { width: 100% !important; float: none !important; padding: 0 !important; }

/* Meta row (views/comments/category) — muted and unobtrusive, not accidental
   link-red from the global `a { color }` fallback. */
.vdtodt { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.vdtodt .vdt14, .vdtodt .vdt14 a { color: #9aa7b3 !important; }
.vdtodt .vdt14 i { margin-right: .3em; color: #c2c9d1; }

/* Favorite/edit icons now live inline in the meta row instead of a separate
   line above it. */
.vdtodt .vdt14.fav_btn, .vdtodt .vdt14.edit_btn { cursor: pointer; }
.vdtodt .vdt14.fav_btn i, .vdtodt .vdt14.edit_btn i { margin-right: 0; }
.vdtodt .vdt14.fav_btn:hover i, .vdtodt .vdt14.edit_btn:hover i { color: #ed2a26; }
.vdtodt .vdt14.fav_btn i.red { color: #ed2a26; }

/* Same fix, fullstory's own version of the meta row (.vdtodt55/.vdt24
   instead of .vdtodt/.vdt14). */
.vdtodt55 .vdt24, .vdtodt55 .vdt24 a { color: #686f7a !important; }
.vdtodt55 .vdt24 i { margin-right: .3em; }
.vdtodt55 .vdt24.fav_btn, .vdtodt55 .vdt24.edit_btn { cursor: pointer; }
.vdtodt55 .vdt24.fav_btn:hover i, .vdtodt55 .vdt24.edit_btn:hover i { color: #ed2a26; }
.vdtodt55 .vdt24.fav_btn i.red { color: #ed2a26; }

.crse14s, .crse14s:hover { text-decoration: none !important; }
.crse14s:hover { color: #ed2a26; }

.cursus-story__tools, .cursus-comment__tools { list-style: none; display: flex; gap: .8em; margin: 0 0 .6em; padding: 0; }
.cursus-story__tools li, .cursus-comment__tools li { color: #9aa7b3; cursor: pointer; }
.cursus-story__tools li:hover, .cursus-comment__tools li:hover { color: #ed2a26; }

/* [edit]/[add-favorites]/[complaint]/etc. render bare <i>/<span> (no <a>) —
   that's DLE's own convention, its JS binds click handlers to these directly.
   Just make sure they still look clickable. */
.edit_btn i, .fav_btn i, .complaint span, .complaint i { cursor: pointer; }
.cursus-story__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; flex-wrap: wrap; gap: .6em; }
.view-blog-link { text-decoration: none !important; display: inline-flex; align-items: center; gap: .4em; }
.view-blog-link i { transition: transform .15s ease; }
.view-blog-link:hover i { transform: translateX(3px); }
.cursus-story__meta { font-size: .85em; margin-top: .9em; padding-top: .9em; border-top: 1px solid #f0f2f4; color: #9aa7b3 !important; }
.cursus-story__meta, .cursus-story__meta a { color: #9aa7b3 !important; }
.cursus-story__meta i { margin-right: .4em; }
.fixed_label { color: #f4a300; margin-left: .4em; }

.cursus-rate { display: flex; align-items: center; gap: .4em; color: #6c838e; }
.cursus-rate i { color: #9aa7b3; cursor: pointer; }
.cursus-rate .ratingplus { color: #70bb39; margin-right: .2em; }
.cursus-rate .ratingminus { color: #e6493c; margin: 0 .2em; }
.cursus-rate--big { font-size: 1.05em; }

/* Fullstory */
/* ._215b15 (native: float:left; width:100%; padding:20px 0 0; background:#fff;
   margin-bottom:17px) already gives the white band look — reused as-is.
   Two things need overriding for our narrower single-column layout: the
   float (floating it takes it out of flow, so the normal-flow content
   that follows renders on top of it instead of below — same collapse
   as ._216b01 earlier) and the width (100% of this
   column isn't full viewport width like the reference's own layout gives
   it for free, so break out of the column with the standard full-bleed
   trick). */
.cursus-fullstory__head {
	float: none;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.cursus-fullstory__head::after { content: ''; display: table; clear: both; }
.blog_link { color: #333; }
.blog_link:hover { color: #ed2a26; }
.blog_link i { font-size: 120%; }
.cursus-banner { text-align: center; margin: 1.2em 0; width: 100%; }
.complaint a { color: #9aa7b3; font-size: .85em; }

/* Static pages */
.share-content img { max-width: 100%; height: auto; border-radius: .6em; }
.cursus-searchpage__group {
	margin-bottom: 20px;
}
.cursus-searchpage__group label { display: block; margin: 0 0 .4em; color: #9aa7b3; font-size: .85em; }
.cursus-searchpage__group label.mt-15 { margin-top: 15px; }
.cursus-searchpage__group .ui.search { margin-bottom: .8em; }
.cursus-searchpage select[multiple] { height: auto; min-height: 180px; }
.cursus-searchpage .form_submit { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 10px; }
/* engine.css has a generic input[name="doclear"].bbcodes/[name="doreset"].bbcodes
   rule (grey #6c838e, meant for cancel-style buttons elsewhere) that also
   matches these two by name — not the intended look here, where all three
   buttons should read the same red as .bbcodes everywhere else. */
.cursus-searchpage input[name="doclear"].bbcodes,
.cursus-searchpage input[name="doreset"].bbcodes {
	background-color: #ed2a26 !important;
}
.cursus-searchpage input[name="doclear"].bbcodes:hover,
.cursus-searchpage input[name="doreset"].bbcodes:hover {
	background-color: #c72127 !important;
}
/* Native radio/checkbox everywhere on the site — one line to recolor them
   to the brand red instead of the browser's default blue accent. */
input[type="radio"], input[type="checkbox"] { accent-color: #ed2a26; }
/* Comments — list card uses course_detail_view.html's own .review_all120/
   .review_item (native, 3px radius, own night-mode variant already in the
   theme); star ratings (rating-type-1) keep the Default template's own
   .rate_stars wrapper since DLE renders that widget itself, so it isn't
   reskinned here.
   .review_all120 is native float:left — fine in the reference's own
   layout, but here nothing clears it, so {addcomments}'s "guests can't
   comment" notice (a sibling in main.tpl's .comments wrapper) renders as
   if the float weren't there and overlaps on top of the real comments
   instead of sitting below them. Same collapse pattern as ._216b01 /
   .cursus-fullstory__head earlier — drop the float here specifically. */
.comments .review_all120 { float: none; clear: both; }
/* DLE also wraps each article comment in its own <div id="comment-id-N">,
   so .review_item:last-child fires on every row (same issue as .channel_my
   on /do=lastcomments) — force the divider back on, and only drop it on
   the actual last comment. */
.review_all120 .review_item { border-bottom: 1px solid #efefef; }
.review_all120 > div:last-child .review_item { border-bottom: 0; }
/* {author} renders as a link (onclick="ShowProfile(...)"), so it picks up
   the global a{color:#ed2a26} instead of .tutor_name1's own #333 — only a
   .night-mode override existed for this, not the base/light one. */
.tutor_name1 a { color: #333 !important; }
/* [fast]/[reply]/[complaint] all render as <a> tags too, same global
   a{color:#ed2a26} leak as {author} above. Size/color are a deliberate
   scoped exception below native's 14px/#333, on request. */
.report155, .report155 a { color: #9aa7b3 !important; font-size: 12px; }
.report155:hover, .report155 a:hover { color: #ed2a26 !important; }
.report155 i { font-size: 100%; }
/* .mass_comments_action (bulk comment moderation bar) has no reference
   equivalent — the demo theme has no such admin tool — so it's styled
   with the same field/button conventions already used everywhere else
   on the site instead of inventing a new look. */
.mass_comments_action {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	padding: 20px;
	margin-bottom: 1.5em;
}
.mass_comments_action label { color: #333; font-size: 14px; }
.mass_comments_action select {
	height: 40px;
	border-radius: 3px;
	border: 1px solid #efefef;
	padding: 0 1em;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
}
.mass_comments_action button { vertical-align: middle; }
.review_item .cursus-comment__images, .review_item .cursus-comment__sign { margin-top: .8em; }
.review_item .rpt101 { flex-wrap: wrap; align-items: center; gap: .3em 0; margin-top: 6px; }

/* {mass-action} (bulk-select checkbox, only rendered for users who can
   actually moderate) moved out of the ⋮ dropdown and pinned to the card's
   own left edge instead — no extra padding reserved for it so guests/
   regular users (who never get this checkbox at all) see no gap. */
.review_item:has(.cursus-comment-check:not(:empty)) { position: relative; padding-left: 44px !important; }
.cursus-comment-check { position: absolute; left: 16px; top: 24px; }
.cursus-comment-check:empty { display: none; }

/* Notification bell — reuses the theme's own .channel_my/.profile_link
   notification-list markup, fed by DLE's {customcomments} tag (site-wide
   latest comments). No {foto} here: many comments come from guests with
   no profile, so a plain icon badge is used instead of a possibly-empty
   <img src>. */
.pd_icon {
	width: 40px; height: 40px; margin-right: 10px; flex: 0 0 auto;
	border-radius: 50%; background: #ffecec; color: #ed2a26;
	display: flex; align-items: center; justify-content: center; font-size: 16px;
}
/* The whole row is one <a>, so the news title/timestamp inside it inherit
   an underline by default — this is a "big card link", not inline text. */
.channel_my, .channel_my:hover { text-decoration: none !important; }

/* /index.php?do=lastcomments — same notification-row look as the bell
   dropdown (instructor_notifications.html), plus the news title the
   reference design leaves out. */
.noti__text5 { font-size: 14px !important; }
/* .pd_content span { font-size: 13px } is native — written for the
   .nm_time timestamp span, but .crse_bl is also a bare span inside
   .pd_content, so it inherits that smaller size too, unlike the rest of
   the sentence around it (.noti__text5, 14px). Restore it explicitly. */
.crse_bl, .crse_bl a { font-size: 14px; font-weight: 600; color: #686f7a !important; text-decoration: none !important; }
.crse_bl a:hover { color: #ed2a26 !important; }
.all_msg_bg { background: #fff; margin-top: 30px; width: 100%; border-radius: 3px; border: 1px solid #efefef; padding: 0; float: left; }
.all__noti5 { padding: 20px !important; }
/* DLE wraps each comment in its own <div id="comment-id-N">, so every row
   is the only/last child of its own wrapper — .channel_my:last-child's
   border removal fires on all of them instead of just the true last row.
   Force the border back on within this list specifically. */
.all_msg_bg .channel_my.all__noti5 { border-bottom: 1px solid #efefef !important; }
.all_msg_bg > div:last-child .channel_my.all__noti5 { border-bottom: 0 !important; }
.all_msg_bg .pd_content h6, .all_msg_bg .pd_content h6 a { color: #333 !important; }
.setting_noti { margin-top: 40px; float: left; padding: 10px 20px; color: #fff; background: #ed2a26; border-radius: 3px; font-size: 14px; font-weight: 500; font-family: 'Roboto', sans-serif; }
.setting_noti:hover { color: #fff !important; background: #333; }

/* Comments (search results still use the older card style) */
.cursus-comment { float: none; width: auto; padding: 1.2em; margin-bottom: 1em; }
.cursus-online { color: #37b34a; font-size: .8em; }
.cursus-addcomment { float: none; width: auto; padding: 1.6em; margin-top: 1.6em; }
.cursus-addcomment__form { list-style: none; margin: 0 0 1em; padding: 0; }
.cursus-addcomment__form li { margin-bottom: .8em; }
.cursus-addcomment__form .combo { display: flex; gap: .8em; flex-wrap: wrap; }
/* engine.css's .wide sets width:100% !important, which fights flex-basis and
   splits the two fields unevenly — force flex-basis 0 so grow is the only
   thing deciding width, and both end up equal. */
.cursus-addcomment__form .combo input.wide {
	width: 0 !important;
	flex: 1 1 0 !important;
	min-width: 160px;
	height: 44px !important;
	box-sizing: border-box !important;
	line-height: normal !important;
}

/* {image-upload} — comment image attachments — is raw DLE/JS output inside
   #hidden-image-uploader, same situation as {pmlist}: no template controls
   its inner markup, so this is a best-effort container/button reskin
   (matching create_new_course.html's .upload-file-dt dashed dropzone)
   rather than a rebuild. Send the real HTML if the inner "Выберите файлы"
   button / progress row still look off after this. */
.comments-image-uploader-area > a {
	display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
	color: #ed2a26; background: #fff; border: 1px solid #ed2a26; border-radius: 3px;
	font-size: 14px; font-weight: 500; text-transform: uppercase; text-decoration: none !important;
}
.comments-image-uploader-area > a:hover { background: #ed2a26; color: #fff; }
#hidden-image-uploader {
	margin-top: 1em; padding: 30px 20px 17px; text-align: center;
	background: #fff; border: 2px dashed #efefef; border-radius: 5px;
}
#hidden-image-uploader button, #hidden-image-uploader input[type="submit"] {
	height: 40px; padding: 0 20px; border: 0; border-radius: 3px;
	background: #ed2a26; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 500;
}
#hidden-image-uploader button:hover, #hidden-image-uploader input[type="submit"]:hover { background: #333; }

/* Pagination. {pages}/[prev-link]/[next-link] all render as bare, classless
   <a href> (or <span> for the current page) directly inside this div — DLE
   generates the <a href="..."> itself, so there's no class to hook a
   .page-link-style selector onto; target plain tags instead. */
.cursus-pages { display: flex; align-items: center; justify-content: center; gap: .4em; flex-wrap: wrap; margin-top: 1.5em; }
.cursus-pages a, .cursus-pages span,
.cursus-pages a:link, .cursus-pages a:visited, .cursus-pages a:active, .cursus-pages a:focus, .cursus-pages a:focus-visible {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	height: 2.2em;
	padding: 0 .6em !important;
	margin: 0 !important;
	border-radius: .5em !important;
	border: 2px solid #ed2a26 !important;
	text-decoration: none !important;
	font-size: .95em;
	color: #ed2a26 !important;
	background: #fff !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s ease, color .15s ease;
}
.cursus-pages a:hover { background: #ed2a26 !important; color: #fff !important; }
.cursus-pages span { background: #ed2a26 !important; color: #fff !important; border-color: #ed2a26 !important; font-weight: 500; }
.cursus-pages span:empty { background: transparent !important; border-color: #efefef !important; }
.cursus-pages a i { font-size: 1.1em; line-height: 1; }

/* Right side / topnews / tags */
.cursus-topnews { list-style: none !important; margin: 0 !important; padding: 4px 20px 12px !important; }
.cursus-topnews__item { padding: .8em 0; border-bottom: 1px solid #f0f2f4; }
.cursus-topnews__item:last-child { border-bottom: 0; padding-bottom: 0; }
.cursus-topnews__item a { color: #333; text-decoration: none; }
.cursus-topnews__item a b { display: block; font-weight: 500; }
.cursus-topnews__item a span { font-size: .8em; color: #9aa7b3; }
.tag_list { padding: 16px 20px 20px !important; }
.tag_list a { display: inline-block; margin: 0 .4em .4em 0; padding: .35em .9em; border-radius: 2em; background: #f2f4f7; color: #333; text-decoration: none; font-size: .85em; }
.tag_list a:hover { background: #ed2a26; color: #fff; }

/* Account forms (registration / lost password) */
.ui-form { list-style: none; margin: 0 0 1em; padding: 0; }
.ui-form .form-group { margin-bottom: .9em; }
.ui-form .form-group label { display: block; font-size: .85em; margin-bottom: .3em; color: #6c838e; }
.ui-form .combo { display: flex; gap: .8em; flex-wrap: wrap; }
.ui-form .combo_field { flex: 1 1 200px; }
/* Registration / lost-password now reuse the theme's own sign_up.html markup
   (.sign_in_up_bg / .sign_form / .sign_footer), so no page_form_* rules are
   needed any more — just make our generic form fields sit nicely inside it. */
.sign_form { text-align: left; }
.sign_form h1, .sign_form .title126__h { text-align: center; }
.sign_form .ui-form input[type="text"], .sign_form .ui-form input[type="email"],
.sign_form .ui-form input[type="password"], .sign_form .ui-form input[type="file"] {
	width: 100%;
	height: 50px;
	border-radius: 3px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: inset 0 1px 4px rgba(0,0,0,.02);
	padding: 0 18px;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
}
.sign_form .ui-form input[type="text"]:focus, .sign_form .ui-form input[type="email"]:focus,
.sign_form .ui-form input[type="password"]:focus {
	border-color: #333;
	box-shadow: none;
}
.sign_form .form_submit .btn { width: 100%; height: 50px; border-radius: 3px; }
.main_logo25 { text-align: center; margin-bottom: 1.5em; }
.main_logo25 img { max-height: 34px; }

/* Login-name check: put the input and "Проверить имя" button on one row
   instead of the button wrapping onto its own line below a 100%-wide input. */
.login_check { display: flex; align-items: stretch; gap: 10px; }
.login_check input.wide { width: auto; flex: 1 1 auto; }
.login_check .btn { flex: 0 0 auto; white-space: nowrap; }

/* Captcha: keep the code image and its input on one row regardless of
   whether {reg_code}/{code}/{sec_code} wraps the image in <a> or plain <img>. */
.c-captcha { display: flex; align-items: center; gap: 10px; float: none; }
.c-captcha:after { display: none; }
.c-captcha > a, .c-captcha > img { float: none; flex: 0 0 auto; margin-right: 0; }
.c-captcha > input { float: none; flex: 1 1 auto; width: auto; }

.cursus-copyright { margin: 0; font-size: .85em; color: #9aa7b3; }

/* User profile page — built from instructor_profile_view.html's dark header
   band (avatar + name + stat counters). ._216b01's own background (#333)
   read as a jarring near-black slab against the rest of the light theme,
   and the earlier rounded-corner "card" treatment made it look boxed-in
   instead of a flat full-width band like Green's own profile header —
   flatten it and switch it to the site's own light palette instead. */
.cursus-profile-head {
	/* ._216b01 (the theme's own dark-band class) is float:left, meant for a
	   full-width page section. Nested inside our .col-xl-9 content column,
	   the float pulled it out of normal flow and let the sidebar column
	   overlap it instead of clearing it — that was the ghosting behind the
	   sidebar. Force it back to a normal block here. Keep the theme's own
	   dark background/white text (#333) — matches the Green reference —
	   just drop the rounded "card" corners so it reads as a flat full-width
	   band instead of a boxed-in card. */
	float: none;
	width: 100%;
}
.cursus-profile-head .dp_dt150 { flex-wrap: wrap; }
.cursus-profile-head ._ttl120 { flex-wrap: wrap; }
.cursus-profile-head ._ttl120 li { flex: 1 1 auto; }
/* {pm} (engine/modules/profile.php) outputs a bare <a>, wrapped here in
   .msg125's own button look — the global a{color:#ed2a26} rule still wins
   on the <a> itself since inheriting white from the button doesn't beat an
   explicit rule matching the element directly. */
.msg125 a { color: #fff !important; }
.cursus-profile-tabs { padding-top: 0; }
/* .cursus-static (which used to carry #user1/#user2) also sets float:left;
   width:100% — those aren't just visual, they're load-bearing for this
   float-based page layout. Removing the class to drop the white-card look
   lost that too, collapsing the pane into whatever leftover space the
   sidebar float left. Keep the layout, drop the card visuals. */
.cursus-profile-tab { float: left; width: 100%; }

.usinf { list-style: none; margin: 0 0 1.5em; padding: 0; max-width: 600px; }
.usinf li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .7em 0;
	border-bottom: 1px solid #f0f2f4;
	gap: 1em;
}
.usinf li:last-child { border-bottom: 0; }
.usinf .ui-c1 { color: #9aa7b3; flex: 0 0 auto; }
.usinf .ui-c2 { color: #333; font-weight: 500; text-align: right; }
.usinf .ui-c2 a { color: #ed2a26; }

.cursus-online { color: #37b34a; }

.heading { font-size: 16px; font-weight: 500; margin: 0 0 .6em; color: #333; }

/* Profile edit form (id="user2") — grouped into setting.html's .basic_profile
   sections under setting.html's own Account/Notification/Privacy pill tabs.
   Each pill tab's first section doesn't need the 32px top gap meant to
   clear the pill bar above it. */
.cursus-settings .tab-pane > .basic_profile:first-child { margin-top: 0; }
.st_title { display: flex; align-items: center; gap: .5em; }
.st_title i { font-size: .9em; }
.cursus-settings__hint { font-size: 14px; color: #686f7a; margin: 1em 0 0; }
.basic_form .soc_links { display: flex; gap: .6em; flex-wrap: wrap; }

/* Every checkbox that DLE renders as {hidemail}/{news-subscribe}/etc. (plus
   our own hand-written "delete avatar" one) all land inside a wrapping
   <div class="checkbox">. Restyling the native input directly as a sliding
   toggle works regardless of DLE's own markup around the <label> text next
   to it — matching setting.html's "Show your profile on search engines"
   toggle look without needing Semantic UI's own (unloaded) toggle CSS. */
.checkbox input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 42px; height: 24px; flex: 0 0 auto;
	border-radius: 999px; background: #dedfe0; border: 0; outline: none;
	position: relative; cursor: pointer; vertical-align: middle; margin-right: .6em;
	transition: background .2s ease;
}
.checkbox input[type="checkbox"]::before {
	content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
	background: #fff; border-radius: 50%; transition: transform .2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.checkbox input[type="checkbox"]:checked { background: #ed2a26; }
.checkbox input[type="checkbox"]:checked::before { transform: translateX(18px); }
.checkbox input[type="checkbox"]:focus-visible { outline: 2px solid #ed2a26; outline-offset: 2px; }
/* input[type=checkbox] here also carries DLE's "form-check-input" class,
   which happens to be a real Bootstrap component class — bootstrap.css
   gives it a blue box-shadow glow on :focus (not just :focus-visible),
   which fires on every click, not just keyboard focus. Kill that. */
.checkbox input[type="checkbox"]:focus { box-shadow: none; }
.checkbox { display: flex; align-items: center; margin-bottom: .8em; }
.checkbox:last-child { margin-bottom: 0; }
.nstting_content .checkbox { margin-bottom: 1em; }

/* jQuery UI dialog chrome (colors/shape) is now styled directly in engine.css.
   Only genuinely new bits stay here: the content font/table, and .dlevotebutton
   (the popup's own submit button — not part of .btn/.bbcodes at all). */
.ui-dialog-titlebar-close { opacity: .85; }
.ui-dialog-titlebar-close:hover { opacity: 1; }
.ui-dialog-content { font-family: 'Roboto', sans-serif; }
.ui-dialog-content table { width: 100% !important; border-collapse: collapse; }
.ui-dialog-content table td { padding: .4em 0; }
.dlevotebutton {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: #ed2a26;
	border: 0;
	border-radius: 3px;
	padding: 9px 20px;
	cursor: pointer;
	margin-top: .6em;
}
.dlevotebutton:hover { background: #c72127; }

/* Dialog buttonsets (e.g. the complaint popup): these render as bare
   <button> with none of jQuery UI's own widget classes/padding applied, so
   give them the full .btn treatment directly rather than just a color. */
.ui-dialog-buttonset { padding: 1em 1.2em !important; text-align: right; }
.ui-dialog-buttonset button {
	font-family: 'Roboto', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	border: 0 !important;
	border-radius: 3px !important;
	padding: 9px 20px !important;
	margin-left: 10px !important;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
}
.ui-dialog-buttonset button:last-child, .ui-dialog-buttonset button.ui-button:last-child {
	background-color: #ed2a26 !important;
	border-color: #ed2a26 !important;
	color: #fff !important;
}
.ui-dialog-buttonset button:last-child:hover { background-color: #c72127 !important; }
.ui-dialog-buttonset button:first-child, .ui-dialog-buttonset button.ui-button:first-child {
	background-color: #6c838e !important;
	border-color: #6c838e !important;
	color: #fff !important;
	margin-left: 0 !important;
}
.ui-dialog-buttonset button:first-child:hover { background-color: #55636c !important; }

/* Any link that isn't already styled by a more specific theme/engine rule
   should default to the brand color instead of browser-default blue. */
a { color: #ed2a26; }
a:hover { color: #333; }

/* Personal messages — chat bubbles ported from the purchased theme's own
   instructor-dashboard.css (instructor_messages.html), which isn't loaded
   on the public site. {pmlist}'s row markup comes straight from DLE's core
   (no template controls it), so that part is a best-effort reskin of
   whatever table it renders rather than a 1:1 match to the reference. */
.cursus-pm-nav { display: flex; gap: .6em; }
.cursus-pm-nav a {
	display: inline-flex; align-items: center; height: 2.4em; padding: 0 1.2em;
	border: 2px solid #ed2a26; border-radius: 2em; color: #ed2a26 !important;
	text-decoration: none !important; font-size: .92em; font-weight: 500;
}
.cursus-pm-nav a:hover { background: #ed2a26; color: #fff !important; }
.pm_status { background: #f8f9fb; border-radius: 10px; padding: 25px; margin: 1em 0; }
.pm_status span { font-size: .9em; color: #686f7a; }

.pmlist { float: none; width: auto; }
.pmlist table { width: 100%; border-collapse: collapse; }
.pmlist th, .pmlist td { text-align: left; padding: 16px 20px; vertical-align: top; }
.pmlist th { border-bottom: 1px solid #efefef; font-size: 13px; color: #9aa7b3; font-weight: 500; }
.pmlist tr + tr { border-top: 1px solid #f0f2f4; }
.pmlist tr:hover td { background: #fbfbfb; }
.pmlist td:last-child { text-align: right; white-space: nowrap; }
.pmlist a { color: #ed2a26; text-decoration: none; font-weight: 500; }
.pmlist a:hover { text-decoration: underline; }
.pmlist input[type="checkbox"] { width: 16px; height: 16px; accent-color: #ed2a26; }
/* The mass-action controls (mark read/delete selected) below the table are
   DLE's own raw output — a generic reset since we don't control their markup. */
.pmlist { padding-bottom: 16px; }
.pmlist select {
	height: 40px; padding: 0 1em; border: 1px solid #efefef; border-radius: 3px;
	font-family: 'Roboto', sans-serif; font-size: 14px; color: #333; background: #fff;
}
.pmlist input[type="submit"], .pmlist button {
	height: 40px; padding: 0 20px; border: 0; border-radius: 3px;
	background: #ed2a26 !important; color: #fff !important; font-family: 'Roboto', sans-serif;
	font-weight: 500; font-size: 14px; margin-left: .6em;
}
.pmlist input[type="submit"]:hover, .pmlist button:hover { background: #333 !important; }

.addpm { float: none; width: auto; padding: 1.6em; margin-top: 1em; }

/* Reply thread */
.cursus-pm-thread { float: none; width: auto; margin-top: 1.5em; }
.chat_header { padding: 16px 20px; border-bottom: 1px solid #efefef; }
.chat_header .user-status-title { font-size: 16px; font-weight: 500; color: #333; margin: 0; }
.chat_header .user-status-text { font-size: 13px; color: #9aa7b3; margin: .3em 0 0; }

.messages-line { max-height: 480px; overflow-y: auto; }
/* DLE's {text} tag wraps its own output in a <div><p>...</p></div> — a
   simple, consistently-aligned message list (not left/right chat bubbles,
   since {user-dialog} needed for that turned out to be an auto-linked tag
   too unreliable to embed in a data attribute). */
.cursus-pm-message { padding: 16px 20px; border-bottom: 1px solid #f0f2f4; }
.cursus-pm-message:last-child { border-bottom: 0; }
.cursus-pm-message__head { display: flex; align-items: center; gap: .6em; margin-bottom: .4em; font-size: 14px; }
.cursus-pm-message__head b { color: #333; }
.cursus-pm-message__body { font-size: 14px; line-height: 1.6; color: #333; }
.cursus-pm-message__body p { margin: 0 0 .6em; }
.cursus-pm-message__body p:last-child { margin-bottom: 0; }
.cursus-pm-tools { margin: .5em 0 0; }
.cursus-pm-sign { display: block; margin-top: .4em; font-size: .85em; opacity: .8; }

.message-send-area { padding: 16px 20px; border-top: 1px solid #efefef; }
.mf-field { display: flex; align-items: flex-end; gap: .6em; }
.mf-field > *:first-child { flex: 1 1 auto; min-width: 0; }
.mf-field .add_msg {
	flex: 0 0 auto; height: 40px; width: 40px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; background: #ed2a26; color: #fff; font-size: 16px;
}
.mf-field .add_msg:hover { background: #333; }

/* Course module — paywall CTA on full articles, and a small "subscription
   required" badge on news-list cards for the same [not-pay] state. */
.cursus-paywall {
	display: flex; align-items: center; justify-content: center; gap: 1em;
	text-align: left; background: #fff2f1; border: 1px solid #ffd7d5; border-radius: 10px;
	padding: 1em 1.3em; margin-top: 1.5em;
}
.cursus-paywall i { font-size: 1.6em; color: #ed2a26; flex: 0 0 auto; }
.cursus-paywall p { color: #333; font-size: 14px; margin: 0; flex: 1 1 auto; }
.cursus-paywall .btn { flex: 0 0 auto; padding: .6em 1.2em !important; height: auto !important; font-size: 13px !important; }
@media (max-width: 575px) {
	.cursus-paywall { flex-direction: column; text-align: center; }
}
.night-mode .cursus-paywall { background: #2a2020; border-color: #4a2a28; }
.night-mode .cursus-paywall p { color: #c7c7c7; }
.cursus-settings__warning {
	background: #fff2f1; border: 1px solid #ffd7d5; border-radius: 10px;
	padding: 1em 1.3em; margin: 1em 0 1.5em; color: #333; line-height: 1.5;
}
.night-mode .cursus-settings__warning { background: #2a2020; border-color: #4a2a28; color: #c7c7c7; }
.alert-danger { margin-left: 30px; }
.vdtodt .vdt14.cursus-locked:last-child, .vdt14.cursus-locked { color: #ed2a26 !important; }
.vdt14.cursus-locked i { color: #ed2a26; }
.cursus-my-subs { margin-bottom: 1.5em; }

/* "Образцы документов" (category 11) gallery card — no native component
   in the reference matches "image thumbnail + download button" exactly,
   so this reuses established site conventions instead of inventing new
   ones: 3px radius / #efefef border like .blogbg_1, and the site's own
   .btn (red, 3px, native) for the button. Float-based grid (not Bootstrap
   .row/.col-*) so it doesn't depend on a flex .row ancestor that the
   shared category-listing branch in main.tpl doesn't provide. */
.cursus-doc-card-col {
	float: left; width: 25%; padding: 0 15px; margin-bottom: 30px;
	box-sizing: border-box;
}
.cursus-doc-card {
	background: #fff; border: 1px solid #efefef; border-radius: 3px;
	overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
.cursus-doc-card__img { display: block; }
.cursus-doc-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.cursus-doc-card__icon {
	display: flex; align-items: center; justify-content: center;
	height: 110px; font-size: 56px; color: #ed2a26; background: #fff2f1;
}
.cursus-doc-card__icon.fa-file-word { color: #2b579a; background: #eaf1fa; }
.cursus-doc-card__icon.fa-file-excel { color: #217346; background: #e9f5ef; }
.night-mode .cursus-doc-card__icon.fa-file-word { background: #1e2a38; }
.night-mode .cursus-doc-card__icon.fa-file-excel { background: #1c2b23; }
.cursus-doc-card__body { padding: 14px; flex: 1 1 auto; display: flex; flex-direction: column; gap: .7em; }
.cursus-doc-card__title {
	color: #333 !important; font-size: 14px; font-weight: 500;
	text-decoration: none !important; line-height: 1.4; flex: 1 1 auto;
}
.cursus-doc-card__title:hover { color: #ed2a26 !important; }
.cursus-doc-card__btn { text-align: center; }
.night-mode .cursus-doc-card { background: #242424; border-color: #3a3a3a; }
.night-mode .cursus-doc-card__title { color: #c7c7c7 !important; }
.night-mode .cursus-doc-card__icon { background: #2a2020; }
@media (max-width: 991px) { .cursus-doc-card-col { width: 33.3333%; } }
@media (max-width: 767px) { .cursus-doc-card-col { width: 50%; } }
@media (max-width: 575px) { .cursus-doc-card-col { width: 100%; } }

/* Same "has an attached file" treatment as .cursus-doc-card, but compact/
   inline for shortstory.tpl's list-row context (homepage, search results,
   lastnews, etc.) instead of the grid card layout. */
.cursus-story__doc { display: flex; align-items: center; gap: .8em; margin: .8em 0; }
.cursus-story__doc-icon {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 3px; font-size: 20px;
	color: #ed2a26; background: #fff2f1;
}
.cursus-story__doc-icon.fa-file-word { color: #2b579a; background: #eaf1fa; }
.cursus-story__doc-icon.fa-file-excel { color: #217346; background: #e9f5ef; }
.night-mode .cursus-story__doc-icon { background: #2a2020; }
.night-mode .cursus-story__doc-icon.fa-file-word { background: #1e2a38; }
.night-mode .cursus-story__doc-icon.fa-file-excel { background: #1c2b23; }

/* Narrower "Просмотреть онлайн" popup (fancybox, data-highslide="file") —
   only the file-preview iframe slide, not other fancybox uses on the site. */
.fancybox__slide.has-iframe { max-width: 900px; margin: 0 auto; }
/* the cat/lastnews/allnews content column doesn't clear its own floats —
   harmless for the normal width:100% article cards, but needed so the
   "Образцы документов" (category 11) doc cards (33% float, shablony_card.tpl)
   don't collapse the column's height under {navigation}. */
.col-lg-9.col-md-7 .mt-50::after { content: ''; display: table; clear: both; }

/* Night mode — .com_list/.pmlist/.addpm/.cursus-pm-thread/.cursus-comment/
   .cursus-addcomment share their light AND dark card styling with .fcrse_3
   directly (assets/css/style.css + night-mode.css), instead of a parallel
   copy of the same colors here. .block_grey and .pm_status have no
   equivalent card anywhere in the theme (this LMS template has no
   poll/PM-quota widget), so they still need their own dark variant. */
.night-mode .block_grey,
.night-mode .pm_status {
	background: #333 !important;
	border-color: #242424 !important;
	color: #c7c7c7;
}
.night-mode .title126__h, .night-mode .heading,
.night-mode .st_title, .night-mode .basic_ptitle h4,
.night-mode .tutor_name1 a, .night-mode .tutor_name1,
.night-mode .user-status-title, .night-mode .chat_header .user-status-title {
	color: #fff !important;
}
.night-mode .usinf li, .night-mode .cursus-pm-message,
.night-mode .review_item, .night-mode .pmlist tr + tr,
.night-mode .divider-1, .night-mode .basic_form .ui.form.swdh30 textarea {
	border-color: #242424 !important;
}
.night-mode .usinf .ui-c2, .night-mode .ui-c2 { color: #fff !important; }
.night-mode .pmlist th { background: transparent; color: #9aa7b3; border-color: #242424 !important; }
.night-mode .pmlist tr:hover td { background: #3a3a3a !important; }
.night-mode .basic_ptitle p, .night-mode .cursus-settings__hint,
.night-mode .rvds10, .night-mode .time_145, .night-mode .noti__text5 {
	color: #9aa7b3 !important;
}
.night-mode .block_grey .form-check-input, .night-mode .cursus-searchpage .cursus-check-input { background: #333 !important; border-color: #4a4a4a !important; }
.night-mode .cursus-searchpage__group { border-color: #3a3a3a; }

/* Form fields inside our own cards (comment form, PM new message, profile
   settings) — engine.css already recolors the generic input focus border,
   this just gives the fields themselves a dark fill to match the card. */
.night-mode .wide, .night-mode .ui-form input[type="text"], .night-mode .ui-form input[type="email"],
.night-mode .ui-form input[type="password"], .night-mode .ui-form textarea,
.night-mode .ui-form select, .night-mode .combo_field input,
.night-mode .c-captcha input {
	background: #242424 !important;
	border-color: #3a3a3a !important;
	color: #fff !important;
}

/* Same base fields as above, but for the ones nothing else scopes — DLE's
   own raw controls like the {mass-action} bulk-action <select> on
   /do=lastcomments never sit inside .ui-form/.wide, so they still fell
   back to engine.css's plain white base style in the dark theme. */
.night-mode select, .night-mode textarea, .night-mode input[type="text"],
.night-mode input[type="password"], .night-mode input[type="email"],
.night-mode input[type="search"], .night-mode input[type="number"],
.night-mode input[type="url"], .night-mode input[type="tel"] {
	background: #242424;
	border-color: #3a3a3a;
	color: #fff;
}
.night-mode select option { background: #242424; color: #fff; }
/* Homepage hero banner ([available=main] in main.tpl). */
.cursus-hero {
	display: flex;
	align-items: stretch;
	gap: 2em;
	padding: 2.4em 0;
}
.cursus-hero__main { flex: 1 1 60%; min-width: 0; }
.cursus-hero__eyebrow {
	display: block;
	color: #ed2a26;
	font-weight: 700;
	font-size: .8em;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: .8em;
}
.cursus-hero__title {
	font-size: 2.4em;
	font-weight: 700;
	color: #222;
	line-height: 1.15;
	margin: 0 0 .5em;
}
.cursus-hero__lead {
	color: #686f7a;
	font-size: 1.05em;
	line-height: 1.6;
	margin: 0 0 1.4em;
}
.cursus-hero__actions { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1.6em; }
.cursus-hero__search { display: flex; align-items: stretch; gap: .6em; max-width: 34em; margin-bottom: 1.8em; }
.cursus-hero__search input { flex: 1 1 auto; min-width: 0; width: auto !important; height: 40px !important; box-sizing: border-box !important; }
.cursus-hero__search .btn { flex: 0 0 auto; height: 40px !important; padding: 0 20px !important; box-sizing: border-box !important; }
.cursus-hero__quote {
	position: relative;
	margin: 0;
	padding-left: 2.6em;
}
.cursus-hero__quote-mark {
	position: absolute;
	left: 0;
	top: -.3em;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.6em;
	line-height: 1;
	color: #f6d9d8;
	font-style: normal;
	user-select: none;
}
.cursus-hero__quote p {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	color: #686f7a;
	font-size: .8em;
	line-height: 1.5;
	margin: 0 0 .6em;
}
.cursus-hero__quote cite { display: block; text-align: right; color: #9aa7b3; font-family: 'Roboto', sans-serif; font-style: normal; font-size: .7em; }

.night-mode .cursus-hero__title { color: #fff; }
.night-mode .cursus-hero__lead { color: #9aa7b3; }
.night-mode .cursus-hero__quote p { color: #c7c7c7; }
.night-mode .cursus-hero__quote-mark { color: #4a2a28; }

.get1452 .Get_btn {
	line-height: 40px;
}

.cursus-feedback-recipient {
	display: none;
}

.user_img i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-left: 17px;
	margin-right: 15px;
	background: #ffecec;
	color: #ed2a26;
	border-radius: 100%;
	font-size: 14px;
	vertical-align: middle;
}

@media (max-width: 991px) {
	.cursus-hero { flex-direction: column; padding: 1.6em; }
	.cursus-hero__title { font-size: 1.8em; }
}