/*
	ecadia Haupt-css für Veranstalter
	(C) Copyright 2017 ecadia GmbH
*/
@CHARSET "UTF-8";

/* Schriftart */
body,h1,h2,h3,h4,a,p,ul,ol,li,dl,dt,dd,div,table,tr,td,th,address,blockquote,input,select,textarea,code {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* generell die jQuery-UI Border hier abschalten. Wir wollen ab eacdia 6 ja eher keine Linien mehr */
.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: none;
}


/* 30.03.2025: der äußere Rahmen soll nie Scrollen, das ist Sache der Tabs oder Views */

/* 02.04.2025: führt leider in einigen Fällen dazu dass man Masken nicht mehr scrollen kann - muss erstmal abgeschaltet werden
body {
	overflow: hidden;
}
*/


.WelcomeOrganizer_ {
	/* overflow-y: auto; dto. */
	/* max-height: ...;   wird in WelcomeOrganizer.jsp jer JS gesetzt */
}

/* Aus ecadiaMobile.css kopiert*/
#ui-datepicker-div {
	/* Popups haben 1100 und dass der Datepicker sichtbar ist muss der darüber liegen */
	/* der openConfirmMessageBox-Popup hat 2000, deswegen gehen wir auf 2100 */
	z-index: 2100 !important;
}


h1, .heading1, .heading1 * {
	text-align: left;
	margin-left: 0px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	color: var(--heading-color);
	margin-top: 8px; /* sonst sind das Standardmäßig 16px und zu üppig */
	margin-bottom: 2px; /* sonst sind das Standardmäßig 16px und zu üppig */
}

h2, .heading2, .heading2 * {
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	color: var(--heading-color);
	margin-left: 0px;
	margin-top: 8px; /* sonst sind das Standardmäßig 16px und zu üppig */
	margin-bottom: 4px; /* sonst sind das Standardmäßig 16px und zu üppig */


}

.heading2, .heading2 * {
	font-size: 18pt;
	padding-bottom: 0.3ex;
}

h3, .heading3, .heading3 * {
	margin-left: 5px;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	color: var(--heading-color);
}

.heading3, .heading3 * {
	font-size: 14pt;
	padding-bottom: 0.3ex;
}

BODY {
	background-color: var(--background-color);
	color: var(--text-color);
	border-color: var(--border-color); 
}
:root{
	/* wird für radiobuttons und Checkboxen benutz*/
	accent-color: var(--header-background);
}
textarea{
	color: var(--text-color);
	background-color: var(--background-DropAreas);
	border-color: var(--border-color);
}
/* wenn der Button-Text nur aus dem value kommt, soll er trotzdem die Schriftfarbe haben*/
input[type="button" i] {
	color: var(--text-color);
}

button, input{
background-color: var(--input-background-color);
}

/* Kopfzeile mit Schnellsuche und Menü -------------------------------------------------------------------------------------------- */
.navigationEntryItem {
	text-align: center;
}


.mainEntry ul {
	z-index: 200;
}

.colorTheme {
	background-color: var(--background-color);
	color: var(--text-color);
}

.appHeaderAdmin {
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
	text-align: left;
	margin-top: -5px;
	margin-bottom: -5px;
}

.appHeaderAdminTitle {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
	text-align: right;
	margin-top: -5px;
	margin-bottom: -5px;
	
	height: 22px; /* damit der Logoff-Button auch ganz reinpasst */
}

#headerWithMenu {
	position: fixed;
	left: 2px;
	background-color: var(--background-color);
	top: 0px;
	z-index: 100;
	width: 100%
}

#menue_area_search {
	float: right;
	margin-right: 4px;
	margin-top: 14px;
	max-width: 300px; /* in Übersetzungen ist das Wort für "Suchen" z. T. recht lang */
	text-align: right;
	padding-right: 10px;
}
#menue_area_search .buttonIconOnly:hover {
	background-color: var(--hover-color) !important;
}
/*Icons der Schnellsuchebuttons sollen kleiner sein*/
#menue_area_search .faIconMenu{
	font-size: 10pt;	
	
}

.menue_area_search_Input {
	background-image: url('gif/TopButtons/Search.png');
	background-repeat: no-repeat;
	background-position: 2px 5px;
	padding-left: 22px !important;
	width: 150px;
	background-size: 16px 16px; /*yka - fuer FAIcons hinzugefuegt*/
}

:focus-visible {
    outline: var(--border-color) auto 1px;
}

#searchTextNavigationSelectMode {
	padding-top: 1px;
	padding-left: 2px;
}


.buttomLogoff {
	vertical-align: middle !important;
	padding: 3px;
}

div.ViewPanel {
	margin-top: 0px;
}
.ViewPanel{
	color: var(--text-color);
	background-color: var(--background-color);
}
.ViewPanel h1{
	color: var(--heading-color);
}


/* spezielles Aussehen dieses Widgets nur wenn der ViewManager genutzt wird */
.PageNameWidget {
	padding-top: 5px;
	padding-bottom: 2px;
	padding-left: 0px;
	margin-left: 4px;
	margin-right: 6px;
	margin-top: 2px;	
}

/* z.B. "Veranstaltung" */
.PageNameWidget h1 {
	display: inline-block;
}

/* Allgemein Inaktiv (verwendung z.B. im Explorer) durchgestrichen */
.inactive, table.inactive td {
	text-decoration: line-through;
}


.PageNameWidget #tabTitleInfo > span {
	margin-left: 3px;
	margin-right: 3px;
	display: inline-block;
	color: var(--text-color);
}

.viewManagerTab {
    background: var(--background-color);
    line-height: normal;
    padding: 0;
    width: 100%;
    position: fixed;
    margin: 0px 0 4px 0px;
	z-index: 50;
	border-bottom: 2px solid var(--border-color);
}

.viewManagerTab ul {
    border: 0 none;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.viewManagerTab li {
    float: left;
    margin: 0 3px 0 0;
    padding: 0px 2px 0 5px;
    font-weight: normal;
    vertical-align: top;
	height: 22px;
}

.viewManagerTab .dragAndDropFAIconArea {
	height: 24px; /* damit das Icon nicht abgeschnitten wird */
}




.viewManagerTab a, .viewManagerTab a:link, .viewManagerTab a:visited {
    text-decoration: none;
}

.viewManagerTab li.selected {
	background: var(--background-color);
	border-top: 2px solid var(--border-color);
	border-left: 2px solid var(--border-color);
	border-right: 2px solid var(--border-color);
	border-bottom: none;
	padding-top: 2px;
	margin-top: 4px;
	bottom: -1px;
	position: relative;
	height: 28px;
	margin-bottom: -1px;
	color: var(--heading-color);
}


/* der Text im ViewManager-Tab wird generell abgeschnitten; allerdings unterschiedlich lang für selected/nicht selected */
.viewManagerTab li span {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
	display: inline-block;
	margin-bottom: -1px;
	vertical-align: middle;
}

.viewManagerTab li.notSelected span {
	font-size: 10pt;
	max-width: 140px;
}

.viewManagerTab li.selected span {
	font-weight: bold;
	font-size: 12pt ;
	max-width: 320px;
	vertical-align: inherit;
}
/*Icons im TabHeader*/
.viewManagerTab .dragFAElement i{
	color:  var(--faIcon-color);
}

.viewManagerTab li i.ViewManagerTabCloseIcon {
	vertical-align: top;
	margin-top: 6px;
	color: var(--faIcon-color);
    font-size: 6pt;
}


.viewManagerTab  li.selected i.faIconTabsHead:not(.dragAndDropFAIconArea) {
	padding-top: 4px;
}

.viewManagerTab li.notSelected {
	background:var(--hover-color);
	border: 1px solid var(--border-color);
	padding-top: 4px;
	bottom: -1px;
	position: relative;
	margin-top: 4px;
}
.viewManagerTab li.notSelected span{
	color: var(--text-color) !important;
}

/*wird die Klasse inactive noch gesetzt ? */
.viewManagerTab li.inactive {
	color: #ababab;
    background: #dedede;
    border: 1px solid #9a9a9a;
}

.viewManagerSpacer {
	width:100%;
	height:31px;
	background: var(--background-color); 
	display: block;
}

.headerWithMenueSpacer {
	height:76px;
	display: block;	
}

#contentArea {
	margin-top: 6px;
}

/* schönere Umrahmung um das Tab-Control */
.tabDlgArea {
	border: 1px solid var(--border-color);
	border-collapse: separate;
	background-color: var(--background-color);
	height: 500px;
	vertical-align: top;
}

.tabDlgArea>tbody>tr>td {
	vertical-align: top;
}

/* Umbruch der Action-Buttons unterbinden */
.ActionPanel .EndOfStandardActionButtons {
	display: inline-block;
	/* N.B.: Inline bewirkt, dass kein implizter br nach dem DIV kommt. Block bewirkt, dass die width gesetzt werden kann. */
	width: 15px;
	/* Etwas Abstand zwischen Standard-Buttons und Subjekt-Buttons. */
}

/* RS, 03.01.2014: nicht-Modale Zwischenablage */
.removeFromClipboardIcon {
	background-image: url(/gif/delete-btn.gif);
	width: 12px;
	height: 12px;
}

/* keine Spaltenüberschrift für die Zwischenablage, gilt für alle 3 Bereiche */
#ClipboardTable thead, #PersonalStorageTable thead, #BookmarkTable thead, #TrashTable thead {
	display: none;
}

/* die Info mit der Anzahl Einträge ausblenden, wird nicht gebraucht */
#ClipboardTable_info {
	display: none;
}

#ClipboardTable {
	border: 1px solid var(--border-color);
	/* width: 99% !important; sonst bekommt die Tabelle eine Scrollbar - unklar wieso, nicht mehr notwendig? */
}

.clipboardBodyArea table.dataTable.no-footer {
	border-bottom: none !important; 		/* Linie unter der Tabelle entfernen */
}

#clipboardAreaHeader {
	margin: 0; /* der von jQuery-UI kommende margin abschalten */
}


#ClipboardTableArea, #menueEditHistory {
	max-height: 400px;
	/* um die max. Höhe der Liste zu begrenzen. Leider scheint das nicht besser zu gehen */
	overflow-y: auto;
}

#menueEditHistory {
	margin-bottom: 4px; /* keiner Abstand zum Button */
}

.trashArea {
	padding: 6px !important;
	/* der Standard beim Accordion-body ist viel zu groß */
}

.clipboardActionButtonArea {
  /* rechtsbündig */
  display:flex;
  justify-content: flex-end;
  margin-top: 4px;
  margin-right: 6px;
}

/* gilt für alle Bereiche, als Zwischenablage, "Meine Ablage", "UZuletzt geöffnet"... */
.clipboardBodyArea {
	padding: 6px; /* der Inhalt im Accotdion hat einen kleinen Abstand zum Rand */
}

#repeatAttributeChange {
	display: grid;
  	grid-template-columns: 50% 50%;
}

/* Ende Zwischenablage */

/* TableAutocomplete jQuery-Styles ---------------------------------------------------------------------- */
.ui-autocomplete {
	/* Modale Dialoge haben 101 und damit dort auch das Autocomplete imm Vordergrund ist entsprechend höher */
	z-index: 200;
}

.itemAutocomplete .ui-menu-item-wrapper {
	display: inline-block;
}

.itemTableAutocomplete {
	overflow: hidden;
}

.autocompleteResetButton {
	width: 22px;
	height:22px;
	background-position: 2px 2px;
	padding:1px;
	border: 1px outset var(--border-color);
	background-image: url("gif/delete-btn.gif");
	background-repeat: no-repeat;
	vertical-align: middle;
}

/* EcadiaExecution Profile ------------------------------------------------------------------------- */
#ecadiaExecutionProfilerDialogTableArea {
	overflow: auto;
	max-height: 600px;
}

/* Ende Kopfzeile mit Schnellsuche und Menü -------------------------------------------------------------------------------------------- */


/* Standardtabelle, die für Layouting verwendet wird. */
.defaultTable {
	width: 100%;
	border: 0px;
	border-collapse: collapse;
}

.defaultTable > tbody > tr > td, .defaultTable > tr > td {
	/* padding: 5px; */
	padding-left: 5px;
	padding-bottom: 5px;
}

.centerViewTable {
	width: 100%;
	border-collapse: collapse;
}

/* Tabelle für Formulardarstellung in Tabs */
.tabFormTable {
	width: 100%;
	border: 0px;
	border-collapse: collapse;
}

.tabFormTable>tbody>tr>td,.tabFormTable>tr>td {
	padding-left: 5px;
	padding-bottom: 5px;
	vertical-align: middle;
}

/* Administration */
table.SystemInfoTable {
	border-collapse: collapse;
}

table.SystemInfoTable td.textStandard {
	vertical-align:top;
	border: solid var(--border-color) 1px;
}

table.SystemInfoTable td.tableHeader {
	vertical-align:top;
	border: solid var(--border-color) 1px;
}

table.SystemInfoTable td.SpacerCell {
	border: none;
	height: 20px;
}
/* Ende Administration */

/*
Generelle Formatierungen der mit *,-,+,# formatierten Felder
*/
.bulletSupressed {
	list-style-image: none;
	list-style-type: none;
}

/*
	Formatierung der Listen in Produkt-Beschreibungen
*/
.bulletLevel1 {
   	list-style-image: url(gif/bullet2.gif);
 	padding-bottom: 2px;
}

.bulletLevel2 {
   list-style-image: url(gif/bullet3.gif);
	padding-bottom: 2px;
 }

.bulletLevelUL2 {
	padding-top: 4px;
	padding-bottom: 6px;
}

.bulletLevel3 {
   list-style-image: url(gif/bullet3.gif);
}


/* alle Labels mittig anzeigen */
.ViewFrameTable > tr> td, .ViewFrameTable > tbody > tr > td, .ViewFrameTable > tbody > tr > td > span.select2, .ViewFrameTable td label {
	vertical-align: middle;
}

.ViewFrameTable td > label {
	display: inline-block;
	padding-right: 10px;  		/* etwas Mindestabstand zum Input */ 
}

.ViewPanelEvent table {
	width: 100%; /* gewollt sind eigentlich 100%, dann kommt aber eine horizontale Scrollbar */
}


td.ViewFrameTableContent {
	width: 100%;
}

.ViewFrameTableContent td {
	min-width: 150px;
	padding-top:2px;
	padding-bottom:2px;
}

/*gibt es die CSS-Klasse noch?*/
.CViewFrameTable {
	BACKGROUND-color: var(--background-color);
	padding-left: 5px;
	padding-top: 5px;
	padding-left: 5px;
	text-align: left;
	width: 100%;
	border: 0px;
	list-style: none;
}


.CViewFrameTableContent span {
	font-size: 2.0em;
	font-weight: bold;
	color: var(--heading-color);
}

.CViewFrameTableContent li {
	list-style: none;
}

/* Buttonbereich in View,
	 wenn für untergeordnete Tabs schreibrecht */
ul.buttonContainerView {
	margin: 0;
	padding: 0;
	text-align: right;
    list-style: none;
}

ul.buttonContainerView li {
	list-style: none;
	margin: 0;
	padding: 2px;
}

ul.buttonContainerView input#AddToBookmarksUser {
	margin-bottom: 5px;
}

/* RS, 06.11.09: Buttonbereich in View --> H-Horizontal - Nebeneinander */
ul.buttonContainerViewH {
    margin: 0;
    margin-right: 5px;
    padding: 0;
    text-align: right;
	display: inline;
	margin: 0;
	padding: 0;
}
ul.buttonContainerViewH li {
	list-style: none;
	margin: 0;
	padding: 2px;
	width: 100px;
	display: inline;
	margin: 0 2px;
	padding: 0 2px;
}

/* Ende Buttonbereich in View */

.SelectionListView {
	margin-bottom: 15px;
}

.SelectionListFilterTable {
	margin-top: 10px;
}

.SelectionListFilterTable td {
	padding-right: 10px !important; /* im Filterbereich immer etwas Abstand zwischen den Eingaben */
}

.processView {
	margin-bottom: 15px;
	margin-top: 15px;
}


/* Buttonbereich in CView,
	 wenn für untergeordnete Tabs schreibrecht */
ul.buttonContainerCView {
	margin: 0;
	padding: 0;
}

ul.buttonContainerCView li {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 2px;
}

/* Ende Buttonbereich in CView */

/*
	TabControl als ProcessStepControl
*/
.prozessStepControl {
	BACKGROUND-color: var(--background-color);
}


.prozessStepText {
	text-align: left;
	color: var(--text-color);
	text-decoration: none;
	padding-top: 8px;
}

.prozessStepTextSelected {
	text-align: left;
	color: var(--faIcon-color);
	text-decoration: none;
	padding-top: 8px;
}

.prozessStepLine {
	/*yka, 05.11.25 angepasst*/
	position: relative;
	height: 28px;
}

/*yka, 05.11.25 hinzugefuegt*/
.prozessStepLine::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 28px;
	right: 0;
	height: 2px;
	background-color: var(--hover-color);
	transform: translateY(-50%);
}

.prozessStepBullet {
	/*yka, 05.11.25 angepasst*/
	/* RS, 22.01.14, mit 4px Rand und der 18px Schrift ist die Darstellung in IE schöner */
	width: 28px;
	height: 28px;
	font-size: 18px;
	font-weight: bold;
	color: var(--heading-color);
	text-decoration: none;
	text-align: center;
	
	line-height: 28px;
	background-color: var(--hover-color);
	border-radius: 50%;
	display: inline-block;
}

/* hier werden die header-Farben genommen*/
.prozessStepBulletSelected {
	/*yka, 05.11.25 angepasst*/
	/* RS, 22.01.14, mit 4px Rand und der 18px Schrift ist die Darstellung in IE schöner */
	width: 28px;
	height: 28px;
	font-size: 18px;
	font-weight: bold;
	color: var(--text-color); /* Farbe vom Header*/
	text-decoration: none;
	text-align: center;
	line-height: 28px;
	background-color: var(--background-color); /* Farbe vom Header*/
	border-radius: 50%;
	display: inline-block;
}

.processContent {
	padding-left: 25px;
	padding-right: 25px;
}

.ProcessHeadButton {
	width: 160px;
	background-repeat: no-repeat;
	background-color: #efefef;
	background-position: 2px;
}

.ProcessButtons {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.ProcessButton {
	min-width:150px;
	background-repeat:no-repeat;
	background-color:#efefef;
	background-position:2px;
	padding-left: 18px;
}

.ProcessButtonSpare {
	margin-left: 150px;
}

.processDescription {
	margin-bottom: 15px;
	margin-left: 5px;
}

/*
	GesamterBereich von Tab mit TabControl und unterem Bereich
*/
/* wird das noch verwendet?*/
.tabArea {
	border-color: var(--border-color);
	border-width: 1px;
	border-style: solid;
	border-collapse: collapse;
	border-top-width: 0px;
	BACKGROUND-color: var(--background-color);
	/* ML 2008-07-23 Tag-Control zurrt sich mit width 100% nicht mehr zusammen */
	width: 100%;
}


/* *******************************************************
	ETabDlg-Bereich
	mit Bereich für Inline-Edit
*/ /*
	Hintergrund von ETabDlg-Bereich
*/
/* wird die Klasse noch irgendwo gesetzt?*/
.tabDlgArea {
	BACKGROUND-color: var(--background-color);
	width: 100%;
}

.TabContentCell {
	padding-top: 5px;
}

/*
	Für Inline-Edit
*/
.inlineEditArea {
	margin-top: 10px !important;
	BACKGROUND-color: var(--background-color);
}

.inlineEditArea td {
	padding-top: 4px;
}

/*
Für Inline-Edit-Button in inline-Bereich selbst
speziell für Ausrichtung links oder rechtsbündig
*/
.inlineEditButton {
	text-align: right;
}

/*
	Ende ETabDlg-Bereich
	*******************************************************
*/

/* *****************************************************
	SelectionListPartner.jsp
*/

.attributesFrame {
	width: 500px;
	max-height:300px; /* etwa so hoch wie die Suchfelder */
	overflow:auto;
	text-align:left;
	BACKGROUND-color: var(--background-color);

	display: inline-block;
	position: absolute;
	right: 24px;
	top: 30px;
	border: 1px solid var(--border-color);
	z-index: 1000; /* damit das alles andere überlappt */
}

/* um die Attribute ein- und auszuschalten */
.attributesFrameHide {
	display: none;
}

.printFrameAttributes table {
	width: 100%;
}

/* wird dasnoch verwendet?*/
.tableSelectionAttributes {
	border: solid var(--border-color);
	float: right;
}

.partnerPropertyFilterAreaItem {
	min-width: 150px;
	margin: 0 4px 0 0;
	padding: 4px;
	border: 2px solid var();
	float: left;
 	border-radius:3px;
}

.partnerPropertyFilterAreaItemL1 span {
	font-size: 10pt;
	margin-left: 3px;
	display: inline-block;
}

.partnerPropertyFilterAreaItemL1 img {
	margin-bottom: -2px;
	margin-left: 1px;
}

.partnerPropertyFilterArea {
	float: left;
}

.partnerPropertyFilterAreaItemL2 {
	margin-top: 3px;
}

.partnerPropertyFilterAreaItemL2 span {
	margin-right: 3px;
}

.partnerPropertyFilterAreaItemClose {
	float: right;
	margin-right: -2px;
	margin-top: -2px;
	cursor: pointer;
}

.select2FormatPartnerPropertyResultElement img {
	float: left;
}

.select2FormatPartnerPropertyResultElement span {
	display: block;
	margin-left: 22px;		
}

/* *****************************************************
	CCalendarEventView.jsp
*/
.workday {
	BACKGROUND-COLOR: #FFFFFF;
	color: var(--text-color-for-Ligth-background);
}

.holiday {
	BACKGROUND-COLOR: #FBD99D;
}

/*
	Ende CCalendarEventView.jsp
	*****************************************************
*/ /*
	Bereich für Partnereigenschaften in Auswahl Partner
	aktuell verwendet im Standard: printFrameSmall
*/
.printFrame {
	width: 800px;
	height: 404px;
	overflow: auto;
	text-align: left;
}

.printFrameSmall {
	width: 300px;
	height: 150px;
	overflow: auto;
	text-align: left;
}

/*****************************************************************************
 * CalendarResourceView [START]                                              *
 *****************************************************************************/
/* Tabelle für Monats- und Wochenansicht. */
.ResourceCalendarMonth {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	border-collapse: expression('separate', cellSpacing = '1px'); /* (IE7 hack) */
	border-width: 0px;
}

.ResourceCalendarWeek {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
	border-width: 0px;
}

.ResourceCalendarDropRowWeek {
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-color);
}

