/* e-Statistika - redesign, drugi krug (ceo sajt)

   Učitava se kao POSLEDNJI stil na svim stranama, posle skina: i u admin delu (posle styles/user-page.css,
   dashboard, paginator, essdialog i CSS scenarija) i u javnom delu (koji user-page.css ne učitava).
   Zato pravila ovde dobijaju izjednačen sukob sa bilo kojim ranijim fajlom; specifičnost se navodi samo
   kad se gazi staro !important.
   Boje samo var(--...). Promenljive skina bez fallback-a; --es-* (pilot) i nove promenljive ovog kruga
   imaju fallback = vrednost iz podrazumevanog skina, a svih 16 skinova ih definiše.
   Prelomi kao u pilotu: telefon <= 575, tablet 576-991 (i 1024 do 1199 gde meni sužava sadržaj),
   desktop >= 1200; levi meni se sakriva na <= 768. */


/* =====================================================================
   0.0 KARTICE IZVESTAJA I REZULTAT TESTA (premesteno iz user-page.css odeljak 3, nekonzistentnosti posle grupe F)
   Iste deklaracije za admin deo (.content-wrapper) i za rezultat probnog testa na javnoj strani, koja user-page.css
   ne ucitava. Blok je na pocetku fajla, pa sva ostala pravila redesign.css i dalje dolaze posle njega, kao kad je bio
   u user-page.css; specificnost admin selektora je ista kao ranije.
   ===================================================================== */

/* 3.1 Raspored kutija. .test-result-wide { margin: 0 -15px } (0,1,0) izbacuje sadržaj iz poravnanja sa naslovom */
.content-wrapper .test-result.test-result-wide,
body:not(:has(.content-wrapper)) .test-result.test-result-wide
{
	margin-left: 0;
	margin-right: 0;
}

.content-wrapper .report-info-boxes,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes
{
	--bs-gutter-x: 16px;
	row-gap: 16px;
	margin-bottom: 24px !important;
}

.content-wrapper .report-info-boxes > [class*="col"],
body:not(:has(.content-wrapper)) .test-result .report-info-boxes > [class*="col"]
{
	display: flex;
}

/* 3.2 Info-kutija.
   .report-info-boxes .info-box (0,2,0) !important; #searchResults .info-box (1,1,0) !important ->
   (0,3,0) i (1,2,0) !important; #frmSearchVisits .info-box (1,1,0) !important (kartice poseta) -> (1,2,0) */
.content-wrapper .report-info-boxes .info-box,
#searchResults .report-info-boxes .info-box,
#frmSearchVisits .report-info-boxes .info-box,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box,
body .ess-dialog .test-modal-result .info-box
{
	display: block;
	width: 100% !important;
	max-width: none;
	height: auto !important;
	min-height: 0;
	margin: 0 !important;
	padding: 16px;
	border: 1px solid var(--es-border);
	border-radius: 12px;
	outline: 0;
	background: var(--es-surface);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04) !important;
	color: var(--es-ink);
}

/* ikonica levo, tekst desno */
.content-wrapper .report-info-boxes .info-box > .row,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box > .row,
body .ess-dialog .test-modal-result .info-box > .row
{
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	column-gap: 12px;
	margin: 0;
}

.content-wrapper .report-info-boxes .info-box > .row > [class*="col"],
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box > .row > [class*="col"],
body .ess-dialog .test-modal-result .info-box > .row > [class*="col"]
{
	width: auto;
	max-width: none;
	padding: 0;
}

/* .info-box-icon.info-box-icon-primary (0,2,0) gradijent, .small-box:hover .icon (0,3,0) font-size -> (0,4,0);
   #frmSearchVisits .info-box-icon.info-box-icon-primary (1,2,0) -> (1,3,0) */
.content-wrapper .report-info-boxes .info-box .info-box-icon,
.content-wrapper .report-info-boxes .small-box > .icon,
#frmSearchVisits .report-info-boxes .info-box .info-box-icon,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-icon,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .icon,
body .ess-dialog .test-modal-result .info-box .info-box-icon
{
	display: flex;
	float: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
	font-size: 18px;
	line-height: 1;
	color: var(--button-color);
}

.content-wrapper .report-info-boxes .info-box .info-box-content,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-content,
body .ess-dialog .test-modal-result .info-box .info-box-content
{
	padding: 0;
}

.content-wrapper .report-info-boxes .info-box .info-box-text,
.content-wrapper .report-info-boxes .small-box .info-box-text,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-text,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box .info-box-text,
body .ess-dialog .test-modal-result .info-box .info-box-text
{
	display: block;
	margin: 0;
	overflow: visible;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	text-align: left;
	text-transform: none;
	white-space: normal;
	color: var(--es-ink-muted);
}

.content-wrapper .report-info-boxes .info-box .info-box-number,
.content-wrapper .report-info-boxes .small-box .info-box-number,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-number,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box .info-box-number,
body .ess-dialog .test-modal-result .info-box .info-box-number
{
	display: block;
	margin: 4px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
	text-align: left;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink);
}

.content-wrapper .report-info-boxes .borderElem,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .borderElem,
body .ess-dialog .test-modal-result .borderElem
{
	display: none;
}

/* 3.3 Kutija sa procentom (progress-info-box): naglašena glavnom bojom */
.content-wrapper .report-info-boxes .info-box.progress-info-box,
#searchResults .report-info-boxes .info-box.progress-info-box,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box.progress-info-box,
body .ess-dialog .test-modal-result .info-box.progress-info-box
{
	border-color: color-mix(in srgb, var(--button-color) 35%, var(--es-border));
}

.content-wrapper .report-info-boxes .info-box.progress-info-box .info-box-icon,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box.progress-info-box .info-box-icon,
body .ess-dialog .test-modal-result .info-box.progress-info-box .info-box-icon
{
	background: var(--button-color);
	color: var(--white);
}

.content-wrapper .report-info-boxes .info-box.progress-info-box .info-box-number,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box.progress-info-box .info-box-number,
body .ess-dialog .test-modal-result .info-box.progress-info-box .info-box-number
{
	color: var(--button-color);
}

/* .info-box .progress { margin: 5px -10px; height: 2px; background: rgba(0,0,0,.2) } (0,2,0) -> (0,4,0) */
.content-wrapper .report-info-boxes .info-box .progress,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .progress,
body .ess-dialog .test-modal-result .info-box .progress
{
	height: 6px;
	margin: 10px 0 0;
	border-radius: 999px;
	background: var(--es-brand-soft);
	overflow: hidden;
}

.content-wrapper .report-info-boxes .info-box .progress .progress-bar,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .progress .progress-bar,
body .ess-dialog .test-modal-result .info-box .progress .progress-bar
{
	border-radius: 999px;
	background: var(--button-color);
}

.content-wrapper .report-info-boxes .info-box .progress-description:empty,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .progress-description:empty,
body .ess-dialog .test-modal-result .info-box .progress-description:empty
{
	display: none;
}

/* 3.3a Kartica uspešnosti u prozoru kraja testa (display.result.modal.htmlt): prozor je u <body>, van .content-wrapper i
   .report-info-boxes, pa dobija ista pravila kartice preko varijante body .ess-dialog .test-modal-result u 3.2/3.3.
   Bez nje ostaje AdminLTE .info-box-icon { float: left } (dashboard.css) - ikonica u uglu, ugao kartice nezaobljen.
   U prozoru je kartica centrirana: ikonica iznad teksta, tekst i traka na sredini. */
body .ess-dialog .test-modal-result .info-box > .row
{
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	row-gap: 12px;
}

body .ess-dialog .test-modal-result .info-box > .row > [class*="col"]:last-child
{
	justify-self: stretch;
}

body .ess-dialog .test-modal-result .info-box .info-box-text,
body .ess-dialog .test-modal-result .info-box .info-box-number
{
	text-align: center;
}

/* 3.4 Tabela pitanja (header-row + redovi-linkovi).
   .header-row { color: white!important; background-color: var(--row-header)!important } (0,1,0),
   .bg-primary/.text-white (0,1,0) !important -> (0,4,0) !important */
.content-wrapper .test-result .header-row.bg-primary.text-white,
body:not(:has(.content-wrapper)) .test-result .header-row.bg-primary.text-white
{
	margin: 0;
	padding: 10px 4px;
	border: 1px solid var(--es-border);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background-color: var(--row-header) !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .02em;
	color: var(--es-ink-muted) !important;
}

.content-wrapper .test-result-question-rows,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows
{
	border: 1px solid var(--es-border);
	border-radius: 0 0 12px 12px;
	background-color: var(--es-surface);
	overflow: hidden;
}

.content-wrapper .test-result-question-rows > .row,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row
{
	margin: 0;
	padding: 12px 4px;
	border-bottom: 1px solid var(--es-border);
	font-size: 14px;
	line-height: 20px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--es-ink);
	transition: background-color .15s ease;
}

.content-wrapper .test-result-question-rows > .test-result-link-row,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-link-row
{
	position: relative;
}

.content-wrapper .test-result-question-rows > .test-result-link-row:hover,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-link-row:hover
{
	background-color: var(--es-surface-alt);
}

/* Bootstrap kolone imaju position: relative, pa bi stretched-link pokrio samo svoju celiju */
.content-wrapper .test-result-question-rows > .test-result-link-row > div:first-child,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-link-row > div:first-child
{
	position: static;
}

