/* ===================================================================================================================
Custom globalni stilovi kojima se mijenja dokument i sadržaj DOM-a. Globalni stilovi ne mogu mijenjati sadržaj shadow
DOM-a, dakle ne mogu mijenjati sadržaj web komponente (vaadin komponente). Koristi se za izmjenu globalnih vaadin css
varijabli i definiranje stilova koje će koristiti aplikacija.

NAPOMENA: prilikom svake izmjene u styles.css, u klasi ApplicationShell treba povećati broj "verzije" u query
parametru. Broj verzije nema nikakvo značenje, bitno je samo da se poveća na neki veći broj kako bi browser dohvatio
datoteku sa servera umjesto iz svog lokalnog cache-a!
=================================================================================================================== */


html {
	font-size: 16px;
	overflow-x: hidden; /* Aplikacija je responsive, nikad ne treba scrollati horizontalno */

	--lumo-font-family: -apple-system, BlinkMacSystemFont, "Albert Sans", Helvetica, Arial, sans-serif;
	--lumo-primary-color: #4c997b; /* Tamnija verzija DGU standard zelene boje */
	--lumo-primary-text-color: var(--lumo-primary-color);
	--lumo-secondary-text-color: var(--lumo-contrast-60pct);

	--lumo-primary-color-50pct: #7fb8f5; /* plava */

	--lumo-error-color: #D44444;

	--lumo-required-field-indicator: '*';
	--lumo-base-color: #ffffff;

	--lumo-header-text-color: #4c997b; /* Tamnija verzija DGU standard zelene boje */
	--lumo-header-text-color-2: #36455d;

	/* Custom variable */
	--lumo-contrast-15pct: hsla(214, 56%, 24%, 0.10);

	/* Boja primarnog gumba */
	--primary-button-color: #36455d; /* DGU standard tamnoplava 80% */
	/* Sekundarni gumb ima samo border, to je boja samo nijansu svijetlija nego boja primarnog gumba */
	--secondary-button-border-color: #687485; /* DGU standard tamnoplava 60% */

	--green-button-text-color: #2c801d;
	--green-button-border-color: #3d912f;
	--green-button-background-color: #cde3c7;

	--red-button-text-color: #c74040;
	--red-button-border-color: #d05151;
	--red-button-background-color: #ffefef;

	--yellow-button-text-color: #a47c16;
	--yellow-button-border-color: #d3a42c;
	--yellow-button-background-color: #fff5da;
	
	--orange-button-text-color: #a8580a;
	--orange-button-border-color: #f49e48;
	--orange-button-background-color: #f9Cb9c;

	--cyan-button-text-color: #446f75;
	--cyan-button-border-color: #629ba4;
	--cyan-button-background-color: #a2c4c9;

	/* Boja modalnog curtaina za dialog - default je var(--lumo-shade-20pct), što se primjenjuje na boju --lumo-base-color
	aplikacije koja je ispod dialoga, što to je previše svijetlo i plavičasto, postavlja se da je topliji sivi */
	--dialog-overlay-background-color: hsla(0, 0%, 22%, 0.55);

	/* Header redak u FlexGrid gridovima */
	--flex-grid-header-background-color: #f0f0f0;

	/** Visina div-a za prikaz status poruka aplikacije (npr. kada aplikacija ne može uspostaviti vezu sa serverom) */
	--status-message-height: 26px;

	/* Širina sidebara. Povećati ako ima itema koji su preširoki pa ne stanu u sidebar. */
	--sidebar-width: 320px;
	--sidebar-button-width: calc(var(--sidebar-width) - 24px); /* -24px je lijevi+desni padding od sadržaja sidebar-a (12px+12px) */

	--sidebar-background-color: #f0f0f0;
}

[theme~="dark"] {
	/*--lumo-base-color: #282e37;*/
	--lumo-base-color: hsl(214, 16%, 22%);

	/* Boja modalnog curtaina za dialog - korištenje var(--lumo-shade-20pct) izgleda ok kod tamne teme, jer
	samo malo zatamni sve ispod. */
	--dialog-overlay-background-color: var(--lumo-shade-20pct);

	--flex-grid-header-background-color: hsl(214, 17%, 26%);
}

body {
	/* Kako bi širina aplikacije uključivala širinu browser vertical scrollbara, odnosno kako se širina
	aplikacije ne bi mijenjala kada se pojavi scrollbar. Inače se širina aplikacije smanji kada se pojavi
	scrollbar za širinu scrollbara, pa aplikacija (koja je centrirana) malo poskoči lijevo. Ova postavka
	u ovoj aplikaciji nije problem jer se ne koristi horizontalni scrolling. */
	width: 100vw;
}

.v-status-message {
	/* Dialog koji se automatski prikazuje ako aplikacija ne može uspostaviti vezu sa serverom (npr. kada se server
	ugasi, a u browseru aplikacija izvrši heartbeat)
	https://github.com/vaadin/flow-hilla-common/blob/main/frontend/packages/common-frontend/src/ConnectionIndicator.ts
	*/

	/*
	Ovo je pokušaj da div sa porukama statusa aplikacije izgleda kako je
	izgledao sa V14. Trenutno izgleda ok, samo bi trebalo još isključiti animacije
	width-a koje se događaju kada se aplikacija otvori na mobitelu.

	top: 1em !important;
	right: 1em !important;
	left: auto !important;
	overflow: auto;

	color: black !important;
	background-color: white !important;
	border: 1px solid black !important;
	background-image:none !important;

	font-size: 14px !important;
	font-weight: 400;

	max-width: calc(100vw - 3em);
	width: 380px;
	 */
}

.v-status-message.active {
	height: var(--status-message-height) !important;
	max-height: var(--status-message-height) !important;
}
.v-status-message span {
	height: var(--status-message-height) !important;
}


/* H2 i H3 se koriste za naslove i podnaslove na ekranu (view/dialog) */
h2 {
	font-family: 'Barlow', sans-serif;
	font-size: 36px;
	margin-top: 0;
	margin-bottom: 0.5em;
	font-weight: 600;
}
h3 {
	font-size: 24px;
	font-family: 'Barlow', sans-serif;
	margin-top: 0.2em;
	margin-bottom: 0;
	font-weight: 600;
}
[dialog] h3 {
	margin-top: 0;
}

