/* CSS-Variablen für wiederkehrende Farben und andere Werte */
:root {
  /* Primäre Farben */
  --primary-blue: #2843B5;
  --primary-yellow: #FEBA37;
  --secondary-blue: #CBE8F7;
  
  /* Hintergrundfarben */
  --bg-dark: #3E3D3A;
  --bg-light: #f9f9f9;
  --bg-medium: #eeeeee;
  --bg-lighter: #FFFFFF;
  --bg-highlight: #F8F9F7;
  --bg-hover: #E5E9F6;
  --bg-active: #c2c9e4;
  
  /* Text und Rand Farben */
  --text-dark: #1F1F1F;
  --text-medium: #313D46;
  --text-light: #575757;
  --text-lighter: #787878;
  --text-inactive: #b0b0b0;
  --border-light: #E2E3E1;
  --border-medium: #ccc;
  
  /* Status Farben */
  --warning-bg: #FFC213;
  --warning-border: #EAAE00;
  --warning-light-bg: #FFF4C2;
  --warning-light-border: #FFCC33;
  --error-text: #d32f2f;
  --success-text: #388e3c;
  
  /* Häufig verwendete Rundungen */
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 12px;
  
  /* Schatten */
  --shadow-small: 0 2px 3px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-large: 0 4px 8px rgba(0, 0, 0, 0.3);
  
  /* Übergänge */
  --transition-standard: all 0.3s ease;
  --transition-button: background-color 0.3s ease, transform 0.2s ease;
}

body {
	background: none;
	background-color: var(--bg-dark);
	/* background-color: #333D3E;
	background-color: #C5C0C0; */
	color: var(--text-dark);
}

.body-light {
	background-color: var(--bg-light);
}

#logoTop {
	width: 960px;
	height: 63px;
	background: url(../img/logo_top_new.png) no-repeat;
	background-size: contain;
}

#menu a {
    display: block;
    float: left;
    width: 120px;
    height: 25px;
    margin-left: 1px;
    padding-top: 7px;
    background: linear-gradient(to bottom, var(--bg-light), #f0f0f0); /* Heller Verlauf */
    text-decoration: none;
    text-align: center;
    text-transform: lowercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500; /* Leicht fett für nicht gewählte Tabs */
    color: var(--text-medium);
    border-radius: 5px 5px 0 0; /* Nur die oberen Ecken abrunden */
    box-shadow: var(--shadow-medium); /* Schatten */
    transition: var(--transition-standard); /* Weicher Übergang */
    position: relative; /* Positionierung notwendig für z-index */
    z-index: 10; /* Setzt das Menü in die vordere Ebene */
}

#menu a:hover {
	background: none;
    background-color: var(--secondary-blue); /* Helle Hintergrundfarbe beim Hover */
    color: var(--primary-blue); 
    border-radius: 5px 5px 0 0; /* Nur die oberen Ecken abrunden */
}

#menu li {
    margin-right: 5px; /* Abstand zwischen den Menüelementen */
}

#menu .active a {
	height: 21px;
	color: var(--primary-blue); 
	background: none;
	font-weight: bold;
    border-bottom: 4px solid var(--primary-yellow); /* Untere Linie in der gewünschten Farbe */
    background-color: #EFEFEF; /* Leicht angepasste Hintergrundfarbe, um den aktiven Tab hervorzuheben (optional) */
}

#menu .inactive a {
	background: none;
    color: var(--text-inactive); /* Ausgegraute Textfarbe */
    background-color: #f1f1f1; /* Leicht hellere Hintergrundfarbe */
    pointer-events: none; /* Verhindert Klicks auf deaktivierten Tab */
    cursor: default; /* Zeigt den Standardcursor anstelle des Zeigers an */
    border-bottom: none; /* Keine untere Linie für den deaktivierten Zustand */
    box-shadow: none; /* Entfernt Schatten, um den Tab als inaktiv zu kennzeichnen */
    font-weight: normal; /* Textgewicht normal, damit der Tab sich von aktiven abhebt */
}

