.orange-dot {
  background-color:#ffc066;
  height: 1rem;
  width: 1rem;
  border: solid thin orange;
  border-color: #ffc066 #ffc066 #f2a538 #f2a538;
  border-radius: 50%;
  display: inline-block;
}

.light-yellow-dot {
   background-color:#fff1bd;
   height: 1rem;
   width: 1rem;
   border: solid thin orange;
   border-color: #fff1bd #fff1bd #ffea9c #ffea9c;
   border-radius: 50%;
   display: inline-block;
}

.red-dot {
  background-color:#ff6961;
  height: 1rem;
  width: 1rem;
  border: solid thin orange;
  border-color: #ff6961 #ff6961 #f0352b #f0352b;
  border-radius: 50%;
  display: inline-block;
}

.green-dot {
  background-color:#77dd77;
  height: 1rem;
  width: 1rem;
  border: solid thin orange;
  border-color: #77dd77 #77dd77 #34c734 #34c734;
  border-radius: 50%;
  display: inline-block;
}


.black-dot {
  background-color:#1c0d02;
  height: 1rem;
  width: 1rem;
  border: solid thin orange;
  border-color: #1c0d02 #1c0d02 #9c9c9c #9c9c9c;
  border-radius: 50%;
  display: inline-block;
}

.grey-dot {
  background-color:#9c9c9c;
  height: 1rem;
  width: 1rem;
  border: solid thin orange;
  border-color: #9c9c9c #9c9c9c #1c0d02 #1c0d02;
  border-radius: 50%;
  display: inline-block;
}

.blue-dot {
  background-color:#053787;
  height: 1rem;
  width: 1rem;
  border: solid thin orange;
  border-color: #053787 #053787 #9c9c9c #9c9c9c;
  border-radius: 50%;
  display: inline-block;
}