/* H4 i H5 s koriste za podnaslove za odvajanje sadržaja unutar stranice i iznad gridova
- H4 - kod velikih tabela
- H5 - kod malih tabela
*/
h4 {
	font-size: 28px;
	font-family: 'Barlow Condensed', sans-serif;
	margin-top: 0.48em;
	margin-bottom: 0.48em;
	font-weight: 600;
}
h5 {
	font-size: 22px;
	font-family: 'Barlow Condensed', sans-serif;
	margin-top: 0.6em;
	margin-bottom: 0.48em;
	font-weight: 600;
}
@media (max-width: 36em) {
	/* Povećava se gornja margina (razmak od elementa iznad) na malim ekranima što će povećati vidljivost */
	h5 {
		margin-top: 1.2em;
	}
}
.flex-grid h5 {
	/*margin-bottom: 0;*/
}

.overflow-wrap-normal {
	overflow-wrap: normal !important;
}

/* Miče se gornji padding iznad svih komponenti koje imaju labele (text fieldovi, date pickeri, combo...).
Ovaj padding ne treba, samo komponenta zauzima više prostora. Ako treba malo vertikalnog razmaka, dodat
će se spacing() u layout. */
[has-label] {
	padding-top: 0;
}



/* ----------------------------- DALJE SU STILOVI SPECIFIČNI ZA OVU APLIKACIJU	 ----------------------------- */

.info-label {
	color: var(--primary-button-color);
	padding: 0.6em 0.8em;
	margin: 0.4em 0 0.6em 0;
	border: 1px solid var(--primary-button-color);
	border-radius: .28571429rem;
	/*background-color: #dff0ff;*/
}
.error-label {
	color: #db2828;
	padding: 0.6em 0.8em;
	margin: 0.4em 0 0.6em 0;
	border: 1px solid #db2828;
	border-radius: .28571429rem;
	/*background-color: #ffe8e6;*/
}
.info-label > div, .error-label > div {
	/* Dodaje mali razmak između ikone lijevo i teksta desno (taj tekst desno je div koji se cilja ovim css selektorom) */
	margin-left: var(--lumo-space-s);
}


/* Za #1 header red unutar FlexGrid-a */
.flex-grid.fxg div.grd-cpt  {
	font-weight: 400;
	font-size: 14px;
	color: var(--lumo-contrast-90pct);
	background-color: var(--flex-grid-header-background-color);
	padding-top: 10px;
	padding-bottom: 10px;
}
/* Za #2 header red (sub-header) unutar FlexGrid-a */
.flex-grid.fxg div.grd-subcpt  {
	font-weight: 400;
	font-size: 12px;
	color: var(--lumo-contrast-60pct);
	background-color: var(--flex-grid-header-background-color);
	border-top: none; /* Ne smije biti linija između ovog reda i reda iznad */
	padding-top: 0;
	margin-top: -10px; /* Važno kako bi se ovaj red približio redu iznad */
	padding-bottom: 10px;
	z-index: 2;
}

/* Za #1 header red unutar FlexGrid-a - vertikalni tekst */
.flex-grid.fxg div.grd-cpt-vertical  {
	writing-mode: vertical-rl; /* Makes the text vertical */
	transform: rotate(180deg); /* Kako bi tekst išao odozdo prema gore, a ne odozgo prema dolje */
	line-height: 0.86; /* Podrška za multi line tekst pomoću br (bez ovoga je preveiki razmak između linija) */

	/* transform: rotate(180deg); radi rotaciju cijelog elementa, uključujući i bordere, pa ih se specijalno
	za ovakvu ćeliju grida mora popraviti */
	border-bottom: 1px solid var(--fxg-border-color);
	border-top: none;
	border-right: 1px solid var(--flex-grid-header-background-color);

	/* Ove vertikalne kolone u gridu ponekad imaju postavljenu širinu 1/48 jer mogu biti jako uske. Ali baš
	zato što su uske, mora im se malo smanjiti padding, jer se inače ne mogu smanjiti više od 2x širina paddinga,
	pa onda ne stanu u grid na jako malim širinama ekrana - događa se da se zbog toga grid razleti u novi red. */
	padding-left: calc(var(--lumo-space-s)/2);
	padding-right: calc(var(--lumo-space-s)/2);
}
.flex-grid.fxg div.grd-cpt-vertical > div  {
	/* Donja margina (iako je margin-top jer je ovaj div zarotiran!), kako tekst ne bi bio priljepljen za dno, nego
	malo odmaknut. Otprilike ovoliko je odmaknut i tekst koji nije vertical (jer ima line height) */
	margin-top: 6px;
}

/* Div-ovi (ćelije) selektiranog retka u flex gridu. FlexGrid automatski dodaje atribut [selected] na odabrani redak grida.  */
.flex-grid[mark-selected-row] > div[selected] {
	background-color: #f2f2f2 !important;
}
/* div[selected="2"] znači drugi div u flex gridu. "Drugi" div je onaj skroz na lijevoj strani koji se
vidi na velikom ekranu. ("Prvi" div je skriven na velikom ekranu i prikazuje se samo na malom ekranu) */
.flex-grid[mark-selected-row] > div[selected="1"], .flex-grid[mark-selected-row] > div[selected="2"], .flex-grid[mark-selected-row] > div.first-cell[selected],
.flex-grid[mark-selected-row] > div:nth-child(1 of .subdata[selected]), .flex-grid[mark-selected-row] > div.subdata.first-cell[selected] {
	box-shadow: inset 3px 0 0 0 var(--lumo-primary-color);
}

.grd-cpt a, .grd-cpt vaadin-icon {
	user-select: none;
	font-size: 14px;
	color: var(--lumo-contrast-90pct);
}
.grd-subcpt a, .grd-subcpt vaadin-icon {
	user-select: none;
	font-size: 12px;
	color: var(--lumo-contrast-60pct);
}
.grd-cpt-vertical a, .grd-cpt-vertical vaadin-icon {
	user-select: none;
	font-size: 13px;
	color: var(--lumo-contrast-90pct);
}

