Code to overwrite specific elements of built-in theme [SOLVED]

Hello,
this question has to do with themes.

I'm currently using the 'Future Teacher' theme that came with Xerte. However, I'm overwriting some styles using 'style'. For instance, I changed the font, and header and footer area colours. and the hover-over colour of the icons at the footer. However, there are 2 things I couldn't figure out how to change the colour of. The text of the progress bar, and the chevron that opens and close the tools. (see attached image).

I'm not great with css/html. could someone tell me what's the code to change these 2 things on my footer? many thanks!

Hi
I haven't tested this but try the following:
#x_footerShowHide .fa, .fas {
color: yellow;
}
#x_footerProgress .pbTxt {
color: yellow;
}
Obviously change the color values to whatever you want them to be.
Keep in mind that custom styles like you have added via the styles optional property will break the accessibility options to change theme to high contrast or black on yellow. The proper way to do this is to make a copy of the Future Teacher theme, change that and then add that to your installation.
HTH
Ron

Thank you!, I will try this. but first, how do I 'make a copy' of the Future Teacher theme?

Just reporting back. Yes the code works! Thank you so much! Also, I tested all of the accessibility options and they all still worked properly!
thank you so much!