Styling the radio button (pseudo-element) on hover and focus

Hi there,

we have used css to style our survey, so that the background is grey, and the text and borders of all elements are white.
For single-answer multiple choice questions, we also have to style the pseudo-element radio button to be white as well using the following css:
.Skin label.MultipleAnswer>span:after, .Skin label.SingleAnswer>span:after {border-color: #fff;}

This works well.

The problem we are having is when the participant hovers or focuses on the choice, the radio button turns back to grey.

We have tried the following css to set the border colour of the pseudo-element, but with no success:

.Skin label.MultipleAnswer>span:hover::after, .Skin label.SingleAnswer>span:hover::after {border-color: #fff;}

.Skin label.MultipleAnswer>span:hover:after, .Skin label.SingleAnswer>span:hover:after {border-color: #fff;}

.Skin label.MultipleAnswer>span:after::hover, .Skin label.SingleAnswer>span:after::hover {border-color: #fff;}

.Skin label.MultipleAnswer>span:hover:after, .Skin label.SingleAnswer>span:after:hover {border-color: #fff;}

The screenshot below shows the issue. The participant is hovering over the first option (Left) and the radio button is grey, when we want it to be white:
TIA