.grd-cpt vaadin-icon {
	color: #62696c;
	user-select: none;

	font-weight: 500;
	font-size: 13px;
}

/* Boja decimalnog dijela kod površina */
.povrsina-decimals {
	color: var(--lumo-contrast-30pct);
}


/* Da korisnik ne može označiti tekst u flex gridu koji ima onClick handler. Ponekad se dogodi da se
taj tekst slučajno označi kada korisnik klikne na redak, pa to ružno izgleda. */
.flex-grid[clickable] [class*="rw"] div {
	user-select: none;
}

/* Za ikone unutar flex grida (na dosta mjesta ima check ikona za kolone koje imaju da/ne vrijednosti) */
.flex-grid div[class*="rw"]:not([class*="subdata"]) > vaadin-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	z-index: 1;
}
/* Za ikone unutar flex grida (na dosta mjesta ima check ikona za kolone koje imaju da/ne vrijednosti) */
.flex-grid div[class*="subdata"] > vaadin-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	z-index: 1;
}
/* Ako je ikona unutar div-a. To je slučaj da se HTML tekst ikone stavi u TextLabel i takva labela stavi u grid. */
.flex-grid div[class*="subdata"] > div > vaadin-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	z-index: 1;
	vertical-align: text-top;
}

/* Ovo je ikona koja je postavljena u context menu (jedan menu item) */
vaadin-context-menu-item vaadin-icon {
	margin-right: 12px;
	width: 15px;
	height: 15px;
	/* margin-bottom je mala korekcija kako bi ikona bila vertikalno centrirana u odnosu na ostali tekst.
	Vrijednost je jednaka: --lumo-line-height-xs (ovo je 19px, line height texta u menu itemu) - visina ikone (to je 15px) / 2 = 2px  */
	margin-bottom: 2px;
}
vaadin-context-menu-item span[empty] {
	display: inline-block;
	width: 27px; /* Mora biti iste širine kao i ikona gore: margin-right + width  */
}

.grd-cpt vaadin-checkbox {
	/* Veličina checkbox-a ovisi o veličini fonta u elementu gdje se taj checkbox nalazi. Stil grd-cpt koji se
	stavlja za header tabela ima manji font od normalnog teksta u aplikaciji, pa bi onda i checkboxevi u headeru
	bili manji, a to ne želimo.*/
	font-size: 15px;
}

.grd-cpt-nopad {
	font-weight: 500;
	font-size: var(--lumo-font-size-s);
	color: var(--lumo-secondary-text-color);
}

/* Ako se tekst unutar FlexGrid-u (sa .data klasom) ne može wrappati (Hižman zna unositi jako dugački text bez razmaka),
onda se skriva umjesto da izleti van kućice */
.flex-grid div.data {
	overflow: hidden;
}


/* Boje, za razne status ikone i tekst */
.green {
	color: #76b241;
}
.red {
	color: #fd3434;
}
.gray {
	color: #d9d9d9;
}
.light-gray {
	color: #c4c4c4;
}
.blue {
	color: var(--lumo-primary-color);
}
.header-text-color {
	color: var(--lumo-header-text-color);
}

.pocetna-left {
	min-height: 100%;
	padding: 60px 60px 0 60px;
	line-height: var(--lumo-line-height-s);
}
.pocetna-left img[geodet] {
	/* Zbog paddinga od 60px koji ima pocetna-left ovu sliku geodeta guramo desno kako bi bila zalijepljena za
	desni dio ekrana. PAZI - ako se izmjeni lijevi padding na pocetna-left, treba izmijeniti i ovdje da bude jednako.*/
	margin-left: 60px;
}
.pocetna-right {
	min-height: 100%;
	padding: 60px;
	background-color: #0b1f3e; /* Tamno plava boja, ista kao na djelovima slike "plava-pozadina.png", ova boja se vidi dok se slika ne učita */
	color: white;
	background-image: url("images/plava-pozadina.png");
	line-height: var(--lumo-line-height-s);
}
.pocetna-right a {
	color: white;
}
.pocetna-right ul {
	color: #cbcbcb;
}

@media (max-width: 36em) {
	.pocetna-left {
		padding: 60px 30px 20px 30px;
	}

	.pocetna-right {
		padding: 30px 30px 30px 30px;
	}

	.main-title {
		font-size: 36px !important;
	}

	.main-title-inverse {
		font-size: 36px !important;
	}
}

@media (min-width: 48.01em) {
	 /* Na početnoj stranici samo na velikom ekranu (kod flex grida je ovo .whenM()) postavi height 100% jer se
	 stranica mora raširiti na cijeli ekran. Na manjim veličina ovo nije potrebno jer lijeva i desna strana idu
	 jedna ispod druge. */
	 .pocetna-view .flex-grid[split-layout-grid] {
		 height: 100%;
	 }
	.pocetna-view .flex-grid[split-layout-grid] > div {
		height: 100%;
	}
}

.check-here-link {
	text-decoration: underline;
	font-size: 16px;
	font-weight: 600;
}

.check-here-link:not(:any-link){
	color: #33B881;
}

.pocetna-btn {
    width: 100%;
    max-width: 350px;
    background: #18B976;
    font-size: larger;
}

.main-menu-icon {
	width: 30px;
	height: 30px;
	color: #fff3eb;

	position: fixed;
	top: 16px;
	right: 16px;
}

.context-menu-icon {
	width: 30px;
	height: 30px;
	/*color: #4E4E4E;*/
	color: white;
	flex-shrink: 0;
	position: absolute;
	z-index: 2; /* Mora biti viši od sadržaja titlebar-a kako bi se moglo kliknuti na ovu menu ikonu. Paziti da nije više od headera. */

	/* Vrijednost ovisi o visini HeaderComponent - mora biti jednako kao visina HeaderComponent (+ padding od
	ApplicationLayout ako ga ima i + koliko se želi da je menu ikona odmaknuta od headera ) kako bi ikona bila
	vidljiva. Ako je manje od toga ikona će biti "ispod" headera (koji ima veći z-index) pa se neće vidjeti. */
	margin-top: 64px; /* 25px -> ikona skrivena, 64px -> ikona potpuno vidljiva */

	margin-left: 16px;

	transition: margin-top 0.3s;
	transform: translate3d(0, 0, 0);
}

