/* Auto-Complete für das Suchfeld auf allen Seiten
   und für die App-Suche */

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 300px !important;
  padding: 0;
  margin: 0 0 10px 25px;
  list-style: none;
  /* background-color: #fff; */
  background-color: var(--hintergrund);
  text-transform: initial !important;
  font-family: 'Source Sans Pro',arial,sans-serif;
  font-size: 18px;
  font-weight: 300;
  border: 1px solid transparent !important; /* wird benötigt, falls Nutzer sich eigene Farben einstellen und dann der Box Shadow ausfällt */
  box-shadow: 0 0 10px rgba(138, 138, 138, 0.5);
  max-height: 200px;
  overflow-y: scroll; 
  overflow-x: hidden;
}


.ui-menu .ui-menu-item {  
  border-bottom: none !important;
  /* padding: 5px 15px !important; */
  padding: 0 !important;
}

.ui-menu .ui-menu-item b {
  font-weight: 600;
  /* color: #4b4a48 !important; */
  color: var(--schrift);
}

/* .ui-menu-item > a.ui-corner-all { */
.ui-menu-item a.ui-corner-all {
  display: block;
  clear: both;
  font-weight: normal;
  line-height: 27px;
  /* color: #0a0a0a; */
  color: var(--schrift);
  white-space: nowrap;
  text-decoration: none;
  text-transform: lowercase !important;
}

/* .ui-menu .ui-menu-item > a.ui-corner-all:first-letter { */
.ui-menu .ui-menu-item a.ui-corner-all:first-letter {
  text-transform: uppercase;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper {
	padding: 5px 15px;
}

/* jQuery UI 1.12.1: li.ui-menu-item div.ui-state-active */
/* jQuery UI 1.11.3: li.ui-menu-item.ui-state-focus */
.ui-menu .ui-menu-item .ui-state-active,
.ui-menu .ui-menu-item.ui-state-focus {
	color: #fff;
	font-weight: 400; /* weiß auf dunkelblau: etwas fetter als schwarz auf weiß für besser Lesbarkeit */
	background-image: linear-gradient(44deg, rgba(2,64,127,0.9), rgba(4,106,162,0.9)) !important;
	border-color: transparent;
	border-radius: 0px;
	background-image: none;
}

/* jQuery UI 1.12.1: li.ui-menu-item div.ui-state-active */
/* jQuery UI 1.11.3: li.ui-menu-item.ui-state-focus */
.ui-menu .ui-menu-item .ui-state-active b,
.ui-menu .ui-menu-item.ui-state-focus b {
	font-weight: 600;
	color: #fff !important;
}
/* ENDE Auto-Complete für Suchfeld 
*/

/* Button zum Aufklappen der Liste an Combobox (z.B. Schlagworte für App-Suche) */
/* wir entfernen den rechten Rand am Eingabefeld und machen es ewas kleiner, 
   damit der Button rechts daneben ohne Trennstrich angezeigt wird. */
.form-content .ui-combobox {
	position: relative;
}

.form-content .ui-combobox .ui-combobox-input {
	background-image: none; /* Hintergrund-Bild stammt aus gemeinsamer Formatierung mit select in standard.css */
	/* height: 52px;*/
	width: 100%; 
	/* width: calc(100% - 50px); */
}

.ui-combobox a,
a.ui-combobox-toggle {
	background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/angle-down.svg');
	/* background-color: #fff !important; */
	background-color: var(--hintergrund) !important;
	background-repeat: no-repeat;
	background-size: 25px 25px;
	background-position: calc(100% - 10px);
	height: calc(1.65rem + 22px);
	width: 50px;
	padding: 0 10px !important;
	position: absolute;
	top: -12px;
	left: auto;
	right: 1px;
	border: none;
	border-left: 1px solid #ccc;
}

/* aktiver Button */
.ui-combobox a:hover,
.ui-combobox a:focus,
.ui-combobox a:active,
a.ui-combobox-toggle:hover,
a.ui-combobox-toggle:focus,
a.ui-combobox-toggle:active {
	background-image: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/angle-top.svg');
	/* background-color: #fff !important; */
	background-color: var(--hintergrund);
	background-repeat: no-repeat;
	background-size: 25px 25px;
	background-position: calc(100% - 10px);
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	border: 1px solid #046aa2;
	outline: 5px solid #e9f2f7;
}