body {
    font-family: "Noto Serif JP", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #343a40;
}

.modal {
    margin: 0;
    padding: 0;
}


#segmentationSVG.paths:hover {
    stroke: white; /* Change stroke color to white */
    stroke-width: 5px; /* Increase stroke width to 5px */
    fill-opacity: 0.8;
}

.rounded-img {
    width: auto; /* Set the width */
    height: 100px; /* Set the height */
    object-fit: cover; /* Prevent stretching */
    border-radius: 50%; /* Round the corners to make it circular */
}

.footer-img {
    width: auto;
    height: 75px;
    object-fit: cover;
    border-radius: 20%;
}


.contrib a {
    text-decoration: none;
    color: #2e2e2e;
    font-weight: 700;
}

.citation {
    font-family: Consolas, "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #f2f3f4; /* Optional: Add a background color */
    font-size: 14px; /* Reduce font size */
    font-weight: 400;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent text wrapping */
    padding: 10px;
}


/* Custom CSS for syntax highlighting */
.token_keyword {
    color: #d73a49; /* Red color for keywords like @article */
}

.token_constant {
    color: #005cc5; /* Blue color for constants like hanoona2023GLaMM */
}

.row.mx-0 {
    margin-right: 0;
    margin-left: 0;
}

.col-custom {
    flex: 0 0 20%; /* Each column takes up 20% of the container width */
    max-width: 20%; /* Max-width to match flex-basis */
    padding: 0 10px; /* Horizontal padding to create space between images */
    margin-bottom: 20px; /* Additional bottom margin for space between rows */
}

.image-container {
    height: 250px; /* Fixed height for consistency */
    margin-top: 20px; /* Additional top margin for space above the images */
}

/* Ensure the outermost images have space from the container's edge */
.row > .col-custom:first-child {
    padding-left: 15px; /* Adjust the left padding on the first column */
}

.row > .col-custom:last-child {
    padding-right: 15px; /* Adjust the right padding on the last column */
}

#toggleMasksButton {
    background-color: #f8f9fa; /* Light gray background */
    color: #333; /* Dark text for contrast */
    font-size: 0.8em; /* Smaller text */
    padding: 5px 5px; /* Smaller padding for a smaller box */
    border: 1px solid #ddd; /* Light border for some definition */
    border-radius: 5px; /* Slightly rounded corners */
    line-height: 1; /* Tighter line height for a smaller button */
    margin-left: 5px; /* Space between the button and other elements */
}

.button-container {
    display: flex;
    justify-content: flex-end; /* Aligns children (buttons) to the right */
    align-items: center; /* Centers buttons vertically */
    /* If you need spacing between the buttons */
    gap: 10px; /* Adjust the gap size as needed */
}

/* If you also want to adjust the overall spacing and alignment in the modal header */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}