.ResourceCalendarDropRowMonth {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: var(--border-color);
	vertical-align: top;
}

/* Anfasser für DragObject */
.DragObject {
	cursor:pointer;
	padding:2px;
	margin:0px;
	text-decoration:none;

}

/* Anfasser für DragObject */
.DragObjectInDragHelper {
	border:0px;
}

/* Landezone für drop */
.DropTarget {
	padding:0px;
	margin:1px;
	vertical-align:top;
}

/* Div für Rahmen beim Ziehen */
.dragHelper {
	background-color:#ddd;
	padding:4px;
	position:absolute;
	display:none;
	border:2px grey solid;
}

/* Div für Rahmen beim Ziehen, wenn über möglichem Droptarget */
.dragHelperOverDropTarget {
	background-color:#ddd;
	padding:4px;
	position:absolute;
	display:none;
	border:4px var(--success-color) solid;
}


/* Die Zellen für Wochenenden. */
.ResourceCalendarWeekend {
	background-color:#D6DCFE;
}

/* Die Zellen für Feiertage. */
.ResourceCalendarHoliday {
	background-color:#E3E8FF;
}


ul.ResourceViewEquipment {
	list-style-type: none;
	margin-left: 3px;
	padding-left: 0px;
	margin-top: 2px;
	margin-bottom: 2px;
		
}

.resourceCalendarEntryLinkButtonArea {
	float: right;
}

.resourceCalendarEntryLinkButtonArea .dragAndDropFAIconArea {
	float: left;
}


.resourceCalendarEntryLinkButtonArea .dragObject.dragObjectContainerFAIcon {
    padding-right: 4px !important;
}

.resourceCalendarEntryLinkButtonArea i.faIcon, .resourceCalendarEntryLinkButtonArea i.faIconColor {
	font-size: 8pt;
	
	
}

/*****************************************************************************
 * CalendarResourceView [ENDE]                                               *
 *****************************************************************************/
 
 /*****************************************************************************
 * MonthCalendar  verwendet z.B. auf Veranstalterstartseite[start]                                               *
 *****************************************************************************/

 .monthCalendar-wrapper .empty:not(.buttonToday) {
	background-color: var(--background-color);
}
.monthCalendar-wrapper .monthCalendar-dayButton:not(.empty, .buttonActive, .training) {
	color: var(--text-color-for-Ligth-background);
	--faIcon-color: var(--text-color-for-Ligth-background);
}
.monthCalendar-wrapper .nextButton, .monthCalendar-wrapper .previousButton {
    border: 1px solid var(--border-color);
    background-color: var(--input-background-color);
}
/*Kalenderwochen*/
.monthCalendar-wrapper .monthCalendar-week {
    background-color: var(--hover-color);
    color: var(--text-color);
}
.monthCalendar-wrapper td, .monthCalendar-wrapper th {
	border-color: var(--border-color);
}

/*****************************************************************************
 * MonthCalendar  verwendet z.B. auf Veranstalterstartseite [ENDE]                                               *
 *****************************************************************************/

/* Radiobutton für PartnerProperty
	sowie für weitere HTML-Controls
*/
.textblack {
	color: var(--text-color);
}

/*
	Text für SeitenÜberschriften
*/
td.textPageHeader {
	font-size: 1.4em;
	font-weight: bold;
}

.textPageHeader {
	font-size: 2.0em;
	font-weight: bold;
	color: var(--header-color);
}

/*
	Text für Überschriften
*/
/*notwendig?, sollte durch unteres abgedeckt sein*/
td.textHeader {
	font-size: 1.0em;
	font-weight: bold;
}

.textHeader {
	font-size: 1.0em;
	font-weight: bold;
	color: var(--header-color);
}

/* Format für Schaltflächen */
.button {
	font-size: 0.8em;
}

/* Standardbuttons für OK und Schließen ------------------------------------------------------------------------------------------------------------- */
.buttonOK {
	background-image: url('gif/TopButtons/SaveAndClose.png');
	padding: 16px;
	background-repeat: no-repeat;
	background-position: 3px 3px;
}

.buttonCancel {
	background-image: url('gif/TopButtons/Cancel.png');
	padding: 16px;
	background-repeat: no-repeat;
	background-position: 3px 3px;
}

i.buttonOKCancelFAIcon{
	position: relative;
	right: 124px;
	color: var(--faIcon-color);
	font-size: 15px;
	top: 2px;
}

/* div wird natürlich generell überschrieben, deshalb muss es innerhalb eines buttons erben */
.button div {
	font-size: inherit;
}

.buttonIconOnly {
	padding: 0px;
	background-color:var(--input-background-color);
	min-width: 16px;
	min-height: 16px;
	color: var(--text-color);
}

.buttonIconText,
.buttonText {
	padding: 2px;
}

.InputNotify {
	background-color:  var(--error-color) !important;
}

/* Icon mit Link als Button formatieren */
.HTMLTableContainer a > img {
	border: 1px outset buttonface;
	padding: 2px;
	background-color: var(--background-color);
}

.HTMLTableContainer a:hover > img {
 background-color: var(--hover-color);
}

.HTMLTableContainer a:active > img {
 background-color: var(--hover-color);
 border: 1px inset buttonhighlight;
}

.buttonContainerView .buttonIconOnly {
	height: 28px;
	width: 26px;
	padding: 2px;
}
.buttonContainerView .buttonIconText {
	height: 26px;	/* Höhe wie Select2 und Input */
}

.buttonIconText img {
	vertical-align: middle;
	margin-top: -1px;
}
.buttonIconText img {
	margin-right:5px;
}
.buttonContainerView .buttonIconText img,
.buttonContainerView .buttonIconOnly img {
	vertical-align: top;
}
.ButtonText {
	font-size: 0.8em;
}

.ButtonTextIcon {
	font-size: 0.8em;
}

.buttonText,
.buttonIconOnly,
.buttonIconText {
	height: 26px;	/* Höhe wie Select2 ind Input */
	vertical-align:top;
	padding: 4px 6px 4px 4px;
}
.buttonIconOnly {
	width: 26px;
}
.buttonIconOnly img,
.buttonIconText img {
	vertical-align:top;
}

.ActionPanel .EndOfStandardActionButtons {
	display: block; /* Zeilenumbruch */
	/* ausblenden: display: none; */
	/* zwischenraum: display: inline;  margin-left: 30px; */
}



/* ************************************************************
	Calendarfür Resourcen wie Partner, Raum
	und in TimeTable.java
*/
.resourceCalendarNew {
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
}

.resourceCalendarEntry {
	font-size: 0.8em;
	text-decoration: none;
	white-space: nowrap;
}


.calendarEntryWrapperTitle {
	white-space: nowrap;
}


/* 	Ende
	Calendarfür Resourcen wie Partner, Raum
	und in TimeTable.java
	************************************************************
*/



/* an unterschiedlichen Stellen, wird wahrscheinlich nicht mehr verwendet */
.textredbold {
	font-size: 0.8em;
	font-weight: bold;
	color: var(--error-color);
}

/* das HelpIcon-Widget -------------------------------------------------------------------------------------------- */
.helpicon, .helpiconMouseover {
	background-image: url(gif/information.png);
	background-repeat: no-repeat;
	margin-left: 0px;
	padding-left: 16px;
	padding-bottom: 8px;
	display: inline-block;
	cursor: pointer;
	vertical-align: top;
	margin-top: 4px;
	height: 16px; /* nicht dass es unten abgeschnitten wird */
}

.helpicon.alertInfo {
	background-image: url(gif/info_attention.png);
}

.ecadiaInfoMsg ul {
	list-style: none;
}

.ecadiaInfoMsg ul li {
	padding-bottom: 0.2em;
}

/*****************************************************************************
 * HTMLTable [START]                                                         *
 *****************************************************************************/
/* Überschrift von Tabellen */
th {
	font-weight: bold;
	BACKGROUND-color: var(--hover-color);/*  #dddddd; */
	color: var(--text-color);
}

.HTMLTableContainer {
	background-color: #EAEAEA;
}

.HTMLTableHeader, .HTMLTableButtons {
	width: 100%;
	background-color: #CCCCCC;
	border-width: 0;
}

.HTMLTableTitle {
	padding: 1px;
}

.HTMLTableTitle h3 {
	margin-bottom: 0px;
	margin-top: 5px;
}

/* .HTMLTable {
	border-bottom-width: 1px;
	border-right-width: 1px;
} */
.HTMLTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0px;

	border-style: solid;
	border-color: var(--border-color);
	border-width: 0px 1px 1px 0px; /*links & unten*/
}

/* !borders nur an manchen Seiten definiert, damit es überall gleichmäßig aussieht*/
.HTMLTable > tbody > tr > td, .HTMLTable > tr > td,
.HTMLTable > thead > tr > th, .HTMLTable > tr > th {
	padding: 2px; /* ehemaliges cellpadding="2" */

	border-style: solid;
	border-color:var(--border-color);
	border-width: 1px 0px 0px 1px; /* rechts & oben*/
	vertical-align: middle; /* RS 01.05.2015: sieht etwas schöner aus, als "top", insb. wenn Symbole oder input-Felder in den anderen Spalten stehen */
}

.HTMLTable > tbody > tr > td:first-child, .HTMLTable > tr > td:first-child,
.HTMLTable > thead > tr > th:first-child, .HTMLTable > tr > th:first-child {
	border-left-color: var(--border-color);
} 

.tableHeader > td {
	padding: 2px;
}
.tableHeader > td > input {
	margin-left: 1px;
	margin-right: 1px;
	margin-bottom: 3px;
	margin-top: 1px;
}

/* RS, 04.03.2016: gerade ausgewählte Zeile (aber nicht die Überschrift ** wieso hat die kein th?) highlighten */
/*.HTMLTable tr:not(:first-child):hover td {
	background-color: #d0e0f0 !important;
} */

.tableHeader,
th.tableColumnHeader,
th.tableColumnHeaderSortable,
th.HTMLTable_SortCell {
	font-weight: bold;
	background-color: var(--hover-color);
}

.tableColumnHeaderSortable {
	padding-left: 2px;
}

.tableColumnHeaderSortable {
	cursor: pointer;
}


.tableColumnHeaderSimple {
	color: var(--text-color);
	background-color: var(--background-DropAreas);
}

table.HTMLTable_SortTableCell {
	width: 100%;
	height: 100%;
	border-spacing: 0px;
	border-collapse: collapse;
	border-style: none;
}
table.HTMLTable_SortTableCell td {
	padding: 0px;
}
table.HTMLTable_SortTableCell td.sortIcon {
	text-align:center;
	width:20px;
}
table.HTMLTable_SortTableCell td.sortIcon, table.HTMLTable_SortTableCell td.sortNumber {
	text-align: center;
	width: 20px;
	font-weight: normal;
	line-height: 13px;
}

/* Gerade bzw. ungerade Zeilen in Tabellen. */
.tableRow1 {
	background-color: var(--background-DropAreas);
}

.tableRow2 {
	background-color: var(--background-color);
}

/* RS, 01022014:  falls mit den up/down Buttons eine Zeile rauf oder runtergeschoben wurde */
.tableRow1HighLight td, .tableRow2HighLight td {
	border: #fafafa 1px dotted !important;
	background-color: #8398ae !important;
}


/* Fußzeile von Tabelle */
/* TODO: durch passendes HTML-Tag ersetzen */
.tableFooter {
	width: 100%;
	background-color: #CCCCCC;
	border-width: 0;
}

.tableFooter > tbody > tr > td, .tableFooter > tr > td {
	padding: 2px; /* ehemaliges cellpadding="2" */
}

.HTMLTable > tbody > tr > td.tableGroupCell, .HTMLTable > tr > td.tableGroupCell {
	font-weight: bold;
	padding-top: 2ex;
}

/*****************************************************************************
 * HTMLTable [ENDE]                                                          *
 *****************************************************************************/


/*
	Ende Menu-Dialoge
	*******************************************************
*/ /* *******************************************************
	TimeTable.java

	Stundenpläne
*/

.timeTableWeek {
	margin-top: 5px;
}

/*
	Ende TimeTable.java
	*******************************************************
*/ /* *******************************************************
	TimeTableMonth.java, wird vermutlich nicht mehr verwendet

	Stundenpläne Monat
*/
.timeTableMonth {
	width: 100%;
	border-collapse: collapse;
	background-color: #FFFFFF;
}

.timeTableMonth th {
	text-align: center;
	background-color: #E2EBF5;
	border-color: #FFFFFF;
	border-style: solid;;
	border-width: 2px;
	border-spacing: 0px;
}

.timeTableMonth td {
	border-color: #E2EBF5;
	border-style: solid;;
	border-width: 2px;
	border-spacing: 0px;
}

.timeTableMonthEntry {
	background-color: #F5EBE2;
	padding: 2px;
}

.timeTableMonthEntrySeparator {
	border: 1px dashed #E2EBF5;
}

.timeTableMonth .dayColumn {
	min-width: 70px !important;
	width: 70px !important;
}

.timeTableMonth .weekday {
	width: 20%;
}

.timeTableMonth .sa {
	width: 20%;
}

.timeTableMonth .so {
	width: 10%;
}

.timeTableMonthSpacerRow {
	height: 0px !important;
	padding: 0px !important;
	border: 0px !important;
	background-color: #e2ebf5 !important;
}

.TimeTableMonathKW {
	background-color: #F2FbFF !important;
}

.TimeTableMonthWeekLine td {
	background-color: #F2FbFF !important;
	text-align: center;
}



/* *******************************************************
	Kopfbereich der Views zur farblichen Abstimmung auf die View-Manager-Tabs
*/
/*Klasse wird wahrscheinlich nirgends mehr gesetzt*/
.viewHeader {
	color: var(--text-color);
	background-color: var(--background-color);
	font-weight: normal;
	padding-top: 0px;
	padding-bottom: 0px;
}

/*
	Kacheln der Startseite
*/

.appBoxInnerContentNoButton {
    /* height: 432px; */
    overflow: auto;
    padding-right: 8px;
}

.appBoxInnerContent {
    height: 400px;
    overflow: auto;
    margin-right: -3px;
    padding-right: 8px;
}


/*
/* ****************************************************
	PartnerRoleEdit
*/
.PartnerRoleEdit input {
	vertical-align: middle;
	min-width: 140px;
	height: 18px;
}
/*
	Ende von PartnerRoleEdit
    ****************************************************
*/


/* ****************************************************
	AccountItemEdit
*/
.AccountItemEdit input {
	vertical-align: middle;
}
/*
	Ende von AccountItemEdit
    ****************************************************
*/

/* ****************************************************
	InputNumber
*/
.InputNumber {
	text-align: right;
	font-family: monospace !important;
	width: 70px;
}

/*
	Ende von InputNumber
    ****************************************************
*/

 /* ****************************************************
	Radiobutton über HTMLSelectionCtrl
*/
table.radioButtonHorizontal {
	text-align: right;
}

table.radioButtonHorizontal tr td {
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}


/*
	Ende von Radiobutton über HTMLSelectionCtrl
    ****************************************************
*/

/******************************************************************************
* START: SelectionListTrainer.AttributeFrame                                  *
******************************************************************************/
/* die Klasse wird nirgends gesetzt
.SelectionListTrainer_AttributeFilter {
	width: 330px;
	max-height: 36ex;
	Damit es auch ein IE versteht.
	height: 36ex;
	overflow: auto;
	text-align: left;
	background-color: var(--background-color);
	border-style: solid;
	border-width: thin;
	border-color: #000000;
}

.SelectionListTrainer_AttributeFilter .header {
	font-weight: bold;
	font-size: 120%;
	background-color: #999999;
	color: #FFFFFF;
}

.SelectionListTrainer_AttributeFilter .groupHeader {
	font-weight: bold;
} */

/******************************************************************************
* ENDE: SelectionListTrainer.AttributeFrame                                   *
******************************************************************************/

/******************************************************************************
* START: SelectionListLocation.EquipmentFrame                                  *
******************************************************************************/
.SelectionListLocation_EquipmentFrame {
	width:400px;
	height:180px;
	overflow:auto;
	text-align:left;
}

/******************************************************************************
* ENDE: SelectionListTrainer.AttributeFrame                                   *
******************************************************************************/

 /* ****************************************************
	UseCaseMailMerge
*/
h2.MailMergeHeader {
	margin-left: 5%; /* bündig mit den Prozessschritten */
}

.correspondenceReadOnlyDiv {
	border:1px solid var(--border-color);
	padding: 10px;
}

.correspondenceJobHeader {
 	margin-left: 8px;
 	margin-right: 8px;
 	margin-top: 4px;
 	width: 100%;
 }

 .correspondenceJobAttachment {
 	float: left;
 	padding: 8px;
 	border: 1px solid var(--border-color);
 	border-radius:5px;
 	background-color: var(--background-color);
 	margin: 8px;
 	color: var(--text-color) !important;
 	text-decoration: none !important;
 }

 .correspondenceJobContent {
 	margin-left: 8px;
 	margin-right: 8px;
 	width: 100%;
	background-color: var(--text-color);
 }
 
 .correspondenceJobContent iframe {
	border: 1px solid var(--border-color);
	width:99%;
	margin-right: 4px;
	height:500px;
 }

/*
	Ende von UseCaseMailMerge
    ****************************************************
*/

/******************************************************************************
* START: Spacer (IGP: 04.08.2011)                                             *
* Diese Definitionen dienen als Vorgabenfür vertikale oder horizontale       *
* Zwischenräume. Diese Angaben sollten immer nur mit DIV-Containern ohne      *
* Inhalt verwendet werden.                                                    *
*                                                                             *
* Beispiel: Ein quadratischer Spacer                                          *
* <div class="verticalSpaceMedium horizontalSpaceMedium"></div>               *
******************************************************************************/
div.horizontalSpaceSmall {
	width: 0px;
}
div.horizontalSpaceMedium {
	width: 0px;
}
div.horizontalSpaceLarge {
	width: 0px;
}
div.verticalSpaceSmall {
	height: 0px;
}
div.verticalSpaceMedium {
	height: 0px;
}
div.verticalSpaceLarge {
	height: 0px;
}
/******************************************************************************
 *	ENDE: Spacer                                                              *
 ******************************************************************************/


/* ***************************************************************
	Sonstige
*/

/* Batchimport von Meldungen */
.RegistrationBatchImportResultError {
	border-color: var(--error-color);
	border-style: solid;
	border-width: 1px;
	margin: 5px;
	padding: 5px;
}

.RegistrationBatchImportResultSuccess {
	border-color: var(--success-color);
	border-style: solid;
	border-width: 1px;
	margin: 5px;
	padding: 5px;
}

/*
	Ende Sonstige
    ****************************************************
*/


/***************************************************************************************************
 * Componenten (Werden in ecadia aus Widgets zusammengesetzt).
 **************************************************************************************************/
table.CheckBoxGroupBox > tbody > tr > td > table > tbody > tr > td, table.CheckBoxGroupBox > tr > td > table > tr > td {
	padding: 0px;
	padding-left: 0.7em;
	padding-right: 0.7em;
}