/* ceo red vodi na detalj pitanja (stretched-link), a Oblast je iznad tog sloja i vodi na tekst */
.content-wrapper .test-result-question-rows .test-result-topic,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows .test-result-topic
{
	position: relative;
	z-index: 2;
	color: var(--button-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* od 1200 px (samo korisnicka strana rezultata; javna strana probnog testa zadrzava stari col-sm-* raspored - 3. krug,
   "vrati stari izgled"): zaglavlje, redovi i zbir kao ista mreza od 10 kolona umesto col-sm-1/2 (uz meni 52 px
   sadrzaja - bedz "Netacno odgovoreno" je prelazio u kolonu Pokusaji). Kratke kolone imaju najmanju sirinu
   po najduzoj reci ("Teoretsko", "Otvoreno", bedz statusa 100 px, "Komentari") - fiksno, ne max-content: zaglavlje i
   redovi su posebne mreze i moraju dobiti iste kolone; ostatak dele tekst pitanja i oblast. Desni razmak 16 px */
@media (min-width: 1200px)
{

	.content-wrapper .test-result .header-row.bg-primary.text-white,
	.content-wrapper .test-result-question-rows > .row
	{
			display: grid;
			grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(72px, .9fr) minmax(76px, .9fr) minmax(48px, .5fr) minmax(100px, 1.2fr) minmax(60px, .6fr) minmax(60px, .6fr) minmax(48px, .5fr) minmax(76px, .8fr);
			column-gap: 12px;
			padding-right: 16px;
			padding-left: 16px;
	}

	.content-wrapper .test-result .header-row.bg-primary.text-white > div,
	.content-wrapper .test-result-question-rows > .row > div
	{
			width: auto;
			max-width: none;
			min-width: 0;
			padding: 0;
	}

	.content-wrapper .test-result-question-rows .test-result-status
	{
			max-width: 100%;
			white-space: normal;
	}

}

/* (0,7,2) pobedjuje pravilo linkova u listama .content-wrapper div:has(> .row.header-row) .row a:not(.btn):not(.dropdown-item) (0,6,2) */
.content-wrapper div:has(> .row.header-row) .row a.test-result-topic:not(.btn):not(.dropdown-item),
.content-wrapper div:has(> .row.header-row) .row a.stretched-link:not(.btn):not(.dropdown-item)
{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.content-wrapper .test-result-question-rows > .test-result-link-row:has(.stretched-link:focus-visible),
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-link-row:has(.stretched-link:focus-visible)
{
	outline: 2px solid var(--button-color);
	outline-offset: -2px;
}

.content-wrapper .test-result-question-rows > .test-result-link-row > div:first-child a,
.content-wrapper .test-result-question-rows > .test-result-link-row > div:first-child p,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-link-row > div:first-child a,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-link-row > div:first-child p
{
	margin: 0;
	font-weight: 600;
	color: var(--button-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.content-wrapper .test-result-question-rows > .row > div:nth-child(2),
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row > div:nth-child(2)
{
	color: var(--es-ink-muted);
}

.content-wrapper .test-result-question-rows .fa-comment,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows .fa-comment
{
	color: var(--es-ink-muted);
}

/* zbirni red */
.content-wrapper .test-result-question-rows > .test-result-total,
body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-total
{
	border-bottom: 0;
	background-color: var(--es-surface-alt);
	font-weight: 700;
}

/* status odgovora - HTML izmena 1: span.test-result-status.is-<ResolvedStatus> u ćeliji "Rešeno" */
.content-wrapper .test-result-status,
body:not(:has(.content-wrapper)) .test-result .test-result-status
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}

.content-wrapper .test-result-status.is-correct,
body:not(:has(.content-wrapper)) .test-result .test-result-status.is-correct
{
	background-color: var(--es-success-soft);
	color: var(--es-success);
}

.content-wrapper .test-result-status.is-partial,
body:not(:has(.content-wrapper)) .test-result .test-result-status.is-partial
{
	background-color: var(--es-warning-soft);
	color: var(--es-warning);
}

.content-wrapper .test-result-status.is-wrong,
body:not(:has(.content-wrapper)) .test-result .test-result-status.is-wrong
{
	background-color: var(--es-danger-soft);
	color: var(--es-danger);
}

.content-wrapper .test-result-status.is-pending,
.content-wrapper .test-result-status.is-unanswered,
body:not(:has(.content-wrapper)) .test-result .test-result-status.is-pending,
body:not(:has(.content-wrapper)) .test-result .test-result-status.is-unanswered
{
	background-color: var(--es-surface-alt);
	box-shadow: inset 0 0 0 1px var(--es-border);
	color: var(--es-ink-muted);
}

/* 3.5 Akcije ispod rezultata */
.content-wrapper .test-result-actions,
body:not(:has(.content-wrapper)) .test-result .test-result-actions
{
	margin-top: 24px !important;
}

.content-wrapper .test-result-actions > div,
body:not(:has(.content-wrapper)) .test-result .test-result-actions > div
{
	gap: 8px;
}

.content-wrapper .test-result-actions .ms-2,
body:not(:has(.content-wrapper)) .test-result .test-result-actions .ms-2
{
	margin-left: 0 !important;
}

/* 4.2 Zbirni brojevi: male kutije sa linkom (small-box) u istom obliku kao info-kutije: ikonica levo, labela
   iznad broja, link preko cele širine. .small-box (0,1,0), .small-box:hover (0,2,0) -> (0,3,0) / (1,2,0) */
.content-wrapper .report-info-boxes .small-box,
#searchResults .report-info-boxes .small-box,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box
{
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas: "icon inner" "footer footer";
	column-gap: 12px;
	width: 100%;
	margin: 0;
	border: 1px solid var(--es-border);
	border-radius: 12px;
	background-color: var(--es-surface);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04);
	text-align: left;
	color: var(--es-ink);
	overflow: hidden;
}

.content-wrapper .report-info-boxes .small-box > .inner,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .inner
{
	grid-area: inner;
	padding: 16px 16px 16px 0;
}

/* .small-box .icon (0,2,0) apsolutno, 90 px, sakrivena na <= 767 px -> (0,4,0) */
.content-wrapper .report-info-boxes .small-box > .icon,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .icon
{
	grid-area: icon;
	position: static;
	z-index: auto;
	margin: 16px 0 0 16px;
	transition: none;
}

.content-wrapper .report-info-boxes .small-box > .small-box-footer,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .small-box-footer
{
	grid-area: footer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-top: 1px solid var(--es-border);
	background: var(--es-brand-soft);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--button-color);
}

.content-wrapper .report-info-boxes .small-box > .small-box-footer:hover,
body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .small-box-footer:hover
{
	background: color-mix(in srgb, var(--button-color) 12%, var(--es-surface));
	color: var(--button-color);
}

@media (max-width: 991px)
{

	.content-wrapper .test-result-question-rows > .row,
	.content-wrapper .test-result .header-row.bg-primary.text-white,
	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row,
	body:not(:has(.content-wrapper)) .test-result .header-row.bg-primary.text-white
	{
			font-size: 13px;
	}

	.content-wrapper .report-info-boxes .info-box .info-box-number,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-number
	{
			font-size: 24px;
			line-height: 28px;
	}

}

@media (max-width: 1199px)
{

	.content-wrapper .test-result .header-row.bg-primary.text-white
	{
			display: none;
	}

	.content-wrapper .test-result-question-rows
	{
			border-radius: 12px;
	}

	.content-wrapper .test-result-question-rows > .row
	{
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 6px 12px;
			padding: 14px 16px;
	}

	.content-wrapper .test-result-question-rows > .row > div
	{
			width: auto;
			max-width: none;
			padding: 0;
	}

	.content-wrapper .test-result-question-rows > .row > div:nth-child(-n+2)
	{
			grid-column: 1 / -1;
	}

	.content-wrapper .test-result-question-rows > .test-result-total > div:empty
	{
			display: none;
	}

}

/* javna strana (probni test): kartice do 1199 px, iznad stara tabela (col-sm-*) - 3. krug, "vrati stari izgled" */
@media (max-width: 1199px)
{

	body:not(:has(.content-wrapper)) .test-result .header-row.bg-primary.text-white
	{
			display: none;
	}

	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows
	{
			border-radius: 12px;
	}

	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row
	{
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 6px 12px;
			padding: 14px 16px;
	}

	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row > div
	{
			width: auto;
			max-width: none;
			padding: 0;
	}

	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row > div:nth-child(-n+2)
	{
			grid-column: 1 / -1;
	}

	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .test-result-total > div:empty
	{
			display: none;
	}

}

@media (min-width: 576px) and (max-width: 991px)
{

	.content-wrapper .report-info-boxes > [class*="col"],
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes > [class*="col"]
	{
			flex: 0 0 50%;
			width: 50%;
			max-width: 50%;
	}

}

@media (min-width: 992px) and (max-width: 1199px)
{

	.content-wrapper .report-info-boxes > [class*="col"],
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes > [class*="col"]
	{
			flex: 0 0 33.3333%;
			width: 33.3333%;
			max-width: 33.3333%;
	}

}

@media (max-width: 575px)
{

	/* info-kutije dve u redu, ikonica iznad teksta */
	.content-wrapper .report-info-boxes,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes
	{
			--bs-gutter-x: 12px;
			row-gap: 12px;
	}

	.content-wrapper .report-info-boxes > [class*="col-xs-6"],
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes > [class*="col-xs-6"]
	{
			flex: 0 0 50%;
			width: 50%;
			max-width: 50%;
	}

	.content-wrapper .report-info-boxes .info-box,
	#searchResults .report-info-boxes .info-box,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box
	{
			padding: 12px;
	}

	.content-wrapper .report-info-boxes .info-box > .row,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box > .row
	{
			grid-template-columns: minmax(0, 1fr);
			row-gap: 8px;
	}

	.content-wrapper .report-info-boxes .info-box .info-box-icon,
	.content-wrapper .report-info-boxes .small-box > .icon,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-icon,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .icon
	{
			width: 32px;
			height: 32px;
			font-size: 15px;
	}

	.content-wrapper .report-info-boxes .info-box .info-box-number,
	.content-wrapper .report-info-boxes .small-box .info-box-number,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .info-box .info-box-number,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box .info-box-number
	{
			font-size: 22px;
			line-height: 26px;
	}

	/* ikonica iznad teksta, kao u info-kutiji */
	.content-wrapper .report-info-boxes .small-box,
	#searchResults .report-info-boxes .small-box,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box
	{
			grid-template-columns: minmax(0, 1fr);
			grid-template-rows: auto 1fr auto;
			grid-template-areas: "icon" "inner" "footer";
	}

	.content-wrapper .report-info-boxes .small-box > .icon,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .icon
	{
			margin: 12px 0 0 12px;
	}

	.content-wrapper .report-info-boxes .small-box > .inner,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .inner
	{
			padding: 8px 12px 12px;
	}

	.content-wrapper .report-info-boxes .small-box > .small-box-footer,
	body:not(:has(.content-wrapper)) .test-result .report-info-boxes .small-box > .small-box-footer
	{
			padding: 8px 12px;
			font-size: 13px;
	}

	/* kartice pitanja: dve kolone umesto četiri */
	.content-wrapper .test-result-question-rows > .row,
	body:not(:has(.content-wrapper)) .test-result .test-result-question-rows > .row
	{
			grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* akcije jedna ispod druge, glavna gore */
	.content-wrapper .test-result-actions > div,
	body:not(:has(.content-wrapper)) .test-result .test-result-actions > div
	{
			flex-direction: column-reverse;
	}

	.content-wrapper .test-result-actions .btn,
	body:not(:has(.content-wrapper)) .test-result .test-result-actions .btn
	{
			width: 100%;
	}

}


/* =====================================================================
   0. PRIMEDBE NA PILOT
   ===================================================================== */

/* 0.1 Kartice kontrolnog centra u istom obliku kao info-kutije pilota: bela kartica sa ivicom i blagom
   senkom, zaglavlje na beloj podlozi sa ikonicom na pločici (umesto tamne trake u boji okvira).
   dashboard.widgets.css: .dashboard-widget-box > .box-header { background-color: var(--admin-header) }
   dashboard.min.css: .box { border-top: 3px; border-radius: 3px }, .box-header > .box-tools { top: 5px } */
.content-wrapper .box.box-solid.dashboard-widget-box
{
	margin-bottom: 16px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04);
	color: var(--es-ink, #1f2a27);
	overflow: hidden;
}

.content-wrapper .dashboard-widget-box > .box-header
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 48px 12px 16px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	background: var(--es-surface, #ffffff);
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-box > .box-header > .fa,
.content-wrapper .dashboard-widget-box > .box-header > i
{
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 !important;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
	font-size: 14px;
	color: var(--button-color);
}

.content-wrapper .dashboard-widget-box > .box-header .box-title
{
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-box > .box-header > .box-tools
{
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

/* dugme za uklanjanje kartice u režimu izmene rasporeda: prozirno, ikonica u boji teksta.
   user-page.css: .content-wrapper button:not([type]) (0,2,1) !important boji ga kao sva dugmad -> (0,4,1) */
.content-wrapper .dashboard-widget-box .box-tools button.btn-box-tool
{
	width: 32px;
	height: 32px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px;
	background: transparent !important;
	font-size: 14px;
	color: var(--es-ink-muted, #56645f) !important;
	box-shadow: none !important;
}

.content-wrapper .dashboard-widget-box .box-tools button.btn-box-tool:hover
{
	background: var(--es-surface-alt, #f7f9f8) !important;
	color: var(--es-danger, #b0412f) !important;
}

/* telo kartice: broj levo, kao u info-kutiji (bilo je centrirano, 36 px tankim slovima) */
.content-wrapper .dashboard-widget-box > .box-body
{
	padding: 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
	text-align: left;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-box .stat-line
{
	padding: 10px 0;
}

.content-wrapper .dashboard-widget-box .stat-line:first-child
{
	padding-top: 0;
}

.content-wrapper .dashboard-widget-box .stat-line + .stat-line
{
	border-top: 1px solid var(--es-border, #dbe2df);
}

.content-wrapper .dashboard-widget-box .stat-number,
.content-wrapper .dashboard-widget-box .stat-label,
.content-wrapper .dashboard-widget-box .stat-value
{
	display: block;
}

.content-wrapper .dashboard-widget-box .stat-number
{
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-box .stat-line-primary .stat-number
{
	font-size: 28px;
	line-height: 32px;
}

/* naziv je iznad broja/vrednosti */
.content-wrapper .dashboard-widget-box .stat-label
{
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .dashboard-widget-box .stat-value
{
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-link,
.content-wrapper .dashboard-widget-link:hover
{
	color: inherit;
	text-decoration: none;
}

.content-wrapper .dashboard-widget-link:hover .stat-number
{
	color: var(--button-color);
	text-decoration: none;
}

/* 0.2 Redovi-linkovi u listama: prva ćelija (tekst pitanja, datum testa, ime studenta) izgleda kao link,
   kao u tabeli pitanja pilota; ceo red ima hover. */
.content-wrapper a.row > div:first-child,
.content-wrapper a.row > div:first-child p,
.content-wrapper a.question-statistics-row > .row > div:first-child,
.content-wrapper a.student-statistics-row > .row > div:first-child
{
	font-weight: 600;
	color: var(--button-color);
}

.content-wrapper a.row:hover > div:first-child,
.content-wrapper a.question-statistics-row:hover > .row > div:first-child,
.content-wrapper a.student-statistics-row:hover > .row > div:first-child
{
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ikonica broja komentara (statistika pitanja, detalj pitanja, rezultat testa) prigušena, kao na javnim stranama */
.content-wrapper .fa-regular.fa-comment
{
	color: var(--es-ink-muted);
}

/* 0.3 Stablo oblasti na 390 px: kolone za broj pitanja su bile odsečene. Na telefonu i tabletu (do 991 px,
   gde je kolona stabla uža od min-width 34rem) red se lomi: naziv oblasti preko cele širine, ispod njega
   dve kolone za broj (labela kolone iz zaglavlja je u drugom redu zaglavlja). Menja pilot 5.8 (min-width i
   širine kolona). */
@media (max-width: 991px)
{
	#topic-tree-container
	{
		overflow-x: hidden;
	}

	#topic-tree-container > ul,
	#topic-tree-container > .topic-tree-header
	{
		min-width: 0;
	}

	#topic-tree-container .topic-node
	{
		flex-wrap: wrap;
		align-items: flex-start;
		row-gap: 6px;
		padding: 8px 12px;
	}

	#topic-tree-container .topic-cell-name
	{
		flex: 1 0 100%;
	}

	#topic-tree-container .topic-cell-count
	{
		flex: 1 1 0;
		min-width: 0;
		gap: 6px;
	}

	#topic-tree-container .topic-count
	{
		flex: 0 0 48px;
		width: 48px;
	}

	#topic-tree-container .topic-published
	{
		font-size: 12px;
		white-space: nowrap;
	}

	/* J8: bez naslova kolona, svako polje ima svoj natpis */
	#topic-tree-container > .topic-node.topic-tree-header
	{
		display: none;
	}

	#topic-tree-container .topic-cell-count
	{
		flex-wrap: wrap;
	}

	#topic-tree-container .topic-count-label
	{
		display: block;
		flex: 0 0 100%;
		font-size: 13px;
		font-weight: 600;
		line-height: 18px;
	}

	/* J49: strelica dovoljno velika za prst; .topic-toggle u test.configuration.min.css je (1,1,0) */
	#topic-tree-container .topic-cell-name .topic-toggle
	{
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
}


/* =====================================================================
   1. OKVIR ADMIN DELA
   ===================================================================== */

/* 1.1 Dugme za meni na telefonu: isto kao dugme sa tačkicama levo, u boji teksta trake */
.main-header .navbar-toggler
{
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--nav-link-color) 35%, transparent);
	border-radius: 8px;
	color: var(--nav-link-color);
}

.main-header .navbar-toggler:focus-visible
{
	outline: 2px solid var(--nav-link-color);
	outline-offset: 2px;
}

/* sklopljen levi meni (AdminLTE sidebar-collapse): stavke kao ikonice 40 px u sredini trake */
.sidebar-mini.sidebar-collapse .main-sidebar .sidebar-menu > li > a
{
	justify-content: center;
	padding: 8px !important;
}

/* stavke menija i trake bez serifnog fonta (page.min.css: p, li, h2 { font-family: SerifFont }) */
.main-sidebar li,
.main-header li
{
	font-family: inherit;
}

/* 1.2 Avatar: fotografija korisnika u traci u istom krugu 36 px kao inicijali */
.main-header img.user-image
{
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, var(--nav-link-color) 35%, transparent);
	border-radius: 999px;
	object-fit: cover;
}

/* 1.3 Avatar na desktopu: od desne ivice isto koliko ikonice levog menija od leve (24 px);
   (0,3,1) kao user-page.css .main-header .admin-navbar > ul.navbar-right, ovaj fajl se ucitava posle */
@media (min-width: 769px)
{
	.main-header .admin-navbar > ul.navbar-right
	{
		margin-right: 24px;
	}
}


/* =====================================================================
   2. LISTE SA PRETRAGOM
   ===================================================================== */

/* 2.1 Admin deo je bez serifnog fonta. page.min.css: p, li, h2 { font-family: SerifFont } (0,0,1);
   tekst iz baze (opis teksta i pojma) ima zakucan style="color:#000" -> !important */
.content-wrapper p,
.content-wrapper li,
.content-wrapper h2,
.content-wrapper .definition-text
{
	font-family: inherit;
}

.content-wrapper .definition-text
{
	color: var(--es-ink-muted, #56645f) !important;
}

/* 2.2 Red pretrage. user-page.css: .SearchDiv { box-shadow; padding 8/20/20 }, .InputContainer
   { height 45; border; box-shadow }, .micButton { padding!important; border: none!important;
   background-color: transparent!important }, p.search-results { 17 px bolder; color: black } */
.content-wrapper .SearchDiv
{
	margin-bottom: 8px;
	padding: 0;
	box-shadow: none;
}

.content-wrapper .search-label,
.content-wrapper .SearchDiv > .control-label
{
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600 !important;
	line-height: 20px;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .InputContainer
{
	height: 40px;
	padding-left: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	cursor: auto;
}

.content-wrapper .InputContainer > .border
{
	display: none;
}

.content-wrapper .InputContainer > .form-control.input
{
	height: 40px !important;
	border: 1px solid var(--es-border-strong, #7d928c) !important;
	border-right: 0 !important;
	border-radius: 6px 0 0 6px !important;
	font-size: 15px;
}

/* (0,3,0) i (0,4,0) !important gaze .micButton (0,1,0) !important i pilot 5.2 sporedno dugme */
.content-wrapper .btn.micButton,
.content-wrapper .btn[data-interaction*="role:search-trigger"]
{
	width: 40px;
	min-width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0 !important;
	border: 1px solid var(--search-button) !important;
	border-radius: 6px;
	background-color: var(--search-button) !important;
	color: var(--white) !important;
	box-shadow: none !important;
}

/* samo lupa iza polja u istoj grupi; usamljena lupa (jedino dugme u .input-group) ostaje zaobljena na sva 4 ugla */
.content-wrapper .InputContainer > .btn.micButton,
.content-wrapper .input-group > .btn[data-interaction*="role:search-trigger"]:last-child:not(:first-child)
{
	border-radius: 0 6px 6px 0;
}

.content-wrapper .btn.micButton:hover,
.content-wrapper .btn.micButton:focus,
.content-wrapper .btn[data-interaction*="role:search-trigger"]:hover,
.content-wrapper .btn[data-interaction*="role:search-trigger"]:focus
{
	border-color: color-mix(in srgb, var(--search-button) 85%, black) !important;
	background-color: color-mix(in srgb, var(--search-button) 85%, black) !important;
	color: var(--white) !important;
}

.content-wrapper .btn.micButton .fa,
.content-wrapper .btn.micButton:hover .fa-search,
.content-wrapper .btn[data-interaction*="role:search-trigger"] .fa
{
	color: inherit !important;
}

/* broj pogodaka: sitan tekst, ne podebljan crni naslov */
.content-wrapper p.search-results
{
	margin: 8px 0 12px;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper p.search-results b
{
	font-weight: 600;
	color: var(--es-ink, #1f2a27);
}

/* 2.3 Lista kao kartica: kolona koja drži zaglavlje (.header-row) i redove je bela kartica sa ivicom.
   Pilotova tabela pitanja (rezultat testa) ima svoj okvir i ostaje izuzeta. */
.content-wrapper div:has(> .row.header-row):not(:has(> .test-result-question-rows))
{
	margin-bottom: 16px;
	padding: 0 !important;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04);
}

/* red koji drži karticu: bez negativnih margina i pomaka ms-1, kartica poravnata sa naslovom */
.content-wrapper .row:has(> div > .row.header-row)
{
	margin-left: 0 !important;
	margin-right: 0;
}

.content-wrapper .row:has(> div > .row.header-row) > div:has(> .row.header-row)
{
	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
}

/* zaglavlje liste. user-page.css: .header-row { font-size: 17px; padding: 7px; border-radius: 4px;
   margin-top: 20px; background-color: var(--row-header)!important } (0,1,0) !important,
   Bootstrap .bg-primary (0,1,0) !important -> (0,3,0) !important */
.content-wrapper .row.header-row,
.content-wrapper .row.header-row.bg-primary
{
	align-items: end;
	margin: 0 !important;
	padding: 10px 4px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px 12px 0 0;
	background-color: var(--row-header) !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .02em;
	color: var(--es-ink-muted, #56645f) !important;
}

/* redovi: direktni, u kontejneru *-rows i u omotaču *-row */
.content-wrapper div:has(> .row.header-row) > .row:not(.header-row),
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > .row,
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > a[class*="-row"],
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > [class*="-row"] > .row
{
	align-items: center;
	margin: 0;
	padding: 12px 4px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	font-size: 14px;
	line-height: 20px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--es-ink, #1f2a27);
	transition: background-color .15s ease;
}

.content-wrapper div:has(> .row.header-row) > .row:not(.header-row):last-child,
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > .row:last-child,
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > a[class*="-row"]:last-child,
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > [class*="-row"]:last-child > .row
{
	border-bottom: 0;
	border-radius: 0 0 12px 12px;
}

.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > a[class*="-row"]:hover,
.content-wrapper div:has(> .row.header-row) > .row:not(.header-row):hover,
.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > [class*="-row"] > .row:hover
{
	background-color: var(--es-surface-alt, #f7f9f8);
}

.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > a[class*="-row"]:focus-visible
{
	outline: 2px solid var(--button-color);
	outline-offset: -2px;
}

.content-wrapper div:has(> .row.header-row) .row > [class*="col"] p
{
	margin: 0;
}

/* linkovi u ćelijama (naziv teksta ili pojma u listi komentara): boja linka, podvučeno tek na hover */
.content-wrapper div:has(> .row.header-row) .row a:not(.btn):not(.dropdown-item)
{
	font-weight: 600;
	text-decoration: none;
	color: var(--button-color);
}

.content-wrapper div:has(> .row.header-row) .row a:not(.btn):not(.dropdown-item):hover
{
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* tekst ispod reda (opis pitanja u listi pitanja) */
.content-wrapper .question-row > :not(.row)
{
	padding: 0 16px 12px;
	font-size: 13px;
	line-height: 18px;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .question-row:has(> :not(.row)) > .row
{
	border-bottom: 0;
}

.content-wrapper .question-row:has(> :not(.row))
{
	border-bottom: 1px solid var(--es-border, #dbe2df);
}

/* linija između redova je ivica reda; zasebna linija se krije */
.content-wrapper div:has(> .row.header-row) > hr.row-line
{
	display: none;
}

/* 2.4 Meni reda i meni "Prevodi". user-page.css: .row-dropdown { background: transparent; border: none;
   padding: 0 } i hover { color: transparent }, pilot 5.2 boji ga kao sporedno dugme. */
.content-wrapper .btn.row-dropdown,
.content-wrapper .btn.btn-default.dropdown-toggle
{
	width: auto;
	min-width: 40px;
	height: 32px;
	min-height: 32px;
	padding: 0 10px !important;
	border: 1px solid var(--es-border, #dbe2df) !important;
	border-radius: 6px;
	background: var(--es-surface, #ffffff) !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--es-ink, #1f2a27) !important;
	box-shadow: none !important;
}

.content-wrapper .btn.row-dropdown:hover,
.content-wrapper .btn.row-dropdown:focus,
.content-wrapper .btn.row-dropdown.show,
.content-wrapper .btn.btn-default.dropdown-toggle:hover,
.content-wrapper .btn.btn-default.dropdown-toggle.show
{
	border-color: var(--button-color) !important;
	background: var(--es-brand-soft, #eef4f2) !important;
	color: var(--es-ink, #1f2a27) !important;
}

.content-wrapper .dropdown-menu
{
	min-width: 200px;
	padding: 6px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 8px !important;
	outline: 0;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 8px 24px rgba(23, 38, 46, 0.14);
	font-size: 14px;
}

.content-wrapper .dropdown-menu .dropdown-item
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	line-height: 20px;
	color: var(--es-ink, #1f2a27) !important;
	cursor: pointer;
}

.content-wrapper .dropdown-menu .dropdown-item > i,
.content-wrapper .dropdown-menu .dropdown-item > .fa
{
	flex: 0 0 18px;
	width: 18px;
	margin: 0 !important;
	text-align: center;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .dropdown-menu .dropdown-item:hover,
.content-wrapper .dropdown-menu .dropdown-item:focus,
.content-wrapper .dropdown-menu .dropdown-item.active
{
	background: var(--es-brand-soft, #eef4f2);
	color: var(--es-ink, #1f2a27);
}

/* razdelnik u meniju reda (div.borderElem između stavki): tanka linija, bez senke iz user-page.css */
.content-wrapper .dropdown-menu .borderElem
{
	width: auto;
	margin: 4px 6px;
	padding: 0;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	box-shadow: none;
}

/* 2.5 Male ikonice-dugmad u redu: oblik iz pilota (5.2, 32 x 32 obrubljeno), boja ikonice po radnji */
.content-wrapper .btn.btn-sm.btn-primary,
.content-wrapper .btn.btn-sm.edit
{
	color: var(--button-color) !important;
}

.content-wrapper .btn.btn-sm.btn-success,
.content-wrapper .btn.btn-sm.add
{
	color: var(--es-success, #2f7a52) !important;
}

.content-wrapper .btn.btn-sm.btn-danger,
.content-wrapper .btn.btn-sm.delete
{
	color: var(--es-danger, #b0412f) !important;
}

.content-wrapper .btn.btn-sm.btn-danger:hover,
.content-wrapper .btn.btn-sm.delete:hover
{
	border-color: var(--es-danger, #b0412f) !important;
	color: var(--es-danger, #b0412f) !important;
}

.content-wrapper .btn.btn-sm:disabled
{
	opacity: .4;
}

/* 2.6 Sortiranje kolona: pokazivač, strelica u boji glavne boje, redni broj sortiranja kao mali krug */
.content-wrapper [data-interaction*="role:sort-by"]
{
	cursor: pointer;
	user-select: none;
}

.content-wrapper [data-interaction*="role:sort-by"]:hover
{
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .sort-arrow
{
	margin-left: 4px;
	font-size: 11px;
	color: var(--button-color);
}

.content-wrapper .badge.sort-order:empty
{
	display: none;
}

.content-wrapper .badge.sort-order
{
	min-width: 16px;
	margin-left: 2px;
	padding: 1px 4px;
	border-radius: 999px;
	background: var(--es-brand-soft, #eef4f2);
	font-size: 11px;
	line-height: 14px;
	color: var(--button-color);
}

/* 2.7 Paginator (dopunjuje pilot 4.5: strelice, polje za stranu, tekst, raspored) */
.content-wrapper .paginator-row
{
	margin-top: 16px;
	text-align: left !important;
}

.content-wrapper .Paginator
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.content-wrapper .PaginatorText
{
	margin: 0;
}

.content-wrapper .PaginatorPages
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
}

.content-wrapper .PaginatorPages .PaginatorPage
{
	margin: 0;
	text-decoration: none !important;
}

/* user-page.css: .PaginatorPage a { background-color: #385b6c!important } -> boja skina */
.content-wrapper .PaginatorPages a.PaginatorPage.Active
{
	color: var(--white);
}

.content-wrapper select.PaginatorPageInput,
.content-wrapper .PaginatorPageInput.form-control
{
	width: auto;
	height: 36px !important;
	padding: 0 32px 0 10px !important;
	border-radius: 6px !important;
	outline: 0;
	font-size: 14px;
}

/* slovni paginator rečnika (admin) */
.content-wrapper .letter-paginator,
.content-wrapper .AlphabetPaginator
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 16px;
}

.content-wrapper .letter-paginator-page
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 6px;
	background: var(--es-surface, #ffffff);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .letter-paginator-page:hover
{
	border-color: var(--button-color);
	color: var(--button-color);
}

.content-wrapper .letter-paginator-page.active,
.content-wrapper .letter-paginator-page.Active
{
	border-color: var(--button-color);
	background: var(--button-color);
	color: var(--white);
}

/* 2.8 Liste na tabletu i telefonu: kolone se slažu jedna ispod druge (Bootstrap col-sm-*), pa zaglavlje
   gubi smisao i krije se; red dobija razmak između ćelija. Zaglavlje sa sortiranjem ostaje (2.11). */
@media (max-width: 575px)
{
	.content-wrapper div:has(> .row.header-row) > .row.header-row:not(:has([data-interaction*="role:sort-by"]))
	{
		display: none;
	}

	.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > .row,
	.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > a[class*="-row"],
	.content-wrapper div:has(> .row.header-row) > [class*="-rows"] > [class*="-row"] > .row,
	.content-wrapper div:has(> .row.header-row) > .row:not(.header-row)
	{
		row-gap: 4px;
		padding: 12px;
	}

	/* kolone bez prelomne tačke (col-1, col-2: lista korisnika i uloga) ne staju u 390 px: ćelije
	   dobijaju širinu po sadržaju i prelaze u novi red; tekst se ne lomi po slovima (.text-break) */
	.content-wrapper div:has(> .row.header-row) > .row:not(.header-row) > [class*="col-"]:not([class*="col-sm"]):not([class*="col-md"])
	{
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}

	.content-wrapper div:has(> .row.header-row) > .row:not(.header-row) > [class*="col-"]:empty
	{
		display: none;
	}

	.content-wrapper div:has(> .row.header-row) > .row:not(.header-row):first-of-type,
	.content-wrapper div:has(> .row.header-row) > [class*="-rows"]:first-of-type > :first-child
	{
		border-radius: 12px 12px 0 0;
	}
}

/* 2.9 Lista tekstova i pojmova (articleshow, termshow): svaka stavka je kartica .FilterDiv (3.1);
   naslov je link bez podvlačenja, datum sitan, dugmad Komentari / Ocene / Posete u jednom redu */
.content-wrapper .FilterDiv a:not(.btn):not(.dropdown-item),
.content-wrapper .FilterDiv a:not(.btn):not(.dropdown-item):hover
{
	text-decoration: none;
	color: inherit;
}

.content-wrapper .FilterDiv dl
{
	margin: 0;
}

.content-wrapper .FilterDiv .publishing-date
{
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .FilterDiv .definition-title
{
	padding-bottom: 8px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	text-decoration: none;
	color: var(--button-color);
}

.content-wrapper .FilterDiv a:hover .definition-title
{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.content-wrapper .FilterDiv dd
{
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 20px;
}

.content-wrapper .FilterDiv dd p
{
	margin: 0;
}

.content-wrapper .r-v-c-buttons-row
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 !important;
}

.content-wrapper .r-v-c-buttons-row > .btn
{
	flex: 0 0 auto;
	width: auto !important;
	margin: 0;
}

/* razdelnik između kartica nije potreban (kartice imaju razmak) */
.content-wrapper #searchResults hr.line
{
	display: none;
}

.content-wrapper .FilterDiv .label-version
{
	width: auto;
	padding: 0;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.content-wrapper .FilterDiv .input-group.version
{
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}

.content-wrapper .FilterDiv .input-group.version > .form-select
{
	border-radius: 6px !important;
}

.content-wrapper .FilterDiv .input-group.version > .input-group-btn
{
	display: flex;
	gap: 4px;
	margin: 0 !important;
}

/* 2.10 Spojena polja i dugme u .input-group (korisnici, uloge, kontakti, scenariji, izvorni fajlovi,
   UI stringovi, izbor fajla u dijalogu): strana na kojoj se dodiruju je ravna, spoljni uglovi 6 px,
   isti vrh i visina.
   2.2 je hvatao samo dugme direktno u .input-group; ovde i dugme u .input-group-btn. Pilot daje
   svakom polju 6 px (body .content-wrapper .form-control, 0,2,1 !important), sajt pomera dugme
   (#search-button-i margin-top: 8px, .search-visits-button margin-left: -10px) i daje mu 45 px.
   Grupa sa razmakom (.input-group-btn.ms-*, raspon datuma sa margin-right 8 px) ostaje odvojena. */
.content-wrapper .input-group > :is(.form-control, .form-select):has(+ :is(.form-control, .form-select, .btn, .input-group-btn:not([class*="ms-"]))),
body .ess-dialog .input-group > :is(.form-control, .form-select):has(+ :is(.form-control, .form-select, .btn, .input-group-btn:not([class*="ms-"])))
{
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.content-wrapper .input-group > :is(.form-control, .form-select) + :is(.form-control, .form-select),
.content-wrapper .input-group > :is(.form-control, .form-select) + .btn,
.content-wrapper .input-group > :is(.form-control, .form-select) + .input-group-btn:not([class*="ms-"]) > .btn,
body .ess-dialog .input-group > :is(.form-control, .form-select) + :is(.form-control, .form-select),
body .ess-dialog .input-group > :is(.form-control, .form-select) + .btn,
body .ess-dialog .input-group > :is(.form-control, .form-select) + .input-group-btn:not([class*="ms-"]) > .btn
{
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.content-wrapper .input-group > .input-group-btn,
body .ess-dialog .input-group > .input-group-btn
{
	display: flex;
	height: 40px !important;
}

.content-wrapper .input-group > .btn[data-interaction*="role:search-trigger"],
.content-wrapper .input-group > .input-group-btn > .btn[data-interaction*="role:search-trigger"],
body .ess-dialog .input-group > .btn[data-interaction*="role:search-trigger"],
body .ess-dialog .input-group > .input-group-btn > .btn[data-interaction*="role:search-trigger"]
{
	height: 40px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-top-right-radius: 6px !important;
	border-bottom-right-radius: 6px !important;
}

/* dugme odmaknuto od lupe u istoj grupi ("+ Dodaj", "Novi test"): ceo obrub zaobljen.
   Bootstrap .input-group > :not(:first-child):not(.dropdown-menu)... (0,7,0) brise leve uglove -> !important */
.content-wrapper .input-group > .btn.ms-2
{
	border-radius: 6px !important;
}

/* dugme posle raspona datuma (ocene i posete): odvojeno 8 px kao u 8.3, ceo obrub zaobljen */
.content-wrapper .input-group > .native-daterange-control + .input-group-btn,
.content-wrapper .input-group > .native-daterange-control + .input-group-btn > .btn,
body .ess-dialog .input-group > .native-daterange-control + .input-group-btn,
body .ess-dialog .input-group > .native-daterange-control + .input-group-btn > .btn
{
	margin-left: 0 !important;
}

.content-wrapper .input-group > .native-daterange-control + .input-group-btn > .btn,
body .ess-dialog .input-group > .native-daterange-control + .input-group-btn > .btn
{
	border-radius: 6px !important;
}

/* polje pretrage kontakata: user-page.css .search-input { border-right: none !important; height: 45px }
   i page.min.css .contact { italic; centrirano; crte kao background: linear-gradient(...) } */
.content-wrapper .input-group > .form-control.search-input
{
	height: 40px;
	padding: 0 12px;
	border-right: 1px solid var(--es-border-strong, #7d928c) !important;
	background-image: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	text-align: left;
}

/* kad se red pretrage prelomi (telefon: datumi iznad polja), razmak 8 px između redova */
.content-wrapper .input-group
{
	row-gap: 8px;
}

/* dugme posle polja (Izaberite... u dijalogu izvornog fajla): visina polja, ne 42 px */
.content-wrapper .input-group > :is(.form-control, .form-select) + .btn,
body .ess-dialog .input-group > :is(.form-control, .form-select) + .btn
{
	height: 40px;
	min-height: 40px;
}

/* druga grupa dugmadi posle lupe (Dodaj na UI stringovima) je posebna radnja: razmak 8 px */
.content-wrapper .input-group > .input-group-btn + .input-group-btn:not([class*="ms-"])
{
	margin-left: 8px !important;
}

/* 2.11 Sortiranje kad je lista u karticama (2.12; pitanja, statistika pitanja): zaglavlje sa role:sort-by
   se ne krije, nego postaje red malih dugmadi za sortiranje; kolone bez sortiranja i prazne se kriju.
   Izabrano sortiranje (strelica sort-direction-asc/desc) je istaknuto. Široke liste (.wide-list) i do
   1199 px, u 2.12. */
@media (max-width: 991px)
{
	.content-wrapper div:has(> .row.header-row) > .row.header-row:has([data-interaction*="role:sort-by"])
	{
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 10px 12px;
	}

	.content-wrapper .row.header-row:has([data-interaction*="role:sort-by"]) > :not([data-interaction*="role:sort-by"])
	{
		display: none;
	}

	.content-wrapper .row.header-row > [data-interaction*="role:sort-by"]
	{
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 4px;
		width: auto;
		max-width: 100%;
		min-height: 32px;
		padding: 4px 10px;
		border: 1px solid var(--es-border-strong, #7d928c);
		border-radius: 999px;
		background: var(--es-surface, #ffffff);
		font-size: 13px;
		line-height: 18px;
		text-align: left;
		color: var(--es-ink, #1f2a27);
	}

	.content-wrapper .row.header-row > [data-interaction*="role:sort-by"]:has(> .sort-direction-asc, > .sort-direction-desc)
	{
		border-color: var(--button-color);
		background: var(--es-brand-soft, #eef4f2);
		font-weight: 600;
	}
}

/* 2.12 Lista u karticama: do 991 px (široke liste .wide-list do 1199 px, meni zauzima 230 px) kolone
   ne staju jedna pored druge. Zaglavlje bez sortiranja se krije, red je kartica sa ćelijama u mreži,
   iznad vrednosti je naziv kolone iz data-label. Ćelije bez labele (dugmad, meni) i ćelije široke u
   tabeli (col-sm-4 i šire: tekst pitanja, komentar) zauzimaju ceo red. Tabela pitanja u rezultatu
   testa ima svoj raspored (user-page.css 5.6a), odavde dobija samo labele. */
@media (max-width: 991px)
{
	.content-wrapper div:has(> .row.header-row):has([data-label]) > .row.header-row:not(:has([data-interaction*="role:sort-by"]))
	{
		display: none;
	}

	.content-wrapper div:has(> .row.header-row):not(:has(> .test-result-question-rows)) :is(.row, a.row):has(> [data-label])
	{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		/* kartica: celije u vrhu reda, ne na sredini uz visu susednu celiju (redovi tabele: align-items: center) */
		align-items: start;
		gap: 8px 16px;
		margin: 0;
		padding: 12px 14px;
	}

	.content-wrapper div:has(> .row.header-row):not(:has(> .test-result-question-rows)) :is(.row, a.row):has(> [data-label]) > *
	{
		width: auto;
		max-width: none;
		padding: 0;
	}

	.content-wrapper div:has(> .row.header-row):not(:has(> .test-result-question-rows)) :is(.row, a.row):has(> [data-label]) > :is(:not([data-label]), [class*="col-sm-4"], [class*="col-sm-5"], [class*="col-sm-6"], [class*="col-sm-7"], [class*="col-sm-8"], [class*="col-sm-9"], [class*="col-sm-12"])
	{
		grid-column: 1 / -1;
	}

	.content-wrapper div:has(> .row.header-row) :is(.row, a.row) > [data-label]::before,
	body:not(:has(.content-wrapper)) .test-result div:has(> .row.header-row) :is(.row, a.row) > [data-label]::before
	{
		content: attr(data-label);
		display: block;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		color: var(--es-ink-muted);
	}
}

/* isto kao blok iznad i 2.11, za široke liste između 992 i 1199 px */
@media (min-width: 992px) and (max-width: 1199px)
{
	.content-wrapper .wide-list:has(> .row.header-row):has([data-label]) > .row.header-row:not(:has([data-interaction*="role:sort-by"]))
	{
		display: none;
	}

	.content-wrapper .wide-list:has(> .row.header-row):not(:has(> .test-result-question-rows)) :is(.row, a.row):has(> [data-label])
	{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		/* kartica: celije u vrhu reda, ne na sredini uz visu susednu celiju (redovi tabele: align-items: center) */
		align-items: start;
		gap: 8px 16px;
		margin: 0;
		padding: 12px 14px;
	}

	.content-wrapper .wide-list:has(> .row.header-row):not(:has(> .test-result-question-rows)) :is(.row, a.row):has(> [data-label]) > *
	{
		width: auto;
		max-width: none;
		padding: 0;
	}

	.content-wrapper .wide-list:has(> .row.header-row):not(:has(> .test-result-question-rows)) :is(.row, a.row):has(> [data-label]) > :is(:not([data-label]), [class*="col-sm-4"], [class*="col-sm-5"], [class*="col-sm-6"], [class*="col-sm-7"], [class*="col-sm-8"], [class*="col-sm-9"], [class*="col-sm-12"])
	{
		grid-column: 1 / -1;
	}

	.content-wrapper .wide-list:has(> .row.header-row) :is(.row, a.row) > [data-label]::before,
	body:not(:has(.content-wrapper)) .test-result .wide-list:has(> .row.header-row) :is(.row, a.row) > [data-label]::before
	{
		content: attr(data-label);
		display: block;
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		color: var(--es-ink-muted);
	}

	.content-wrapper .wide-list:has(> .row.header-row) > .row.header-row:has([data-interaction*="role:sort-by"])
	{
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 10px 12px;
	}

	.content-wrapper .wide-list:has(> .row.header-row) > .row.header-row:has([data-interaction*="role:sort-by"]) > :not([data-interaction*="role:sort-by"])
	{
		display: none;
	}

	.content-wrapper .wide-list:has(> .row.header-row) > .row.header-row > [data-interaction*="role:sort-by"]
	{
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		gap: 4px;
		width: auto;
		max-width: 100%;
		min-height: 32px;
		padding: 4px 10px;
		border: 1px solid var(--es-border-strong, #7d928c);
		border-radius: 999px;
		background: var(--es-surface, #ffffff);
		font-size: 13px;
		line-height: 18px;
		text-align: left;
		color: var(--es-ink, #1f2a27);
	}

	.content-wrapper .wide-list:has(> .row.header-row) > .row.header-row > [data-interaction*="role:sort-by"]:has(> .sort-direction-asc, > .sort-direction-desc)
	{
		border-color: var(--button-color);
		background: var(--es-brand-soft, #eef4f2);
		font-weight: 600;
	}
}


/* =====================================================================
   3. FIKSNE LISTE I PREVODI (...translationedit, uistringshow)
   ===================================================================== */

/* 3.1 Omotač .FilterDiv (prevodi, lista UI stringova, kartice u listi tekstova) je kartica pilota.
   user-page.css: .FilterDiv { box-shadow: 2px 3px 19px -1px; padding 20 px levo i desno } */
.content-wrapper .FilterDiv
{
	margin-bottom: 16px !important;
	padding: 24px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04) !important;
}

/* 3.2 Zaglavlje kartice: naslov levo, izbor jezika i "Dodaj" desno u istom redu (u HTML-u su iznad
   naslova, desno poravnati, svako u svom redu). Važi za svaki blok koji direktno sadrži h1.lineStyle. */
.content-wrapper :has(> h1.lineStyle)
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
}

.content-wrapper :has(> h1.lineStyle) > h1.lineStyle
{
	order: -2;
	flex: 1 1 auto;
	width: auto;
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: 0;
	text-align: left !important;
}

.content-wrapper :has(> h1.lineStyle) > .text-end
{
	order: -1;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	width: auto;
	margin: 0 0 16px !important;
	padding: 0;
}

.content-wrapper :has(> h1.lineStyle) > :not(h1):not(.text-end)
{
	flex: 1 1 100%;
}

.content-wrapper :has(> h1.lineStyle) > .text-end .inputFormLabel
{
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--es-ink-muted, #56645f);
}

/* mali izbor jezika: iste visine kao dugme pored njega */
.content-wrapper .form-select.form-select-sm
{
	height: 40px;
	padding: 0 36px 0 12px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 6px;
	font-size: 15px;
	color: var(--es-ink, #1f2a27);
}

/* 3.3 Tabele u sadržaju (prevodi, UI stringovi, tabela vrsta pitanja): zaglavlje kao zaglavlje liste,
   tanke linije umesto crne linije od 2 px (Bootstrap .table > :not(:first-child) { border-top: 2px
   solid currentColor }). Proširuje pilot 4.4 sa dnevne tabele na sve tabele. */
/* Bootstrap .table > :not(:last-child) > :last-child > * { border-bottom-color: currentColor } (0,3,0) -> (0,3,3) */
.content-wrapper .table.table > thead > tr > th
{
	padding: 10px 12px;
	border-top: 0;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	background-color: var(--row-header);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .02em;
	vertical-align: bottom;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .table > tbody > tr > td,
.content-wrapper .table > tbody > tr > th
{
	padding: 8px 12px;
	border-top: 0;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	vertical-align: middle;
}

.content-wrapper .table > :not(:first-child)
{
	border-top: 0;
}

.content-wrapper .table > tbody > tr:last-child > *
{
	border-bottom: 0;
}

/* Tabela sa labelama ćelija (td[data-label], prevodi paketa) na telefonu i tabletu (do 991 px): svaki red je blok, polja jedno ispod
   drugog, iznad polja naziv kolone; zaglavlje se ne prikazuje */
@media (max-width: 991px)
{
	.content-wrapper .table:has(td[data-label]) > thead
	{
		display: none;
	}

	.content-wrapper .table:has(td[data-label]) > tbody > tr,
	.content-wrapper .table:has(td[data-label]) > tbody > tr > td
	{
		display: block;
		width: 100%;
	}

	.content-wrapper .table:has(td[data-label]) > tbody > tr:not(:last-child)
	{
		border-bottom: 2px solid var(--es-border-strong, #7d928c);
	}

	.content-wrapper .table:has(td[data-label]) > tbody > tr > td::before
	{
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-size: 12px;
		font-weight: 600;
		color: var(--es-ink-muted, #56645f);
	}
}

/* na širem ekranu opis (textarea) dobija najširu kolonu; samo na širem - na užem bi pobedilo width: 100% iz
   bloka iznad, pa je polje bilo upola uže od ostalih (krug 1 ručnog testiranja) */
@media (min-width: 992px)
{
	.content-wrapper .table:has(td[data-label]) > tbody > tr > td:has(> textarea)
	{
		width: 40%;
	}
}

/* ključ UI stringa (code) u boji teksta, ne Bootstrap ružičasta */
.content-wrapper .table code
{
	font-size: 13px;
	color: var(--es-ink, #1f2a27);
}

/* "Sačuvaj sve prevode": glavno dugme ispod tabele, desno, umesto širokog dugmeta u sredini */
.content-wrapper .FilterDiv form > .row.justify-content-center:last-child
{
	justify-content: flex-end !important;
	margin-top: 16px !important;
}

.content-wrapper .FilterDiv form > .row.justify-content-center:last-child > div
{
	flex: 0 0 auto;
	width: auto;
}

.content-wrapper .btn.w-100.save
{
	width: auto !important;
	min-width: 200px;
}


/* =====================================================================
   4. DIJALOZI (EssDialog)
   ===================================================================== */

/* 4.1 Dijalog. Pilot 5.5 postavlja promenljive EssDialog-a; ovde zatamnjenje, naslov, dugme za
   zatvaranje i sadržaj preko cele širine. */
body .ess-dialog-cover
{
	background-color: color-mix(in srgb, var(--es-ink, #1f2a27) 45%, transparent);
}

body .ess-dialog
{
	font-size: 15px;
	color: var(--es-ink, #1f2a27);
}

body .ess-dialog--floating
{
	box-shadow: -8px 0 32px rgba(23, 38, 46, 0.18);
}

/* bočni dijalog je prislonjen uz ivicu ekrana: naslovna traka bez zaobljenja (pilot: --ess-dialog-title-radius 12px) */
body .ess-dialog--floating .ess-dialog__title
{
	border-radius: 0;
}

body .ess-dialog__title
{
	min-height: 56px;
	font-weight: 600;
}

body .ess-dialog__close-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	font-size: 22px;
}

body .ess-dialog__close-btn:hover,
body .ess-dialog__close-btn:focus-visible
{
	background-color: color-mix(in srgb, var(--white) 16%, transparent);
	outline: 0;
}

/* dugme Pošalji (.btn-dark) u podnožju dijaloga istih mera kao Odustani: staro button.btn.btn-dark iz comment.css
   (min-width 130px, margin-top 8px, height 40px, radius .25rem) ga je spuštalo i razlikovalo (krug 1 ručnog testiranja) */
body .ess-dialog__footer .btn.btn-dark
{
	display: inline-flex;
	align-items: center;
	height: auto;
	min-width: 0;
	margin-top: 0;
	padding: 8px 16px;
	border-width: 1px;
	border-radius: 6px;
	font-weight: 600;
}

/* sadržaj: forma preko cele širine dijaloga (bila je u koloni 10/12) */
body .ess-dialog .floating-container
{
	margin-top: 0 !important;
}

body .ess-dialog form > .row > .col-sm-10
{
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}

body .ess-dialog form.ps-2
{
	padding-left: 0 !important;
}

/* 4.2 Dugmad dijaloga u podnožju EssDialog-a (šablon ih označava sa data-ess-footer), u jednom redu desno,
   po širini teksta, glavno poslednje (order; u HTML-u je prvo).
   user-page.css: .actionButtonBig { width: 125px; height: 41px; border: none!important; padding!important;
   color: #fff!important; font-size: .9rem!important }, .save/.cancel { background-color...!important },
   .cancel { color: white!important } (0,1,0) -> (0,3,0) !important. Pilot daje svakom
   .btn.btn-primary.actionButtonBig 200 x 48 px (0,4,0); to je mišljeno samo za "Počni test"
   (#btnStartTest), pa ga ovo pravilo preskače, a ostala (Novi tekst, Sačuvaj...) su 40 px (1,3,0).
   Samo omotač (div): dijalog testa i forma uz pitanje stavljaju data-ess-footer na sama dugmad. */
body .ess-dialog__footer > div[data-ess-footer]
{
	width: 100%;
	margin: 0 !important;
}

body .ess-dialog__footer > div[data-ess-footer] > .d-flex,
body .ess-dialog__footer > div[data-ess-footer] > .row
{
	flex-wrap: wrap;
	justify-content: flex-end !important;
	gap: 8px;
	margin: 0 !important;
}

body .ess-dialog__footer > div[data-ess-footer] [class*="col"]
{
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	margin: 0 !important;
	padding: 0;
}

body .ess-dialog__footer > div[data-ess-footer] [class*="col"]:has(.btn-primary, .save)
{
	order: 1;
}

body .ess-dialog__footer .btn
{
	text-align: center;
}

body .ess-dialog .btn.actionButtonBig,
.content-wrapper .btn.actionButtonBig:not(#btnStartTest)
{
	width: auto !important;
	min-width: 112px;
	height: 40px !important;
	min-height: 40px;
	margin: 0 !important;
	padding: 0 20px !important;
	border: 1px solid transparent !important;
	border-radius: 6px;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none !important;
}

body .ess-dialog .btn.actionButtonBig.save,
body .ess-dialog .btn.btn-primary,
.content-wrapper .btn.actionButtonBig.save
{
	border-color: var(--button-color) !important;
	background-color: var(--button-color) !important;
	color: var(--white) !important;
}

body .ess-dialog .btn.actionButtonBig.save:hover,
body .ess-dialog .btn.btn-primary:hover,
.content-wrapper .btn.actionButtonBig.save:hover
{
	border-color: color-mix(in srgb, var(--button-color) 85%, black) !important;
	background-color: color-mix(in srgb, var(--button-color) 85%, black) !important;
}

body .ess-dialog .btn.actionButtonBig.cancel,
body .ess-dialog .btn.btn-secondary,
body .ess-dialog .btn.btn-default,
body .ess-dialog .btn.btn-outline-secondary,
.content-wrapper .btn.actionButtonBig.cancel
{
	border-color: var(--es-border-strong, #7d928c) !important;
	background-color: var(--es-surface, #ffffff) !important;
	color: var(--es-ink, #1f2a27) !important;
}

body .ess-dialog .btn.actionButtonBig.cancel:hover,
body .ess-dialog .btn.btn-secondary:hover,
body .ess-dialog .btn.btn-default:hover,
body .ess-dialog .btn.btn-outline-secondary:hover,
.content-wrapper .btn.actionButtonBig.cancel:hover
{
	border-color: var(--button-color) !important;
	background-color: var(--es-brand-soft, #eef4f2) !important;
}

/* brisanje: obrubljeno crveno, da ne liči na glavnu radnju */
body .ess-dialog .btn.actionButtonBig.delete,
body .ess-dialog .btn.btn-danger,
body .ess-dialog .btn.btn-outline-danger,
.content-wrapper .btn.actionButtonBig.delete
{
	border-color: var(--es-danger, #b0412f) !important;
	background-color: var(--es-surface, #ffffff) !important;
	color: var(--es-danger, #b0412f) !important;
}

body .ess-dialog .btn.actionButtonBig.delete:hover,
body .ess-dialog .btn.btn-danger:hover,
body .ess-dialog .btn.btn-outline-danger:hover,
.content-wrapper .btn.actionButtonBig.delete:hover
{
	background-color: var(--es-danger-soft, #f9e6e2) !important;
}

/* telefon: tri dugmeta od 112 px (352 px) ne staju u podnožje od 350 px, pa su po širini teksta */
@media (max-width: 575px)
{
	body .ess-dialog__footer .btn.actionButtonBig
	{
		min-width: 0;
		padding: 0 16px !important;
	}
}

body .ess-dialog .btn:focus-visible
{
	outline: 2px solid var(--button-color);
	outline-offset: 2px;
}

body .ess-dialog .btn i
{
	color: inherit !important;
}

/* 4.3 Tabovi u dijalogu i u sadržaju: podvučen tekst kao tabovi pilota (4.3), umesto plavih linkova i
   tabova u boji menija. user-page.css: .content-wrapper button[type="button"] (0,2,1) !important ->
   (0,3,1) !important */
body .ess-dialog .nav-tabs,
.content-wrapper .nav-tabs
{
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
}

body .ess-dialog .nav-tabs .nav-link,
.content-wrapper .nav-tabs .nav-link,
.content-wrapper .nav-tabs button.nav-link
{
	margin-bottom: -1px;
	padding: 10px 14px !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0;
	background-color: transparent !important;
	font-size: 15px;
	font-weight: 600;
	color: var(--es-ink-muted, #56645f) !important;
	box-shadow: none !important;
}

body .ess-dialog .nav-tabs .nav-link:hover,
.content-wrapper .nav-tabs .nav-link:hover,
.content-wrapper .nav-tabs button.nav-link:hover
{
	color: var(--es-ink, #1f2a27) !important;
}

body .ess-dialog .nav-tabs .nav-link.active,
.content-wrapper .nav-tabs .nav-link.active,
.content-wrapper .nav-tabs button.nav-link.active
{
	border-bottom-color: var(--button-color) !important;
	color: var(--es-ink, #1f2a27) !important;
}

/* 4.4 Centrirani dijalog (pitanje testa, potvrde): nikad širi od ekrana; položaj (left/top u px) daje
   EssDialog i ponovo centrira pri promeni širine prozora, a prevlačenje za naslov ga pomera u svim
   pravcima. Bočni dijalog na telefonu preko cele širine, na tabletu najviše 560 px (širinu zadaje
   poziv u %) */
body .ess-dialog--centered
{
	max-width: calc(100vw - 16px) !important;
	border-radius: 12px;
}

@media (max-width: 767px)
{
	/* centrirani dijalog sa širinom za desktop (npr. "Prijavi problem") izlazio je desno */
	body .ess-dialog--centered
	{
		width: calc(100vw - 16px) !important;
	}

	body .ess-dialog--floating-rtl,
	body .ess-dialog--floating-ltr
	{
		width: 100% !important;
		left: 0 !important;
	}

	body .ess-dialog form > .mt-3.text-center > .d-flex
	{
		flex-direction: column-reverse;
	}

	body .ess-dialog form > .mt-3.text-center > .d-flex > [class*="col"],
	body .ess-dialog .btn.actionButtonBig
	{
		width: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px)
{
	body .ess-dialog--floating-rtl
	{
		width: min(560px, 75vw) !important;
		left: auto !important;
		right: 0;
	}
}


/* =====================================================================
   5. FORME ZA UNOS I IZMENU (u sadržaju i u dijalozima)
   ===================================================================== */

/* 5.1 Labela. user-page.css: .inputFormLabel { font-size: 18px!important } (0,1,0), .fw-bolder
   (0,1,0) !important -> (0,3,0) !important. Pilot 2.1 isto radi samo u .content-wrapper. */
body .ess-dialog .control-label.inputFormLabel,
body .ess-dialog .form-label,
.content-wrapper .form-label
{
	display: block;
	margin: 0 0 6px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 20px;
	color: var(--es-ink, #1f2a27);
}

/* 5.2 Polja u dijalogu kao polja pilota (2.2). .inputFormStyle/.textAreaFormStyle (0,1,0) !important
   -> (0,3,0) !important */
body .ess-dialog .form-control,
body .ess-dialog .form-select,
body .ess-dialog .form-control.inputFormStyle,
body .ess-dialog .form-select.inputFormStyle
{
	height: 40px !important;
	padding: 0 12px !important;
	border: 1px solid var(--es-border-strong, #7d928c) !important;
	border-radius: 6px !important;
	background-color: var(--es-surface, #ffffff) !important;
	font-size: 15px;
	line-height: 22px;
	color: var(--es-ink, #1f2a27);
	box-shadow: none;
}

body .ess-dialog .form-select,
body .ess-dialog .form-select.inputFormStyle
{
	padding-right: 36px !important;
	background-position: right 12px center;
}

body .ess-dialog .form-control.form-control-sm
{
	height: 32px !important;
	padding: 0 8px !important;
	font-size: 14px;
}

/* višeredna polja: visina po sadržaju, ne 40 px */
body .ess-dialog textarea.form-control,
body .ess-dialog textarea.form-control.textAreaFormStyle,
.content-wrapper textarea.form-control,
.content-wrapper textarea.form-control.textAreaFormStyle
{
	height: auto !important;
	min-height: 96px;
	padding: 8px 12px !important;
	border: 1px solid var(--es-border-strong, #7d928c) !important;
	border-radius: 6px !important;
	background-color: var(--es-surface, #ffffff) !important;
	font-size: 15px;
	line-height: 22px;
	color: var(--es-ink, #1f2a27);
}

body .ess-dialog .form-control:focus,
body .ess-dialog .form-select:focus,
body .ess-dialog textarea.form-control:focus,
.content-wrapper textarea.form-control:focus
{
	border-color: var(--button-color) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-color) 25%, transparent) !important;
	outline: none;
}

body .ess-dialog .form-control:disabled,
body .ess-dialog .form-control[readonly]
{
	background-color: var(--es-surface-alt, #f7f9f8) !important;
	border-color: var(--es-border, #dbe2df) !important;
	color: var(--es-ink-muted, #56645f);
}

body .ess-dialog .form-control.inputFormStyle.mb-2,
body .ess-dialog .form-select.inputFormStyle.mb-2
{
	margin-bottom: 16px !important;
}

/* 5.3 Checkbox i radio u dijalogu (pilot 2.3 važi samo u sadržaju); obični checkbox bez klase
   (tačan odgovor u ponudama) u boji skina */
body .ess-dialog .form-check-input
{
	width: 18px;
	height: 18px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 4px;
	cursor: pointer;
}

body .ess-dialog .form-check-input:checked
{
	border-color: var(--button-color);
	background-color: var(--button-color);
}

body .ess-dialog input[type="checkbox"]:not(.form-check-input),
body .ess-dialog input[type="radio"]:not(.form-check-input),
.content-wrapper input[type="checkbox"]:not(.form-check-input),
.content-wrapper input[type="radio"]:not(.form-check-input)
{
	width: 18px;
	height: 18px;
	accent-color: var(--button-color);
	cursor: pointer;
}

/* 5.4 Greška u polju. comment.min.css: input.error { outline: 1px solid red; border: none !important }
   (0,1,1) !important -> (0,3,1) !important */
.content-wrapper input.form-control.error,
.content-wrapper textarea.form-control.error,
.content-wrapper select.error,
body .ess-dialog input.form-control.error,
body .ess-dialog textarea.form-control.error,
body .ess-dialog select.error,
.content-wrapper input.form-control.is-invalid,
.content-wrapper textarea.form-control.is-invalid,
.content-wrapper select.is-invalid,
body .ess-dialog input.form-control.is-invalid,
body .ess-dialog textarea.form-control.is-invalid,
body .ess-dialog select.is-invalid,
body .ess-dialog form select.form-select.error,
body .ess-dialog form select.form-select.is-invalid
{
	border: 1px solid var(--es-danger, #b0412f) !important;
	outline: 0;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-danger, #b0412f) 18%, transparent) !important;
}

.content-wrapper label.error,
.content-wrapper .form-error-layer,
.content-wrapper .small.text-danger,
body .ess-dialog label.error,
body .ess-dialog .form-error-layer,
body .ess-dialog .small.text-danger
{
	margin-top: 4px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	color: var(--es-danger, #b0412f) !important;
}

/* 5.5 Sklopivi delovi forme (opis, meta, SEO, društvene mreže, lozinka): zaglavlje odeljka sa linijom
   iznad. user-page.css: .article-collapse { color: black; font-size: 21px },
   .password-collapse:hover { color: black!important } (0,2,0) -> (0,3,1) */
.content-wrapper a.article-collapse,
.content-wrapper a.password-collapse
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px !important;
	padding: 12px 0 8px;
	border-top: 1px solid var(--es-border, #dbe2df);
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 22px;
	text-decoration: none;
	color: var(--es-ink, #1f2a27) !important;
	cursor: pointer;
}

.content-wrapper a.article-collapse:hover,
.content-wrapper a.password-collapse:hover,
.content-wrapper a.article-collapse:focus-visible
{
	color: var(--button-color) !important;
}

/* 5.6 Okvir oko CKEditor-a (unutrašnjost se ne dira): ivica i zaobljenje kao polje */
.content-wrapper div:has(> .cke) > .cke,
body .ess-dialog div:has(> .cke) > .cke
{
	border-color: var(--es-border-strong, #7d928c);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: none;
}

/* 5.7 Otpremanje slike: sporedno dugme. user-page.css: .upload-img { background-color: #0099CC!important }
   (0,1,0) -> (0,3,0) !important */
.content-wrapper .btn.upload-img,
.content-wrapper .btn.iframe-btn
{
	border: 1px solid var(--es-border-strong, #7d928c) !important;
	background-color: var(--es-surface, #ffffff) !important;
	color: var(--es-ink, #1f2a27) !important;
}

.content-wrapper .btn.upload-img:hover,
.content-wrapper .btn.iframe-btn:hover
{
	border-color: var(--button-color) !important;
	background-color: var(--es-brand-soft, #eef4f2) !important;
}


/* =====================================================================
   6. MOJA STRANICA (dashboardshow: administrator, profesor, učenik)
   Kartice su u oblasti 0.1; ovde sadržaj kartica, naslov i dugmad za raspored.
   Raspored kartica (div.grid.muuri, div.item) slaže muuri; position i transform se ne diraju.
   ===================================================================== */

/* 6.1 Naslov i dugme "Izmeni" u istom redu, u ravni sa ivicama kartica (red .titleDiv imao je -12 px;
   kartica je uvucena 15 px u svoj #widgetGrid .item, dashboard.widgets.css);
   u rezimu izmene akcije prelaze u sledeci red kad nema mesta */
.content-wrapper .row.titleDiv
{
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 15px 16px;
}

/* Bootstrap .row > * daje deci width: 100% (svako u svoj red) */
.content-wrapper .row.titleDiv > *
{
	width: auto;
	padding-left: 0;
	padding-right: 0;
}

/* (0,3,1): pilot .content-wrapper .content h1 { margin: 0 0 24px } je (0,3,1), ovo pravilo je posle njega */
.content-wrapper .content h1.dashboardTitle
{
	margin-bottom: 0;
}

.content-wrapper .dashboardActions
{
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 0;
}

.content-wrapper .dashboardActions #editActions:not(.d-none)
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.content-wrapper .dashboardActions select.form-control
{
	width: auto;
	min-width: 200px;
}

/* 6.2 Sadržaj kartica koji nije broj: običan tekst (telo kartice je 28 px masno za brojeve) */
.content-wrapper .dashboard-widget-box .recent-questions-widget,
.content-wrapper .dashboard-widget-box .question-quick-actions-widget,
.content-wrapper .dashboard-widget-box .question-status-count-widget
{
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.content-wrapper .dashboard-widget-box .recent-question-item
{
	padding: 10px 0;
}

.content-wrapper .dashboard-widget-box .recent-question-item:first-child
{
	padding-top: 0;
}

.content-wrapper .dashboard-widget-box .recent-question-item + .recent-question-item
{
	border-top: 1px solid var(--es-border, #dbe2df);
}

.content-wrapper .dashboard-widget-box .recent-question-title
{
	font-weight: 600;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-box .recent-question-text,
.content-wrapper .dashboard-widget-box .recent-question-text p
{
	margin: 2px 0 6px;
	font-size: 13px;
	line-height: 18px;
	color: var(--es-ink-muted, #56645f);
}

/* pitanja po statusu: dva broja jedan pored drugog, labela ispod */
.content-wrapper .question-status-count-widget
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
}

.content-wrapper .question-status-count-widget .status-count-item
{
	display: flex;
	flex-direction: column;
}

.content-wrapper .question-status-count-widget .status-count-number
{
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .question-status-count-widget .status-count-label
{
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .question-quick-actions-widget p
{
	margin-bottom: 12px !important;
}

/* kartica-link (status pretplate i sl.): .is-* je status pretplate; aktivna je zelena, istekla crvena */
.content-wrapper .dashboard-widget-link .stat-value
{
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .dashboard-widget-link.is-active .stat-value
{
	color: var(--es-success, #2f7a52);
}

.content-wrapper .dashboard-widget-link.is-expired .stat-value,
.content-wrapper .dashboard-widget-link.is-cancelled .stat-value,
.content-wrapper .dashboard-widget-link.is-none .stat-value
{
	color: var(--es-danger, #b0412f);
}


/* =====================================================================
   7. TESTOVI ZNANJA (testshow, testinsert, testdisplay, questionshow, teststudentshow)
   Lista testova je lista iz oblasti 2, rezultat je pilot.
   ===================================================================== */

/* 7.1 Detalj pitanja: tekst pitanja kao kartica, alatke ispod, broj komentara kao sitan podatak */
.content-wrapper .question-detail-text
{
	padding: 16px 20px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	font-size: 15px;
	line-height: 24px;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .question-detail-text table
{
	margin: 8px 0;
	font-variant-numeric: tabular-nums;
}

.content-wrapper .question-detail-text td,
.content-wrapper .question-detail-text th
{
	padding: 2px 16px 2px 0;
}

.content-wrapper .question-detail-toolbar
{
	gap: 8px;
	margin-top: 12px;
}

.content-wrapper .question-detail-toolbar .btn
{
	margin: 0 !important;
}

.content-wrapper p.question-detail-meta
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper section.question-detail-comments
{
	margin-top: 24px;
}

/* info-kutija čija je vrednost tekst (oblast, vrsta pitanja): manji broj, da tekst stane u 2 reda */
.content-wrapper .question-statistics-detail .report-info-boxes .info-box .info-box-number
{
	font-size: 18px;
	line-height: 24px;
}

/* veze "← Nazad na ..." iznad sadržaja: sitne, u boji linka, bez podvlačenja */
.content-wrapper .question-statistics-detail > p > a,
.content-wrapper .question-statistics-detail > a
{
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--button-color);
}

.content-wrapper .question-statistics-detail > p > a:hover
{
	text-decoration: underline;
}

/* 7.2 Povratna informacija u dijalogu pitanja (tačno/netačno) kao poruka */
body .ess-dialog .test-question-feedback
{
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
}


/* =====================================================================
   8. STATISTIKA (teststatistics*: globalna, lična, po studentu, po testu, po pitanju)
   Info-kutije, small-box, tabovi i tabela po danima su pilot; ovde izbor perioda na svim stranama i
   kalendar (daterangepicker, van .content-wrapper).
   ===================================================================== */

/* 8.1 Dugme perioda kao polje na svim stranama (pilot 4.1 samo na globalnoj statistici), u jednom redu.
   user-page.css: .content-wrapper button[type="button"] (0,2,1) !important -> (0,3,0) !important */
.content-wrapper .btn.periodBtn
{
	height: 40px;
	padding: 0 14px !important;
	border: 1px solid var(--es-border-strong, #7d928c) !important;
	border-radius: 6px;
	background-color: var(--es-surface, #ffffff) !important;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink, #1f2a27) !important;
	box-shadow: none !important;
}

.content-wrapper .btn.periodBtn .fa
{
	color: var(--es-ink-muted, #56645f) !important;
}

.content-wrapper .btn.periodBtn:hover
{
	border-color: var(--button-color) !important;
}

/* "Period:" (period.picker.htmlt) kao ostale labele forme (9.4, Oblast): labela ima klasu control-label, pa je
   .content-wrapper label:not([class]) ne gadja; dosad samo na globalnoj statistici (user-page.css #frmSearchTestStatistics) */
.content-wrapper label[for="period"]
{
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--es-ink, #1f2a27);
}

/* kolona sa dugmetom perioda je siroka koliko labela i dugme (col-sm-3/4 su uze od njih), a sledeca kolona
   prelazi u novi red; .col-sm-N (0,1,0) -> (0,4,1) */
.content-wrapper form .row > [class*="col-"]:has(> .periodBtn)
{
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	/* navigation.min.css div.d-flex.align-items-center (0,2,1), do 885px: margin-top 10px i margin-left 15px -
	   kolona perioda se spustala ispod lupe (globalna statistika) i pomerala udesno */
	margin-top: 0;
	margin-left: 0;
}

/* kolona filtera bez kontrole (npr. izbor studenta, koji student nema) ne zauzima mesto u redu */
.content-wrapper form .row > .form-group:empty
{
	display: none;
}

/* 8.2 Kalendar (daterangepicker.css; .daterangepicker td.active (0,2,1), .ranges li.active (0,3,1)) */
body .daterangepicker
{
	padding: 8px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 12px 32px rgba(23, 38, 46, 0.16);
	font-family: inherit;
	font-size: 14px;
	color: var(--es-ink, #1f2a27);
}

body .daterangepicker::before,
body .daterangepicker::after
{
	display: none;
}

body .daterangepicker .ranges li
{
	margin: 0 0 4px;
	padding: 8px 12px;
	border-color: transparent;
	border-radius: 6px;
	background: transparent;
	font-size: 14px;
	color: var(--es-ink, #1f2a27);
}

/* daterangepicker.css: li:hover i li.active { border: 1px solid #08c } (0,2,1)/(0,3,1) */
body .daterangepicker .ranges li:hover
{
	border-color: var(--es-brand-soft, #eef4f2);
	background: var(--es-brand-soft, #eef4f2);
}

body .daterangepicker .ranges li.active
{
	border-color: var(--button-color);
	background: var(--button-color);
	color: var(--white);
}

/* 8.3 Stablo oblasti (essdroptree-lite.css): stavka pod mišem i okvir fokusa u boji skina umesto plave */
body .ess-select
{
	--ess-droptree-item-hover-bg: var(--button-color);
}

/* dok skripta na kraju strane ne izgradi stablo, polje vec zauzima svoje mesto */
body .ess-select:empty
{
	min-height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 8px;
	background-color: #fff;
}

/* prva stavka bez izbora ("Izaberite oblast...", "Sve oblasti"): odmaknuta od opcija ispod nje - aktivna je puna traka.
   essdroptree.css .ess-select ul li (0,1,2) padding 0 2px 1px -> (0,2,3) */
body .ess-select ul li[data-index="dummy"]
{
	margin-bottom: 4px;
	padding: 4px 8px;
	border-radius: 4px;
}

/* dug naziv izabrane oblasti se seče ("...") umesto da raširi polje i kolonu forme (Moji testovi: lupa i Novi test
   prelazili su u novi red - krug 1 ručnog testiranja) */
/* mesto za strelicu (pozadinska slika .ess-select uz desnu ivicu) - tekst se završava pre nje */
body .ess-select .display
{
	padding-right: 2rem;
}

body .ess-select .display-text > span
{
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* "Period:" (period.picker.htmlt) u bloku poravnatom po dnu (dnevnik plaćanja - dugme u ravni sa poljima): labela
   ostaje uz dno, podignuta tako da joj je sredina u sredini dugmeta (22px labela, 40px dugme) */
.align-items-end > label[for="period"]
{
	margin-bottom: 9px;
}

/* "Period:" iznad dugmeta (kolona flex-column, Moja statistika): isti razmak do polja kao ispod ostalih labela (9.4) */
.content-wrapper .flex-column > label[for="period"]
{
	margin-bottom: 6px;
}

/* Moja statistika: lupa u visini polja (ispod labela "Period:" i "Oblast", 20px + 6px), kad je u redu sa poljima */
@media (min-width: 768px)
{

	.content-wrapper .test-statistics-personal form > .row > .col-md-auto
	{
			padding-top: 24px;
	}

}

/* kolona forme sa poljem stabla ne raste prema tekstu (flex stavka .row ima min-width: auto) */
.row > .col-md:has(.ess-select)
{
	min-width: 0;
}

body .daterangepicker .calendar-table
{
	border: 0;
	background: transparent;
}

body .daterangepicker .calendar-table th,
body .daterangepicker .calendar-table td
{
	width: 34px;
	min-width: 34px;
	height: 32px;
	border-radius: 6px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

body .daterangepicker .calendar-table th
{
	font-weight: 600;
	color: var(--es-ink-muted, #56645f);
}

body .daterangepicker .calendar-table th.month
{
	font-size: 14px;
	color: var(--es-ink, #1f2a27);
}

body .daterangepicker td.available:hover,
body .daterangepicker th.available:hover
{
	background: var(--es-surface-alt, #f7f9f8);
}

body .daterangepicker td.off,
body .daterangepicker td.off.in-range
{
	background: transparent;
	color: var(--es-border-strong, #7d928c);
}

body .daterangepicker td.in-range
{
	border-radius: 0;
	background: var(--es-brand-soft, #eef4f2);
	color: var(--es-ink, #1f2a27);
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover,
body .daterangepicker td.start-date,
body .daterangepicker td.end-date,
body .daterangepicker td.off.active,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date
{
	background: var(--button-color);
	color: var(--white);
}

body .daterangepicker td.start-date
{
	border-radius: 6px 0 0 6px;
}

body .daterangepicker td.end-date
{
	border-radius: 0 6px 6px 0;
}

body .daterangepicker td.start-date.end-date
{
	border-radius: 6px;
}

body .daterangepicker .drp-buttons,
body .daterangepicker .range_inputs
{
	border-top: 1px solid var(--es-border, #dbe2df);
	padding-top: 8px;
}

body .daterangepicker input,
body .daterangepicker .input-mini,
body .daterangepicker .input-mini.active
{
	height: 32px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 6px;
	font-size: 13px;
	color: var(--es-ink, #1f2a27);
}

body .daterangepicker .input-mini.active
{
	border-color: var(--button-color);
}

body .daterangepicker .btn
{
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 6px;
	background: var(--es-surface, #ffffff);
	font-size: 14px;
	font-weight: 600;
	color: var(--es-ink, #1f2a27);
}

body .daterangepicker .btn.applyBtn
{
	border-color: var(--button-color);
	background: var(--button-color);
	color: var(--white);
}

/* kalendar na telefonu: jedan mesec ispod drugog, u širini ekrana (daterangepicker postavlja left/top
   inline za širok ekran, pa je na 390 px izlazio desno za 200+ px). max-width !important: gazi
   .daterangepicker.dropdown-menu { max-width: none } (0,2,0). */
@media (max-width: 575px)
{
	body .daterangepicker
	{
		left: 8px !important;
		right: 8px !important;
		width: auto;
		max-width: calc(100vw - 16px) !important;
	}

	body .daterangepicker .ranges,
	body .daterangepicker .drp-calendar,
	body .daterangepicker .calendar
	{
		float: none !important;
		max-width: 100%;
	}

	/* M3: Otkaži i Primeni ispod kalendara; .range_inputs je u bloku brzog izbora, iznad kalendara */
	body .daterangepicker
	{
		padding-bottom: 60px;
	}

	body .daterangepicker .range_inputs
	{
		position: absolute;
		right: 8px;
		bottom: 8px;
		left: 8px;
	}

	/* dugme perioda: datum se lomi u dva reda umesto da izlazi iz ekrana */
	.content-wrapper .btn.periodBtn
	{
		min-width: 0;
		height: auto;
		min-height: 40px;
		white-space: normal;
	}
}

/* grafikon (plotly) ne sme da proširi stranu kad mu je širina zadata za širi ekran */
.content-wrapper .js-plotly-plot,
.content-wrapper .daily-report-chart
{
	max-width: 100%;
	overflow: hidden;
}

/* 8.3 Polja za datum bez daterangepicker-a (ocene i posete teksta: dva input type=date) */
.content-wrapper input[type="date"],
.content-wrapper input[type="datetime-local"]
{
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 6px;
	background: var(--es-surface, #ffffff);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .native-daterange-control
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 8px;
}

/* 8.4 Traka alatki grafikona (plotly) na svim stranama statistike, kao pilot 4.3 */
.content-wrapper .modebar .modebar-btn[type="button"]
{
	min-height: 0;
	padding: 3px 4px !important;
	border: 0 !important;
	background-color: transparent !important;
	color: var(--es-ink-muted, #56645f) !important;
	box-shadow: none !important;
}

.content-wrapper .modebar-group
{
	background-color: transparent !important;
}


/* =====================================================================
   9. PRETPLATE I SKINOVI
   ===================================================================== */

/* 9.1 Trenutna pretplata učenika: red iznad kartice liste uplata (status levo, dugme desno). Status je van
   kartice (#searchResults), pa je poravnat levo sa naslovom i karticom, bez bočnog uvlačenja. */
.content-wrapper .studentSubscriptionCurrent
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 !important;
	padding: 16px 0;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	font-size: 15px;
}

.content-wrapper .studentSubscriptionCurrent > p
{
	margin: 0 !important;
}

.content-wrapper .studentSubscriptionCurrent > .mt-2
{
	margin-top: 0 !important;
}

/* 9.2 Plan pretplate (izmena, prikaz cena) kao kartica forme */
.content-wrapper .subscriptionPlanEdit,
.content-wrapper .subscriptionPlan
{
	max-width: 760px;
	padding: 24px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04);
}

.content-wrapper .subscriptionPlanEdit form > .text-center,
.content-wrapper .subscriptionPlanEdit form > div:last-child
{
	text-align: right !important;
}

.content-wrapper p.subscriptionPrice
{
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 700;
	line-height: 36px;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper ul.subscriptionPlanFeatures
{
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.content-wrapper ul.subscriptionPlanFeatures li
{
	position: relative;
	padding: 6px 0 6px 26px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	font-size: 14px;
}

.content-wrapper ul.subscriptionPlanFeatures li::before
{
	content: "\f00c";
	position: absolute;
	left: 2px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--es-success, #2f7a52);
}

/* 9.3 Izbor skina: sličice kao kartice, izabrani skin sa obrubom glavne boje, sačuvani sa kvačicom.
   user-page.css: img.selected / img.newselected { outline u bojama --selected / --newselected } */
.content-wrapper .skinDiv
{
	position: relative;
}

.content-wrapper .skinDiv img
{
	max-width: 100%;
	height: auto;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	transition: transform .15s ease;
}

.content-wrapper .skinDiv img:hover
{
	transform: translateY(-2px);
}

.content-wrapper .skinDiv img.selected
{
	outline: 2px solid var(--es-border-strong, #7d928c);
	outline-offset: 3px;
	box-shadow: none;
}

.content-wrapper .skinDiv img.newselected
{
	outline: 3px solid var(--button-color);
	outline-offset: 3px;
	box-shadow: none;
}

.content-wrapper .skinDiv:has(img.selected)::after
{
	content: "\f00c";
	position: absolute;
	top: 8px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--button-color);
	font-family: "Font Awesome 6 Free";
	font-size: 12px;
	font-weight: 900;
	color: var(--white);
}

/* dugmad Save / Discard: širina po tekstu (bila je col-2) */
.content-wrapper .buttons-row .btn
{
	width: auto;
	min-width: 112px;
}

/* 9.4 Forme profila i plana bez klasa na labelama (label, .companionLabel): kao labele pilota */
.content-wrapper label:not([class]),
.content-wrapper .companionLabel
{
	display: block;
	margin-bottom: 6px !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--es-ink, #1f2a27);
}

/* profil: forma u kartici do 760 px */
.content-wrapper #UserProfileRow
{
	max-width: 760px;
	margin: 0 0 24px;
	padding: 24px 12px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 1px 3px rgba(23, 38, 46, 0.04);
}

.content-wrapper #UserProfileRow > form,
.content-wrapper #UserProfileRow > form > div
{
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
}


/* =====================================================================
   10. KOMENTARI I OCENE (commentapprovalshow, textcommentshow, ...ratingshow, ...visitshow)
   ===================================================================== */

/* 10.1 Komentar u listi komentara teksta/pojma: kartica bez teške senke; linija između je razmak */
.content-wrapper .comment-row,
.content-wrapper .card-comment
{
	margin: 0 0 12px;
	padding: 16px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff) !important;
	box-shadow: none;
	font-weight: 400 !important;
}

.content-wrapper #searchResults > .col-xs-12 > hr,
.content-wrapper .comment-row + hr
{
	display: none;
}

.content-wrapper .comment-row .usersName
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .comment-row .usersName img
{
	margin: 0 !important;
}

.content-wrapper .comment-row .commentorName
{
	font-weight: 600;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .comment-row .comment-date
{
	font-size: 13px;
	font-weight: 400;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .comment-row .comment-reply-title
{
	margin: 10px 0 4px;
	padding: 0;
	font-size: 15px;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .comment-row .comment-body
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	white-space: pre-line;
	color: var(--es-ink, #1f2a27);
}

.content-wrapper .comment-row > [class*="col"] > .row
{
	margin-left: 0;
	margin-right: 0;
}

.content-wrapper .block-title.comments,
.content-wrapper h3.sub-title
{
	margin: 0 0 16px !important;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: var(--es-ink, #1f2a27);
}

/* podnaslov (naziv teksta) na stranama komentara, ocena i poseta: link ka tekstu, ne drugi h1 */
.content-wrapper h3.sub-title[data-interaction]
{
	margin-top: -16px;
	font-size: 17px;
	color: var(--button-color);
	cursor: pointer;
}

/* 10.2 Ocena u listi: zvezdice u boji, siva neaktivna */
.content-wrapper .rating-in-list
{
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.content-wrapper .rating-button.gold,
.content-wrapper .rating-button .gold
{
	color: var(--es-warning, #8a5a00);
}

.content-wrapper .rating-button.gray,
.content-wrapper .rating-button .gray
{
	color: var(--es-border, #dbe2df);
}

.content-wrapper .ratingPaginator
{
	margin-left: 0;
}

/* 10.3 Red pretrage na stranama ocena i poseta (raspon datuma, pretraga, "+"): širina po sadržaju;
   na telefonu "+" prelazi u novi red kad ne staje */
.content-wrapper .SearchDiv:has(#text-edit-btn)
{
	width: auto;
}

.content-wrapper .SearchDiv:has(#text-edit-btn) .input-group
{
	width: auto;
	flex-wrap: nowrap;
	align-items: center;
}

@media (max-width: 575px)
{
	.content-wrapper .SearchDiv:has(#text-edit-btn) .input-group
	{
		flex-wrap: wrap;
		row-gap: 8px;
	}
}


/* =====================================================================
   11. JAVNI DEO: samo doterivanje (bez promene rasporeda i karaktera strane)
   Javne strane nemaju .content-wrapper; sva pravila oblasti počinju sa
   body:not(:has(.content-wrapper)) (0,1,1), da ne diraju admin deo.
   Serifni tekst članaka i boje usluga na početnoj ostaju; usklađuju se dugmad, polja, kartice,
   naslovi bez klase i slovni paginator.
   ===================================================================== */

/* 11.1 Zaglavlje: aktivna stavka menija i polja u traci zaobljena kao u admin delu.
   #nav u selektoru (1,2,1): page.min.css #nav .nav-link[href*="softver"] (1,2,0) daje 4 px. */
body:not(:has(.content-wrapper)) #nav .nav-link
{
	border-radius: 6px;
}

/* Lista sa pretragom: dugme za novi unos je u redu sa naslovom, odvojeno od polja pretrage (Faza 6, D4) */
.page-title-row
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: 1rem;
}

.page-title-row h1,
.content-wrapper .content .page-title-row h1
{
	margin-bottom: 0;
}

/* Gornji red (Faza 6, D5): razmak od ivice ekrana, boja menija i na tamnim skinovima (nasledjena boja
   tela strane se tu ne vidi), a desni meni kao red, ne kao kolona */
.top-bar
{
	padding: 8px 0;
	color: var(--link-color);
}

.top-bar .navbar-nav
{
	flex-direction: row;
	align-items: center;
	gap: .75rem;
	margin: 0;
}

.top-bar .navbar-nav > .nav-item > .nav-link
{
	padding: 0;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
}

/* "Prijavi se" i "Registruj se": na sirem ekranu tekst; ispod 576 px tekst ne staje u red, pa se vidi ikonica, a tekst
   ostaje citacu ekrana. Mali meni kruga nije .navbar-nav, pa ga ova pravila ne diraju. */
.top-bar .navbar-nav > .nav-item > .nav-link[data-title] > i
{
	display: none;
}

@media (max-width: 575.98px)
{
	.top-bar .navbar-nav > .nav-item > .nav-link[data-title] > i
	{
		display: inline-block;
		font-size: 1.1rem;
	}

	.top-bar .navbar-nav > .nav-item > .nav-link[data-title] > .menu-option-text
	{
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Mali meni na krugu sa inicijalima (D6), na javnim stranama i na Mojoj strani */
.top-bar .dropdown-menu,
.main-header .navbar-right .dropdown-menu
{
	min-width: 12rem;
	padding: .25rem 0;
	border: 1px solid var(--es-border, #dbe2df);
	/* !important: user-page.css .dropdown-menu.show daje uglove bez zaobljenja */
	border-radius: 8px !important;
	outline: none;
	background-color: #fff !important;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;
}

/* !important i .admin-navbar: user-page.css boji linkove zaglavlja svetlo, sa !important */
.top-bar .dropdown-menu .nav-link,
.main-header .admin-navbar .navbar-right .dropdown-menu .nav-link
{
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	border-radius: 0;
	color: #303836 !important;
	white-space: nowrap;
}

.top-bar .dropdown-menu .nav-link:hover,
.main-header .admin-navbar .navbar-right .dropdown-menu .nav-link:hover
{
	background-color: var(--es-surface-alt, #f7f9f8);
}

.top-bar .dropdown-menu .menu-option-text,
.main-header .navbar-right .dropdown-menu .menu-option-text
{
	display: inline;
}

.top-bar .dropdown-menu .nav-link > i,
.main-header .navbar-right .dropdown-menu .nav-link > i
{
	width: 1.25rem;
	margin: 0;
	text-align: center;
}

/* Moja strana do 768 px: krug je u meniju iza tri crte, pa se mali meni otvara u toku, ispod kruga */
@media (max-width: 768px)
{
	.main-header .navbar-right .dropdown-menu
	{
		position: static !important;
		transform: none !important;
	}
}

/* Inicijali korisnika bez slike: krug 36 px u obrnutim bojama menija, kao u admin zaglavlju */
#nav .initials,
.top-bar .initials
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--link-color);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--nav-color);
}

body:not(:has(.content-wrapper)) select.language-select,
body:not(:has(.content-wrapper)) header .form-control,
body:not(:has(.content-wrapper)) header input[type="search"]
{
	border-radius: 6px;
}

/* 11.2 Naslovi bez klase (pretplata, plaćanje) bili su u fontu Times (page.min.css daje SansSerif
   samo .page-title); svi naslovi strane u istom pismu kao .page-title. Strana 404 zadržava svoj izgled. */
body:not(:has(.content-wrapper)) h1:not(.not-found h1)
{
	font-family: SansSerif, "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
}

/* 11.3 Dugmad. Bootstrap plava .btn-primary i crna .btn-dark (Prijava, Registracija) u glavnoj boji
   skina; sva dugmad istog oblika (40 px, 6 px, polumasno). */
body:not(:has(.content-wrapper)) .btn
{
	min-height: 40px;
	padding: 8px 18px;
	border-radius: 6px;
	font-weight: 600;
	line-height: 22px;
}

body:not(:has(.content-wrapper)) .btn.btn-sm
{
	min-height: 32px;
	padding: 4px 12px;
}

body:not(:has(.content-wrapper)) .btn.btn-primary,
body:not(:has(.content-wrapper)) .btn.btn-dark
{
	border-color: var(--button-color);
	background-color: var(--button-color);
	color: var(--white);
}

body:not(:has(.content-wrapper)) .btn.btn-primary:hover,
body:not(:has(.content-wrapper)) .btn.btn-primary:focus,
body:not(:has(.content-wrapper)) .btn.btn-dark:hover,
body:not(:has(.content-wrapper)) .btn.btn-dark:focus
{
	border-color: color-mix(in srgb, var(--button-color) 85%, black);
	background-color: color-mix(in srgb, var(--button-color) 85%, black);
	color: var(--white);
}

body:not(:has(.content-wrapper)) .btn.btn-secondary,
body:not(:has(.content-wrapper)) .btn.btn-outline-secondary,
body:not(:has(.content-wrapper)) .btn.btn-default
{
	border-color: var(--es-border-strong, #7d928c);
	background-color: var(--es-surface, #ffffff);
	color: var(--es-ink, #1f2a27);
}

body:not(:has(.content-wrapper)) .btn.btn-secondary:hover,
body:not(:has(.content-wrapper)) .btn.btn-outline-secondary:hover,
body:not(:has(.content-wrapper)) .btn.btn-default:hover
{
	border-color: var(--button-color);
	background-color: var(--es-brand-soft, #eef4f2);
	color: var(--es-ink, #1f2a27);
}

body:not(:has(.content-wrapper)) .btn:focus-visible
{
	outline: 2px solid var(--button-color);
	outline-offset: 2px;
	box-shadow: none;
}

/* 11.4 Polja (kontakt, softver, prijava, registracija, obaveštenje o novom tekstu, komentar):
   40 px, ivica i fokus kao u admin delu */
body:not(:has(.content-wrapper)) main .form-control,
body:not(:has(.content-wrapper)) main .form-select,
body:not(:has(.content-wrapper)) .form-control.loginForm,
body:not(:has(.content-wrapper)) form .form-control,
body:not(:has(.content-wrapper)) form .form-select
{
	min-height: 40px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 6px;
	background-color: var(--es-surface, #ffffff);
	font-size: 15px;
	color: var(--es-ink, #1f2a27);
}

body:not(:has(.content-wrapper)) form .form-control:focus,
body:not(:has(.content-wrapper)) form .form-select:focus
{
	border-color: var(--button-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-color) 25%, transparent);
}

/* zaključan padajući meni: svetlija strelica, da se vidi da ne radi */
.form-select:disabled
{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3ccc8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* zaključana polja (probni test): siva kao u admin delu, da ne izgledaju kao da se mogu menjati */
body:not(:has(.content-wrapper)) form .form-control:disabled,
body:not(:has(.content-wrapper)) form .form-select:disabled,
.content-wrapper form .form-control:disabled,
.content-wrapper form .form-select:disabled
{
	background-color: #e3e7e5 !important;
	border-color: #c3ccc8 !important;
	color: #56645f;
	-webkit-text-fill-color: #56645f;
	opacity: 1;
	cursor: not-allowed;
}

body:not(:has(.content-wrapper)) form .form-control.is-invalid,
body:not(:has(.content-wrapper)) form .form-control.error
{
	border-color: var(--es-danger, #b0412f);
}

body:not(:has(.content-wrapper)) form .text-danger,
body:not(:has(.content-wrapper)) form label.error
{
	font-size: 13px !important;
	color: var(--es-danger, #b0412f) !important;
}

/* "Zapamti me": checkbox i tekst sa razmakom (bili su zalepljeni); bez Bootstrap uvlake od 1.5em (checkbox ovde nema
   negativnu marginu), pa je checkbox poravnat sa poljem iznad */
body:not(:has(.content-wrapper)) .form-check
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 0;
}

body:not(:has(.content-wrapper)) .form-check-input
{
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--es-border-strong, #7d928c);
}

body:not(:has(.content-wrapper)) .form-check-input:checked
{
	border-color: var(--button-color);
	background-color: var(--button-color);
}

/* veze ispod forme prijave (zaboravljena lozinka, registracija): podvučene i razmaknute, da se vide posle dugmeta */
body:not(:has(.content-wrapper)) #login a:not(.btn),
body:not(:has(.content-wrapper)) #registration a:not(.btn)
{
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--button-color);
}

body:not(:has(.content-wrapper)) #login a:not(.btn):hover,
body:not(:has(.content-wrapper)) #registration a:not(.btn):hover
{
	text-decoration-thickness: 2px;
}

body:not(:has(.content-wrapper)) #loginForm .text-center:has(> a:not(.btn))
{
	margin-top: 10px;
}

/* X u poruci (npr. pogrešni podaci na prijavi): mali, u boji teksta poruke, gornji desni ugao, bez okvira i pozadine -
   isto kao .content-wrapper .alert .close-button na stranama za prijavljene */
body:not(:has(.content-wrapper)) .alert:has(> .close-button)
{
	padding-right: 40px;
}

body:not(:has(.content-wrapper)) .alert .close-button
{
	position: absolute;
	top: 6px;
	right: 8px;
	padding: 2px 6px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	opacity: .7;
}

body:not(:has(.content-wrapper)) .alert .close-button:hover
{
	opacity: 1;
}

/* 11.5 Kartice (bočna kolona, tekstovi na početnoj, softver, kontakt, metode): zaobljenje 12 px i
   blaža senka, isti oblik kao kartice admin dela */
body:not(:has(.content-wrapper)) .card,
body:not(:has(.content-wrapper)) .soft-card,
body:not(:has(.content-wrapper)) .contact-card,
body:not(:has(.content-wrapper)) .method-card,
body:not(:has(.content-wrapper)) .box-texts,
body:not(:has(.content-wrapper)) .box-box
{
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 2px 8px rgba(23, 38, 46, 0.06);
	overflow: hidden;
}

body:not(:has(.content-wrapper)) .card > .card-img-top
{
	border-radius: 0;
}

/* Naslov "Za poslovne korisnike" istaknut bojom i debljinom slova. Boja dugmeta zatamnjena 15%:
   čista boja dugmeta na pozadini kartice (#eaf1ee) ima kontrast ispod 4,5:1 u 4 od 16 skinova. */
.softver-promo-card .card-title
{
	color: color-mix(in srgb, var(--button-color) 85%, black);
	font-weight: 600;
}

body:not(:has(.content-wrapper)) .box-texts:hover,
body:not(:has(.content-wrapper)) .box-box:hover
{
	box-shadow: 0 6px 20px rgba(23, 38, 46, 0.12);
}

/* 11.6 Pretplata (javna strana): plan kao kartica, cena istaknuta, lista sa kvačicama */
body:not(:has(.content-wrapper)) .subscriptionPlan
{
	max-width: 640px;
	padding: 24px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 1px 2px rgba(23, 38, 46, 0.06), 0 2px 8px rgba(23, 38, 46, 0.06);
}

body:not(:has(.content-wrapper)) .subscriptionPlan h1
{
	margin: 0 0 8px;
	padding: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 34px;
}

body:not(:has(.content-wrapper)) ul.subscriptionPlanFeatures
{
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

body:not(:has(.content-wrapper)) ul.subscriptionPlanFeatures li
{
	position: relative;
	padding: 6px 0 6px 26px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
}

body:not(:has(.content-wrapper)) ul.subscriptionPlanFeatures li::before
{
	content: "\f00c";
	position: absolute;
	left: 2px;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--es-success, #2f7a52);
}

body:not(:has(.content-wrapper)) p.subscriptionPrice
{
	margin: 16px 0;
	font-family: SansSerif, "Source Sans 3", system-ui, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
	font-variant-numeric: tabular-nums;
	color: var(--es-ink, #1f2a27);
}

/* 11.6a Paketi pretplate: strana šira od jednog plana, paketi kao kartice u mreži (4 / 2 / 1 u redu), dugme na dnu
   kartice; neaktivan paket (vidi ga samo Vlasnik) bled, sa oznakom "Nije u ponudi" */
body:not(:has(.content-wrapper)) .subscriptionPlan:has(.subscriptionPlanList)
{
	max-width: 1120px;
}

body:not(:has(.content-wrapper)) .subscriptionPlanList
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-top: 16px;
}

@media (min-width: 576px)
{
	body:not(:has(.content-wrapper)) .subscriptionPlanList
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px)
{
	body:not(:has(.content-wrapper)) .subscriptionPlanList
	{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 12px;
	background: var(--es-surface, #ffffff);
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard h2.subscriptionPlanName
{
	margin: 0 0 4px;
	padding: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard p.subscriptionPlanDuration
{
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--es-ink-muted, #56645f);
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard p.subscriptionPlanCardDescription
{
	flex-grow: 1;
	margin: 0;
	font-size: 15px;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard p.subscriptionPrice
{
	margin: 16px 0 12px;
	font-size: 24px;
	line-height: 28px;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard .btn
{
	width: 100%;
	margin-top: 8px;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard p.subscriptionPlanInactiveLabel
{
	display: none;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanInactive
{
	border-style: dashed;
	opacity: 0.7;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanInactive p.subscriptionPlanInactiveLabel
{
	display: block;
	margin: 0;
	font-weight: 600;
	color: var(--es-danger, #b0412f);
}

body:not(:has(.content-wrapper)) p.checkoutPlan
{
	margin: 0 0 16px;
}

/* 11.7 Plaćanje: podaci za uplatu kao tabela sa tankim linijama, poruka zaobljena */
body:not(:has(.content-wrapper)) table.checkoutDetails
{
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 8px;
	overflow: hidden;
}

body:not(:has(.content-wrapper)) table.checkoutDetails td,
body:not(:has(.content-wrapper)) table.checkoutDetails th
{
	padding: 8px 12px;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	font-variant-numeric: tabular-nums;
}

body:not(:has(.content-wrapper)) table.checkoutDetails tr:last-child > *
{
	border-bottom: 0;
}

body:not(:has(.content-wrapper)) .checkoutQr img
{
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 8px;
	padding: 8px;
	background: var(--es-surface, #ffffff);
}

body:not(:has(.content-wrapper)) .alert,
body:not(:has(.content-wrapper)) #message.alert
{
	border-radius: 8px;
}

/* 11.8 Slovni paginator rečnika i tekstova: slova kao mala dugmad, kao u admin delu (2.7) */
body:not(:has(.content-wrapper)) .letter-paginator
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 16px 0;
}

body:not(:has(.content-wrapper)) .letter-paginator-page
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	margin: 0;
	padding: 0 6px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 6px;
	background: var(--es-surface, #ffffff);
	font-size: 14px;
	font-weight: 600;
	color: var(--es-ink, #1f2a27);
	cursor: pointer;
}

body:not(:has(.content-wrapper)) .letter-paginator-page:hover
{
	border-color: var(--button-color);
	color: var(--button-color);
}

body:not(:has(.content-wrapper)) .letter-paginator-page.active
{
	border-color: var(--button-color);
	background: var(--button-color);
	color: var(--white);
}

/* paginator liste (rezultati pretrage, tekstovi) */
body:not(:has(.content-wrapper)) .PaginatorPage
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 6px;
	text-decoration: none;
}

body:not(:has(.content-wrapper)) .PaginatorPage.Active
{
	border-color: var(--button-color);
	background-color: var(--button-color) !important;
	color: var(--white);
}

/* 11.9 Tekst i pojam: alatke za deljenje i štampu, srodni tekstovi, ocena - zaobljeno i tiše */
body:not(:has(.content-wrapper)) .text-toolbar .btn,
body:not(:has(.content-wrapper)) .text-toolbar button
{
	border-radius: 6px;
}

body:not(:has(.content-wrapper)) .related-row
{
	border-radius: 8px;
}

body:not(:has(.content-wrapper)) .related-row:hover
{
	background: var(--es-surface-alt, #f7f9f8);
}

/* 11.10 Telefon: dugmad u formama preko cele širine; uklonjeni uzroci vodoravnog pomeranja strane
   (postoje i bez redizajna): gornja traka ima margin-left: 15px / margin-right: -15px, mapa na početnoj
   je široka 471 px, dugme na strani 404 je šire od ekrana */
@media (max-width: 575px)
{
	body:not(:has(.content-wrapper)) .top-bar > .container
	{
		margin-left: auto !important;
		margin-right: auto !important;
		flex-wrap: wrap;
	}

	body:not(:has(.content-wrapper)) #map
	{
		max-width: 100%;
		overflow: hidden;
	}

	/* page.not.found.css: .not-found { margin-left: 130px }, dugme float: left sa left: 50% i
	   margin-left: -130px; na telefonu blok bez pomaka, dugme centrirano u toku teksta */
	body:not(:has(.content-wrapper)) .not-found
	{
		margin-left: 0;
		text-align: center;
	}

	body:not(:has(.content-wrapper)) .not-found a.button
	{
		display: inline-block;
		float: none;
		left: auto;
		max-width: 100%;
		margin: 2em 0 0;
		white-space: normal;
	}

	body:not(:has(.content-wrapper)) .not-found h1
	{
		font-size: 8em;
	}

	body:not(:has(.content-wrapper)) form .btn[type="submit"],
	body:not(:has(.content-wrapper)) .subscriptionPlanContinue
	{
		width: 100%;
	}
}


/* 11.11 Pretraga u zaglavlju (sve javne strane, sve širine): polje kao ostala polja (40 px, ivica
   --es-border-strong, 6 px), lupa unutar polja. page.min.css ima ID pravila #search, #search-button,
   #search-button:hover/:focus (1,0,0)-(1,1,0) i .search-input sa crnom ivicom; zato #search-form u
   selektoru (2,1,1)-(2,2,1). Ivicu nosi omotač .search-input, polje i dugme su providni. */
body:not(:has(.content-wrapper)) #search-form .search-input
{
	flex-wrap: nowrap;
	height: 40px;
	border: 1px solid var(--es-border-strong, #7d928c);
	border-radius: 6px;
	background-color: var(--es-surface, #ffffff);
	overflow: hidden;
}

body:not(:has(.content-wrapper)) #search-form .search-input:focus-within
{
	border-color: var(--button-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-color) 25%, transparent);
}

body:not(:has(.content-wrapper)) #search-form #search
{
	height: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-size: 15px;
	color: var(--es-ink, #1f2a27);
}

body:not(:has(.content-wrapper)) #search-form #search::placeholder
{
	color: var(--es-ink-muted, #5b6b66);
}

body:not(:has(.content-wrapper)) #search-form .input-group-append
{
	display: flex;
}

body:not(:has(.content-wrapper)) #search-form #search-button,
body:not(:has(.content-wrapper)) #search-form #search-button:focus
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 38px;
	min-height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--es-ink-muted, #5b6b66);
}

body:not(:has(.content-wrapper)) #search-form #search-button:hover
{
	background-color: var(--es-brand-soft, #eef4f2);
	color: var(--button-color);
}

body:not(:has(.content-wrapper)) #search-form #search-button:focus-visible
{
	outline: 2px solid var(--button-color);
	outline-offset: -2px;
}

/* sklopljen meni (do 991 px): pretraga u svom redu ispod logotipa, poravnata sa dugmetom menija,
   sa razmakom do donje ivice trake (page.min.css daje padding-left: 15px i nijedan razmak ispod) */
@media (max-width: 991.98px)
{
	body:not(:has(.content-wrapper)) #nav #search-form
	{
		padding: 4px 0 12px;
	}
}

/* 11.12 Rezultat probnog testa (/rezultat-probnog-testa, gost): kartice, tabela i statusi su zajednicki sa admin delom (0.0);
   ovde samo ono cega u admin delu nema - naslovi grupa kartica i poziv na pretplatu ispod rezultata. */
body:not(:has(.content-wrapper)) .test-result .test-result-group-title
{
	margin: 8px 0 12px;
	font-size: 22px;
}

body:not(:has(.content-wrapper)) .test-result .test-result-full-version
{
	padding: 20px;
	border: 1px solid color-mix(in srgb, var(--button-color) 35%, var(--es-border));
	border-radius: 12px;
	background: var(--es-brand-soft);
}

body:not(:has(.content-wrapper)) .test-result .test-result-full-version h2
{
	margin: 0 0 12px;
	font-size: 22px;
}


/* 11.13 Prijava i registracija preko spoljnog naloga: Google dugme po Google pravilima (bela pozadina, siva ivica 1 px,
   tamni tekst, "G" logo levo, visina 40 px), Facebook dugme istog oblika, pa linija sa "ili" pre forme */
body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginGoogle,
body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginFacebook
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid #747775;
	border-radius: 4px;
	background: #ffffff;
	font-family: Roboto, "Source Sans 3", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #1f1f1f;
	text-decoration: none;
}

body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginGoogle:hover,
body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginGoogle:focus-visible
{
	background: #f2f2f2;
	color: #1f1f1f;
}

/* Facebook dugme po Facebook pravilima: plava pozadina #1877F2, beli tekst i beli "f" logo; razmak izmedju dugmadi */
/* :is(#login, #registration) (1,3,2) da bi boje dugmadi pobedile "#login a:not(.btn)" (1,2,2), boju teksta linkova u formi */
body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginFacebook
{
	border-color: #1877f2;
	background: #1877f2;
	color: #ffffff;
}

body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginFacebook:hover,
body:not(:has(.content-wrapper)) :is(#login, #registration) a.externalLoginFacebook:focus-visible
{
	border-color: #166fe5;
	background: #166fe5;
	color: #ffffff;
}

body:not(:has(.content-wrapper)) .externalLoginButtons a + a
{
	margin-top: 12px;
}

body:not(:has(.content-wrapper)) .externalLoginLogo
{
	flex: 0 0 20px;
}

body:not(:has(.content-wrapper)) .externalLoginOr
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--es-ink-muted, #56645f);
}

/* pre presecanja trake (gost bez dozvole za google-prijava) mesto za dugmad je prazno - bez praznog reda iznad forme */
body:not(:has(.content-wrapper)) div:has(> .externalLoginSlot:empty)
{
	display: none !important;
}

body:not(:has(.content-wrapper)) .externalLoginOr::before,
body:not(:has(.content-wrapper)) .externalLoginOr::after
{
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid var(--es-border, #dbe2df);
}

/* =====================================================================
   12. ZAJEDNIČKO (admin deo i dijalozi; javni deo ima svoja pravila u oblasti 11)
   ===================================================================== */

/* 12.1 Dugmad koja pilot nije pokrio. Pravilo: jedno glavno dugme (glavna boja), ostala obrubljena;
   brisanje i ukidanje obrubljeno crveno. Dugme pretrage (role:search-trigger) je izuzeto: ono je
   uvek glavno (2.2), bez obzira na klasu boje u HTML-u. user-page.css: .content-wrapper button[type="button"] (0,2,1)
   !important (boja bočne trake), .save / .cancel (0,1,0) !important -> (0,3,0) !important */
.content-wrapper .btn.save:not(.btn-success),
.content-wrapper .btn.skin
{
	border-color: var(--button-color) !important;
	background-color: var(--button-color) !important;
	color: var(--white) !important;
}

.content-wrapper .btn.save:not(.btn-success):hover,
.content-wrapper .btn.skin:hover
{
	border-color: color-mix(in srgb, var(--button-color) 85%, black) !important;
	background-color: color-mix(in srgb, var(--button-color) 85%, black) !important;
}

.content-wrapper .btn.cancel,
.content-wrapper .btn.btn-warning:not([data-interaction*="role:search-trigger"]),
.content-wrapper .btn.btn-dark:not([data-interaction*="role:search-trigger"]),
.content-wrapper .btn.btn-info:not([data-interaction*="role:search-trigger"]),
.content-wrapper .btn.btn-light:not([data-interaction*="role:search-trigger"]),
.content-wrapper .btn.btn-outline-primary:not([data-interaction*="role:search-trigger"]),
.content-wrapper .btn.btn-outline-dark:not([data-interaction*="role:search-trigger"]),
.content-wrapper .btn.btn-outline-info:not([data-interaction*="role:search-trigger"])
{
	border-color: var(--es-border-strong, #7d928c) !important;
	background-color: var(--es-surface, #ffffff) !important;
	color: var(--es-ink, #1f2a27) !important;
}

.content-wrapper .btn.btn-outline-primary
{
	color: var(--button-color) !important;
}

.content-wrapper .btn.cancel:hover,
.content-wrapper .btn.btn-warning:not([data-interaction*="role:search-trigger"]):hover,
.content-wrapper .btn.btn-dark:not([data-interaction*="role:search-trigger"]):hover,
.content-wrapper .btn.btn-info:not([data-interaction*="role:search-trigger"]):hover,
.content-wrapper .btn.btn-light:not([data-interaction*="role:search-trigger"]):hover,
.content-wrapper .btn.btn-outline-primary:not([data-interaction*="role:search-trigger"]):hover,
.content-wrapper .btn.btn-outline-dark:not([data-interaction*="role:search-trigger"]):hover,
.content-wrapper .btn.btn-outline-info:not([data-interaction*="role:search-trigger"]):hover
{
	border-color: var(--button-color) !important;
	background-color: var(--es-brand-soft, #eef4f2) !important;
}

.content-wrapper .btn.btn-danger:not(.btn-sm),
.content-wrapper .btn.btn-outline-danger,
.content-wrapper .btn.btn-outline-warning
{
	border-color: var(--es-danger, #b0412f) !important;
	background-color: var(--es-surface, #ffffff) !important;
	color: var(--es-danger, #b0412f) !important;
}

.content-wrapper .btn.btn-outline-warning
{
	border-color: var(--es-warning, #8a5a00) !important;
	color: var(--es-warning, #8a5a00) !important;
}

.content-wrapper .btn.btn-danger:not(.btn-sm):hover,
.content-wrapper .btn.btn-outline-danger:hover
{
	background-color: var(--es-danger-soft, #f9e6e2) !important;
}

.content-wrapper .btn.btn-outline-warning:hover
{
	background-color: var(--es-warning-soft, #fcf1da) !important;
}

/* dugme-link: tekst u boji linka, bez okvira */
.content-wrapper .btn.btn-link,
body .ess-dialog .btn.btn-link
{
	min-height: 0;
	padding: 4px 8px !important;
	border: 0 !important;
	background: transparent !important;
	font-weight: 600;
	text-decoration: none;
	color: var(--button-color) !important;
}

.content-wrapper .btn.btn-link:hover,
body .ess-dialog .btn.btn-link:hover
{
	text-decoration: underline;
}

/* ikonica u dugmetu ima boju teksta dugmeta (user-page.css zakucava belu na pojedinim ikonicama) */
.content-wrapper .btn i,
.content-wrapper .btn .fa
{
	color: inherit !important;
}

/* 12.2 Poruke: alert-secondary i notifikacija (pilot 5.3 ima ostale vrste) */
.content-wrapper .alert.alert-secondary
{
	border-color: var(--es-border, #dbe2df) !important;
	background-color: var(--es-surface-alt, #f7f9f8) !important;
	color: var(--es-ink, #1f2a27) !important;
}

body .ess-dialog .alert
{
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
}

/* poruke u dijalogu (rešenje, "pokušajte ponovo", hint): ista mirna forma, vrsta poruke samo po traci levo.
   Bootstrap/AdminLTE .alert-warning daje punu narandžastu sa belim slovima (0,1,0) !important -> (0,3,1) !important */
body .ess-dialog .alert.alert-info,
body .ess-dialog .alert.alert-warning,
body .ess-dialog .alert.alert-secondary
{
	border: 1px solid var(--es-border, #dbe2df) !important;
	border-left: 4px solid var(--button-color) !important;
	background-color: var(--es-surface-alt, #f7f9f8) !important;
	color: var(--es-ink, #1f2a27) !important;
}

body .ess-dialog .alert.alert-warning
{
	border-left-color: var(--es-warning, #8a5a00) !important;
}

/* resenje u dijalogu testa: tacan odgovor zelen, netacan crven */
body .ess-dialog .alert.alert-success,
body .ess-dialog .alert.alert-danger
{
	border: 1px solid var(--es-border, #dbe2df) !important;
	color: #1f2a27 !important;
}

body .ess-dialog .alert.alert-success
{
	border-left: 4px solid #2e7d4f !important;
	background-color: #e6f4ea !important;
}

body .ess-dialog .alert.alert-danger
{
	border-left: 4px solid #b3261e !important;
	background-color: #fbe9e7 !important;
}

body .ess-dialog .alert.alert-secondary
{
	border-left-color: var(--es-border-strong, #7d928c) !important;
}

/* link u poruci dijaloga ("Više pročitaj na <naslov teksta>"): dashboard.css .alert a { color: #fff } (0,1,1) je beo na
   svetloj poruci -> (0,2,2), boja dugmadi skina */
body .ess-dialog .alert a
{
	color: var(--button-color);
	text-decoration: underline;
}

/* plutajuća notifikacija (notifier.js) */
body .notifier-note
{
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 8px;
	background: var(--es-surface, #ffffff);
	box-shadow: 0 8px 24px rgba(23, 38, 46, 0.16);
	font-size: 14px;
	color: var(--es-ink, #1f2a27);
}

/* 12.3 Bedževi: neutralni bedž (Odustao, Objavljeno, Isteklo vreme) svetao, ne sivo-beli; okvir na pola puta do
   --es-border-strong, da se bedž odvaja od reda (pozadina bedža = pozadina reda pod mišem).
   Bootstrap .bg-secondary (0,1,0) !important -> (0,3,0) !important */
.content-wrapper .badge.bg-secondary,
body .ess-dialog .badge.bg-secondary
{
	border: 1px solid color-mix(in srgb, var(--es-border-strong, #7d928c) 50%, var(--es-border, #dbe2df));
	background-color: var(--es-surface-alt, #f7f9f8) !important;
	color: var(--es-ink-muted, #56645f) !important;
}

/* 12.4 Naslovi: naslov strane levo u admin delu (na nekim stranama je centriran), podnaslovi kao h2 */
.content-wrapper .content h1.text-center
{
	text-align: left !important;
}

.content-wrapper h2.block-title,
.content-wrapper h3.box-title:not(.dashboard-widget-box h3)
{
	margin: 24px 0 12px;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: var(--es-ink, #1f2a27);
}

/* 12.5 Tabele u .table-responsive ne izbacuju stranu u širinu; .table-condensed kao .table-sm */
.content-wrapper .table-responsive
{
	max-width: 100%;
	overflow-x: auto;
}

.content-wrapper .table.table-condensed > :not(caption) > * > *
{
	padding: 6px 10px;
}

/* 11.14 Plaćanje preko banke (UniCredit): dugmad "Plati karticom" i "Plati IPS-om", strana ishoda plaćanja;
   admin: dnevnik plaćanja i harmonika sa dnevnikom pretplate na pregledu pretplata */
body:not(:has(.content-wrapper)) .checkoutBankButtons
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
}

body:not(:has(.content-wrapper)) .checkoutBankButtons .btn i
{
	margin-right: 6px;
}

body:not(:has(.content-wrapper)) .paymentOutcome
{
	max-width: 720px;
	margin: 0 0 24px;
}

body:not(:has(.content-wrapper)) .paymentOutcome p.paymentOutcomeText
{
	padding: 12px 16px;
	border-radius: 8px;
	background-color: var(--es-surface-alt, #f7f9f8);
}

body:not(:has(.content-wrapper)) .paymentOutcomePaid p.paymentOutcomeText
{
	background-color: var(--es-success-soft);
	color: var(--es-success);
}

body:not(:has(.content-wrapper)) .paymentOutcomeFailed p.paymentOutcomeText
{
	background-color: var(--es-danger-soft);
	color: var(--es-danger);
}

body:not(:has(.content-wrapper)) .paymentOutcome p.paymentOutcomePlan
{
	overflow-wrap: anywhere;
}

@media (max-width: 575px)
{
	body:not(:has(.content-wrapper)) .checkoutBankButtons .btn
	{
		width: 100%;
	}
}

.content-wrapper .subscriptionPaymentLogBox.hidden
{
	display: none;
}

.content-wrapper .subscriptionPaymentLogBox
{
	margin: 4px 0 12px;
	padding: 8px 12px;
	border: 1px solid var(--es-border, #dbe2df);
	border-radius: 8px;
	background-color: var(--es-surface-alt, #f7f9f8);
}

.content-wrapper .subscriptionPaymentLog > .row.header-row
{
	font-weight: 600;
	border-bottom: 1px solid var(--es-border, #dbe2df);
}

.content-wrapper .paymentLogFailed
{
	color: var(--es-danger, #b0412f);
	font-weight: 600;
}

.content-wrapper .paymentLogDetail
{
	overflow-wrap: anywhere;
}

/* harmonika je unutar .wide-list: redovi su kartice i između 992 i 1199 px (2.12), pa se i njeno zaglavlje krije */
@media (min-width: 992px) and (max-width: 1199px)
{
	.content-wrapper .wide-list .subscriptionPaymentLog > .row.header-row
	{
		display: none;
	}
}

/* 11.15 Saglasnost pre plaćanja i prihvatanje uslova pri registraciji: polje i tekst u istom redu, tekst se prelama uz
   polje (ne ispod njega) */
body:not(:has(.content-wrapper)) .checkoutConsent .form-check,
body:not(:has(.content-wrapper)) #registration .acceptTerms
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-left: 0;
	margin: 12px 0;
}

body:not(:has(.content-wrapper)) .checkoutConsent .form-check-input,
body:not(:has(.content-wrapper)) #registration .acceptTerms .form-check-input
{
	float: none;
	flex: 0 0 auto;
	margin: 0.25em 0 0;
}

body:not(:has(.content-wrapper)) .checkoutConsent p.checkoutConsentTerms
{
	margin: 0 0 16px 28px;
}

/* 11.16 Put do pretplate (Faza 3): narandzasta dugmad za kupovinu (boja kartice Testovi znanja na pocetnoj), dugmad na
   strani Testovi znanja, kartice paketa centrirane i preporuceni paket istaknut, link ka probnom testu, poziv na
   registraciju posle probnog testa. Selektori (0,3,1)-(0,5,1) pobedjuju 11.3 (0,3,1) jer dolaze kasnije ili imaju klasu vise. */
body:not(:has(.content-wrapper)) .knowledge-tests-actions
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
}

body:not(:has(.content-wrapper)) .knowledge-tests-actions .btn,
body:not(:has(.content-wrapper)) .knowledge-tests-actions .btn:hover
{
	text-decoration: none;
}

body:not(:has(.content-wrapper)) .btn.knowledge-tests-subscribe,
body:not(:has(.content-wrapper)) .btn.test-result-register,
body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanRecommended .btn.subscriptionPlanContinue
{
	border-color: var(--knowledge-tests-background-color, #e07b39);
	background-color: var(--knowledge-tests-background-color, #e07b39);
	color: var(--white, #ffffff);
}

body:not(:has(.content-wrapper)) .btn.knowledge-tests-subscribe:hover,
body:not(:has(.content-wrapper)) .btn.knowledge-tests-subscribe:focus,
body:not(:has(.content-wrapper)) .btn.test-result-register:hover,
body:not(:has(.content-wrapper)) .btn.test-result-register:focus,
body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanRecommended .btn.subscriptionPlanContinue:hover,
body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanRecommended .btn.subscriptionPlanContinue:focus
{
	border-color: #c96a2c;
	background-color: #c96a2c;
	color: var(--white, #ffffff);
}

body:not(:has(.content-wrapper)) .btn.knowledge-tests-try
{
	border-color: var(--button-color);
	background-color: var(--es-surface, #ffffff);
	color: var(--button-color);
}

body:not(:has(.content-wrapper)) .btn.knowledge-tests-try:hover,
body:not(:has(.content-wrapper)) .btn.knowledge-tests-try:focus
{
	background-color: var(--es-brand-soft, #eef4f2);
	color: var(--button-color);
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard
{
	text-align: center;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanRecommended
{
	border: 3px solid var(--knowledge-tests-background-color, #e07b39);
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard p.subscriptionPlanRecommendedLabel
{
	display: none;
}

body:not(:has(.content-wrapper)) .subscriptionPlanCard.subscriptionPlanRecommended p.subscriptionPlanRecommendedLabel
{
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #c96a2c;
}

body:not(:has(.content-wrapper)) p.subscriptionPlanTry
{
	margin: 0 0 8px;
}

body:not(:has(.content-wrapper)) .test-result .test-result-full-version .btn
{
	margin: 8px 8px 0 0;
}

@media (max-width: 575px)
{
	body:not(:has(.content-wrapper)) .knowledge-tests-actions .btn,
	body:not(:has(.content-wrapper)) .test-result .test-result-full-version .btn
	{
		width: 100%;
		margin-right: 0;
	}
}

/* Boks "Plan pretplate" na Mojoj stranici (Vlasnik): paket po redu, cena desno, ceo red vodi na izmenu paketa */
.content-wrapper .subscriptionPlanWidget .subscriptionPlanWidgetItem
{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--es-border, #dbe2df);
	color: inherit;
	text-decoration: none;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanWidgetItem:last-child
{
	border-bottom: 0;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanWidgetItem:hover .subscriptionPlanWidgetName
{
	color: var(--button-color);
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanWidgetName
{
	font-weight: 600;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanWidgetDuration
{
	color: var(--es-ink-muted, #56645f);
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanWidgetPrice
{
	margin-left: auto;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanRecommendedLabel,
.content-wrapper .subscriptionPlanWidget .subscriptionPlanInactiveLabel
{
	display: none;
	width: 100%;
	font-size: 12px;
	font-weight: 600;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanRecommended .subscriptionPlanRecommendedLabel
{
	display: block;
	color: #c96a2c;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanInactive
{
	opacity: 0.7;
}

.content-wrapper .subscriptionPlanWidget .subscriptionPlanInactive .subscriptionPlanInactiveLabel
{
	display: block;
	color: var(--es-danger, #b0412f);
}

/* Registracija: red "Vec imate nalog? Prijavite se" ispod naslova, zvezdica uz obavezna polja, napomena ispod dugmadi */
body:not(:has(.content-wrapper)) #registration p.registrationLogin
{
	margin: -8px 0 16px;
	font-size: 17px;
}

body:not(:has(.content-wrapper)) #registration p.registrationLogin a
{
	font-weight: 600;
}

body:not(:has(.content-wrapper)) #registration .requiredMark
{
	color: var(--es-danger, #b0412f);
}

body:not(:has(.content-wrapper)) #registration p.registrationRequiredNote
{
	margin: 0 0 16px;
	text-align: center;
}

/* putanja (Breadcrumb): Bootstrap daje razmak i separator izmedju li.breadcrumb-item, ovde samo znak */
.breadcrumb
{
	--bs-breadcrumb-divider: '>';
}

/* stavke putanje bez serifnog fonta (page.min.css: p, li, h2 { font-family: SerifFont }, (0,0,1)) */
.breadcrumb-item
{
	font-family: inherit;
}

/* =====================================================================
   Faza 4: primedbe testera, izgled
   ===================================================================== */

/* J24: natpis Period iznad polja, kao Oblast. .align-items-center (0,1,0) !important -> (0,4,1) !important */
.content-wrapper form .row > [class*="col-"]:has(> .periodBtn)
{
	display: flex;
	flex-direction: column;
	align-items: flex-start !important;
}

.content-wrapper form .row > [class*="col-"]:not(.mb-2):has(> .periodBtn)
{
	margin-bottom: 0 !important;
}

/* polja sa klasom mb-2 imaju 8px ispod sebe, pa ga dobija i kolona perioda */
.content-wrapper form .row:has(> [class*="col-"] .mb-2) > [class*="col-"]:has(> .periodBtn)
{
	margin-bottom: 8px !important;
}

.content-wrapper form label[for="period"],
.content-wrapper form label[for="test-topic-tree-filter"]
{
	margin: 0 0 4px;
	line-height: 20px;
}

/* polja bez natpisa stoje u istoj ravni sa dugmetom perioda; .align-items-center (0,1,0) !important */
.content-wrapper form:not(:has(.ess-select ~ .form-text)) .row:has(> [class*="col-"] > .periodBtn),
.content-wrapper form:not(:has(.ess-select ~ .form-text)) .row:has(> [class*="col-"] .row > [class*="col-"] > .periodBtn)
{
	align-items: flex-end !important;
}

/* J35, J37, J40, J44: Moji testovi i Moja statistika - Oblast ima napomenu ispod polja, pa se poravnava po vrhu; dugmad u visini polja */
.content-wrapper form:has(.ess-select ~ .form-text) .row
{
	align-items: flex-start !important;
}

.content-wrapper .test-filter-actions
{
	margin-top: 24px;
}

.content-wrapper form:has(.ess-select ~ .form-text) .form-group > label
{
	margin-bottom: 4px !important;
}

/* J38: svi filteri iste visine */
.content-wrapper form select.form-select
{
	min-height: 40px;
}

/* M9, J24: stablo ima istu ivicu i visinu kao ostala polja */
body .ess-select
{
	--ess-droptree-border: 1px solid var(--es-border-strong, #7d928c);
}

body .ess-select.visible-select
{
	min-height: 40px;
}

/* J25: dugmad izbora perioda */
body .daterangepicker .applyBtn,
body .daterangepicker .cancelBtn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* J26: strelica i stikla u istoj ravni */
body .ess-select .ess-node-indent,
body .ess-select .ess-checkbox
{
	vertical-align: middle;
}

/* J48: X iznad prve opcije stabla na telefonu */
body .ess-select.ess-droptree-modal ul
{
	padding-top: 3.25rem;
}

body .ess-select.ess-droptree-modal .ess-droptree-modal-close
{
	top: 0.5rem;
}

/* J27 */
.content-wrapper .test-no-rows
{
	margin: 0;
}

/* J20, J21, J22, J3: prijava */
#loginButton
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body .form-check-input:focus
{
	border-color: var(--button-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--button-color) 25%, transparent);
}

.password-field
{
	position: relative;
}

.password-field .form-control
{
	padding-right: 44px;
}

.password-toggle
{
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--es-ink-muted, #56645f);
}

/* J29, J42: tabela u ravni sa karticama */
.content-wrapper .test-result .wide-list:has(> .test-result-question-rows)
{
	padding-right: 0;
	padding-left: 0;
}

/* J41: red poravnat po vrhu kad bedz predje u dva reda */
.content-wrapper .test-result-question-rows > .row
{
	align-items: flex-start;
}

/* J43 */
.content-wrapper .test-result-hint .fa-lightbulb
{
	margin-right: 4px;
}

/* J36: redovi imaju isti razmak kao zaglavlje, inace im kolone nisu iste sirine */
@media (min-width: 1200px)
{
	.content-wrapper .test-result .test-result-question-rows > .row
	{
		padding-right: 16px !important;
		padding-left: 16px !important;
	}
}

/* J30: dugme nije link */
body a.btn,
body a.btn:hover,
body a.btn:focus
{
	text-decoration: none !important;
}

/* J32: Poslednja prijava */
.last-login
{
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}

/* M9: prazni elementi za sortiranje ne pomeraju tekst */
.content-wrapper .sort-arrow.sort-direction-,
.content-wrapper .sort-order.badge:empty
{
	display: none;
}

/* J28, J33: dijalog se razlikuje od navigacije, a dijalog preko dijaloga od onog ispod */
body .ess-dialog
{
	--ess-dialog-title-bg: var(--button-color);
}

body .ess-dialog--nested
{
	--ess-dialog-title-bg: var(--es-surface-alt, #f7f9f8);
	--ess-dialog-title-color: var(--es-ink, #1f2a27);
}

body .ess-dialog--nested .ess-dialog__title
{
	border-bottom: 1px solid var(--es-border, #dbe2df);
}

body .ess-dialog--nested .ess-dialog__close-btn
{
	color: var(--es-ink, #1f2a27);
}

/* =====================================================================
   Faza 5: primedbe testera, telefon
   ===================================================================== */

/* J8: natpis polja se vidi samo uz sakrivene naslove kolona, do 991 px (odeljak o stablu, gore) */
@media (min-width: 992px)
{
	#topic-tree-container .topic-count-label
	{
		display: none;
	}
}

/* M4: tabela iz teksta pitanja ima svoj klizac unutar dijaloga; tekst je u bazi, pa nema omotaca */
@media (max-width: 767px)
{
	#testQuestionDiv table,
	.content-wrapper .question-detail-text table
	{
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}