/*One entry in grid-container*/
.figure-entry {
    background-color: #4C4C4C;
    border-radius: 15px;
    position: relative;
}

/*Grid used to display figure image, ID, etc*/
.figure-grid {
    padding: 10px;
    display: grid;
    row-gap: 10px;
    column-gap: 10px;
    z-index: 0;
    grid-template-rows: 1fr min-content min-content;
}

.figure-grid-overlay {
    position: absolute;
    background-color: #4C4C4C;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    border-radius: 15px;
    padding: 5px;

    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

    transition: opacity 0.35s ease;

}

.figure-grid-overlay:hover {
    opacity: 0.9;
}

.figure-data {
    padding: 10px;
    background-color: #3E3E3E;
    border-radius: 10px;
}

.figure-image {
    /*Image sizes*/
    max-height: 200px;
    max-width: 150px;
    /*White area around image*/
    background-color: white;
    border-radius: 5px;
    padding: 5px;
}


/* Tooltip text */
.figure-grid-overlay .figure-tooltiptext {
    visibility: hidden;
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    z-index: 20;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;

    
}

/* Show the tooltip text when you mouse over the tooltip container */
.figure-grid-overlay:hover .figure-tooltiptext {
    visibility: visible;
}