I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.

However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such:
<https://imgur.com/SYF7xmJ>

No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.

CSS that I have tried:

```css

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
    color: $brand-red;
    border-left: 0px !important;
    border-right: 0px !important;
}

.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
    color: $brand-red;
    border-left: 0px !important;
    border-right: 0px !important;
}

```

I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.