#circle-container {
  width: 22px;
  height: 22px;
  position:relative;
  z-index:1;
  border:solid 1px #70122c;
  border-radius:50%;
}

#circle-container-full-green {
  width: 22px;
  height: 22px;
  position:relative;
  z-index:1;
  border:solid 1px #86D830;
  border-radius:50%;
  background-color: #86D830;
}

#circle-container-full-red {
  width: 22px;
  height: 22px;
  position:relative;
  z-index:1;
  border:solid 1px #960019;
  border-radius:50%;
  background-color: #960019;
}

.quarter {
  width: 10px;
  height: 10px;
  border: solid 1 px black;
}

.top-left-white {
  border-top-left-radius: 200px;
  background: transparent;
  float: left
}

.top-left {
  border-top-left-radius: 200px;
  background: #70122c;
  float: left
}

.top-right-white {
  border-top-right-radius: 200px;
  background: transparent;
  float: right
}
.top-right {
  border-top-right-radius: 200px;
  background: #70122c;
  float: right
}

.bottom-left {
  border-bottom-left-radius: 200px;
  background: #70122c;
  float: left
}

.bottom-left-white {
  border-bottom-left-radius: 200px;
  background: transparent;
  float: left
}

.bottom-right {
  border-bottom-right-radius: 200px;
  background: #70122c;
  float: right
}

.bottom-right-white {
  border-bottom-right-radius: 200px;
  background: transparent;
  float: right
}