I've been trying to get this to work for about an hour without luck.

Your code seems like it should work.  But it appears that the new designer is changing the CSS to limit where it can be applied and that's causing this to not work.

If you examine the elements on the form, you'll find a div that has four classes like this:
"pdc pdc-{UUID} lf-form Form"
Where UUID is a long alphanumeric identifier unique to the form.

If you then add some CSS to your form like this:   div { background-color: #FF00FF!important; }
which should be making every single div element have a purple background, you'll see that code is only applied to the div elements undernearth that div that had the four classes I mentioned before.  You'll also notice that the elements that do have the purple background from that custom CSS are not showing it how you typed it, but are instead showing it with that pdc-{UUID} class, like this:     pdc-{UUID} div { background-color: #FF00FF!important; }

It appears that the new designer is automatically pre-pending this pdc-{UUID} class to the beginning of all CSS, causing it to only apply within that div.  Unfortunately, the calendar items with the flatpickr class are not a subset of that div with the pdc-{UUID} class and instead are an immediate child of the body element.

Unless someone smarter than me weighs in, I don't think CSS has any way to select the parent or ancestor of an element.  As someone on stackoverflow astutely said "...that's what Javascript is for."  Unfortunately, with the new designer not currently having any Javascript functionality on prem, I can't find a solution for this one.  Sorry, I really tried.