/*This file contains structural css. These css settings are the part of the framewrok and can determine the working of
js and PHP programs! Be careful!!! 

If you want to redesign or customize the css please use the design.css instead. 
 */

/*The topmost structural level. */
body
{	
	padding: 0;
	margin: 0;
	height: 100%;
}
html, body,* 
{
  box-sizing: border-box;
}


*:focus
{
	outline:none;
}

/*Forms: the framework can handle any html div as a form, not only the native html forms. */
[data-aid="form_section"]
{
	empty-cells: hide;
}

div[data-aid="form"], form
{
	background-color: inherit;
}

div[data-aid="form_element"].iui_form_element_vertical
{
	
}

/*Form field conatiner: html div or table element for displaying additional information on form elemets 
such as filering or error feedback, explanation texts, etc. */
div[data-aid="form_field_container"]
{
	float: left;
	clear: none;
	
}

[data-aid="form_field_container"] td:empty,
[data-aid="form_field_container"] div:empty,
[data-aid="form_field_container"] span:empty
{
  width: 0px;
  display: block;
}

tr[data-aid="form_field_container"].iui_form_element_vetical td
{
	
}

tr[data-aid="form_field_container"].iui_form_element_horizontal td:nth-child(1)
{
	white-space: nowrap;
}
@media only print
{
	tr[data-aid="form_field_container"].iui_form_element_horizontal td:nth-child(1)
	{
		width: 25% !important;
	}
}




div[data-aid="form_field_container"].iui_form_element_div
{
	
}

/*! A div-es űrlapelem magyarázó szövege alatt akkora hely maradjon, amekkorát a hibajelzés
 * foglalna (15px-es jelzés + 5px margó, lásd .c_status_err). Enélkül a magyarázat közelebb
 * kerül a következő űrlapelemhez, mint ahhoz a mezőhöz, amelyikhez tartozik.
 * Csak a div-es űrlapelemre vonatkozik, a többi űrlapelem-típust nem érinti. */
.iui_form_element_div div[data-aid="explanation"]:not(:empty)
{
	padding-bottom: 20px;
}


/*###################### ÖNMAGÁT ELRENDEZŐ ŰRLAPELEM (c_form_element_div_auto) ######################*/

/*! Az új, div-alapú űrlapelem szerkezete: egyetlen grid konténer, közvetlenül alatta az items.
 * A konténer position: relative, mert a hiba- és a magyarázat-buborék abszolút pozicionált
 * gyermekként ide kerül be, és a saját grid-területéhez képest kell elhelyezni.
 * A float azért kap kifejezett none értéket, mert a fenti, minden form_field_container-re
 * vonatkozó szabály lebegtetné — ez az elem viszont a normál flow-ban él.
 * Maga az elrendezés két css változóban ül. Így a vízszintes és a függőleges változat között
 * egyetlen értékadás a különbség, és a szabály nem duplázódik média-fájlonként.
 * A címkeoszlop alapból a leghosszabb címkéhez igazodik. Mivel minden űrlapelem külön grid,
 * a szomszédos elemek címkéi így nem egy vonalban kezdődnek. Ha egy űrlapon ez zavaró, a
 * befoglaló dobozon megadható a --i_form_element_label_width változó (pl. 200px), és akkor
 * minden alatta lévő elem ugyanolyan széles címkeoszlopot kap.
 * Az alapértelmezés a függőleges elrendezés: a címke a mező fölött van, alattuk egy sorban a
 * súgó és a hibajelzés, legalul a magyarázat. Ez egyben az automatikus elrendezés kiindulása
 * is: ha nincs fölötte query konténer, vagy szűk a hely, ez marad érvényben. */
div[data-aid="form_field_container"].iui_form_element_auto
{
	display: grid;
	position: relative;
	float: none;
	clear: none;
	grid-template-areas: var(--a_form_element_areas);
	grid-template-columns: var(--i_form_element_columns);
	margin-bottom: var(--i_form_element_margin_bottom);

	--a_form_element_areas:
		"label label"
		"field field"
		"helper error"
		"explanation explanation";
	--i_form_element_columns: var(--i_form_element_label_width, max-content) minmax(0px, 1fr);
	--i_form_element_field_padding_bottom: var(--i_form_element_field_padding_bottom_vertical);
	--i_form_element_label_padding_right: 0px;
	--i_form_element_label_padding_bottom: 0px;
	--i_form_element_label_align: start;
	--i_form_element_label_text_align: left;
	--i_form_element_margin_bottom: 0px;
	--i_form_element_padding_bottom: var(--i_form_element_padding_bottom_vertical);
	--i_form_element_border_bottom: var(--i_form_element_border_bottom_vertical);
}

/*! Az elem részei a grid nevesített területein. A data-aid marad az azonosító, a grid-area
 * név ennek rövid megfelelője. */
/*! A címke a saját területének tetején áll, vízszintes elrendezésben viszont függőlegesen
 * középen, mert ott a mellette lévő mező magasabb nála. Az igazítás azért változó, hogy a
 * vízszintesre váltás egyetlen szabály legyen a média-fájlokban.
 * A vízszintes igazítás ugyanígy változó, jelenleg mindkét elrendezésben balra zárva. A
 * mechanizmus azért marad, mert a vízszintes elrendezésben a jobbra zárás is védhető — akkor
 * a különböző hosszú címkék mezőhöz közelebbi széle kerül egy vonalba —, és a váltáshoz elég
 * ezt az egy változót átírni a média-fájlok vízszintes blokkjaiban.
 * A text-align értékét a design.css szabálya olvassa ki: az ottani szabály elég erős ahhoz,
 * hogy a régi űrlapelemek balra igazító szabályát felülírja. */
.iui_form_element_auto > [data-aid="element_label"]
{
	grid-area: label;
	align-self: var(--i_form_element_label_align);
}
/*! A mező területe. A min-width azért kell, mert a rács elemének alapértelmezett minimuma a
 * tartalmának min-content szélessége: enélkül egy hosszú, nem törhető érték — például egy
 * elérési út — kifeszítené a területet, és vele az egész lapot. Ugyanezért van az oszlop
 * alsó korlátja is nullára véve (minmax(0px, 1fr)): a kettő együtt adja, hogy a mező a
 * rendelkezésre álló helyhez igazodjon, és a hosszú érték a mezőn belül gördüljön.
 * A vízszintes térközt itt, a területen adjuk, és nem a mezőn: a mezők (input, select,
 * textarea, checklist, felirat) a design.css-től 1px oldalsó margót kapnának, a modulok
 * viszont width: 100%-ot állítanak rájuk. A kettő együtt 2px-szel szélesebb dobozt ad, mint
 * a rács cellája, amitől a lap vízszintesen görgethetővé válik — láthatatlanul keskeny
 * túllógással, de valódi gördítősávval. Ugyanaz a térköz padding formájában viszont a
 * százalékos szélesség alapjából von le, tehát a mező pontosan kitölti a cellát. */
.iui_form_element_auto > [data-aid="field_container"]
{
	grid-area: field;
	min-width: 0px;
	padding-left: 1px;
	padding-right: 1px;
}

/*! A mező oldalsó margóját a terület padding-ja váltja ki (lásd fent). A szelektor azért
 * ilyen hosszú, mert a margót adó design.css szabályok elemtípust és osztályt is tartalmaznak
 * (pl. [data-aid="field_container"] span.iui_caption), és azoknál erősebbnek kell lennie. */
div[data-aid="form_field_container"].iui_form_element_auto > [data-aid="field_container"] > *
{
	margin-left: 0px;
	margin-right: 0px;
}
.iui_form_element_auto > [data-aid="helper"]
{
	grid-area: helper;
}
/*! A hibajelzés a saját területének elejére kerül, és nem feszül ki a terület szélességére:
 * ez egy kis kerek jelzés, nem sáv. A méretét a design.css adja, mert a jelzést a js
 * osztályként teszi rá, tartalmat nem tesz bele, üres divként pedig nulla széles lenne. */
