@charset "UTF-8";

/*
---------------------------------------------------------------------------------------------------------------------
											Switches
-----------------------------------------------------------------------------------------------------------------------
*/	

	.smallfont
	{
		font-size: 80% !important;
	}
	.biggerfont
	{
		font-size: 120% !important;
	}
	.bigfont
	{
		font-size: 180% !important;
	}
	.bold
	{
		font-weight: bold;
	}
	.boxed
	{
		border: 1px solid var(--bordercolor);
		padding: 5px;
	}
	.boxed.bigger
	{
		border: 1px solid var(--bordercolor);
		padding: 10px;
	}
	.shadow
	{
	  box-shadow: 0 0 30px var(--shadowcolor);
	}
	.rounded
	{
		border-radius: var(--borderradius);
	}
	.icon
	{
		height: var(--iconsize);
	}
	.largericon
	{
		height: var(--iconlargersize);
	}
	.largeicon
	{
		height: var(--iconlargesize);
	}
	.lightborder
	{
		border: 1px solid var(--borderlightcolor);
	}
	.noscroll
	{
		overflow: hidden !important;
	}
	.errmsg
	{
		color: var(--errmsgclr);
	}
	.hidden
	{
		display: none !important;
	}
	.active
	{
		display: revert !important;
	}
	.floatleft
	{
		float: left;
	}
	.floatright
	{
		float: right;
	}
	.floatnone
	{
		clear: both;
		float: none;
	}
	.reset
	{
		clear: both;
		float: none;
		display: revert;
	}
	.disabled
	{
		opacity: var(--disabled)
	}
	.separator
	{
		height: 2ch;
		width: 2ch;
		visibility: hidden;
	}
	.top
	{
		vertical-align: top !important;
	}
	.middle
	{
		vertical-align: middle !important;
	}
	.bottom
	{
		vertical-align: bottom !important;
	}
	.right
	{
		text-align: right !important;
	}
	.center
	{
		text-align: center !important;
	}
	.justify
	{
		text-align: justify !important;
	}
	.left
	{
		text-align: left !important;
	}
	
	.fullwidth
	{
		width: 100%;
	}
	.fullheight
	{
		height: 100%;
	}
	.block
	{
		display: block !important;
	}
	.inlineblock
	{
		display: inline-block !important;
	}
	.inline
	{
		display: inline !important;
	}
	.noborder
	{
		border: none !important;
	}
	.nowrap
	{
		white-space: nowrap;
	}
	.nopadding
	{
		padding: 0;
	}
	.smallpadding
	{
		padding: 5px;
	}
	.nomargin
	{
		margin: 0;
	}
	.smallmargin
	{
		margin: 5px;
	}
	.noscrollbars::-webkit-scrollbar 
	{
  	background: transparent !important; /* Chrome/Safari/Webkit */
  	width: 0px  !important;
	}
    
	.noscrollbars 
	{
  	scrollbar-width: none !important; /* Firefox */
  	-ms-overflow-style: none !important;  /* IE 10+ */
	}
	.nobgcolor
	{
		background-color: unset !important;
	}

	.status_0
	{
		font-style: italic !important;
		color: var(--status0clr) !important;
	}
	.status_2
	{
		font-style: italic !important;
		color: var(--status2clr) !important;
	}
	.status_8
	{
		font-style: italic !important;
		color: var(--status8clr) !important;
		text-decoration: line-through !important;
	}
	.neg
	{
		color: var(--negclr);
	}
	.hspacer
	{
		clear: both;
		float: none;
		display: block;
		height: 80px;
		
	}	
	.hspacer.small
	{
		height: 20px;
		
	}	
	.rounded
	{
		border-radius: var(--borderradius);
	}

	.bgbottom
	{
		background-position: bottom;
	}
	.bgtop
	{
		background-position: top;
	}
	.bgmiddle
	{
		background-position: center;
	}
	.bgwhite
	{
		background-color: white;
	}
	.bgdarker
	{
		background-color: #00000091;
	}


