.bubble-blue {
  display: block; 
  position: absolute;
  cursor: pointer; 
}

.bubble-blue:hover:after {
  background-color: blue;
}

.bubble-blue:after {
  content: "";
  background-color: blue;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
}

.bubble-blue .bubble-blue-outer-dot {
  margin: 1px;
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 0, 255, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-blue-pulse 1.5s linear infinite;
  -moz-animation: bubble-blue-pulse 1.5s linear infinite;
  -o-animation: bubble-blue-pulse 1.5s linear infinite;
  animation: bubble-blue-pulse 1.5s linear infinite
}

.bubble-blue .bubble-blue-inner-dot {
 
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 0, 255, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-blue-pulse 1.5s linear infinite;
  -moz-animation: bubble-blue-pulse 1.5s linear infinite;
  -o-animation: bubble-blue-pulse 1.5s linear infinite;
  animation: bubble-blue-pulse 1.5s linear infinite
}

.bubble-blue .bubble-blue-inner-dot:after {
  content: "";
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 0, 255, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-blue-pulse 1.5s linear infinite;
  -moz-animation: bubble-blue-pulse 1.5s linear infinite;
  -o-animation: bubble-blue-pulse 1.5s linear infinite;
  animation: bubble-blue-pulse 1.5s linear infinite
}

@-webkit-keyframes bubble-blue-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@keyframes bubble-blue-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-moz-keyframes bubble-blue-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-o-keyframes bubble-blue-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

.bubble-off {
  display: block; 
  position: absolute;
  cursor: pointer; 
}

.bubble-off:hover:after {
  background-color: red
}

.bubble-off:after {
  content: "";
  background-color: red;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
}

.bubble-off .bubble-off-outer-dot {
  margin: 1px;
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(255, 0, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-off-pulse 1.5s linear infinite;
  -moz-animation: bubble-off-pulse 1.5s linear infinite;
  -o-animation: bubble-off-pulse 1.5s linear infinite;
  animation: bubble-off-pulse 1.5s linear infinite
}

.bubble-off .bubble-off-inner-dot {
 
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(255, 0, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-off-pulse 1.5s linear infinite;
  -moz-animation: bubble-off-pulse 1.5s linear infinite;
  -o-animation: bubble-off-pulse 1.5s linear infinite;
  animation: bubble-off-pulse 1.5s linear infinite
}

.bubble-off .bubble-off-inner-dot:after {
  content: "";
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(255, 0, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-off-pulse 1.5s linear infinite;
  -moz-animation: bubble-off-pulse 1.5s linear infinite;
  -o-animation: bubble-off-pulse 1.5s linear infinite;
  animation: bubble-off-pulse 1.5s linear infinite
}

@-webkit-keyframes bubble-off-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@keyframes bubble-off-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-moz-keyframes bubble-off-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-o-keyframes bubble-off-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}


.bubble-on {
  display: block; 
  position: absolute;
  cursor: pointer; 
}

.bubble-on:hover:after {
  background-color: green;
}

.bubble-on:after {
  content: "";
  background-color: green;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
}

.bubble-on .bubble-on-outer-dot {
  margin: 1px;
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 250, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-on-pulse 1.5s linear infinite;
  -moz-animation: bubble-on-pulse 1.5s linear infinite;
  -o-animation: bubble-on-pulse 1.5s linear infinite;
  animation: bubble-on-pulse 1.5s linear infinite
}

.bubble-on .bubble-on-inner-dot {
 
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 255, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-on-pulse 1.5s linear infinite;
  -moz-animation: bubble-on-pulse 1.5s linear infinite;
  -o-animation: bubble-on-pulse 1.5s linear infinite;
  animation: bubble-on-pulse 1.5s linear infinite
}

.bubble-on .bubble-on-inner-dot:after {
  content: "";
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(0, 255, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-on-pulse 1.5s linear infinite;
  -moz-animation: bubble-on-pulse 1.5s linear infinite;
  -o-animation: bubble-on-pulse 1.5s linear infinite;
  animation: bubble-on-pulse 1.5s linear infinite
}

@-webkit-keyframes bubble-on-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@keyframes bubble-on-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-moz-keyframes bubble-on-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-o-keyframes bubble-on-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

.bubble-orange {
  display: block; 
  position: absolute;
  cursor: pointer; 
}

.bubble-orange:hover:after {
  background-color: orange;
}

.bubble-orange:after {
  content: "";
  background-color: orange;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
}

.bubble-orange .bubble-orange-outer-dot {
  margin: 1px;
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(255, 0, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-orange-pulse 1.5s linear infinite;
  -moz-animation: bubble-orange-pulse 1.5s linear infinite;
  -o-animation: bubble-orange-pulse 1.5s linear infinite;
  animation: bubble-orange-pulse 1.5s linear infinite
}

.bubble-orange .bubble-orange-inner-dot {
 
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(255, 0, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-orange-pulse 1.5s linear infinite;
  -moz-animation: bubble-orange-pulse 1.5s linear infinite;
  -o-animation: bubble-orange-pulse 1.5s linear infinite;
  animation: bubble-orange-pulse 1.5s linear infinite
}

.bubble-orange .bubble-orange-inner-dot:after {
  content: "";
  display: block;
  text-align: center;
  opacity: 1;
  background-color: rgba(255, 0, 0, 0.4);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  -webkit-animation: bubble-orange-pulse 1.5s linear infinite;
  -moz-animation: bubble-orange-pulse 1.5s linear infinite;
  -o-animation: bubble-orange-pulse 1.5s linear infinite;
  animation: bubble-orange-pulse 1.5s linear infinite
}

@-webkit-keyframes bubble-orange-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@keyframes bubble-orange-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-moz-keyframes bubble-orange-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

@-o-keyframes bubble-orange-pulse {
  0% {
    transform: scale(1);
    opacity: .75
  }
  25% {
    transform: scale(1);
    opacity: .75
  }
  100% {
    transform: scale(2.5);
    opacity: 0
  }
}

/*Center-div (Not part of the symbol)*/

.center-div {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 14px;
  height: 14px;
}