.iui_form_element_auto > [data-aid="error"]
{
	grid-area: error;
	justify-self: start;
	align-self: start;
}
.iui_form_element_auto > [data-aid="explanation"]
{
	grid-area: explanation;
}

/*! A haladó beállításokat a rendszer display: unset-tel fedi fel, ami div-nél inline-t
 * jelentene, és szétesne a grid. Ezért a felfedés ennél az elemnél is grid marad. */
.iui_advanced_view div[data-aid="form_field_container"].iui_form_element_auto.iui_advanced
{
	display: grid;
}

/*! Buborékos módban a magyarázat szövege nem foglal helyet az űrlapon. A div maga megmarad,
 * mert az oldalon belüli keresésnek és a keresőrobotnak jól jöhet a szöveg. */
.iui_form_element_auto.iui_form_element_explanation_tooltip > [data-aid="explanation"]
{
	display: none;
}

/*! Query konténer az automatikus elrendezéshez: az elem ennek a doboznak a szélességét méri.
 * Csak olyan dobozra tehető rá, aminek a szélessége nem a tartalmától függ (blokk elem a
 * normál flow-ban); lebegtetett, szélesség nélküli dobozon a container-type összeomlasztaná.
 * Ha egy űrlapelem fölött nincs ilyen doboz, akkor a függőleges elrendezés marad érvényben. */
.iui_form_element_container
{
	container-type: inline-size;
}

/*! Közös rács: az egymás alatt álló űrlapelemek címkéi egy vonalban kezdődjenek, a mezőik
 * pedig egy vonalban álljanak. Enélkül minden űrlapelem külön grid, és mindegyik a saját
 * címkéjéhez igazodik — ettől a hosszabb és rövidebb címkék rendetlen, lépcsős képet adnak.
 * A megoldás a subgrid: a befoglaló doboz adja az oszlopokat, az űrlapelemek pedig
 * átveszik őket. Az első oszlop így a leghosszabb címkéhez igazodik, magától.
 * A --i_form_element_label_width változóval fix szélességű címkeoszlop is kérhető.
 * Ha a böngésző nem ismeri a subgrid-et, akkor ez a szabály érvénytelen, és minden űrlapelem
 * a saját oszlopait használja: pontosan a közös rács nélküli, régi viselkedés.
 * Az align-content: start azért kell, mert a rács a rendelkezésre álló helyet is megkaphatja
 * (például a fás lapozó lapján): enélkül a sorait szétfeszítené, hogy kitöltse.
 * A közös rács szándékosan külön kapcsoló a query konténertől: ha egy modul maga rendezi
 * gridbe az űrlapelemeit, akkor a mérési pont kell, a közös rács viszont nem. */
.iui_form_element_grid
{
	display: grid;
	grid-template-columns: var(--i_form_element_label_width, max-content) minmax(0px, 1fr);
	align-content: start;
}

/*! A címke oszlopa a saját tartalmához igazodik, nem az űrlap közös szélességéhez. Az auto
 * track a tartalomhoz nő, de szűk helyen zsugorodik is — a max-content ezzel szemben kilógna
 * a cellából. Az elem saját deklarációja erősebb az űrlapról öröklött értéknél, ezért ehhez
 * nem kell erős szelektor.
 * Akkor való, ha az érték rövid — igen/nem, egy szó —, mert ilyenkor a közös címkeoszlop
 * nagyobb hézagot hagy a címke és a saját értéke közé, mint az érték és a következő elem
 * címkéje közé; a szem így rossz párokat olvas össze. */
.iui_form_element_auto.iui_form_element_label_fit
{
	--i_form_element_label_width: auto;
}

/*! A rácsba tett elemek a teljes szélességet elfoglalják: az űrlapelem egy sor. */
.iui_form_element_grid > *
{
	grid-column: 1 / -1;
}

/*! Az automatikus űrlapelem a saját oszlopai helyett a befoglaló doboz oszlopait használja. */
.iui_form_element_grid > div[data-aid="form_field_container"].iui_form_element_auto
{
	grid-template-columns: subgrid;
}

/*! A hibaüzenet buboréka mindig a mező alatt jelenik meg, mert arra mutat. Abszolút
 * pozicionált gyermekként a grid konténer a containing block, a grid-area pedig kijelöli,
 * melyik területhez képest kell elhelyezni. */
.iui_form_element_auto > .iui_form_element_tooltip_error
{
	grid-area: field;
	top: 100%;
	left: 0;
}

/*! A magyarázat piktogramja a címke szövege után áll. Alapból nincs sehol: csak akkor
 * jelenik meg, ha van magyarázat, és a buborékos mód is be van kapcsolva. A szelektorok azért
 * ilyen erősek, mert az üres elemekre vonatkozó fenti szabály (span:empty) különben
 * felülírná a rejtést, és a piktogram magyarázat nélkül is ott ülne a címke alatt.
 * A position: relative azért kell, mert a buborék ebbe a kis dobozba kerül bele, és ehhez
 * igazodik — így a buborék nyila akkor is a piktogramra mutat, ha a címke rövid vagy hosszú. */
div[data-aid="form_field_container"].iui_form_element_auto [data-aid="explanation_icon"]
{
	display: none;
}
div[data-aid="form_field_container"].iui_form_element_auto.iui_form_element_has_explanation.iui_form_element_explanation_tooltip [data-aid="explanation_icon"]
{
	display: inline-block;
	position: relative;
}

/*! A címke nem vághatja el a buborékot, ezért itt nem takarhatjuk el a kilógó tartalmat.
 * A szelektor azért hordozza a div-et is, mert az alapértelmezett, overflow: hidden-t adó
 * szabály (design.css) elemtípust is tartalmaz, és enélkül erősebb lenne ennél. */
div[data-aid="form_field_container"].iui_form_element_auto > [data-aid="element_label"]
{
	overflow: visible;
}

/*! A magyarázat buboréka a piktogram fölött jelenik meg, mert arra kattintva nyílik.
 * A negatív bal érték azért kell, mert a buborék nyila nem a bal szélén, hanem 10 px-re
 * attól áll: így kerül a nyíl csúcsa a piktogram közepe alá (a piktogram fele szélessége
 * mínusz a nyíl 18 px-es középvonala).
 * A width: max-content nélkül a buborék beszorulna a piktogram szélességébe: abszolút
 * pozicionált elemnél a szülő doboz szabja meg a rendelkezésre álló helyet, a piktogram
 * pedig alig 13 px széles. A felső korlátot a design.css adja. */
[data-aid="explanation_icon"] > .iui_form_element_tooltip_explanation
{
	top: auto;
	bottom: 100%;
	left: -13px;
	width: max-content;
	margin-top: 0;
	margin-bottom: 6px;
}

/*! A fölfelé nyíló buboréknál a nyíl a doboz alján áll és lefelé mutat. A c_iui_tooltip
 * két háromszöget rajzol egymásra: az első a keret színe, a második a háttéré, ez adja ki a
 * vékony keretes hatást. A színek a design.css-ben vannak, itt csak a geometria.
 * A szelektor azért hordozza az iui_tooltip osztályt is, hogy erősebb legyen az alapértelmezett
 * buborék-szabálynál, ami a design.css-ben, tehát később töltődik be. */
.iui_tooltip.iui_form_element_tooltip_explanation div:nth-child(1),
.iui_tooltip.iui_form_element_tooltip_explanation div:nth-child(2)
{
	top: 100%;
	border-bottom: 0;
	border-top-width: 8px;
	border-top-style: solid;
}
.iui_tooltip.iui_form_element_tooltip_explanation div:nth-child(1)
{
	margin-top: 0;
}
.iui_tooltip.iui_form_element_tooltip_explanation div:nth-child(2)
{
	margin-top: -2px;
}