.breadcrumbs {
	padding: 8px 0 0 0;
	font-size: 14px;

	margin-left: 16px;
	margin-right: 16px;
}
.breadcrumbs vaadin-icon {
	width: 10px;
	height: 10px;
}
.breadcrumbs a[router-link] {
	font-size: 14px;
	font-weight: 400;
	color: #666666;
}

/* Router linkovi unutar context menija se stiliziraju da više izgledaju menu itemi. */
vaadin-context-menu-item a[router-link] {
	font-size: 15px;
	font-weight: 500;
}
vaadin-context-menu-item a[router-link][with-icon] vaadin-icon {
	margin-right: 11px;
}


[sidebar] {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	font-weight: 500;
	user-select: none;
	background-color: var(--sidebar-background-color);
	position: fixed;
	overflow: hidden;
	top: 55px; /* mora biti jednako kao visina HeaderComponent (+ padding od ApplicationLayout ako ga ima) */
	left: 0;
	bottom: 0;
	transition: margin-left 0.3s, left 0.3s;
	z-index: 2;
	transform: translate3d(0, 0, 0);

	width: var(--sidebar-width);

	/* Negativna margina treba biti jednaka širini sidebar-a. To defaultno skriva sidebar, a poništava
	se u slučaju da je širina browsera veća od 1350px, tada je sidebar prikazan. */
	margin-left: calc(var(--sidebar-width) * -1);
}


/* Ako je ekran veći od ovdje navedene min-width širine (to je veliki/desktop ekran), tada je:
- vidljiv sidebar (je mu je poništena negativna margina koji inače ima)
- dio aplikacije u kojemu se prikazuje view ima padding jednak širini sidebara, tako da ne bude
  ispod sidebara (koji je display:fixed i sa većim z-indexom pa je uvijek iznad svega)
- titlebar pomaknut skroz lijevo (inače je pomaknut desno onoliko koliko je širok hamburger) jer
  na velikom ekranu nema hamburgera koji je inače poziconiran lijevo od ovog titlebara
Ova navedena širina je namješten proizvoljan broj jer na toj širini ekrana (ili većoj) aplikacija izgleda
ok, a na manjpoj širini ekrana se tekst svugdje počne previše prelamati, pa je vrijeme da se ukloni
sidebar kako bi se dobilo više mjesta za aplikaciju. */
@media (min-width: 1360px) {
	.left-padded {
		padding-left: var(--sidebar-width); /* Padding udesno kako sadržaj ne bi bio ispod sidebara. */
	}
	[sidebar][open] {
		margin-left: 0;
	}
	.context-menu-icon.open {
		 margin-top: 25px;
	}
	[titlebar-content] > vaadin-vertical-layout {
		padding-left: 0 !important;
	}
	[titlebar-content] {
		align-items: center !important;
	}
	[titlebar-content] [title] {
		margin-top: 0 !important;
	}
}

[sidebar] > *:nth-child(1) {
	padding: 16px 12px 8px 12px;
}
/** Sadržaj sidebara (vertikalni layout sa menu itemima) */
[sidebar] [sidebar-content] {
	padding-bottom: 32px;
	height: 100%;
	overflow-x: hidden;
    overflow-y: auto;
}

/* Posebna stilizacija hr unutar sidebara jer treba gornja margina, ali je defaultna prevelika */
[sidebar] [sidebar-content] hr {
	margin-top: 10px;
}

