.wp-block-drupalblock-source-influencers-graph-block {
}

 .sourceinfluencers {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   margin: 0;


    .container {
        padding: 30px;
        max-width: 450px;
        /* Adjusted max-width for a single item */
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
          /* Stack items vertically */
        gap: 20px;
          /* Gap between duplicated items */
        /* Use flex to center content */
        justify-content: center;
        align-items: center;
      }

      /* The main wrapper that acts as the overall light pink rectangle */
      .influence-item-wrapper {
        display: flex;
        border-radius: 10px;
        width: 100%;
        /* Overall width of the item */
        min-height: 60px;
        /* Overall height of the item */
        position: relative;
        /* Crucial for absolute positioning of children */
        overflow: visible;
        /* Allow children (diamond, circle) to extend outside */
        z-index: 1;
        /* Default z-index for the main container */
      }

      /* Section for the number (01) - Light pink circle with black text */
      .block-number-section {
        /*background-color: #fce4ec;*/
        /* Light pink background for the circle */
        color: #333;
        /* Black text for the number */
        font-weight: 700;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        /* Fixed width for the circle */
        height: 45px;
        /* Fixed height for the circle */
        border-radius: 50%;
        /* Make it a circle */
        flex-shrink: 0;
        flex-grow: 0;
        position: absolute;
        /* Position absolutely relative to .influence-item-wrapper */
        left: 0;
        /* Align its left edge with wrapper's left edge */
        top: 50%;
        transform: translate(-50%, -50%);
        /* Center the circle on the left edge of the wrapper, making it overlap */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /* Subtle shadow for depth */
        z-index: 3;
        /* Ensure it's above the main content rectangle */
      }

      /* Section for the main text content - White background */
      .main-content-rectangle {
        /* White background for the text area */
        flex-grow: 1;
        /* Allows text area to take up remaining space */
        padding: 10px 15px 10px 40px;
        /* Adjusted left padding to account for the overlapping circle */
        display: flex;
        /* Make it a flex container to center text vertically */
        align-items: center;
        /* Vertically center the text */
        text-align: left;
        line-height: 1.2;
        font-size: 0.9rem;
        z-index: 2;
        /* Below the number and percentage diamond */
      }

      /* Section for the percentage - Dice (diamond) shape */
      .block-percentage-section {
        /*background-color: #fce4ec;*/
        /* Light pink for the diamond background */
        /*border: 1px solid #e91e63;*/
        /* Darker pink border */
        color: #333;
        /* Black text for the percentage */
        font-weight: 700;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        /* Make it a square before rotation */
        height: 60px;
        /* Make it a square before rotation */
        border-radius: 0;
        /* No border-radius for a square */
        flex-shrink: 0;
        flex-grow: 0;
        position: absolute;
        /* Position absolutely relative to .influence-item-wrapper */
        right: 0;
        /* Align its right edge with wrapper's right edge */
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        /* Center vertically and rotate into a diamond */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        /* Subtle shadow */
        z-index: 4;
        /* Ensure it's on top of everything */
        overflow: hidden;
        /* Ensure content is clipped if needed */
      }

      /* Inner span for percentage text to counter-rotate */
      .block-percentage-section .percentage-inner-text {
        display: block;
        /* Important for transform to apply */
        transform: rotate(-45deg);
        /* Counter-rotate the text to be horizontal */
        white-space: nowrap;
        /* Prevent text wrapping */
      }

       /* Percentage Circle (now pure CSS donut) */
        .percentage-circle {
            position: relative;
            width: 60px; /* Size of the percentage donut */
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden; /* Ensure content clips to circle */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for the whole donut */
            /* Using conic-gradient for the donut effect */
            background: conic-gradient(
                var(--strip-color, #4CAF50) var(--percentage), /* Green for the filled part */
                #FFF 0% /* Light grey for the unfilled part */
            );
            transform: rotate(45deg);

            /* Outer border matching fill color */
        }

        /* Inner white circle to create the donut hole */
        .percentage-circle::before {
            content: '';
            position: absolute;
            width: 44px; /* Inner circle size (60px - 2*6px border/stroke) */
            height: 44px;
            background-color: #ffffff; /* White hole */
            z-index: 1; /* Above the conic-gradient */
            border: 2px solid var(--strip-color, #4CAF50);
        }

        /* Text inside the donut */
        .percentage-circle .percentage-text {
            position: relative; /* Position relative to .percentage-circle */
            font-size: 0.9rem;
            font-weight: 700;
            color: #000;
            z-index: 2; /* Ensure text is on top of the white hole */
            transform: rotate(-45deg);
        }
 }