/*! Ha a piktogram fölött nincs elég hely — például az elem a görgethető tartalmi terület
 * tetején van —, akkor a buborék a piktogram alá fordul. A billentést a js végzi, mert kilógást css-ből
 * nem lehet észlelni; itt csak a fenti, fölfelé nyíló változat beállításait vonjuk vissza. */
[data-aid="explanation_icon"] > .iui_form_element_tooltip_explanation.iui_form_element_tooltip_explanation_below
{
	top: 100%;
	bottom: auto;
	margin-top: 6px;
	margin-bottom: 0;
}
.iui_tooltip.iui_form_element_tooltip_explanation.iui_form_element_tooltip_explanation_below div:nth-child(1),
.iui_tooltip.iui_form_element_tooltip_explanation.iui_form_element_tooltip_explanation_below div:nth-child(2)
{
	top: auto;
	border-top: 0;
	border-bottom-width: 8px;
	border-bottom-style: solid;
}
.iui_tooltip.iui_form_element_tooltip_explanation.iui_form_element_tooltip_explanation_below div:nth-child(1)
{
	margin-top: -8px;
}
.iui_tooltip.iui_form_element_tooltip_explanation.iui_form_element_tooltip_explanation_below div:nth-child(2)
{
	margin-top: -6px;
}





/*The q html tag: design in the „quoted text” format */

blockquote::before, q::before
{
	content: '„';

}
blockquote::after, q::after
{
	content: '”';

}



/*! A szekció cím-szövege 8 px-rel fölfelé lóg (lásd design.css), hogy a cím vonalára üljön.
 * Ha nincs cím, akkor viszont üresen is elvenne ennyi helyet a fölötte lévő elemtől — ezért
 * az üres cím-szöveg ki sem kerül a lapra. */
[data-aid='title'] + span:empty
{
	display: none;
}

/*Form section titles: a 1px gray underline of the title.*/
[data-aid='title']
{
	width: 100%;
	height: 1px;
	
}
[data-aid='title'] + span
{
	float: right;
	position: relative;
	z-index: 1;
	background-color: inherit;	
}


/*Form input tags...*/
button,input, select,textarea 
{
  margin: 0;
  vertical-align: middle;
  font-family: inherit
}
button, input 
{
  line-height: normal;
}
button::-moz-focus-inner, input::-moz-focus-inner 
{
  padding: 0;
  border: 0;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] 
{
  -webkit-appearance: button;
  cursor: pointer;
}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] 
{
  cursor: pointer;
}
button, input[type="button"], input[type="reset"], input[type="submit"]
{
	min-width: 70px;	
}

/*Ez azért kell mert a google maps-en megjelenő zoomolás gombok eltolódtak a minimum szélesség miatt.*/
div[data-php_class="c_form_field_gmap"] button
{
	min-width: initial;
}

textarea 
{
  overflow: auto;
  vertical-align: top;
  resize: none;  
}


input[type=text]::-ms-clear
{
  display: none;
}


input[type=password]::-ms-reveal 
{
  display: none;
}

*
{
  border-collapse: collapse;
}


input[type="button"], input[type="reset"], input[type="submit"], select, input[type="text"], input[type="password"], textarea,
.iui_select
 {
	text-align: left;
	outline: none;
	/*position: relative;*/
	vertical-align: middle;
}



input[type="button"], input[type="reset"], input[type="submit"]
 {
	text-align: center;
	cursor: pointer;
	
}

select
{
	
}

input[type="text"]
{
	width: 130px;
}


/*Special caption span used in forms displaying simple text.*/
span.iui_caption
{
	
}

[data-aid="field_container"] span.iui_caption
{
	outline: none;
	vertical-align: middle;
}

.iui_checklist table
{
	width: 100%;
}


/*############################# VISUAL COLLECTION'S CSS ####################################*/

/*CSS styles belonging to c_status classes. For example they display form feedback status icons. */
.c_status_err
{
	display: block;	
	background-repeat: no-repeat;
	background-position: center;	

}

.c_status_alert
{
	display: block;	
	background-repeat: no-repeat;
	background-position: center;	
}

.c_status_notice
{
	display: block;	
	background-repeat: no-repeat;
	background-position: center;	
}

.c_status_info
{
	display: block;	
	background-repeat: no-repeat;
	background-position: center;	
}


.c_status_ok
{
	display: block;	
	background-repeat: no-repeat;
	background-position: center;		
}


/*A spcial button object without text but cintaing icon. */
.iui_button
{
	display: block;
	float: left;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
}



/* The css styles of "Notify" 3rd party js library. */


.iui_notify-container {
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  z-index: 1061;
}
.iui_notify-container:before,
.iui_notify-container:after {
  display: table;
  content: "";
}
.iui_notify-container:after {
  clear: both;
}
.iui_notify-container.position-left {
  left: 0;
  right: auto;
}
.iui_notify-container.position-top {
  left: 0;
  right: 0;
  top: 0;
  height: auto;
}
.iui_notify-container.position-top .iui_notify {
  float: left;
}
.iui_notify-container.position-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: auto;
}
.iui_notify-container.position-bottom .iui_notify {
  float: left;
}
.iui_notify {
  display: block;
  margin: .3125rem;
  padding: .625rem;
  min-width: 200px;
  border-radius: 3px;
  cursor: default;
  max-width: 300px;
  position: relative;
}
.iui_notify .iui_notify-icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
  text-align: center;
  position: absolute;
  margin: -16px 10px;
  top: 50%;
  left: 0;
}
.iui_notify .iui_notify-icon ~ .iui_notify-title,
.iui_notify .iui_notify-icon ~ .iui_notify-text {
  position: relative;
  margin-left: 42px;
}
.iui_notify .iui_notify-title,
.iui_notify .iui_notify-text {
  display: block;
  margin-right: 20px;
}
.iui_notify .iui_notify-title {
  font-weight: 500;
  font-size: 1rem;
}
.iui_notify .iui_notify-text {
  font-size: .875rem;
}
.iui_notify .iui_notify-closer {
  position: absolute;
  height: 1rem;
  width: 1rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: normal;
  padding: 0 0 .625rem 0;
  z-index: 3;
  outline: none;
  cursor: pointer;
  background-color: #ffffff;
  color: #777777;
  top: .25rem;
  right: .25rem;
}
.iui_notify .iui_notify-closer:after {
  border-color: #777777;
  content: '\D7';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -0.65rem;
  margin-left: -0.35rem;
}

.iui_notify
{
	
}

/*############################ Treeview PHP class css settings #####################*/
[data-aid="tree_container"]
{
	overflow-y: auto;
	overflow-x: hidden;
}
/*The tree element's label. It contains the text of tree element. */
[data-aid="tree_element_label"]
{
	overflow-x: hidden; /*Az �sszem�retez�sn�l kell*/	
	text-overflow: ellipsis;/*...-ot tesz a levágot szöveg végére. */
	white-space: nowrap;/*Megakad�lyozza a sz�veg t�r�s�t. */
	/*Megakad�lyozza a sz�veg kijel�l�s�t*/
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
	box-sizing: content-box;
	cursor: pointer;
}



/*######################### MENÜ #############################################*/

[data-aid="menu_container"]
{
	
}

[data-aid="menu"]
{

}

[data-aid="menu_element"]
{
	display: table;
	width: 100%;
}

[data-aid="menu_element_part"]
{
	cursor: pointer;
		
}


[data-aid="menu_label"]
{

	white-space: nowrap;/*Megakadályozza a szöveg tördelését. */
	/*Megakadályozzuk a szöveg kijelölését*/
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
	box-sizing: content-box;


}
/*Always capitalize the first letter of the menu*/
[data-aid="menu_label"]:first-letter
{
	text-transform: capitalize;
}