span.RadioGroupPanel > table > tbody > tr > td, span.RadioGroupPanel > table > tr > td {
	padding: 0px;
	padding-right: 3.0em;
}

/***************************************************************************************************
 * RS, 30.12.2014: Falls mehrere Radiobuttons in eine Zeile sollen, dann ohne Zeilenumbruch
 **************************************************************************************************/
.RadioGroupPanel {
	/* float: left; */
	display: inline-block;
}

/***************************************************************************************************
 * RS, 30.12.2014: die einzelnen Radio-Button.Elemente sollen zumindest einen kleinen Abstand haben
 **************************************************************************************************/
.RadioGroupPanel table td {
	padding-right: 3.0em;
}

/***************************************************************************************************
 * Ende Componenten
 **************************************************************************************************/


/***************************************************************************************************
 * Autocomplete
 **************************************************************************************************/
 .autocomplete-suggestions {
	background: url(gif/shadowAutocomplete.png) no-repeat bottom right;
	margin: 0px 0 0 0px;
	border: 1px solid var(--border-color);
	background: var(--background-color);
	cursor: default;
	text-align: left;
	max-height: 350px;
	overflow: auto;

	/* IE6 specific: */
	_height: 350px;
	_margin: 0;
	_overflow-x: hidden;
	/* IE6 fix: */
	_background: none;
	_margin: 0;
}

.autocomplete-selected {
	background-color: var(--hover-color);
}

.autocomplete-suggestions div {
	padding: 2px 5px;
	white-space: nowrap;
}

.autocomplete-suggestions strong {
	font-weight: normal;
	color: #3399FF;
}

/***************************************************************************************************
 * Ende Autocomplete
 **************************************************************************************************/

/***************************************************************************************************
 * Tooltip
 **************************************************************************************************/
/*wird das noch verwendet?*/
.helpIconToolTip {
	display: block;
	background: var(--background-color);
	padding: 5px;
	border: solid var(--border-color) 1px;
}

/***************************************************************************************************
 * Ende Tooltip
 **************************************************************************************************/

/***************************************************************************************************
 * ecadiaWidgets
 **************************************************************************************************/


div.ViewPanel,
div.SelectionListPanel {
	padding-top: 2px;
	width: 100%;
}
div.ViewMessagesWidget {
	padding-top: 5px;
	padding-bottom: 5px;
}

div.PageNameWidget h1 {
	margin: 0px;
}

.ActionPanel {
	float: right;
	display: inline;
	margin-top: 5px;
	margin-bottom: 5px;
}

div.ActionPanel button, div.ActionPanel input {
	margin-right: 5px;
	margin-bottom:5px;
}

.ViewFrameTable > tr > td,
.ViewFrameTable > tbody > tr > td {
	padding: 2px 0 2px 0;
}


.ViewMainData {
	margin-left: 4px; /* gelich wie bei  PageNameWidget */
}
.ViewDetailBox {
	vertical-align: top;
	
	/* RS, 04.12.2019: diese Box ist irgendwie sinnfrei */
	display: none; 
}
.ViewDetailLeftBox {
	vertical-align: top;
	display: inline-block;
	float: left;
}
.ViewDetailMiddelBox {
	vertical-align: top;
	float: left;
	display: inline-block;
	margin-left: 30px;
}
.ViewDetailRightBox {
	vertical-align: top;
	display: inline-block;
	margin-left: 30px;
}

.ViewHead .RowGridPanel > .CellGridCol0,
.ViewDetailBox > .ViewDetailLeftBox > .GridPanelLeft .CellGridCol0,
.ViewDetailBox > .ViewDetailMiddelBox > .GridPanelMiddel .CellGridCol0,
.ViewDetailBox > .ViewDetailRightBox > .GridPanelRight .CellGridCol0 {
	font-weight: bold;
	max-width: 15em;
}

div.TabPanel {
	overflow-y: auto;
	width: 100%;
}

table.GridPanel {
	/*	width: 100%; RS, 26.07.2022 auskommentiert */
	float: left; /* Tabelle immer ganz links starten, insb. in der ActionPanel */
}

table.TabMainData {
	width: 100%; /* die Tabelle, der Bearbeitungsseiten soll über die ganze Breite gehen */
}



/* die Eingabefelder sollen nicht umbrechen sondern nebeneinander bleiben und mittig vor dem Input stehen */
div > .TabMainData > tbody > tr > td.CellGridPanel,
div > .TabMainData > tr > td.CellGridPanel {
	white-space: nowrap;
	vertical-align: middle;
}

div > .TabMainData > tbody > tr > td.CellGridPanel > label,
.Accordion .GridPanel > tbody > tr > td.CellGridPanel > label{
	display: inline-block;
}

/* RS, 11.09.2022: Labels mittig vor den Input-Feldern */
table.ViewFrameTable > tbody > tr > td {
	vertical-align: middle;	
}

.CheckBoxGroupBox {
	position: relative;
}

.GroupBoxPanelHeader {
	font-weight:bold;
	text-align: center;
	background: var(--background-color);
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	margin-top: 0px;
	margin-bottom: 0.1em;
}
.ColumnLayoutSingleCol {
	padding-left: 2px;
	padding-right: 2px;
	line-height: 1.7em;
}

.InputWidgetHighLightRed input {
	font-weight: bold;
	color: var(--error-color) !important;
}
/*wird nicht verwendet*/
.InputWidgetHighLightGreen input {
	font-weight: bold;
	color: var(--success-color) !important;
}


/***************************************************************************************************
 * Ende ecadiaWidgets
 **************************************************************************************************/

/***************************************************************************************************
 * Druckoptimierungen
 **************************************************************************************************/

@media print {
	table.frameHeader {
		display: none;
	}

	#NavBarTD {
		display: none;

	}

	#NavigationMenuHor {
		display: none;
	}
}

/***************************************************************************************************
 * Ende Druckoptimierungen
 **************************************************************************************************/

/***************************************************************************************************
 * Forum
 **************************************************************************************************/
.tmpInternalButtonTable,	/* Legacy-Klasse, deprecated */
.forumButtonTable			/* Korrekte Klasse */
{
	margin-top:2px;
	border-width: 1px;
	border-style: dotted;
	border-color: var(--border-color);
	width:170px;
	text-align:center;
}
/* Formatfür Schaltflächen innerhalb der Foren zur Einstellung der Benachrichtigung, beide werden nicht mehr verwendet */
.buttonSelected,		/* Legacy-Klasse, deprecated */
.forumButtonSelected	/* Korrekte Klasse */
{
	border: 1px solid #666666;
	color: #333333;
	cursor: pointer;
	color:black;
	font-size: 9px;
	text-align: left;
	background: url('gif/selected.png');
	background-repeat:no-repeat;
	background-position: 2px 4px;
	background-color: #ffffff;
	height:20px;
	padding-left: 20px !important;
	width: 50px !important;
}
.buttonNotSelected,		/* Legacy-Klasse, deprecated */
.forumButtonNotSelected	/* Korrekte Klasse */
{
	border: 1px solid #000000;
	color: #333333;
	cursor: pointer;
	color:black;
	text-align: left;
	font-size: 9px;
	background: url('gif/notSelected.png');
	background-repeat:no-repeat;
	background-position: 2px 4px;
	background-color: #ffffff;
	height:20px;
	padding-left: 20px !important;
	width: 70px !important;
}
/***************************************************************************************************
 * Ende Forum
 **************************************************************************************************/

/***************************************************************************************************
 * AsyncJobProgressWidget
 **************************************************************************************************/
.AsyncJobProgressWidget {
	width: 100%;
	padding: 10px;
	display: block;
}
.AsyncJobProgressWidget > table {
	table-layout: fixed;
}

.AsyncJobProgressWidget_Header {
	font-weight: bold;
}

.AsyncJobProgressWidget_ProgressBar_Background {
	padding-top: 2px;
	padding-left: 0px;
	padding-bottom: 2px;
	padding-right: 0px;
	border-radius: 3px;
	background: var(--background-DropAreas);
	border: 1px solid var(--border-color);

}
.AsyncJobProgressWidget_ProgressBar {
	width: 0px;
	height: 18px;
	font-size: 1pt;
	background: var(--success-color);
}


/*********************************************************
 * jQuery UI Fixes
 *********************************************************/
.ui-widget-header {
	background-image: none;
	background-color: var(--hover-color);
}
.ui-widget-content {
	border: 1px solid var(--border-color);
	background: var(--background-color);
	color: var(--text-color);
}


/* ***************************************************************
	ShowDocumentLMSContent.jsp
*/
.showDocumentLMS table.HTMLTable {
	width: auto;
}

/*********************************************************
 * Kacheln der Startseite
 *********************************************************/
.WelcomePageColumn {
	vertical-align: top;
}

.WelcomePageColumnLeft {
	padding-right: 6px;
}

.WelcomePageColumnRight {
	padding-left: 6px;
}

.WelcomePageColumnMiddle {
	padding-right: 6px;
	padding-left: 6px;
}

.imageButton {
	height:22px;

}

.pastedImage, .fieldPreview img {
	max-width: 900px !important;
	height: auto !important;
}

/** Vorschauanzeige speziell der Bildungsproduktinhalte */
.fieldPreview {

	width: 100%;
	white-space: normal;
}

.tpc_content_area {
	width: 100%;
}

/* ***************************************************************
	MISC
*/
#WaitingMessage {
	position: absolute;
	width: 200px;
	height: 50px;
	/*zentrieren*/
	left: 55%;
	top: 50%;
	margin-left: -175px;
	margin-top: -50px;
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 0px;
	padding-right: 20px; 
	/* background: url('gif/hourglass.png') #ffffff no-repeat 20px 20px ; */
	/* background: url('gif/ajax-loader.gif') var(--background-color) no-repeat 20px 20px; */
	background-color: var(--background-color);
	text-align: center;
	border: solid 2px var(--border-color);
	box-shadow: 3px 5px var(--background-DropAreas);
	border-radius: 6px;
	display: block;
	z-index: 10000;
}
.faIconSpinner {
  	font-size: 20pt;
  	margin-right: 10px;

} 
	
/* ***************************************************************
SelectionListPanelMyToDoListSubstitutePanel
*/
#SelectionListPanelMyToDoListSubstitutePanel {
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-color);
	padding: 5px;
	margin-bottom: 5px;
}

/* ***************************************************************
	WelcomeOrganizer.jsp
*/
.WelcomeOrganizer {
	display: grid;
	grid-template-columns: 27% 46% 27%;
}

.WelcomeOrganizer .dialogWindowFrame {
	margin-top: 5px;
	width: 100%;
	border-collapse: collapse;
	display: block;
}

.dialogWindowHeader {
	height: 20px;
	width: 100%;
	position: relative;
}

/* die einzelne Bereich der Zwischenablage */
.clipboardArea, .menueEditHistoryArea, .personalStorageArea {
	padding: 4px 0 4px 0 !important;
}

#dropAreaClipboardObjects, #dropAreaPersonalStorageObjects {
	margin-top: 3px; /* damit die Drop-Fläche nicht direkt an die Tabelle grenzt */
}

.dialogWindowHeaderText {
	display: inline-block;
	padding: 4px 5px 1px 16px;
	color: var(--heading-color);
}

.dialogWindowContent {
	width: 100%;
    background-color: var(--background-color);
}

.dialogWindowHeaderMinMax {
	position: absolute;
	right: 2px;
	top: 0;
	background-color: transparent;
	border: none;
}


/* **********************************************************************
	msDropDown-Einstellung. TabControl "Weitere"
*/

.menuSelectPDFDocument a {
	background-color: var(--background-color);
}

.menuSelectPDFDocument ul li {
	width:220px;
}

.menuSelectPDFDocument a.sf-with-ul {
	padding-top: 2px;
}

.menuSelectPDFDocument > li > ul {
	margin-top: 5px;
}

#menuSelectPDFDocument {
	overflow-y: auto;
}


.inspectTable {
	width: 100%;
	font-family:helvetica,arial,sans-serif;
	font-size:12pt;
}

.inspectTableHeader {
	width: 100%;
}

.inspectTableHeader tr:first-child td {
	background:   #efefef; /* Farben vom Inspect mode erstmal zurückgesetellt*/
	text-align: center;
}


.trainingProductContentPreview {
	width: 100%;
}

.trainingProductContentPreviewFrame {
	width: 100%;
    border-collapse: collapse;
	margin-top: 4px;
}

/* die 2-spaltige Tabelle */
table.trainingProductContentPreviewFrame > tbody > tr > td {
	vertical-align: top;
	width: 50%;
	padding-right: 10px;
}


.trainingProductContentPreviewBody textarea {
	width: 100%;
	font-family: monospace;
	
	/* Tabs mit 3 Stellen */
    tab-size: 3em;
	-moz-tab-size: 3;
	-webkit-tab-size: 3; 
    -o-tab-size: 3;
}

.trainingProductContentPreviewHeader {
	padding-top: 4px;
	padding-right: 0px !important; /* um von der umschließenden Tabelle die 10px zu überschreiben */
	background-color: var(--header-background);
}

.trainingProductContentPreviewBody {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
}

/* die Header für vergangene und zukünftige Inhalte */
td.trainingProductContentPreviewHeader.ValidPast {
	background-color: var(--disabled-background);
	color: var(--disabled-text);
}

td.trainingProductContentPreviewHeader.ValidFuture {
	background-color: var(--warn-color);
	opacity: 0.2;
	color: var(--text-color-for-Ligth-background);
}

/* Collapsible für aktuelle, vergangene und zukünftige Inhalte */
div.ETabDlgTrainingProductContent h3.ValidPast {
	background: #f9f9f9;
}
div.ETabDlgTrainingProductContent h3.ValidFuture {
	background: var(--warn-color);
	opacity: 0.2;
}

/* die Vorschau im readonly-Modus */
td.trainingProductContentPreviewBody > div.fieldPreview {
	padding: 6px;
}

.trainingProductContentPreviewHeaderLabel {
	padding-top: 4px;
	padding-left: 8px;
	padding-bottom: 4px;
	float: left;
}

/* damit ein kleiner Absatz zwischen den Inhaltsfeldern kommt */
.trainingProductContentPreviewBodySpacer {
	background-color: none;
	height: 10px;
}


/* Verwendung z. B. in ETabDlgPartnerTrainingPath.jsp */
.inlineModifyObjectDialog {
	position: absolute;

	width: 700px; /* Defaultgröße, die im style= jeweils überschrieben werden kann */
	height: 250px; /* Defaultgröße, die im style= jeweils überschrieben werden kann */

	/* zentrieren - seltsamerweise nicht 50%, dann ist es zu weit rechts */
	left: 30%;
	top: 180px;  /* ist so direkt oben im sichtbaren Bereich, unter dem ViewManager */

	padding: 10px;
	border: solid 4px var(--border-color);
	display: block;

	background-color: var(--background-color);
	box-shadow: 10px 10px 5px var(--background-DropAreas);
	z-index: 3; /* noch unter dem Menü und den jQuery Popups, she 7.4.26 von 2 auf 3 angehoben, damit es über Codemirror liegt, 
																z.B. beim Berabeiten der Zuständigkeit von toDos */
}

/* die Dialog-Titelzeile */
.inlineModifyObjectDialog h1 {
	background-color: var(--hover-color);
	margin-top: -10px;
	margin-right: -10px;
	margin-left: -10px;
	margin-bottom: 10px;
	padding: 0;
	padding: 4px;
	font-size: 12pt;

}

.inlineModifyObjectDialogButtons {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

.inlineModifyObjectDialogButtons input[type=submit] {
	margin-right: 10px; /* kleiner Abstand zwischen den Buttons */
}

/* Manuell hinzugefügte Kompetenz */
.CompetenceWithoutTrainingPath td {
	background-color: orange;
}


/*für jQuery Komponenten: erstmal unsichtbar machen */
.nativeInvisible {
	visibility: hidden;
}

/* DropDown-Button Verwendung als Liste der pdf-Serienbriefe in der Veranstaltung ---------------------------------------------------------- */
.dropDownButtonContainer {
  display: inline-block; /* die Div um den Button herum soll sich sauber einreihen */
}

.dropDownButtonContainer img {
	padding-right: 8px; /* Abstand zum Text */
}

.dropDownButtonContainer button {
	border-radius: 3px !important;
	padding: 0px !important;
}

/* RS, 27.12.2014: Optik wie die normalen Buttons; einige der über jQueryUI-css gesetzten Styles müssen überschrieben werden */
.dropDownButtonContainer button .ui-button-text {
    font-size: 13px !important;
	padding-left: 6px;
	padding-right: 24px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: var(--background-color) !important;
}

.dropDownButtonContainerMenu {
  position: absolute;
  width: 300px !important; /* die Breite des Popup-Bereichs mit der Liste an Dokumenten */
  z-index: 10;
}

.dropDownButtonContainer li a {
	background-color: transparent; /* sonst ist der (woher auch immer) mit grau vorbelegt */
}

/* die neu e Drop-Fläche mt FA-Icon */
.dropAreaFAIcon {
	position: relative; 
	display: flex; 
	flex-wrap: wrap; 
	align-items: center; 
	justify-content: center;	
}


.dropArea  {
	color: var(---text-color);
	vertical-align: top;
	margin: 0 auto;
	margin-top: 15px;
	padding: 10px;
	/*width: 85%;
	height: 20px; */
	width: 90%;
	height: 20px;
	border: 1px dotted var(--border-color);
	background: url('gif/dropFiles.png') var(--background-DropAreas) no-repeat right center;
	background-position: 95% 50%;
	text-align: center;
}

.dropAreaSmall {
	color: var(---text-color);
	vertical-align: middle;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	margin: 0px;
	border: 1px dotted var(--border-color);
	background: none;
	background-color: var(--background-DropAreas);
	text-align: center;
}

.dropAreaText {
	max-width: 90%;
	top: 50%;
	transform: translateY(-50%);
}

.redesign {
	margin-bottom: -30px;
}

.ecadiaObjectChooserDropArea {
	background-image: url('gif/DropAndSearch.png');
	background-repeat: no-repeat;
	background-position: 3px 6px;
	background-color: var(--background-DropAreas);
	padding-left: 23px !important;
	height: 18px;
}

/* yka - FA-Icons als Unicode eingebunden */
.dragObject {
	padding-right: 8px;
	position: relative;
}

.dragObject::before {
	content: '\f245';
	font-family: 'Font Awesome 7 Pro';
	font-weight: 400;
	position: absolute;
	right: 0px;
	bottom: 0px;
	font-size: 0.8em;
	/* keine Farbe, weil die vom Parent übernommen werden soll */
}

/* im Kalenderelement ist relativ wenig Platz, daher den Pfeil nicht so weit ausladen */
.dragObjectResourceView {
	background: url('gif/dragObjectSmall.png') transparent no-repeat;
	background-position: bottom right;
	padding-right: 0px;
}

/* tableAutocomplete ------------------------------------------------------------------------------------------------------------ */
.itemTableAutocomplete {
	overflow: hidden;
	float: left;
	margin: 0px 2px 0 0 !important;
	padding: 0px;
	white-space: nowrap;
}

.itemTableAutocompleteHeader {
	font-weight: bold;
	padding: 0px !important;
	margin: 0px !important;
	color: var(--text-color);
	width: 100%
}

.itemTableAutocompleteHeader td {
	padding: 0px !important;
	margin: 0px !important;
}

.itemTableAutocompleteContainer {
	padding: 0px;
	margin: 0px;
}

.itemAutocomplete {
	border-bottom: 1px solid var(--border-color);
	margin: 0px;
	padding: 3px 0px 3px 0 !important;
}

.itemAutocompleteEven {
	/* background-color: #efefef; */
}

.itemAutocomplete li table {
	width: 100%;
}

.itemAutocomplete li table td {
	width: 100%; /* wichtig für die letzte Spalte, die in der Regel selbst keine Breite festgelegt hat */
}

.tableAutocompleteHighlight, .highlight {
	background-color: var(--warn-color);
	color: var(--text-color-for-Ligth-background);

}


/* Zusammengefasst die css für die Codemirror Felder (Admin SQL, ecadiaJava, ReportWizard XML ---------------------------- */

.CodeMirror * {
	font-family: monospace;
	font-size: 16px ;
}

/*
	Ajax-Eingabe Bildungsproduktinhalt
*/
.tpc_inputField_Big {
	font-size: 16pt;
	min-height: 700px;
	min-width: 1000px;
}

/* 	Ende nicht verwendet
	***************************************************************
*/

.groupLine {
	height:1px;
	color: var(--border-color);
}

#trainingProductContentTabs {
	border: none;
}

#trainingProductContentTabs textarea {
	font-size: 2em;
}

.HighlightLabelInactive {
	text-decoration: line-through;
}

