duplicate Dropdown Arrow

Hello.

The Dropdown selector in the Members Directory is duplicated. One is shown by our Theme, the other by UM.

The Theme does this by using :after for the select container:

.select2-container.select2-container--default .select2-selection:after {
    content: '\E9C1';
    font-family: "fontello";
    display: block;
    position: absolute;
    z-index: 2;
    top: calc(50% + 1px);
    right: 1.2em;
    width: 1em;
    height: 1em;
    line-height: 1em;
    text-align: center;
    margin-top: -0.5em;
    pointer-events: none;
    cursor: pointer;
    color: var(--theme-color-input_text);
}

I’d much prefer using the Arrows provided by my Theme, so I tried to add Additional CSS via the Customization Menu to set display: none for the Arrow.

The Problem with that is that in Ultimate Member’s um-styles.css, many values have !important on them (Which is bad practice in itself), so standard Additional CSS overrides won’t work.

I also don’t want to have to add !important myself and use an even more specific CSS selector than the one used by the plugin.

Editing the Plugins .css files is also something I really want to avoid, as updates could remove those customizations.

Specifically, the css rule I’m talking about starts on Line 945:

.um-search-filter .select2.select2-container .select2-selection .select2-selection__arrow,
.um-field .select2.select2-container .select2-selection .select2-selection__arrow {
	display: inline-block !important;
	width: 34px !important;
	height: 100% !important;
	position: absolute;
	right: 0;
	top: 0;
	text-align: center;
	background: transparent !important;
	border: none !important;

Could you add some way to override this, or at least remove some of those !important statements? As it stands, this probably clashes with any templates that use :after for these things.