/*
---------------------------------------------------------------------------------------------------------------------
											Standards
-----------------------------------------------------------------------------------------------------------------------
*/	
	
	body
	{
		font-family: var(--fontfamily);
		font-size: var(--fontsize);
		color: var(--fontcolor);
		background-color: var(--bgcolor);
		margin: 0;
		padding: 0;
	}
	header,
	footer,
	asside,
	section,
	article
	{
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: left;
		float: none;
		clear: both;
		position: relative;
	}
	
	a
	{
		color: inherit;
		text-decoration: none;
	}
	a:hover
	{
		text-decoration: none;
	}
	a:focus 
	{
    outline: none;
	}
	img
	{
		border: none;
		max-width: 100%;
		max-height: 100%;
		padding: 0;
		margin: 0;
	}
	div.table,
	table
	{
		margin: 0px;
		padding: 0px;
		border-collapse: collapse;
	}
	div.table
	{
		display: table;
		box-sizing: border-box;
	}
	div.table.expanded .cell
	{
		padding-right: 40px;
	}
	div.table.expanded .cell:last-child
	{
		padding-right: 0;
	}
	
	div.row
	{
		display: table-row;
	}
	div.cell
	{
		display: table-cell;
		text-align: left;
		box-sizing: border-box;
	}
	td,
	th,
	div.cell
	{
		text-align: left;
	}		
	div.table.middle .cell
	{
		vertical-align: middle;
	}
	div.table.top .cell
	{
		vertical-align: top;		
	}
	div.table.bottom .cell
	{
		vertical-align: bottom;		
	}
	div.columngroup
	{
		height: calc(100vh - 200px);
		box-sizing: border-box;
		/*
		overflow: hidden;
		*/
	}
	div.columngroup .column
	{
		/*
		overflow: scroll;
		*/
		display: inline-block;
		padding-right: 50px;
		box-sizing: border-box;
		width: 50%;		
	}
	div.columngroup .column:last-child
	{
		padding-right: 0;		
	}
	
	
	td.intfield,
	td.floatfield,
	div.cell.text.intfield,
	div.cell.text.floatfield
	{
		text-align: right;
	}
	h1
	{
		font-size: 150%;
		width: auto;
		margin-top: 8px;
		margin-bottom: 16px;
	}
	h2
	{
		font-size: 120%;
		font-weight: bold;
		margin-top: 8px;
		margin-bottom: 8px;
	}
	h3
	{
		font-size: 100%;
		font-weight:bold;
	}
	h4
	{
		font-size: small;
		font-weight:normal;
	}
	h6
	{
		font-size: xx-small;
		font-weight: normal;
	}
	
	hr 
	{
		color: var(--buttonbgcolor);
		border-color: var(--buttonbgcolor);
		background-color: var(--buttonbgcolor);
	}	
	
	.tabpage h2.tabhead
	{
		margin-bottom: 10px;
	}
	
	a.deflink
	{
		color: var(--buttonbgcolor);
		text-decoration: inherit;
	}	
	.rowlink,
	.deflink:hover,
	.link:hover,
	.button:hover
	{
		cursor: pointer;
	}

	.tcms table td
	{
		padding: 8px;
		padding-left: 0;
		vertical-align: top;
	}
	

	ul.itemlist
	{
		margin: 0;
		padding: 0;
	}
	
	ul.floatleft
	{
		list-style: none;
		list-style-position: inside;
	}
	ul.floatleft li
	{
		float: left;
		margin-right: 10px;
	}
	ul.inlinelist li
	{
		display: inline-block;
		padding: 20px;
	}

	
	label.colorbubble 
	{
	  display: inline-block;
	  width: 2ch;
	  height: 2ch;
	  border-radius: 50%;
	  font-size: 80%;
	}	
	label.colorbubble.userbubble 
	{
	  width: 5ch;
	  height: auto;
	  line-height: 5ch;
	  border-radius: 50%;
	  font-size: 12px;
	  font-weight: bold;
	  text-align: center;
	  overflow: clip;
	}	
	label.title
	{
		display: block;
	}
	
	.text.floatfield.total
	{
		font-weight: bold;
	}
	
/*
---------------------------------------------------------------------------------------------------------------------
											Controls
-----------------------------------------------------------------------------------------------------------------------
*/	

	input,
	select,
	textarea
	{
		font-family: var(--controlsfont);
		font-size: var(--controlssize);
		color: var(--controlscolor);
		background-color: var(--controlsbgcolor);
		border: var(--controlsborder);
		border-radius: var(--controlsborderradius);	
		width: var(--controlswidth); 
		padding: 8px;
		transition: var(--transition);
		outline: none;
		box-sizing: border-box;
		transition: border-width 0.1s;
	}
	textarea
	{
		height: 12ch;
		line-height: 1.4;
	}
	input[type=checkbox]
	{
		width: auto;
	}
	.button,
	button,
	input[type=button],
	input[type=submit]
	{
		font-family: var(--buttonfont);
		font-size: var(--buttonsize);
		color: var(--buttoncolor);
		background-color: var(--buttonbgcolor);
		border: var(--buttonborder);
		min-width: var(--buttonwidth); 
		width: auto; 
		padding: var(--buttonpadding);
		border-radius: var(--buttonborderradius);
		transition: var(--transition);
		box-sizing: border-box;
	}
	
	.button.disabled,
	button:disabled,
	input:disabled,
	select:disabled,
	textarea:disabled
	{
		opacity: var(--disabled);
	}
  input:not([type=button]):not([type=submit]):not([disabled]):hover,
	select:not([disabled]):hover,
	textarea:not([disabled]):hover,
	input:not([type=button]):not([type=submit]):focus,
	select:focus,
	textarea:focus
	{
		font-family: var(--controlsfocusfont);
		font-size: var(--controlsfocussize);
		color: var(--controlsfocuscolor);
		background-color: var(--controlsfocusbgcolor);
		border: var(--controlsfocusborder);
	}
	.button:hover,
	button:hover,
	input[type=button]:not([disabled]):hover,
	input[type=submit]:not([disabled]):hover,
	input[type=button]:focus,
	input[type=submit]:focus
	{
		color: var(--buttonfocuscolor);
		background-color: var(--buttonfocusbgcolor);
		border-color: var(--buttonfocuscolor); 	
	}
	.button.icon:hover,
	button.icon:not([disabled]):hover,
	input[type=submit].icon:not([disabled]):hover,
	input[type=button].icon:not([disabled]):hover
	{
		border: 1px solid var(--buttonfocuscolor);
		cursor: pointer;
	}	
  .button.icon,
	input[type=button].icon,
	input[type=submit].icon,
	button.icon
	{
		background-color: transparent;
		color: transparent;
		background-repeat: no-repeat !important;
		background-size: calc(var(--iconlargersize) - var(--buttonpadding)) !important;
		background-position: center !important;
		width: var(--iconlargersize);
		height: var(--iconlargersize);
		overflow: hidden;
		border: 1px solid transparent;
		min-width: unset;
		font-size: 0;
	}
  .button.icon
  {
		padding: 2px;
  }
	a.button.icon
	{
		display: inline-block;
	}
  p input:not([type=button]):not([type=submit]),
	p select,
	p textarea
	{
		width: 100%;
	}

	input.floatfield
	{
		text-align: right;
	}

