.datalist {
  color: var(--flex-text-default);
  background: var(--flex-bg-white);
  box-shadow: var(--flex-form-field-shadow);
  -webkit-box-shadow: var(--flex-form-field-shadow);
  -moz-box-shadow: var(--flex-form-field-shadow);
  border: var(--flex-form-field-container-border);
  border-radius: var(--flex-form-field-container-border-radius);
  margin-top: .2em;
  margin-bottom: .2em;
  overflow: auto;
  z-index: 1500;
  max-height: 15rem;
  transition: var(--flex-transation-opacity-inout);
  opacity: 1;
}

.datalist.hidden {
  position: absolute !important; 
  top: -9999px !important; 
  left: -9999px !important;
  opacity: 0;
}


.datalist.empty {
  visibility: hidden;
}

.datalist .option.active,
.datalist .option:hover {
  background: var(--flex-bg-light);
}

.datalist .option {
  padding: 0;
  margin: 0;
}

.datalist .option > div {
  line-height: 120%;
  min-height: 1.5rem;
  font-size: var(--flex-text-sm);
  color: var(--flex-text-default);
  padding: .5em 1em;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.datalist .option > div small.aid {
  display: block;
  color: var(--flex-text-muted);
  font-size: 90%;
}

.datalist .option.color-hint {
  padding: .25em .5em;
}

.datalist > .option.color-hint:first-child {
  margin-top: .25em;
}

.datalist > .option.color-hint:last-child {
  margin-bottom: .25em;
}

.datalist .option.color-hint > div {
  border-radius: .25em;
  color: white;
  font-weight: bold;
}