.container1 {
    margin: 20px;
}
.data-item .dropdownSelector {
    margin-bottom: 10px;
}

body {
    font-family:  Helvetica, sans-serif;
    font-size: small;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}
#grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px;
}
[class^="cell-row-"] {
    align-items: center;
    padding: 3px 0px;
    display: flex;
}
.title {
    font-weight: bold;
    background-color: #f0f0f0;
    text-align: left;
    display: flex;
    padding: 3px 0px;
}
.highlight {
background-color: #ffeb3b;
font-weight: bold;
} 

/*shape*/
.container {
    position: relative;
    width: 200px;
    /* Adjust length here */
    height: 200px;
    /* Same length for square */
    background-color: #f7fb06;
    /* Rectangle background */
    margin: 50px auto;
}

.diamond {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 141.42px;
    /* Diagonal length for diamond */
    height: 141.42px;
    /* Diagonal length for diamond */
    background-color: #4f1de6;
    transform: translate(-50%, -50%) rotate(45deg);
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 141.42px;
    /* Diameter of circle */
    height: 141.42px;
    /* Diameter of circle */
    background-color: #f00e0e;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.label {
    position: absolute;
    font-size: 8px;
    color: black;
}

/* Rectangle Labels */
.label-rectangle-1 { bottom: 10px; left: 10px; } /* Bottom Left */
.label-rectangle-2 { top: 10px; left: 10px; }    /* Top Left */
.label-rectangle-3 { top: 10px; right: 10px; }   /* Top Right */
.label-rectangle-4 { bottom: 10px; right: 10px; } /* Bottom Right */


/* Bottom Right */

/* Positioning label for circle */
.label-circle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}