Carousel arrows reverting back to default color after adding custom CSS

Site URL: http://jenuman.com

Hey y'all, apologies if this problem has been solved before but I couldn't find the solution anywhere. I have been trying to add some customization to the directional arrows on the image carousel in the Wells template. My CSS code has worked for everything except the arrow color, which has the !important tag. On the custom CSS page everything seems to be in order but when I go to my page with the carousel and reload, the arrow color reverts back to default (white). It will flash the correct color and disappear. I'm not sure what the issue is so I'm coming to y'all for any help. My custom CSS is below and what I'd like it to look like is in the attached screenshot. Thanks so much in advance.

.sqs-gallery-controls .previous, {
  color: black !important;
  background-color: transparent !important;
  position: absolute !important;
  left: -5% !important;
  right: inherit !important;
}

.sqs-gallery-controls .next {
  color: black !important;
  background-color: transparent !important;
  position: absolute !important;
  left: inherit !important;
  right: -6% !important;
}

I tried to look at your site but it is closed. It is hard to help if we can't see your site.

Where is gallery?

https://www.jenuman.com/drawing-gallery/