mdi-selector/dist/ds-library.css

selcte matirail design icon

/*! Material Design IcondsSelector  v1.2.0 */.search-header {
  display: flex;
  align-items: center;
}

.content {
  max-height: 300px;
  overflow-y: scroll;
}

.content::-webkit-scrollbar {
  width: 8px;
}

.content::-webkit-scrollbar-track {
  background-color: #f2f2f2;
}

.content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.icon_body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

input[type=search] {
  border: none;
  background: transparent;
  margin: 0;
  padding: 7px 8px;
  font-size: 14px;
  color: inherit;
  border: 1px solid transparent;
  border-radius: inherit;
}

input[type=search]::placeholder {
  color: #bbb;
}

form.nosubmit {
  border: none;
  padding: 0;
  margin: 0 10px;
}

input.nosubmit {
  border: 1px solid #555;
  width: 100%;
  padding: 9px 4px 9px 40px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

.line {
  width: 100%;
  margin: 20px;
}

.flex-cell {
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex: 0 1 150px;
  height: 100px;
  text-align: center;
  transition: 0.5s;
}

.flex-cell:hover {
  background-color: gray;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.2s;
}

.flex-cell:hover .caption {
  color: white;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.caption {
  padding: 2px;
  color: #757575;
  font-size: 11px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iconbox {
  word-wrap: break-word;
}

i.mdi {
  font-size: 30px;
}