/* 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. 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;
}

.content-wrapper .dashboard-widget-box .stat-label
{
	margin-top: 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;
		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 56px;
		width: 56px;
	}

	#topic-tree-container .topic-published
	{
		white-space: nowrap;
	}

	#topic-tree-container .topic-node.topic-tree-header .topic-cell-name
	{
		display: none;
	}
}


/* =====================================================================
   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;
}


/* =====================================================================
   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;
}

.content-wrapper .InputContainer > .btn.micButton,
.content-wrapper .input-group > .btn[data-interaction*="role:search-trigger"]:last-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 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 na telefonu (pitanja, statistika pitanja): zaglavlje sa role:sort-by se ne krije (2.8),
   nego postaje red malih dugmadi za sortiranje; kolone bez sortiranja i prazne se kriju. Izabrano
   sortiranje (strelica sort-direction-asc/desc) je istaknuto. Bez HTML izmena. */
@media (max-width: 575px)
{
	.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;
	}
}


/* =====================================================================
   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;
}

/* 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;
}

/* 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). */
body .ess-dialog__footer > [data-ess-footer]
{
	width: 100%;
	margin: 0 !important;
}

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

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

body .ess-dialog__footer > [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): centriran CSS-om i nikad širi od ekrana (EssDialog
   ga postavlja left u px, pa posle promene širine prozora ostaje van ekrana); bočni dijalog na
   telefonu preko cele širine, na tabletu najviše 560 px (širinu zadaje poziv u %) */
body .ess-dialog--centered
{
	left: 50% !important;
	max-width: calc(100vw - 16px) !important;
	border-radius: 12px;
	transform: translateX(-50%);
}

@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
{
	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. KONTROLNI CENTAR (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 dugmad za izmenu rasporeda u ravni sa karticama (red .titleDiv imao je -12 px) */
.content-wrapper .row.titleDiv
{
	align-items: center;
	margin: 0 0 8px;
}

.content-wrapper .row.titleDiv > *
{
	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: 16px;
}

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

.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
{
	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;
}

/* 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);
}

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%;
	}

	/* 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: zaglavlje kartice liste uplata (status levo, dugme desno). Status i
   lista su u istom roditelju, pa je roditelj kartica iz 2.3, a status njen gornji deo. */
.content-wrapper .studentSubscriptionCurrent
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 !important;
	padding: 16px 20px;
	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;
}

.content-wrapper .studentSubscriptionCurrent + .row.header-row
{
	border-radius: 0;
}

/* 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;
}

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;
}

/* baner kolačića: kartica sa zaobljenim uglovima, dugmad kao ostala dugmad */
body .cookie-consent-banner
{
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(23, 38, 46, 0.18);
	font-size: 14px;
	line-height: 20px;
}

/* 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);
}

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) */
body:not(:has(.content-wrapper)) .form-check
{
	align-items: center;
	gap: 8px;
}

body:not(:has(.content-wrapper)) .form-check-input
{
	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: boja linka bez podvlačenja do hover-a */
body:not(:has(.content-wrapper)) #login a:not(.btn),
body:not(:has(.content-wrapper)) #registration a:not(.btn)
{
	font-weight: 600;
	text-decoration: none;
	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: underline;
}

/* 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;
}

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,
body:not(:has(.content-wrapper)) .plan .price
{
	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.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;
	}
}


/* =====================================================================
   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,
body .ess-dialog .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;
}

body .ess-dialog .alert.alert-info
{
	border: 1px solid color-mix(in srgb, var(--es-info, #2a6496) 30%, transparent) !important;
	background-color: var(--es-info-soft, #e4edf6) !important;
	color: var(--es-info, #2a6496) !important;
}

/* 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.
   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 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;
}