.HighlightLabelDeprecated {
	background-image: url(gif/Stop.gif);
	background-repeat: no-repeat;
	background-position: left 0px center;
	color: var(--error-color);
	font-weight: bold;
	padding-left: 20px !important;
}

i.HighlightLabelDeprecatedFAIcon {
	color: var(--faIcon-color);
	position: relative;
	top: 2px;
	font-size: 16px;
}

.HighlightLabelInvalid, .HighlightLabelInvalid * {
	color: var(--error-color);
}

.HighlightTextfieldInvalid {
	border-color: var(--error-color);
	border-style: ridge;
	border-width: 5px;
}

/*für KI ecadiaEFeedbackUseStyleAttributes=0 gelten diese Styles */
.QuestionScaleText div {
	font-size: 14pt;
	line-height: 1.2em;
	padding-top: 10px;
}

/* Immer Arial mit etwas größerer Schrift */
.ecadiaEFeedback td, .ecadiaEFeedback td div {
	line-height: 1.2em;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 14pt !important;
}

.QuestionScaleRadioButton input[type=radio] {
 	width:2em; /* fetter Radio-Button - Geschmackssache */
	height:2em;
}

/* der umschließende Fragenbogen-div: etwas Ränder wirken schöner */
#FeedbackItems {
	padding-right: 50px;
	padding-left: 50px;
}

/* inaktive Fragebogenelemente optisch kenntlich machen */
.inquiryElementInactive td, .inquiryElementInactive td * {
	background-color: var(--background-color);
	text-decoration: line-through;
}



/*********************************************************
 * FileUpload
 *********************************************************/
.fileUploadArea {
	padding: 10px;
	width: 100%;
}

/* Todo: überarbeiten, damit nichts doppelt ist */
.fileDropArea, #fileDropArea {
	padding: 10px;
	width: 99%;
	height: 65px; /*RIS - 15.07.2015*/
	border: 1px dotted var(--border-color);
	background: url('gif/dropFiles.png') var(--background-DropAreas) no-repeat right center;
	background-position: 95% 50%;
	text-align: center;
}

/*ähnlich wie .dropAreaFAIcon */
.fileDropAreaWidget{
	color: var(--text-color);
	padding: 10px;
	margin-top: 20px;
	height: 100px;
	width: 100%;
	border: 1px dotted var(--border-color);
	background: var(--background-DropAreas) no-repeat right center;
	text-align: center;
	display: inline-flex;
	flex-wrap: wrap;
}

.files {
	min-height: 30px;
	color: var(--error-color) !important;
}

.progress-bar {
	width: 0px;
	height: 18px;
	background: var(--success-color);
	overflow: hidden;
	color: white;
}

/* der File Upload Ladebalken */
#progress {
	border: 1px solid var(--border-color);
	display: none;
	padding: 1px;
	width: 90%;
	position: relative;
	margin-top:10px;
	margin-left:10px;
	margin-right:10px;

}

.bar {
	height: 18px;
	background: var(--success-color);

}




#editComboboxEntriesDialogContent table th {
	padding: 4px 8px 4px 8px;

}

#editComboboxEntriesDialogContent table th, #editComboboxEntriesDialogContent table td   {
	padding: 4px 8px 4px 8px;

	font-size: 14px;
}

#editComboboxEntriesDialogContent table tr.HighlightLabelInactive input   {
	text-decoration: line-through;
}

/* Icon mit Link als Button formatieren */
.ETabDlgTrainingProductContent a > img {
	border: 1px outset buttonface;
	padding: 2px;
	background-color: var(--background-color);
}

.ETabDlgTrainingProductContent a.html-invalid > img {
	background-color: var(--error-color);
}

tr.trainingProductContentPreviewBodySpacer .invalid-title {
	margin-left: 1em;
	color: var(--error-color);
	margin-bottom: 1em;
}

.ETabDlgTrainingProductContent a.html-invalid {
	pointer-events: none;
}


/* HTML-Editor Felder ---------------------------------------------------------------------------------------------------------- */

/*
für die Formatierung der Listen in Produkt-Beschreibungen
*/

.trainingProductContentPreview p  {
	margin: 0; /* sonst haben wir einen etwa 1em oberen und unteren Rand */
	padding: 0;
}

ul.standardUL > li,
.trainingProductContentPreview div ul > li {
   	list-style-image: url(gif/bullet2.gif);
 	padding-bottom: 2px;
}


ul.standardUL > li > ul > li,
.trainingProductContentPreview div ul > li > ul > li {
   list-style-image: url(gif/bullet3.gif);
	padding-bottom: 2px;
 }


ul.standardUL,
.trainingProductContentPreview div ul  {
	margin-top: 2px;
	margin-bottom: 2px;
	padding-top: 4px;
	padding-bottom: 6px;
}

.trainingProductContentPreview div ol {
	margin-top: 2px;
	margin-bottom: 2px;
	padding-top: 4px;
	padding-bottom: 6px;
	margin-left: 0;
	padding-left: 1.8em;
}


.bulletLevel3 {
   list-style-image: url(gif/bullet3.gif);
}


/* Dialog Zugriffsberechtigungen ------------------------------------------------------- */
/* Verwendung in ecadia.js openDialogEditAccessProfile                                   */

.AccessProfileDialogTable {
	border: 2px solid var(border-color);
	border-collapse: collapse;
}

.AccessProfileDialogTable th {
	background-color: var(--hover-color);
	width: 160px;
	border: 1px solid var(--border-color);
	padding: 6px;
	text-align: center;
}

.AccessProfileDialogTable td {
	border: 1px solid var(--border-color);
	padding: 4px;
	text-align: center;
}

/* damit die Tabelle im grau/weiß Wechsel kommt */
.AccessProfileDialogTable tr:nth-child(odd) {
	 background-color: var(--hover-color); 
}

.AccessProfileDialogTable td:first-child {
	text-align: left;
}

.AccessProfileDialogTable .dragObject {
	background: var(--background-color); /* wird in der index.jsp durch die Systemvariable ecadiaMainColor überschrieben */
	color: var(--text-color);
}

.AccessProfileDialogTable .dropObject {
	background: var(--hover-color);
	color: var(--text-color);

}
/* Farbe des Selctierten Objekts*/
.select2-container--default .select2-results .select2-results__option[aria-selected=true] {
    background-color: var(--hover-color);
}
/* gleicher Dialog Zugriffsberechtigungen, Tabelle mit den Systemvariablen unterhalb */
.SysVarTableForConfigMode {
	border: 2px solid var(--border-color);
	border-collapse: collapse;
}

.SysVarTableForConfigMode th {
/*	width: 160px; */
	border: 1px solid var(--border-color);
	padding: 6px;
	text-align: center;
}

.SysVarTableForConfigMode td {
	border: 1px solid var(--border-color);
	padding: 4px;
}


/** Konfigurationsmodus einer Tabelle, Button zum Speichern von Einstellungen zur Tabelle */
#saveSysVars, #savePermissions{
	margin-right: 0.5em;
}

/* Startseite Buttons der Hauptfunktionen ------------------------------------------------------- */
a.startPageIconButton {
	border: 2px solid var(--border-color);
	padding: 5px;
	margin: 4px;
	border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    background-color: var(--input-background-color);
}

a.startPageIconButton:hover {
	background-color: var(--hover-color);
	background-size: 8px 12px;
}

/* geschachtelt in 2 Div damit der verikale zentrierung tut */
a.startPageIconButton > div {
	width: 100%;
	height: 100%;
	display: table;
    text-align: center;
}

a.startPageIconButton > div > div {
	vertical-align: middle;
    display: table-cell;
    text-align: center;

	/* Silbentrennung */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/***************************************************************************************************
 * Inhaltsbereich der openMessageBox
   RS, 17.12.2014
 **************************************************************************************************/

/* Die Confirm-Box nutzt die selber div wie die Info-Box, soll aber ein Fragezeichen als Hintergrung haben */

.ErrorInfoMessagePopupDialogContentConfirm {
  position: relative;
  padding: 18px 10px 10px 50px;
  font-size: 12pt;
  min-height: 40px;
}

.ErrorInfoMessagePopupDialogContentConfirm::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400; 
  content: "\f059";
  position: absolute;
  left: 10px;
  top: 20px;
  font-size: 28px;
  color: var(--faIcon-color);
}


#ErrorInfoMessagePopupDialogContent {
  position: relative;
  padding: 18px 10px 10px 50px;
  font-size: 14pt;
  max-height: 400px;
  overflow-y: auto;
}

#ErrorInfoMessagePopupDialogContent::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f05a";
  position: absolute;
  left: 10px;
  top: 14px;
  font-size: 28px;
  color: var(--faIcon-color);
}


#ErrorInfoMessagePopupDialogContent:has(div.errorText)::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f071"; 
  position: absolute;
  left: 10px;
  top: 18px;
  font-size: 28px;
  color: var(--faIcon-color);
}

/* Fehlermeldung soll einen roten Header bekommen */
/* yka - Ergaenzung in index.jsp hinzugefuegt */
div[aria-describedby=ErrorInfoMessagePopupDialog]:has(#ErrorInfoMessagePopupDialog div.errorText) .ui-dialog-titlebar
	{
	background-color: var(--error-color);
}

#ErrorInfoMessagePopupDialogContent h1 {
	padding: 0;
	margin: 0;
}

#ErrorInfoMessagePopupDialogContent p {
	font-size: 14pt;
	padding: 0;
	margin: 0;
}

#ErrorInfoMessagePopupDialogContent ul,
	.ErrorInfoMessagePopupDialogContentConfirm ul {
	padding: 4px 0 4px 6px !important;
	margin: 0 0 6px 0;
}

#ErrorInfoMessagePopupDialogContent ul p,
	.ErrorInfoMessagePopupDialogContentConfirm ul p, .DeleteInfoMessage {
	padding: 0px 0 0px 16px !important;
	margin: 0;
	color: var(--text-color);
	font-size: 12pt;
}

#ErrorInfoMessagePopupDialogContent ul ul,
	.ErrorInfoMessagePopupDialogContentConfirm ul ul {
	padding: 0 0 0 20px !important;
	margin: 0;
}

#ErrorInfoMessagePopupDialogContent ul li,
	.ErrorInfoMessagePopupDialogContentConfirm ul li {
	font-size: 14pt;
	background: url(gif/bullet2.gif) no-repeat left 10px;
	padding: 4px 0px 4px 16px;
	list-style: none;
	margin: 0;
}

#ErrorInfoMessagePopupDialogContent ul ul li,
	.ErrorInfoMessagePopupDialogContentConfirm ul ul li {
	font-size: 12pt;
	color: var(--text-color);
}

#ErrorInfoMessagePopupDialogContent  .ErrorMessageTechicalInfo {
	padding: 8px;
	color: var(--text-color);
	display: block;
}

.confirmMessageTable {
	border-collapse: collapse;
	margin-left: 10px;
	
	/* damit die Tabellen auch halbwegs die Fläche füllen */
	min-width: 400px;
}
.confirmMessageTable td, .confirmMessageTable th  {
	border: 1px solid var(--border-color);
	padding: 4px 14px 4px 10px;
	font-size: 12px;
}

.confirmMessageTable a {
	border: 1px solid var(--border-color);
	background-color:var(--background-color);
	color: var(--text-color);
	padding: 5px;

	border-radius: 5px;
	box-shadow: 2px 2px 2px var(--background-DropAreas);

    text-align: center;
    vertical-align: middle;
}

.confirmMessageTable a:hover {
	background: var(--hover-color);
	color: var(--text-color);
}

/* widgetSettingsDialog (aus ecadia.js)  ----------------------------------------------------- */
#widgetSettingsDialogContentFields table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 30px;
}

#widgetSettingsDialogContentFields table td, #widgetSettingsDialogContentFields table th  {
	padding:10px;
	border-bottom: 1px solid var(--border-color);
}

#widgetSettingsDialogContentFields table th  {
	font-weight: bold;
}

.CellGridPanelInvisible {
	border: dashed 1px var(--border-color);
}

.eventContainerInfo{
width: 16px;
overflow: hidden;
vertical-align: top;
border: 1px solid var(--border-color);
background-color: var(--background-color);
}
/* 90 Grad Drehung des "Eingebettet in" Textes ------------------------------------------------- */
.isEmbeddedInInfoOuter {

	white-space: nowrap;

	/*
	-webkit-transform-origin: 148px 117px;
	-moz-transform-origin: 148px 117px;
	-o-transform-origin: 148px 117px;

	-ms-transform-origin: 148px 117px;
*/
	/* transform-origin: 258px 255px; */

	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}

.isEmbeddedInInfoInner {
	vertical-align: bottom;
	height: 100%;
	width: 16px;
}


/* Javascript JQuery-Dialoge wir z. B.editUserItemDataDialog -------------------------------------------------------------------------  */
.dataDialogForm table td {
	vertical-align: top;
	padding: 6px;
}

/* Ende Javascript JQuery-Dialoge wir z. B.editUserItemDataDialog --------------------------------------------------------------------  */

/* Info About Dialog -----------------------------------------------------------------------------------------------------------------  */
#aboutDialogContent table td {
	padding: 6px;
}

#aboutDialogContent  td, #aboutDialogContent p,  #aboutDialogContent a {
	font-size: 12pt;
}



/*********************************************************
 * Schrift
 *********************************************************/
/* Standard-Schriftfarben */

.tableHeader,
.tableColumnHeader,
.tableColumnHeaderSortable,
.tableFooter {
	color: var(--text-color);
}

/*verhindert unterstrichene Links*/
a , a:active, a:link, a:visited {
	text-decoration: none;
	color: var(--text-color); /*die Schriftfarbe von Links ist standardmäßig blau, das soll bei Buttons unterdrückt werden */
	cursor: pointer;
}


/*********************************************************
 * Sonstiges
 *********************************************************/

.dialogWindowHeader *,
.navBarHead * {
	font-weight: normal;
}

.tabControlBackground,
.tabDlgArea
 {
	border-collapse: collapse;
	width: 100%;
}
.ViewFrameTable > tbody > tr > td,
.tabControlBackground > tbody > tr > td {
	border-style: none;
	border-width: 0;
}
.tabControlBackground > tbody > tr > td {
	padding: 0;
}
.tabDlgArea > tbody > tr > td {
	padding: 10px;
}

/* Border weg  */
.ViewFrameTable,
.tabArea,
.frameNavigation,
.contentArea {
	border-style: none !important;
}

.contentArea > table {
	margin-left: 4px;
}


/* Selektionen in Selektionsfarbe, wird das noch verwendet? */
#treeContainer .selected,
.autocomplete .selected,
.dtree .nodeSel {
	background-color: white !important;
}

/*********************************************************
 * Widgets
 *********************************************************/

.ui-dialog .ui-dialog-titlebar {
    padding: 1em 1em;
    position: relative;
}


.ui-dialog[aria-describedby=ErrorInfoMessagePopupDialog] {
	max-width: 600px;
	min-width: 400px;
	
}

input[type='submit'] {
	height: 24px;
}

.buttonIconOnly {
	padding: 1px;
}

.CheckboxCore input[type=checkbox] {
	width: 16px;
	height: 16px;
}



input[type='text'].DateField.hasDatepicker, .useJQueryDatePicker,
	.comboboxFormatSelect2 {
	background-image: url('gif/button_calendar_small.gif');
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 17px 17px;
	width: 90px;
}

input[type='text'].TimeField.ui-timepicker-input {
	background-image: url('gif/clock16.png');
	background-repeat: no-repeat;
	background-position: right 2px center;
	width: 60px;
}

input[type='text'].selectContent {
	background-image: url('gif/select.png');
	background-repeat: no-repeat;
	background-position: left 2px center;
	/* background-color: #f2f2f2; */
	padding-left: 20px;
}

/*********************************************************
 * Buttons, Input
 *********************************************************/
 button, .buttonClass, input[type='submit']:not(.ButtonCoreIcon), select, button.ui-button{
	border: 1px solid var(--border-color);
	border-radius: 3px;
	color: var(--text-color);
	background-color: var(--input-background-color);
	padding: 4px 4px 4px 4px;
}
/*IconButtons in Kopfzeile */
.quickMenuButton{
	border: 1px solid var(--border-color);
	border-radius: 3px;
	color: var(--text-color);
	background-color: var(--input-background-color);
	margin-right: 2px;
	padding: 2px 2px 2px 2px;
}
.quickMenuButton:hover{
	background-color: var(--hover-color);
}

button:hover, input[type='submit']:hover a:hover,  button.ui-button:hover, button.ui-button:focus {
	cursor: pointer;
	background-color: var(--hover-color);
	color: var(--text-color);
}

input[type='text'], input[type='password'], input[type='search'], input[type='number']
	{
 	border: 1px solid var(--border-color);
	border-radius: 4px;
	padding: 6px 4px 5px 4px;
	background-color: var(--input-background-color);
	font-size: 11pt;
	vertical-align: middle;
	color: var(--text-color);
}
.button, .buttonMenu, input[type="submit"], input[type="button"] {
	background-color: var(--input-background-color);/* white;*/
	border: 1px solid var(--border-color) !important;
	font-size: 12px;
}

.button:active, .buttonMenu:active, input[type="submit"]:active, input[type="button"]:active
	{
	background-color: var(--hover-color);
	border: 1px inset buttonhighlight;
	border-color: var(--border-color);
}

.button:hover, .buttonMenu:hover, input[type="submit"]:hover, input[type="button"]:hover{
	background-color: var(--hover-color);
}

.buttonIconOnly,  .buttonText,  .buttonIconText {
	background-color:  var(--input-background-color); /*white;*/
	border: 1px solid var(--border-color);
	background-position: 4px 2px;
	padding-top: 4px;
	padding-bottom: 4px;
	color: var(--text-color);
}

.buttonIconOnly:active,
.buttonText:active,
.buttonIconText:active {
	border: 1px solid var(--border-color) !important;
	background-color: var(--hover-color) !important;
}

.buttonDisabled {
	background-color: var(--background-color) !important;
	color: var(--text-color);
	border: 1px solid var(--border-color) !important;

}

.buttonDisabled:hover ,[disabled="disabled"]:hover, .select2-container--disabled, 
.checkboxLabelDisabled, .faIconProcessButton:disabled, .ProcessButton:disabled:hover, .select2-container--disabled .select2-selection,
.select2-container--default.select2-container--disabled .select2-selection--single
[disabled="disabled"],  *:disabled
.textFieldReadOnly, .faIconProcessButton:disabled, .ProcessButton:disabled:hover, .inquiryElementInactive td, .inquiryElementInactive td * ,
.EcadiaFrameUserOnline tr.inactive td, .EcadiaFrameUserOnline tr.loggedIn td, .CheckboxCoreEcadiaDisable, #main-menu li a.menueItemDisable
{
	cursor: not-allowed !important;
}

.ProcessButton:disabled,
.ProcessButton:disabled:hover {
	background-color: var(--disabled-background);
	cursor: not-allowed;
}

/* damit die Listen nicht so wuchtig daherkommen */
.HTMLTableHeader {
	background-color: var(--hover-color) !important;
}

/* bei Verwendung der Messagebox für dei Fehlermeldungen ist das so schöner */
.errorText {
	padding-top: 5px;
	min-height: 50px; /* 29.07.19, RS: Umstellung da einzeilige Texte nicht gut dargestellt wurden */
	/* max-height: 300px;  */
	overflow: auto;
	width: auto;
	border: none;
}

.errorText p {
	padding: 0;
	margin: 0;
}


.errorText li {
	text-align: left;
	color: var(--text-color);
	font-size: 1.2em;
	font-weight: normal;
}

/* ************************************************************************************************** */
/* Liste der angemeldeten User */
/* ************************************************************************************************** */
.EcadiaFrameUserOnline {
	border-collapse: collapse;
	width: 100%;
}

.EcadiaFrameUserOnline td {
	border-bottom: 1px solid var(--border-color);
	padding-top: 4px;
	padding-bottom: 4px;
}

.EcadiaFrameUserOnline tr.inactive td, .EcadiaFrameUserOnline tr.loggedIn td  {
	background-color: var(--background-color);
	color: var(--text-color);
}


/* *************************************************************************************************** */
/* jQuery dataTable    Ziel: änhliches Aussehen wie die HTMLTable                                        */
/* *************************************************************************************************** */

/* Schatten der Tabellenzeilen*/
/*ungerade Zeile*/
table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>* {
	    box-shadow: inset 0 0 0 9999px 
color-mix(in srgb, var(--text-color) 7%, transparent);
}
/*ausgeählte Spalte, ungerade Zeile*/
table.dataTable.display>tbody>tr.odd>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1 {
	box-shadow: inset 0 0 0 9999px 
color-mix(in srgb, var(--text-color) 12%, transparent);
}
/*ausgeählte Spalte, gerade Zeile*/
table.dataTable.display>tbody>tr.even>.sorting_1, table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1 {
    box-shadow: inset 0 0 0 9999px 
color-mix(in srgb, var(--text-color) 2%, transparent);
}
/*hover*/
table.dataTable.hover>tbody>tr:hover>*, table.dataTable.display>tbody>tr:hover>* {
   box-shadow: inset 0 0 0 9999px 
color-mix(in srgb, var(--hover-color) 60%, transparent);
} 