[data-aid="menu_icon"]
{	
	box-sizing: content-box;
	float:left;
	display: block;
}

[data-aid="menu_icon"].shell_icon
{
	background-image: none;
	background-color: inherit;
}



 [data-aid="menu_delimiter"]
{
	display: block;
	height: 0px;
}





[data-aid="menu_container"].iui_menu_main
{

}
[data-aid="menu_container"].iui_menu_main [data-aid="menu"]
{
	display: flex;
}

[data-aid="menu_container"].iui_menu_main [data-aid="menu_element"]
{
	display: block;
}

[data-aid="menu_container"].iui_menu_main [data-aid="menu_label"]
{
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	
}

[data-aid="menu_container"].iui_menu_main [data-aid="menu_label"]:hover
{
}

/*######################### SHELL STRUCTURE CSS SETTINGS ###################
icons and infos belonging to records (shell name, etc) 
In explore_pic modul this is the outermost container of a record's data.*/
.shell_div
{
	display: block; 
	float: left;  
	cursor: pointer; 
	overflow: hidden;
}

.shell_div div.shell_icon
{
	overflow: hidden;
}

.shell_div_text
{
	display: block; 
	background-position: center center ;
	background-repeat: no-repeat;
	float:left;
}
/*Optionally every record can have an 'avatar' picture. 
It is adjustable in c_rec_mod_shell_modify settings. This is the container div 
of the adjusted picture. The picture will be set as background-image. */
.shell_div div.shell_icon div.shell_pic
{
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*Link type icon placeholder. */
.shell_div div.iui_lt_icon
{
	background-size: 80%;
}
/*Meta attribution icons. */
.shell_div .iui_att_icon
{	
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	float: left;
}

.iui_tree_down,
.iui_context_menu,
.iui_context_info
{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	float: right;
}

.shell_div_text .iui_tree_down,
.shell_div_text .iui_context_menu,
.shell_div_text .iui_context_info
{
	width: 22px;
	height: 22px;
}

.shell_tags
{
	position: relative;
	left: -30px;
	top: -90px;

	width: 100px;
	padding-left: 20px;
	padding-right: 20px;
	display: inline-block;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;

	text-transform: uppercase;
	-ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

.shell_tags:hover span
{
margin-left: -300px;
	
}
/* The shell icon's placeholder div. These icons belong to record types. Almost every record type has 
an own icon. See c_rec_data and its descendant records. */
.shell_icon
{
	display: block; 
	background-position: center center ;
	background-repeat: no-repeat;
}

@media print {
  .iui_content_tr
   {
   		page-break-inside: avoid;
   }
}

/*Ez kell ahhoz, hogy a sorokban a tartalom mindig függőleges legyen. */
.iui_content_tr
{
	align-items: center;
	align-self: stretch;
}

[data-aid='w_content_header'] .iui_content_tr,
[data-aid='w_content_header_2'] .iui_content_tr,
[data-aid='table_header'] .iui_content_tr,
[data-aid='list_intersect_header'] .iui_content_tr,
[data-aid='tabs_content_header'] .iui_content_tr
{
	height: auto;
}

/* When using table-like display format, icons located in table rows in a placeholder div. */
.iui_content_tr div.shell_icon, .iui_content_tr div.iui_status_icon, .iui_content_tr div.iui_read_icon,  .iui_content_tr div.iui_event_icon
{
	display: table-cell; 
	cursor: pointer;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 0px;
}
/*When using table-like display format avatar picture placeholder. */
.iui_content_tr div.shell_icon div.shell_pic
{	
	background-size: cover;
	background-position: center center;
	margin: 0px;	
}
/*Attribute icons's placeholder in table-like display format. */
.iui_content_tr div.iui_att_icon, .iui_content_tr div.iui_lt_icon
{	
	background-position: center center;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: top;

}

.iui_content_tr_form
{
	height: 30px;
}

.iui_content_tr_form input
{
	width: 100%;
}


/*Forward and backward buttons */
[data-aid='button_forward']
{
	display: inline-block;
	cursor: pointer;
	float: right;
}

[data-aid='button_backward']
{
	display: inline-block;
	cursor: pointer;
	float: left;
}



/*######################### PSEUDOKÓDOK KEZELÉSE #######################*/


/*######################### FLOWCHART ###################################*/
.jsplumb-connector
{
	
}

.jsplumb-endpoint
{
		z-index:1;

}


div.iui_flowchart
{
	position: relative;
}

div.iui_flowchart div[data-aid="flowchart_element"]
{
	display: block;
	cursor: pointer;
	position: absolute;
	z-index:1;
	opacity: 0.9;

}







.iui_chart_label
{
	display: block;
	cursor: pointer;
	position: absolute;

}

/*########################## TAB OBJEKTUM ###########################*/
.iui_tabs
{

	display: flex;   
	flex-direction: column; 
	height: 100%; 

}

.iui_tabs_header
{
	height:30px; 
	display: flex; 
	flex-direction: row;
	width:100%; 	
}
.iui_tabs_title
{
	display: none;
}

.iui_tabs_menubar_container:empty,
.iui_tabs_menubar:empty
{
	display: none;
}

.iui_tabs_menubar_container:not(:empty)
{
	height:auto; 
	width:100%; 
}

.iui_tabs_menubar:not(:empty)
{
	width:100%; 
}

.iui_tabs_content_header_container:empty,
.iui_tabs_content_header:empty
{
	display: none;
}

.iui_tabs_content_header_container:not(:empty)
{
	height:auto; 
	width:100%; 
}

.iui_tabs_content_header:not(:empty)
{
	height:auto; 
	width:100%; 
}


@media only print
{
	.iui_tabs_header
	{
		display: none !important;
	}
	.iui_tabs_title
	{
		display: inline-block !important;
	}
}
/*
@media only screen and (max-width: 767px) 
{
	.iui_tabs_header
	{
		display: none !important;
	}
	.iui_tabs_title
	{
		display: inline-block !important;
	}
}
*/

.iui_tabs_label
{
	display: block;
	/*width: 80px;*/
	user-select: none;          /* Likely future */  
	box-sizing: content-box;	
	cursor: pointer;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	
		position: relative;
	top: 2px;
/*
	background-color: #EEE;
	color: #888;
	border-right: 1px solid #DDD;
	border-top: 1px solid #FFF;
	border-radius: 5px 5px 0px 0px;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 1px;	
	/*flex-grow: 1;*/
	
}

.iui_tabs_label:hover
{
	overflow: visible;

	/*
	border-left: 1px solid #680082;
  	border-right: 1px solid #680082;
 	border-top: 1px solid #680082;
  	background-color: #eda3ff;
  	color: #000;*/
	
}
.iui_tabs_label.iui_tabs_active
{
	overflow: visible;
/*	background-color: #FFF;
	border-left: 1px solid #AAA;
	border-top: 2px solid #680082;
	border-right: 1px solid #AAA;
	border-bottom: 1px solid #FFF;
	padding-top: 3px;
	color: #000;
*/

}


.iui_tabs_body
{

	width:100%; 
	height: 100%; 
	overflow-y: auto;
}

.iui_tabs_content
{
	display: none;
	/*padding: 10px;*/
	height: 100%; 
}

.iui_tabs_content_header,
.iui_tabs_menubar
{
	display: none;
}

.iui_tabs_content
{
	display: none;
	/*padding: 10px;*/
	height: 100%; 
}

.iui_tabs_content [data-aid="tab_content_fix"]:empty
{
	display: none;
}

.iui_tabs_content [data-aid="tab_content_fix"]:not(:empty)
{
	display: block;
	height: min-content;
	overflow-y: hidden;
}

@media only print
{
	.iui_tabs_content
	{
		display: block !important;
		height: auto !important; 
	}
}
@media only screen and (max-width: 767px)
{
	.iui_tabs_content
	{
		display: block !important;
		height: auto !important; 
	}
}
.iui_tabs_content.iui_tabs_active,
.iui_tabs_content_header.iui_tabs_active,
.iui_tabs_menubar.iui_tabs_active
{
	display: block;
}

/*########################## TAB TREEVIEW OBJEKTUM ###########################*/
/*! A c_iui_tabs_tree a c_iui_tabs fás elrendezésű változata: a lapok címkéi nem felül,
 * hanem oldalt, függőleges listában jelennek meg. A tartalmi oldal osztályai (iui_tabs_content,
 * iui_tabs_menubar, iui_tabs_content_header, iui_tabs_active) szándékosan közösek a tab-bal,
 * itt csak a szerkezeti eltéréseket írjuk felül.
 * Az elrendezés végig rács, nem flex: a részek helye rögzített, és a rácsnál egy pillantásra
 * látszik, mi hol van, ráadásul a sorok és oszlopok mérete külön szabályozható. */

/*! A két oldal: a fa-lista a saját szélességén, mellette a tartalmi oldal a maradékon.
 * A tartalmi oszlop alsó korlátja azért nulla, mert a rács-elem alapértelmezett minimuma a
 * tartalma mérete — enélkül egy széles lap kifeszítené a lapozót. */
.iui_tabs.iui_tabs_tree
{
	display: grid;
	grid-template-columns: auto minmax(0px, 1fr);
	grid-template-rows: minmax(0px, 1fr);
}

/*! A fa-lista a jobb oldalra kerül. A rácsban a sorrendet nem a dom-beli sorrend adja, hanem
 * az oszlop-hozzárendelés, ezért itt mindkét részt kézzel helyezzük el. */
.iui_tabs.iui_tabs_tree.iui_tabs_tree_right
{
	grid-template-columns: minmax(0px, 1fr) auto;
}
.iui_tabs.iui_tabs_tree.iui_tabs_tree_right > .iui_tabs_tree_list_container
{
	grid-column: 2;
}
.iui_tabs.iui_tabs_tree.iui_tabs_tree_right > .iui_tabs_tree_main
{
	grid-column: 1;
}

/*! A lista oldal: fölül a keresőmező, alatta a fa. A szélességét a php oldal állítja be
 * inline stílusként. A fa sorának alsó korlátja nulla, hogy a lista a helyénél magasabb
 * tartalomnál görgethetővé váljon, ahelyett hogy kifeszítené a területet. */
.iui_tabs_tree .iui_tabs_tree_list_container
{
	display: grid;
	grid-template-rows: auto minmax(0px, 1fr);
	height: 100%;
	padding: 10px;
}

/*! A keresőmező területe. A c_iui_treeview keresőjének osztályait viseli, hogy egyforma legyen. */
.iui_tabs_tree .iui_tabs_tree_search
{
	margin-bottom: 5px;
}

/*! Maga a fa. A keresőmező alatt a maradék helyet tölti ki, és ha nem fér el, görgethető.
 * A display és a height felülbírálása azért kell, mert ez az elem a tab fülsorának osztályát
 * is viseli (iui_tabs_header), az pedig 30 px magas, vízszintes sávot csinálna belőle.
 * A grid-auto-rows: max-content azért kell, hogy a sorok a tartalmukhoz igazodjanak: enélkül
 * a rács szétosztaná köztük a rendelkezésre álló magasságot, ahelyett hogy a lista
 * görgethetővé válna. */
.iui_tabs_tree .iui_tabs_tree_list
{
	display: grid;
	grid-auto-rows: max-content;
	height: auto;
	min-height: 0px;
	overflow-y: auto;
	overflow-x: hidden;
}

/*! Általános elrejtő osztály az objektumon belül (keresőmező kikapcsolása, keresés szűkítése) */
.iui_tabs_tree .iui_tabs_tree_hidden
{
	display: none;
}

/*! A lapok fölött megjelenő címsor. A tab-nál ez csak nyomtatásban látszik (mert ott a fülek
 * nem jelennek meg), itt viszont mindig: a fában kiválasztott lap címét ismétli.
 * A címsor nem a lap dobozában ül, hanem a lapok fölötti saját területen — így a lap doboza
 * kizárólag a hívó tartalmát fogja, és a hívó a saját css osztályával rendezheti el a lapot,
 * anélkül hogy ismernie kellene a lapozó belső elemeit. Egyszerre a kiválasztott laphoz
 * tartozó címsor látszik, a többi rejtve marad — ugyanazzal az iui_tabs_active osztállyal,
 * amivel a lapok, a menüsorok és a lista-fejlécek is váltanak. */
.iui_tabs_tree .iui_tabs_title
{
	display: none;
}
.iui_tabs_tree .iui_tabs_title.iui_tabs_active
{
	display: block;
}

/*! A lap doboza. Ez a görgethető terület: kitölti a lapozó maradék magasságát, és ha a
 * tartalma nem fér el, akkor görgethetővé válik. A címsor fölötte, saját területen áll, tehát
 * a görgetés nem viszi el — és nem is takarja el semmi, mert nem tapadó (sticky) megoldás.
 * A doboz rács, hogy a hívó a saját osztályában nevesített területekkel (grid-template-areas)
 * rendezhesse el a lapot; ha nem ad ilyet, a tartalom egyszerűen egymás alá kerül.
 * Az align-content azért start, mert a tartalomnak a lap tetején kell kezdődnie, nem a
 * magasságában elosztva.
 * A min-width és a min-height azért kell, mert a rács-elem alapértelmezett minimuma a tartalma
 * mérete: enélkül a doboz nem tudna a tartalma alá zsugorodni, és nem lenne mit görgetni.
 * Az overflow-x-et azért kell kiírni, mert magától nem marad visible: ha az egyik tengely
 * értéke nem visible, a másik visible értéke auto-ra számítódik. Enélkül a doboz némán
 * vízszintesen is görgethetővé válik, és egyetlen kilógó pixel is gördítősávot ad — olyat,
 * ami a lap teljes szélességét elfoglalja, tehát látványos, miközben nincs mit megmutatnia. */
.iui_tabs_tree .iui_tabs_content.iui_tabs_active
{
	display: grid;
	align-content: start;
	height: 100%;
	min-width: 0px;
	min-height: 0px;
	overflow-y: auto;
	overflow-x: hidden;
}

/*! A lapok külső dobozát nem görgetjük: a görgetés a lapon belül történik. */
.iui_tabs_tree .iui_tabs_body
{
	min-height: 0px;
	overflow: hidden;
}

/*! A tartalmi oldal, ami a lista terület mellett kitölti a maradék helyet. Négy sáv egymás
 * alatt: a menüsor, a lista-fejléc és a lapok címsora a tartalmához igazodik, a lapok doboza
 * kapja a maradék helyet.
 * A térköz itt, az oldalon van, és nem az egyes sávokon: így a címsor és a lap tartalma
 * ugyanabban a vonalban kezdődik, és egyik sem tapad se a fa-listához, se az ablak széléhez.
 * Ugyanannyi, mint a lista oldalé, hogy a két oldal ránézésre egyforma legyen. */
.iui_tabs_tree .iui_tabs_tree_main
{
	display: grid;
	grid-template-rows: auto auto auto minmax(0px, 1fr);
	min-width: 0px;
	height: 100%;
	padding: 10px;
}

/*! A fa-lista egy eleme: a nyitó-csukó ikon és mellette a felirat. A behúzást (padding-left) a
 * php oldal állítja be a fa szintje alapján, inline stílusként — ugyanakkora szintenkénti
 * lépéssel, mint a c_iui_treeview .iui_tree_element_container-e. Maga az elem a treeview
 * iui_tree_element_label osztályát is viseli, így a betűméretét és a kijelölés színeit onnan
 * kapja. A felirat oszlopának alsó korlátja nulla, hogy a hosszú felirat pontokkal záródjon,
 * ahelyett hogy kifeszítené a listát. */
.iui_tabs_tree .iui_tabs_tree_item
{
	display: grid;
	grid-template-columns: auto minmax(0px, 1fr);
	align-items: center;
	top: 0px;
	margin-right: 0px;
}

/*! A csukott ág alatti elemek */
.iui_tabs_tree .iui_tabs_tree_item.iui_tabs_tree_hidden
{
	display: none;
}

/*! A felirat sávja. Ez viseli a c_iui_treeview iui_tree_element_label osztályát, és kijelöléskor
 * ez kapja az iui_selected_tree_element-et — ott is a nyíl utáni rész van kiemelve. */
.iui_tabs_tree_text
{
	min-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*! Nyomtatásnál és mobil nézetben a lapok tartalma egymás alatt, teljes egészében jelenik meg
 * (lásd az iui_tabs_content azonos szabályait), ezért a lista listának nincs értelme. */
@media only print
{
	/*A lapok egymás alatt, teljes egészében jelennek meg, ezért a sor nem korlátozhatja a
	 *magasságukat — a tartalomhoz igazodik. */
	.iui_tabs.iui_tabs_tree
	{
		grid-template-rows: auto;
	}

	.iui_tabs_tree .iui_tabs_tree_list_container
	{
		display: none !important;
	}
}

@media only screen and (max-width: 767px)
{
	/*Egy oszlop, mert a lista nem látszik; a sor pedig a tartalomhoz igazodik, mert a lapok
	 *itt is egymás alatt, teljes egészében jelennek meg. */
	.iui_tabs.iui_tabs_tree
	{
		grid-template-columns: minmax(0px, 1fr);
		grid-template-rows: auto;
	}

	.iui_tabs_tree .iui_tabs_tree_list_container
	{
		display: none !important;
	}
}


/*########################## WIZARD  OBJEKTUM ###########################*/
.iui_wizard
{

	display: flex;   
	flex-direction: column; 
	height: 100%; 

}

.iui_wizard_footer .iui_wizard_footer_default,
.iui_wizard_footer .iui_wizard_footer_right,
.iui_wizard_footer .iui_wizard_footer_left
{
	display: flex;
	flex-direction: row-reverse;
	width:100%;
}
.iui_wizard_footer .iui_wizard_footer_default,
.iui_wizard_footer .iui_wizard_footer_right
{
	justify-content: right;
}
.iui_wizard_footer .iui_wizard_footer_left
{
	justify-content: left;
}
.iui_wizard_footer .iui_wizard_footer_custom
{
	justify-content: center;
	display: flex; 
	width:100%;
}
.iui_wizard_footer .iui_wizard_custom_button
{
	display: none; 
}

.iui_wizard_title
{
	
}

@media only print
{
	.iui_wizard_footer
	{
		display: none !important;
	}
	.iui_wizard_title
	{
		display: inline-block !important;
	}
}


.iui_wizard_body
{

	width:100%; 
	height: 100%; 
	overflow-y: auto;
}

.iui_wizard_content
{
	display: none;
	/*padding: 10px;*/
	height: 100%; 
}

@media only print
{
	.iui_wizard_content
	{
		display: block !important;
		height: auto !important; 
	}
}

.iui_wizard_content.iui_wizard_active
{
	display: block;

}



/*########################### RADIO SWITCH 2 ÁLLÁSÚ ANIMÁLT KAPCSOLÓ ################*/

.iui_radio_switch
{
	overflow: hidden;
	/*A mellette álló mezőkkel (pl. választólista) egy vonalba kerüljön: azok is középre
	 igazodnak, a kapcsoló viszont alapvonalhoz igazodna, és emiatt elcsúszna. */
	vertical-align: middle;
}

.iui_radio_switch div[data-aid='visual']
{
	margin-left: -54px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 54px 18px 54px;
    grid-auto-rows: calc( var(--i_size_input_height) - 6px );
    		-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.iui_radio_switch div[data-aid='visual'] div.iui_radio_switch_label
{
	text-align: center;
}

.iui_radio_switch div[data-aid='visual'] div.iui_radio_switch_button
{
	height: 100%;
	width: 20px;

}


.iui_radio_switch.iui_radio_switch_on div[data-aid='visual']
{
	margin-left: 0px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.iui_radio_switch.iui_radio_switch_on div[data-aid='visual'] div.iui_radio_switch_button
{
	height: 100%;
	width: 20px;
	border-radius: 3px;
}

.iui_radio_switch_input
{
	display: none;
}

/*! A kapcsoló rejtett rádiógombjait tartó doboz nem törhet sort: csak display:none elemeket
 * tartalmaz, blokk-szintűként viszont a mellé kerülő mezőt (pl. a felülbírálás választóját)
 * a következő sorba lökné. */
.iui_radio_switch + div[data-aid="field"]
{
	display: inline;
}


/*################ A létrehozó űrlap objektum - C_FORM_CREATE css beállításai ##########*/
div[data-aid="form"].iui_form_create
{
	display: flex;
	flex-direction: column;
	 align-content: stretch;
	height: 100%;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}
div[data-aid="form"].iui_form_create div[data-aid="search"]
{

	flex-grow: 0;
}

div[data-aid="form"].iui_form_create div[data-aid="list"]
{
	flex-grow: 10;
	overflow: auto;
}
div[data-aid="form"].iui_form_create div[data-aid="list"] div.form_create_title
{

}
div[data-aid="form"].iui_form_create div[data-aid="name"]
{
	flex-grow: 0;

	
}


div[data-aid="form"].iui_form_create div[data-aid="advanced"]
{
	display: none;
	flex-grow: 0;

	
}

div[data-aid="form"].iui_form_create div[data-aid="list_class"]
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

}
div[data-aid="form"].iui_form_create div[data-aid="list_class"] div.iui_form_create_element 
{
	
	display: inline-block;
	overflow-x: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	
}

div[data-aid="form"].iui_form_create div[data-aid="list_class"] div.iui_form_create_element div.iui_form_create_icon
{

	display: block;
	margin: auto;

	
}


/*###################################### HTML EDITOR CSS BEÁLLÍTÁSAI ########################### */
/*########### TINY MCE SPECIFIKUS BEÁLLÍTÁSOK ###########*/
.tox-editor-header button[type="button"],
.tox-dialog__header button[type="button"],
.tox-dialog__footer button[type="button"]
{
	min-width: auto !important;
	width: auto !important;
}

div[data-aid="html_editor"].iui_editor_view_text
{
	grid-template-rows: auto 1fr;
	grid-template-areas: 
	'toolbar'
	'text';
	
}


div[data-aid="html_editor"].iui_editor_view_code
{
	grid-template-rows: auto 1fr;
	grid-template-areas: 
	'toolbar'
	'code';
	
}

div[data-aid="html_editor"].iui_editor_view_split
{
	grid-template-rows: auto 0.5fr 0.5fr;
	grid-template-areas: 
	'toolbar'
	'text'
	'code';
	
}


div[data-aid="editor_toolbar"]
{
	height: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
    justify-content: flex-start;
    grid-area: toolbar;
	/*! Arculati beállítások: design.css !*/

}
div[data-aid="editor_toolbar"].disabled
{
	opacity: 0.5;
	/*! Arculati beállítások: design.css !*/
}



div[data-aid="html_editor"] div[data-aid="code"]
{
	grid-area: code;
}
div[data-aid="html_editor"] div[data-aid="text"]
{
	grid-area: text;
}

div[data-aid="html_editor"].iui_editor_view_text div[data-aid="text"]
{
	width: 100%;
	overflow-y: auto;
	/*! Arculati beállítások: design.css !*/
}


div[data-aid="html_editor"].iui_editor_view_text div[data-aid="code"]
{
	display: none;
}

div[data-aid="html_editor"].iui_editor_view_split div[data-aid="text"]
{

	width: 100%;
	overflow-y: auto;
	/*! Arculati beállítások: design.css !*/
}

div[data-aid="html_editor"].iui_editor_view_split div[data-aid="code"]
{

	width: 100%;
	overflow-y: auto;
	/*! Arculati beállítások: design.css !*/
}

div[data-aid="html_editor"].iui_editor_view_code div[data-aid="text"]
{

	display: none;
}

div[data-aid="html_editor"].iui_editor_view_code div[data-aid="code"]
{

	width: 100%;
	overflow-y: auto;
	/*! Arculati beállítások: design.css !*/
}

div[data-aid="html_editor"] div[data-aid="text"] div[data-aid="signature"],
.mce-content-body div[data-aid="signature"]
{
	pointer-events: none;
	/*! Arculati beállítások: design.css !*/
}

div[data-aid="html_editor"] div[data-aid="text"].iui_show_node *
{
	/*! Arculati beállítások: design.css !*/
}




div[data-aid="html_editor"] textarea
{
	height: 99%;
	width: 99%;
	overflow-y: auto;
	/*! Arculati beállítások: design.css !*/
	white-space: pre-wrap;
}
div[data-aid="html_editor"] div[data-aid="toolbar"] *
{
	float: left;
	/*! Arculati beállítások: design.css !*/
}
div[data-aid="editor_toolbar"] div[data-aid="toolbar_group"]
{

}


div[data-aid="editor_toolbar"] div[data-aid="toolbar_group"] input[type='color']
{
	width: 40px;
}

div[data-aid="toolbar"] .iui_button.iui_selected_btn
{
	background-repeat: no-repeat;
	background-position: center;
	/*! Arculati beállítások: design.css !*/
}

div.iui_html_widget
{
	position: absolute;
	top: calc( 50% - 100px );
	left: calc( 50% - 200px );

	background-color: var(--color_bg_window);
	border: 1px solid var(--color_border);
	border-radius: 5px;
	padding: 10px;
	z-index: 3;
	display: unset;
}


div.iui_html_widget.iui_html_widget_link
{
	width: 400px;
}

div.iui_html_widget.iui_html_widget_img
{
	width: 400px;
}
div.iui_html_widget select
{
	width: 25%;
	display: unset;
	background-color: var(--color_bg_work);
	margin-bottom: 10px;
}
div.iui_html_widget textarea
{
	width: 100%;
	height: 100px;
	display: unset;
	background-color: var(--color_bg_text) !important;
	color: var(--color_font_text) !important;
	margin-bottom: 10px;
}

div.iui_html_widget input[type='button']
{
	float: right;
	display: unset;

}

/*################## IUI_SELECT select option css beállításai ########################*/
div.iui_select
{
	display: inline-block;
}
div.iui_select [data-aid='node_widget']
{
	display: flex;
	float: none;
}

div.iui_select.iui_select_open [data-aid='node_widget']
{

}

div.iui_select.iui_select_multi [data-aid='node_widget']
{
	height: unset;
}
div.iui_select.iui_select_single [data-aid='node_widget']
{
	overflow: hidden;
	min-height: unset;
}



div.iui_select.iui_select_loading [data-aid='node_widget']
{

}
div.iui_select.iui_select_focus [data-aid='node_widget']
{

}
div.iui_select [data-aid='node_list']
{
	display: none;
	position: fixed;
	overflow-y: auto;
	z-index: 1000000;
	clear: both;
}

div.iui_select.iui_select_open [data-aid='node_list']
{
	display: block;
	overflow-y: auto;
	overflow-x: hidden;
}
div.iui_select [data-aid='node_list'],
div.iui_select.iui_select_open [data-aid='node_list']:empty
{
	display: none;	
}


div.iui_select [data-aid='node_list'] div.iui_select_optgroup_open
{
	cursor: default;
}
*:not(div.iui_select_optgroup_open)+div.iui_select [data-aid='node_list'] div.iui_select_optgroup_close
{
	cursor: default;
}
div.iui_select [data-aid='node_list'] div
{
	display: block;
}
div.iui_select [data-aid='node_list'] div span
{
	float: unset;
	display: inline-block;
	overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.iui_select [data-aid='node_list'] div.iui_select_option .shell_icon
{
	
	width: 25px;
	height: 25px;
	margin-left: 5px;
	float: left;
	vertical-align: middle;
	
}

div.iui_select [data-aid='node_list'] div.iui_select_option
{

}
div.iui_select [data-aid='node_list'] div.iui_select_option.free
{

}

div.iui_select [data-aid='node_list'] div.iui_select_option:hover
{

}

div.iui_select [data-aid='node_list'] div.iui_select_option.iui_selected_opt
{
	background-color: unset;
	color: unset;
	background-repeat: no-repeat;
	
}
div.iui_select [data-aid='node_list'] div.iui_select_option.iui_select_cached
{
	background-color: unset;
	color: unset;
	background-repeat: no-repeat;
}
div.iui_select [data-aid='node_list'] div.iui_select_option.designated
{

}
div.iui_select span
{
	float: left;
}
div.iui_select span[data-aid='node_labels']
{
	float: left;
	overflow: hidden;
	/*A 35px a nyílnak és a törlő ikonnak fenntartott hely: korábban a js számolta ki
	 pixelben, a widget méretéből, de az a példányosításkor még nem végleges.
	 VISSZAÁLLÍTÁS: az eredeti érték az alatta lévő, kikommentelt sor — vele együtt a címke
	 100%-os max-width szabályát is ki kell venni, és a js-ben vissza kell tenni a mérést. */
    max-width: calc( 100% - 35px);
    /*max-width: calc( 100% - 5px);*/
    display: inline-flex;
    flex-flow: wrap;
    
}
div.iui_select span[data-aid='node_labels'] span
{
	/*A címke nem lóghat ki a tartójából: ami nem fér ki, azt a text-overflow vágja le.
	 VISSZAÁLLÍTÁS: ez a sor az eredeti kódban nem szerepelt, visszavonáskor törlendő. */
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	cursor: default;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

div.iui_select.iui_select_multi span[data-aid='node_labels'] span
{
	background-repeat: no-repeat;
	cursor: default;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}



div.iui_select span[data-aid='node_input']
{
	float: left;
	display: inline-flex;
	 -webkit-user-select: text;
    user-select: text;
}
/*Firefox miatt van szükség erre, mert különben a üres terület kurzorja elcsúszik le vagy fel. */
div.iui_select span[data-aid='node_input']:empty::before {
	content: "\200B"; /* zero-width space */
	color: transparent;
}

div.iui_select.iui_select_single span[data-aid='node_input'],
div.iui_select.iui_select_nosearch span[data-aid='node_input']
{

}

div.iui_select span[data-aid='node_input']:empty
{
	width: 1px;
}

div.iui_select span[data-aid='node_placeholder']
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100px;
	flex-flow: nowrap;
	flex-grow: 8;
}

div.iui_select span[data-aid='node_complete']
{
	width: unset;
}

div.iui_select span[data-aid='node_count']
{
    display: none;
    flex: auto;
    align-content: center;
    text-align: center;
    padding: 5px;
    cursor: default;
}

/*!############################## SUMMARY ELEMENT ###############################*/

div[data-aid='summary_element']
{
	display: flex;
	flex-direction: column;
	
}

div[data-aid='summary_element'] [data-aid='summary_titlebar']
{
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 25px 1fr 25px;
	align-items: center;
	grid-auto-rows: 20px;
}

div[data-aid='summary_element'] [data-aid='summary_titlebar_icon']
{

	
		flex-shrink: 0;
	
}
div[data-aid='summary_element'] [data-aid='summary_titlebar_text']
{
	width: 100%;
	text-align: left;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div[data-aid='summary_element'] [data-aid='summary_titlebar_button']
{

	
		cursor: pointer;
	flex-shrink: 0;
}

div[data-aid='summary_element'] [data-aid='summary_contentbar']
{
	width: 100%;
	
}


/*########### GDPR ELFOGADÁS ###########*/
[data-aid='gdpr']
{
	position: fixed;
	display: grid;
	grid-auto-columns: 2fr 1fr;
	grid-auto-rows: 1fr;
	grid-auto-flow: column;

}
[data-aid='gdpr'] [data-aid='button']
{
	justify-self: right;
	align-self: center;
}


/*! A meta-adatlap Ügyvitel lapjának elrendezése. A lap html váza egyetlen réteg üres div,
 * mindegyiken csak a mező data-aid-je; hogy melyik hol áll, azt kizárólag ez a rács mondja
 * meg. Az elrendezés így egy helyen, olvasható térképként áll — átrendezni annyi, mint a
 * területek nevét átrakni a térképben, a html-hez és a php-hoz nem kell hozzányúlni.
 * Ugyanezt a mintát követi maga az űrlapelem is (lásd --a_form_element_areas).
 * A több értéket tartalmazó mezők a teljes szélességet kapják, a rövid, igen/nem jellegű
 * értékek pedig hármasával egymás mellé kerülnek — nyolc egysoros mező egymás alatt
 * fölöslegesen fogyasztaná a lap magasságát.
 * A címkeoszlop szélességét is itt rögzítjük. Erre azért van szükség, mert minden űrlapelem
 * saját dobozban ül, tehát nincs közös rács, ami egy vonalba állítaná a címkéket — a változó
 * viszont öröklődik, így a független elemek is egyformán tördelnek. Csak a mező melletti
 * címkénél van hatása; ha az elem a mező fölé teszi a címkét, a két terület úgyis a teljes
 * szélességet fogja.
 * A display szándékosan nincs itt: azt a lapozó adja, és csak az aktív lapra
 * (.iui_tabs_tree .iui_tabs_content.iui_tabs_active). Ha a lap osztálya is beállítaná, akkor
 * a rejtett lapot is láthatóvá tenné — a lapok elrejtése ugyanis a display: none-on múlik,
 * és a két szabály erőssége azonos. Ilyenkor ez a lap minden más lap helyett látszana. */
.iui_meta_page_administration
{
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:
		"content_type_list content_type_list content_type_list"
		"status            status            status"
		"online_executive  online_executive  online_executive"
		"approved          secret            archive"
		"content_type      released          .";
	column-gap: 24px;
	align-content: start;
	--i_form_element_label_width: 160px;
}

/*! A cellák az űrlapelemek mérési pontjai: minden elem a saját cellája szélességéből dönti el,
 * hogy a címke a mező mellé vagy fölé kerüljön. Szándékosan a cella és nem a lap a mérési pont:
 * a lapot mérve a szűk cellákban álló elemek is vízszintesek maradnának, és a hosszabb címke
 * kilógna a cellából — a szomszéd oszlop értékére. Cellánként mérve minden elem ott vált, ahol
 * a hely valóban elfogy.
 * A container-type-ot azért css-ből adjuk és nem osztályként a html-be
 * (iui_form_element_container), mert a lap váza szándékosan csupasz div-ekből áll. */
.iui_meta_page_administration > div
{
	container-type: inline-size;
}

/*! A mezők helye a rácsban. A cél-doboz azonosítója a mező neve, így a térkép és a html
 * ugyanazokat a neveket használja. */
.iui_meta_page_administration > [data-aid="content_type_list"]
{
	grid-area: content_type_list;
}
.iui_meta_page_administration > [data-aid="status"]
{
	grid-area: status;
}
.iui_meta_page_administration > [data-aid="online_executive"]
{
	grid-area: online_executive;
}
.iui_meta_page_administration > [data-aid="approved"]
{
	grid-area: approved;
}
.iui_meta_page_administration > [data-aid="released"]
{
	grid-area: released;
}
.iui_meta_page_administration > [data-aid="secret"]
{
	grid-area: secret;
}
.iui_meta_page_administration > [data-aid="content_type"]
{
	grid-area: content_type;
}
.iui_meta_page_administration > [data-aid="archive"]
{
	grid-area: archive;
}

/*! Olyan tartalom terület, amelyik maga nem görget: a benne lévő egyetlen elem tölti ki a
 * magasságát, és a görgetés azon belül történik. Akkor kell, ha az ablak tetején van olyan
 * rész, aminek végig a helyén kell maradnia — enélkül az a rész a tartalommal együtt
 * kicsúszna a képből. A szelektor azért ilyen erős, mert a w_content alapból görget
 * (.iui_window [data-aid="w_content"] { overflow: auto }), és azt kell felülírnia. */
.iui_window [data-aid="w_content"].iui_w_content_fill
{
	overflow: hidden;
}

/*! A vágólapra másoló piktogram a feliratok mellett (c_form_caption_light, b_copy).
 * Két szelektor: az első az általános eset, a második az űrlapelem dobozán belüli. Ez utóbbi
 * azért kell, mert a piktogram üres elem, az üres elemekre pedig van egy régi szabály az
 * űrlapelemek dobozában ([data-aid="form_field_container"] span:empty), ami display: block-ot
 * és nulla szélességet ad. Gyengébb szelektorral az nyerne: a jel új sorba kerülne és eltűnne
 * a doboza. */
span[data-aid="copy_icon"].iui_form_copy_icon,
[data-aid="form_field_container"] span[data-aid="copy_icon"].iui_form_copy_icon,
span[data-aid="event_icon"].iui_form_event_icon,
[data-aid="form_field_container"] span[data-aid="event_icon"].iui_form_event_icon
{
	display: inline-block;
	position: relative;
}

/*! A meta-adatlap azonosság-sávja. A sáv a lapok fölött áll, és lapváltáskor nem változik:
 * ez válaszolja meg, hogy melyik rekordot nézzük. Balra a kép és a nevek, jobbra — a
 * szabad hely kitöltésével kitolva — a bekapcsolt jelzők. */
.iui_meta_identity
{
	display: grid;
	grid-template-columns: auto minmax(0px, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	/*Oldalt és fölül nincs saját térköz: azt az eszközsáv adja. Alul viszont kell, hogy a
	 *sávot lezáró vonal ne tapadjon a tartalomhoz. */
	padding: 0px 0px 6px 0px;
}
/*! A rekord ikonjának helye. Fix méret, hogy a sáv magassága ne ugráljon aszerint, hogy
 * van-e a rekordnak saját képe — és ez a méret adja a sáv magasságát is. A típus ikonját a shell_icon osztály adja, a rekord saját
 * képét a benne lévő shell_pic — a kettő egymásra rajzolódik, ezért a kép nélküli rekord
 * helye sem marad üres. */
.iui_meta_identity_icon
{
	width: 50px;
	height: 50px;
}
/*! A rekord saját képe kitölti az ikon helyét, és eltakarja alatta a típus ikonját. */
.iui_meta_identity_icon > .shell_pic
{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
/*! A név és a típus egymás alatt. A min-width: 0 azért kell, hogy a hosszú név el tudjon
 * fogyni a középső oszlopban, és ne tolja ki a jelzőket a sávból. */
.iui_meta_identity_text
{
	min-width: 0px;
}
/*! A név és a típussor egy sorban marad, a túllógó rész pontokkal záródik. */
.iui_meta_identity_name,
.iui_meta_identity_type
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*! A jelzők a sáv jobb szélén, egymás mellett. */
.iui_meta_identity_badges
{
	display: grid;
	grid-auto-flow: column;
	column-gap: 5px;
}