/* Router linkovi u sidebaru su linkovi */
[sidebar] a[router-link] {
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

[sidebar] [button] {
	width: var(--sidebar-button-width);
	padding: 5px 5px;
	transition: border 0.2s; /* kratka animacija boje na hover */
	cursor: pointer;
}
[sidebar] [button]:hover {
	color: var(--lumo-primary-color);
}
[sidebar] [button]:hover > div {
	border-left: 4px solid var(--lumo-primary-color);
	color: var(--lumo-primary-color);
}
[sidebar] [button] > div {
	/* [sidebar] [collapsed-icon] (to je expand i collapse ikona na grupi) ima postavljeno width: 16px + margin-right: 7px
	što je odmak teksta od 23px. Ovi gumbi onda moraju imati margin-left + padding-left + border-left da zbrojeno bude također 23px */
	margin-left: 15px;
	padding-left: 5px;
	border-left: 4px solid transparent;

	transition: background 0.2s, border-left 0.2s, color 0.2s; /* kratka animacija boje i otvaranja na hover */
}

[sidebar] [button]:not([group-button])[highlight] > div {
	border-left: 4px solid var(--lumo-primary-color);
	color: var(--lumo-primary-color);
}

/* Ikone unutar sidebara za expand/collapse */
[sidebar] [collapsed-icon],
[sidebar] [expanded-icon] {
	width: 18px;
	height: 18px;
	color: #808080;
	margin-right: 8px;
}

/* U grupama koje nisu expanded se skrivaju linkovi ("gumbi") i podgrupe. Ostalo se ne smije skrivati, jer se
ništa drugo ne može nalaziti u grupi, a ne želimo sakriti header gumb grupe, on se uvijek vidi. */
[sidebar] [group]:not([expanded]) > [router-link],
[sidebar] [group]:not([expanded]) > [group] {
	display: none;
}

/* Unutar ZATVORENE grupe (unutar njezinog gumba) se skriva "expanded" ikona */
[sidebar] [group]:not([expanded]) > [button] > [expanded-icon],
/* Unutar OTVORENE grupe (unutar njezinog gumba) se skriva "collapsed" ikona */
[sidebar] [group][expanded] > [button] > [collapsed-icon] {
	display: none;
}

/* Sivi naslov u sidebar meniju. Ima malu razliku u lijevoj margini ovisno nalazi li se
unutar sidebar-a ili u context meniju (za mobitele) */
[sidebar-subtitle] {
	color: var(--lumo-secondary-text-color);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	margin: 8px 8px 8px 5px;
}
[sidebar] [sidebar-subtitle] {
	margin: 8px 8px 8px 20px;
}

/* Komponenta koja se postavlja kao naslov iznad flex gridova a sadrži tekst (lijevo) i opcionalno neke
komponente/gumbe (desno). To je običan horizontalni layout, malo podešen da se bolje prikazuje na mobilnom. */
[grid-title] {
	row-gap: var(--lumo-space-xs);
	column-gap: var(--lumo-space-s);
	margin-bottom: 1px;
}
@media (max-width: 36em) {
	/* Na malim ekranima se mora postaviti mali razmak kako se komponente ne bi zalijepile za grid ispod. */
	[grid-title] {
		margin-bottom: 0.6em;
	}
}

/* Komponenta koja se postavlja kao naslov dialoga. h3 - naslov, div - podnaslov, vaadin-icon - ikona desno */
[dialog-title] h3 {
	margin-right: var(--lumo-space-m);
}
[dialog-title] div {
	font-size: 12px;
	white-space: nowrap;
	font-weight: 600;
	color: #808080;
}
[dialog-title] vaadin-icon {
	width: 27px;
	height: 27px;
	padding: 5px;
	flex-shrink: 0;
}

/* Ikona za zatvaranje filtera, treba vizualno biti ista kao i ikona za zatvaranje dialoga ([dialog-title] vaadin-icon) */
[filter-dialog] vaadin-icon {
	width: 27px;
	height: 27px;
	padding: 5px;
	flex-shrink: 0;

	position: absolute;
	top: 1em;
	right: 1em;
	z-index: 1;
}

[pager] {
	font-size: 14px;
	/*margin: 8px 0;*/
	white-space: nowrap;
}
/* Select komponenta za odabir broja zapisa po stranici */
[pager] vaadin-select {
	margin: 0 10px;
}

/* Klikabilna ikona (src je obično svg slika) koja se koristi kao gumb */
img[button] {
	border: none;
	margin: 0 2px;
	overflow: visible;
	border-radius: 50%; /* Kako bi img bio krug */
	transition: background-color 0.2s; /* kratka animacija boje na hover */
	z-index: 3; /* Mora biti veći od z-indexa subdata blokova*/
}
/* Gumb ukupne visine 40px za korištenje u Pager komponenti */
[pager] img[button] {
	width: 16px;
	height: 16px;
	padding: 12px;
}
/* Gumb ukupne visine 26px, može se staviti u flex grid sa VERTICAL_SPACING_XS (redak je visine 34px) */
img[button][x-small] {
	width: 16px;
	height: 16px;
	padding: 5px;
}
/* Gumb ukupne visine 34px, može se staviti u flex grid sa VERTICAL_SPACING_S (redak je visine 34px) */
img[button][small] {
	width: 16px;
	height: 16px;
	padding: 9px;
}
/* Gumb ukupne visine 40px, može se staviti u flex grid sa VERTICAL_SPACING_M (redak je visine 39px) */
img[button][medium] {
	margin: 1px 1px;
	width: 18px;
	height: 18px;
	padding: 10px;
}
/* Gumb ukupne visine 44px, može se staviti u flex grid sa VERTICAL_SPACING_L (redak je visine 50px) */
img[button][large] {
	margin: 3px 2px;
	width: 20px;
	height: 20px;
	padding: 12px;
}
img[button][pocetna]:not([disabled]):hover {
	background-color: #e3e3e3;
}
img[button][user]:not([disabled]):hover {
	background-color: #818181;
}
img[button][user-pocetna]:not([disabled]):hover {
	background-color: #d3d3d3;
}
img[button][user-pocetna][disabled] {
	filter: none;
}
img[button][user][disabled] {
	filter: none;
}
img[button][pocetna] {
	width: 36px;
	height: 36px;
	padding: 8px;
}
img[disabled][button] {
	filter: opacity(0.2);
}
img[button]:not([disabled]):hover {
	background-color: #f2f2f2;
	cursor: pointer;
}
/* Hover ove ikone je u flex gridu iznimno malo tamnije ,jer redak koji ima hover već ima sivu pozadinu */
.fxg img[button]:not([disabled]):hover {
	background-color: #e7e7e7;
}

/* Labela "(nema zapisa)" koja se pojavljuje ispod gridova za koje nije dohvaćen niti jedan podatak. */
[nema-zapisa-label] {
	font-style: italic;
	margin-bottom: 1.5em;
	width: 100%;
	border-top: 1px solid var(--lumo-contrast-40pct);
	padding: 6px 0;
}
[nema-zapisa-label-no-border] {
	font-style: italic;
	width: 100%;
	padding: 6px 0;
}

/* Retci u tabeli "raspis kat. čestica" koji su "čestice" su normalne, a na retke koji su ostali djelovi
raspisa (zgrade, uporaba) se primjenjuje ova klasa kako bi bili drugačiji. */
.kt-pop-cest-raspis {
	color: var(--lumo-secondary-text-color);
	border-top: 1px solid transparent !important;
}
/* Kolona "broj detaljnog lista" u tabelama "Popis kat. čestica" i "Popis kat. čestica - raspis" */
.kt-pop-cest-dl, .kt-pop-cest-raspis-dl {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block !important; /* Jer su inače ćelije u gridu flex */
}

/* Poseban stil za vrijednost površine koja nije ispravna */
.kt-pop-cest-raspis-povrsina-error {
	color: #f84343;
}

/* Može se postaviti, ako bude trebalo, da se prilikom prelaska miša preko retka u flex gridu uvijek mijenja
boja pozadine (bez da je potrebno da taj grid ima click handler). Osim ovoga treba i u commons.js postaviti
da se na retke grida uvijek dodaju click listneri (funkcija addClickListenerToSlots()).
.flex-grid.fxg > div.c {
	background-color: #f7f7f7;
}
*/
.flex-grid[clickable].fxg > div.c {
	background-color: #f7f7f7;
}
.flex-grid > div {
	transition: box-shadow 0.2s; /* kratka animacija boje na hover */
}
/* Samo drugi div u flex gridu ima box-shadow ZA OZNAČAVANJE RETKA PREKO KOJEGA SE NALAZI MIŠ. "Drugi" div je onaj skroz na
lijevoj strani koji se vidi na velikom ekranu. ("Prvi" div je skriven na velikom ekranu i prikazuje se samo na malom ekranu) */
.flex-grid[clickable] > div:nth-child(2 of .c) {
	box-shadow: inset 3px 0 0 0 var(--lumo-primary-color);
}

table td.lbl {
	white-space: nowrap;
	vertical-align: top;
}


/* Spaceri */
div.spacer-s {
	height: 0.33rem;
	width: 0.33rem !important;
	flex-shrink: 0;
}
div.spacer {
	/* TODO: zamijeniti 1rem sa --lumo-size-m, također i ostale veličine spacera?
	    https://vaadin.com/docs/latest/styling/lumo/design-tokens/size-space
	    Te veličine iz lumo teme nisu skroz jednake kao ove ovdje (ali nisu ni jako različite), pa
	    vidjeti kako bi to izgledalo. */
	height: 1rem;
	width: 1rem !important;
	flex-shrink: 0;
}
div.spacer-l {
	height: 1.66rem;
	width: 1.66rem !important;
	flex-shrink: 0;
}
div.spacer-xl {
	height: 2.33rem;
	width: 2.33rem !important;
	flex-shrink: 0;
}


/* Tekstovi u ćelijama unutar FlexGrid-a moraju biti podebljani */
.flex-grid [class*="rw"], /* Običan tekst u gridu */
.flex-grid [class*="rw"] div, /* TextLabel u gridu */
.flex-grid .data {
	font-weight: 600; /* semibold */
	font-size: 0.9rem;
}

/* Drugačija boja teksta u flex gridu ako redak prikazuje stvarnu osobu (to je "oznaka izvora") */
.flex-grid .stvarni-korisnik {
	color: #3a60e5;
}
.flex-grid .neaktivni-korisnik {
	color: #f84343;
}
.flex-grid .javni-korisnik {
	color: #eea500;
}

/* Drugačija boja teksta u flex gridu ako redak prikazuje zapis koji nije aktivan (entitet sa "statusom zapisa") */
.flex-grid .neaktivni-zapis {
	color: #f84343;
}

/* TextFieldLabel komponenta (to je običan div) koja se koriti za PRIKAZ PODATKA. */
div.val {
	font-size: var(--lumo-font-size-m);
	font-weight: 600;
	padding-bottom: 0.2em;
}
div.val vaadin-icon {
	width: 22px;
	height: 22px;
	/* margin-bottom je mala korekcija kako bi ikona bila vertikalno centrirana u odnosu na ostali tekst.
	Vrijednost je jednaka: --lumo-line-height-m (to je 26px) - visina ikone (to je 22px) / 2 = 2px  */
	margin-bottom: 2px;
}

/* Ako treba običnu labelu stiizirati kao i ostale labele koje prikazuju podatke */
.bold-label {
	font-weight: 700;
}

/* OIB brojevi se prikazuju sa malim razmakom između znamenki kako bi bili čitljiviji */
.oib-column {
   letter-spacing: 2px;
}
.oib-column-narrow {
   letter-spacing: 1px;
}
.oib-label {
   letter-spacing: 3px;
}

/* Za FieldLabel komponente kojima ne treba prikazivati "value" dio komponente (npr. ako će se
ispod "label" dijela komponente staviti slika). Field label komponenti postaviti klasu: hide-value */
.hide-value[field-label] div[part="value"] {
	display: none;
}


[confirm-dialog] vaadin-icon[part="icon"],
[message-dialog] vaadin-icon[part="icon"],
[error-dialog] vaadin-icon[part="icon"],
[progress-dialog] vaadin-icon[part="icon"] {
	width: 22px;
	height: 22px;
	margin: 6px 8px 0 0;
}

[progress-dialog] vaadin-icon, [progress-dialog-dialog] h3 {
	color: #3176d6;
}

.header {
	padding: 10px 10px 10px 10px;

	background-color: #081e3f;
	height: 55px;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	z-index: 3;
}

.header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header .logo img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 36em) {
   .header .logo {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 100%;
  }
  
  .header .logo img {
    height: 50%;
    width: auto;
  }
}