table.dataTable thead th{
	background-color: var(--hover-color)!important;
	color: var(--text-color) !important;
}
table.dataTable tbody tr>.dtfc-fixed-left, table.dataTable tbody tr>.dtfc-fixed-right{
	background-color: var(--background-color) !important ;
	color: var(--text-color) !important;
}

table.dataTable th.alignRight,
table.dataTable td.alignRight {
  text-align: right !important;
}

table.dataTable th.alignCenter,
table.dataTable td.alignCenter {
  text-align: center !important;
}

table.dataTable th {
	border-right: 1px solid var(--border-color) !important;
}

.dataTables_filter {
	padding-bottom: 4px;
	margin-right: 0;
}

.dataTables_filter input[type=search] {
	width: 100px;
}
.dataTableArea {
	margin-left: 2px;
}

table.dataTable {
	margin: 0;
}

table.dataTable td {
	overflow: hidden;
    text-overflow: ellipsis;
}

/* Hotelliste bei den Trainern einer Veranstaltung ist zu weit eingerückt, daher machen wir hier ein leicht anderes Layout wie sonst*/
table.dataTable#ETabDlgEventTrainerMain td ul, table.dataTable#ETabDlgEventTrainerDefaultArea td ul, table.dataTable#ETabDlgEventTrainerRequestArea td ul {
	margin-left: 8px;
	padding: 2px;
	list-style-type: square;
}

.tableRow1Selected td, .tableRow2Selected td,
table.dataTable.display tbody tr.tableRow1Selected > td.sorting_1,
table.dataTable.display tbody tr.tableRow2Selected > td.sorting_1 {
	background-color: var(--hover-color) !important;
	/* color: #003366 !important; */
}

.dataTables_scroll {
	table-layout:fixed;
}

.dataTableActionIconButton {
	margin-right: 6px;
}

/* inaktive Objekte in der List: durchstreichen */
tr.InactiveRowSubject  td, tr.inactive td {
	text-decoration: line-through;
}

/* inaktive Objekte in der Liste durchstreichen */
td.notattended {
	text-decoration: line-through;
}

/* harter Fehlerhinweis der Objekte in der Liste: rot */
tr.error td, .error {
	background-color: var(--error-color) !important;
	/* important ist wichtig weil ansonsten beim hover ein grauer Hintergrund genommen wird */
	color: white;
}

td.warningLeft, .warningLeft {
  position: relative;
  padding-left: 25px; 
}
td.warningLeft::before, .warningLeft::before {
  content: "\f071";
  font-family: "Font Awesome 7 Pro";
  font-weight: 400; 
  color: var(--faIcon-color);
  position: absolute;
  font-size: 12pt;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}


/* weicher Hinweis der Objekte in der Liste: leichtes Gelb */
tr.attention td, .attention {
	background-color: lightyellow;
	color: var();
}

/* grüne Schrift z.B. in der HTMLTable2 */
tr.greenFont  td {
	color: var(--success-color);
}

/* grüne Schrift z.B. in der HTMLTable2 */
tr.important  td {
	font-weight: bold;
}

tr.hideInactiveRowSubject {
	display: none !important;
}

/* diesen Style kann man setzen, damit es durchgestrichen wird */
tr.lineThroughRowSubject  td {
	text-decoration: line-through;
}


.dataTableArea a, .CellGridPanel a {
	/* damit die Style-Angabe des td auch für Links wirksam wird */
	color: inherit !important;
}

/* Objekte, auf die kein Schreibrecht besteht: blau */
tr.WriteProtectedRowSubject  td,
span.WriteProtectedRowSubject /* wird im Tree genutzt */ {
	color: blue;
}

.fancytree-active span.WriteProtectedRowSubject {
	color: white;
}

.dataTables_filter input[type=search] {
	/* 	yka - fuer faIcons, vgl htmltable2.js */
	background-image: url('gif/filter.gif');
	background-repeat: no-repeat;
	background-position: 1px 3px;
	background-color: var(--input-background-color);
	padding-left: 17px !important;
}
.dataTables_filter input[type=search] {
	--color: blue;
}

/* ein bei der Tabelleninitialisierung voreingestellter Filter -  damit der User das erkennen kann */
.dataTables_filter input[type=search].userFilterInitialized {
	background-color: lightyellow !important;
}


/* das "Anfügen" oder "Reduzieren" */
.SelectAppendRowsArea {
	float:right;
	margin-right:10px;
	/* LHO 31.05.2021: Das funktioniert mit margin-top nicht mehr, dan lassen sich die Checkboxen nicht anklicken, weol ein Div über die Checkboxen lappt und klickt verhindert */
	margin-top: 0px;
}

.CheckShowInactiveArea {
	float:right;
	padding-top: 2px; 
}

/* Fußzeile ----------------------------------------------------------------------------------------- */
table.dataTable tfoot {
	padding-top: 10px;
}

table.dataTable tfoot td {
	
	border-top: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	
	color: var(--text-color);
}

table.dataTable tfoot tr.HTMLTable2SingleSumFooter {
	padding-top: 10px;
}

table.dataTable tfoot tr.HTMLTable2SingleSumFooter td {
	background-color: var(--hover-color);
	font-weight: bold;
}


/* unten noch eine Linie */
table.dataTable tfoot tr:last-child td {
	border-bottom: 1px solid var(--border-color);
}

/* und ganz links eine Linie */
table.dataTable tfoot td:first-child {
	border-left: 1px solid var(--border-color);
}

table.dataTable tfoot tr.odd td {
	background-color: #f9f9f9;
}

/* kleiner Abstand zwischen Body und Fußzeile, siehe https://stackoverflow.com/questions/9258754/spacing-between-thead-and-tbody */
table.dataTable tfoot:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}

/* informatorische Texte von Tabellen z.B.Anzahl Einträge */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, 
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, 
.dataTables_wrapper .dataTables_paginate {
	color: var(--text-color);
}


/* *************************************************************************************************** */
/* Ende jQuery dataTable                                                                               */
/* *************************************************************************************************** */


/* jQuery-Widget popupButtonArea ------------------------------------------------------------------------------------------------------ */
/* Popup-Button-Bereich, der nach unten hin aufklappen */
.ViewPanel .popupButton {
	background: url('gif/arrowdown.gif') var(--background-color) no-repeat;
}


.popupButtonArea {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	box-shadow: 2px 2px 2px #aaaaaa;
	z-index: 80; /* damit wir über ales drüberlappen, aber nicht die Messagebox */
	display:none;
	padding: 4px;
	position: absolute;
	z-index: 80; /* damit wir über ales drüberlappen, aber nicht die Messagebox */

}

.popupButtonArea ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.popupButton {
	background: url('gif/arrowdown.gif') var(--background-color) no-repeat;
	background-position: right 0px top 0px !important;
	padding-right: 18px;
	margin-right: 3px;
	height: 28px;
}

.popupButtonArea button.buttonIconText {
	width: 100%;
	margin-top: 4px;
}


.popupButtonArea ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

/* jQuery-Widget popupButtonArea Ende -------------------------------------------------------------------------------------------------- */

.ActionPanel .WidgetSettingsButton {
	margin-left: -4px !important;
}

.WidgetInfoButton, .WidgetSettingsButton, .HTMLTable2WidgetSettingsButton {
	padding: 0px 2px 2px 2px !important;
	width: 12px !important;
	height: 12px !important;
	margin-left: 0 !important;
	margin-right: 10px !important;
	margin-left: 1px !important;
	border: 1px solid var(--border-color);
}



.WidgetInfoButton img, .WidgetSettingsButton img, .HTMLTable2WidgetSettingsButton img {
	vertical-align: top !important;
}

/* Bilder drehen (indexMobile.jsp werden alle src="action..." gedreht, wenn Orientierungseinstellungen im Bild sind --------------------- */
/* nur für IE und Safari ... */
.rotate-90 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -o-transform: rotate(-90.0deg);
}
.rotate-180 {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -o-transform: rotate(180.0deg);
}

/* KIndbuchungen im */
/* .ChildEnroll td {
	border: 1px solid var(--border-color);
	background-color: LightCyan;
}  sieht mit den neuen Themes nicht gut aus */

/* Eingebettete Tabelle der APs in der Teilnehmerliste */
.TabPanelEventEnrollAccountItemTable, .TabPanelEventEnrollAccountItemTable td {
	background-color: transparent !important;
	border: 0 !important;
}

.TabPanelEventEnrollAccountItemTable td::nth-child(1) {
	text-align: left !important;
}

.TabPanelEventEnrollAccountItemTable td::nth-child(2){
	text-align: right !important;
	min-width: 100px;
}

/* ecadia Profile ---------------------------------------------------------------------------------------------------- */
button.buttonProfiler {
	font-size: 6pt !important;
}

.packageNameProfiler {
	font-size: 6pt;
}

/* Tabellenvorschau bei Import aus Excel Tabellen --------------------------------------------------------------------- */
table #EcadiaDynamicImport tbody tr .ImportTableUpdatedCell {
	background-color: #ffdf00 !important;
}
table #EcadiaDynamicImport tbody tr .ImportTableUpdatedRow {
	background-color: #ffff99 !important;
}
table #EcadiaDynamicImport tbody tr .ImportTableNewCell {
	background-color: var(--success-color) !important;
}
table #EcadiaDynamicImport tbody tr .ImportTableErrorRow {
	background-color: var(--error-color) !important;
}


.ImportPreviewSelections {
	margin: 2px 10px 2px 10px;
	padding: 4px 10px 4px 10px;
	font-size: 14pt;
	border: 1px solid var(--border-color);
	border-radius: 4px;
}

#ImportPreviewSelectionsArea {
	margin-bottom: 10px;
}

.AccountItemExpenditure {
	color: var(--error-color);
}


.DataExportMailingInfo td {
	border: none !important;
	background: transparent !important;
}

.DataExportMailingInfo, .DataExportMailingInfo tr {
	border: none !important;
	background: transparent !important;
}
/* fullcalendar --------------------------------------------------------------------------------------------------------------- */
/* damit man das hover etwas sieht, die normale Textfarbe ist schwarz */
.fc-event .fc-content:hover {
	color: #555555 !important;
}

/* der Titel im Kalender - das ist ansonsten weiß und bei hellem Hintergrund zu schlecht lesbar */
.fc-event .fc-content {
	color: black;
}

/* Verhindert das der Calender in der Wochenansicht nach unten zu grpß wird (dann wird nur eine leere weiße Fläche angezeigt #429 */
.fc-scroller{
	height: auto !important;
}

#calendarEvents .fc-daygrid-event {
	white-space: normal !important; /* damit im Fullcalender (Veranstaltungskalender) die langen Veranstaltungstitel mit Umbruch ausgeschrieben werden */
}

/* Stundenplan */
.EventTimeTableDuration {
	float: right;
	margin-right: 20px; /* der Abstand zur Checkbox */
}

.EventTimeTableContent p {
	margin: 0;
	padding: 0;
}

/* sonst werden Aufzählungen so üppig */
.EventTimeTableContent ul, .EventTimeTableObjectives ul {
	margin: 0 0 0 14px;
	padding: 0;
	
}

.EventTimeTableHours {
	margin: 0;
	padding: 0;
	font-size: 0.8em;
}


/* fullcalendar --------------------------------------------------------------------------------------------------------------- */

/* Zusammengefasst die css für die fullcalendar (Raumübersicht, Trainingplanner, Belegungsanzeige (CalendarPartnerView) ---------------------------- */
.fc-event a {
	font-weight: bold;
}

button#resourcePaste, button#userConfigDelete, button#userConfigSave, button#userConfigAdd {
	width: 22px; 
	height:22px; 
	background-position: 2px 2px;
	padding:1px;
	border: 1px outset var(--border-color);
	margin-top: 2px;
}


.fc td.fc-resourceName, .fc th.fc-resourceName {
	padding: 2px;
	border-bottom: 2px solid var(--border-color);
	border-top: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	background-color: var(--hover-color);
	vertical-align: top;
	width: 200px;
}

.fc td.fc-resourceName .dragAndDropFAIconArea .dragObjectContainer {
	width: 1.2em;					/* Breite fpr das Icon */
    display: inline-block;
    float: left;				/* Icon in einer Linie mit dem Ressourcennamen */
    margin-right: .5em;
}

.fc td.fc-resourceName .dragAndDropFAIconArea .dragObjectContainer i.faIcon  {
	font-size: 10pt;
}

.fc td.fc-weekend-column, .weekend, .weekend td {
	background-color: #e6edf7; /* das Blau aus Outlook */
}

/* leider gibt es für die Wochentage keine bessere Selektion */
.fc td {
	background-color: var(--background-color); /* weißer Hintergrund für den Kalender - wie Outlook */
}

/* die Zeile mit der Monatsüberschrift und den View-Buttons */
.fc-header td {
	background-color: var(--hover-color);
}

.headerWeekCell {
	text-align: center;
}

.fc-headerCellDay {
	text-align: center;
}

.fc-holiday {
	background-color: #bbbbdd;
}

#loading {
	position: absolute;
	top: 5px;
	right: 5px;
}

/*grift das überhaupt irgendwann? wird dadurch überschrieben .fc th.fc-resourceName */
.fc-border-separate th {
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

.resourceCalendarRoomEquipment {
	padding: 2px 0 0 36px;
	margin: 0;
}

.resourceCalendarRoomEquipment li {
	list-style-type: square;
}


/* die Zeile mit den Monat/Woche/Tag-Buttons */
.fc-header td {
	background-color: var(--hover-color);
}


.fc-widget-header, .fc-widget-content {

	border-bottom: 2px solid var(--border-color);
	border-top: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);

}


.fc-state-default {
	text-shadow: none;
	box-shadow: none;

	}
.fc .fc-button {
	padding: 0 10px !important;
	color: var(--text-color) !important;
	background: var(--input-background-color) !important;
	border-color: var(--border-color) !important; 
}

.fc .fc-button:hover {
	background: var(--hover-color) !important;
	border-color: var(--border-color) !important;
}

.standardTrainerForProduct {
	padding-left: 18px;
	background-color: #B0E022;
}
.standardRoomForProduct {
	padding-left: 18px;
	background-color: #AFEEEE;
}
.standardEquipmentForProduct {
	padding-left: 18px;
	background-color: #eFEE5E;
}

.fc-event-title img {
	vertical-align: bottom;
}

/* der eigentliche Kalendereintrag */
.fc-event-title {
	position: relative;		/* damit die Icons absolut positioniert werden können */
}


/* Linien zur Wochenbegrenzung in der Mehrwochensicht */
.fc-border-separate th {
	border-right: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
}

/* die tr bekommen die Klasse .rowDragOverInternal beim Drag gesetzt; siehe fullcalendar.js renderCellOverlay */
.rowDragOverInternal td {
	background: var(--hover-color) !important;
}


.RequestForResourceTrainer {
	border: 1px dashed blue;
	background-color: #efefef !important;
}

.ResourceCalendarResourceIsReadOnly td {
	background-color: var(--disabled-background);
}

/* Ende - Zusammengefasst die css für die fullcalendar (Raumübersicht, Trainingplanner, Belegungsanzeige (CalendarPartnerView) ---------------------------- */


/** ui-Collapsibles, Rest in index.jsp*/
.ui-accordion .ui-accordion-header {
	background: var(--background-color);
	color: var(--text-color);
	}

/* Select2 Sachen ----------------------------------------------------------------------------------------------------------------------------------------- */
.select2-container-multi .select2-choices {
	border-radius: 3px; /* damit die Multi-Selctions gleich aussehen wie die Inputs und die Single-Selections */
}
/* Farben des Selects2 überschreiben*/
.select2-container .selection .select2-selection {
    background-color: var(--input-background-color);
    color: var(--text-color);
    border-color: var(--border-color);
}
.select2.select2-container--disabled .select2-selection{
	 background-color: var(--input-background-color) !important; /* wird ansonsten von jquery überschrieben*/
    color: var(--text-color);
    border-color: var(--border-color);
}
.select2-container .selection input::placeholder, .select2-container .selection .select2-selection .select2-selection__placeholder {
	color: var(--text-color);
}
/* hover */
.select2-container .select2-results .select2-results__option--highlighted[aria-selected] {
	background-color: var(--hover-color);
	color: var(--text-color);
}

/* border bei multipleSelections */
.select2-container.select2-container--focus .selection .select2-selection--multiple {
	border-color: var(--border-color);
}

.select2-container .selection .select2-selection--multiple .select2-selection__choice {
    background-color: var(--input-background-color);
    border: 1px solid var(--border-color);
}

.select2-container .select2-choice, .select2-result-label {
    font-size: 1.2em;
}

/* Multiple Select für select2 anpassen */
.multipleSelectionSelectAll {
	font-size: 9pt;
}


.select2-container--default .selection .select2-selection--single .select2-selection__rendered{
	color: var(--text-color);
}
/*pfeil des Selects*/
.select2-container--default .selection .select2-selection--single .select2-selection__arrow b {
	border-color: var(--faIcon-color) transparent transparent transparent;
}
/* Pfeil 2*/
.select2-container--default.select2-container--open .selection .select2-selection--single .select2-selection__arrow b {
	border-color:  transparent transparent var(--faIcon-color) transparent;
}
.select2-results__options{
	color: var(--text-color);
	background-color: var(--input-background-color);
}

.select2-container--default .selection .select2-results__option--highlighted[aria-selected] {
	background-color: var(--hover-color);
    color: var(--text-color);
}

/* Kreuz, um Selection zu leeren*/
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    font-weight: normal  !important;
    font-size:12pt  !important;
    margin-right: 0px !important;
    border: 1px solid var(--border-color);
	border-radius: 2px;
	padding: 2px !important;
	margin-top: 3px !important;
	color: var(--text-color); /* Dunkelrot */
}

/* hover für den "alle entfernen"-Button im Multiselect */
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
	background-color: var(--hover-color);
}

/* das Multipe Select2 innerhalb soll genauso groß sein, wie der umschließende div */
.comboboxWidgetMultiple .select2-container {
	width: 100%;
}

/* EcadiaExplorerAjax */
/* Nicht-Original-Verknüpfungen optisch anzeigen */
/*she 11.5.26, entfernt, da es im den neuen Themes nicht lesbar ist*/
.productExplorerTrainingProductLinkItem {
	/* color: #666666; */
}

/* die Explorer-Kachel im Startbildschrim */
#ExplorerTreeOuterDiv {
	max-height:400px; /* RS, 10.09.2022: nicht so hoch damit der Kalender darunter nicht aus dem sichtbaren Bereichverschoben wird */
	overflow:auto;
}




/* TabControl-Sachen --------------------------------------------------------------------------------------------------------------------------------------- */


.tabControlItemLink {
	padding: 8px 6px 4px 4px;
	margin: 0;
	
	display: inline-block;
	width: 100%;
	
	border-radius: 6px;
	
    position: relative;		/* damit die eingebettete Count absolut positioniert werden kann */
}
#mainTabCtrlTab{
	color: var(--text-color);
	background-color: var(--background-color);
	/* border-right: 1px solid var(--border-color); */
}


#mainTabCtrlUL {
	list-style-type: none;
/* 	background: #fcfdfe; */
	padding: 0;
	margin-right: 10px; /* kleiner Abstand zwischen den Tabs und dem Content */
	overflow-y: auto;
	overflow-x: hidden;
}
/* muss überschrieben werden, da sonst die Standards von a greifen*/
.tabControlItemLink {
	color: var(--text-color);
	background-color: var(--background-color);
}

.tabControlItemLink:hover, li.TabActive .tabControlItemLink {
	background-color: var(--hover-color);	/*inzwischen eigene Farbe*/	/* gleich wie im Menü oben */
	cursor: pointer;
	color: var(--text-color);
}



/* der Link, der ja auch das Icon enthält - das Icon wird hart als style gesetzt */
.tabControlItemLink > span {

	max-width: 150px;
	overflow: hidden;
}

/* die Zahlen-Anzeige rechts am Tab */
.tabControlItemLink > span.tabControlItemCountInfo {
    position: absolute;
    right: 14px;
    padding: 3px;
    top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-size: 10px;
}

/* die "große" Struktur: links das Tab-Menü und rechts der Inhalt */
#mainTabCtrl {
	display: grid;
	grid-template-columns: max-content auto; 	/* die Tabs links so groß wie nötig, der Inhalt rechts bekommt den Rest */
	
	width: 100%;
}

