.quanteec-module-hard {
  width: 55vw;/*496px;*//*992px;*/
  height: 36vw;/*339px;*//*678px*/
  font-size: 1rem;
  
}

.quanteec-indicator-btn {
top: 2%;
left: 1%;
position: absolute;
cursor: pointer;
max-width: 5%;
}

h1 {
  margin: 0px;
  margin-block-end: 0px;
}
.container_popup {
  position: absolute;
  top: 14%;
  left: 6.5%;
  background-color: rgba(0,0,0,0.5);
  border-bottom-left-radius: 100px;
  text-align:left ;
  color: white;
  /* row-gap: 1.5vh; */
  font-family: Montserrat, sans-serif;
}

.polygon20-6-icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}


.green,
.score {
  margin: 0;
}
.score {
font-weight: 500;
color: #002545;
}
.green-score {
position: absolute;
font-size: 4vw;
line-height: 93.9%;
color:white;
}
.green-score-percent {
position: relative;
font-size: 4vw;;
line-height: 93.9%;
font-weight: 800;
display: inline-block;
color:white
}

.polygon20-6-icon1 {
  position: absolute;
  top: 50%;
  left: 46.9%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, -50%);
}
.kwh-parent {
  position: absolute;
  top: 50%;
  left: 46.9%;
  width: 25%;
  line-height: 123%;
  transform: translate(-50%, -50%);
}
.energy-saved {
  font-size: 1.1vw;
}
.kwh {
  font-size: 1.5vw;  
}

.frame-child {
  border-top: 1px solid #14bf98;
  box-sizing: border-box;
  width: 50%;
  transform: translate(50%, 0%);
}

.polygon20-6-icon2 {
  position: absolute;
  top: 50%;
  left: 80.2%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, -50%);
}
.g-parent {
  position: absolute;
  top: 50%;
  left: 80.2%;
  width: 25%;
  line-height: 123%;
  transform: translate(-50%, -50%);
}
.frame-item {
  border-top: 1px solid white;
  box-sizing: border-box;
  width: 50%;
  transform: translate(50%, 0%);
}

.polygon20-6-icon3 {
  position: absolute;
  top: 36%;
  left: 63.3%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, -50%);
}

.cl-parent {
  position: absolute;
  top: 36%;
  left: 63.3%;
  width: 25%;
  line-height: 123%;
  transform: translate(-50%, -50%);
}

.polygon20-6-icon4 {
  position: absolute;
  top: 63%;
  left: 63.3%;
  width: 25%;
  height: 25%;
  transform: translate(-50%, -50%);
}

.bulbs-parent {
  position: absolute;
  top: 63%;
  left: 63.3%;
  width: 25%;
  line-height: 123%;
  transform: translate(-50%, -50%);
}