.header .menu-button {
	gap: var(--lumo-space-s);
	width: auto;
	align-items: start;
	padding: 6px 10px 6px 10px;
	box-sizing: border-box;
	border-bottom: 4px solid #081e3f;
	transition: border-bottom 0.2s; /* kratka animacija boje na hover */
	cursor: pointer;
	min-height: 46px;
}
.header .menu-button:hover, .header .menu-button[highlight] {
	border-bottom: 4px solid white;
}
.header .menu-button .menu-button-text {
	color: white;
	text-transform: uppercase;
	font-size: 15px;
	line-height: 1;
}

/* Kako menu itemi u headeru (odabir modula) ne bi pokazivali underline na tekstu, jer su omotani u anchor tag */
.header a {
	text-decoration: none;
}

.header-pocetna {
	padding: 10px 10px 10px 10px;

	background-color: #ffffff;
	height: 55px;

	position: fixed;
	top: 0;
	left: 0;
	bottom: 80px; /* Ovo je visina headera */
	width: 100%;

	z-index: 3;
}

/** Checkbox unutar flex-grida KOJI NEMA SPACING dobija malu marginu gore i dolje, jer inače izgleda previše blizu komponentama
koje su ispod i iznad njega. Druge komponente izgledaju ok. */
.flex-grid:not([theme*="v-spacing"]) > div > vaadin-checkbox {
	margin: 0.4em 0;
}

.titlebar {
	/*background-image: linear-gradient(to right, #335183 , #88C1D6); <-- Plava */
	/* background-image: linear-gradient(to right, #081e3f 60%, #18b877 100%); */
	/*background-image: linear-gradient(20deg, #19223D 48%, #37AF76 100%);*/
	background-image: linear-gradient(20deg, #394158 48%, #53b888 100%);
	color: white;
}

.main-title {
	font-size: 40px;
	font-weight: bold;
	color: var(--lumo-header-text-color-2);
}

.main-title-inverse {
	font-size: 40px;
	font-weight: bold;
	color: white;
}

/** Dodaje se pomak kako naslov nebi bio poravnat na sam vrh stranice i time bio skriven ispod
header-a, već se odmiče od vrha za visinu header-a.*/
#provjerite-ovdje-naslov {
	scroll-margin-top: 60px;
}