/*
---------------------------------------------------------------------------------------------------------------------
											Controlbars
-----------------------------------------------------------------------------------------------------------------------
*/	
	
	.chkboxlist ul,
	ul.controlbar 
	{
		position: relative;
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 0;
		vertical-align: middle;
	}
	.chkboxlist ul li,
	ul.controlbar li
	{
		/*
		float: left;
		*/
		margin-right: 8px;
		transition: var(--transition);
		display: inline;
	}
	ul.controlbar li:last-child
	{
		margin-right: 0;
	}


/*
---------------------------------------------------------------------------------------------------------------------
											Tabs
-----------------------------------------------------------------------------------------------------------------------
*/	

	ul.controlbar.tabbar 
	{
		position: relative;
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 0;
		vertical-align: middle;
		padding-top: 2px;
		padding-bottom: 2px;
		margin-right: 20px;
	}
	ul.controlbar.tabbar li
	{
		float: left;
		margin-right: 4px;
		margin-left: 4px;
		transition: var(--transition);

		color: var(--tabcolor);		
		background-color: var(--tabbgcolor);
		border: none;
		border-left: 1px solid var(--fontcolor);
		color: inherit;
		background-color: inherit;
		
		padding-left: 8px;
		padding-right: 4px;
		padding-top: 2px;
		padding-bottom: 2px;
		font-size: larger;
    box-sizing: border-box;		
		
	}
	ul.controlbar.tabbar li:first-child
	{
		border: none;
		padding-left: 0px;
		margin-left: 0;
	}
	
	ul.controlbar.tabbar li.active, 
	ul.controlbar.tabbar li:hover
	{
		color: var(--tabfocuscolor);
		background-color: var(--tabfocusbgcolor);
		cursor: pointer;
	}
	ul.controlbar.tabbar li.active
  {
		/*
		font-weight: bold;
		*/
		text-shadow: 0px 0px 1px var(--tabfocuscolor);
  }

	.tabpage
	{
		position: relative;
		display: none;
	}
	.tabpage.active
	{
		z-index: 500;
	}

	.tabpage .tabhead 
	{
		position: sticky;
		top: 0;
		z-index: 400;
		background-color: var(--bgcolor);
		color: var(--tabfocuscolor);
		width: inherit;
		border-bottom: 2px solid;
		margin-top: 20px;
		margin-bottom: 30px;
	}

	
	
	.tabhead .actionbar
	{
		vertical-align: bottom;
		display: inline-block;
		left: 50px;
		position: relative;
	}

/*
---------------------------------------------------------------------------------------------------------------------
											Filterbar
-----------------------------------------------------------------------------------------------------------------------
*/	

	ul.controlbar.filterbar input:not([type=button]):not([type=submit]),
	ul.controlbar.filterbar select
	{
		/*
		min-width: revert;
		*/
		width: auto;
		max-width: 20ch;
  }
	ul.controlbar.filterbar
	{
		margin-right: 20px;
	}


/*
---------------------------------------------------------------------------------------------------------------------
											actionbar
-----------------------------------------------------------------------------------------------------------------------
*/	

	ul.controlbar.actionbar
	{
		margin-right: 20px;
	}

	ul.controlbar.actionbar li img.icon.button
	{
		vertical-align: bottom;
	}

/*
---------------------------------------------------------------------------------------------------------------------
											FormMenu
-----------------------------------------------------------------------------------------------------------------------
*/	

  .controlbar.formmenubar
	{
		color: var(--formmenucolor);
		background-color: var(--formmenubgcolor);
		border: 2px solid;
		float: right;
		padding: 2px;
		margin-right: 20px;
	}	
	
	ul.controlbar.formmenubar li:first-child
	{
		padding-left: 0px;
	}
	ul.controlbar.formmenubar li:last-child
	{
		padding-right: 0px;
	}
	
	.controlbar.formmenubar .formmenuitem
	{
		height: inherit;
	
	}
	.controlbar.formmenubar .formmenuitem .icon
	{
		height: calc(var(--iconbiggersize) - 4px);
	}


/*
---------------------------------------------------------------------------------------------------------------------
											ControlTables
-----------------------------------------------------------------------------------------------------------------------
*/	

	.controltable
	{
		width: 100%;
		display: table;
		box-sizing: border-box;
	}

	.controltable .cell
	{
		width: 100%;
		padding-bottom: 10px;
		padding-right: 24px;
		vertical-align: middle;
	}
	.controltable .cell.title
	{
		min-width: 20ch;
		width: 20ch;
	}
		
