How to change color of hyperlink inside of a tooltip

Hi - I have a tooltip set up and it works great. Now they want a link inside of the tooltip. So I added it in and it works fine except I'm having trouble with the CSS styling of the link. Right now, the link is showing up as blue text with an underline and I want it to continue to be underlined but just want to make the text color a light gray as the BG of the tooltip is black.

I'd appreciate it if someone could help me with this. I did Google this but I got replies and nothing seems to work with my code. Here is the HTML and CSS.

<div class="mtooltip">Request a free sample
<span class="mtooltiptext">You must be a practitioner. <a href="https://www.google.com/">Click here to proceed</a></span></div>

<style>
.mtooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.mtooltip .mtooltiptext {
visibility: hidden;
width: 270px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 10px 10px 10px 10px;
font-family: "Arial";
font-size: 15px;

/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 60%;
margin-left: -60px;
}

.mtooltip:hover .mtooltiptext {
visibility: visible;
}

</style>