.chip-group{
  display:flex;
  flex-wrap:wrap;
  justify-content: start;
}

.chip-group:focus{
    outline: none;
}
.chip.chip-checkbox > .chip-add-icon::after {
  content:"add"
}
.chip.chip-checkbox.active > .chip-add-icon::after {
  content:"done"
}
.chip > * {
  margin-right:2px;
  margin-left:2px;
}
.chip input {
  display: none;
  outline: none;
}
.chip.chip-checkbox,
.chip.chip-toggle,
.chip.clickable{
  cursor: pointer;
}
.chip.active {
  background-color: #555555;
  border-color:#c3c2c2;
  color: white;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12)
}
.chip:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.chip:focus {
    outline: none;
    background-color: white;
    border-color: #555555;
 }
.chip.active:focus{
  outline: none;
  border-color: #ccc;
  background-color: #555555;
}
.chip button{
  margin-top:0;
  margin-bottom:0;
  padding:0;
  background:none;
  display:inline-flex;
}
.chip {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: #fff;
  color: #757373;
  border-radius: 30px;
  border: 1px solid #d3d2d2;
  display: inline-flex;
  align-items:center;
  padding: 8px 12px 8px 12px;
  margin-right:6px;
  margin-bottom:6px;
}
.chip i.material-icons {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 767.9px){
  .chip-group{
    justify-content: center;
  }
  .chip:hover{
    box-shadow: none;
  }
}