nitro/priv/css/multi-select-webcomponent.css

multi-select{
  display: flex;
  align-items: end;
  height: max-content;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px #ddd;
}
/*
button.msw-clearbutton{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(91,192,222,.6);
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%23f00'/%3E%3C/svg%3E") 50% 50% no-repeat;
}
button.msw-selectallbutton{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(91,192,222,.6);
  cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 448 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M413.505 91.951L133.49 371.966l-98.995-98.995c-4.686-4.686-12.284-4.686-16.971 0L6.211 284.284c-4.686 4.686-4.686 12.284 0 16.971l118.794 118.794c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-11.314-11.314c-4.686-4.686-12.284-4.686-16.97 0z' fill='%230f0'/%3E%3C/svg%3E") 50% 50% no-repeat;
}
*/
input.msw-searchbox{
  width: 100%;
  flex-grow: 1;
  border: none !important;
  box-shadow: none !important;
  outline: none;
}
div.msw-selected{
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}
div.msw-selecteditem{
  display: inline-block;
  padding: 0 0.35em 0.8em 0.8em;
  margin: 0.25em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #0d6efd;
  border-radius: 0.25em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
div.msw-selecteditem::after {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%23f00'/%3E%3C/svg%3E");
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 3px 0 5px;
  width: 15px;
  height: 15px;
  /* background-color: #fff; */
}
div.msw-dropdown{
  display: none;
  width: 100%;
  position: relative;
  z-index: 2;
}
div.msw-dropdownitem{
  background: #fff; /* #7DD9F5 */
  padding: 5px;
  -webkit-user-select: none;
  user-select: none;
}
div.msw-dropdownitem:hover{
  background: #AEE4F5;
}
div.msw-disabled{
  background: #F0F0F0;
}