#logoBottom {
	width: 960px;
	height: 27px;
	margin: 0 auto;
	background: none;
	background-color: var(--bg-light);
	position: relative; /* Positionierung notwendig für z-index */
    z-index: 2; /* Setzt das Menü in die vordere Ebene */
    border-radius: 5px 5px 0 0 ; /* Nur die oberen Ecken abrunden */
}

#header {
	width: 960px;
	height: 0px;
	margin: 0px auto;
	background: none;
}

#content {
	width: 940px;
	min-height: 300px;
	margin: 0px auto;
	background-color: var(--bg-light);
	padding: 25px 10px 5px 10px;
	border-radius: 0 0 5px 5px; /* Nur die oberen Ecken abrunden */
}

#systemMessage {
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	background-color: var(--warning-bg);
	border-style: dotted;
	border-width: 2px;
	border-color: var(--warning-border);
	list-style-type: none;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 3px;
}

#breadcrumbs {
	width: 940px;
	float: left;
	color: var(--text-dark);
	margin: 10px 0px;
	padding: 0px 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--border-light); /* Untere Linie in der gewünschten Farbe */
}

#breadcrumbs a {
	color: var(--text-lighter);
}

#breadcrumbs a:hover {
	color: var(--primary-blue);
	padding-bottom: 5px;
	border-bottom: 2px solid var(--primary-yellow); /* Untere Linie in der gewünschten Farbe */
}

#breadcrumbsLocked {
	float: left;
	color: var(--bg-lighter);
	margin: 5px 5px 5px 10px;
}

.boxed {
    margin: 20px auto; /* Zentrierung und Abstand */
    padding: 10px; /* Innenabstand */
    background-color: var(--bg-light); /* Hintergrundfarbe */
    border-radius: var(--border-radius-large); /* Abgerundete Ecken */
    border: 1px solid var(--border-medium); /* 1px Rahmen in Grau */
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten für den Tiefeneffekt */
    /*ransition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergänge für Schatten und Bewegung */
}

.boxed .title {
    margin-top: 0; /* Verhindert zusätzlichen Abstand oben */
    background: none;
    
    display: flex; /* Flexbox aktivieren */
    align-items: center; /* Vertikale Zentrierung der Inhalte */
    justify-content: space-between; /* Abstand zwischen H2 und dem Icon */
    flex-wrap: nowrap; /* Verhindert das Umbruch der Inhalte */
    gap: 10px; /* Fügt etwas Abstand zwischen dem Titel und dem Icon hinzu */
}

.boxed .title h2 {
	margin: 0;
	padding: 10px;
	font-size: 15px;
	font-weight: bold;
	color: var(--text-dark);
}

.boxed .content {
	margin-left: 1px;
	padding: 10px 5px 5px 5px;
	border-top: 1px solid var(--bg-lighter);
	background: none;
	min-height: 30px;
}

/* Hover-Effekt für die Card */
.card:hover {
    transform: translateY(-4px);  Verschiebt die Card nach oben */
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten für mehr Tiefe */
}


/* Basis-Styling für die Card */
.rich-panel {
	padding: 0px;
	margin-bottom: 5px;
	border-radius: var(--border-radius-medium); /* Abgerundete Ecken */
    border: 0px solid var(--border-medium); /* 1px Rahmen in Grau */
    box-shadow: var(--shadow-small); /* Leichter Schatten für den Tiefeneffekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Übergänge für Schatten und Bewegung */
}

/* Titel der Card */
.rich-panel-header {
	background: none;
	background-color: #F8F9F750;
	border: none;
	padding: 10px;
	border-bottom: 1px solid var(--border-light); /* Untere Linie in der gewünschten Farbe */
}

.rich-panel-body {
	background: none;
	min-height: 30px;
}

.rich-panel-body.pnl-open {
    background-color: #c8e9ca;
}

.rich-panel-body.pnl-disabled {
    background-color: var(--bg-medium);
    color: var(--text-light);
}

.rich-panel-body.pnl-done {
   
}

/* Hover-Effekt für die Card */
/* 
.rich-panel:hover {
   transform: translateY(-0.4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
} */

.cfRowEven {
	background-color: var(--bg-highlight);
	vertical-align: top;
}

.cfRowOdd {
	background-color: var(--bg-lighter);
	vertical-align: top;
}