/*
---------------------------------------------------------------------------------------------------------------------
											tcmsTableControl
-----------------------------------------------------------------------------------------------------------------------
*/	

	div.tcmstablecontrol
	{
		max-height: calc(100vh - 200px);
		height: 100%;
		overflow-y: auto;
		border: var(--tcmstcborder);
		width: 100%;
		padding: var(--tcmstcpadding);
		box-sizing: border-box;
		box-shadow: var(--shadow);
	}
	div.tcmstablecontrol table
	{
		border-collapse: separate;
		border-spacing: 0;
		width: 100%;
	}
	div.tcmstablecontrol table thead
	{
 		position: sticky; 
    top: 0px;
		background-color: var(--tcmstcheaderbgcolor);
		color: var(--tcmstcheadercolor);
	}
	div.tcmstablecontrol table thead th
  {
		padding: var(--tcmstcheaderpadding);
		border-top: 1px solid var(--buttonbgcolor);
		border-bottom: 1px solid var(--buttonbgcolor);
		font-weight: normal;
	}
  div.tcmstablecontrol table thead th .sorticon
	{
		float: right;
	}
	div.tcmstablecontrol table tfoot th
  {
		background-color: var(--tcmstcfooterbgcolor);
		color: var(--tcmstcfootercolor);
		padding: var(--tcmstcfooterpadding);
	  border: var(--tcmstcfooterborder);
	}
	div.tcmstablecontrol table tr:nth-child(even)
	{
		background-color: var(--tcmstcevenbgcolor);
		color: var(--tcmstcevencolor);
	}
	div.tcmstablecontrol table tr:hover td
	{
		background-color: var(--tcmstcfocusbgcolor) !important;
		color: var(--tcmstcfocuscolor) !important;
	}
	div.tcmstablecontrol table thead tr:hover
	{
		background-color: inherit;
		color: inherit;
	}
	div.tcmstablecontrol table td
	{
		vertical-align: top;
		padding: var(--tcmstccellpadding);
		border: var(--tcmstccellborder);
		text-align: left;
	}
	div.tcmstablecontrol table td.float
	{
		text-align: right;
	}
	div.tcmstablecontrol table td.date
	{
		max-width: 10ch;
	}
	div.tcmstablecontrol table td.datetime
	{
		max-width: 18ch;
	}
	div.tcmstablecontrol .nodata
	{
		text-align: center;
		background-color: var(--tcmstcfocusbgcolor);
		padding: 36px;
	}
	div.tcmstablecontrol ul
	{
		list-style: none;
	}

	div.columnbasedtable
	{
		display: table;
  	height: calc(100vh - 280px);
  	table-layout: fixed;
  	width: 100%;
	}	
	
	div.columnbasedtable div.column
	{
		position: static;
	  height: inherit;
	  padding-right: 5px;
	  overflow-x: clip;
	  display: table-cell;
	  box-sizing: border-box;
	}
	div.columnbasedtable div.column:last-child
	{
		padding-right: 0;
	}
	div.columnbasedtable div.column div.columnheader
	{
		min-height: calc(4ch + 20px);
		border-radius: 5px;
		border: 1px solid;
		padding: 10px;
		text-align: center;
	}
	div.columnbasedtable div.column div.columnheader h2
	{
		margin: 0;
		padding: 0;		
	}
	
	div.columnbasedtable div.column div.columncontent 
	{
    padding: 0;
		overflow: auto;
  	max-height: inherit;
  	position: static;
  	scrollbar-width: thin;
  	width: 100%;
  	height: 100%;
  	margin-top: 2px;
	}	
	
  div.columnbasedtable div.column div.columncontent.dragover
  {
  	background-color: #ddd;
  }



/*
---------------------------------------------------------------------------------------------------------------------
											switch
-----------------------------------------------------------------------------------------------------------------------
*/	

	.switch
	{
  	position: relative;
  	display: inline-block;
  	width: 48px;
  	height: 24px;
	}
	.switch input 
	{
  	opacity: 0;
  	width: 0;
  	height: 0;
	}
	.switch .slider 
	{
  	position: absolute;
  	cursor: pointer;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	background-color: var(--buttonoffbgcolor);
  	transition: 0.1s;
	}
	.switch .slider:before 
	{
  	position: absolute;
  	content: "";
  	height: 20px;
  	width: 20px;
  	left: 2px;
  	bottom: 2px;
  	background-color: white;
  	transition: 0.1s;
	}
	.switch input:checked + .slider 
	{
  	background-color: var(--buttonbgcolor);
	}
	.switch input:focus + .slider 
	{
  	box-shadow: 0 0 1px var(--buttonbgcolor);
	}
	.switch input:checked + .slider:before 
	{
  	transform: translateX(24px);
	}
	.switch .slider.round 
	{
  	border-radius: 24px;
	}
	.switch .slider.round:before 
	{
  	border-radius: 50%;
	}	
	.switch input:disabled + .slider
	{
		background-color: var(--buttonoffbgcolor);
	}
	.starswitch input[type=checkbox] 
	{
  	display: none;
	}
	.starswitch .label 
	{
  	border: none;
  	color: #e1d9d9;
  	font-size: 24px;
  	display: inline-block;
  	padding: 0px;
	}
	.starswitch input[type=checkbox]:checked + .label 
	{
  	color: #3fae00;
	}



