.copy-code {
    position: relative;
    display: block;
}

.copy-button {
    position: absolute;
    float: right;
    right: 0;
    top: 0;
    border: none;
    background-color: transparent;
    color: #888; /* Adjust color to match your theme */
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    z-index: 10; /* Ensure the button is above all content */
}

pre {
    width: 80%;
}


:root {
    --mdc-theme-primary: #f37706;
    --mdc-theme-secondary: #ffb71f;
}

/* Custom CSS for placing specific images side by side */
.side-by-side-images {
    display: flex;
    justify-content: space-between;
}

.side-by-side-images .figure {
    flex: 1;  /* Allows figures to grow and fill the available space */
    margin-right: 10px; /* Adds space between the figures */
}

.side-by-side-images .figure:last-child {
    margin-right: 0; /* Removes margin from the last figure to avoid extra spacing on the right */
}



.figure-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /*gap: 20px;  !* Adjust the gap size as needed *!*/
    /*margin-bottom: 20px;  !* Adds space below the container *!*/
}

.figure-grid .figure {
    margin: 0;
    padding: 0;
}

.scrollable-output {
    max-height: 400px; /* Adjust the height as needed */
    overflow-y: auto;
    border: 1px solid #ccc; /* Optional: Add a border for better visibility */
    padding: 10px; /* Optional: Add padding for better readability */
    background-color: #f9f9f9; /* Optional: Add background color */
}