.rich-table {
    border: 1px solid var(--border-medium); /* 1px Rahmen in Grau */
    box-shadow: var(--shadow-small); /* Leichter Schatten für den Tiefeneffekt */	
}

.rich-table-header {
	background-image: none;
	background-color: var(--bg-highlight);
}

.rich-table-headercell {
	padding: 10px 5px;
	font-weight: bold;	
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
}

.rich-table-subheadercell {
	padding: 5px !important;
	font-weight: 600;	
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
}

.rich-table-cell {
	padding: 10px 5px;
	font-weight: normal;	
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
}

.rich-table-cell.condensed {
    padding: 5px 3px; /* Weniger Padding für kompaktere Zeilen */
}

.rich-table-thead {
	background: none;
}

.rich-table-subheader {
	background-color: var(--bg-highlight);
}

.rich-table-subheadercell {
	padding: 10px;
}

.rich-table-subfooter {
	background-color: var(--bg-highlight);
}

.rich-table-subfootercell {
	padding: 5px 5px;
	font-weight: normal;	
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
}

.odd {
	background-color: var(--bg-highlight);
}

.even {
	background-color: var(--bg-lighter);
}

.rowOdd {
	background-color: var(--bg-highlight);
}

.rowEven {
	background-color: var(--bg-lighter);
}

.subActivity {
	background-color: var(--bg-hover);
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    padding: 8px 8px;
    background: none;
}

button[type="button"], button[type="reset"], button[type="submit"], input[type="reset"], input[type="submit"], input[type="button"] {
	padding: 6px 12px; /* Großzügiges Padding für eine angenehme Klickfläche */
    font-size: 12px; /* Klare Schriftgröße */
    font-weight: normal; /* Deutlich sichtbarer Text */
    color: var(--text-medium); /* Standardfarbe der Schrift */
    background-color: var(--bg-lighter); /* Primärfarbe: Blau */
    border: solid 1px var(--border-light); /* Keine Ränder */
    border-radius: var(--border-radius-medium); /* Leicht abgerundete Ecken für modernes Aussehen */
    cursor: pointer; /* Zeiger-Cursor bei Hover */
    transition: var(--transition-button); /* Sanfte Übergänge für Hover- und Klick-Effekte */
}

/* Hover-Effekt für alle Buttons */
button[type="button"]:hover, button[type="reset"]:hover, button[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--bg-hover); /* Etwas dunklerer Farbton bei Hover */
}

/* Klick-Effekt für alle Buttons */
button[type="button"]:active, button[type="reset"]:active, button[type="submit"]:active, input[type="reset"]:active, input[type="submit"]:active, input[type="button"]:active {
    transform: scale(0.98); /* Leichtes Einziehen für den Klick-Effekt */
    background-color: var(--bg-active); /* Etwas dunklere Hintergrundfarbe beim Klicken */
}

/* Richpanel anpassen */

.rich-mpnl-content {
	border-radius: 5px;
	box-shadow: var(--shadow-large); /* Schatten für einen modernen Look */
}

.rich-mpnl-header-cell {
	height: 20px;
	width: 100%;
	vertical-align: middle;
	z-index: 5;
}

.rich-mpnl-header {
	background-color: var(--bg-highlight);
	color: var(--text-light);
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-color: #9CABC1;
	filter: alpha(opacity=100);
	opacity: 1;
	background-image: none;
	padding: 8px;
	border-width: 1px;
	border-style: none;
	background-position: top left;
	background: none;
	background-repeat: repeat-x;
	border-bottom: 1px solid var(--border-light); /* Untere Linie in der gewünschten Farbe */
	margin-bottom: 10px;
}

.rich-mpnl-shadow {
	display: none !important;
	background-color: transparent;	
}

.rich-mpnl-body {
	background-image: none;
}

#footerLogo {
	width: 120px;
	height: 56px;
	margin: 15px auto;
	background: url(../img/footer_slogan_new.png) no-repeat;
	background-size: contain;
}

/* Rich-Tab anpassen */

.rich-tabhdr-side-border {
	background-color: transparent;
	background-image: none;
}

.rich-tabhdr-side-cell {
	border: none;
}

