#tercpd {
  position: relative;
  width: 300px;
  height: 225px;
}

#terline1 {
  transform: rotate(90deg);
  top: -20%;
  left: 50%;
  height: 70%;
}

#terline2a {
  transform: rotate(45deg);
  top: 15%;
  left: 55%;
  height: 20%;
}

#terline2b {
  transform: rotate(135deg);
  top: 15%;
  left: 45%;
  height: 20%;
}
#terline3a {
  transform: rotate(90deg);
  top: 20%;
  left: 25%;
  height: 30%;
}
#terline3b {
  transform: rotate(115deg);
  top: 15%;
  left: 60%;
  height: 70%;
}
#terline4a {
  transform: rotate(90deg);
  top: 55%;
  left: 75%;
  height: 30%;
}
#terline4b {
  transform: rotate(115deg);
  top: 20%;
  left: 40%;
  height: 70%;
}
#terline5a {
  transform: rotate(90deg);
  top: 20%;
  left: 75%;
  height: 30%;
}
#terline5b {
  transform: rotate(65deg);
  top: 15%;
  left: 40%;
  height: 70%;
}
#terline6a {
  transform: rotate(90deg);
  top: 55%;
  left: 25%;
  height: 30%;
}
#terline6b {
  transform: rotate(65deg);
  top: 20%;
  left: 60%;
  height: 70%;
}
#terline7a {
  transform: rotate(45deg);
  top: 70%;
  left: 45%;
  height: 20%;
}
#terline7b {
  transform: rotate(135deg);
  top: 70%;
  left: 55%;
  height: 20%;
}
#terline8 {
  transform: rotate(90deg);
  top: 55%;
  left: 50%;
  height: 70%;
}

#terlabelS {
  left: 20px; /* Move left */
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
}

#terlabelP {
  right: 20px; /* Move right */
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
}

#terlabelM {
  right: 45%; /* Move right */
  top: 52%;
  transform: translateY(-50%); /* Center vertically */
}