.sub-title {
	font-size: 28px;
	font-weight: bold;
	color: #33B881;
}

[titlebar-content] {
	padding: var(--lumo-space-xs) var(--lumo-space-m);
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}
[titlebar-content] [title] {
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	font-weight: 600;
	margin-top: 4px;
}
[titlebar-content] [subtitle] {
	font-size: 14px;
}
[titlebar-content] [id] {
	font-size: 12px;
	font-weight: 600;
	color: #e1e1e1;
}
[titlebar-content] > vaadin-vertical-layout {
	/* Ima marginu koja pomiče titlebar malo desno kako se ne bi preklapao sa hamburger menijem (.context-menu-icon)
	 koji je pozicioniran otpriloke gdje je i ovaj titlebar. Na velikom ekranu se poništava ova margina. */
	padding-left: 42px;
	transition: padding-left 0.3s;
}

.naziv-aplikacije-label {
	font-size: 18px;
	font-weight: 600;
	color: #fff3eb;
	white-space: nowrap;
}

.title-label {
	font-size: 12px;
	font-weight: 600;
	color: #fff3eb;
	white-space: nowrap;
}
.subtitle-label {
	font-size: 18px;
	font-weight: 600;
	color: #fff3eb;
	white-space: nowrap;
}

.white-space-nowrap {
	white-space: nowrap !important;
}

.footer {
	pointer-events: none;
	color: #666666;
	/**
	https://www.w3.org/TR/css-flexbox-1/#auto-margins "Aligning with auto margins. Prior to alignment via
	justify-content and align-self, any positive free space is distributed to auto margins in that dimension."

	Ova margina je zato da footer bude uvijek na dnu stranice. Objašnjenje - ApplicationLayout ima min-height: 100%;
	kako bi mu visina bila najmanje kao cijela stranica. Ako trenutni view nema puno sadržaja, ApplicationLayout, koji
	ima visinu 100% sada ima "viška" visine (positive free space). Taj višak visine će otići u gornju marinu footera,
	pa će footer biti zguran na dnu stranice.
	 */
	margin-top: auto;
	z-index: 10;
}

.footer-tekst {
	pointer-events: auto;
	font-size: 13px;
	background-color: #FFFFFF;
	padding: 0 4px;
	border-radius: 2px;
}

.footer-link {
	pointer-events: auto;
	font-size: 13px;
	color: #666666;
}

.footer-link:not(:any-link) {
	color: #666666;
}

.footer-link:not(:any-link):hover {
	text-decoration: underline;
}

.header-naziv-korisnika {
	color: #FFF;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	padding-right: 15px;
	line-height: 1;
	max-width: 200px;
}
.header-login {
	color: #FFF;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	padding-right: 15px;
	line-height: 1;
}
.header-login[inversed] {
	color: var(--lumo-header-text-color);
}
.header-naziv-korisnika[inversed] {
	color: var(--lumo-header-text-color);
}

.header-korisnik-info {
	flex-shrink: 0;
	border-left: 1px solid white;
}

.header-korisnik-info[inversed] {
	border-left: 1px solid var(--lumo-header-text-color);
}

.header-context-menu-icon {
	flex-shrink: 0;
	margin-left: 16px;
	width: 30px;
	height: 30px;
	color: white;
}

.header-naziv-korisnika-mali {
	font-size: var(--lumo-font-size-xs);
	color: #efefef;
}

/* Slike koje imaju border */
img.border {
	border: 1px solid #bbbbbb;
}

/* Za drugi red kućica u FlexGrid-u (za gridove koji imaju dvije linije teksta u retku) */
.fxg.border div.subdata {
	border-top: none;
	padding-top: 0;
	margin-top: -10px;
	color: #808080;
	font-weight: 400; /* normal */
	font-size: 13px;
}

/* Drugačija boja teksta u flex gridu ako redak prikazuje stvarnu osobu (to je "oznaka izvora") */
.fxg.border div.subdata.stvarni-korisnik {
	color: #5778ec;
}
.fxg.border div.subdata.neaktivni-korisnik {
	color: #f84343;
}
.fxg.border div.subdata.javni-korisnik {
	color: #eea500;
}

/* Drugačija boja teksta u flex gridu ako redak prikazuje zapis koji nije aktivan (entitet sa "statusom zapisa") */
.fxg.border div.subdata.neaktivni-zapis {
	color: #f84343;
}

.fxg.border div.subdata > div {
	font-weight: 400; /* normal */
	font-size: 13px;
}

.fxg[clickable].border > div:nth-child(1 of .subdata.c) {
	box-shadow: inset 3px 0 0 0 var(--lumo-primary-color);
}

/* Stil za TextLabelWithIcon komponentu */
[label-with-icon] > div {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	caret-color: transparent;
	color: #999;
}
[label-with-icon] > div > vaadin-icon {
	flex-shrink: 0;
	width: 16px;
	height: 22px;
	margin-right: 5px;
}

/* Stil za RouterLinkWithIcon komponentu */
[router-link][with-icon] > div {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	caret-color: transparent;
}
[router-link][with-icon] > div > vaadin-icon {
	flex-shrink: 0;
	width: 16px;
	height: 22px;
	margin-right: 5px;
}

[router-link][povratak] {
	margin-top: 1rem;
}

.header [router-link][with-icon] > div {
	align-items: center;
	margin-bottom: 4px;
}
.header [router-link][with-icon] span {
	line-height: 20px;
}

[router-link][with-icon][header] {
	font-size: 16px;
	font-weight: 600;
	color: #fff3eb;
}
[router-link][with-icon][header] > div > vaadin-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 5px;
}


/* Div koji sadrži gumbe glavnog menija aplikacije */
.menu {
	/*position: absolute;*/
	height: 36px;
	/*top: 143px; !* 164px visina headera - 36px visina menija + 16px margina application div-a *!*/
	width: 100%;
	/*max-width: 1350px;*/
	/*background-color: rgba(50, 50, 50, 0.15);*/
	padding: 5px 10px 5px 10px;
}

a {
	font-weight: 400;
	font-size: 16px;
	color: var(--lumo-body-text-color);
}
.header a {
	font-weight: 100;
	font-size: 16px;
	color: #fff3eb;
}