/*default jqueryStyle überschreiben */ 
 .ui-state-active{
	background-color: var(--header-background) !important;
	color: var(--text-color) !important;
}
.ui-state-active a{
	color: var(--text-color) !important;
}
#mainTabCtrl .ui-state-default, #mainTabCtrl .ui-widget-content .ui-state-default,#mainTabCtrl .ui-widget-header .ui-state-default, #mainTabCtrl .ui-button, html #mainTabCtrl .ui-button.ui-state-disabled:hover, html #mainTabCtrl .ui-button.ui-state-disabled:active  {
	background-color: var(--tabCtrl-Background-color);
	border: 1px solid var(--border-color);
}
#mainTabCtrl .ui-button:hover{
	background-color: var(--hover-color);
}

.ui-widget.ui-widget-content {
	box-sizing: border-box;
	
}
.ui-widget-content a {
	color: var(--text-color);	
}


#mainTabCtrlContent {
	overflow: auto; 	/* die Höhe wird im JS auf Seitenhöhe gesetzt */
	background-color: var(--background-color);
	color: var(--text-color);
	border-left: 1px solid var(--border-color);
	padding: 20px;
}

#mainTabCtrl .faFilterInputWrapper {
	position: relative;
	display: inline-block;
} 

#mainTabCtrl .faFilterInputWrapper i {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--faIcon-color);
	font-size: 10px;
	pointer-events: none;
}
#mainTabCtrl .faFilterInput {
	font-size: 11px;
	border: 1px solid var(--border-color);
	color: var(--text-color);
	width: 70px;
	height: 18px;
	background-color: var(--background-color);
	padding: 0 0 0 16px !important;
}
input::placeholder{
	color: var(--text-color);
}

/* die Box über den Tabs um das Filterfeld und die Reihenfolgebuttons */ 
#tabControlFunctions {
	padding: 10px 5px 5px 5px;
}

.dataTables_wrapper .dataTables_filter input {
	border: 1px solid var(--border-color);
	color: var(--text-color);
}
.filterInput {
	background-image: url('gif/search12.png');
	background-position: 1px 3px;
	background-repeat: no-repeat;
	font-size: 11px;
	border: 1px solid var(--border-color);
	color: var(--text-color);
	width: 70px;
	height: 18px;
	padding: 0 0 0 16px !important;
}

.ui-icon-ab { 
	background-image:url('gif/sort_AB.png') !important; 
}

.ui-icon-12 { 
	background-image:url('gif/sort_12.png') !important; 
}
.ui-icon-rotate {
	background-image:url('gif/transform_rotate_90.png') !important; 
}

#currentTabDlgNameDebugInfo {
	float: right;
	position: absolute;
	right: 300px;
	color: var(--background-DropAreas);
	font-size: 8px;
}

/* Ende TabControl-Sachen ---------------------------------------------------------------------------------------------------------------------------------- */



/* Radiobutton in Mobile-Optik * --------------------------------------------------------------------------------------------------------------------------- */
.SelectionRadioInline, .SelectionRadio, .SelectionCheckbox, .SelectionCheckboxInline {
	border: 1px solid var(--border-color);
	background-color: var(--input-background-color);
	color: var(--text-color);
	border-radius: 4px;
	cursor: pointer!important;
	vertical-align: top; /* RS, 21.07.2022: in hohen Zellen oben anordnen */
}

/* z:B. Person=> Allgemein Cahckbox Standort*/
.CheckboxCoreEcadiaDisable {
	border: 1px solid var(--border-color);
	background-color: var(--background-color);	
}
/* der Label in der Checkbox */
label.checkboxLabelDisabled {
	color: var(--text-color);
	/* color: #888888; */	/* ein Kompromis: man sieht dass der text gegraut ist, kann ihn aber noch gut lesen */
}

.SelectionRadioInline > * , .SelectionRadio > *, .SelectionCheckbox > *:not(.checkboxLabelDisabled), .SelectionCheckboxInline > *:not(.checkboxLabelDisabled){
	cursor: pointer!important;
}


.SelectionRadioInline, .SelectionRadio {
    padding: 6px 10px 5px 4px; /* so sind Radios optisch gleich groß wie Checkboxen */
    margin: 0;
    vertical-align: top; /* damit das mit der Checkbox gleich auf ist */
}

.SelectionCheckbox, .SelectionCheckboxInline {
	padding: 2px 6px 0px 4px;
}


/* z.B. im Explorer brauchen wir eine kompakte Darstellung */
.SelectionCheckboxCompact {
	padding: 2px 4px 1px 4px;
}


/* Inline */
.SelectionRadioInline, .SelectionCheckboxInline  {
	display: inline-block;
	white-space: nowrap;	/* kein Umbruch zwischen dem Button und dem Label */
}

/* Radiobutton in Mobile-Optik ganze Zeile */
.SelectionRadio, .SelectionCheckbox {
	display: block;
	margin: 10px 0 10px 0;
}

.SelectionRadioInline label, .SelectionRadio label, .SelectionCheckbox label, .SelectionCheckboxInline label {
	margin-left: 4px;
}

.SelectionRadioInline label span, .SelectionRadio label span {
	margin-top: 5px;
	display: inline-block;
}

.SelectionCheckbox label, .SelectionCheckboxInline label {
	padding-top: 4px;
	display: inline-block;
}

.SelectionRadioInline input, .SelectionRadio input, .SelectionCheckbox input, .SelectionCheckboxInline input {
	vertical-align: top !important;
}

.SelectionRadioInline:hover, .SelectionRadio:hover, .SelectionCheckbox:hover, .SelectionCheckboxInline:hover:not(.CheckboxCoreEcadiaDisable){
	background-color: var(--hover-color);
}


/* jqm-calender * --------------------------------------------------------------------------------------------------------------------------- */
/* Button up */





/* -- Der Kalender - Ende --------------------------------------------------------------------------------------------- */


/* ToDo-Eintrag --------------------- */
.ToDoEntryActionButton {

	padding: 6px 10px 0 10px;
	height: 40px;
	width: 90%;
	font-size: 16pt !important;
	margin-bottom: 10px;
}

.ToDoEntryActionButton img {
	margin-top: -4px;
	margin-right: 10px;
}

#ETabDlgEventMarksEnrollsArea input[readonly] {
	border: none;
}

#ETabDlgEventMarksEnrollsArea .alignRight a {
	font-family: courier;
}

.readOnlyRichEdit {

	background: var(--background-color);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	min-height: 140px;
	padding: 4px;
	width: 95%; /* gleich groß wie das HugeRTE */
}

/* wird wahrscheinlich nicht mehr verwendet*/
.trainerConditionsMissingApproval {
	background: #ffeedd;
}

#HotelBookingGeneralRoomLabel a {
	font-size: 14pt;
}

.HotelBookingCellAmoutFree {
	background: none;
	border: none;
}

/* mit dieser Klasse kommen die Raster (hier background-events) */
.timeGrid  {
	border: dashed 1px var(--success-color) !important;
	background-color: white !important;
	color: var(--text-color-for-Ligth-background);
}


/* Fortschrittsbalken z. B., bei der Budget-Anzeige -------------------------------------------------------------------------------------------------------- */
/* Übernahme aus ecadiaMobile.css / Formatierung für Reporting */
div.barChartPercent {
	width: 100%;
	background-color: #c0eadc;
	height: 24px;
	text-align: left;
	border: 1px solid var(--border-color);
	border-radius:5px;
	overflow: hidden;
}

div.barChartPercent div:nth-child(1) {
	float:left;
	padding: 7px 1px 1px 10px;
	color: var(--text-color-for-Ligth-background);
}

/* das ist der von links kommende %-Balken */
div.barChartPercent div:nth-child(2) {
	margin-right:  1px;
	background-color: #7dc6ae;
	border-right: 2px solid #eeeeee; /* Trennbalken zwischen den Bereichen */
	height:100%;
}

/* 100% Auslastung ist rot */
div.barChartPercent.ParticipantsInEvent > .barChartPercent_100 {
	background-color: var(--error-color);	
}

/* ab 75% wirds gelb */
div.barChartPercent.ParticipantsInEvent > .barChartPercent_75 {
	background-color: var(--warn-color);	
}

/* drunter ists grün */
div.barChartPercent.ParticipantsInEvent > .barChartPercent_0 {
	background-color: var(--success-color);	
}


/* Prozent-Balken default */
div.gray 			{ background-color: var(--background-DropAreas); height:19px; text-align:left; margin: auto; display: inline-block;}
div.Progressbar		{ height:15px; text-align:left; padding-top: 2px; border: 1px solid var(--border-color); color: var(--text-color-for-Ligth-background) }
div.Progressbar_25	{ background-color: var(--error-color); }
div.Progressbar_50	{ background-color: var(--error-color); }
div.Progressbar_100 { background-color: var(--success-color); text-align:center; }
div.Progressbar_75 	{ background-color: var(--warn-color); }

/* Prozent-Balken der die verfügbaren Plätze anzeigt */
.freePlaces div.Progressbar_75	{ background-color:var(--success-color); }
.freePlaces div.Progressbar_95 	{ background-color:var(--success-color); }
.freePlaces div.Progressbar_100 { background-color: var(--error-color); }
.freePlaces div.gray 			{ background-color:var(--background-DropAreas); }


/* Prozent-Balken WBT-Fortschritt */
.wbtProgressbar div.Progressbar_25	{ background-color: var(--error-color); }
.wbtProgressbar div.Progressbar_50	{ background-color: var(--error-color); }
.wbtProgressbar div.Progressbar_75 	{ background-color: var(--success-color); }
.wbtProgressbar div.Progressbar_100 { background-color:var(--success-color); }
.wbtProgressbar div.gray 			{ background-color:var(--background-DropAreas); }



/* Prozent-Balken z.B. im DataProviderHotel - immer die gleiche Farbe */
.blueStyle div.Progressbar_25	{ background-color: #6F9FD8; color: white; font-weight: bold;}
.blueStyle div.Progressbar_50	{ background-color: #6F9FD8; color: white; font-weight: bold; }
.blueStyle div.Progressbar_100 	{ background-color: #6F9FD8; color: white; font-weight: bold; }
.blueStyle div.Progressbar_75 	{ background-color: #6F9FD8; color: white; font-weight: bold; }

.PointsDegreeFailed > div.Progressbar_100 { background-color: var(--error-color); color: white; }

/* Formatierung für Reporting: das gestufte Balkendiagramm, horizontal */
div.stackedBarChart {
	height: 32px;
	border: 1px solid #555555;
	border-radius:5px;
	overflow: hidden;
}

span.formatStackedBarChartValueClass {
	display: inline-block;
	text-align: center;
	width: 100%;
	padding-top: 4px;
}

div.stackedBarChart div {
	float:left;
	color: black;
	height: 32px;

}


div.stackedBarChart div:nth-child(1), .stackedBarChart1 {
	background-color: Turquoise ;
}

div.stackedBarChart div:nth-child(2), .stackedBarChart2 {
	background-color: lightyellow ;
}

div.stackedBarChart div:nth-child(3), .stackedBarChart3 {
	background-color: SkyBlue;
}

div.stackedBarChart div:nth-child(4), .stackedBarChart4 {
	background-color: LightCoral;
}

div.stackedBarChart div:nth-child(5), .stackedBarChart5 {
	background-color: PaleGoldenRod;
}

/* KPI der Umfragen */
div.inquiryKPI>div.Progressbar_25 {
	background-color: var(--error-color);
}

div.inquiryKPI>div.Progressbar_50 {
	background-color: orange;
}

div.inquiryKPI>div.Progressbar_75 {
	background-color: var(--warn-color);
}

div.inquiryKPI>div.Progressbar_100 {
	background-color: var(--success-color);
	color: white;
}

.HighlightExpringCompetence {
	color: var(--error-color);
}

/* TabPanelEventEnroll */
.ImplicitEnroll {
	color: #667788;
}

/* Ressourcenkalender -------------------------------------------------------------------------------------------------- */
#trashDropArea {
	border: 1px dotted var(--border-color);
	background-color:var(--background-DropAreas);
	width: 170px;
	height: 24px;
	float: right;
	margin-left: 6px;
	margin-right: 6px;
	margin-top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
}
i.faIconTrashDropArea{
	color: var(--faIcon-color);
	font-size: 14px;
}

.dropAreaResource {
	margin-left: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 1px;
	height: 16px;
}


/* needed for modifying fullcalendar.css file */
.fc-view {
	height: 700px;
	position: absolute;
	overflow-y: auto;
}


#ResourceAssignmentDialog td {
	padding: 4px;
}

.fc-event-title img {
	vertical-align: bottom;
}

.resourceEntryCanceled, .resourceEntryEventCanceled {
	text-decoration: line-through;
}

.fc-headerCellDay  {
	vertical-align: middle !important;
}

#ResourceHeaderCell {
	height: 32px;
}

/* das Subjekt das gehighlightet wird */
.CalendarHighlight {
	border: 3px dashed var(--border-color) !important;
}

/* Meldezusätze ähnlich wie im Mobile einfärben ---------------------------------------------------------------------------- */
tr.TaggedValueRequired td {
  background: #FFFBDF;
    color: var(--text-color-for-Ligth-background);
}


.DSGVODeleteInfo {
    padding: 3px 6px 3px 6px;
    display: inline-block;
    background: #f5f6f7;
    color: var(--text-color-for-Ligth-background);
    margin-top: 2px;
    border: 1px solid var(--border-color);
    margin-left: 4px;
}

.DSGVODeleteInfoWarning {
    border: 1px solid var(--error-color);
    color: var(--error-color);
}


table#NewTrainingProductMainTable > tbody > tr > td {
	vertical-align: top;
	text-align: center;
	padding: 10px;
	width: 620px;
}

/* die Überschriften über den beiden Bereichen */
table#NewTrainingProductMainTable > tbody > tr> td > h1,
table#NewTrainingProductMainTable > tbody > tr> td > h2 {
	margin-top: 0;
	margin-bottom: 6px;
	width: 100%;
	text-align: center;
}

table#NewTrainingProductMainTable > tbody > tr> td > h1 {

	/* damit zwischen den Überschriften nicht so viel Abstand ist */
	margin-bottom: 0;
}


table#NewTrainingProductMainTable .trainingProduct_Type {
	padding: 10px;
	position: relative;

	width: 600px;
	border: 1px solid var(--border-color);
	margin: 10px;
}

/* schwachen hover-Effekt */
table#NewTrainingProductMainTable .trainingProduct_Type:hover {
	background-color: var(--hover-color);
}


/* der Button zum Anlegen des Produkts rechtsbündig */
table#NewTrainingProductMainTable .trainingProduct_Type button.buttonNewTrainingProduct
	{
	text-align: left;
	background-image: url('gif/add.png');
	background-repeat: no-repeat;
	background-position: 4px 4px;
	width: 150px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding-left: 30px;
	white-space: nowrap;
}

table#NewTrainingProductMainTable .trainingProduct_Type h1,
	.trainingProduct_Type h2 {
	font-size: 16px;
}

table#NewTrainingProductMainTable .trainingProduct_Type button {
	padding: 5px;
}

table#NewTrainingProductMainTable .trainingProduct_Type table td {
	vertical-align: top;
}

table#NewTrainingProductMainTable .trainingProduct_Type ul li {
	text-align: left;
	font-size: 16px;
	margin: 0;
	background: url(gif/bullet2.gif) no-repeat left 10px;
	padding: 3px 0 3px 14px;
	list-style: none;
}

table#NewTrainingProductMainTable .trainingProduct_Type ul {
	margin: 0 0 0 14px;
	padding: 0;
}
/* Ende neues Produkt anlegen  ------------------------------------------------------------------------ */

/* ToDo Allgemein-Tab, Buttons------------------------------------------------------------------------- */

.toDoStatusInfo{
	width: 77%; 
	 border: 1px solid var(--border-color); 
	 padding: 14px 40px 10px 10px; 
	 border-radius: 3px; 
	 background: var(--background-DropAreas); 
}

.ToDoButton {

	border: 1px solid var(--border-color);
	color: #333333;
	cursor: pointer;
	color:black;
	font-size: 11px;
	text-align: left;
	background-repeat:no-repeat;
	background-position: 2px 2px;
	background-color: #efefef;
	color: var(--text-color-for-Ligth-background);
	height: 18px;
	padding: 4px 4px 0 22px;
	border-radius: 2px;
	display: inline-block;
	white-space: nowrap;

}

.ToDoButton:hover {
	background-color: #fafafa !important;
	border-color: #aaaaaa !important;
	box-shadow: 1px 1px #ccddee;
}

.ToDoButtonIsOpen {
	background-image: url('gif/warning.png');
	background-color: salmon;
	
}
.ToDoButtonIsClosed {
	background-image: url('gif/TopButtons/Apply.png');
	background-color: honeydew;
	color: var(--text-color-for-Ligth-background);
}
.ToDoButtonIsInProgress {

	background-image: url('gif/work16.png');
	background-color: lightyellow;
	color: var(--text-color-for-Ligth-background);

}

.ToDoButtonIsRejected {
	background-image: url('gif/toDoReject.gif');
	background-color: var(--error-color);

}

.ToDoEntryActionButtonClose:not(:hover) {
	background-color: honeydew;
	color: var(--text-color-for-Ligth-background);
	--faIcon-color: var(--text-color-for-Ligth-background);
}

.ToDoEntryActionButtonReject {
	background-color: rgb(234, 153, 153);
}

.ToDoEntryActionButtonInProgress:not(:hover) {
	background-color: lightyellow;
	color: var(--text-color-for-Ligth-background);
	--faIcon-color: var(--text-color-for-Ligth-background);
}
.ToDoEntryActionButtonOpen {
	background-color: salmon;
}

/* Ende ToDo Allgemein-Tab, Buttons------------------------------------------------------------------------- */

/* ETabDlgPartnerAttributeForm ----------------------------------------------------------------------------- */
.ETabDlgPartnerAttributeFormTable {
	border-collapse: collapse;
}

.ETabDlgPartnerAttributeFormTable td {

	padding: 8px 0 8px 0;
	border-bottom: 1px solid var(--border-color);
	vertical-align: top;
}


.highLightInfo {

	font-weight: bold;
	font-size: 14px;
}

/* ein a-Tag das aussieht wie ein Button */
a.buttonStyle, a.button {

	border: 1px solid var(--border-color);
	cursor: pointer;
	color: var(--text-color);
	font-size: 11px;
	text-align: left;
	background-repeat:no-repeat;
	background-position: 2px 2px;
	background-color: var(--input-background-color);
	height: 20px;
	padding: 4px 4px 0 6px;
	border-radius: 4px;
	display: inline-block;
	white-space: nowrap;
}

a.buttonStyle:hover {
	background-color: var(--hover-color);
}

.autorisationOpen td {
	color: var(--error-color);
	font-weight: bold;
/* 	background-color: ; */
	
}

.autorisationFulfilled td {
	color: var(--success-color);
	font-weight: bold;
	background-color: #F0EAD6;
}

.ETabDlgHTMLPDFMailMergeGeneralMailMergeConfigTextArea{
	font-family: monospace!important;
}


/* Menü ----------------------------------------------------------------------------------------------- */


/* Menu-Styles - Sonderfall bei kleinen Bildschirmen, damit das Layout sauber bleibt */
@media ( max-width :1440px) {
	.menueItemText {	
		max-width: 60px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;			
		font-size: 9pt;		
	}

	/* generell bei kleinen Bildschirmen wie z.B. iPad alles etwas kleiner machen */
	
	.sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active{
		font-size: 9pt;		 
	}
	
	#main-menu > li> a {
		padding: 4px;
	}
	
	body, h1, h2, h3, h4, a, p, ul, ol, li, dl, dt, dd, div, table, tr, td, th, address, blockquote, input, select, textarea, code {
		font-size: 9pt;		 
	}

	input[type='text'], input[type='password'], input[type='search'], input[type='number'] {	
		font-size: 9pt;		 
	}
	
	.select2-container {
		font-size: 9pt;		 
	}	
	
	.buttonIconOnly, .buttonText, .buttonIconText {
		font-size: 9pt;		 
	}
	
	#searchTextNavigation {
		width: 40px !important;
	}
}


ul li a.styleGroupEMenu1 {
	border-top: 1px solid #555555 !important;
	margin-top: 6px;
	padding-top: 10px;
}

ul li a.styleGroupEMenu2 {
	font-weight: bold;
}


/* Ende Menü -------------------------------------------------------------------------------------------- */


/* Wenn die Width nicht begrenzt ist wird beim Firefox bei Popups mit textares die Textarea breiter als das Popup gezeichnet */
.inlineModifyObjectDialog textarea{
	width: 100%;
}


.EmbeddedActualAccountItemTable td {
	
	background: transparent;
}

