﻿.selectionlargebox {
    color: #000;
    background-color: lightgrey;
    border: 1px solid darkgrey;
    padding: 5px;
    font-size: 100%;
    margin: 5px;
    height: 180px; /* Adjust height to accommodate the label */
    width: 150px;
    cursor: pointer;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    justify-content: flex-start; /* Align children to the top */
}

.selectionlargeboximage {
    width: 120px; /* Match the width of the image */
    height: 120px; /* Set a fixed height for the container */
    overflow: hidden; /* Prevent overflow */
    display: flex; /* Center the image */
    justify-content: center; /* Center horizontally */
    border: 1px solid #ccc; /* Optional: Add a border for clarity */
    box-sizing: border-box; /* Ensure padding and border are included in the size */
}

    .selectionlargeboximage img {
        max-width: 100%; /* Ensure the image does not exceed the container's width */
        max-height: 100%; /* Ensure the image does not exceed the container's height */
        object-fit: contain; /* Scale the image to fit within the container */
    }

.selectionlargeboxlabel {
    margin-top: 5px; /* Add spacing between the image and the label */
    text-align: center; /* Center the text inside the label */
    background-color: transparent;
    color: black;
    font-size: 100%;
    font-weight: 500;
}
