Hikashop Cart Notification Plugin

-- HikaShop version -- : 4.4.1
-- Joomla version -- : 3.9.26
-- PHP version -- : 7.4.15

Hello,
I have attempted to make div.vex-content larger and to change the color of the buttons, using the following code within Hikashop / CSS Options / Front-end CSS File, and also within my template's CSS. Yet, the vex-content does not increase in size nor does the button color change.
What is the correct css, and where should I place the css code?

Thanks

CODE:
.vex.vex-theme-default .vex-content {
width: 550px;
}

.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
background: #30506e;
}

Also attempted

Hi,

As the file media/com_hikashop/css/vex.css (where all the default CSS of vex is) is normally loaded after HikaShop's CSS, if you put your CSS in HikaShop's CSS, it will be overridden by the one in vex.css.
So to avoid that, the simplest is to use !important in your CSS so that your CSS takes the priority regardless of whether it's loaded before or after.
www.w3schools.com/css/css_important.asp