/* fancytree -------------------------------------------------------------------------------------------- */
.fancytree-folder span.fancytree-title {
	font-weight: normal; /* nicht fett */
}
ul.fancytree-container {
    background-color: var(--background-color);
    border: 1px dotted var(--border-color);
    color: var(--text-color);
}
span.fancytree-title{
	color: var(--text-color);
}
span.fancytree-focused span.fancytree-title, .fancytree-active span.fancytree-title {
	background-color: var(--hover-color) !important;
	color: var(--text-color) !important; 
	outline: 1px dotted var(--border-color);
}
	
/*hover, focus auf ein Element*/
span.fancytree-focused span.fancytree-titlem, span.fancytree-title:hover{
	background-color: var(--hover-color);
}
span.fancytree-title:hover {
	color: var(--text-color);
}


/* TranslateHelper.jsp -------------------------------------------------------------------------------------------- */

/* vom Kunden angepasste Texte farblich hervorheben */
.TranslateCustomized {	
	background-color: var(--warn-color);
}

.widgetConfigurationSelect2Fix{
	border-radius: 4px;
	background-color: lightgray;
	border-width: 1px;
}


.ProposalPriceInfoTable {
	border-collapse: collapse;
	width: 100%;
}

.ProposalPriceInfoTable td {
	padding: 2px;
	font-size: 10px;
	border: 1px solid var(--border-color);
}

.ProposalPriceInfoTable td:nth-child(1) {
	width: 120px;
}

.ProposalPriceInfoTable td:nth-child(1) div {
	width: 110px;
	overflow: hidden;
}

.ProposalPriceInfoTable td:nth-child(2) {
	width: 40px;
	text-align: right;
}

/* Explizit die Breite der popupButtonArea setzen --------------------------------------------------- */
#buttonAreaSelectPDFMailmerge {
	width: 400px;
}

#buttonAreaFurtherEnrollActions {
	width: 250px;	
}

#OpenfurtherEventActions {
	width: 300px;	
}


.warningInfo {
	color: var(--textcolor);
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-image: url('gif/warning.png');
	display: inline-block;
	white-space: nowrap;
	padding-left: 20px;
	height: 18px;
}

.warningInfo i.faIconWarningInfo {
	color: var(--faIcon-color);
	background: none;
}

i.warningInfoFA {
	color: var(--faIcon-color);
	font-size: 15px;	
	margin-right: 3px; 
}

/* Tabelle der formal ausgewählten Ausstattungen bzw. Catering -------------------------------------------------------- */
table.EventEquipmentTable {
	width: 100%;
	border: 0 !important;
}

table.EventEquipmentTable td {
	padding: 2px;
	border: 0 !important;
}

.HTMLTable2YourActionLabel {
	padding: 8px 10px 0 0px;
	display: block;
}

.HTMLTable2YourActionLabelShowSelection {
	padding-left: 50px;
	margin-bottom: -2px;
	padding-bottom: 2px;
	background-repeat: no-repeat;
	background-position: 20px 10px;
	background-image: url('gif/arrowHTMLTable2YourActions.png');
}

/* ----------------------------------- Ausdruck ----------------------------------------------------------------------- */
@media print {
	#headerWithMenu, .viewManagerTab, .ViewFrameTable, .ui-dialog /* z.B. die Zwischenablage */ {
		display: none !important;
	}
}
/* ----------------------------------- Ausdruck Ende ------------------------------------------------------------------ */

/* ----------------------------------- ui-tooltip  -------------------------------------------------------------------- */
.ui-tooltip {
	max-width: 500px;
	opacity: 0.8;
	padding: 4px;
	font-size: 16px;
	line-height: 1.3;
}

.ui-tooltip * {
	font-size: 16px;
}

.ui-tooltip ul {
	margin-left: 10px;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* sonst sind die UL anders formatiert als der Text */
.ui-tooltip ul li {
	padding: 0;	
    font-size: 16px;
    line-height: 1.3;
    font-weight: normal;
    color: black;
}
/* ----------------------------------- ui-tooltip Ende ------------------------------------------------------------------ */


/* ----------------------------------- Neuer Objekt-Merge  -------------------------------------------------------------- */
.MergeSource {
    background: url('gif/clear64.png') #ffffff no-repeat right center;
    background-position: left top;
}

.MergeTarget {
    background: url('gif/ok64.png') #ffffff no-repeat right center;
    background-position: left top;
}
/* ----------------------------------- Objekt-Merge Ende ---------------------------------------------------------------- */


.embeddedEquipmentList {
	margin: 0 0 0 4px;
	padding: 0 0 0 6px;
}


.ApplyGuestPartner td {
	font-size: 11px;
	padding-left: 10px;
}	
			
.GuestRegistrationPossibleDublicateList {
	border-collapse: collapse;
	width: 100%;
}

.GuestRegistrationPossibleDublicateList td {
	font-size: 12pt;
	width: 33%;
	border: 1px solid var(--border-color);	
	padding: 6px;
	vertical-align: top;
}
.GuestRegistrationPossibleDublicateList td div {
	font-size: 12pt;
	
}

.GuestRegistrationPossibleDublicateListDiffView td {
	
	width: 33%;
}

/* die Titel der Module in der Modulliste beim Stundenplan */
#EventModulesTimeTable td:nth-child(2) div {
	
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	table-layout: fixed;
}

/* die Trainer der Module in der Modulliste beim Stundenplan */
#EventModulesTimeTable td:nth-child(3) div {
	width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

textarea.trainerProfile, textarea.niceTextArea {

	border: 3px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	font-size: 12pt;
	
	width: 95%;
	
	/* Tabs mit 3 Stellen */
    tab-size: 3em;
	-moz-tab-size: 3;
	-webkit-tab-size: 3; 
    -o-tab-size: 3;
}

/* News-Ticker der Kopfzeile ------------------------------------------------------------------------------------- */

/* Veranstaler-Ticker oben in der Kopfzeile; siehe https://code-boxx.com/html-css-news-ticker-horizontal-vertical  */
#NewsTicker {
	display: none; 					/* wird über JS aktiviert */
	z-index: 1000;
	position: fixed;
	top: 6px;
	left: 320px;
	overflow: hidden; 				/* damit der text nicht am linken rand rausläuft */
	width: 500px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 0;
	margin: 0;
}

.NewsTickerInner {
	position: relative;
}

/*ToDo: Farben anpassen ?*/
.NewsTickerTextWrapper {
	display: inline-block;
	float: left;
	width: 100%;
	background: var(--background-color);
	color: var(--text-color);
	text-align: right;
	padding: 1px 30px 1px 100%; 	/* Push contents to right side of screen */;	
}

.NewsTickerText {
 	padding-right: 100%;
	white-space: nowrap;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: NewsTickerAnimation;
	animation-duration: 14s;
	display: inline-table;
}

/*
 * Jeder News-Eintrag ist so aufgebaut;
 * <div class="NewsTickerTextItem">
 * 		<div class=\"NewsTickerTextItemCategory\">
 *			Kategorie
 *		</div>
 * 		<div class="NewsTickerTextItemTeaser">
 * 			Teaser
 *		</div>
 * 		<div class="NewsTickerTextItemText">
 *			Infotext
 * 		</div>
 * </div>
 */
 
/* das div, das die einzelnen Text-Elemente enthält */
.NewsTickerTextItem {
	display: inline-block;
	padding-top: 2px;
	height: 20px;	
	margin-right: 20px;					/* der Abstand zwischen den Elementen */
}

/* die einzelnen Text-Elemente, die später noch leicht unterschiedliche formatiert werden */
.NewsTickerTextItemTeaser,
.NewsTickerTextItemText,
.NewsTickerTextItemCategory {
	display: inline-block;
	white-space: nowrap;
	height: 20px;						/* brauchen wir hier auch weil sonst das Icon unten abgeschnitten wird */
	margin-right: 20px;					/* der Abstand zwischen den Elementen eines News-Eintrags*/
	padding: 0;
	font-size: 12pt;
}


.NewsTickerTextItemTeaser {
	color: var(--text-color);
}

/* wenn eine Kategorie angegeben wird, dann bekommt die als optischen Aufheller noch ein Info-Symbol vorweg */
.NewsTickerTextItemCategory {
	padding: 0 0 0 20px;
	font-weight: bold;	
	background-repeat:no-repeat;
	background-position: 0px 1px;
	background-image: url('gif/information.png');
}

/* der Schließen-Button, links vor dem Ticker; im <a> steht einfach ein "x" */
.NewsTickerClose {
	display: inline-block;
	position: absolute;
	top: -2px;
	left: 0px;
	height: 20px;					/* ein Kreis mit 20px Durchmesser */
	width: 20px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--background-color);
	border-radius: 50%;				/* ein Kreis */
	border: 2px solid var(--border-color);
	font-size: 10pt;
	color: var(--text-color);
	padding: 3px 0 0 0;				/* das "x" soll mittig sein */
}

@keyframes NewsTickerAnimation {
	0% { transform: translate3d(0, 0, 0); }	
	100% { transform: translate3d(-100%, 0, 0); }
}

.NewsTickerText:hover {
	animation-play-state: paused; /* Pause scroll on mouse hover */
}

/* ETabDlgEcadiaObjectAccessRights -Write und -Read ----------------------------------------------------------------------------------------------- */
table.ETabDlgEcadiaObjectAccessRights_AssignmentTable {
	width: 100%;
	margin: auto;
}

.ETabDlgEcadiaObjectAccessRights_AssignmentTable > tbody > tr > td {
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: top;
	width: 50%;
}


/* Visitenkarte auf TabPanelPartnerGenereal ------------------------------------------------------------------------------------------------------- */
/* Partner =>Vorschau der Adresse, Veranstaltung => Adressvorschau*/
.PartnerBusinessCard, [name="invoiceAdressBlockPreview"] {
	border: 2px solid var(--border-color);
	padding: 4px;
	vertical-align: top;
	background-color: var(--background-color);
	font-family: monospace !important;
	font-size: 12pt !important;
	overflow: hidden;
}

/* ein Integer-Feld, das zur Sortierung genutzt wird */
.OrderField {
	background-image: url(gif/sort_12.png);
	background-repeat: no-repeat;
	background-position: left 2px center;
	
	font-size: 16px;
	font-family: monospace;
	text-align: right;
	width: 50px;
	
}


.CustomerProposalTextBlock td {
	color: var(--success-color);
}

/* optisches Hervorheben von Bildungsproduktinhalten bei den textblöcken zum Angebot */
.TrainingProductProposalTextBlock td {
	color: brown;
}

/* TabPanelToDoGeneral : rechte Tabelle mit den Aktion-Buttons */

table.toDoDataArea  {	
	border-right: 2px solid #777777;
	padding-right: 10px;
}

tr.LocationDayPlanDaySum td {
	font-weight: bold;
	padding-bottom: 8px !important;
	background-color: #e8e7e5;
}

/* in TabPanelEventGeneral kann der Rechnungsteil aufgelappt werden */
.accordionContent {	
	border: 1px solid #555555 !important; /* wird sonst von jQuery ausgeblendet */
	width: 100%; /* Der Content ist so groß wie das Accordion */
}

/* Layout für den Bereichm der eingebettet in deinen Trainerblock ist */
.isInTrainerblock {
	background-color: #f3da64;
}

.evaluationTableTrainerName {
	color: blue;
	background-color: white;
	display: inline-block;
	padding: 2px;
}

/* Anpassung für Safari ------------------------------------------------------------------------------------------------------------------------ */
/* https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices                                                       */
@supports (-webkit-touch-callout: none) {
/* Menu-Styles - Sonderfall bei kleinen Bildschirmen, damit das Layout sauber bleibt */

	.menueItemText {	
		font-size: 8pt !important;
		max-width: 50px !important;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;	
	}
	
	
}

/* Gelbe Hinweis-Box */
.InfoMessageArea {
	padding: 18px 10px 10px 50px;

	background-image: url('gif/information32.png');
	background-repeat: no-repeat;
	background-position: 5px 12px;
 	font-size: 12pt;
 	background-color: var(--hover-color);
 	border: 2px solid var(--border-color);
 	
 	margin: 1em 5em 1em 5em;

 	min-height: 40px;
}
 /*Pfeil-Icon */
td.CellGridPanel label a::before, a.highlightLink::before{
	font: var(--fa-font-solid);
  	content: '\f061';
	padding-right: 14px;	 
} 

/* im IE den Clear-Button rechts wegnehmen */
/* siehe https://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs */
.eMailWidget::-ms-clear {
	display: none;
}

.eMailWidgetValid {
	background-image: url('gif/info_ok.png');
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 18px 18px;
}

.eMailWidgetInvalid {
	background-image: url('gif/info_attention.png');
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 18px 18px;
}

.textWidgetWarning {
	background-image: url('gif/warning.png');
	background-repeat: no-repeat;
	background-position: right 2px center;
}

.eMailWidgetNotUnique {
	background-image: url('gif/warning.png');
	color: var(--errorr-color) !important;
}


.StandardTaggedValue td {
	color: var(--success-color);
}

/* Prozessmodelle als Popup öffnen ------------------------------------------------------------------------ */
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
	outline-style: dotted;
	outline-color: rgba(66, 180, 21, 0.7) !important;
}

/* Anpassungen zu jQuery-ui 3.5 --------------------------------------------------------------------------- */

/* OK/Abbrechen-Buttons zu jQuery-Popups - die sind sonst zu schmal und das Icon in einer eigenen Zeile */
.ui-dialog-buttonset .ui-button {
	min-width:80px;
	padding: 5px;		
}

.ui-dialog-buttonset .ui-button .ui-button-icon  {
	float: left;
}


.ui-spinner .ui-icon {
	margin-left: 0; /* sonst sind due Buttons für auf/ab verschoben */
}



/* eingebettete Tabelle können ohne Rahmen angezeigt werden */
table.noBorder tr td {
	border-top: none !important;
	border-bottom: none !important;
	border-right: none !important;
	border-left: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ecadiaAdmin.js - openEditUserItemDataDialog - Doku einfärben -------------------------------------------- */
.editUserItemDataDialog_info  {
	font-family:monospace;font-size:8pt;
}
.editUserItemDataDialog_info span {
	display: block;
	margin-left: 2em;
	color: var(--success-color);
}

/* kein Umbruch innerhalb einer Erfassung eine AP */
.AccountItemWidget {
	white-space: nowrap;
}

/* hinter dem Betragsfeld ein kleiner Abstand zur Währung */
.AccountItemWidget > input {
	margin-right: 4px; 	
}

/* Der Dokumentname und Filename in ETabDlgEcadiaObjectDocument.jsp */
.documentTableNameCell {
	max-width: 200px;
	overflow: hidden; 
	text-overflow: ellipsis;
	padding-bottom: 0.5em; /*Damit die zwei Links nicht so aufeinander kleben */
}

/* wird bei Radiobuttons so genutzt und die eingebettete Tabelle soll keine Ränder haben */
table.BoxLayout  td {
	border: none !important;
}


/* Online Hilfe -------------------------------------------------------------------------------------------- */
#HelpPopupDialogContent {
	/* die Höhe wird im ecadia.js berechnet und gesetzt */
	overflow-y: auto;
}

#HelpPopupDialog {
	overflow-x: hidden;
}

#HelpPopupDialog {
	overflow: hidden; /* der Inhalt sorgt selber für Scrollbars, daher hier ausschalten */
	background-color: var(--background-color); /* wie die Kacheln der Startseite */
}

/* Papierkorb ---------------------------------------------------------------------------------------------- */
#trashDropAreaMain {
	background-image: url('gif/delete32.png'); /*ToDo: entfernen*/
	background: none; /*ueberschreibt auch png aus dropArea*/
	display: flex;
    align-items: center;      
    justify-content: center; 
    position: relative;   
	
}
#trashDropAreaMain i.faIconTrashDropAreaMain {
	color: var(--faIcon-color);
	font-size: 24px;
	vertical-align: middle;
	position: absolute;
	right: 10px;  
}

.dropAreaHighlight {
	border: 1px solid var(--border-color) !important;
	background-color: fbfbff !important;
}

.YesNo {
	width: 100%;	
}

/* RS, 29.04.2022 */
.comboboxWidget {
	display: inline-block; /* sonst ist das block und macht anschließend einen Umbruch, aufgefallen speziell bei Multiple, Suche nach APs */
}


/* ETabDlgForumItemContribution ---------------------------------------------------------------------------- */
.crossedOutEntry{
	text-decoration: line-through;
}


/* ETabDlgDocumentPreview ---------------------------------------------------------------------------- */
/* Vorschau eines ecadiaDokuments vom Typ txt*/
.text-preview {
    margin-top: 2em;
    border: 1px solid var(--border-color);
    padding: 0.5em;
    background-color: var(--background-DropAreas);
}

/* To-do kalender der Startseite */
.calendarDayWarning {
	background-image: url(gif/warning.png);
	background-size: 12%;
	background-repeat: no-repeat;
	background-position: left 2px center;
}

.calendarToDoEndsWarning {
	
	padding-left: 22px; 
	background-position: left 3px;
	background-image: url(gif/warning.png);
	background-size: 12px;
	background-repeat: no-repeat;
}

#toDoCalendarTable {
	width: 100%; /* überdie ganze vorhandene Breite */
}

/* der hugerte macht immer p-Tags in die Texte, das soll man aber nicht sehen */
#toDoCalendarTable p {
	padding: 0;
	margin: 0;	
	margin-block-start: 0;
    margin-block-end: 0;    
}

.todoEntryOuter {
    padding: 3px;
}

.todoEntryInner {
    border-bottom: 3px solid var(--border-color);
}

.todoEntryInner p {
    margin: 3px 30px 0 5px;
    padding-bottom: 5px;
}
.todoHighlight, tr.todoHighlight td, td.todoHighlight, tr.todoHighlight td i.faIcon {
	background-color:  #FDFD96; /* hübsches gelb */
	color: var(--text-color-for-Ligth-background);
}

/* Chat-Button bei den Benutzerkonten */
.chatButton {
	float: right;
}

/* Textarea zur Eingabe von Benutzerbotschaften */
#UserMessageDialogContentMessageText:focus {
    outline: none !important;
    border:1px solid var(--border-color);
}

.messageTextBox {
	margin-top: 6px;
	background-color: #FDFD96;
	padding: 10px;
	font-size: 12pt;
}

/* eine Benutzerinfo etwas hübscher machen, z.B. in ETabDlgEcadiaObjectDocument.jsp */
/* gibt ähnlichen Style bei Upload von Bildern bei Ordnern*/
.userInfoIcon {
	border: 1px solid var(--border-color);
	background-color: lightyellow;
	padding: 6px 6px 6px 24px;
	background-repeat: no-repeat;
	background-position: 4px 4px;
	background-image: url('gif/information.png');
	min-height: 18px;
	border-radius:3px;
	color: var(--text-color-for-Ligth-background);
}
i.userInfoFAIcon{
	font-size: 16px;
	color: var(--text-color-for-Ligth-background);
	position: relative;
	margin-right: 6px;
	top: 1px;
	margin-left: -14px;
}

/* Einzelstunden im Stundenplan */
.singledateStatusConfirmed {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: url('gif/checked.png');
	
}

/* Einzelstunden im Stundenplan / singledateStatusAccountigClosed */
.singledateStatusAccountigClosed {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: url('gif/AccountingFinished.png');
}

i.singledateStatusFAIcon{
	color: var(--faIcon-color);
	position: relative;
	float: right;
	font-size: 16px;
}

/* Icon der Veranstaltung als Info, ViewPanelEvent */
.objectSymbolAsInfoIdon {
	border: 1px solid #999999;
	padding: 2px;
	background-color: #efefef;
	border-radius: 3px;
	margin-bottom: -7px; /* damit es zum Schluss mittig aussieht */
	box-shadow: 2px 2px 1px silver; /* ein bisschen optisch aufhübschen */
}


.addressTileLabel>input { /* HIDE RADIO */
	visibility: hidden; /* Makes input not-clickable */
	position: absolute; /* Remove input from document flow */
}

/*werden wahrscheinlich nicht mehr verwendet*/
.licenseThresholdBlocked {
	color: #FF0000;
}

.licenseThresholdAbove {
	color: #800000;
}

.licenseThresholdWarning {
	color: #FF8C00;
}

/* alle Kacheln */
.addressTileLabel>input+div { /* DIV STYLES */
	cursor: pointer;
	border: 1px solid var(--border-color);
	background-color: var(--background-DropAreas);
	float: left;;
	border-radius: 2px;
	margin-right: 6px;
	min-height: 70px;
	padding: 4px;
	position: relative;
}

/* nur die selektierte */
.addressTileLabel>input:checked+div { /* (RADIO CHECKED) DIV STYLES */
	background-color: var(--background-color);
	border: 2px solid var(--border-color);
	background-repeat: no-repeat;
	background-position: right 4px bottom 2px;
}

