.graphcontainer {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  background: #F4F4F4;
  margin-bottom: -3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.graph {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

svg {
  width: calc(100% - 2px);
  height: 100%;
  visibility: hidden;
}

.overlay-div {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%); /* Centers the div on the specified coordinates */
}

/* Individual positioning for each overlay */
.overlay-div.left {
  top: 49.35%;
  left: 29.35%;
}

.overlay-div.left-center {
  top: 42.85%;
  left: 43.18%;
}

.overlay-div.right-center {
  top: 39.02%;
  left: 57.02%;
}

.overlay-div.right {
  top: 41.38%;
  left: 70.86%;
}

.graphIcon {
  width: 45%;
  height: auto;
}

.overlay-text {
  color: #ffffff;
  position: relative;
  z-index: 10;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 80%;
  font-weight: 600;
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: portrait) {

.graph {
  width: 150%;
}

.overlay-text {
  font-size: 70%;
}
}