Can't overwrite !important tag (tried several tips already)

Question

I'm having trouble overwriting an !important tag for background-color and color. Here's what I'm given:

Chrome Inspect screenshot

The native greens already seem to be overwriten but I need a different color. If I add my custom CSS the ways I read in this forum, it's not getting the high enough specificity, apparently. Could someone correct me, please?

.ccb-wrapper-148669 .calc-buttons .calc-btn-action {
    background: #8c76af !important;
    color: #000 !important;
}

I tried changing specificity and using a Javascript snippet but obviously, a wrong way...

Answer 1

From the screenshot you've shared, it seems the selectors you're using might not be targeting the right element to change the existing styles.

Answer 2

To increase the specificity of your CSS selector and override the existing styles, you can try adding additional parent selectors or class names to target the desired elements.

body .ccb-wrapper-148669 .calc-buttons .calc-btn-action {
    background: #8c76af !important;
    color: #000 !important;
}

In this example, body is added as a parent selector to increase specificity. If that doesn't work, you can try adding more parent selectors or class names based on the structure of the html.