.content {
  padding-top: 64px;
  background: transparent;
}

.dot-50 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 0.3;
  display: inline-block;
  background: #fafafa;
}

.dot-100 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.3;
  display: inline-block;
  background: #fafafa;
}

.dot-150 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: 0.3;
  display: inline-block;
  background: #fafafa;
}

.dot-200 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: 0.3;
  display: inline-block;
  background: #fafafa;
}

.xy0 {
  position: absolute;
  top: 60%;
  left: -5%;
  z-index: -1;
}

.xy1 {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: -1;
}

.xy2 {
  position: absolute;
  top: 20%;
  left: 20%;
  z-index: -1;
}

.xy3 {
  position: absolute;
  top: 50%;
  right: 20%;
  z-index: -1;
}

.xy4 {
  position: absolute;
  top: 75%;
  right: 30%;
  z-index: -1;
}

.xy5 {
  position: absolute;
  top: 33%;
  right: 5%;
  z-index: -1;
}

.mat-list-item.active{
  color: red;
}
