Possible to style accordion item in Custom CSS setting for Nearby Instant App?

[MatthewKing]

I'm using the Nearby Instant App and would like to style (change color) the results list header (not sure what the name is).  I've been reading the calcite design system info on the developer website and using the sample tool it looks like I can change the color,  but when I copy over to the Custom CSS on the Nearby Instant app it doesn't take.  So the question is what's the CSS to change these items?  Thanks!

This is from the developer website

And this is what I'm trying to style

[KellyHutchins · Accepted solution]

You should be able to update the background color for Nearby using the following css. 

calcite-accordion{
--calcite-accordion-background-color:yellow;

}

And depending on how the app is configured you may be able to use just this option if all you want is the title area background to be a different color:

.calcite-mode-light, calcite-accordion{
--calcite-block-header-background-color:magenta;
}

[MatthewKing]

Thanks @KellyHutchins !

That second CSS did the trick.  The first one created yellow around the items, but the next one (magenta) was what I was looking for.  I thought I had already tried that one, but I guess not.

Another question, what's the CSS for the distance box (that color stayed white) for each of the items?

[KellyHutchins]

You should be able to style that section using the class (dist) that is applied. Here's an example:

.dist{
background:magenta;}
}

[MatthewKing]

Thanks @KellyHutchins, that worked!