vaadin-button.no-margin {
	margin: 0;
}

/** Stil se može dodati vertikalnom layoutu kojemu se želi ograničiti visina, jer bi zbog većeg broja itema
koji će se staviti u njega, layout zauzeo previše prostora (ovako će imati vertikalni scrollbar). */
.layout-with-max-height {
	width: 100%;
	min-height: 55px;
	max-height: 300px;
	font-weight: 600;
	overflow-y: auto;
	border: 1px solid #d0d0d0;
}

@media (min-width: 1024px) {
	.pomoc-view {
		margin-top: 100px;
		margin-left: 150px;
	}

    body.landing-active, html.landing-active {
        background-image: url('images/icons/pocetna/landing5.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 100vh;
        margin: 0;
    }
    
    .landing-active .footer-tekst {
		background-color: #F9F9F9;
	}
}

@media (max-width: 36em) {
	.geodet-image {
    	width: calc(105% + var(--lumo-space-m) + var(--lumo-space-m));
    	margin-left: calc(var(--lumo-space-m) * -1);
	}
}

/* .or je klasa za div koji izgleda kao horizontalni divider (linija) sa tekstom u
sredini - tipično će to biti tekst 'ILI' */
.or {
	position: relative;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.or::before,
.or::after {
	position: absolute;
	width: 45%;
	height: 1px;
	top: 24px;
	background-color: #aaa;
	content: '';
}

.or::before {
	left: 0;
}
.or::after {
	right: 0;
}

/** Može se postaviti na flex grid cell ako se ne želi padding (sadržaj onda ide od ruba do ruba) */
.flex-grid.fxg .no-padding {
    padding: 0;
	z-index: 1;
}
/** Može se postaviti na flex grid sa BORDER temom ako se ne želi border oko grid-a (nego samo da ima
border između redova) */
.flex-grid.fxg.no-outer-border {
    border: none;
}

/* Tab-ovi u tabsheetu */
[tabsheet][orientation="horizontal"] vaadin-vertical-layout[tab] {
	/* Bez bordera: */
	/*border: 0;*/

	/* Sa laganim sivim borderom: */
	border-top: 0;
	border-left: 1px solid var(--lumo-contrast-30pct);
	border-right: 1px solid var(--lumo-contrast-30pct);
	border-bottom: 1px solid var(--lumo-contrast-30pct);
}

.filter-naslov {
    font-size: 21px;
    color: var(--lumo-header-text-color);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    margin-bottom: 8px;
}

div .filter {
	display: flex;
	flex-flow: row wrap;
	box-sizing: border-box;
	font-size: 12px;
	color: white;
}

div .filter > * {
	margin: 0 10px 5px 0;
	padding: 2px 8px 2px 8px;
	border-radius: 5px;
	background-color: #737373;
}

div .filter .bold {
	font-weight: 600;
}


/** Caption u dialogu, ako je dialog postavljen kao "draggable" */
h3.draggable {
	cursor: move;
	user-select: none;
}

.pz-naslovna-naslov {
	color: var(--lumo-body-text-color);
}

/** Može se postaviti na flex grid cell ako se ne želi padding (sadržaj onda ide od ruba do ruba) */
.flex-grid.fxg .left-right-padding {
	padding: 0 5px;
}


/* Za flexgrid ili neki drugi container (div ili flex layout) koji treba imati zaobljeni border,
 treba postaviti css klasu 'round-borders' */
.flex-grid.border.round-borders {
	border: 1px solid var(--fxg-border-color);
	border-radius: var(--lumo-border-radius-m);
	padding: calc(var(--lumo-space-m)/2);
}
.flex-grid.border.round-borders > div {
	border-top: none;
}

.round-borders:not(.flex-grid) {
	border: 1px solid var(--fxg-border-color);
	border-radius: var(--lumo-border-radius-m);
	padding: var(--lumo-space-m);
}
.empty-round-borders:not(.flex-grid) {
	border: 1px solid transparent;
	padding: var(--lumo-space-m);
}

/* Stil za FeatureInfo popup na OpenLayers karti */
.ol-popup {
  	position: absolute !important;
  	background-color: white;
  	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 	padding: 12px;
  	border-radius: 10px;
  	border: 1px solid #cccccc;
  	top: 1px;
  	left: 1px;
  	min-width: 280px;
  	font-size: 12px;
}
.ol-popup-closer {
	color: #4083d3;
	cursor: pointer;
	width: 18px;
	height: 18px;
}
.ol-popup hr {
	margin: 0;
}

[cookie-btn] {
	position: fixed;
	cursor: pointer;
	bottom: 10px;
	right: 10px;
	z-index: 12; /* Mora biti veći od footer-a */
	width: 47px; /* Širina slike ([cookie-btn] > img) + 2x margina (lijeva + desna) */
	height: 47px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
[cookie-btn] > img {
	border: none;
	width: 35px;
	height: 35px;
	margin: 6px;
}

[cookie-consent] {
	width: 100%;
	max-width: 700px;
	position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 11;
    background-color: white;
    color: #484848;
	box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
	font-size: 14px;
}
@media (max-width: 48em) {
	/* Na manjim ekranima se cookie consent dialog širi od ruba do ruba */
	[cookie-consent] {
		right: 0;
		left: 0;
		bottom: 0;
		max-width: none;
	}
}

[cookie-consent] label {
	padding-top: 0; /* Labele defaultno imaju padding, pa se ovdje ne bi centrirala unutar layouta */
	max-width: 100px;
	width: 100%;
}

[cookie-consent] [anchor] {
	color: #484848;
	text-decoration: underline;
}

[cookie-consent] h3 {
	color: #484848;
}

[cookie-consent] [info-btn] {
	width: 25px;
	height: 25px;
	border: none;
	margin-left: 25px;
	margin-bottom: 5px;
}

[cookie-consent] [detail] {
	font-size: 12px;
	margin-bottom: 10px;
}

[cookie-detail] [anchor] {
	color: var(--lumo-body-text-color);
	text-decoration: underline;
}

.post-stamp-icon {
	height: 120px;
	width: 100px;
	margin-right: 20px;
	margin-top: 20px;
}

[system-notification] {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
}