/*
---------------------------------------------------------------------------------------------------------------------
											Defaults fuer Seitenaufbau
-----------------------------------------------------------------------------------------------------------------------
*/	
	
	#maincontainer
	{
		position: relative;
		text-align: left;
		padding: 0;
		margin: 0;
		box-sizing: border-box;;
	}

	header.maintop
	{
		position: sticky;
		display: block;
		
		left: 0px;
		top: 0;
		height: var(--mainheaderheight);
		width: 100%;
		padding: var(--mainheaderpadding);

		color: var(--mainheadercolor);
		background-color: var(--mainheaderbgcolor);

		font: var(--mainheaderfont);
		border: var(--mainheaderborder);
		z-index: 1500;
	}
  asside.mainleft
	{
		position: fixed;
		left: 0px;
		float: none;
		z-index: 1000;
		top: var(--mainheaderheight);
		width: var(--mainleftwidth);
		height: calc(100vh - var(--mainheaderheight));
		background-color: var(--mainleftbgcolor);
		color: var(--mainleftcolor);
    padding: var(--mainleftpadding);
		border: var(--mainleftborder);
	}

  asside.mainleft.withfooter
	{
		height: calc(100vh - var(--mainheaderheight) - var(--mainfooterheight));
  }

  section.mainmiddle 
	{
		position: relative;
		width: 100%;
    background-color: var(--mainmiddlebgcolor);
		color: var(--mainmiddlecolor);
		margin: 0;
		padding: var(--mainmiddlepadding);
	}
	section.mainmiddle.withleft
	{
		left: var(--mainleftwidth);
		width: calc(100% - var(--mainleftwidth));
	}
	footer.mainbottom
	{
		position: fixed;
		display: block;
		float: none;
  	clear: both;
		left: 0px;
		bottom: 0;
		height: var(--mainfooterheight);
		width: 100%;
		padding: var(--mainfooterpadding);

		color: var(--mainfootercolor);
		background-color: var(--mainfooterbgcolor);

		font: var(--mainfooterfont);
		border: var(--mainfooterborder);
		z-index: 1000;
	}

	.simpleform .descriptiontext
	{
		width: 100%;
	}
	
	.formcontainer
	{
		position: relative;
	}
	.formcontent 
	{
		position: relative;
		background-color: var(--formcontentcolor);
	}
	.formhead
	{
		position: sticky;
		z-index: 1000;
		top: 0;
		padding-bottom: 10px;
		background-color: var(--dlgbgclr);
	}
	.formcontainer.collapsed .formhead
	{
		margin: 0;
		padding-bottom: 2px;
  }
	.formcontainer.collapsed .formcontent
	{
		margin: 0;
		padding-top: 2px;
	}
	
