Change width and/or color of scrollbar?

Hi all,

I’m using a custom-layout-card, with a fixed height:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
overflow: scroll;
height: 980px;

It’s a very long card, and I have a scrollbar on the right side of my screen (intenionally !).
Works fine so far, and it’s the only way I can show everything I need on my 10.1" touchscreen (resolution 1920x1200)
I already have about 15 tab-pages, not wanting to split my data across 2 tab-pages for this one …
So far so good, but I want to make the scrollbar wider (and maybe also change colors)
In CSS you would go like this:

<style>
/* width */
::-webkit-scrollbar {
width: 40px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
</style>

But how to use this with this custom layout card or with card_mod ?

Best regards from Belgium,
Kris