/* #body-box {
    width: 95%;
    margin: 0 auto;
} */

/* 
.container {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: inherit;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    height: 100%; 
}

.left-box {
    flex: 0 0 75%;
    align-self: flex-start;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%; 
}

.right-box {
    flex: 0 0 25%;
    align-self: flex-start;
    box-sizing: border-box;
    height: 100%; 
}
*/
.container {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: inherit;
    flex-direction: row;
    align-items: flex-start; /* Align items to the start (top) */
    width: 100%;
    height: 100%; /* Ensure container takes full height */
}

.left-box {
    /* flex: 0 0 75%; */
    align-self: flex-start;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%; /* Ensure left box takes full height */
}

.right-box {
    flex: 0 0 25%;
    align-self: flex-start;
    box-sizing: border-box;
    height: 100%; /* Ensure right box takes full height */
}

/* .grid-row {
   display: grid;
    gap: var(--grid-gap);
}
*/

.grid-gap {
    --grid-gap: 1rem; /* Adjust the gap value as needed */
}

.margin-bottom-4 {
    margin-bottom: 4rem; /* Adjust the margin value as needed */
}

.tablet\:margin-bottom-0 {
    margin-bottom: 0;
}

.font-body-md {
    font-size: 1rem; /* Adjust the font size as needed */
}

.text-primary {
    color: #0056b3; /* Adjust the color as needed */
}

.usa-in-page-nav__heading {
    /* Add additional styles as needed */
}

.pic-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pic-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.pic-column {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
}

.pic-title-column {
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

.pic-left-label {
    flex: 0 0 15%; /* Adjust the width of the left label as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 0.5rem;
    background-color: #f0f0f0;
}

.pic-img {
    width: 100%; /* Ensure images take the full width of their column */
    height: auto;
    max-width: 100%; /* Maintain aspect ratio */
    border: 1px solid #ccc; /* Optional: add a border to images */
    padding: 0.5rem;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add a shadow for better visual appearance */
}

.left-label {
    word-wrap: break-word; /* This will allow the text to wrap */
    white-space: normal; /* Ensure the text can wrap to the next line */
    width: 18%; /* Ensure the label takes the full width of the column */
}

.centered-content {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

#subregions {
    display: block;
    margin: 0 auto;
}

.basin-data-container {
    display: flex;
    flex-direction: column; /* Ensure rows stack vertically */
    align-items: center;
    gap: 1rem; /* Add space between rows */
    width: 100%;
}
.basin-data-container-header-row {
    display: flex;
    flex-direction: row;
    /* grid-template-columns: repeat(11, 1fr);  */
    gap: 0.5rem;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    text-align: center;
    width: 100%;
    margin-top: 1rem;
    font-size: 10px; /* Adjust font size as needed */
    /* font-weight: bold; */ /* Make font bold */

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 1rem;
    font-size: 0.85rem;
}

.basin-data-container-image-row {
    display: flex;
    flex-direction: column;
    /* grid-template-columns: repeat(11, 1fr);  */
    gap: 0.5rem;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    text-align: center;
    width: 100%;
}

.basin-row {
    display: flex;
    flex-direction: row; /* Ensure cells in a row align horizontally */
    gap: 0.5rem; /* Space between cells in a row */
    align-items: center;
    justify-content: flex-start;
    width: 100%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 1rem;
    font-size: 0.85rem;
}

.title-column {
    text-align: center;
}

.pic-row-titles {
    display: flex;
    width: 100%;
}

/* Each column in the title row */
.pic-row-titles .column {
    flex: 1; /* Ensure equal width for all columns */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    
}