.pie-chart-container {
      position: relative;
      width: 200px;
      height: 200px;
      margin-left: 30px;
    }

    .pie-chart {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: conic-gradient(
        rgba(255, 175, 77, 0.85) 0% 15%,
        rgba(255, 157, 38, 0.85) 15% 40%,
        rgba(255, 140, 0, 0.85) 40% 100%
      );
      position: relative;
      z-index: 2; /* Ensure the pie chart is above the image */
      box-shadow: 0 0 55px rgba(0, 0, 0, 0.2); /* Add soft shadow to entire pie chart */
    }

    .pie-chart::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px dotted lightgrey; /* Outline color and thickness */
      z-index: 3; /* Place above the pie chart slices */
      pointer-events: none; /* Prevent interaction with the outline */
    }

    .grain-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: url('https://www.transparenttextures.com/patterns/asfalt-light.png') repeat; /* Grain texture */
      opacity: 0.4; /* Adjust intensity of the texture */
      z-index: 4; /* Ensure the texture is above the pie chart and outline */
      pointer-events: none; /* Disable interaction */
    }

    .pie-chart-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: url('../images/nohoru-network-flower-of-life.png') center/cover no-repeat; /* Relative path to image */
      z-index: 1; /* Ensure the image is below the pie chart */
    }

    .labels {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 5; /* Ensure labels are above everything */
      pointer-events: none; /* Disable interaction */
    }

    .label {
      position: absolute;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      text-align: center;
      font-family: Georgia, serif;
      text-shadow: 0 0 3px grey; /* Improves readability */
    }

    .label .line {
      display: block;
      position: absolute;
      width: 200px;
      height: 1px;
      background-color: #e6e6e6;
      top: 50%;
      left: 130%;
      transform: translateY(-50%);
      text-shadow: none;
    }

    .label .annotation {
      position: absolute;
      top: 50%;
      left: calc(100% + 220px);
      transform: translateY(-70%);
      white-space: nowrap;
      font-size: 0.8rem;
      color: #616161;
      text-shadow: none;
    }

    /* Adjust label positions */
    .label.green {
      top: 20%;
      left: 66%;
      transform: translate(-50%, -50%);
    }

    .label.red {
      top: 54%;
      left: 80%;
      transform: translate(-50%, -50%);
    }

    .label.blue {
      top: 68%;
      left: 31%;
      transform: translate(-50%, -50%);
    }

@media screen and (max-width: 600px)	{
					
.pie-chart-container {
display: none;
}

/* .pie-chart-container {
      position: relative;
      width: 200px;
      height: 200px;
      margin-left: 30px;
      margin-bottom: 180px;
    }

					.label .line {
      display: block;
      position: absolute;
      width: 1px;
      height: 200px;
      background-color: #e6e6e6;
      top: 695%;
      left: 30%;
      transform: translateY(-50%);
      text-shadow: none;
    }

	#line-long	{
	height: 250px;
	top: 830%
	}

	.label .annotation {
      position: absolute;
      top: 1350%;
      left: -230%;
      white-space: nowrap;
      font-size: 0.8rem;
      color: #616161;
      text-shadow: none;
    }
					
.label.blue {
      top: 52%;
      left: 29%;
      transform: translate(-50%, -50%);
    }

#annotation-moved	{
top: 1620%;
}

					} */