.hidden { visibility: hidden; } body { display: flex; justify-content: flex-start; /* Align items to the start to prevent truncation */ align-items: flex-start; /* Align items to the start to prevent truncation */ min-height: 100vh; /* Use min-height to ensure full height */ margin: 0; background-color: #f0f0f0; padding: 20px; /* Add some padding to prevent text truncation */ } .left-section { width: 70%; background-color: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-sizing: border-box; max-height: calc(100vh - 40px); /* Ensure maximum height to allow for scrolling */ overflow-y: auto; /* Add vertical scrolling if content overflows */ overflow-x: hidden; /* Prevent horizontal scrolling */ } .right-section { width: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; overflow: hidden; /* Ensure no scrollbar is displayed */ } h1, h2 { text-align: center; margin-bottom: 20px; color: #333; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; font-weight: bold; } th { background-color: #f2f2f2; } select { width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; } select:focus { outline: none; border-color: #007bff; } .selected { background-color: #dff0d8 !important; /* Highlight selected row */ } .frame { position: relative; width: 600px; /* Adjusted size of the square frame */ height: 600px; border: 2px solid #000; /* Black border */ background-color: #fff; /* White background inside the frame */ } .circle { position: absolute; top: 43.0%; /* Adjusted to percentage of the frame height */ left: 43.0%; /* Adjusted to percentage of the frame width */ width: 13.33%; /* Adjusted the size of the circle */ height: 13.33%; /* Adjusted the size of the circle */ background-color: transparent; /* Adjust the color of the circle */ border-radius: 50%; /* Makes the element a circle */ display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; font-size: 1.6vw; /* Responsive font size */ line-height: 1; /* Ensure single line height */ z-index: 3; } .layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; /* Ensures the image fits within the frame without distortion */ visibility: hidden; /* Initially hide all layers */ z-index: 1; /* Ensure layers are underneath the base image */ } .base-image { position: absolute; /* Make sure the base image is positioned absolutely */ top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; /* Ensures the image fits within the frame without distortion */ background: transparent; /* Ensure the background is transparent */ z-index: 2; /* Ensure the base image is on top of the layers */ } .bar { position: absolute; bottom: 5px; /* Adjust the positioning as needed */ left: 50%; transform: translateX(-50%); width: 100%; /* Adjust the width as needed */ height: 100%; /* Maintain aspect ratio */ object-fit: contain; /* Ensures the image fits within the frame without distortion */ visibility: hidden; /* Initially hide the bar images */ }