.addElement:hover {
  background-color: #dee2e6 !important;
}

.a-bg:hover {
  background-color: #f6f9fc;
}

.badge-info {
  color: #03acca;
  background-color: #aaedf9;
}

.badge-success {
  color: #1aae6f;
  background-color: #b0eed3;
}

.badge-warning {
  color: #D28D32;
  background-color: #EED3B0;
}

.border-bottom {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.border-top-white {
  border-top: solid 1px white;
}

.header-img {
  height: 160px;
  font-size: 1rem;
  color: #03acca;
}

.cj tbody tr td:hover {
  background-color: #f0f0f0; /* hellgrau */
}


.cj-fixed {
  width: 220px;
}

.cj-dynamic {
  border: 2px solid white;
}

.cj-table {
  width: 100%;
}

.cj-spacer {
  border-bottom: 40px solid rgba(94, 114, 228, 0.2);
  /* background-color: blue; */
}

.fixed-width-20 {
  width: 20%; /* Breite der dritten Spalte */
}

.fixed-width-40 {
  width: 40%; /* Breite der ersten beiden Spalten */
}

.img-container {
  display: flex;
  align-items: center;
}

.img-container img,
.img-container .fa-image-user {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: block;
}

.img-container .fa-image-user {
  font-size: 48px;
  line-height: 48px;
}

.line-break {
  word-break: break-all;
}

.max-width-column {
  max-width: 50px;
}

.rotate-270 {
  transform: rotate(270deg);
}

.description {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
  -webkit-line-clamp: 2; /* Für Webkit-basierte Browser */
  line-clamp: 2; /* Standardisierte Eigenschaft für zukünftige Unterstützung */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flexbox-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: 2.6em; /* Höhe entsprechend der Zeilenanzahl einstellen */
  min-height: 2.6em; /* Höhe entsprechend der Zeilenanzahl einstellen */
  transition: height 0.3s ease;
}

.card:hover .description {
  -webkit-line-clamp: unset;
  line-clamp: unset; /* Standardisierte Eigenschaft für zukünftige Unterstützung */
  height: auto;
  white-space: normal;
  min-height: 2.6em; /* Höhe entsprechend der Zeilenanzahl einstellen */
  overflow: visible;
}

.img-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.persona-img {
  max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter als der Container wird */
  height: auto; /* Bewahrt das Seitenverhältnis des Bildes */
  max-height: 50px; /* Legt eine maximale Höhe für die Bilder fest, um die Größe zu regulieren */
  margin-bottom: 5px; /* Abstand nach unten, um Umbruch zu unterstützen */
}

#serviceDesignSuggestions {
  max-height: 320px; /* Oder eine andere gewünschte Höhe */
  overflow-y: auto;   /* Scrollen aktivieren, wenn die Liste länger ist */
  z-index: 1050;      /* Sicherstellen, dass die Liste über anderen Elementen bleibt */
}

#assigneeSuggestions {
  max-height: 320px; /* Oder eine andere gewünschte Höhe */
  overflow-y: auto;   /* Scrollen aktivieren, wenn die Liste länger ist */
  z-index: 1050;      /* Sicherstellen, dass die Liste über anderen Elementen bleibt */
}

#relatedTicketSuggestions {
  max-height: 320px; /* Oder eine andere gewünschte Höhe */
  overflow-y: auto;   /* Scrollen aktivieren, wenn die Liste länger ist */
  z-index: 1050;      /* Sicherstellen, dass die Liste über anderen Elementen bleibt */
}

.ticket-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.ticket-key {
  font-weight: bold;
}

.ticket-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-left: 8px;
  font-weight: bolder;
  text-transform: uppercase;
}

.related-ticket-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-top: 1px solid #dee2e6; /* Nur Bottom Border */
  border-radius: 0; /* Standardmäßig keine Abrundung */
}

.ticket-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tickets-icon {
  width: 12px;
  height: 12px;
  /* object-fit: contain; */
}

.ticket-key {
  font-weight: bold;
}

.badge-blue {
  color: rgb(38, 67, 233);
  background-color: rgb(234, 236, 251);
}

.badge-green {
  color: rgb(26, 174, 111);
  background-color: rgb(176, 238, 211);
}

.badge-red {
  color: rgb(248, 0, 49);
  background-color: rgb(253, 209, 218);
}

.badge-yellow {
  color: rgb(166, 140, 18);
  background-color: rgb(244, 241, 207);
}

.badge-gray {
  color: rgb(98, 116, 162);
  background-color: rgb(228, 232, 237);
}

@media (max-width: 576px) {
  .persona-img {
      max-height: 30px; /* Kleinere Bilder auf sehr schmalen Bildschirmen */
  }
}

/* Schriftgröße der Pips anpassen */
.noUi-value {
  font-size: 12px;
  font-weight: 600;
  color: #344767;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 10px;
  width: 2px;
}

/* Zusätzliche CSS-Regeln für kleinere Displays */
.small-icon i {
  font-size: 1.5rem; /* Stelle sicher, dass die Größe kleiner ist */
}

.card-mara {
  min-height: 256px;
}

.underline-link {
  text-decoration: underline;
}

.folder-subtree {
  margin-left: 8px; /* oder 10px, je nachdem wie du willst */
}