svg.icon { 
  width: 18px;
  height: 18px;
}
.green svg {
    fill: #00af4c;
}
svg.icon.white {
  fill: #fff;
}
svg.icon.green {
    fill: #00af4c;
}
svg.icon.grey {
  fill: #DDDDDD;
}
svg.icon.grey20 {
  fill: #333;
}
svg.icon.grey40 {
  fill: #666;
}
svg.icon.blue,
svg.icon.like:hover {
  fill: #428bca;
}
svg.icon.red,
svg.icon.heart:hover {
  fill: #f41002;
}
svg.icon.golden{
  fill: #dfaf51;
}
svg.icon.small {
  width: 16px;
  height: 16px;
}
svg.icon.large {
  width: 24px;
  height: 24px;
}
svg.icon.badge-broadcasting-sound {
  fill: #00af4c;
  color: #ffffff;
}
svg.icon.badge-broadcasting {
  fill: #00af4c;
  color: #ffffff;
}
svg.icon.badge-buzzmode {
  fill: #662467;
  color: #ffffff;
}
svg.icon.badge-confirmed {
  fill: #9377b5;
  color: #ffffff;
}
svg.icon.badge-crown {
  color: #ffffff;
}
svg.icon.badge-friends {
  fill: #4a8ecc;
  color: #ffffff;
}
svg.icon.badge-imc {
  fill: #00af4c;
  color: #ffffff;
}
svg.icon.badge-mobileim {
  fill: #00af4c;
  color: #ffffff;
}
svg.icon.badge-online {
  fill: #00af4c;
  color: #ffffff;
}
svg.icon.badge-verified {
  fill: #006aac;
  color: #ffffff;
}
svg.icon.rank1 {
    fill: #F15B4E;
}
svg.icon.rank2 {
    fill: #8CC0C7;
}
svg.icon.place-1 {
  fill: #fcd203;
  color: #ff7171;
}
svg.icon.place-2 {
  fill: #fcd203;
  color: #f99b06;
}
svg.icon.place-3 {
  fill: #fcd203;
}
svg.icon:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
svg.icon:hover:after {
  background: #333;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-icon-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
path.badge:empty{  /*hack for bootstrap .badge:empty*/
  display: block;
}