Hello Ulysses,

You could try to be more specific with your selectors for it to be inherited,

[gist]
body #eb .mod-btn-primary {
color: #fff !important;
background-color: #1e88e5 !important;
border-color: #1e88e5 !important
}
[/gist]

Worked great.... Thanks, Mark.

There is just one issue that I noticed and totally don't know if it has to be written any special way.

For the word "search" it works well in Safari but doesn't in firefox or chrome.

There seems to be one last issue.

As there was one other line I wanted to touch up; which was;

body #eb.eb-mod.eb-mod-search .mod-btn{ 

height: 39px;

}

This was to align the lines around "search" phrase within safari; which now looks good.
Unfortunately, it flipped so now firefox/chrome doesn't align properly.

What would one write prior to placing the following so it will function properly in safari and exclude the other two?

By the way, the code prior to making the change was:

#eb.eb-mod.eb-mod-search .mod-btn {

    height: 32px;

}

here are the images for reference, if needed:

https://www.screencast.com/t/b4XhDyYl
https://www.screencast.com/t/ynj9LAug2

That is probably because of the difference in the way browsers are calculating the box layouts. I suppose you can fix the height of the input so that it works on both browsers,

[gist]
body #eb.eb-mod.eb-mod-search .form-control {
height: 39px;
}
[/gist]

That did the trick.
Thanks, Mark!

Hi there,

You are most welcome. Glad to hear that your issue has been resolved now.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.