.vocational_behave {
          /* Custom styles not covered by Tailwind, if any */

              font-family: 'Inter', sans-serif;
              /* Light gray background */

            @media (min-width: 640px) {
                .sm\:h-\[400px\] {
                  height: 240px;
                }

              }
            /* Specific styles for labels to ensure radial look */
            .label-container {
              position: absolute;
              font-weight: 600;
              /* semibold */
              z-index: 10;
              /* Labels should be on top */
              white-space: nowrap;
              /* Prevent text wrapping */
            }

            .gap-12 {
              gap: 100px !important;
              margin-left: -8%;
            }

            .label-container {
              .prop {
                font-size: 10px;
                font-weight: bolder;;
              }
            }

            /* Styles for the icons within the radar */
            .radar-icon {
              position: absolute;
              z-index: 15;
              /* Ensure icons are above rings and labels */
              /* Using translate to perfectly center the icon on its calculated point */
              /*transform: translate(-50%, -50%);*/
              /* Base style for the circle background of the icon */
              /*width: 1.5rem; */
              height: 15px;
              border-radius: 9999px;
              /* Tailwind's rounded-full */
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              /* Ensure image fits inside circle */
            }

            /* Style for the image icons */
            .radar-icon img {
              width: 100%;
              /* Make image fill the radar-icon container */
              height: 100%;
              /* Make image fill the radar-icon container */
              object-fit: contain;
              /* Ensure the entire image is visible, scale down if needed */
            }

            /* Style for the arrow character inside the circle (keeping it as a fallback or for custom styling) */
            .radar-icon .arrow {
              font-size: 0.875rem;
              /* text-sm */
              line-height: 1;
              /* Ensure icon aligns well */
              color: white;
              /* Arrow color */
            }

            /* Styles for the crosshairs (horizontal, vertical, and diagonals) */
            .crosshair-line {
              position: absolute;
              background-color: white;
              /* Full opacity white */
              z-index: 1;
              /* Set a lower z-index so rings and center circle can cover them */
              height: 1px;
              /* Thicker line */
              top: 50%;
              left: 50%;
              /* Center the line before rotation/translation */
              transform-origin: center center;
              /* Ensure rotation is around the center */
            }

            /* Widths specific to lines that DO NOT have arrowheads */
            .crosshair-line.horizontal,
            .crosshair-line.vertical {
              width: 100%;
              /* Full width for horizontal and vertical lines in both charts */
            }

            /* Widths specific to lines that DO have arrowheads (diagonals in both charts) */
            #enhance-radar-chart .crosshair-line.diagonal-45,
            #enhance-radar-chart .crosshair-line.diagonal-135 {
              width: 91%;
              /* 12px for each arrowhead on diagonals */
            }

            #avoid-radar-chart .crosshair-line.diagonal-45,
            #avoid-radar-chart .crosshair-line.diagonal-135 {
              width: 100%;
              /* 12px for each arrowhead on diagonals */
            }

            .crosshair-line.horizontal {
              transform: translate(-50%, -50%);
              /* Center horizontally and vertically */
            }

            .crosshair-line.vertical {
              transform: translate(-50%, -50%) rotate(90deg);
              /* Rotate for vertical line */
            }

            .crosshair-line.diagonal-45 {
              transform: translate(-50%, -50%) rotate(45deg);
              /* Rotate for 45-degree diagonal */
            }

            .crosshair-line.diagonal-135 {
              transform: translate(-50%, -50%) rotate(135deg);
              /* Rotate for 135-degree diagonal */
            }

            /* Styles for radar rings and center text circle to ensure proper stacking */
            .radar-ring {
              position: absolute;
              /* Ensures z-index can be applied */
              border-radius: 9999px;
              /* Tailwind's rounded-full */
            }

            .center-text-circle {
              position: absolute;
              /* Ensures z-index can be applied */
              border-radius: 9999px;
              /* Tailwind's rounded-full */
              display: flex;
              justify-content: center;
              align-items: center;
              z-index: 2;
              /* Higher than crosshairs to cover them */
            }

            #enhance-radar-chart .crosshair-line.diagonal-45 {
              height: 15px;
              /*background: #FEEED8;*/
            }

            #enhance-radar-chart .crosshair-line.diagonal-135 {
              height: 16px;
              /*background: #FEEED8;*/
            }

            #avoid-radar-chart .crosshair-line.diagonal-45 {
              height: 16px;
              /*background: #FEEED8;*/
            }

            #avoid-radar-chart .crosshair-line.diagonal-135 {
              height: 16px;
             /*background: #FEEED8;*/
            }

            /* Arrowhead styling for ONLY DIAGONAL crosshair lines in the FIRST radar chart and common properties for both */
            #enhance-radar-chart .crosshair-line.diagonal-45::before,
            #enhance-radar-chart .crosshair-line.diagonal-135::before,
            #enhance-radar-chart .crosshair-line.diagonal-45::after,
            #enhance-radar-chart .crosshair-line.diagonal-135::after {
              content: '';
              position: absolute;
              width: 0;
              height: 35px;
              border-style: solid;
              border-width: 16px 0 18px 18px;
              /* Base size: 6px top/bottom transparent, 12px left white */
              /*border-color: transparent transparent transparent #FEEED8;*/
              border-color: transparent transparent transparent var(--arrow-color2);
              top: 50%;
              transform: translateY(-50%);
              /* Centers the arrow vertically on the line */
              z-index: 1;
              /* Same z-index as line, behind center circle and icons */
            }

            #avoid-radar-chart .crosshair-line.diagonal-45::before,
            #avoid-radar-chart .crosshair-line.diagonal-135::before,
            #avoid-radar-chart .crosshair-line.diagonal-45::after,
            #avoid-radar-chart .crosshair-line.diagonal-135::after {
              content: '';
              position: absolute;
              width: 0;
              height: 35px;
              border-style: solid;
              border-width: 15px 0 18px 18px;
              /* Base size: 6px top/bottom transparent, 12px left white */
              /*border-color: transparent transparent transparent #FEEED8;*/
              border-color: transparent transparent transparent var(--arrow-color2);
              top: 50%;
              transform: translateY(-50%);
              /* Centers the arrow vertically on the line */
              z-index: 1;
              /* Same z-index as line, behind center circle and icons */
            }

            /* Before pseudo-elements (left arrowhead) for diagonals in BOTH charts */
            #enhance-radar-chart .crosshair-line.diagonal-45::before,
            #enhance-radar-chart .crosshair-line.diagonal-135::before,
            #avoid-radar-chart .crosshair-line.diagonal-45::before,
            #avoid-radar-chart .crosshair-line.diagonal-135::before {
              left: 0%;
              /* Positions the arrow's start at the beginning of the line */
              transform: translateY(-50%) rotate(180deg);
              /* Rotates to point inwards along the line's axis */
              transform-origin: 0% 50%;
              /* Rotate around its own left edge */
            }

            #enhance-radar-chart .crosshair-line.diagonal-135::before {
              left: 3.5%;
            }

            #enhance-radar-chart .crosshair-line.diagonal-45::before {
              left: 3.5%;
            }

            #avoid-radar-chart .crosshair-line.diagonal-45::before,
            #avoid-radar-chart .crosshair-line.diagonal-135::before {
              left: 26.1%;
              transform: translateY(-50%) rotate(0deg);
              background: var(--arrow-color1);
            }

            /* After pseudo-elements (right arrowhead) for diagonals in the FIRST chart */
            #enhance-radar-chart .crosshair-line.diagonal-45::after,
            #enhance-radar-chart .crosshair-line.diagonal-135::after {
              left: 96.5%;
              /* Positions the arrow's start at the end of the line */
              transform: translateY(-50%);
              /* Points outwards along the line's axis */
              transform-origin: 0% 50%;
              /* Rotate around its own left edge */
            }

            /* After pseudo-elements (right arrowhead) for diagonals in the SECOND chart - Pointing INWARDS */
            #avoid-radar-chart .crosshair-line.diagonal-45::after,
            #avoid-radar-chart .crosshair-line.diagonal-135::after {
              left: 73.9%;
              /* Positions the arrow's start at the end of the line */
              transform: translateY(-50%) rotate(180deg);
              /* Points inwards along the line's axis */
              transform-origin: 0% 50%;
              /* Rotate around its own left edge */
              background: var(--arrow-color1);
            }
}