@import url(./fontawesome/font.css);

/*#region Teljesen általános szabályok*/
body
{
	font-family: 'Segoe UI';
}

i
{
	font-style: normal;
	font-family: 'FontAwesome';
}

.center
{
	text-align: center;
}

.right
{
	text-align: right;
}

.top
{
    vertical-align: top;
}

.loading
{
	background-image: url(../img/loading.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

.inline
{
	display: inline-block;
	margin: 0.2em 0;
}
/*#endregion*/

/*#region Linkek, gombok, alapvető nívigációs ezközök*/
a
{
	cursor: pointer;
	color: #00897b;
}

a:hover
{
	color: #26a69a;
}

input[type=submit], input[type=button], button, a.button
{
	padding: 5px 1em;
	text-transform: uppercase;
	background-color: #00838f;
	color: #FFFFFF;
	border: 0;
	cursor: pointer;
	text-decoration: none;
}

input[type=submit]:hover, input[type=button]:hover, button:hover, a.button:hover
{
	background-color: #00897b;
}

label
{
	display: inline-block;
	width: 150px;
	text-align: left;
}

input[type=text], input[type=password], input[type=date], input[type=number], textarea, select
{
	font-family: 'Segoe UI';
	border: 3px solid #999999;
	padding: 0.2em;
	width: 20em;
}

input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus, textarea:focus
{
	border: 3px solid #00897b;
}

input.short
{
	width: 4em;
}

input.delete
{
	float: right;
	background-color: #c41111;
}

input.delete:hover
{
	background-color: #f40000;
}


/*#endregion*/

/*#region Kevésbé általános de több helyen használt fomázások*/
.entry-item
{
	margin: 1em;
	padding: 0 1em;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
}

.img-icon-8
{
	width: 8px;
	height: 8px;
}

.img-icon-16
{
	width: 16px;
	height: 16px;
}

/*#endregion*/

/*#region Fejléc, keresőterület, felső menü*/
header
{
	position: absolute;
	top: 0;
	height: 60px;
	left: 0;
	right: 0;
	background-color: #263238;
	color: #FFFFFF;
}

header h1, header form, header nav
{
	float: left;
}

header h1
{
	margin: 0;
	font-size: 1.7em;
	padding: 12px 0;
	background-color: #455a64;
	margin-right: 2em;
	font-weight: 100;
	text-align: center;
	width: 250px;
}

header h1 a, header h1 a:hover, header h1 a:active
{
	color: #FFFFFF;
	text-decoration: none;
}

header form
{
	padding: 13px 0;
	width: calc(100% - 430px);

}

header input[type=text]
{
	padding: 7px;
	background-color: #FFFFFF;
	font-family: 'Segoe UI';
	border: 0;
	width: calc(100% - 50px);
}

header input[type=submit]
{
	border: 0;
	color: #FFFFFF;
	background-color:  #0097a7;
	font-family: 'FontAwesome';
	padding: 9px 9px 7px;
	margin-left: -5px;
}

header nav
{
	float: right;
}

header nav span
{
	display: inline-block;
	font-family: 'FontAwesome';
	padding: 21px;
	cursor: pointer;
}

header nav span:hover
{
	background-color: #455a64;
}

header nav ul
{
	list-style: none;

	margin: 0;
	padding: 0;
}

header nav > ul
{
	display: none;
	position:absolute;
	
	right: 0;
	top: 60px;
	
	background-color: #546e7a;
	
	z-index: 99;
}

header nav ul#login-menu
{
	border-top: 2px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
}

header nav ul li a
{
	width: 100px;
	display: inline-block;
	padding: 7px 1em;
	cursor: pointer;
	text-decoration: none;
	color: #FFFFFF;
}

header nav ul li a:hover
{
	color: #FFFFFF;
	background-color: #78909c;
}

#auto-complete-pool
{
	display: none;
}

#auto-complete-display
{
	position: absolute;
	background-color: #FFFFFF;
	border: 1px solid #222222;
	max-height: 300px;
	overflow-y: scroll;
	z-index: 30;
	color: #222222;
	width: 200px;
	display: none;
}

#auto-complete-display div
{
	padding: 7px;
}

#auto-complete-display div.selected
{
	background-color: #b2dfdb;
}

#auto-complete-display div:before
{
	display: inline;
	
	font-style: normal;
	font-family: 'FontAwesome';
	padding-right: 7px;
}

#auto-complete-display div.global:before{ content: ''; }
#auto-complete-display div.category:before{ content: ''; }
#auto-complete-display div.location:before{ content: ''; }
#auto-complete-display div.parameter:before{ content: ''; }

#selected-items.available:after
{
	content: "";
	position: absolute;
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: red;
	top: 14px;
	border-radius: 5px;
}

#loading-overlay
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: rgba(34, 34, 34, 0.5);
	background-image: url(../img/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

.load-blur
{
	filter: blur(10px);
}
/*#endregion*/

/*#region Oldalsó sáv*/
aside
{
	width: 250px;
	position: absolute;
	top: 60px;
	bottom: 43px;
	left: 0;
	border-right: 1px solid #CCCCCC;
	overflow-y: auto;
}

aside ul
{
	list-style: none;
	padding-left: 7px;
}

aside ul ul
{
	padding-left: .5em;
	margin-left: .5em;
	border-left: 1px dotted #AAAAAA;
}

aside ul li.collapsable
{
	cursor: pointer;
}

aside ul li a
{
	text-decoration: none;
	color: #222222;
}

aside a.addlink
{
	position: fixed;
	bottom: 0;
	left: 0;
	
	display: inline-block;
	text-align: center;
	width: 250px;
	padding: 10px 0;
	background-color: #00838f;
	color: #FFFFFF;
	text-decoration: none;
}

aside a.addlink:hover
{
	background-color: #00897b;
}

/*#endregion*/

/*TODO: itt a fő táblázatot ki kéne szedni!*/
/*#region Fő terület és régi fő táblázat*/

main
{
	position: absolute;
	top: 60px;
	bottom: 0;
	left: 250px;
	right: 0;
	overflow: auto;
}

main.full
{
	left: 0;
	padding: 1em;
}

main.half
{
	padding: 1em;
}

main h1, h2
{
	font-family: 'Segoe UI Light';
	font-weight: 100;
	text-transform: uppercase;
}


#table-wrapper
{
	width: 100%;
	height: 100%;
	overflow: auto;
}

#table-header
{
	display: none;
	position: relative;
	z-index: 3;
}

main table th i
{
	position: relative;
	display: inline-block;
	text-align: center;
	width: 32px;
	padding: 2px 0;
}

#table-header th i.pin
{
	transform: rotate(-90deg);
}

#table-header th.collapsed
{
	background-color: #8C8C8C;
	text-align:center;
}

main table th.collapsed i.sort
{
	display: none;
}

main table
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

#data thead
{
	position: sticky;
	top: 0;
	z-index: 1;
}

main table th
{
	background-color: #00838f;
	color: #FFFFFF;
	padding: 7px 10px;
	text-transform: uppercase;
	font-weight: 100;
	cursor: pointer;
	white-space: nowrap;
}

main table th.sorting-asc, main table th.sorting-desc
{
	background-color: #0097a7;
}

#table-wrapper > table td >table
{
	margin: -3px -10px;
	width: calc(100% + 20px);
}

main table td
{
	padding: 3px 10px;
	border-bottom: 1px solid #DFDFDF;
	border-right: 1px solid #DFDFDF;
	white-space: nowrap;
	background-color: #FFFFFF;
}

main table tr.selected td
{
	background-color: #C1DDDA !important;
}

main table td.pinnable, main table th.pinnable
{
	position: relative;
	z-index: 2;
}

main table td.pinnable
{
	padding: 0;
}

main table td.pinnable a
{
	width: calc(100% - 22px);
	display: inline-block;
	padding: 3px 10px;
	border-right: 2px solid #DFDFDF;
	border-bottom: 1px solid #DFDFDF;
}

main table td.pinned, main table th.pinned
{
	position: sticky;
	left: 0;
	border-right: 3px solid #c41111;
}

main table td.pinnable.pinned a
{
	border-right: 2px solid #0097a7;
}

main table td.collapsed, main table th.collapsed
{
	/*display: inline-block;*/
	width: 32px !important;
	height: 23px;
}

main table td.collapsed, main table th.collapsed span
{
	font-size: 0;
}

main table td.collapsed *
{
	display: none;
}

#data > tbody > tr > td.collapsed:nth-child(n)
{
	background-color: #DDDDDD !important;
}

#data > tbody > tr:nth-child(2n) td
{
	background-color: #F7F7F7;
}

main table tr:hover td
{
	background-color: #b2dfdb !important;
}

main table tr.alert td
{
	background-color: #ffcdd2 !important;
}

/*#endregion*/

/*TODO: innen egy csomó mindent általánosítani kéne!*/
/*#region Popup szerkesztői felület az adatkezeléshez*/
.popup
{
	/*display: none;*/
}

.popup .shadow
{
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	
	background-color: rgba(0, 0, 0, 0.5);
	
	z-index: 100;
}


.popup .body
{
	position: relative;
	background-color: white;
	width: 700px;
	height: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 1em;
	transform: translate(-50%, -50%);
	z-index: 101;
	overflow-y: auto;
	/*box-shadow: 10px 10px 0px #222222;*/
}

.popup .body .header
{
	background-color: #DFDFDF;
	margin: -1em -1em 1em -1em;
}

.popup .body .header h2
{
	display: inline-block;
	margin : 0.3em;
	font-size: 1.3em;
}

.popup .body .header a.button
{
	padding : 0.4em;
	font-size: 1.2em;
	font-family: 'FontAwesome';
	cursor: pointer;
	float: right;
	color: #343434;
	text-decoration: none;
}

.popup .body .header a.button:hover
{
	background-color: #00897b;
	color: #FFFFFF;
}

.popup .body .file-preview
{
	height: calc(100% - 2em)
}

.popup .body .file-preview > *
{
	display: block;
	width: 100%;
	height: 100%;
}

.popup .body .file-preview > iframe
{
	width: calc(100% + 2em);
	height: calc(100% + 1em);
	margin: -1em;
	border: 0;
}

.popup .close
{
	font-family: 'FontAwesome';
	position: absolute;
	top: 3px;
	right: 3px;
	cursor: pointer;
	padding: 2px;
	color: #343434;
}

.popup #params i
{
	cursor: pointer;
}

.popup #params i.default
{
	display: none;
}

.popup textarea
{
	width: 300px;
	height: 100px;
	font-family: 'Segoe UI';
}

.popup #add-param
{
	color: #00897b;
	/*text-decoration: underline;*/
	cursor: pointer;
}

.popup #add-param:hover
{
	color: #26a69a;
}

#admin aside
{
    position: fixed;
}

#admin aside h3
{
	position: relative;
	top: -60px;
}

#admin aside li a
{
	display: block;
	padding: 10px;
	border-bottom: 1px solid #DDDDDD;
}

#admin aside li a.selected
{
	color: #FFFFFF;
	background-color:#00838f;
}

.popup .admin-tab
{
    position: relative;
    left: 200px;
    width: 499px;
	display: none;
}

.popup .admin-tab.selected
{
	display: block;
}

#remove-controls
{
	display: none;
}
/*#endregion*/

/*#region Főoldal (dashboard*/
.dashboard a
{
	display: inline-block;
	border: 1px solid #EEEEEE;
	padding: 1em;
	margin: 1em;
	text-decoration: none;
	text-transform: uppercase;
	width: 120px;
	text-align: center;
}

.dashboard a i
{
	display: block;
	margin: 1em 0;
	font-size: 2em;
}
/*#endregion*/

/*#region Content(?)*/
#content .body
{
	width: 1000px;
}

#content table
{
	width: 100%;
	border-collapse: collapse;
}

#content table.files th:nth-child(3),
#content table.files th:nth-child(4),
#content table.files td:nth-child(3),
#content table.files td:nth-child(4)
{
	display: none;
}

#content table.stickers th:nth-child(2),
#content table.stickers th:nth-child(5),
#content table.stickers th:nth-child(6),
#content table.stickers td:nth-child(2),
#content table.stickers td:nth-child(5),
#content table.stickers td:nth-child(6)
{
	display: none;
}



#content table td, #content table th
{
	padding: 3px;
	border: 1px solid #222222;
}

#content .loading
{
	background-color: rgba(0,0,0,0.7);
	width: 1000px;
	height: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 1em;
	transform: translate(-50%, -50%);
	z-index: 102;
	box-shadow: 10px 10px 0px #222222;
}
/*#endregion*/

/*#region Login form*/
form.login
{
	margin: 0 auto;
	width: 600px;
	border: 1px solid #AEAEAE;
	padding: 1em;
}

form.login td, form.login td:nth-of-type(2n), form.login td:hover
{
	border: 0;
	background-color: #FFFFFF !important;
}

form.login button, form.login button:active
{
	background-color: #00897b; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 1em auto;
}

form.login button, form.login button:hover
{
	background-color: #26a69a;
}
/*#endregion*/

/*#region Naptár*/
.calendar
{
	display: grid;
	grid-template-rows: auto 17% 17% 17% 17% 17%;
	grid-template-columns: 14.3% 14.3% 14.3% 14.3% 14.3% 14.3% auto;
	height: 100%;
}

.calendar div
{
	border-left: 1px solid #DFDFDF;
	border-bottom: 1px solid #DFDFDF;
}

.calendar .header
{
	text-align:center;
	padding: auto;
	background-color: #00838f;
	color: #FFFFFF;
	text-transform: uppercase;
	border: 0;
	font-size: 1.6em;
	display: grid;
	justify-content: center;

}

.calendar .header span
{
	margin: auto 0;
}

.calendar .inactive
{
	background-color: #CCCCCC;
}

.calendar span
{
	display: block;
	padding: 0.3em;
	margin: 0.3em;
	font-size: 0.6em;
}

.calendar span.tag
{
	border-radius: 2px;
}

.calendar span.tag.workshop
{
	color: #FFFFFF;
	background-color: mediumvioletred;
}

.calendar span.tag.event
{
	color: #FFFFFF;
	background-color: indianred;
}

.calendar span.tag.attendance
{
	color: #FFFFFF;
	background-color: forestgreen;
}

.calendar .today
{
	background-color: #ffcdd2;
}
/*#endregion*/

/*#region Fájlböngésző*/
main.filebrowser a
{
	margin: 1em;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	display: inline-block;
	padding: 1em;
	margin: 1em;
	text-decoration: none;
	text-transform: uppercase;
	width: 120px;
	height: 120px;
	text-align: center;
	overflow: hidden;
}

main.filebrowser a img
{
	width: 96px;
	height: 96px;
}
/*#endregion*/

/*TODO: jelezzük egyértelműen, hogy wysiwyg, ez a userpage hülye név!*/
/*#region Wysiwyg tartalom*/
.userpage small
{
	font-size: 0.5em;
	display: block;
}

.userpage iframe
{
	margin: 1em auto;
	display: block;
}

.userpage blockquote
{
	border-left: 10px solid #ccc;
	margin: 0.5em 10px;
	padding: 0.5em 10px;
	quotes: "\201C""\201D""\2018""\2019";
	font-family: "Freestyle Script";
	font-size: 2em;
}

.userpage blockquote:before
{
	color: #ccc;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}

.userpage blockquote + p
{
	margin: 0 0 1em 2em;
	font-style: italic;
}

.userpage img
{
	display: block;
	margin: 0 auto;
}

.box
{
	padding: 0.3em 1em;
	border-radius: 3px;
	margin-bottom: 1em;
}

.warning.box
{
	color: #222222;
	background-color: #fedf18;
}

.info.box
{
	color: #FFFFFF;
	background-color: #00897b;
}

/*#endregion*/

/*#region security camera*/
video
{
	width: 100%;
}
/*#endregion*/

iframe.scripted-page
{
	border: 0;
	width: 100%;
	margin: 0;
	height: 100%;
}

/*TODO: Átnézni!*/
/*#region Egyéb, ezeket át kell nézni és besorolni valahova!*/
#login.popup .body
{
	height: auto;
}

#blazor-error-ui
{
	position: absolute;
	height: 26px;
	padding: 10px;
	right: 0;
	left: 0;
	bottom: 0;
	background-color: #f2cf26;
	z-index: 999;
	display:none;
}

.grid
{
	display: grid;
	grid-template-columns: [c1] 50% [c2] 50%;
}

.grid.x3x3
{
	display: grid;
	grid-template-columns: [c1] 33% [c2] 33% [c3] 33%;
	grid-template-row: [r1] 33% [r2] 33% [r3] 33%;
}

.grid section
{
	margin: 1em;
	padding: 0 1em;
	border: 1px solid #CCCCCC;
	border-radius: 2px;
}

.alertify-button
{
	border-radius: 2px;
	padding: 5px;
	margin: 5px 0;
}

.alertify-button-ok
{
	background-color: #00897b !important;
}

/*#region Tripla editor wikihez (egyelőre csak oda*/

.triple-editor
{
	display: grid;
	grid-template-columns: [c1] 33% [c2] 33% [c3] 33%;
}

.triple-editor .CodeMirror
{
	height: 500px;
}
/*#endregion*/

main .breadcrumb a
{
	display: inline-block;
	width: auto;
	height: auto;
	text-align: left;
	margin: 0;
	border: 0;
	padding: 0.5em;
}



.simple-ui
{
	padding: 1em;
}

.simple-ui section img
{
	width: 200px;
	height: 200px;
	margin: 1em;
}

#editorjs
{
	padding: 1em;
	border: 2px solid #00897b;
}
/*#endregion*/


.tool {
	display: grid;
	grid-template-columns: [c1]64px [c2] auto;
}

.tool:hover {
    background-color: #b2dfdb;
}

.tool i {
    font-size: 40px;
	margin: 0.5em auto;
}

.tool h3 {
    text-transform: uppercase;
}


/*#region Feltöltés (csak form, a fájlböngészőé máshol van)*/
div.filebox
{
	width: 200px;
	height: 64px;
	border: 3px dashed #CCCCCC;
	text-align: center;
	display: inline-block;
}

div.filebox form
{
	padding: 1em 0.3em;
}

div.filebox input
{
	display: none;
}

div.filebox.is-dragover
{
	border: 3px dashed #00897b;
}

.filebox.is-uploading
{
	background-image: url(./img/loading.gif);
	background-repeat: no-repeat;
	background-position: center;
}

.filebox.is-uploading form
{
	display: none;
}

.filebox.is-success
{
	background-color: forestgreen;
	color: #FFFFFF;
}

.filebox img.upload-preview
{
	width: 32px;
	height: 32px;
	float: left;
}

div.filebox small
{
	display:block;
}
/*#endregion*/

.entry-item.project
{
	padding: 1em;
	display: grid;
	grid-template-columns: 250px auto;
}


.permissoins-container
{
	display: grid;
	grid-template-columns: auto auto auto;
}