How do I remove this black border from the arrow?

[joshanangelofgrace]

Hi Everyone

I am wanting to change the colour of the tooltip to be a dark grey. I have got this mostly working however for some reason there is still a black border around the arrow which I cannot remove. Has anyone got any ideas on how to change the colour of this?

.v-popper__inner {
	max-width: 210px;
	background: #94a3b8 !important;
  border: 1px solid #ddd;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
}

.v-popper__arrow-inner {
	border-color: #94a3b8 !important;
  visibility: visible;
}

.v-popper__arrow-outer {
  border-color: #ddd;
  visibility: visible;
}

.v-popper__popper--hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.v-popper__popper--shown {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

.v-popper__popper--skip-transition {
  transition: none !important;
}

<div
								v-tooltip="{
									content: page.tooltip
								}"
								class="flex items-center gap-x-2 text-black"
								:class="
									(isHomePage && index === 0 && currentDepth === 0) ||
									routePageUrl == page.url
										? 'font-medium'
										: 'font-normal'
								"
							>.....</div>