﻿.compartment {
    display: flex;
    border: 1px solid var(--disabled-gray);
    margin: 0.1em;
    background: var(--plain-white);
    color: var(--black);
    font-size: var(--font-size-normal);
    font-weight: bold;
    padding: 1em;
    flex: 1;
    border-radius: 0.5em;
    cursor: pointer;
    transition: transform 0.1s ease-out, background 0.1s ease-in-out;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.1));
}

.compartment:hover {
    background: var(--hover-gray);
}
.compartment:active {
    transform: scale(0.9);
}

.compartment-contents {
    min-width: 40rem;
    flex: 1;
}

#storage-unit-environment-charts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    height: 40vh;
}