CSS to control color

H5P is key in enabling my students to learn independently, grateful! The default blue color is easy on the eye, but it's time to recolor and match my site's teal. I use several content types in my site. One example is the multiple choice quiz in the personal pronouns tab on this page (https://hebrewlion.com/hebrew/vocab/#tab-personalpronouns). With the help of AI, I managed to update some blue elements, but the border remains dark blue. If anyone can help out with the code, I'd appreciate it. Thanks.
Here's what I added thus far:

/* For elements inside the summary section */ .h5p-dialogcards-summary-header, .h5p-dialogcards-summary-table-row-category, .h5p-dialogcards-summary-table-row-symbol.h5p-dialogcards-check, .h5p-dialogcards-summary-table-row-symbol.h5p-dialogcards-times { color: #207daf !important; } /* For audio control buttons */ .h5p-audio-minimal-button.h5p-audio-minimal-play { background: #207daf !important; } /* For the progress bar */ .h5p-dialogcards-progress { background-color: #207daf !important; color: #fff !important; } /* Ensure SVG paths remain correctly colored */ .h5p-dialogcards-footer-button svg path, .h5p-dialogcards-button-restart svg path, .h5p-dialogcards-buttonNextRound svg path { fill: inherit !important; } /* Additional elements that might be colored */ .h5p-joubelui-button { background-color: #207daf !important; border-color: #207daf !important; color: #fff !important; }