@charset "UTF-8";

@media all {
	* { margin: 0; padding: 0; }
	
	html           { height: 100%; }
	body           { color: #000000; padding: 0 0.25em; min-width: 740px; margin: 0 auto; text-align: left; height: 100%; --system-color: #0062A7; --system-base-color: #D2E6F5;}
	body.loginbody { background-color: var(--system-color); padding: 0; width: 100vw; }
	
	body, textarea, select, input {
		font-size: 1rem;
		font-variant-numeric: tabular-nums;
		font-family: "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;
	}
	
	fieldset {
		border: 0 solid; clear: both;
	}
	
	h1 { font-weight: bold; font-size: 1.5em; color: var(--system-color); --link-color: var(--system-color); margin-bottom: 0.25em; text-align: left; border-bottom: 1px #CCCCCC solid; padding: 0.2em; }
	h2 { font-weight: bold; font-size: 1.4em; color: var(--system-color); --link-color: var(--system-color); margin-bottom: 0.25em; text-align: left; }
	h3 { font-weight: bold; font-size: 150.0000%; color: #000000; margin-bottom: 0.25em; text-align: left; }
	h4 { font-weight: bold; font-size: 133.3333%; color: #000000; margin-bottom: 0.25em; text-align: left; }
	h5 { font-weight: bold; font-size: 116.6667%; color: #000000; margin-bottom: 0.25em; text-align: left; }
	h6 { font-weight: bold; font-size: 116.6667%; color: #000000; margin-bottom: 0.25em; text-align: left; font-style: italic; }
	
	/* caption analog zu h2 */
	caption   { font-weight: bold; font-size: 1.4em; color: var(--system-color); --link-color: var(--system-color); margin-bottom: 0.25em; text-align: left; }
	
	p            { line-height: 1.5em; margin: 0 0 1em 0; }
	p:last-child { margin-bottom: 0; }
	
	/* Links im System */
	a                    { text-decoration: none; color: var(--link-color, var(--system-color)); cursor: pointer; }
	a:hover, a:active    { text-decoration: underline; }
	
	b                   { font-weight: bold; }
	ul, ol, dl          { line-height: 1.5em; margin: 0 0 1em 1em; }
	li                  { line-height: 1.5em; }
	dt                  { font-weight: bold; }
	dd                  { margin: 0 0 1em 2em; }
	blockquote          { margin: 0 0 1em 1.5em; font-style: italic; }
	textarea, pre, code { font-family: "Courier New", Courier, monospace; background-color: #DDDDDD; }
	pre, code           { font-family: monospace; font-size: 1em; }
	acronym, abbr       { letter-spacing: .07em; border-bottom: .1em dashed #c00; cursor: help; }
	
	/* Login Seite */
	.running-context-login { font-size: 1.5em; line-height: normal; text-align: center; letter-spacing: 0.7em; font-weight: bold; padding: 0.2em 0; background-color: crimson; color: #FFFFFF; width: 100%; }
	
	/* Formular */
	.login-form {
		background: url("../images/Transfact_Logo_web.svg") no-repeat center / 80% white;
		height: 340px; width: 890px; margin-top: 10em; margin-left: auto; margin-right: auto; border-radius: 0.5em; position: relative; padding: 1em 0; background-color: white;
	}
	.login-form .login-inputs                       { clear: both; margin-left: 92px; float: left; text-align: left; }
	.login-form .login-inputs .error-message        { text-align: left; color: crimson; font-weight: bold; margin-bottom: 0.25em; min-height: 1.25em; }
	.login-form .login-inputs input[type=submit]    { padding: 0.25em 1em; margin-bottom: 0.5em; border-radius: 0.5em; }
	.login-form .login-inputs input[type=text]      { padding: 0.25em 1em; margin-bottom: 0.5em; border-radius: 0.5em; width: 18em; }
	.login-form .login-inputs input[type=password]  { padding: 0.25em 1em; margin-bottom: 0.5em; border-radius: 0.5em; width: 18em; }
	.login-form .login-inputs select                { padding: 0.25em 1em; margin-bottom: 0.5em; border-radius: 0.5em; width: 18em; }
	
	/* Kleines Kundenlogo auf Login-Seite */
	.custom-login-logo { float: right; margin-right: 1em; text-align: right; }
	
	/* Sprachauswahl auf Login-Seite */
	.laenderflaggen   { position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: 0.5em; text-align: center; font-size: 87.5%; display: flex; flex-flow: row wrap; gap: 0.25em 0; justify-content: center; padding: 0 1em; }
	.laenderflaggen a { border-right: 1px solid #000; line-height: 1em; padding: 0 0.3em; }
	
	@media screen and (max-width: 900px) {
		body                                            { min-width: unset; }
		.login-form                                     { background-position: center 1em; margin-top: 2em; height: 25em; width: 50vw; min-width: 17.5em; }
		.login-form .login-inputs                       { clear: both; padding: 0 1em; margin: 20vw 0 0 0; text-align: left; }
		.login-form .login-inputs input[type=text]      { width: 100% }
		.login-form .login-inputs input[type=password]  { width: 100% }
		.login-form .login-inputs select                { width: 100% }
		.custom-login-logo                              { display: none; }
	}
	
	@media screen and (max-width: 500px) {
		.running-context-login    { letter-spacing: 0.4em; }
		.login-form .login-inputs { margin-top: 100px; }
	}
	
	footer {
		background-color: var(--system-color); color: #FFFFFF; padding: 0.7em 0; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 100;
	}
	footer a, footer a:focus, footer a:hover, footer a:active {
		color: #FFFFFF;
	}
	footer span {
		margin: 0em 0.5em;
	}
	
	/* -------------------------------------------------------------------------------- */
	/* Navigations Einstellungen (NEU) */
	header                    { position: fixed; background-color: #FFFFFF; width: 100%; top: 0pt; left: 0pt; z-index: 100; }
	header.header-placeholder { position: relative; visibility: hidden; }
	
	@media screen and (max-width: 500px) {
		header                { position: absolute; width: auto; }
	}
	
	header .runningContext    { text-align: center; letter-spacing: 0.7em; font-weight: bold; padding: 0.2em 0; background-color: crimson; color: #FFFFFF; width: 100%; }
	header .mainbar                       { width: 100%; height: 3em; /* Genau so groß wie die Logos */ margin-bottom: 0.125em; background-color: var(--system-color); display: flex; align-items: center; white-space: nowrap; }
	header .mainbar a                     { color: #FFFFFF; }
	header .mainbar img                   { vertical-align: middle; }
	header .mainbar > span                { position: relative; display: inline-block; color: #FFFFFF; padding: 0.25em 0.25em; flex: 0 0 auto; }
	header .mainbar > div                 { position: relative; display: inline-block; color: #FFFFFF; padding: 0.25em 0.25em; flex: 0 0 auto; }
	header .mainbar > form                { position: relative; display: inline-block; color: #FFFFFF; padding: 0.25em 0.25em; flex: 0 0 auto; }
	
	header .mainbar .header-logo-left       { padding-left: 0; }
	header .mainbar .header-logo-right      { padding-right: 0; }
	header .mainbar .header-logo-left  img  { background-color: white; box-sizing: border-box; height: 3em; padding: 3px 3px 0 3px; }
	header .mainbar .header-logo-right img  { background-color: white; box-sizing: border-box; height: 3em; padding: 3px 3px 0 3px; }
	
	header .mainbar .header-with-information  { margin-top: -1.25em; }
	header .mainbar .header-benutzer          { font-size: 87.5%; padding: 0.25em 0.5em; transition: margin-top 150ms; } /* Da font-size kleiner ist, lassen wir links und rechts etwas mehr abstand. */
	header .mainbar .header-zeiten            { font-size: 87.5%; padding: 0.25em 0.5em; transition: margin-top 150ms; }
	header .mainbar .header-lose              { font-size: 87.5%; padding: 0.25em 0.5em; transition: margin-top 150ms; flex: 1 0 auto; }
	header .mainbar .additional-information   { display: none; position: absolute; }
	
	header .mainbar .header-chatclient .unread { font-size: 70%; position: absolute; right: -4px; top: -4px; line-height: 1em; border-radius: 50%; background-color: crimson; color: #F6F6F6; min-width: 1em; height: 1em; border: 2px solid #F6F6F6; padding: 2px; text-align: center; }
	
	header .mainbar .header-menu .header-menu-options                                              { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.5); top: 3em; position: absolute; padding: 0.5em; width: 20em; overflow: hidden; display: flex; flex-direction: row; gap: 0.5em; z-index: 100; }
	header .mainbar .header-menu .header-menu-options-main                                         { display: flex; flex-direction: column; flex: 0 0 20em; }
	header .mainbar .header-menu .header-menu-options-main > a                                     { display: flex; flex-direction: row; align-items: center; gap: 0.5em;  border-radius: 2px; padding: 0.5em;        color: black; }
	header .mainbar .header-menu .header-menu-options-main > span                                  { display: flex; flex-direction: row; align-items: center; gap: 0.25em; border-radius: 0px; padding: 0.25em 0.5em; color: black; }
	header .mainbar .header-menu .header-menu-options-main > span.header-menu-options-info         { font-size: 87.5%; padding: 0.1em 0.5em; display: none; }
	header .mainbar .header-menu .header-menu-options-main > span.header-menu-options-subject      { padding: 0; }
	header .mainbar .header-menu .header-menu-options-main > span.header-menu-options-subject a    { transform: rotate(180deg); width: 1em; color: black; text-align: center; padding: 0.5em; border-radius: 4px; }
	header .mainbar .header-menu .header-menu-options-main > span.header-menu-options-subject span { flex: 1 0 auto; text-align: center;padding-right: 2em;font-weight: bold; }
	
	header .mainbar .header-menu .header-menu-options-main  a:hover                                { background-color: #52AE32; color: white !important; }
	
	header .mainbar .header-suche input[type=text] {
		background: var(--image-view, url('../images/svg/view.svg')) no-repeat right center / 1.375em #E0E0E0;
		width: 5em;
		vertical-align: middle;
		padding: 0.25em 1.5em 0.25em 0.25em;
		margin: 0 0.25em 0 0;
		border-radius: 4px;
		border-color: #FFFFFF;
		font-size: unset;
		float: none;
		color: #000000;
		transition: width 150ms;
	}
	header .mainbar .header-suche input[type=text]:focus {
		width: 20em;
		background-color: white;
	}
	
	header .mainbar .header-suche span.extSearch                      { display: table; position: absolute; top: 2.65em; right: 0.75em; background-color: bisque; color: black; box-shadow: 0 2px 5px rgba(0,0,0,.5); text-align: left; padding: 0.5em; }
	header .mainbar .header-suche span.extSearch > span               { display: table-row; }
	header .mainbar .header-suche span.extSearch > span > span        { display: table-cell; padding: 0 0.5em; }
	header .mainbar .header-suche span.extSearch input[type=checkbox] { margin: 0 0.5em 0 0; }
	
	header nav {
		clear: both;
		border-bottom: 3px solid #CCCCCC;
	}
	header a,header a:focus,header a:active,header a:hover {
		text-decoration: none;
	}
	header nav ul {
		float: left; margin: 0 0.5em 0.2em 0.5em; padding: 0; display: flex; flex-flow: row wrap;
	}
	header nav ul li {
		display: inline-block; line-height: 1em; list-style-type: none; margin: 0; padding: 0; white-space: nowrap; vertical-align: bottom /* wichtig für das sortable menu */;
	}
	header nav ul li a {
		color: #000000; display: block; font-size: 1em; font-weight: normal; padding: 0.35em 0.75em; margin: 0 1px; border-radius: 4px;
	}
	header nav ul li a:hover,header nav ul li.current a {
		background-color: var(--system-color); color: #FFFFFF;
	}
	header nav ul.mainmenu li a {
		color: var(--system-color); font-size: 1.4em; font-weight: bold; padding: 0.3em 12px;
	}
	header nav ul.mainmenu li a:hover, header nav ul.mainmenu li.current a {
		background-color: var(--system-color); color: #FFFFFF;
	}
	header nav ul li a.olerpwarning {
		background-color: crimson !important;
		color: white !important;
	}
	
	header nav.menu-left ul.mainmenu li ul.submenu li.invisible a       { color: #777777; font-style: italic; }
	header nav.menu-top  ul.submenu                li.invisible a       { color: #777777; font-style: italic; }
	header nav.menu-top  ul.submenu                li.invisible a:hover { color: #FFFFFF; }
	
	header nav ul.submenu:not(.startedit):not(.show-all) li.invisible { display: none; }
	header nav ul.submenu li         span.menu-visible-marker { display: block; width: 12px; height: 12px; margin: 0 auto 0.25em auto; border: 1px solid var(--system-color); border-radius: 100%; background-color: white; box-sizing: border-box; transition: background-color 150ms; }
	header nav ul.submenu li.visible span.menu-visible-marker { background-color: #52AE32; }
	
	/* Pfeil zum Anzeigen bereits ausgeblendete Menüpunkte */
	header nav ul.submenu                          li.show-more { display: none; }
	header nav ul.submenu.has-more:not(.startedit) li.show-more { display: inline-block; }
	
	/* InfoBox beim Editieren des Menüs */
	header nav ul.submenu:not(.startedit) li.menu-edit-info       { display: none; }
	header nav ul.submenu.startedit       li.menu-edit-info       { flex: 0 0 100% /* So groß wie es geht, damit das <li>-Tag umbricht */; }
	header nav ul.submenu.startedit       li.menu-edit-info > div { display: inline-flex; align-items: flex-start; background-color: cornsilk; padding: 0.25em 0.75em; font-style: italic; }
	
	
	/* Collapse and Expand Button zum auf- und zuklappen von Menüpunkten oder anderen Dingen */
	b.colex        { cursor: pointer; transition: transform 250ms; }
	b.colex.left   { transform: rotate(+90deg); }
	b.colex.right  { transform: rotate(-90deg); }
	
	/* -------------------------------------------------------------------------------- */
	/* PPS Einstellungen */
	th {
		text-align: center;
	}
	
	/* CRM- SRM- Leiste bzw jetzt PIN */
	h1 div.ereignisleiste .kuller, h1 div.ereignisleiste ul { font-size: 60%; }
	div.ereignisleiste                 { display: inline-block; font-weight: normal; color: black; }
	div.ereignisleiste         .kuller { background-color: #778899; border-radius: 85%; color: white; padding: 5px 10px; font-size: 87.5%; top: -10px; position: relative; }
	div.ereignisleiste.offen   .kuller { background-color: #778899; }
	div.ereignisleiste.faellig .kuller { background-color: #EE4041; }
	div.ereignisleiste         .kuller a { color: white; }
	div.ereignisleiste a { text-decoration: none; }
	
	div.neuesereignis { display: inline-block; cursor: pointer; z-index:25; }
	div.neuesereignis ul { visibility: hidden; opacity: 0; box-shadow: 3px 3px 6px 6px #AAAAAA; position: absolute; list-style: none; padding: 0px; margin: 0px; z-index: 1; transition: visibility 0s ease-out 0.1s, opacity 0.1s ease-out; }
	div.neuesereignis:hover ul, div.neuesereignis.hover ul { visibility: visible; opacity: 1; transition-delay: 0s; }
	div.neuesereignis li { position: relative; display: table-row; background-color: #FFFFFF; margin: 0px; }
	div.neuesereignis li:hover, div.neuesereignis li.hover { background-color: var(--system-color); color: white; }
	div.neuesereignis li a { display: table-cell; padding: 0.3em 1em; color: inherit; white-space: nowrap; }
	div.neuesereignis li a:hover:not(:first-child), div.neuesereignis li a.hover:not(:first-child) { background-color: #52AE32; }
	div.neuesereignis form { position: absolute; top:0; display: none; box-shadow: 3px 3px 6px 0px #AAAAAA; z-index: 1; background-color: white; padding: 0.25em; }
	div.neuesereignis form label { display: inline-block; width: 10em; padding: 0 0.25em; }
	div.neuesereignis form input[type=text], div.neuesereignis form select { float: none; margin: 0.25em 0; }
	div.neuesereignis form .deletebutton { position: absolute; margin: 0px; padding: 0px; right: 0.25em; top: 0.25em; }
	div.neuesereignis form .deletebutton img { height: 16px; width: 16px; margin: 3px; padding: 2px; }
	div.neuesereignis form .deletebutton:hover img { background-color: lightgrey; }
	
	.statusBox {
		color: black; background-color: mistyrose; border-width: 2px; border-style: solid; border-color: crimson; margin-top: 0.5cm; padding: 10px; width: auto; height: 100%; margin: 0px; text-align: center; border-radius: 4px;
	}
	.statusBoxWARTEN-AUF-UNTERLOS {
		color: black; background-color: lightblue; border-width: 2px; border-style: solid; border-color: blue; margin-top: 0.5cm; padding: 10px; width: auto; height: 100%; margin: 0px; text-align: center; border-radius: 4px;
	}
	
	/* Beleganlage über Personenmaske oder Ereignisliste */
	div.beleganlage-container      { box-shadow: 0 2px 5px rgba(0,0,0,.5); border-radius: 4px; background-color: white; margin: 0; padding: 0.5em; min-width: 15em; font-size: 1rem; font-weight: normal; position: absolute; z-index: 250; }
    div.anlage-menue > a           { display: block; padding: 0.5em; text-decoration: none; color: black; }
    div.anlage-menue > a:hover     { background-color: #52AE32; color: white; }
    div.anlage-menue > a:hover img { filter: brightness(0) invert(1); }
	
	ul.arbeitsstunden                        { margin: 0; list-style: none; }
	ul.arbeitsstunden li                     { border: 1px solid lightgrey; border-bottom: none; padding: 1px 4px; white-space: nowrap; display: flex; }
	ul.arbeitsstunden li:last-of-type        { border-bottom: 1px solid lightgrey; }
	ul.arbeitsstunden li.monat               { background-color: beige; }
	ul.arbeitsstunden li.rueckmeldung        { background-color: lemonchiffon; }
	ul.arbeitsstunden li.abwesenheit         { background-color: lemonchiffon; }
	ul.arbeitsstunden li:hover               { background-color: bisque; }
	ul.arbeitsstunden li > span              { flex: 1; overflow: hidden; text-overflow: ellipsis; }
	ul.arbeitsstunden li > span.geplant      { font-style: italic; }
	ul.arbeitsstunden li > span.fakturierbar { font-weight: bold; }
	span.gvl_vk_art, span.gvl_vk_art a {
		color: green
	}
	span.gvl_ek_art, span.gvl_ek_art a {
		color: red
	}
	span.gvl_vk_netto, span.gvl_vk_mwst, span.gvl_vst, span.gvl_vk_netto a, span.gvl_vk_mwst a, span.gvl_vst a {
		color: blue; font-style: italic; font-size: 90%;
	}
	span.gvl_ustva, span.gvl_ustva a {
		color: blue; font-style: italic; font-size: 90%; font-weight: bold;
	}
	span.gvl_ek_vk_diff, span.gvl_ek_vk_diff a {
		color: black; font-weight: bold;
	}
	div.numbering {
		counter-reset: rownum;
	}
	div.numbering span.rownum:before {
		content: counter(rownum); counter-increment: rownum;
	}
	tr.groupDevide {
		height: 1em; background-color: white !important; border-left-style: hidden; border-right-style: hidden;
	}
	tr.groupDevide:last-child {
		border-bottom-style: hidden;
	}
	tr.groupDevide td {
		border-left-style: hidden; border-right-style: hidden;
	}
	tr.groupHeader {
		background-color: lightgray !important; font-weight: bold; text-align: left; white-space: nowrap;
	}
	tr.groupResult {
		background-color: #FFFFFF !important; font-weight: bold; text-align: right; white-space: nowrap;
	}
	tr.groupResult label {
		width: 3em; margin-right: 1em;
	}
	tr.groupResult.stickyResult td { background-color: #99BBCC !important; }
	
	tr.droppable {
		text-align: left; height: 3em;
	}
	tr .highlight {
		background-color: salmon; min-width: 5em;
	}
	.spanfield {
		display: block; background-color: #DDDDDD; padding: 3px; border: 1px solid #CCCCCC; width: 14.5em; min-height: 1.2em; margin-bottom: 6px;
	}
	
	.ui-widget-overlay             { opacity: 0.4 }
	
	.ui-widget-header                    { background-color: var(--system-color); }
	.ui-widget-header.ui-dialog-titlebar { background-color: var(--system-color); }
	.ui-dialog ul.ui-widget-header { background-color: transparent; }
	
	.ui-tabs.ui-corner-all { border: none; }
	.ui-tabs .ui-tabs-panel { padding: 0.5em 0.5em; border: none; }
	
	li.ui-state-default {
		background: none; background-color: #668398; color: red;
	}
	
	
	div.bereich-tab                          { display: flex; flex-flow: row wrap; gap: 1em; }
	div.bereich-tab .bereich              { flex: 0 1 min-content; background-color: #FAFAFA; display: grid; grid-template-columns: max-content max-content; gap: 0.3em 1em; align-content: start; align-items: baseline; justify-content: space-between; justify-items: start; padding: 0 1em 1em 1em; border-radius: 0.5em; }
	
	div.bereich-tab .bereich div.legend   { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-width: 35em; }
	div.bereich-tab .bereich div.legend   { background-color: var(--system-color); color: #FFFFFF; padding: 0em 1em; margin: 0 0 0.5em -1em; height: 1.75em; border-radius: 0.5em 0.5em 0 0; grid-column: 1 / span 2; width: 100%; }
	
	div.bereich-tab .bereich > br                                 { display: none; }
	div.bereich-tab .bereich label.left                           { float: none; margin: 0; padding: 0; text-align: left; width: auto; min-width: 10em; grid-column-start: 1; color: #747474; font-weight: 500; font-size: 87.5%; }
	div.bereich-tab .bereich label.left + span                    { float: none; margin: 0; padding: 0; text-align: left; }
	div.bereich-tab .bereich label.left + div                     { float: none; margin: 0; padding: 0; text-align: left; }
	div.bereich-tab .bereich label.left + input                   { float: none; margin: 0; text-align: left; }
	div.bereich-tab .bereich label.left + input[type="checkbox"]  { margin: 0.375em 0; } /* Checkboxes etwas größer machen */
	div.bereich-tab .bereich label.left + select                  { float: none; margin: 0; text-align: left; }
	div.bereich-tab .bereich label.left + textarea                { float: none; margin: 0; text-align: left; }
	div.bereich-tab .bereich label.left + select + .select2-container .select2-selection--single { float: none; margin: 0; text-align: left; }
	
	div.bereich-tab .bereich > br.seperator                       { display: block; grid-column: 1 / span 2; margin: 0.125em 0; padding: 0; border: none; }
	div.bereich-tab .bereich > hr.seperator                       { display: block; grid-column: 1 / span 2; margin: 0.125em 0; padding: 0; border: none; }
	
	div.bereich-tab .bereich > div.legend + hr.seperator   { display: none; } /* Erstes <hr> in einem div.bereich ausblenden */
	div.bereich-tab .bereich > hr.seperator + hr.seperator { display: none; } /* 2 aufeinanderfolgende hr in einem div.bereich ausblenden */
	
	div.bereich-tab .bereich .docsPreview { margin-right: 1em; }
	
	
	
	
	
	.ui-tabs-hide {
		position: absolute; left: 10000em;
	}
	div.info {
		background-color: #668398; color: white; border: 2px solid grey; padding: 5px; margin-bottom: 10px;
	}
	span.mouseover, div.mouseover {
		border: 1px solid grey; box-shadow: 1px 1px darkgrey; margin-top: 2em; color: #000000; background-color: #FFFFCC; font-size: 80%; padding: 0.5em; position: absolute; display: none; line-height: 1.5em; z-index: 200;
	}
	span.mouseoverinfo, div.mouseoverinfo {
		border: 2px solid lightgrey; box-shadow: 2px 2px lightgrey; margin-top: 0; color: #000000; background-color: bisque; font-size: inherit; padding: 1em; position: absolute; display: none; line-height: inherit; z-index: 200;
	}
	table.operatorScreen {
		font-size: 1.3em; background: inherit; margin: 0.4em 0 0.5em 0;
	}
	table.operatorScreen th {
		padding: 0.3em; font-weight: bold; text-align: left;
	}
	table.operatorScreen td {
		padding: 0.3em;
	}
	table.operatorScreen div.box {
		font-size: 0.75em; border: solid 1px lightgrey; background-color: #FFFFFF; padding: 0.4em;
	}
	div.operator {
		font-size: 1.3em;
	}
	ul.operatorTabs {
		list-style-type: none; width: 100%; float: left; font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; margin: 0 0 0 0; padding: 0 0 0 0;
	}
	ul.operatorTabs li {
		display: block; float: left; margin: 0 0.5em 0 0; background-color: #E0E0E0; border: 1px solid gray; border-bottom: none; border-radius: 0 10px 0 0;
	}
	ul.operatorTabs li a {
		display: block; padding: 5px 8px; text-decoration: none; line-height: 1;
	}
	ul.operatorTabs li.active {
		background-color: #CCCCCC;
	}
	ul.operatorTabs	li:hover:not(.active) {
		background-color: #CCCCCC;
	}
	ul.operatorTabs li.active a,ul.operatorTabs li a:hover {
		color: #000000;
	}
	td.timesHeader {
		border-style: none; white-space: nowrap; vertical-align:top; position:relative;
	}
	td.timesHeader div.rotate {
		transform: rotate(90deg) translate(-10px,5px); 
		-moz-transform: rotate(90deg) translate(-10px,5px); 
		-webkit-transform: rotate(90deg) translate(-10px,5px);
		transform-origin: 0 100% 0;
		-moz-transform-origin: 0 100% 0;
		-webkit-transform-origin: 0 100% 0;
	    position: absolute;
		left: 50%;
    	right: 50%;
	}
	span.highlight {
		background-color: yellow;
	}
	.alerterror>.ui-dialog-titlebar {
		background-color: salmon;
	}
	.alerterror>.alerterror-body {
		background-color: mistyrose;
	}
	.alerterror-body {
		display: none; text-align: left;
	}
	.errormessage-nice {
		font-weight: bold;
	}
	.alertsuccess>.ui-dialog-titlebar {
		background-color: #AAFBAA;
	}
	.alertsuccess>.alertsuccess-body {
		background-color: #AAFBAA;
	}
	.alertsuccess-body {
		display: none; text-align: left;
	}
	.successmessage-nice {
		font-weight: bold;
	}
	.successmessage-raw {
		font-size: 80%;
	}
	.docmatrixElem {
		border-radius: 20px; padding-left: 5px; padding-right: 5px; height: 2.5em; width: 15em; float: left; margin: 2px; color: black; padding-top: 5px;
	}
	.DMCmitFreigabe {
		border: 1px solid #4DB8FF; background-color: #4DB8FF;
	}
	.DMCkeineFreigabe {
		border: 1px solid #FFC43B; background-color: #FFC43B;
	}
	.alternative1 {
		font-style: italic !important; color: gray !important;
	}
	.alternative1 a {
		color: #6699CC !important;
	}
	.second {
		background-color: lightgray;
	}
	.secondb {
		background-color: lightgray; font-weight: bold
	}
	.firstb {
		font-weight: bold;
	}
	.secondrowklein {
		background-color: lightgray; font-size: 87.5%; font-style: italic;
	}
	.rowklein {
		font-size: 87.5%; font-style: italic;
	}
	.secondrowkleinn {
		background-color: lightgray; font-size: 87.5%
	}
	.rowkleinn {
		font-size: 87.5%;
	}
	.secondrowkleinnb {
		background-color: lightgray; font-size: 87.5%; font-weight: bold;
	}
	.rowkleinnb {
		font-size: 87.5%; font-weight: bold;
	}
	.calculator {
		position: absolute; float: left; left: 38em; width: 108px; padding: 2px; height: 144px; border-color: white; border-width: 3px; border-style: solid
	}
	.calczahl {
		margin: 2px; float: left; background-color: silver; border-width: 1px; border-style: outset; border-color: black; width: 30px; height: 30px; font-weight: bold; text-align: center; font-size: 130%;
	}
	table.trefferliste tr:nth-child(2n) {
		background-color: #F0F0F0;
	}
	table.trefferliste tr:nth-child(2n-1) {
		background-color: #FBFBFB;
	}
	
	table.trefferliste.monatsuebersicht tr                 { background-color: #FFFFFF; } /* Standard nth-child(2n) der trefferliste überschreiben */
	table.trefferliste.monatsuebersicht td                 { color: #000000; --link-color: #000000; border: 1px solid #aaa; vertical-align: top; }
	table.trefferliste.monatsuebersicht td.keineArbStunden { background-color: lightcoral; }
	table.trefferliste.monatsuebersicht td.halberAT        { background-color: #FCFCCC; }
	table.trefferliste.monatsuebersicht td.ganzerAT        { background-color: #FADC8E; }
	table.trefferliste.monatsuebersicht td.aktTag          { background-color: lightgreen; }
	table.trefferliste.monatsuebersicht td.summe           { background-color: beige; vertical-align: middle; }
	
	table.trefferliste tr:hover, table.trefferliste tr.odd:hover, table.trefferliste tr.even:hover {
		background: #D1F0FF; color: #000
	}
	table.trefferliste {
		counter-reset: rownum;
	}
	table.trefferliste td.rownum {
		text-align: right;
	}
	table.trefferliste td.rownum:before {
		content: counter(rownum); counter-increment: rownum; text-align: right;
	}
	table.trefferliste td, table.trefferliste th, table.trefferlistek td, table.trefferlistek th {
		border: 1px solid #FFF; overflow: hidden; text-overflow: ellipsis;
	}
	table.trefferlistek {
		border: 1px solid #FFF; width: auto; border-collapse: collapse; font-size: 87.5%;
	}
	table.trefferlistek td, table.trefferlistek th {
		padding: 4px; border: 1px solid white; line-height: 110%;
	}
	table.trefferlistek tr:nth-child(2n) {
		background-color: #EAEAEA;
	}
	table.trefferlistek tr:nth-child(2n-1) {
		background-color: #F6F6F6;
	}
	/* Zebralook durch Klassen odd/even wieder überschreiben */
	table.trefferliste tr.odd,  table.trefferlistek tr.odd {
		background-color: #F0F0F0;
	}
	table.trefferliste tr.even, table.trefferlistek tr.even {
		background-color: #FFFFFF;
	}
	table.trefferlistek tr:hover, table.trefferlistek tr.odd:hover, table.trefferlistek tr.even:hover {
		background: #D1F0FF; color: #000
	}
	table.trefferlisteres {
		border: 1px solid lightgrey; width: 22em; border-collapse: collapse; font-size: 90%;
	}
	table.trefferlisteres td,table.trefferlisteres th {
		padding: 2px; border: none; line-height: 100%; color: black;
	}
	table.trefferlisteres tr:nth-child(2n) {
		background-color: #EAEAEA;
	}
	table.trefferlisteres tr:nth-child(2n-1) {
		background-color: #F6F6F6;
	}
	table.trefferlisteres th {
		background: #003366 /* logouno */;
	}
	table.trefferlisteres tr:hover, table.trefferlisteres tr.odd:hover, table.trefferlisteres tr.even:hover {
		background: #D1F0FF; color: #000
	}
	table.trefferlisteres.additional {
		margin-right: 1em; margin-bottom: 1em; position: relative; box-shadow: 3px 3px lightgrey;
	}
	
	.trefferlisteMW {
		border: 1px solid gray; border-collapse: collapse;
	}
	.trefferlisteMW td {
		padding: 3px; border-style: solid; border-color: gray; border-width: 1px; background-color: #FFFFFF; white-space: nowrap;
	}
	.trefferlisteMW th {
		padding: 3px; border-style: solid; border-color: gray; border-width: 1px; background-color: #DBDBDB; color: #000000; font-size: 0.9em; background-image: initial;
	}
	
	tr.theader td, table.trefferliste th,table.trefferlistek th,table.trefferlisteres th,th,table.trefferlisteRowspan th {
		background-color: var(--system-color); color: #FFFFFF; --link-color: #FFFFFF; font-size: 87.5%; font-weight: normal; text-align: center; vertical-align: middle;
	}
	table.tablesorter tr.tablesorter-headerRow th:not(.sorter-false)                    { cursor: pointer; }
	table.tablesorter tr.tablesorter-headerRow th.tablesorter-headerAsc                 { background: #000000 var(--image-arrow_up_green,   url("../images/svg/arrow_up_green.svg"))   no-repeat right center / 16px 16px; padding-right: 1.5em; }
	table.tablesorter tr.tablesorter-headerRow th.tablesorter-headerDesc                { background: #000000 var(--image-arrow_down_green, url("../images/svg/arrow_down_green.svg")) no-repeat right center / 16px 16px; padding-right: 1.5em; }
	table.trefferlisteMW.tablesorter tr.tablesorter-headerRow th.tablesorter-headerAsc  { background: #AAAAAA var(--image-arrow_up_green,   url("../images/svg/arrow_up_green.svg"))   no-repeat right center / 16px 16px; padding-right: 1.5em; }
	table.trefferlisteMW.tablesorter tr.tablesorter-headerRow th.tablesorter-headerDesc { background: #AAAAAA var(--image-arrow_down_green, url("../images/svg/arrow_down_green.svg")) no-repeat right center / 16px 16px; padding-right: 1.5em; }
	
	input[type=text].mwKlein {
		color: inherit; font-weight: inherit; text-align: right; width: 6.0em; float: none; margin: auto; background-color: #EEEEEE;
	}
	input[type=text].mwKlein:focus {
		background-color: #FFFFFF;
	}
	.mwClass0 {
		color: darkgreen;
	}
	.mwClass1, .mwClass-1 {
		color: orange;
	}
	.mwClass2, .mwClass-2 {
		color: red; font-weight: bold;
	}
	.mwClass3, .mwClass-3 {
		color: blue; font-weight: bold;
	}
	input[type=text].mwClassErr, input[type=text].mwClassErr:focus {
		color: white; font-weight: bold; background-color: red;
	}
	table.noborder {
		width: 12%; text-align: left; border: 0px; font-size: 100%; padding: 0px; border-collapse: collapse;
	}
	table.noborder th,table.noborder td {
		text-align: left; border: 0px;
	}
	table.noborder td.timesHeader {
		text-align:center;
	}
	.errormessage {
		color: black; background-color: mistyrose; padding: 1em; margin: 0em;
	}
	.successmessage {
		color: black; background-color: #AAFBAA; font-size: 90%; padding: 1em; margin: 0em;
	}
	.warningmessage {
		color: black; background-color: #FFFF99; font-size: 90%; padding: 1em; margin: 0em;
	}
	label.left {
		float: left; clear: both; text-align: right; width: 15em; margin: 0 0.3em 0.25em 0; padding: 4px 4px 4px 1px;
	}
	label.leftKl {
		float: left; clear: both; text-align: right; width: 10em; margin: 0 0.3em 0.25em 0; padding: 4px 4px 4px 1px;
	}
	label.short {
		width: 5em;
	}
	select[multiple] {
		background-color: #FAFAFA;
	}
	label            + span, label            + span + span, label            + span + span + span { float: left; margin: 0em 0em 0.25em 0em; padding: 4px 4px 4px 1px; }
	select           + span, select           + span + span, select           + span + span + span { float: left; margin: 0em 0em 0.25em 0em; padding: 4px 4px 4px 1px; }
	input[type=text] + span, input[type=text] + span + span, input[type=text] + span + span + span { float: left; margin: 0em 0em 0.25em 0em; padding: 4px 4px 4px 1px; }
	
	div.kopf {
		display: flex; background-color: #FFFFFF; border-bottom: 3px solid #CCCCCC; padding-top: 0.5em; width: 100%;
	}
	div.kopf div.parameter {
		flex: 1 1 auto; vertical-align: top; border-right: 1px solid darkgrey; padding: 0.2em 0.5em 1em 0em; white-space: nowrap; min-width: fit-content;
	}
	div.parameter label.left,div.parameter label+span,div.parameter input+span,div.parameter label+span+span,div.parameter input+span+span,div.parameter label+span+span+span,div.parameter input+span+span+span{
		margin-bottom: 0; padding: 1px;
	}
	div.parameter label.left + span, div.parameter label.left + div {
		float: left; min-width: 15em; padding: 1px; max-width: 25em; 
	}
	
	div.head                                  { display: flex; gap: 1em; margin-bottom: 0.5em; width: calc(100vw - 1.5em - var(--menu-size-left)); --number-of-blocks: 3 }
	div.head-block                            { display: grid; grid-template-columns: max-content 1fr; align-items: baseline;
	                                                      /* Die maximale Breite des Browses geteilt durch die Anzahl Blöcke */
	                                            flex: 1 1 calc(100vw  / var(--number-of-blocks));
	                                            padding: 0.5em 1em; background-color: #FAFAFA; border: 2px solid #C1C1C1; border-radius: 0.5em; align-content: flex-start; gap: 0.3em 1em; }
  	div.head-block label                      { float: none; text-align: left; width: auto; margin: 0; padding: 0; }
  	div.head-block label + span               { margin: 0; padding: 0; }
  	div.head-block label + span + span        { margin: 0; padding: 0; }
  	div.head-block label + span + span + span { margin: 0; padding: 0; }
  	
	input.isDate[type="text"], input.isDatetime[type="text"], input.isDateTime[type="text"] {
		background-image: var(--image-calender, url("../images/svg/calendar.svg"));
		background-origin: border-box;
		background-position: right top;
		background-repeat: no-repeat;
		background-size: 1.625em;
		padding-right: 1.625em;
	}
	input[type=text].short,input[type=password].short,select.short {
		width: 11em;
	}
	input[type=text].breit,input[type=password].breit,select.breit {
		width: 22.5em;
	}
	input.isDate.withFormel[type="text"] {
		color: brown;
	}
	input.isDate.withRange[type="text"] {
		background-image: none;
		padding-right: 3px;
		width: 6.75em
	}
	input.isDate.withRange[type="text"] + input[type="hidden"] + input.isDate.withRange[type="text"] {
		background-image: var(--image-calender, url("../images/svg/calendar.svg"));
		background-origin: border-box;
		background-position: right top;
		background-repeat: no-repeat;
		background-size: 1.625em;
		padding-right: 1.625em;
		margin-left: 0.25em;
		width: 8.5em
	}
	input.right {
		float: left; width: auto; clear: both; margin-left: 11.3em; margin-right: .3em;
	}
	input[type=checkbox].right,input[type=radio].right,input[type=submit].right,input[type=button].right {
		margin-left: 6.3em;
	}
	.forminputs {
		text-align: left;
	}
	.forminputs label.left {
		float: none; line-height: 1.5em;
	}
	.forminputs input,.forminputs select,.forminputs textarea {
		margin-top: 0; margin-bottom: 6px; float: none;
	}
	br {
		clear: both;
	}
	.xhtml br {
		clear: none;
	}
	label,select,input[type=checkbox],input[type=radio],input[type=button],input[type=submit],button[type="submit"] {
		cursor: pointer;
	}
	
	input[type="submit"],       input[type="button"],       button                           { background-color: #7BBB51; color: #ffffff; border: 1px solid #7BBB51; text-align: left; width: auto; padding: 0.25em 1em; }
	input[type="submit"]:hover, input[type="button"]:hover, button:hover                     { background-color: #52AE32; color: #ffffff; border: 1px solid #52AE32; }
	
	.ui-dialog-buttonset button.ui-button                                                    { background-color: #7BBB51; color: #ffffff; border: 1px solid #7BBB51; text-align: left; width: auto; padding: 0.25em 1em; }
	.ui-dialog-buttonset button.ui-button:hover, .ui-dialog-buttonset button.ui-button:focus { background-color: #52AE32; color: #ffffff; border: 1px solid #52AE32; }
	
	.fakturiert {
		font-style: italic; background-color: gainsboro;
	}
	.inbearbeitung {
		font-weight: normal; background-color: #FA964B;
	}
	.freigegeben {
		font-weight: bold; background-color: yellow;
	}
	.resDiv {
		float: left; margin: 0.5em;
	}
	table td.auslastung {
	  height: 2.5em; width: 1.4em; padding: 0px; min-width: 1.4em; max-width: 1.4em;
	}
	table td.auslastung div {
		height: 50%; width: 100%;
	}
	table td.auslastung div a {
		display: block; width: 100%; height: 100%;
	}
	input.dummysubmit {
		position: fixed; width: 1px; height: 1px; top: -100px; left: -100px;
	}
	.mapInvalid {
		background-color: darkgray; width: 2px; height: 2px;
	}
	.mapValid {
		background-color: yellow; width: 2px; height: 2px;
	}
	table.Map {
		border: 1px solid black; width: auto; border-collapse: collapse;
	}
	table.Map td,table.Map th {
		padding: 2px; border: 1px solid black; line-height: 60%; color: black; width: 2px; height: 2px; font-size: 60%;
	}
	table.Map th {
		color: black; background: gray /* logouno */;
	}
	table.Map tr:hover {
		background: #D1F0FF; color: #000
	}
	.mapBENUTZBAR {
		background-color: lightgreen;
	}
	.mapNICHTBENUTZBAR {
		background-color: black;
	}
	.mapTEST {
		background-color: lightgrey;
	}
	.mapJUSTIERUNG {
		background-color: darkgrey;
	}
	textarea.breit {
		width: 27em; height: 25em;
	}
	textarea.middle {
		width: 22em; height: 10em;
	}
	textarea.klein {
		width: 15em; height: 5em;
	}
	.DOWN { background-color: #FE423A; }
	.UP { background-color: #00CC00; }
	
	input[type="checkbox"], input[type="radio"]                     { width: 16px; height: 16px; margin: 0.375em 0.5em 0.25em 0; accent-color: var(--system-color); }
	label + input[type="checkbox"] + label + input[type="checkbox"] { margin-left: 0.5em; }
	label + input[type="radio"]    + label + input[type="radio"]    { margin-left: 0.5em; }
	
	/* Checkboxes können kein readonly. Deshalb eigene Klasse um sie so aussehen zu lassen wie eine disabled Checkbox aber gleichzeitg die Checkbox submitable zu machen. Erfordert etwas JS. Siehe Losliste */
	input[type="checkbox"].readonly              { opacity: 0.5; accent-color: #90909D; outline: none; }
	input[type="checkbox"].readonly:hover        { opacity: 0.42; }  /* hover wird vom Browser dunkler gemacht, deshalb machen wir es heller */
	input[type="checkbox"].readonly:hover:active { opacity: 0.355; } /* hover und active wird vom Browser noch dunkler gemacht, deshalb machen wir es noch heller */
	
	.losFATypeEW {
		background-color: lightgreen; color: black; padding: 0.125em 0.25em; border: 2px solid green; border-radius: 0.25em;
	}
	.losFATypeW {
		background-color: lightblue; color: black; padding: 0.125em 0.25em; border: 2px solid blue; border-radius: 0.25em;
	}
	.losFATypeTK {
		background-color: mistyrose; color: black; padding: 0.125em 0.25em; border: 2px solid red; border-radius: 0.25em;
	}
	input.klein {
		width: 10em; margin-right: 2px;
	}
	input.kleiner {
		width: 9em; float: right;
	}
	input.sucheklein {
		width: 6em;
	}
	input.ganzklein {
		width: 3em; display: inline;
	}
	span.betragleft {
		text-align: right; display: inline; width: 70px; float: left;
	}
	span.betragright {
		text-align: left; margin-left: 5px; display: inline; float: left;
	}
	tr.komm:nth-child(even) {
		background: lightgray
	}
	tr.gelbverlauf td:nth-child(1), tr.gelbverlauf td:nth-child(2), tr.gelbverlauf td:nth-last-child(1) {
		background-color: #FFFF99;
		color: black;
	}
	tr.rotverlauf td:nth-child(1), tr.rotverlauf td:nth-child(2), tr.rotverlauf td:nth-last-child(1) {
		background-color: #FF5050;
		color: black;
	}
	tr.reworkstep:not(.gelbverlauf):not(.rotverlauf) td:nth-child(1), tr.reworkstep td:nth-child(2), tr.reworkstep td:nth-last-child(1) {
		background-color: #FEBC67;
		color: black;
	}
	img.ui-datepicker-trigger {
		cursor: pointer; height: 24px; width: 24px; vertical-align: middle;
	}
	.farbverlauf_gelb {
		background: linear-gradient(to bottom, rgba(255, 233, 42, 1) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 233, 42, 1) 100% );
		color: black;
	}
	.monatBelege {
		font-size: 0.5em !important; display: inline-table;
	}
	.monatBelege a {
		color: white !important; text-decoration: underline;
	}
	.dahmenqs {
		width: 300px; height: 350px; font-size: medium; text-align: justify; display: inline-block; margin: 15px; vertical-align: top; font-weight: normal;
	}
	.ui-autocomplete {
		max-height: 150px; overflow-y: auto; overflow-x: hidden; text-align: left; box-shadow: 6px 6px 6px #AAAAAA;
	}
	.ui-autocomplete .ui-menu-item {
		display: table-row; width: inherit;
	}
	.ui-autocomplete .ui-menu-item > span { display: table-cell; padding: 3px 0.4em; white-space: nowrap; width: inherit; border: none; color: #333; max-width: 50em; overflow: hidden; text-overflow: ellipsis; }
	.ui-autocomplete .ui-menu-item:hover > span, .ui-autocomplete .ui-menu-item.ui-state-focus > span, .ui-autocomplete .ui-menu-item > span.ui-state-active { background-color: #eeeeee; }
	
	#kontaktform label,#newsletter label {
		width: 10em; float: left;
	}
	#kontaktform p,#newsletter p {
		clear: both;
	}
	#kontaktform .submit,#newsletter .submit {
		margin-left: 12em;
	}
	#kontaktform em,#newsletter em {
		font-weight: bold; padding-right: 1em; vertical-align: top;
	}
	.center {
		text-align: center; margin: 0.5em auto
	}
	table {
		width: auto; border-collapse: collapse; margin-bottom: 0.5em;
	}
	table.full {
		width: 100%;
	}
	table.fixed {
		table-layout: fixed;
	}
	th,td {
		padding: 0.3em 0.4em;
	}
	thead th {
		background-color: var(--system-color); color: #FFFFFF;
	}
	tbody th {
		background: #CCCCCC; color: #333333;
	}
	tbody th.sub {
		background: #DDDDDD; color: #333333;
	}
	hr {
		color: #FFFFFF; background: transparent; margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; border: 0; border-bottom: 1px #EEEEEE solid;
	}
	div.startpage {
		color: var(--system-color); font-weight: bold; font-size: 300%; text-align: center; margin: 5em 0;
	}
	
	/* OSM Einstellungen */
	div.olControlLayerSwitcher { line-height: 2em; font-size: 120%; width: 15em; }
	div.olPopup { width: 300px !important; opacity: 0.85 !important; }
	div.olPopupContent { width: 300px; }
	div.olPopupContent > h2 { font-size: 100%; }
	div.olControlLayerSwitcher .layersDiv { background-color: #575757; padding-right: 220px; width: 100%; }
	div.olControlLayerSwitcher label { font-weight: bold; white-space: nowrap; vertical-align: middle; margin-left: 0.5em; }
	
	/* AMAP Einstellungen */
	.amap-copyright, .amap-logo { z-index: auto; } /* Logo nach unten schieben default von 160 ist zuviel */
	div.amap-info-content > h2 { font-size: 100%; }
	
	.mBox {
		margin: 0 40px 20px 0; float: left;
	}
	
	.ui-corner-all, .ui-corner-top {
		border-radius: 0;
	}
	#ui-datepicker-div, #ui-datepicker-div .ui-slider {
		border: 1px solid #AAAAAA;
	}
	
	/* Anpassung der JQuery UI Tabs */
	.ui-tabs .ui-tabs-nav                 { border: none }
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 0.25em 1em; }
	
	.textareanoneditable {
		background-color: #DDDDDD; border: 1px solid #CCCCCC;
	}
	
	h1 .showpdfs       { margin-left: 0.5em; }
	.showpdfs img.icon { margin-right: 0.5em; }
	
	button.ui-datepicker-close { display: none; }
	
	.icon       { max-height: 1.5rem; max-width: 1.5rem; vertical-align: middle; padding: 0 1px; }
	.icon-small { max-height: 1rem; max-width: 1rem; vertical-align: text-bottom; }
	.icon-text  { max-height: 1.25em; max-width: 1.25em; vertical-align: text-bottom; } /* Hier die Größe mit der font-size skalieren 'em' statt 'rem' */
	.icon-big   { max-height: 3rem; max-width: 3rem; }
	
	.hidden { visibility: hidden; }
	.hidden-more { display: none; }
	
	input.kleinerer { width:6.6em; }
	input.number { text-align:right; }
	
	.dz-success-mark, .dz-error-mark, .dz-details img { display: none; }
	
	#file-upload-form { display: none; position: absolute; z-index: 1000; background-color: white; padding: 1em; box-shadow: 0 2px 5px rgba(0,0,0,.5); border-radius: 0.25em; }
	#file-upload-form .dz-submit-button input[type=button] { border-radius: 0.25em; position: absolute; right: 1.5em; top: 1.75em; }
	#file-upload-form .dz-message   { padding: 1em 0.5em; cursor: pointer; background-color: beige; border-radius: 0.25em; font-weight: bold; }
	#file-upload-form .dz-remove    { display: inline-block; margin-right: 0.25em; background: var(--image-delete2, url("../images/svg/delete2.svg")) no-repeat scroll 0 0 / 20px 20px rgba(0, 0, 0, 0); height: 20px; width: 20px; color: transparent; overflow: hidden; }
	#file-upload-form .dz-filename  { display: inline-block; width: 20em; text-overflow: ellipsis; overflow: hidden; }
	#file-upload-form .dz-comment   { display: inline-block; }
	#file-upload-form .dz-progress  { display: inline-block; width: 85%; margin: 1px; height: 0.5em; }
	#file-upload-form .dz-upload    { display: block; height: 100%; max-width: 100%; width: 0%; background-color: var(--system-color); }
	#file-upload-form .dz-size      { text-align: right; float: right; }
	#file-upload-form .dz-preview   { margin-top: 0.5em; background-color: #FAFAFA; border-radius: 0.25em; padding: 0.5em; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
	#file-upload-form .dz-error-message { color: red; }
	
	.dz-comment input {
		margin: 0;
	}
	
	.dz-submit-button {
		display:none;
	}
	
	.doccontainer input[type="button"]:disabled {
	    display: none;
	}
	
	.txtce {
		text-align: center;
	}
	
	.txtri {
		text-align: right;
	}
	
	.txtle {
		text-align: left;
	}
	
	.lagerort {
	    height: 1.5em;
	    width: 2em;
	    display:inline-block;
	    vertical-align:middle;
	}
	
	.vtlager {
	   border:1px solid black;
	   margin: -2px;
	   width:100%;
	   background-color: #FFF;
	}
	
	.vtfuellung {
		height:100%;
		background-color:lightblue;
		width: 100%;
	}

	.tablecell {
		display:table-cell;
	}
	
	.lagerortbox {
		height: 20em;
	}
	
	table.lagerortbox td {
	    padding:0;
	    margin:0;
	}
	
	table.lagerortbox tr {
	    border:none;
	}
	
	.lagerortbox td.content {
	    padding:0 1em;
	    margin:0;
	    text-align:right;
	    white-space:nowrap;
	    border: none;
	}
	
	table.lagerortbox td.vtspalte {
	    width:20em;
	    border: 1px solid black;
	    position:relative;
	}
	
	table.lagerortbox .vtfrei {
		text-align:center;
		font-weight:bold;
		font-size:150%;
		color:red;
	}
	
	.vtView {
		background-color: white;
	}
	
	.tftreeContainerWrapper.tftree-absolute .tftreeContainer        { z-index: 15; }
	.tftreeContainerWrapper.tftree-absolute .tftreeContainer.active { z-index: 25; position: absolute; left: -6px; top: -6px; padding-left: 6px; padding-top: 6px; box-shadow: 0 2px 5px rgba(0,0,0,.5); border-radius: 0.25em; background-color: white; }
	
	.tftreeContainerWrapper {
		float: none;
		margin: none;
		padding: none;
		min-width: none;
		position: relative;
		display: block;
	}
	
	.tftreeContainerWrapper.tftree-absolute .tftreeContainer.active > ul.tftree {
		padding: 0 0.5em 0.5em 0;
	}
	
	.childrenContainer {
		font-weight: normal;
	}
	
	ul.tftree {
		list-style-type: none;
		margin:0;
		padding:0;
	}
	
	ul.tftree li { margin: 0; padding: 0; white-space: nowrap; }
	
	ul.tftree ul { margin-left: 1.5em; padding: 0; }

	ul.tftree div.treeNode {
		cursor:pointer;
		min-width: 19px; 
		display: inline-block;
	}
	
	ul.tftree li.rootNode {
		display: flex;
		line-height: normal;
	}
	
	ul.tftree li.rootNode.expanded {
		margin-bottom: 0.25em;
	}
	
	ul.tftree li.rootNode div.treeNode {
	 	margin-right:0.25em;
	 	background: none;
	}
	
	ul.tftree .tftree-label { overflow: hidden; text-overflow: ellipsis; max-width: 45em; display: inline-block; vertical-align: bottom; }
	
	ul.tftree li.rootNode.collapsed div.treeNode {
	 	background: var(--image-bullet_triangle_grey, url("../images/svg/bullet_triangle_grey.svg")) no-repeat scroll center center / 12px 12px;
	}
	
	ul.tftree li.rootNode.expanded div.treeNode {
	 	background: var(--image-bullet_triangle_grey_90, url("../images/svg/bullet_triangle_grey_90.svg")) no-repeat scroll center center / 12px 12px;
	}

	ul.tftree li.collapsed div.treeNode {
		background: var(--image-bullet_triangle_grey, url("../images/svg/bullet_triangle_grey.svg")) no-repeat scroll center center / 12px 12px;
	}
	
	ul.tftree li.expanded div.treeNode {
		background: var(--image-bullet_triangle_grey_90, url("../images/svg/bullet_triangle_grey_90.svg")) no-repeat scroll center center / 12px 12px;
	}
	
	.childrenContainer ul.tftree {
		white-space: nowrap;
	}

	td > .lagerort {
		height:100%;
		width:100%;
	}
	
	table.liftbrowsertable tr, table.liftbrowsertable tr > td {
		padding:0 5px 0.5em 0;
		margin:0;
		white-space:nowrap;
	}
	
	table.liftbrowsertable tr, table.liftbrowsertable tr > td.labelColumn {
		padding: 0.5em;
		text-align:right;
	}
	
	table.liftbrowsertable tr, table.liftbrowsertable tr > td.labelRow {
		text-align:center;
	}
	
	table.liftbrowsertable tr > td > div {
		cursor: pointer;
	}
	
	table.liftbrowsertable tr > td > div.selected, table.liftbrowsertable .selected {
		outline: 3px solid red;
	}
	
	br { clear:both; }

	a[name]:not([href]){
		display: block;
		position: relative;
		top: -150px;
		visibility: hidden;
	}	
	div.ktform div.legend a:hover {
		text-decoration: none; 
		color: #ffffff
	}
	div.ktform div.legend a {
		color: #ffffff;
	}
	
	div.ktform div.legend > hr {
		display:none;
	}
	
	#notification-center, #notification-center-popup {
		position: fixed; right: 0; background-color: #666666; color: white; width: 25em; opacity: 0.95; display: none; overflow-y: auto; direction: rtl; z-index: 100; border-radius: 4px;
	}
	#notification-center > ul, #notification-center-popup > ul {
		list-style-type: none; margin: 0; direction: ltr;
	}
	#notification-center a, #notification-center-popup a {
		color: sandybrown;
	}
	#notification-center > ul > li, #notification-center-popup > ul > li {
		margin: 0; padding: 0.5em 0.5em 0.5em 1em; border-bottom: 2px solid white;
	}
	#notification-center > ul > li:hover, #notification-center-popup > ul > li:hover {
		background-color: #333333;
	}
	#notification-center-popup {
		display: block;
	}
	div.olMapViewport {
		z-index: 1;
	}
	
/* Wenn man mal den Wald vor lauter Bäumen nicht sieht */	
	span.importantStuff {
	  border: 1px solid black;border-radius: 5px;background-color:yellow;padding:2px;font-weight:bold;
	}
	
	td.OPEN {background-color:white}
	td.OPENLATE {background-color:#fca99c}
	td.INPROGRESS {background-color:#faf7c0}
	td.INPROGRESSLATE {background-color:#fde62d}
	td.DONE {background-color:#c7eecf}
	
	img.grayscale {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
		filter: gray; /* IE6-9 */
		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	}
	
	.doccontainer > div { min-width: 10em; }
	.doccontainer       { min-width: 15em; overflow: hidden; }
	.doccontainer:hover { overflow: visible; }
	.doccontainer:hover table.trefferliste { position: relative; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
	.doccontainer-dateien li > a { max-width: 15em; display: inline-block; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }
	
	/* Filterconfig */
	.filterrepository { white-space: nowrap; counter-reset: column-counter; }
	.filterrepository-filtercolumn { display: inline-block; vertical-align: top; white-space: normal; min-width: 31em; }
	.filterrepository-filter       { position: relative; }
	
	.filterrepository-actionbar       { position: relative; padding-left: 15.5em; margin-bottom: 0.5em; white-space: normal; box-sizing: border-box; max-width: 99vw; }
	.filterrepository-actionbar .edit { position: absolute; left: 0.25em; z-index: 1; }
	.filterrepository-actionbar .item { display: inline-block; line-height: normal; position: relative; }
	.filterrepository-actionbar .item                > a { margin: 0.25em; display: inline-block; background-color: #EEEEEE; padding: 0.25em 0.5em; color: black; border: 1px solid #CCCCCC; border-radius: 4px; position: relative; }
	.filterrepository-actionbar .item.selected       > a { font-weight: bold; }
	.filterrepository-actionbar .item.folder         > a { background-image: var(--image-bullet_triangle_grey,    url("../images/svg/bullet_triangle_grey.svg")); background-repeat: no-repeat; background-size: 12px; background-position: left+3px center; padding-left: 1.5em; }
	.filterrepository-actionbar .item.folder.open    > a { background-image: var(--image-bullet_triangle_grey_90, url("../images/svg/bullet_triangle_grey_90.svg")); }
	.filterrepository-actionbar .item.folder:hover   > a { background-image: var(--image-bullet_triangle_grey_90, url("../images/svg/bullet_triangle_grey_90.svg")); }
	.filterrepository-actionbar .item:hover          > a { background-color: #DDDDDD; text-decoration: none; }
	.filterrepository-actionbar .item         img.hinweis { position: absolute; top: -0.5em; right: -0.5em; width: 12px; height: 12px; }
	.filterrepository-actionbar .folder .item img.hinweis { position: unset; width: 1.25em; height: 1.25em; }
	
	.filterrepository-actionbar .folder       > ul { display: none; position: absolute; margin: 0; box-shadow: 0px 0px 2px 1px darkgray; border-radius: 4px; background-color: #EEEEEE; left: 1em; top: 2em; white-space: nowrap; z-index: 200 }
	.filterrepository-actionbar .folder.open  > ul { display: block; }
	.filterrepository-actionbar .folder:hover > ul { display: block; }
	.filterrepository-actionbar .folder .item      { display: block; }
	.filterrepository-actionbar .folder .item > a  { border: none; display: flex; flex-flow: row nowrap; gap: 0.25em; justify-content: space-between; }

	.filterrepository-editmodus .filterrepository-add { display: inline-block; }
	
	.filterrepository-editmodus .filterrepository-filtercolumn { min-width: 33em; min-height: calc(100vh - 200px); border: 1px solid lightgrey; border-radius: 3px; margin: 0 0.25em; background-color: white; }
	.filterrepository-editmodus .filterrepository-filtercolumn .column-counter { padding: 0; margin: 0; float: none; }
	.filterrepository-editmodus .filterrepository-filtercolumn .column-counter:before { content: counter(column-counter); counter-increment: column-counter; }
	
	.filterrepository-editmodus .filterrepository-filter { position: relative; min-height: 2.25em; padding: 0.25em; }
	.filterrepository-editmodus .filterrepository-filter:hover { background-color: aliceblue; }
	.filterrepository-editmodus .filterrepository-filter.ui-sortable-helper { background-color: #F9F9F9; }
	.filterrepository-editmodus .filterrepository-filter.hidden-filter.invisible { display: none }
	.filterrepository-editmodus .filterrepository-filter.hidden-filter { display: block; }
	.filterrepository-editmodus .filterrepository-filter.hidden-filter, .filterrepository-filter.hidden-filter * { color: #999999; }
	.filterrepository-filter.hidden-filter { display: none; }
	
	.filterrepository-editmodus .filterrepository-aktion-visible { display: block; position: absolute; margin: 0; padding: 0; border: 0; color: transparent; top: calc(50% - 8px); left: 0.25em; height: 16px; width: 16px; }
	.filterrepository-editmodus .filterrepository-filter label:first-child, .filterrepository-editmodus .filterrepository-filter br + label { padding-left: 16px; }
	.filterrepository-editmodus .katfilter-options { padding-left: 16px; }
	
	.katfilter-options label.negiert        { color: red; }
	.katfilter-options label.negiert:before { content: "¬ "; }
	
	/* Lighttable */
	table.lighttable th { cursor: default; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	table.lighttable th.sortAsc  { background: #000000 var(--image-arrow_up_green,   url("../images/svg/arrow_up_green.svg"))   no-repeat right center / 16px 16px; padding-right: 1.5em; }
	table.lighttable th.sortDesc { background: #000000 var(--image-arrow_down_green, url("../images/svg/arrow_down_green.svg")) no-repeat right center / 16px 16px; padding-right: 1.5em; }
	/* iPhone/iPad TAP Support */ 
	table.lighttable tr.ltheader th { cursor: pointer; }
	
	/* Lighttable Formatierungen */
	.ltcolumn       { background-color: var(--system-color); color: #FFFFFF; text-align: center; padding: 0.25em 0.5em; margin: 1px; cursor: pointer; position: relative; }
	.ltcolumn:hover { background-color: #000000; }
	
	.lighttable-group-style-header            { margin-bottom: 0.50em; font-weight: bold; font-size: 115%; }
	.lighttable-group-style-subheader         { margin-bottom: 0.25em; font-weight: bold; }
	.default-styles                           { display: inline-block; vertical-align: top; white-space: nowrap; margin-bottom: 0.25em; margin-right: 2em; text-align: left; }
	.default-styles label                     { display: inline-block; width: 12em; }
	.default-styles input                     { float: none; text-align: right; }
	.default-styles select                    { float: none; }
	
	.aggregate-groups                         { display: inline-block; vertical-align: top; white-space: nowrap; margin-bottom: 0.25em; margin-right: 2em; text-align: left; }
	.aggregate-groups label                   { display: inline-block; width: 6em; }
	.aggregate-groups input                   { float: none; }
	.aggregate-groups select                  { float: none; }
	
	.conditional-styles                       { margin-top: 1em; }
	.conditional-styles div.style             { border: 1px solid #FFFFFF; border-radius: 4px; min-width: 8em; min-height: 1.175em; text-align: center; padding: 0.25em; } /* Standard Rahmen für "1px solid white", genauso wie jeder Zelle einer Trefferliste */
	.conditional-styles div.style.hidden-content span { display: none; }
	.conditional-styles input                 { float: none; margin: 0 0 2px 0; padding: 2px; }
	.conditional-styles input[type=text]      { width: 10em; }
	.conditional-styles select                { float: none; margin: 0 0 2px 0; width: 10em; }
	.conditional-styles table.trefferliste td { border: 1px solid lightgrey; text-align: center; }
	.conditional-styles .rule-operator:first-of-type .add-rule { display: inline; }
	.conditional-styles .rule-operator:first-of-type .del-rule { display: none; }
	.conditional-styles .rule-operator:not(:first-of-type) .add-rule { display: none; }
	.conditional-styles .rule-operator:not(:first-of-type) .del-rule { display: inline; }
	
	.ltcolumn-options-button { position: absolute; right: 0; top: 0; padding: 2px 2px 2px 1em; }
	
	.ltcolumn.ui-sortable-helper { cursor: move; }
	.ltcolumn-placeholder, .ltcolumn.lastElement { background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #e6e6e6; padding: 0.25em 0.5em; min-height: 1.1em; margin: 3px; border: 1px solid #d3d3d3; color: #555555; }
	.repeating-ltheader { font-size: 75%; }
	table.stickyHeader > thead > tr:not(.nonsticky) > th, .sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; z-index: 1; }
	table.stickyHeader { border-collapse: separate; border-spacing: 0; } /* no border bug wenn border-collapse: collapse verwendet wird */
	.stickyHeaderCell { position: absolute; }
	.stickyHeaderContent { display:table-cell; vertical-align:middle; font-size:98%; }
	fieldset > .stickyHeaderLimiter { padding-top: 0.5em; margin-top: 0.5em; }
	
	/* Transfact Hilfe */
	div.help-bubble                              { display: block; width: fit-content; position: relative; }
	img.help-icon                                { cursor: pointer; width: 16px; height: 16px; vertical-align: sub; margin: 0 0.25em; }
	img.help-icon.with-tooltip                   { background: var(--image-question, url("../images/svg/question.svg")) no-repeat 0 0 / 16px 16px; padding-top: 16px; box-sizing: border-box;  }
	img.help-icon.placeholder                    { display: none; }
	/* Icons positionen. Filterconfig, Tablerepository, etc... */
	.filterrepository-filter img.help-icon:not(.placeholder) +       label.left { width: 14em; padding-right: calc(4px + 1em); }
	.filterrepository-filter img.help-icon:not(.placeholder) + div > label.left { width: 14em; padding-right: calc(4px + 1em); } /* Katfilter (wenn fehlerhaft, => ändern auf div.katfilter) */
	
	.filterrepository-filter img.help-icon                                { position: absolute; top: 7px; left: 14em; }
	.ltheader                img.help-icon:not(.placeholder)              { display: block; margin: 0 auto; }
	.help-bubble             img.help-icon                                { position: absolute; top: 2px; left: 2px; }
	
	/* Artikeleinheiten */
	div.unit > span { display: table-row; }
	div.unit > span > span { display: table-cell; text-align: right; padding: 0 0.2em 0 0; width: 5em; }
	div.unit > span > span:nth-child(2n) { text-align: left; padding: 0 0 0 0.2em; font-size: 87.5%; }
	span.unit { white-space: nowrap; }
	span.unit > span:nth-child(2n) { text-align: left; padding: 0 0 0 0.2em; font-size: 87.5%; }
	
	/* E-Mail Client */
	#emailclient { display: flex; flex-flow: column nowrap; margin: 0.5em; border: 1px solid #AAAAAA; }
	#emailclient .emailclient-header { background-color: #F6F6F6; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #AAAAAA; }
	#emailclient .emailclient-header .headeritem { display: inline-block; padding: 0.5em 1em; text-align: center; text-decoration: none; }
	#emailclient .emailclient-header .headeritem img { margin-right: 0.5em; }
	#emailclient .emailclient-body { display: -webkit-flex; display: flex; flex-flow: row nowrap; height: 47em; }
	#emailclient .emailclient-body ul { list-style-type: none; cursor: default; padding: 0; margin: 0; }
	#emailclient .emailclient-body .postfaecher { padding: 1em 0.25em 0em 1em; cursor: default; user-select: none; -moz-user-select: none; -webkit-user-select: none; background-color: #F6F6F6; overflow: auto; -webkit-flex: 1 1 0; flex: 1 1 0; border-right: 1px solid #CECECE; }
	#emailclient .emailclient-body .postfaecher table { margin: 0; }
	#emailclient .emailclient-body .postfaecher img { vertical-align: text-bottom; margin-right: 0.5em; margin-top: -2px; }
	#emailclient .emailclient-body .postfaecher .postfachitem { padding: 0.4em 0.5em 0.4em 0; white-space: nowrap; display: flex; }
	#emailclient .emailclient-body .postfaecher .postfachitem .foldername { flex: 1 0 auto; }
	#emailclient .emailclient-body .postfaecher .postfachitem:hover, #emailclient .emailclient-body .postfaecher .postfachitem.selected { background-color: #D1F0FF; }
	
	#emailclient .emailclient-body .postfaecher span.itemsunseen           { padding: 0.25em; font-weight: bold; background-color: #D1F0FF; border-radius: 50%; font-size: 78%; flex: 0 0 auto; min-width: 1.25em; text-align: center; }
	#emailclient .emailclient-body .postfaecher span.itemsunseenall        { padding: 0.25em; font-weight: bold; background-color: #D1F0FF; border-radius: 50%; font-size: 78%; flex: 0 0 auto; min-width: 1.25em; text-align: center; }
	#emailclient .emailclient-body .postfaecher span.itemsunseen.items0    { display: none; }
	#emailclient .emailclient-body .postfaecher span.itemsunseenall.items0 { display: none; }
	#emailclient .emailclient-body .postfaecher .mainpostfach.branch.collapsed span.itemsunseen { display: none; }
	#emailclient .emailclient-body .postfaecher .mainpostfach.branch.expanded span.itemsunseenall { display: none; }
	#emailclient .emailclient-body .postfaecher .mainpostfach.leaf span.itemsunseenall { display: none; }

	#emailclient .emailclient-body .mails { cursor: default; user-select: none; overflow-x: hidden; flex: 2 2 0; border-right: 1px solid #CECECE; }
	#emailclient .emailclient-body .mails-container { height: 100%; overflow-y: scroll; overflow-x: hidden; }
	#emailclient .emailclient-body .mails li { margin: 0; padding: 0; }
	#emailclient .emailclient-body .mails li.selected { background-color: #D1F0FF; }
	#emailclient .emailclient-body .mails .mail-header-preview { padding: 1em 1em 1em 0; border-bottom: 1px solid #aaaaaa; margin-left: 2em; }
	#emailclient .emailclient-body .mails .mail-header-icons { position: absolute; left: 0; top: 1em; text-align: center; margin-left: 3px; width: 1.5em; }
	#emailclient .emailclient-body .mails .mail-header-one, .mail-header-one { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
	#emailclient .emailclient-body .mails .mail-header-two, .mail-header-two { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
	#emailclient .emailclient-body .mails .mail-header-three, .mail-header-three { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: grey; }
	#emailclient .emailclient-body .mails .mail-name { font-weight: bold; }
	#emailclient .emailclient-body .mails .mail-date { color: grey; white-space: nowrap; }
	
	#emailclient .emailclient-body .mails .mail-subject { flex: 4 4 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; margin-right: 0.5em; }
	#emailclient .emailclient-body .mails .mail-folder { flex: 2 2 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; margin-right: 0.5em; color: grey; }
	#emailclient .emailclient-body .mails .mail-size { white-space: nowrap; text-align: right; color: grey; }
	
	#emailclient .emailclient-body .selectedmail { -webkit-flex: 4 4 0; flex: 4 4 0; display: -webkit-flex; display: flex; -webkit-flex-flow: column nowrap; flex-flow: column nowrap; /* background: url("../images/loading3.png") center center no-repeat; */ }
	#emailclient .emailclient-body .selectedmail .selectedmail-head { display: block; -webkit-flex: 2 2 0; flex: 2 2 0; border: none; background-color: #FFFFFF; max-height: 7em; }
	#emailclient .emailclient-body .selectedmail .selectedmail-body { display: block; -webkit-flex: 8 8 0; flex: 8 8 0; border: none; background-color: #FFFFFF; padding-left: 0.75em; }

	#emailview iframe { border: none; }
	
	/*******************************************************************************************************************************/
	/******* Chat Client ***********************************************************************************************************/
	/*******************************************************************************************************************************/
	#chatclient                     { display: flex; flex-flow: row nowrap; margin: 0.5em 0 0 0; border: 1px solid #AAAAAA; height: calc(100vh - 6em); border-radius: 0.5em; }
	#chatclient ul                  { list-style-type: none; padding: 0; margin: 0; }
	#chatclient .icon               { padding: 4px; border-radius: 0.5em; }
	#chatclient .icon:hover         { background-color: #D1F0FF; }
	
	#chatclient .channels-wrapper   { display: flex; flex-flow: column nowrap; justify-content: space-between; flex: 0 0 20em; background-color: #FAFAFA; border-radius: 0.5em; }
	
	#chatclient .channels-header    { display: flex; flex-flow: row nowrap; font-weight: bold; padding: 0.5em 1.5em 0.5em 0.5em; box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5); height: 3em; box-sizing: border-box; align-items: center; z-index: 1; }
	
	#chatclient .channels           { padding: 0.5em; cursor: default; overflow: hidden; flex: 1 1 0; border-right: 1px solid #CECECE; user-select: none; }
	#chatclient .channels:hover     { overflow: auto; }
	
	#chatclient .channels ul                               { display: flex; flex-flow: column nowrap; gap: 0.5em; }
	#chatclient .channels .channelitem .channelkey                      { flex: 0 0 auto; border-radius: 50%; display: inline-block; background-color: green; color: white; width: 3em; height: 3em; line-height: 3em; box-sizing: border-box; text-align: center; vertical-align: middle; position: relative;	}
	#chatclient .channels .channelitem .channelname                     { flex: 1 1 auto; display: flex; flex-flow: column nowrap; }
	#chatclient .channels .channelitem .channelname .channelname-line   { display: flex; flex-flow: row nowrap; gap: 0.5em; justify-content: space-between; max-width: 13.5em; }
	#chatclient .channels .channelitem .channelname .channelname-name   { font-weight: bold; }
	#chatclient .channels .channelitem .channelname .channelname-date   { font-weight: bold; font-size: small; }
	#chatclient .channels .channelitem .channelname .channelname-msg    { color: grey; font-size: small; text-overflow: ellipsis; overflow: hidden; }
	#chatclient .channels .channelitem .channelname .channelname-silent { color: grey; font-size: small; }
	
	#chatclient .channels .channelitem          .channelkey .unread        { font-size: 75%; position: absolute; right: -8px; top: -10px; line-height: 1.5em; border-radius: 50%; background-color: crimson; color: #F6F6F6; min-width: 1.5em; height: 1.5em; border: 2px solid #F6F6F6; padding: 2px; }
	
	#chatclient .channels .channelitem          .channelkey .online        { position: absolute; right: -3px; bottom: -3px; border-radius: 50%; padding: 8px; border: 2px solid #F6F6F6; background-color: #5dbb63; }
	#chatclient .channels .channelitem          .channelkey .online span   { display: none; }
	
	#chatclient .channels .channelitem.selected .channelkey .online,
	#chatclient .channels .channelitem:hover    .channelkey .online        { border: 2px solid #D1F0FF; }
	
	#chatclient .channels .channelitem          .channelkey .offline       { position: absolute; right: -3px; bottom: -3px; border-radius: 50%; padding: 8px; border: 2px solid #F6F6F6; background-color: grey; }
	#chatclient .channels .channelitem          .channelkey .offline span  { border-radius: 50%; background-color: #F6F6F6; padding: 4px; position: absolute; top: 4px; left: 4px; }
	
	#chatclient .channels .channelitem.selected .channelkey .offline,
	#chatclient .channels .channelitem:hover    .channelkey .offline       { position: absolute; right: -3px; bottom: -3px; border-radius: 50%; padding: 8px; border: 2px solid #D1F0FF; background-color: grey; }
	
	#chatclient .channels .channelitem.selected .channelkey .offline span,
	#chatclient .channels .channelitem:hover    .channelkey .offline span  { border-radius: 50%; padding: 4px; position: absolute; top: 4px; left: 4px; background-color: #D1F0FF; }
	
	#chatclient .channels-wrapper .clientstatus { font-style: italic; height: 4em;  padding: 0.5em;  box-sizing: border-box;box-shadow: 0px -5px 5px -5px rgba(0,0,0,0.5); }
	
	#chatclient .chat { display: flex; flex-flow: column nowrap; overflow-x: hidden; flex: 4 4 0; border-right: 1px solid #CECECE; border-radius: 0.5em; }
	
	#chatclient .chat-container-wrapper { display: flex; flex-flow: column nowrap; justify-content: space-between; height: 100%; position: relative; }
	
	#chatclient .chat-container-header              { text-align: left; padding: 0.5em; background-color: #FAFAFA; flex: 0 0 auto; box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5); height: 3em; box-sizing: border-box; z-index: 1; }
	#chatclient .chat-container-header .channelkey  { border-radius: 50%; display: inline-block; width: 2em; height: 2em; line-height: 2em; box-sizing: border-box; text-align: center; vertical-align: middle; }
	#chatclient .chat-container-header .channelname { vertical-align: middle; font-weight: bold; margin: 0 0.5em; } 
	
	#chatclient .chat-container { padding: 0.5em 0 1.5em 0; height: 100%; overflow-y: scroll; overflow-x: hidden; }
	#chatclient .chat .chat-container ul                      { display: flex; flex-flow: column; flex: 10 10 auto; }
	#chatclient .chat .chat-container li                      { margin: 0.15em 0.5em; width: fit-content; max-width: 70%; }
	#chatclient .chat .chat-container li div                  { padding: 0.25em 0.75em; border-radius: 0.5em; }
	#chatclient .chat .chat-container li span.text            { white-space: pre-wrap; }
	#chatclient .chat .chat-container li span.time            { margin-left: 0.5em; font-size: 75%; color: grey; }
	#chatclient .chat .chat-container li span.time span.user-fullname { margin-right: 0.25em; }
	#chatclient .chat .chat-container li span.code            { white-space: pre-wrap; border-radius: 0.25em; padding: 0.15em 0.25em; font-family: monospace; margin: 0.5em 0; }
	#chatclient .chat .chat-container li span.code.block      { display: inline-block; padding: 0.5em; }
	#chatclient .chat .chat-container li span.bold            { font-weight: bold; }
	#chatclient .chat .chat-container li span.italic          { font-style: italic; }
	#chatclient .chat .chat-container li.message.incoming span.code { background-color: #DDDDDD; } 
	#chatclient .chat .chat-container li.message.outgoing span.code { background-color: #60A0FF; }

	#chatclient .chat .chat-container li.message div.reply { border-left: 0.4em solid white; }
	#chatclient .chat .chat-container li.message div.reply .replyToUsername { font-weight:bold; display:block; font-size: 75%; }
	#chatclient .chat .chat-container li.message.incoming div.reply .text a, #chatclient .chat .chat-container li.message.outgoing > div > span.text a { color: lightgray; }
	
	#chatclient .chat .chat-container li.message.incoming     { align-self: start; }
	#chatclient .chat .chat-container li.message.incoming div, #chatclient .chat .chat-container li.message.outgoing div.reply { background-color: #EEEEEE; color: #000000; }
	#chatclient .chat .chat-container li.message.outgoing     { align-self: end; }
	#chatclient .chat .chat-container li.message.outgoing div, #chatclient .chat .chat-container li.message.incoming div.reply { background-color: #3C82EC; color: white; }
	#chatclient .chat .chat-container li:not(.message)        { align-self: center; }
	#chatclient .chat .chat-container li:not(.message)    div { text-align: center; background-color: bisque; font-style: italic; }
	#chatclient .chat .chat-container li.message .translation { margin-left: 0.25em; font-weight: bold; cursor: pointer; }
	#chatclient .chat .chat-container .dayinfo                { position: absolute; background-color: rgba(64, 64, 64, 0.75); border-radius: 1em; padding: 0.25em 0.75em; text-align: center; width: 12em; z-index: 1; right: calc(50% - 6.25em); color: white; display: none; }
	
	#chatclient .chat .chat-input                        { flex: 0 0 auto;  z-index: 1; background-color: #fafafa; box-sizing: border-box; height: 4em; line-height: 4em; text-align: center; box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.5); }
	#chatclient .chat .chat-input                        { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; position: relative; }
	#chatclient .chat .chat-input textarea[name=message] { width: calc(100% - 3em); resize: none; float: none; border-radius: 0.5em; padding: 0.5em 0.5em 0.5em 2.5em; margin: 0; background: url('../images/svg/export.svg') no-repeat left+8px top+8px / 1.375em white; line-height: 1.25em; height: 2.35em; font-family: inherit; }
	
	#chatclient .channels .channelitem          { border-radius: 0.5em; padding: 0.4em 0.5em; white-space: nowrap; display: flex; flex-flow: row nowrap; gap: 0.5em; cursor: pointer; }
	#chatclient .channels .channelitem:hover    { background-color: #D1F0FF; }
	#chatclient .channels .channelitem.selected { background-color: #D1F0FF; }
	
	#chatclient #replyTo-bar { display:none;
    width: calc(100% - 5em);
    background-color: #EEE;
    padding: 0.5em 1em;
    border-radius: 0.5em 0.5em 0 0;
    position: absolute;
    top: -1.1em;
    text-align: left;
    line-height: initial; 
	}
	#chatclient #replyTo-bar .replyTo-user { font-weight: bold; }
	
	/*******************************************************************************************************************************/
	/*******************************************************************************************************************************/
	
	/* ui-dialog - Änderungen */
	.ui-dialog { max-width: 90%; white-space: nowrap; }
	.ui-dialog .ui-dialog-buttonpane { margin-top: 0; }
	.ui-dialog .ui-dialog-content { max-height: 85vh !important; } /* important, da scheinbar irgendwas in jquery-dialog ein "max-height: none;" setzt */
	.ui-dialog .ui-resizable-se { right: 0; bottom: 0; resize: both; width: 14px; height: 14px; background-image: none !important; }
	
	/* SEPA-Überweisungsformular */
	#sepaueberweisung { background-color: #EFF4FA; padding: 1em 2em; max-width: 90vw; min-width: 55em; }
	#sepaueberweisung label, #sepaueberweisung input, #sepaueberweisung select, #sepaueberweisung textarea { display: inline-block; float: none; margin-bottom: 0.5em; }
	#sepaueberweisung label { font-weight: bold; margin-bottom: 0.3em; }
	#sepaueberweisung input, #sepaueberweisung select, #sepaueberweisung textarea { padding: 0.5em; background-color: white; border: 2px solid lightgrey; font-family: inherit; width: 25em; }
	#sepaueberweisung select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); background-repeat: no-repeat; background-position-x: right; background-position-y: center; padding-right: 1.25em; min-width: 3.75em; user-select: none; -webkit-user-select: none; }
	#sepaueberweisung input:focus, #sepaueberweisung select:focus, #sepaueberweisung textarea:focus { border: 2px solid #a0ced9; }
	#sepaueberweisung input.isDate { background-size: 2.35em; }
	#sepaueberweisung table.sepa-auftraggeber td { padding: 0.1em 0.5em; }
	#sepaueberweisung table.sepa-sammelliste thead th { position: sticky; top: 0; }
	#sepaueberweisung table.sepa-sammelliste tfoot th { position: sticky; bottom: 0px; }
	#sepaueberweisung table.sepa-sammelliste td { text-align: left; padding: 0.25em 0.5em; }
	#sepaueberweisung table.sepa-sammelliste input, #sepaueberweisung table.sepa-sammelliste select, #sepaueberweisung table.sepa-sammelliste textarea { margin-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
	
	/* Creditreform */
	.creditreform label { display: inline-block; width: 15em; margin: 0.25em 0 0.25em 0; }
	.creditreform input[type="radio"] + label, .creditreform input[type="checkbox"] + label { width: auto; margin: 0 0.5em 0 0; }
	.creditreform input, .creditreform select, .creditreform textarea { float: none; margin: 0 0 0.25em 0; }
	.creditreform input[type="radio"], .creditreform input[type="checkbox"] { margin: 0 0.5em 0 0; }
	.creditreform label + span, .creditreform label + span + span { float: none; padding: 0; margin: 0.25em 0 0.25em 0; display: inline-block; vertical-align: top; max-width: 50em; }
	
	img.selected { opacity:0.2; }
	img.selected-overlay { position:absolute; top:0.5em; left:0.5em; background-color:transparent !important; }

	#mail-editor input.single-line-input { background-color: transparent; border: none; display: table-cell; float: none; width: 98%; }
	#mail-editor hr { margin: 0; padding: 0; }
	
	#mail-editor ul.tagit { border: none; padding: 0; margin: 0; cursor: text; }
	#mail-editor ul.tagit input[type="text"] { line-height: 1.5em; }
	#mail-editor ul.tagit li.tagit-choice       { background-color: #eee; cursor: pointer; border: none; border-radius: 0.25em; padding: 0.15em 1em 0.15em 0.5em; }
	#mail-editor ul.tagit li.tagit-choice:hover { background-color: antiquewhite; }
	#mail-editor select                         { background-color: transparent; cursor: pointer; border: none; border-radius: 0.25em; padding: 0.25em 1em 0.25em 0.5em; box-shadow: none; }
	#mail-editor select:hover       	            { background-color: antiquewhite; }
	
	#mail-editor li.tagit-new { margin: 0; float: none; overflow: hidden; }
	#mail-editor li.tagit-new input { width: 100%; }
	
	#mail-editor input[type="text"] { box-shadow: none; }
	
	#mail-editor-container { height: 100%; min-width: 60em; }
	#mail-editor-container .mail-zeile { display: table; width: 100%; }
	#mail-editor-container .mail-zeile-label { font-weight: bold; display: table-cell; width: 1em; white-space: nowrap; vertical-align: middle; line-height: 2.5em; }
	#mail-editor-container .mail-zeile-content { display: table-cell; vertical-align: middle; padding-left: 0.5em; }
	#mail-editor-container input { margin: 0; }
	
	/* Statistik | Statistikziele */
	#statistikziele table th               { text-align: right; padding-right: 7px; padding-left: 7px }
	#statistikziele table th:first-child   { text-align: left;  padding-right: 7px; padding-left: 7px }
	#statistikziele table th:last-child    { text-align: right; padding-right: 10px; padding-left: 10px; }
	#statistikziele table td               { text-align: center; padding: 0.25em; }
	#statistikziele table td:first-child   { text-align: left; padding: 0.25em 0.5em; max-width: 25em; }
	#statistikziele table td.summeX        { text-align: right; font-size: 125%; padding: 0.25em 0.5em 0.25em 1em; font-weight: bold; }
	#statistikziele table td.summeY        { text-align: right; background-color: #b8dbb8; font-size: 125%; padding: 0.25em 0.5em 0.25em 1em; font-weight: bold; }
	#statistikziele table input[type=text] { text-align: right; width: 6em; margin: 0; float: none; }
	
	/* Akt Schritte */
	span.mainlabel { font-weight: bold; color: blue; }
	span.verzugP { font-weight: bold; padding: 0 0.25em; color: red; }
	span.verzugM { color: green; }
	span.aktschrittB { white-space: nowrap; font-weight: bold; }
	span.aktschrittN { white-space: nowrap; }
	span.aktschrittB img,           span.aktschrittN img           { height: 1.2em; width: 1.2em; vertical-align: text-bottom; }
	span.aktschrittB img.stepstart, span.aktschrittN img.stepstart { margin-right: 0.25em; }
	span.aktschrittB img.worker,    span.aktschrittN img.worker    { margin-left: 0.25em; }

	.cke_contents_ltr blockquote {
	    border-left-width: 10px !important;
	}
	
	.cke_focus { box-shadow: 0 0 2px 2px #A0CED9; border: 1px solid #A0CED9; }

	table.noborder td.timesCell {
		text-align: center; 
		padding: 0em 1em 0em 1em;
		white-space: nowrap;
	}
	
	/* Anpassungen an jquery-ui styles */
	
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
		border: 1px solid #AAAAAA;
		background: #FFFFFF;
		color: #212121;
	}
	.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
		color: #212121;
	}
     
	.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	    font-family: inherit;
	    font-size: inherit;
	}
	
	.ui-widget-header {
	    color: #FFF;
	    font-weight: bold;
	}
	
	.ui-widget-content   { color: inherit; } /* Den JQuery-UI Default von #333333 überschreiben */
	.ui-widget-content a { color: var(--system-color); }
	
	/*
	 * jQuery UI Timepicker 1.8.6
	 */
	.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
	.ui-timepicker-div dl { text-align: left; }
	.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
	.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
	.ui-timepicker-div td { font-size: 90%; }
	.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
	.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
	
	.ui-timepicker-rtl{ direction: rtl; }
	.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
	.ui-timepicker-rtl dl dt{ float: right; clear: right; }
	.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
	
	/* Shortened version style */
	.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
	.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
	.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
	.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
	.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
	.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
	.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
	.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
	.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
	.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
	.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
	.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
	.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
	
	.cke_float .cke_inner { min-width:550px; }

	a.callablePhoneNumber { color: #E20074; }	
	
	div.belegkommentar-short { opacity: 1; visibility: visible; transition: opacity 250ms, visibility 250ms; overflow-y: auto; height: 5em; border: 1px solid lightgray; border-radius: 0.25em; padding: 0.25em 0.5em; box-sizing: border-box; }
	div.belegkommentar-long  { opacity: 0; visibility: hidden;  transition: opacity 250ms, visibility 250ms; position: absolute; min-height: 5em; max-height: 30em; overflow: auto; background-color: #FAFAFA; z-index: 200; border: 1px solid lightgrey; border-radius: 0.25em; padding: 0.25em 0.5em; box-sizing: border-box; left: 0; top: 0; }
	div.belegkommentar:hover div.belegkommentar-short { opacity: 0; visibility: hidden; } 
	div.belegkommentar:hover div.belegkommentar-long  { opacity: 1; visibility: visible; }
	
	/* Style für select2 */
	.selection li, .select2, .select2-container { margin: 0; padding: 0; }
	select.jQselect2-before-init[multiple] { height: 1.75em; background-color: #DDDDDD; color: #DDDDDD; scrollbar-width: none; }
	select.jQselect2-before-init:not([multiple]) { height: 1.75em;  }
	
	.select2-container .select2-dropdown                           { border-radius: 0; border: 1px solid #AAAAAA; box-shadow: 6px 6px 6px #AAAAAA; }
	.select2-dropdown .select2-results > .select2-results__options { max-height: unset; height: 150px; resize: both; overflow-y: auto; overflow-x: hidden; } 
	.select2-dropdown .select2-results__option                     { display: table-row; white-space: nowrap; }
	.select2-dropdown .select2-results__option > span              { display: table-cell; padding: 1px 0.4em; white-space: nowrap; border: none; min-width: 2em; max-width: 30em; overflow-x: hidden; text-overflow: ellipsis; }
	.select2-dropdown .select2-results__option > span:first-child  { min-width: 10em; max-width: unset; } /* Das erste span darf länger sein. alle anderen, erhalten max-width: 30em */
	.select2-dropdown .select2-results__option > span:last-child   { padding-right: 2em; width: 100%; }
	.select2-dropdown .select2-results__option--selected           { background-color: inherit; color: #999; } /* Ausgegraut wenn option ausgewählt wurde */
	.select2-dropdown .select2-results__option.loading-results     { display: none; } /* Nachladen Option ist unnötig und oldschool */
	.select2-dropdown .select2-results__message                    { display: none; } /* Option für die Mindestlänge ist ebenfalls oldschool */
	
	.select2-container                          .select2-selection--single[aria-expanded=true] .select2-selection__rendered,
	.select2-container.select2-container--focus .select2-selection--single                     .select2-selection__rendered {
		color: #000000;
		background: #FFFFFF;
		border: 1px solid #A0CED9;
		box-shadow: 0 0 2px 2px #A0CED9;
		outline: none;
	}
	
	.select2-container .select2-selection--single                                         { border-radius: 0; border: none; height: 1.719em; margin-bottom: 0.25em; outline: none; }
	.select2-container .select2-selection--single .select2-selection__clear               { display: none; }
	/*.select2-container .select2-selection--single .select2-selection__arrow               { height: 1.75em; width: 16px; }*/
	.select2-container .select2-selection--single .select2-selection__rendered            { border: 1px solid #CCC; background-color: #DDD; line-height: normal; padding: 3px 20px 3px 4px; color: #000000; }
	.select2-container .select2-selection--multiple                                       { min-height: inherit; padding: 3px; width: 100%; }
	.select2-container .select2-selection--multiple .select2-selection__rendered          { display: block; padding: 0; margin: 0; }
	.select2-container .select2-selection--multiple .select2-selection__choice            { margin: 0; padding: 0 2px; border-radius: unset; border: medium none; background-color: #DDDDDD; float: none; display: block; }
	.select2-container .select2-selection--multiple .select2-selection__choice:last-child { margin-bottom: 0.25em; }
	.select2-container .select2-selection--multiple .select2-selection__choice__remove    { color: saddlebrown; border: none; border-radius: 0; position: unset; }
	.select2-container .select2-selection--multiple .select2-selection__clear             { margin-right: 3px; margin-top: -5px; color: #000000; }
	.select2-container .select2-selection--multiple.select2-selection--clearable          { padding-right: 1rem; }
	.select2-container .select2-search--inline .select2-search__field                     { margin: 0 0 0 2px; font-family: inherit; height: 1.219em; }
	
	
	.morePeEntries { display:none; }
	
	/* Progress Bar */
	div.progress       { text-align: left;    height: 1em;  background-color: lightgray; width: 8em; border-radius: 0.5em; margin: 0.25em auto; overflow: hidden; }
	div.progress > div { text-align: inherit; height: 100%; background-color: limegreen; max-width: 100%; }
	
	.ui-tooltip         { max-width: none; }
	.ui-tooltip-content { width: max-content; } /* evtl "white-space: nowrap;", aber dann muss die max-width in der help.jsp angepasst werden. */

	.docsPreview img.preview-small { background-color: white; max-width: 128px; max-height: 128px; display: inline-block;}
	
	.notify-call-portrait { max-height: 5em; margin-right:1em; vertical-align: top;	}
	.notify-call, .notify-call-with-portrait { display: inline-block; }
	
	input[type=checkbox].filter-inverse { margin: 0 0.25em 0.5em 0; position: relative; top: -3px; }
	label.filter-inverse { position: relative; top: -3px; }

	table.ktform_table td, table.ktform_table th { border: none; }
	
	.context-menu-item > span                { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.context-menu-item.context-menu-hover    { background-color: #52AE32; }
	.context-menu-icon::before               { content: ""; height: 16px; }
	.context-menu-icon-asc::before           { background: var(--image-arrow_up_green,         url("../images/svg/arrow_up_green.svg"))         no-repeat center / 16px 16px; }
	.context-menu-icon-desc:before           { background: var(--image-arrow_down_green,       url("../images/svg/arrow_down_green.svg"))       no-repeat center / 16px 16px; }
	.context-menu-icon-delete:before         { background: var(--image-delete2,                url("../images/svg/delete2.svg"))                no-repeat center / 16px 16px; }
	.context-menu-icon-docedit:before        { background: var(--image-document_edit,          url("../images/svg/document_edit.svg"))          no-repeat center / 16px 16px; }
	.context-menu-icon-edit:before           { background: var(--image-column_edit,            url("../images/svg/column_edit.svg"))            no-repeat center / 16px 16px; }
	.context-menu-icon-edit-all:before       { background: var(--image-table,            	   url("../images/svg/table.svg"))           		no-repeat center / 16px 16px; }
	.context-menu-icon-reset:before          { background: var(--image-column_delete,          url("../images/svg/column_delete.svg"))          no-repeat center / 16px 16px; }
	.context-menu-icon-fullscreen:before     { background: var(--image-flatscreen_tv,          url("../images/svg/flatscreen_tv.svg"))          no-repeat center / 16px 16px; }
	.context-menu-icon-add:before            { background: var(--image-add2,                   url("../images/svg/add2.svg"))                   no-repeat center / 16px 16px; }
	.context-menu-icon-grouping:before       { background: var(--image-object_cube,            url("../images/svg/object_cube.svg"))            no-repeat center / 16px 16px; }
	.context-menu-icon-grouping-reset:before { background: var(--image-object_cube_delete,     url("../images/svg/object_cube_delete.svg"))     no-repeat center / 16px 16px; }
	.context-menu-icon-box-checked:before    { background: var(--image-checkbox,               url("../images/svg/checkbox.svg"))               no-repeat center / 16px 16px; }
	.context-menu-icon-box-unchecked:before  { background: var(--image-checkbox_unchecked,     url("../images/svg/checkbox_unchecked.svg"))     no-repeat center / 16px 16px; }
	.context-menu-icon-bullet-blue:before    { background: var(--image-bullet_ball_glass_blue, url("../images/svg/bullet_ball_glass_blue.svg")) no-repeat center / 16px 16px; }
	.context-menu-icon-expand:before         { background: var(--image-navigate_down,          url("../images/svg/navigate_down.svg"))          no-repeat center / 16px 16px; }
	.context-menu-icon-expand-all:before     { background: var(--image-navigate_down2,         url("../images/svg/navigate_down2.svg"))         no-repeat center / 16px 16px; }
	.context-menu-icon-collapse:before       { background: var(--image-navigate_right,         url("../images/svg/navigate_right.svg"))         no-repeat center / 16px 16px; }
	.context-menu-icon-collapse-all:before   { background: var(--image-navigate_right2,        url("../images/svg/navigate_right2.svg"))        no-repeat center / 16px 16px; }
	
	.intern-only { opacity: 0.5; }
	
	.docActionButton { float:none;margin: 0em; margin-right:-5px; min-width: 18px; padding: 1px; text-align: center; height: 20px; }
	
	.expand-down { cursor: s-resize; }
	.collapse-up { cursor: n-resize; }
	.value-translations { display:none; }
	
	tf-cons { background-color: orange;	}
	.emptyWarning { outline:2px solid red; }
	
	.operatorscreen { width: 100em; }
	
	input[type=color].tfwidget-colorpicker { appearance: none; -webkit-appearance: none; cursor: pointer; width: 10em; height: calc(2em - 4.5px); vertical-align: top; box-sizing: border-box; padding: 0; outline: 0; border: none; }
	input[type=color].tfwidget-colorpicker + input[type=text] { width: 5.5em }
	label.left + input[type=color].tfwidget-colorpicker { float: left }
	input[type=color].tfwidget-colorpicker::-webkit-color-swatch-wrapper { padding: 0 }
	input[type=color].tfwidget-colorpicker::-webkit-color-swatch { border: none }
	
	/* TMS */
	.new-ticket-dialog-toolbar-button       { border: 1px solid gray; border-radius: 2px; margin: 0.5em 0.25em; }
	.new-ticket-dialog-toolbar-button:hover { cursor: pointer; background-color: transparent; }
	.new-ticket-dialog-text + .ck-editor .ck-content { width: 100%; min-height: 6em; float: none; }
	.ticket-comments-entry-content-pre { white-space: pre-wrap; }
	
	/* Loading Spinner pure CSS */
	.loader-start {
		border: 0.2em solid #CCC;
		border-top-color: var(--system-color);
		border-radius: 50%;
		width: 0.875em;
		height: 0.875em;
		margin: auto;
		animation: loading-spinner 1s linear infinite;
	}
	
	/* Keyframe Animation für Loading Spinner */
	@keyframes loading-spinner {
		0%   { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.dashboard-report { display:flex; }
	.dashboard-report input[type=text] { width: 6em; }
	.dashboard-report .params { display:flex; }
	.dashboard-report .params > div { margin-left: 0.5em; }
	.dashboard-report .params > div input.isDate { width: 8em; }
	
	
	/* Fullscreen Functionality */
	/*fieldset:fullscreen                                { overflow: hidden; background-color: white; }*/ /* must be hidden to make javascript-scrolling available */
	fieldset:fullscreen                                { overflow: auto; background-color: white; scroll-behavior: smooth; } /* new style can be scroll */
	fieldset:fullscreen > .fullscreen-element          { width: 100% !important; }                    /* make all fullscreen elements (lighttable,charts,etc...) inside the fieldset full width */
	fieldset:fullscreen > *:not(.fullscreen-element)   { display: none !important; }                  /* hide all other elements */
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
	.operatorscreen { width: 100%; }
	header .mainbar .header-lose { display: none; }
}