.polygon20-6-icon5 {
      position: absolute;
      bottom: 0%;
      right: 0%;
      width: 38%;
      height: 13%;
  }

  .green-power-parent {
    position: absolute;
    bottom: 3%;
    right: 0%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: 1.5vw;
  }
  .component-2 {
    position: relative;
    text-align: center;
    cursor: pointer;
    font-size: 1vw;
  }
  .component-2-child {
    position: relative;
    width: 60%;
    height: 60%;
  }
  .x2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .polygon20-6-icon8 {
    position: absolute;
    top: 50%;
    left: 90.25%;
    transform: translate(-50%, -50%);
    width: 7%;
    height: 7%;
  }
  .frame-icon {
    position:absolute;
    top: 50%;
    left: 90.25%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    overflow: hidden;
  }

  .polygon20-6-icon9 {
    position: absolute;
    top: 50%;
    left: 37.5%;
    transform: translate(-50%, -50%);
    width: 7%;
    height: 7%;
  }
  .frame-icon2 {
    position:absolute;
    top: 50%;
    left: 37.5%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    overflow: hidden;
  }

  .polygon20-6-icon10 {
    position: absolute;
    top: 23.7%;
    left: 63.3%;
    transform: translate(-50%, -50%);
    width: 7%;
    height: 7%;
  }
  .frame-icon3 {
    position:absolute;
    top: 23.7%;
    left: 65.5%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    overflow: hidden;
  }
  .polygon20-6-icon11 {
    position: absolute;
    top: 75.4%;
    left: 63.3%;
    transform: translate(-50%, -50%);
    width: 7%;
    height: 7%;
  }
  .frame-icon1 {
    position:absolute;
    top: 75.4%;
    left: 63.3%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 4%;
    overflow: hidden;
  }

  .q-l-s-1-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 12%;
    left: 82%;
    width: 25%;
    height: 25%;
  }

  @media screen and (max-width: 1600px) {

    .polygon20-6-icon1 {
      position: absolute;
      top: 50%;
      left: 46.9%;
      width: 64%;
      height: 33%;
      transform: translate(-50%, -50%);
    }

    .polygon20-6-icon2 {
      position: absolute;
       top: 50%;
       left: 83.9%;
       width: 25%;
       height: 30%;
       transform: translate(-50%, -50%);
    }

    .g-parent {
      position: absolute;
     top: 50%;
     left: 83.9%;
     width: 25%;
     line-height: 123%;
      transform: translate(-50%, -50%);
     }

    .polygon20-6-icon3 {
      position: absolute;
      top: 33%;
      left: 65.3%;
      width: 25%;
      height: 30%;
      
    }
    .cl-parent {
      position: absolute;
      top: 33%;
      left: 65.3%;
      width: 25%;
      line-height: 123%;
      
    }
  
    .polygon20-6-icon4 {
      position: absolute;
      top: 67%;
      left: 65.3%;
      width: 25%;
      height: 30%;
      
    }
  
    .bulbs-parent {
      position: absolute;
      top: 67%;
      left: 65.3%;
      width: 25%;
      line-height: 123%;
      
    }
  
    .polygon20-6-icon5 {
          position: absolute;
          bottom: 0%;
          right: 0%;
          width: 36%;
          height: 15%;
      }
  
      .polygon20-6-icon8 {
        position: absolute;
        top: 50%;
        left: 94.34%;
        transform: translate(-50%, -50%);
        width: 7%;
        height: 7%;
      }
      .frame-icon {
        position:absolute;
        top: 50%;
        left: 94.48%;
        transform: translate(-50%, -50%);
        width: 4%;
        height: 4%;
        overflow: hidden;
      }
  
      .polygon20-6-icon9 {
        position: absolute;
        top: 50%;
        left: 35.2%;
        transform: translate(-50%, -50%);
        width: 7%;
        height: 7%;
      }
      .frame-icon2 {
        position:absolute;
        top: 50%;
        left: 35.2%;
        transform: translate(-50%, -50%);
        width: 4%;
        height: 4%;
        overflow: hidden;
      }
  
      .polygon20-6-icon10 {
        position: absolute;
        top: 18%;
        left: 65%;
        transform: translate(-50%, -50%);
        width: 7%;
        height: 7%;
      }
      .frame-icon3 {
        position:absolute;
        top: 18.5%;
        left: 65%;
        transform: translate(-50%, -50%);
        width: 4%;
        height: 4%;
        overflow: hidden;
      }
      .polygon20-6-icon11 {
        position: absolute;
        top: 82%;
        left: 65.3%;
        transform: translate(-50%, -50%);
        width: 7%;
        height: 7%;
      }
      .frame-icon1 {
        position:absolute;
        top: 82%;
        left: 65.3%;
        transform: translate(-50%, -50%);
        width: 4%;
        height: 4%;
        overflow: hidden;
      }
      .green-power-parent {
        position: absolute;
        bottom: 2%;
        right: 0%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        font-size: 1.6vw;
      }
  
  }