/*--------------------------------------------------------------------------------------------
	Menu
--------------------------------------------------------------------------------------------*/

	nav
	{
		width: var(--navwidth);
		font-family: var(--navfontfamily);
		font-size: var(--navfontsize);
		font-weight: var(--navfontweight);
		color: var(--navcolor);
		background-color: var(--navbgcolor);
		display: inline-block; 		
	}
	nav ul
	{
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}
	nav li
	{
		line-height: var(--navitmheight);
		vertical-align: middle;
		font-weight: normal;
	}
	nav li span, 
	nav li a 
	{
		display: block;
		padding: 5px;
		width: 100%;
	}
	nav li img,
	nav li object
	{
		vertical-align: middle;
	}
	nav li a:hover
	{
		text-decoration: none;
		color: var(--navselcolor);
		background-color: var(--navselbgcolor);
		transition: var(--transition);
	}
	nav li ul.submenu
	{
		display: none;
		color: var(--navsubcolor);
		background-color: var(--navbgcolor);
		height: 0;
		margin-left: 5px;
		transition: max-height 1s;
	}
	nav li ul.submenu.open,
	nav li ul.submenu.activeitem
	{
		display: revert;
		height: auto;
	}
	nav li.activeitem
	{
		font-weight: var(--navactfontweight);
		color: var(--navactcolor);
		background-color: var(--navactbgcolor);
	}
	nav li.menuitemseparator
	{
		height: 2px;
		min-height: 2px;
		padding-left: 1em;
		padding-right: 1em;
		margin-top: 5px;
		margin-bottom: 5px;
		text-align: center;
	}
	
	
	nav.stdmenu
	{
		white-space: nowrap;
		z-index: 500;
		border-top: 1px solid var(--navbordercolor);
		scrollbar-width: none;
		transition: var(--transition);
		display: block;
		box-sizing: border-box;
	}
	nav.stdmenu.headmenu
	{
		border-top: none;
	}
	nav.stdmenu.mainmenu
	{
		max-height: 550px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	nav.stdmenu.botmenu
	{
		position: absolute;
		bottom: var(--mainfooterheight);
		z-index: 20;
		border-bottom: none;
	}
	nav .menuitem:hover
	{
		background-color: var(--navselbgcolor);
		color: var(--navselcolor);
		cursor: pointer;
	}	
	nav.stdmenu .menuitem .menuitem-content
	{
		padding: 0 20px;
		width: unset;
		border-radius: 5px;
		opacity: 0.7;
		transition: all 0.4s, font-size 0s;
		display: flex;
		align-items: center;		
	}
	nav.stdmenu .menuitem a, 
	nav.stdmenu .menuitem span
	{
		display: flex;
		padding: 0;
	}

	nav.stdmenu .menuitem
	{
		margin-bottom: 1px;
		border-radius: 5px;
		transition: var(--transition);
		position: relative;
	}
	nav.stdmenu .menuitem.activeitem
	{
		background-color: var(--navactbgcolor);
		color: var(--navactcolor);
	}
	nav.stdmenu .menuitem:hover span,
	nav.stdmenu .menuitem:hover a, 
	nav.stdmenu .menuitem.activeitem a, 
	nav.stdmenu .menuitem.activeitem span
	{
		opacity: 1
	}
	nav.stdmenu .menuitem .menuitem-content a:hover, 
	nav.stdmenu .menuitem .menuitem-content span:hover
	{
		background: none;
	}
	nav.stdmenu .menuitem a:active, 
	nav.stdmenu .menuitem span:active
	{
		background-color: var(--navactbgcolor);
	}
	nav.stdmenu .menuitem img.menuitemicon
	{
		width: 20px;
			
		padding: 5px;
		border-radius: 3px; 
	}
	nav.stdmenu .menuitem img.menuitemtoggle
	{
		margin-left: auto;
		padding: 5px;
		transition: all .4s;
	}
	nav.stdmenu .menuitem img.menuitemtoggle.rotate
	{
		rotate: 180deg;
	}
	nav.stdmenu .menuitem span.linkcaption
	{
		padding: 10px;
		margin: 0;
	}
	nav.stdmenu .menuitem .submenu
	{
		transition: var(--transition);
		background: none;
		border-top: 1px solid var(--navbordercolor);
	}
	nav.stdmenu .menuitem .submenu.activeitem
	{
		display: block;
		height: auto;
		position: absolute;
		left: 240px;
		background-color: var(--navactbgcolor);
		border-radius: 5px;
		z-index: 20000;
		visibility: visible;
		top: 0;
		width: 200px;
		padding: 10px 0;
		box-shadow: var(--navshadow);
	}
	nav.stdmenu .menuitem .submenu .submenu-title
	{
		opacity: 1;
		font-weight: bold;
		border-bottom: 1px solid silver;
		display: none;
	}
	nav.stdmenu .menuitem .submenu li
	{
		opacity: .6;
	}
	nav.stdmenu .menuitem .submenu li:hover,
	nav.stdmenu .menuitem .submenu li.activeitem
	{
		opacity: 1;
	}
	nav.stdmenu .menuitem .submenu span.linkcaption
	{
		padding: 5px;
	}
	nav li ul.submenu.open, nav li ul.submenu.open.activeitem
	{
		display: block;
		position: relative;
		top: unset;
		left: unset;
		padding: 0;
		margin: 0;
		box-shadow: inherit;
		background: inherit;
		width: unset;
	}




/*--------------------------------------------------------------------------------------------
	tcmsControls
--------------------------------------------------------------------------------------------*/

	.introductiontext
	{
		font-weight: bold;
		margin-bottom: 10px;
	}
	.descriptiontext
	{
		margin-bottom: 10px;
	}
	.itemkeywords
	{
		display: none;
	}


/*--------------------------------------------------------------------------------------------
	ButtonIcons
--------------------------------------------------------------------------------------------*/

	button.icon.edit
	{
		background-image: url('/images/pen.png');
	}
	input[type=button].icon.newitem
	{
		background: url("/images/add.png");
	}
	input[type=button].icon.refreshdata
	{
		background: url("/images/refresh.png");
	}
	input[type=button].icon.upload
	{
		background: url("/images/arrowup.png");
	}
	input[type=button].icon.search
	{
		background: url("/images/lens.png");
	}
	input[type=button].icon.prevPage
	{
		background: url("/images/arrowleft.png");
	}
	input[type=button].icon.nextPage
	{
		background: url("/images/arrowright.png");
	}
	input[type=button].icon.edit
	{
		background: url("/images/pen.png");
	}
	input[type=button].icon.close
	{
		background: url("/images/closedialog.png");
	}
	input[type=button].icon.deletedata
	{
		background: url("/images/delete.png");
	}
	/*
	.tcms_checklist input[type=button].icon
	{
		background: url("/images/add.png") no-repeat center;
		background-size: contain;
		content: '';
	}
	*/
	input[type=button].icon.process,
	input[type=button].icon.run
	{
		background: url("/images/play.svg");
	}

/*
-----------------------------------------------------------------------------------------------------------------------
											Folder
-----------------------------------------------------------------------------------------------------------------------
*/	

	.folder
	{
		margin: 5px;
		padding: 5px;
		text-align: center;
		width: 240px;
		height: 240px;
		overflow: hidden;
		border: 2px solid var(--bordercolor);
		float: left;
		box-sizing: border-box;
	}
	.folder h1
	{
		font-size: inherit;
		font-weight: normal;
	}
	.folder.linkfolder:hover
	{
		cursor: pointer;
	}
	.selectfolder ul.folderselector
	{
		padding: 0;
		margin: 0;
		margin-right: 10px;
		width: 260px;
		height: 600px;
		float: left;
		overflow: auto;
	}
	.selectfolder ul.folderselector li.folder
	{
		min-height: 2em;
		max-height: 2em;
		border: none;
		float: none;
		text-align: left;
		transition: var(--transition);
	}
	.selectfolder ul.folderselector li.folder.open
	{
		background-color: silver;
		padding: 10px;
		margin: 0;
	}
	.selectfolder .selectorcontent
	{
		float: left;
		width: calc(100% - 270px);
	}
	
/*
-----------------------------------------------------------------------------------------------------------------------
											Images
-----------------------------------------------------------------------------------------------------------------------
*/	

	div.rounded img
	{
		border-radius: var(--borderradius);
	}

	.leftimages
	{
		float: left;
	}
	.rightimages
	{
		float: right;
	}





/*
OLD
*/


  
	.content_left
	{
		position: relative;
		float: left;
		width: var(--mainleftwidth);
		overflow: hidden;
		background-color: var(--mainbgleft);
	}
	.content_right
	{
		position: relative;
		width: var(--mainrightwidth);
		overflow: hidden;
		float: right;
		background-color: var(--mainbgright);
	}
	.content_middle
	{
		position: relative;
		width: 100%;
		background-color: var(--mainbgmiddle);
	}
	.content_middle.withright
	{
		width: calc(100% - var(--mainrightwidth) - var(--mainmiddlemargin));
		margin-right: var(--mainmiddlemargin);
	}
	.content_middle.withleft.withright
	{
		width: calc(100% - var(--mainrightwidth) - var(--mainleftwidth) - var(--mainmiddlemargin) - var(--mainmiddlemargin));
	}
	.content
  {
		width: inherit;
  }
	.toparea
	{
		position: relative;
	}
	.bottomarea
	{
		clear: both;
		float: none;
		position: relative;
	}
	.bottomarea .subline
	{
		position: relative;
		bottom: 10px;
		text-align: right;
	}
	h6.subline
	{
		position: absolute;
		clear: both;
		width: auto;
		text-align: center;
		font-size: small;
		font-weight: normal;
		/*
		padding-right: 20px;
		*/
		bottom: 0;
	}
	
	.debug
	{
		display: none !important;
	}
	.dbg .debug
	{
		display: revert !important;
	}
	#debug
	{
		position: fixed;		
		bottom: 0;
		width: 100%;
		height: 300px;
		overflow: scroll;
		transition: var(--transition);
		z-index: 5000;
		font-size: 10px;
		padding-left: 10px;
		display: none;
		color: black;
		background-color: white;
	}
	#debug.open
	{
		display: revert;
	}
	
	.lastsrvmsg
	{
		position: fixed;
		left: calc(100% - 20px);
		bottom: 0;
		max-width: 20em;
		max-height: 0;
		
		width: 0;
		height: 0;
		
		background-color: var(--srvmsgbg);
		color: var(--srvmsgclr);
		border-color: var(--srvmsgbrdclr);
		padding: 10px;
		border: 1px solid;
		border-radius: 5px;
				
		overflow: hidden;
		opacity: 0;
		transition: var(--transition) ease-out;
		z-index: 9000;
	}	
	.lastsrvmsg.open
	{
		left: calc(100% - 30em);
		width: 20em;
		opacity: 1;
		max-height: 10em;
		height: auto;
		bottom: 50px;
		overflow: auto;
	}
	
	.inlinelsm
	{
		font-size: smaller;
	}	
	
	h1.workitems
	{
		cursor: pointer;
		overflow: visible;
	}
	ul.workitems
	{
		display: inline-block;
		transition: var(--transition);
		margin: 0;
		margin-left: 20px;
		list-style: none;
		opacity: 0;
		border: 2px solid var(--btnbgclr);
		border-radius: 5px;
		position: absolute;
		top: -5px;

		padding: 0;
		padding-top: 5px;

	}
	ul.workitems li
	{
		float: left;
		margin-right: 10px;
	}
	ul.workitems.open
	{
		opacity: 1;
	}

/*
---------------------------------------------------------------------------------------------------------------------
											tcmsDialog
-----------------------------------------------------------------------------------------------------------------------
*/	

	.tcms_dialog
	{
		display: none;
	}
	.tcms_dialog.open
	{
		display: block;
	}	
	.tcms_dialogback
	{
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10000;
	}
	.tcms_dialogframe
	{
	  top: 20px;
	  box-shadow: 0 0 30px var(--dlgshdclr);
	  background-color: var(--dlgbgclr);
	  border: 1px solid;
	  margin: auto;
		position: absolute;
		max-width: 80vw;
		max-height: 90vh;
		width: fit-content;
		height: fit-content;
		overflow: hidden;		
	}	
	.tcms_dialogcontent
	{
		max-width: calc(80vw - 40px);
		max-height: calc(90vh - 80px);
		overflow: auto;
		position: relative;
		margin: 20px;
		min-width: fit-content;
		margin-top: 10px;
	}
	.tcms_dialogframe .tcms_dialoghead
	{
		padding: 10px;
		font-size: 24px;
		font-weight: bold;
		background-color: var(--btnbgclr);
		color: var(--btnclr);
		border-bottom: 2px solid var(--bordercolor);
	}
	.tcms_dialogframe .tcms_dialoghead div.icons
	{
		float: right;
	}
	.tcms_dialogframe .tcms_dialoghead div.icons span
	{
		margin-left: 10px;
		display: inline-block;
	}
	.tcms_dialogframe .tcms_dialogfoot
	{
		height: 10px;
		background-color: gray;
		position: absolute;
		bottom: 0px;
		width: 100%;
		z-index: 500;
	}
	.tcms_dialogframe .tcms_dialogfoot:hover
	{
		cursor: pointer;
	}

	.tcms_dialogframe .tcms_dialogsettings
	{
		position: absolute;
		padding-left: 20px;
		overflow: hidden; 
		height: 0;
		width: 100%;
		border: none;
		z-index: 0;
		transition: var(--transition);
		box-sizing: border-box;
		background-color: var(--bgcolor);
	}
	.tcms_dialogframe .tcms_dialogsettings.open
	{
		height: auto;
		padding-bottom: 100px;
		border-bottom: 2px solid var(--buttonbgcolor);
		z-index: 1500;
	}
	
	.tcms_dialog .controltable
	{
		width: calc(100% - 20px);
	}

	.tcms_dialogcontent h1.main.itemhead:empty
	{
		display: none;
	}


	.tcms_dialogback
	{
		z-index: 2000;
	}
	 
	.tcms_dialogcontent
	{
		max-width: calc(95vw - 60px);
		max-height: calc(95vh - 100px);	
	}	 
	
	.tcms_dialogframe 
	{
	  top: 10px;
	  max-width: 95vw;
	  max-height: 95vh;
	  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	  border-radius: 10px;
	}	
	.tcms_dialogframe  .tcms_dialogfoot 
	{
		background-color: var(--bgcolor);
		border-top: 2px solid;
		color: var(--bordercolor);
		height: 20px;
	}











	.controlbar.gridnavbar li.controlicon 
	{
	  min-width: 24px;
	  width: 24px;
	  height: 24px;
	}	
	
	.controlbar.gridnavbar 
	{
  	background-color: var(--bgcolor);
  	padding: 0;
  	list-style: inside;
  	border-color: var(--brdclr);
  	border: 1px solid var(--brdclr);
  	border-radius: 5px;
	}	
	
	h2 .controlbar.gridnavbar 
	{
  	margin: 0 !important;
  	margin-left: 10px !important;
	}	
	

	.toparea nav li
	{
		float: left;
		margin-right: 10px;
	}
	.toparea nav li ul.submenu
	{
		position: absolute;
		background-color: var(--navbgclr);
		border-left: 10px solid var(--navbrdclr);
		border-right: 1px solid var(--navbrdclr);
		border-bottom: 1px solid var(--navbrdclr);
		box-shadow: 0 0 30px var(--navbrdclr);
		z-index: 999;
		height: 0;
	}
	.toparea nav li .submenu li
	{
		clear: both;
		float: none;
	}
	.toparea nav li ul.submenu.open
	{
		display: none;
	}
	.toparea nav li ul.submenu.activeitem
	{
		display: revert;
		height: auto;
	}
	nav .menuitem.withsubitems.showarrow span:before
	{
		content: "► ";
	}
		
	nav div.burger
	{
		display: none;
		cursor: pointer;
	}
	nav div.burger .bar1, 
	nav div.burger .bar2, 
	nav div.burger .bar3 
	{
  	width: 35px;
  	height: 5px;
  	background-color: var(--navclr);
  	margin: 6px 0;
  	transition: 0.1s;
	}
	nav.burgermenu.open div.burger .bar1 
	{
  	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
  	transform: rotate(-45deg) translate(-9px, 6px);
	}
	nav.burgermenu.open div.burger .bar2
	{
		opacity: 0;
	}
	nav.burgermenu.open div.burger .bar3 
	{
  	-webkit-transform: rotate(45deg) translate(-8px, -8px);
  	transform: rotate(45deg) translate(-8px, -8px);
	}
	nav.burgermenu.open ul
	{
		background-color: var(--navburgerbgclr);
		color: var(--navburgerclr);
	}
	nav.burgermenu.open ul.menuitems
	{
		width: 100%;
		padding-top: 40px;
		padding-bottom: 40px;
		background-color: var(--navburgerbgclr);
		color: var(--navburgerclr);
		float: none;
		clear: both;
		display: block
		
	}
	nav.burgermenu.open ul.menuitems li
	{
		float: none;
	}
	
	nav.burgermenu.open .submenu
	{
		width: calc(100% - 20px);
	}

	nav .menutiem svg 
	{
		width: 36px;
	}


/*
-----------------------------------------------------------------------------------------------------------------------
											Widgets
-----------------------------------------------------------------------------------------------------------------------
*/	

	 
	.widget
	{
		position: relative;
		background-color: var(--widgetbgcolor);
    box-shadow: var(--widgetshadow);
    border-radius: var(--widgetborderradius);
    border: var(--widgetborder);
		margin-right: var(--widgetrightmargin);
		margin-bottom: var(--widgetbottommargin);
		padding: var(--widgetpadding);
		font-size: var(--widgetfontsize);
		height: var(--widgetheight);
		width: var(--widgetwidth);

		float: left;
		clear: revert;		
		overflow: clip;
		box-sizing: border-box;
	}
	.widget:last-child
	{
		margin: 0;
	}
	.widget.c0
	{
		width: calc(100%);
		margin-right: 0;
	}
	.widget.r0
	{
		height: 100%;
		margin-bottom: 0;
	}
	.widget.c2
	{
		width: calc(var(--widgetwidth) * 2 + var(--widgetrightmargin));		
	}
	.widget.ra
	{
		height: auto;
	}
	.widget.r2
	{
		height: calc(var(--widgetheight) * 2 + var(--widgetbottommargin));
	}
	.widget.c3
	{
		width: calc(var(--widgetwidth) * 3 + (var(--widgetrightmargin) * 2));
	}
	.widget.r3
	{
		height: calc(var(--widgetheight) * 3 + (var(--widgetbottommargin) * 2));
	}
	.widget h1
	{
		color: var(--buttonbgcolor);
		overflow: auto;
		position: sticky;
		top: 0;
		background-color: var(--widgetbgcolor);
		font-size: 120%;
	}
	.widget h1 img
	{
		background-color: var(--buttonbgcolor);
		width: var(--iconlargesize);
	}
	.widget table,
	.widget .tcmstablecontrol 
	{
		/*
		margin-top: 10px;
		*/
		width: 100%;
		line-height: 1.5;
		border: none;
	}	
	.widget .tcmstablecontrol
	{
		max-height: calc(100% - 20px);
	} 
	.widget.r1 .tcmstablecontrol
	{
		height: calc(var(--widgetheight) - 40px);
	} 
	.widget.r2 .tcmstablecontrol
	{
		height: calc((var(--widgetheight) * 2) - 40px);
	} 
	.widget.r3 .tcmstablecontrol
	{
		height: calc((var(--widgetheight) * 3) - 40px);
	} 
	
	@media (max-width: 1200px)
	{
		footer.mainbottom
		{
			padding: 20px;
		}
	
	}	
	
	 
	 
	@media (max-width: 600px)
	{
		.controltable .cell
		{
			display: block;
			min-width: unset;
			width: auto;
		}
	}