.addressTileLabelFAIcon {
	opacity: 0;
	pointer-events: none;
	color: var(--faIcon-color);
	position: absolute;
	bottom: 4px;
	right: 4px;
}

.addressTileLabel>input:checked+div .addressTileLabelFAIcon{
	opacity: 1;
}

/* Auf der Allgemein-Seite von Ordnern, das Vorschaubild des hochgeladenen Ordnerbildes */
.folderImagePreviewTitle {
	margin-bottom: 4px;
	font-weight: bold;
}

.folderImagePreview, .folderImagePreviewEmpty {
	height: 200px;
	width: 414px;
	margin-left: 10px;
	display: inline-block;
	
	border: 2px dashed var(--border-color);
	overflow: hidden;
}

.folderImagePreview img  {
	height: 200px;
	width: 414px;
}


span.freeSpaceInfo{
	white-space: nowrap;
}

.licenseTableFormatter{
	vertical-align:top;
	width:400px;
}

.passwordGuidelineInvisible{
	display: none;
}

.schedulerTable {
	width: 750px;
	border-width: 0px;
	border-style: solid;
	margin-top: 2px;
	margin-bottom: -5px;
	margin-left: 2%;
}

.schedulerTable td{
	font-size: 16px;
}

a.buttonInvoiceReversal {
	border-color: var(--error-color);
	font-weight: bold;
	background-image: url(gif/warning.png);
	background-repeat: no-repeat;
	background-position: left 2px center;
	padding-left: 20px !important;
	color: var(--error-color) !important;
}

tr.InvoiceGeneralReversal td {
	/* weil alles "negativ" ist rot anzeigen */
	color: var(--error-color);		
}

tr.InvoiceGeneralReversalExists td {
	/* weil so eine Rechnung praktisch "storniert" ist, wird sie auch durchgestrichen angezeigt */
	text-decoration: line-through;
}

ul.listInTable, ul.listInTableWarning {
	margin: 0;
	padding-left: 14px;
}

ul.listInTable>li {
	list-style-image: url(gif/MandatoryPredecessor.png);
	padding-bottom: 2px;
}

ul.listInTableWarning>li {
	list-style-type: "\26A0"; /* url(gif/infoSmall.png); */
	padding-bottom: 2px;
	padding-left: 4px;
}

ul.listInTableWarning>li::marker {
	color: var(--faIcon-color);
}

.transparentMultipleClasses {
	opacity: 0.4;
	pointer-events: none;
}

/* Info zum mehrfachen Öffnen - ganz zentral mittig anzeigen */
.multipleTabsOpenInfo {
	z-index: 10000; /* ganz nach vorne holen */
	position: absolute;
	Left: 40%;
	top: 100px;
	color: var(--text-color);
	padding: 20px;
	width: 500px;
	text-align: center;
	font-size: 20px;
	border-radius: 8px;
	border-style: solid;
	border-color: var(--error-color);
	border-width: 5px;
	box-shadow: 2px 4px var(--background-DropAreas);
	background-color: var(--background-color);
}

.RegisterSelectInvoiceAddressName {
	font-weight: bold;
	margin: 0 !important;
}

/* FA-Icon Sachen --------------------------------------------------------------------------------------------  */
div.dragFAElement {
	display: inline-block;
	margin-right: 4px;
	/* damit der Objekt-Text nicht zu eng auf dem Icon sitzt */
}

i.faIcon {
	font-size: 14pt; /* etwas größer als der Text */
	color: var(--faIcon-color);
	padding-top: 2px; /* sonst ist das immer oben etwas abgeschnitten */
}

i.faIconTabsHead {
	font-size: 11pt;
	color: var(--faIcon-color);
}

.viewManagerTab li.selected  i.faIconTabsHead {
	font-size: 14pt;
}

i.faIconMenu {
	font-size: 14pt;
	color: var(--faIcon-color);
}

i.faIconExplorer {
	font-size: 10pt; /* etwas größer als der Tect */
	color: var(--faIcon-color);
}

i.faIconButton {
	color: var(--faIcon-color);
	font-size: 12pt;
}

i.faIconButtonActionPanel {
	color: var(--faIcon-color);
	font-size: inherit;
	margin-right: 4px;
} 

.faIconButtonActionPanel.faBiggerFont {
	font-size: 15px;
	position: relative;
	top: 1px;
} 

i.faIconSmall {
	color: var(--faIcon-color);
}

i.faIconColor {
	color: var(--faIcon-color);
}
i.faIconDeleteMessage {
	color: var(--faIcon-color);
}
i.faIconDropAreaSmall{
	color: var(--faIcon-color);
	font-size: 20px;
}
i.faIconCalendarDayWarning{
	color: var(--faIcon-color);
	font-size: 90%;
	position: absolute;
    left: 2px; 
    top: 54%;
    transform: translateY(-50%);
}
i.faIconAddButton{
	color: var(--faIcon-color);
	position: relative;
	margin-left: -24px;
	margin-right: 6px;
	font-size: 14px;
	top: 8px;
	transform: translateY(-50%);
}

i.faIconColor32{
	color: var(--faIcon-color);
	font-size: 32px;
	position: relative;
	top: 6px;
}
i.faIconConfigMode{
	color: var(--faIcon-color);
	font-size: 8px;
}


.helpiconFA, .helpiconFAMouseover {
	margin-right: 10px;	
	cursor: pointer;	
	vertical-align: middle;
	color: var(--faIcon-color);
	font-size: 15px;
}

.faIconFilterInput-wrapper {
	position: relative;
}
.faIconFilterInput-wrapper input {
	padding-right: 10px;
}
.faIconFilterInput-wrapper i {
	position: absolute;
	right: 71px;
	top: 60%;
	transform: translateY(-50%);
	color: var(--faIcon-color);
	pointer-events: none;
}

.faIconUseJQueryDatePicker-wrapper {
	position: relative;
	float: left;
}
.faIconUseJQueryDatePicker-wrapper input {
	padding-right: 10px;
}
.faIconUseJQueryDatePicker-wrapper i {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--faIcon-color);
	pointer-events: none;
}

.faIconTimeField-wrapper {
	position: relative;
	float: left;
}
.faIconTimeField-wrapper input {
	padding-right: 10px;
}
.faIconTimeField-wrapper i {
	position: absolute;
	right: 3px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--faIcon-color);
	pointer-events: none;
}

i.faIconFileDropAreaLogos {
	color: var(--faIcon-color);
	position: relative;
	left: 219px;
	bottom: 50px;
}

i.faIconIbanValidatorSign{
	color: var(--faIcon-color);
	font-size: 20px;
	margin-left: 10px;
	vertical-align: middle;
}

i.faSearchHelpIcon {
	color: var(--faIcon-color);
	position: absolute;
	top: 18px;
	left: 8px; 
	font-size: 14px;
}
 i.faHelpInfoIcon {
 	color: var(--faIcon-color);
 	font-size: 14px;
 	position: absolute;
 	top: 4px;
 }

.faIconColor {
	color: var(--faIcon-color);
}

i.faIconDuo{
	color: var(--faIcon-color);
	font-size: 14pt;
}
.faIconDuo.faGreen{
	--fa-secondary-color:var(--success-color);
}
.faIconDuo.faYellow{
	--fa-secondary-color:var(--warn-color);
}

i.faGreen{
	color: var(--faIcon-color);
	--fa-secondary-color: var(--success-color);
}

i.faYellow{
	color: var(--faIcon-color);
	--fa-secondary-color: var(--warn-color);
}


.faIconInquiryQuestionButton::before {
	content: attr(faIconText);
	font-size: 9pt;
	font-weight: bold;
	color: var(--faIcon-color);
}

.faIconInquiryQuestionButtonBorderOneLine::before {
	content: attr(faIconText);
	font-size: 9pt;
	font-weight: bold;
	color: var(--faIcon-color);
  	border: 2px solid var(--faIcon-color);
  	padding: 5px;
  	display: inline-block;
}
.faIconInquiryQuestionMultiLine{
	border: 2px solid var(--faIcon-color); 
	padding: 2px 14px 2px 2px; 
	display: inline-flex; 
	flex-direction: column;
}


i.faIconButtonActionPanel.faIncreasedSize {
	font-size: 11pt;
}

i.faIconButtonCheckBox { /* vgl bsp Meine To-Do-Liste*/
	color: var(--faIcon-color);
}

i.faIconInquiryFormCode {
	color: var(--faIcon-color);
	font-size: 18pt;
	vertical-align: middle;
}

i.faIconTableActionButton {
	color: var(--faIcon-color);
}

i.faIconTable {
	color: var(--faIcon-color);
	font-size: 14pt;
}

i.faIconAdminIndicator{
	color: var(--faIcon-color);
}

i.faIconInfo {
	color: var(--faIcon-color);
	font-size: 12pt;
}

.userInfoFaIconFileDropAreaWidget {
	border: 1px solid var(--border-color);
	background-color: var(--background-color);
	padding: 6px 6px 6px 6px;
	min-height: 18px;
	border-radius: 3px;
	color: var(--text-color);
	margin-top: 50px;
}
i.userInfoFaIconFileDropAreaWidgetIcon {
	color: var(--faIcon-color);
	position: relative;
	font-size: 18px;
	right: 164px;
}

i.faInfo {
	color: var(--faIcon-color);
	padding-left: 20px;
	padding-right: 10px;
	position: relative;
	font-size: 20px;
	top: 3px;
}

i.faIconUseCase {
	color: var(--faIcon-color);
	font-size: 30px;
}

i.faIconTable.info_ok {
	--fa-secondary-color: var(--success-color);
}


i.faIconTable.info_complete {
	--fa-secondary-color:var(--error-color);
}

i.faIconTable.info_fair {
	--fa-secondary-color: var(--warn-color);
}

i.faIconTableIcon {
	color: var(--faIcon-color);
}

i.faIconComboBox {
	color: var(--faIcon-color);
	font-size: 11pt;
}

i.faIconSearch {
	color: var(--faIcon-color);
	font-size: 9pt;
}

i.objectFAIconAsInfoIdon {
	color: var(--faIcon-color);
}

i.faIconProcess {
	color: var(--faIcon-color);
	font-size: 26pt;
}

.dropAreaAlignLeft {
	margin-left: 20px;
	margin-right: 200px;
}

.dropAreaAlignCenter {
	margin: 0 auto;
}

.dropAreaAlignRigth{
	margin-right:20px;
}

.faIconImageButton {
	height: 25px;
}
.faIconProcessButton {
	min-width: 150px;
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	gap: 36px;
}
.faIconProcessButton:hover {
  background-color: var(--hover-color);
  cursor: default;
}
.faIconProcessButton i {
	color: var(--faIcon-color);
	font-size: 14px;
}

i.faIconHoverButton {
	color: var(--faIcon-color);
	font-size: 15px;
}
/*ToDo Klasse entfernen und ersetzten, wird nur beim Bildungsprodukt => Inhalte genuztz*/
.faIconHoverButtonBackground {
	display: flex;
	justify-content: center;
	align-items: center;   
	width: 21px;            
	height: 21px;      
	border-radius: 3px;    
	background-color: var(--background-color); 
	border: 1px solid var(--border-color);
}
.faIconHoverButtonBackground:hover {
	background-color: var(--hover-color);
}
.dropAreaSymbolFAIconWrapper {
	position: relative;
	display: inline-block;
}
.dropAreaSymbolFAIcon {
	position: absolute;
	top: 50%;
	left: 5px;
	right: 45%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none; /* keine Blockade von Klicks */
}
.dropAreaSymbolFAIconIcon {
  color: var(--faIcon-color);
  font-size: 14px;
}

.dropAreaSymbolFAIconWrapperSearch {
	position: relative;
	display: inline-block;
}
.dropAreaSymbolFAIconSearch {
	position: absolute;
	top: 50%;
	left: 5px;
	right: 45%;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none; /* keine Blockade von Klicks */
}
.dropAreaSymbolFAIconIconSearch {
  color: var(--faIcon-color);
  font-size: 14px;
}


.faIconDataProvider {
	color: var(--faIcon-color);
}


#MainViewColumnRightAccordeon {
	background-color: var(--background-color); /* Achtung: allgemeiner Hintergrund, sollte aus Theme kommen */
}

#closeClipboardArea {
	width: 30px;
}

#openClipboardArea {
	position: absolute;
	top: 80px;
	right: 14px;
	width: 40px;
}

/*Zwischenablage*/
#MainViewColumnRightArea {
	/* position: fixed statt absolute, weil der Bereich per transform: translateX() nach rechts aus dem Viewport
	   herausgeschoben wird wenn er versteckt ist. Bei position: absolute würde der Browser trotzdem einen
	   horizontalen Document-Overflow berechnen und eine Scrollbar anzeigen. Fixed-Elemente sind relativ zum
	   Viewport positioniert und tragen nicht zum scrollbaren Bereich des Dokuments bei. */
	position: fixed;
	top: 120px;
	right: 6px; /* in einer Flucht mit den Buttons darüber */

	transform: translateX(320px); /* standardmäßig nach rechts herausgeschoben */
	transition: transform 0.5s ease, box-shadow 0.5s ease; /* nur die animierten Eigenschaften, kein "all" (würde sonst height-Änderungen mitmachen) */
	z-index: 1001;
	height: 80%;

	margin-top: 0;
	background-color: var(--background-color); /* ToDo: Farbe aus Theme setzen */
	width: 300px;
}

/* der rechte Zwischenablagebereich, der sich von rechts "hereinschiebt" */
#MainViewColumnRightArea.showAreaRight {
	transform: translateX(0);
	box-shadow: -5px 5px 5px 5px rgba(0, 0, 0, 0.2);
}


/* das FA-Icon im Tab-Control */
.faIconTab {
	font-size: 12pt; /* etwas größer als der Tect */
	color: var(--faIcon-color);
	margin-right: 4px; /* damit der Tab-text etwas Abstand hat */
	padding-top: 2px; /* sonst ist das immer oben etwas abgeschnitten */
}

.faIconTabSmall {
	color: var(--faIcon-color);
}

/* den Text mittig zum Icon setzen */
.tabControlTabText {
	margin-top: 4px;		/* damit das mittig mit dem Icon ist */
	margin-bottom: 6px;
	display: inline-block;
	vertical-align: middle;
}

span.tabControlTabFAIcon {
	
	display: grid;
	grid-template-columns: max-content auto; 	/* Icon - Inhaltsbereich (wobei die Zeilen in Tite/Titleright nochmasl aufgesplittet wedren */
	padding-left: 0; /* FA-Icons sind kein Hintergrund mehr */
}




/* die Möglichkeit des Drag&Drop anzeigen mit einem kleinen Pfeil am rechten Rand */
.ecadiaObjectItemDragSorting::after {
  content: '\2195';		/* Hex für Pfeil rauf/runter */
  text-align: right;
  float:right;
}

/* das wird beim Drag-over automatisch gesetzt */
.dragEcadiaObjectSorting {
	border: 2px dashed  black !important;  /* leichten optischen Effekt, damit man sieht "über" welchem Objekt gedroppt wird	 */
}

.dropAreaFAIcon {
	color: var(--text-color);
	vertical-align: top;
	margin: 0 auto;
	margin-top: 15px;
	padding: 10px;
	width: 90%;
	height: 20px;
	background-color:  var(--background-DropAreas);
	border: 1px dotted var(--border-color);
	text-align: center;
}

.dropAreaAlignLeft {
	margin-left: 20px;
	margin-right: 200px;
}

.dropAreaAlignCenter {
	margin: 0 auto;
}

.dropAreaAlignRigth{
	margin-right:20px;
}


/* Abrechnunsprozess, Info dass etwas evtl nicht in Ordnung ist */
span .accountingInfoEnrollNotFullyCharged li {
	font-weight: bold;
	color: var(--error-color) !important;
}

/*Bildungskatalog-Explorer */

#ExplorerFrameTable #FolderTree {
	width: 100%;
	height: 100%;
}

#ExplorerFrameTable #FolderTreeFrame {
	width: 400px;
	border-right: 3px double var(--border-color);
	padding-right: 2px;
	overflow-x: hidden; /* damit zu lange Produkttitel abgeschntten werden und nicht aus dem Tree rauslappen */
}


/* damit die Scrollbar in der aufgeklappten Liste kommt */
#ExplorerFrameTable .ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

/*Bildungskatalog-Explorer, autocomplete Filter HTMLTable2?*/
#ExplorerFrameTable .itemAutocomplete a.ui-state-focus {
	/* font-weight: bold; */
	/* background: #d0e0f0 !important;
	border: 1px dashed #aaaaaa; */
	padding-top: 8px;
	padding-bottom: 1px;
	padding-left: 0px;
	margin-left: 0px;
}

#ExplorerFrameTable  #treeActionButtons {
	display: inline-block;
	margin-bottom: 2px;
}
#ExplorerFrameTable #treeActionButtons button {
	width: 18px;
	height: 18px;
	margin-top: 0 !important;
}

.EventResourceListWithDeleteButton {
	padding: 0 0 0 1em;
	margin: 0;	
}

.writeAccessResult{
    display: grid;
    width: 60%;
    height: 50px;
}
/*die Namen der Systemvariablen auf dem AdminTab der Managereinstellungen*/
.systemsettingManager{
	font-family: 'Courier New';
    color: var(--success-color);
}

/* z.B. auf ETabDlgEnrollGeneral zur Kennzeichnung der TSandardrechnungsanschrift */
.defaultInvoiceAddressInfo {
	
	color: var(--success-color);
	font-size: 16pt;
	font-weight: bold;
	float: right;
	margin-top: -8px !important;	
}

/* ist erstmal ausgeblendet */
.defaultInvoiceAddressButton {
	display: none;	
}

/* der kleine Button um eine Adresse als Standard beim Lerner zu setzen, zum selektierten Radio einblenden */
input[type="radio"]:checked+label .defaultInvoiceAddressButton {
	display: inline-block;
	float: right;
	height: 16px;
	padding: 0 3px 3px 3px;
	font-weight: bold;
	margin-top: -2px;	
}

.widget-container-float {

  display: flex;                /* Elemente nebeneinander */
  align-items: flex-end;  

}

.widget-container-float > * {
	margin-right: 0.5em !important;
}
 
.labelInputPair label, .floatContainerLabel >  label {
	display: block;
    color: var(--text-color);
}

.widget-container label:not(.InputLabel) {
	margin-bottom: 6px; /* damit das mittig in der Zeile wirkt */
	color: var(--text-color);
}

/* MobileGridContainer */
.containerGrid {
	display: grid;
	grid-template-columns: max-content auto; /* Standard: 2 Spalten - das typische Label - Input Grid */
}

@media ( max-width :680px) {
	.containerGrid {
		grid-template-columns: 30% auto; /* etwas anders */
	}
}


/* Tabellenartig etwas padding um die Zellen */
.containerGrid > div {
	padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}

/* Tabelle in Tabelle hat den äußeren Rand nicht */
.containerGrid > div .containerGrid div {
	padding: 0 0.4rem 0.2rem 0;
}

.ui-tabs-vertical > .ui-tabs-nav li {
	border-bottom: 0 !important;	
}

.ui-tabs .ui-state-active a, .ui-tabs .ui-state-active a:link, .ui-tabs .ui-state-active a:visited,
.ui-tabs .ui-state-default a, .ui-tabs .ui-state-default a:link, .ui-tabs .ui-state-default a:visited {
	border: 0 !important;
	text-decoration: none;
}

/* die Teilüberschriften in den Tabs */
#MainContainer  h2 {
	margin-top: 2em;
	margin-bottom: 0;
	font-size: 1.2em;	
}

/* Zwischenüberschrift, die wie ein Collapsable funktioniert */
.headerExpandable {
	cursor: pointer;
	
}


.headerExpandable:before {
  content:"+ ";		/* zum Aufklappen */
}

/** schon offen: dann zuklappen anzeigen */
.headerExpandable.expandedOpen:before {
  content:"- ";		/* zum Zuklappen */
}

#main-menu li a.menueItemDisable {
  pointer-events: none;
}
/* nicht von firefox supported, cursor soll sichtbar machen, dass menupinkte disabled sind*/
/* nicht kombinierbar mit  pointer-events: none; deshalb Ebene obendrüber*/
#main-menu li:has(a.menueItemDisable) {
 cursor: url('gif/cursorButtonDisable.png'), default !important;
}

.ui-datepicker td.datepickerHoliday a.ui-state-default {
	background-color: #fedec4;
}

/*Input vom FarbPicker soll zu den Farben des FarbPickers passen*/
.sp-input-container input[type='text']{
	background-color: white;
	color: var(--text-color-for-Ligth-background);
}
/* beim BuchungsUseCase*/
.processStepDataTable .contentAreaBody{
	background-color: var(--hover-color);
}