How to override !important CSS?

[Abhishek_Kumar]

Hello, I am having difficulty to run Custom CSS. I tried the following code but It doesn’t overriding on !important element.

.fc-ab-root .fc-dialog-overlay {
  opacity: 1 !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  background-color: rgb(5 10 18 / 58%) !important;
}

I also tried to implement with jQuery script, it’s working on the console but it won’t work when I implement from the backend.

document.querySelector('.fc-ab-root .fc-dialog-overlay').style.cssText = "opacity: 1 !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; background-color: rgb(5, 10, 18, 0.58) !important;";

Can anyone help me please?

Thanks & Regard
Abhishek

[PaulOB]

You didn’t show the rule that you were trying to override?

Without knowing what set the rule in the first place then you can’t override it as you need to at least match the weight and specificity.

[Abhishek_Kumar]

By default, using the script it run stylesheet with !important

I have to run my Custom CSS. How to fix?

[PaulOB]

Whoops it looks like you did show me the original rules

The problem must be that your rules have been placed earlier in the cascade but need to be later.

You could add more specificity to them if that’s not possible by using a parent class on the selector.

As a test add body before your custom rules.

body .fc-ab-root .fc-dialog-overlay {

[Abhishek_Kumar]

Sir, You are a diamond. Thank you so much.