.uip { position: relative; }

.uip-input {
  width: 100%; box-sizing: border-box; padding: 4px 6px;
  border: 1px solid #cbd5e1; border-radius: 3px; font-size: 12px;
  font-family: inherit;
}

.uip-list {
  position: absolute; left: 0; right: 0; z-index: 50;
  max-height: 190px; overflow-y: auto; background: #fff;
  border: 1px solid #94a3b8; border-top: 0;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}

.uip-row { padding: 4px 6px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.uip-row.uip-act { background: #e0e7ff; }
.uip-row.uip-on  { background: #ecfdf5; }
.uip-row.uip-on.uip-act { background: #d1fae5; }

.uip-name { font-size: 12px; color: #0f172a; }
 
.uip-det  { font-size: 10px; color: #64748b; margin-top: 1px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.uip-empty { padding: 5px 6px; font-size: 11px; color: #94a3b8; }
.uip-empty a { color: #4338ca; }

 
.uip-groups { margin-bottom: 3px; }
.uip-g {
  display: inline-block; border: 1px solid #cbd5e1; border-radius: 3px;
  padding: 1px 6px; margin: 0 3px 3px 0; font-size: 10px;
  color: #475569; background: #f8fafc; cursor: pointer;
}
.uip-g b { font-weight: 600; color: #94a3b8; }
.uip-g.uip-gon { background: #1f3864; border-color: #1f3864; color: #fff; }
.uip-g.uip-gon b { color: #c7d2fe; }

.uip-note  { font-size: 10px; margin-top: 2px; min-height: 12px; }
.uip-ok    { color: #047857; font-weight: 600; }
.uip-muted { color: #94a3b8; }

.uip-chips { margin-bottom: 3px; }
.uip-chip {
  display: inline-block; background: #1f3864; color: #fff;
  border-radius: 10px; padding: 1px 7px; margin: 0 3px 3px 0;
  font-size: 10px; cursor: pointer;
}
.uip-chip b { opacity: .7; }

 
.uif { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 3px;
       padding: 6px 7px; margin: 6px 0; color: #92400e; font-size: 11px; }
.uif-list { margin-top: 3px; }
.uif-row { padding: 1px 0; }
.uif-row a { color: #92400e; }
.uif-by { color: #b45309; }
.uif-note { margin-top: 4px; color: #b45309; }