How to set the bg color of a callout put in margin, and its display order relative to others?

[hopezh]

Description

As shown in the image below, when I unfold a collapsed callout put in the margin area, it shows up behind other unfolded callouts, all with some transparency.

May I ask:

1. how to customize the background color of a callout and the transparency of the elements within it?
2. How to adjust the relative display order of the callouts put in the margin area, so that the unfolded callout will appear above the other callouts below?

Thanks.

link to the source code of the demo page shown below

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

Small is really the key word here.
There is no need for a complete website.
Additionally, if computations are not required to reproduce the issue, it is best to not include them as it means, we have to setup our environment for your project before rendering it (for instance, here, you don't provide any information about that, such as Python version or libraries).
Also, if you delete the content, then your post won't have any example for future users to use.

This being said, this (item 2) is going to be a bit tricky to fix as it involves JavaScript and (S)CSS mostly coming from Bootstrap.
You could try looking at that using your browser and Bootstrap documentation.
For item 1, use your favourite browser inspect/developer mode to see what elements to target using (S)CSS.
Or maybe you can achieve that directly using the fenced div:

::: {.callout-note style="background-color: #b22222;"}
:::

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ```  The end. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ```  The end. ````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.