.unique-container {
				max-width: 900px;
				margin: 0 auto;
				align-items: center;          /* Center items vertically */
				font-family: Arial, sans-serif;
				display: flex;
				gap: 20px;
			}

			.unique-diagram {
				flex: 0 0 190px;
				cursor: default;              /* Normal ok imleci */
			    max-width: 100%;              /* Ensure it doesn't overflow */
                text-align: center;           /* Optional: Center text/contents inside */				
			}

			.unique-tables {
			 	justify-content: center;      /* Horizontally center the table */
				margin: 0;                    /* Fallback for non-flexbox alignment */
				max-width: 100%;              /* Prevent overflow */
				border-collapse: collapse;    /* Avoid spacing between table cells */
			}

			.unique-title {
				font-size: 24px;
				margin-bottom: 20px;
			}

			table {
				width: 100%;
				border-collapse: collapse;
					}

			th,
			td {
				border: 1px solid #ddd;
				padding: 8px;
				text-align: center;
				cursor: default;              /* Normal ok imleci */
			}
		
			th {
				background-color: #f5f5f5;
				color: #d25b00
			}

			.vertical-header {
				text-align: left;
				font-weight: bold;
			}

			.measure-col {
				background-color: #f9f9f9;
			}

			.table-container {
				margin-bottom: 10px;
				overflow-x: auto;
			}

			/* Measurement points */
			.measurement-point {
				opacity: 0.3;
				transition: opacity 0.3s;
			}

			.measurement-point.active,
			.measurement-point:hover {
				opacity: 1;
			}

			/* Table row hover effects */
			tr[data-measure]:hover {
				background-color: #7ebaaa;
			}

			tr[data-measure]:hover td {
				background-color: #7ebaaa;
				color:white
			}

			/* SVG text labels */
			.measure-label {
				font-size: 12px;
				font-family: Arial, sans-serif;
			}

			.length-indicator {
				opacity: 0.3;
				transition: opacity 0.3s;
			}

			.length-indicator.active,
			.length-indicator:hover {
				opacity: 1;
				cursor: pointer;
			}

			.length-indicator path {
				transition: stroke 0.3s;
			}

			.length-indicator.active path,
			.length-indicator:hover path {
				stroke: #275db5;
				stroke-width: 1.5;
			}

			.length-indicator text {
				transition: fill 0.3s;
			}

			.length-indicator.active text,
			.length-indicator:hover text {
				fill: #7ebaaa;
			}
            .measurement-point {
				opacity: 0.3;
				transition: all 0.3s;
			}

			.measurement-point path,
			.measurement-point text {
				fill: #069474;  
				transition: fill 0.3s;
			}

			.measurement-point.active path,
			.measurement-point.active text,
			.measurement-point:hover path,
			.measurement-point:hover text {
				fill: #069474; 
			}

			.measurement-point.active,
			.measurement-point:hover {
				opacity: 1;
			}
             /* Responsive adjustments */
        @media (max-width: 768px) {
            .unique-container {
                flex-direction: column;
            }

            .unique-diagram {
                order: 2; /* Move diagram below tables */
            }

            .unique-tables {
                order: 1;
            }

            table {
                font-size: 12px; /* Adjust font for smaller screens */
            }
        }
	h2 {
  text-align: center;
}