.md-chips {
  .md-chip {
    margin: 0 5px 3px 0;
  }
}

.md-chips-center {
  justify-content: center;
  display: flex;
  animation: slideIn 5s linear infinite;
}

.md-chip {
  display: inline-block;
  background: #e0e0e0;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
  &.md-chip-hover:hover {
    background: #15ba70;
  }
}

.md-chip-icon {
  display: block;
  float: left;
  background: #009587;
  width: 32px;
  border-radius: 50%;
  text-align: center;
  color: white;
  margin: 0 8px 0 -12px;
}

@keyframes zoomIn {
  0% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
  100% {
        transform: translateX(-50%) translateY(-50%) scale(1.5);
    }
}

.md-chip-clickable {
 cursor: pointer;
}

.md-chip-link{
  color: #555;
}

.md-chip-link:hover {
  text-decoration: none;
}

.md-chip-remove {
  display: inline-block;
  background: #aaa;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  padding: 0;
  margin: 4px -4px 4px 4px;
  cursor: pointer;
  font: inherit;
  line-height: 20px;
  color: #FFF;
}

.md-chip-remove-span {
  margin:0 0px 0px 6px;
  color:#FFF;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.md-chip {
  opacity: 0; /* Start with hidden chips */
  animation: fadeIn 3.5s alternate-reverse infinite ; 
}

.md-chip:nth-child(1) {
  animation-delay: 0s; /* No delay for the first chip */
}

.md-chip:nth-child(2) {
  animation-delay: 0.2s; /* Delay for the second chip */
}

.md-chip:nth-child(3) {
  animation-delay: 0.4s; /* Delay for the third chip */
}

/* Define the keyframes for sliding effect */
@keyframes slideIn {
  from {
    transform: translateX(-150%);
  }
  to {
    transform: translateX(150%);
  }
}

.row {
  opacity: 1; 
  animation-play-state: running;
}

.row:nth-child(1) {
  animation-delay: 0s; /* No delay for the first chip */
}

.row:nth-child(2) {
  animation-delay: 2s; /* Delay for the second chip */
}

.row:nth-child(3) {
  animation-delay: 4s; /* Delay for the third chip */
}
.row:nth-child(4) {
  animation-delay: 1s; /* No delay for the first chip */
}

.row:nth-child(5) {
  animation-delay: 2s; /* Delay for the second chip */
}

.row:nth-child(6) {
  animation-delay: 4s; /* Delay for the third chip */
}
.row:nth-child(7) {
  animation-delay: 1s; /* No delay for the first chip */
}

.row:nth-child(8) {
  animation-delay: 2s; /* Delay for the second chip */
}

.row:nth-child(9) {
  animation-delay: 4s; /* Delay for the third chip */
}

/* .row:hover {
  animation-play-state: paused;
} */