// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.

.badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius:0.25rem;
  background-color:rgba(0,0,0,0.5);
  color: #fff;
  transition: background-color 0.3s;

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }
  &:hover {
    color: #fff;
  }
  &:focus {
    color: #fff;
  }
}
.rtl .badge{
  padding: 0.25em 0.5em 0.15em;
}

// Quick fix for badges in buttons
.btn .badge {
  position: relative;
  top: -1px;
}

.badge.rounded {
  padding-right: 0.5em;
  padding-left: 0.5em;
}
.badge.circle {
  padding-right: 1em;
  padding-left: 1em;
}

a.badge.danger{
  color:#fff!important;
}

.badge.clicked{
  animation:pulsePulseBorder 0.5s infinite ease-in-out;
}
@keyframes pulsePulseBorder { 0%{box-shadow: 0 0 5px 2px #ddd;} 70%{box-shadow: 0 0 5px 2px #aaa;} 100%{box-shadow: 0 0 5px 2px #ddd;}}