.glowing-circle {
  width: 10px; /* Equal height and width for a perfect circle */
  height: 10px;
  background-color: #32CD32; /* Main color of the circle */
  border-radius: 50%; /* Makes the square element a circle */
  box-shadow: 0 0 3px 1px #32CD32; /* Adds the glow effect */
  animation: pulse-glow 2s infinite alternate; /* Apply the animation */
}

@keyframes pulse-glow {
  from {
    box-shadow: 0 0 3px 1px #32CD32; /* Starting glow size/intensity */
  }
  to {
    box-shadow: 0 0 6px 2px #32CD32; /* Ending (larger) glow size/intensity */
  }
}

.glowing-circle-danger {
  width: 10px; /* Equal height and width for a perfect circle */
  height: 10px;
  background-color: #dc3545; /* Main color of the circle */
  border-radius: 50%; /* Makes the square element a circle */
  box-shadow: 0 0 3px 1px #dc3545; /* Adds the glow effect */
  animation: pulse-glow-danger 2s infinite alternate; /* Apply the animation */
}

@keyframes pulse-glow-danger {
  from {
    box-shadow: 0 0 3px 1px #dc3545; /* Starting glow size/intensity */
  }
  to {
    box-shadow: 0 0 6px 2px #dc3545; /* Ending (larger) glow size/intensity */
  }
}

.glowing-circle-warning {
  width: 10px; /* Equal height and width for a perfect circle */
  height: 10px;
  background-color: #ffc107; /* Main color of the circle */
  border-radius: 50%; /* Makes the square element a circle */
  box-shadow: 0 0 3px 1px #ffc107; /* Adds the glow effect */
  animation: pulse-glow-danger 2s infinite alternate; /* Apply the animation */
}

@keyframes pulse-glow-danger {
  from {
    box-shadow: 0 0 3px 1px #ffc107; /* Starting glow size/intensity */
  }
  to {
    box-shadow: 0 0 6px 2px #ffc107; /* Ending (larger) glow size/intensity */
  }
}