.info-icon {
    display: inline-block; /* Allows the div to behave like an inline element */
    width: 20px; /* Diameter of the circle */
    height: 20px; /* Diameter of the circle */
    background-color: #0075FF; /* Circle color */
    border-radius: 50%; /* Makes the div a circle */
    color: white; /* Color of the text/icon */
    font-size: 15px; /* Size of the text/icon */
    line-height: 20px; /* Centers the text/icon vertically */
    text-align: center; /* Centers the text/icon horizontally */
    cursor: pointer; /* Changes the mouse cursor to a pointer to indicate it's clickable */
}

.info-icon::before {
    content: "i"; /* The text to display, in this case, a lowercase "i" */
    font-style: normal; /* Ensures the "i" is not italicized, adjust as needed */
    font-weight: bold; /* Makes the "i" bold, adjust according to your design */
}
#metacontainer {
    display: none; /* Hides the container initially */
    position: fixed; /* Changed to fixed for fullscreen-like behavior */
    top: 10px; /* 10 pixels from the top edge */
    left: 10px; /* 10 pixels from the left edge */
    right: 10px; /* 10 pixels from the right edge */
    bottom: 10px; /* 10 pixels from the bottom edge */
    background-color: white;
    border-radius: 5px;
    box-shadow: 5px 2px 4px #888888;
    padding: 10px; /* Padding inside the container */
    /*overflow: auto; /* Adds scroll to the container if content overflows */
    z-index: 10000; /* Keeps it above other content */
    transition: 0.5s; /* Smooth transition for opening/closing */
}

#metalegend {
	display:flex;
    align-items:center;
    margin-top:10px;
	margin-left:20px;
    margin-bottom:10px;
}

#metatitle {
	font-family: 'Robotica', sans-serif;
	font-size:large;
    color: rgb(70,70,70);
    font-weight: bold;
    padding:10px;
    text-align: center;
}

.close-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
    color: grey; /* Grey color */
    font-size: 24px; /* Larger size for the cross symbol */
}

#metatable {
    padding: 20px 20px 20px 20px; /* Top, Right, Bottom, Left */
    overflow: auto; /* Allows scrolling within the div if the table overflows */
    height: calc(100% - 70px); /* Adjusts the height to consider padding and ensure it doesn't overflow the container */
}

#metatable table {
    width: 100%; /* Makes the table use all available width */
    border-collapse: collapse; /* Removes the space between borders */
    table-layout: fixed; /* Keeps the table layout fixed */
	font-family: 'Robotica', sans-serif;
    font-size: 14px;
    color: #1c1c1c;
}

#metatable th,
#metatable td {
    text-align: left; /* Aligns text to the left */
    padding: 8px; /* Adds padding inside cells */
    border-bottom: 1px solid #ddd; /* Adds a bottom border to all cells */
}

#metatable th {
    background-color: #f2f2f2; /* Light grey background for header cells */
    color: #333; /* Dark text color for contrast */
}

#metatable tr:hover {
    background-color: #f5f5f5; /* Adds a hover effect for rows */
}

#page-overlay {
    display: none; /* Hidden initially */
    position: fixed; /* Cover the entire page */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 9999; /* Below the metacontainer */
}