.rich-tab-inactive {
	display: block;
    float: left;
    height: 15px;
    margin-left: 1px;
    padding: 7px 7px;
    
	background-image: none;
	border-color: var(--border-medium); /*#353D3E;*/
	border-width: 1px;
	border-style: solid;
	border-bottom-width: 0;
	cursor: default;
	
	background: linear-gradient(to bottom, var(--bg-light), #f0f0f0); /* Heller Verlauf */
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500; /* Leicht fett für nicht gewählte Tabs */
    color: var(--text-medium);
    border-radius: 5px 5px 0 0; /* Nur die oberen Ecken abrunden */
    box-shadow: var(--shadow-medium); /* Schatten */
    transition: var(--transition-standard); /* Weicher Übergang */
    position: relative; /* Positionierung notwendig für z-index */
    z-index: 2; /* Setzt das Menü in die vordere Ebene */
    background-position: 0px;
}

.rich-tab-active {
	display: block;
    float: left;
    height: 15px;
    margin-left: 1px;
    padding: 7px 7px;
    
	background-image: none;
	border-color: var(--border-medium);
	border-width: 1px;
	border-style: solid;
	border-bottom-width: 0;
	cursor: default;
	
	background: linear-gradient(to bottom, var(--bg-light), #f0f0f0); /* Heller Verlauf */
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500; /* Leicht fett für nicht gewählte Tabs */
    color: var(--text-medium);
    
    border-radius: 5px 5px 0 0; /* Nur die oberen Ecken abrunden */
    box-shadow: var(--shadow-medium); /* Schatten */
    transition: var(--transition-standard); /* Weicher Übergang */
    position: relative; /* Positionierung notwendig für z-index */
    z-index: 1; /* Setzt das Menü in die vordere Ebene */
    
    color: var(--primary-blue);
	background: none;
    border-bottom: 2px solid var(--primary-yellow); /* Untere Linie in der gewünschten Farbe */
    background-color: #EFEFEF; /* Leicht angepasste Hintergrundfarbe, um den aktiven Tab hervorzuheben (optional) */
}

.rich-tab-inactive:hover {
	background: none;
    background-color: var(--secondary-blue); /* Helle Hintergrundfarbe beim Hover */
    color: var(--primary-blue);
    border-radius: 5px 5px 0 0; /* Nur die oberen Ecken abrunden */
}

/* Allgemeine Formatierungen */
.label {
	font-weight: normal;
	color: var(--text-light);
	text-align: left;
	padding-left: 10px;
}

.label2 {
	font-weight: normal;
	color: var(--text-light);
	text-align: left;
	padding-left: 20px;
}

/* Basis-Styling für alle Links */
a {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
    color: var(--primary-blue); /* Ansprechende Grundfarbe */
    font-weight: bold; /* Fett für eine bessere Sichtbarkeit */
    position: relative; /* Notwendig für die Unterstreichung mit Pseudo-Element */
    transition: color 0.3s ease; /* Sanfter Übergang der Textfarbe beim Hover */
    line-height: 1.6; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit bei mehreren Links */
}

/* Unterstreichungseffekt für die Basis */
a::after {
    content: ''; /* Pseudo-Element zur Darstellung der Unterstreichung */
    position: absolute;
    left: 0;
    bottom: -2px; /* Unterhalb des Textes */
    width: 100%;
    height: 2px; /* Höhe der Linie */
    background-color: var(--primary-blue); /* Gleiche Farbe wie der Link */
    transition: transform 0.3s ease; /* Übergang für die Animation */
    transform: scaleX(0); /* Startzustand: Unterstreichung nicht sichtbar */
    transform-origin: right; /* Startpunkt der Animation */
}

/* Hover-Effekt für den Link */
a:hover {
    color: #1E3391; /* Leicht dunklere Farbe für den Hover-Effekt */
}

/* Hover-Effekt für die Unterstreichung */
a:hover::after {
    transform: scaleX(1); /* Unterstreichung sichtbar */
    transform-origin: left; /* Animation von links nach rechts */
}

.planCell {
	padding: 0px;
	line-height: 22px;
}

.planNameCell {
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;
	line-height: 22px;
}


.rich-menu-list-border {
	background: linear-gradient(to bottom, var(--bg-light), #f0f0f0); /* Heller Verlauf */
	border-radius: 0 5px 5px 5px; /* Nur die oberen Ecken abrunden */
	border: 0px solid;
	float: left;
	position: absolute;
	opacity: 1;
    box-shadow: var(--shadow-medium); /* Schatten */
}

.rich-menu-list-bg {
	background-image: none !important;
	border-radius: 5px;
	border: 0px solid;
}

.rich-menu-item, .rich-menu-item a, .rich-menu-item a:hover, .rich-menu-item a:visited, .rich-menu-group, .rich-menu-group a, .rich-menu-group a:hover, .rich-menu-group a:visited {
	color: var(--text-medium);
	font-family: Arial,Verdana,sans-serif;
	font-size: 11px;
	transition: var(--transition-standard); /* Weicher Übergang */
}

.rich-menu-item:hover {
	background: none;
    background-color: var(--secondary-blue); /* Helle Hintergrundfarbe beim Hover */
    color: var(--primary-blue);
    border: none;
    padding: 2px 36px 2px 2px;
}

.rich-button {
	background-position: 0;
	background-image: none;
	padding: 6px 12px !important; /* Großzügiges Padding für eine angenehme Klickfläche */
    font-size: 12px; /* Klare Schriftgröße */
    font-weight: normal; /* Deutlich sichtbarer Text */
    color: var(--text-medium); /* Standardfarbe der Schrift */
    background-color: var(--bg-lighter); /* Primärfarbe: Blau */
    border: solid 1px var(--border-light) !important; /* Keine Ränder */
    border-radius: var(--border-radius-medium); /* Leicht abgerundete Ecken für modernes Aussehen */
    cursor: pointer; /* Zeiger-Cursor bei Hover */
    transition: var(--transition-button); /* Sanfte Übergänge für Hover- und Klick-Effekte */
}

/* Hover-Effekt für alle Buttons */
.rich-button:hover {
    background-color: var(--bg-hover); /* Etwas dunklerer Farbton bei Hover */
}

.headerText {
	color: var(--text-medium);
}

/* Deine eigene Klasse, um die Standardstile zu überschreiben */
.noborder {
    box-shadow: none !important; /* Überschreibt den Schatten der Tabelle */
    border: none;
}

.cfeditrow {
	padding: 0px;
	vertical-align: middle;
	border: none !important;
    box-shadow: none !important; /* Überschreibt den Schatten der Tabelle */		
}

/* Sicherstellen, dass Icons nicht umbrechen */
.title-icon {
    margin-left: auto; /* Schiebt die Icon-Gruppe ganz nach rechts */
    display: flex; /* Flexbox für die Icons */
    align-items: center; /* Zentriert die Icons vertikal */
    gap: 1px; /* Abstand zwischen den einzelnen Icons */
    flex-shrink: 0; /* Verhindert das Schrumpfen der Icons */
    flex-wrap: nowrap; /* Verhindert Umbruch */
    white-space: nowrap; /* Text bleibt in einer Zeile */
}

.title-icon-text {
    display: flex;
    align-items: center; /* Stellt sicher, dass der Text mit den Icons vertikal zentriert ist */
    font-size: 14px; /* Optional: Schriftgröße anpassen */
    color: var(--text-dark); /* Optional: Textfarbe setzen */
    min-width: 0; /* Verhindert zu große Textausdehnung */
}

.rich-title-icon {
    position: absolute; 
    top: 0; /* Setzt den Container ganz nach oben */
    right: 5px; /* Abstand von rechts */
    height: 32px; /* Definiert die Höhe des Containers */
    
    display: flex; /* Aktiviert Flexbox */
    align-items: center; /* Zentriert die Icons vertikal */
    gap: 0px; /* Abstand zwischen den einzelnen Icons */
    flex-shrink: 0; /* Verhindert das Schrumpfen des Containers */
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    text-decoration: none !important;
    color: inherit !important;
    position: static !important;
}

.icon-button i {
    transition: color 0.3s;
}

.icon-button:hover {
    background-color: var(--bg-hover); /* Gleicher Hover-Farbton wie andere Buttons */
}

.icon-button:active {
    transform: scale(0.98); /* Leichtes Einziehen für den Klick-Effekt */
    background-color: var(--bg-active); /* Gleicher Klick-Farbton wie andere Buttons */
}

.icon-button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.icon-button::after {
    content: none !important;
}

/* Inverted Variante: Text bei Hover und Active dunkler */
.icon-button.inverted:hover,
.icon-button.inverted:active {
    color: var(--text-dark) !important; /* dunkler Text */
}

.icon-button.inverted:hover i,
.icon-button.inverted:active i {
    color: var(--text-dark) !important;
}


/* Standardgröße */
.icon-button {
    width: 32px;
    height: 32px;
}

.icon-button i {
    font-size: 20px;
}

/* Kleine Variante */
.icon-button.small {
    width: 28px;
    height: 28px;
  
}

.icon-button.small i {
    font-size: 16px;
}

/* Kleinste Variante */
.icon-button.tiny {
    width: 22px;
    height: 22px;
}

.icon-button.tiny i {
    font-size: 16px;
}

.icon-button.micro {
    width: 16px;
    height: 16px;
}

.icon-button.micro i {
    font-size: 12px;
}

.icon-button.new i {
	color: var(--success-text);
}

.icon-button.delete i {
	color: #D11E22;
}

.icon-button.edit i {
	color: var(--primary-blue);
}

.icon-button.warning i {
	color: #fbc02d;
}

.icon-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Abstand zwischen den einzelnen Icons */
}

.icon-image i {
    font-size: 24px;
}

.icon-image.small i {
    font-size: 16px;
}

.icon-image.tiny i {
    font-size: 12px;
}

/* Farben für Icons in div */
.color-error {
    color: var(--error-text); /* Rot für Fehler */
}

.color-warning {
    color: #fbc02d; /* Gelb für Warnung */
}

.color-success {
    color: var(--success-text); /* Grün für Okay */
}

.color-primary {
	color: var(--primary-yellow); /* Unser Gelbton */
}

.ticket-container {
    display: flex;
    align-items: center;  /* Vertikale Zentrierung */
    justify-content: space-between; /* Lässt den Inhalt links und das Icon rechts erscheinen */
    gap: 5px; /* Abstand zwischen Text und Icon */
}

.ticket-content {
    flex-grow: 1; /* Sorgt dafür, dass der Text den verfügbaren Platz nutzt */
    display: flex;
    flex-direction: column;
    
}

.msg-warn {
    font-weight: bold;
    color: #000000;
    background-color: var(--warning-light-bg);
    border-style: solid;
    border-width: 2px;
    border-color: var(--warning-light-border);
    list-style-type: none;
    margin-bottom: 10px;
    padding: 3px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 10px);
    margin-right: 10px !important;
}

.msg-warn-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.prodItem {
	background-color: #fdfaf7; /* basierend auf Creme #F6EDE1 aus BrandColors (shadesgenerator https://mdigi.tools/color-shades/#f6ede1) */
}

.subActivity {
	background-color: #f2f0ef; /* basierend auf Creme #F6EDE1 aus BrandColors (shadesgenerator https://mdigi.tools/color-shades/#f6ede1) */
}

.title {
    position: relative;
    display: flex;
    align-items: center;
}

.title h2 {
    max-width: 550px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    padding-right: 0px !important;
}

.rich-message {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: transparent;
    border: none;
    padding: 0;
    color: var(--error-text);
    font-weight: normal;
}

.rich-message.error {
    background-color: #fdecea;
    border: 1px solid #f5c6cb;
    padding: 3px 8px;
    border-radius: 4px;
}

.rich-message-marker {
    font-size: 14px;
    color: var(--error-text);
    display: flex;
    align-items: center;
    margin-left: 2px;
    margin-right: 0px;
}

.rich-message-label {
    color: var(--error-text);
    font-weight: normal;
    text-decoration: underline;
}

/* Fügt einen roten Stern für Labels hinzu, die auf required-Felder zeigen */
.req-label::after {
    content: " *";
    color: var(--error-text); /* Rote Farbe für den Stern */
    font-weight: bold;
}

/* Hält den Text und das Icon in einer Zeile */
.cfValue-container {
    display: inline-flex;
    align-items: center; /* Vertikale Zentrierung */
    gap: 2px; /* Abstand zwischen Text und Icon */
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    padding: 2px 4px;
    font-size: 12x;
    border: 1px solid var(--border-medium);
    border-radius: var(--border-radius-small);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #5b73db; 
    box-shadow: 0 0 4px rgba(40, 67, 181, 0.5);
}


input:disabled,
textarea:disabled,
select:disabled {
    background-color: #f5f5f5;
    color: #888;
    cursor: not-allowed;
}

/* Grundstil für alle Zustände der ComboBox-Buttons, angepasst an Ihre bestehenden Button-Stile */
.rich-combobox-button-inactive,
.rich-combobox-button-icon-inactive,
.rich-combobox-button,
.rich-combobox-button-icon,
.rich-combobox-button-pressed,
.rich-combobox-button-icon-pressed,
.rich-combobox-button-hover,
.rich-combobox-button-icon-hover,
[id$="comboboxButton"] {
  padding: 1.5px 3px !important;
  font-size: 12px !important;
  font-weight: normal !important;
  color: var(--text-medium) !important;
  background-color: var(--bg-lighter) !important;
  background-image: url('../img/caret-down.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 12px 12px !important;
  border: solid 1px var(--border-light) !important;
  border-radius: var(--border-radius-small) !important;
  cursor: pointer !important;
  transition: var(--transition-button) !important;
}

/* Hover-Effekt für ComboBox-Buttons */
.rich-combobox-button-hover,
.rich-combobox-button-icon-hover,
.rich-combobox-button-inactive:hover,
.rich-combobox-button-icon-inactive:hover,
.rich-combobox-button:hover,
.rich-combobox-button-icon:hover,
[id$="comboboxButton"]:hover {
  background-color: var(--bg-hover) !important;
}

/* Aktiver/gedrückter Zustand (beim Klicken) */
.rich-combobox-button-pressed,
.rich-combobox-button-icon-pressed,
.rich-combobox-button:active,
.rich-combobox-button-icon:active,
[id$="comboboxButton"]:active {
  transform: scale(0.98) !important;
  background-color: var(--bg-active) !important;
}

.headerRow {
  color: #000;
  background-color: #f2f0ef;
}

.annotation {
	background-color: #f2f0ef; /* #EFEFEF; */
}

.rich-separator {
	background-image: none !important;
	background-color: #cdcbc8;
	height: 1px !important;
}

.mceLayout {
	border-left-color: #cdcbc8 !important;
	border-right-color: #cdcbc8 !important;
}

.richfacesSkin .mceIframeContainer {
	border-top-color: #cdcbc8 !important;
}

.richfacesSkin table.mceLayout tr.mceLast td {
	border-bottom-color: #cdcbc8 !important;
}

.richfacesSkin table.mceLayout tr.mceFirst td {
	border-top-color: #cdcbc8 !important;
}

.mceToolbar {
   background-color: #f2f0ef !important;
}

.mceButton {
   background-color: #f2f0ef !important;
}

.inplace {
	color: var(--text-dark);
	border-color: var(--text-dark);
}

.rich-inplace-select {
	padding-top: 0px;
}

.hoverable-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-color: #f5f8ff;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.15s ease;
}

/* Styling für den Inhalt des Ticket-Content-Panels */
.ticket-content-panel .rich-panel-body div h1 {
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 1px solid #ecf0f1;
    padding-bottom: 8px;
}

.ticket-content-panel .rich-panel-body div h2 {
    font-size: 1.2em;
    margin: 12px 0;
}

.ticket-content-panel .rich-panel-body div p {
    margin: 12px 0;
    line-height: 1.1;
}

.ticket-content-panel .rich-panel-body div ul {
    margin: 15px 0;
    padding-left: 20px;
}

.ticket-content-panel .rich-panel-body div li {
    margin-bottom: 8px;
    line-height: 1.4;
    list-style-type: disc;
    padding-left: 5px;
}

/* Spezielles Styling für verschachtelte Listen */
.ticket-content-panel .rich-panel-body div li li {
    list-style-type: circle;
}

.svg-signature {
	width: 90px;
}