Contact form 7 checkbox custom styling

I'm trying to customize the checkboxes in the Contact form 7.

The shortcode for the checkbox is

<p>[checkbox checkbox id:roundcircle class:roundcircle use_label_element "Subscribe"]</p>

which output in html code

<p>
<span class="wpcf7-form-control-wrap checkbox">
<span class="wpcf7-form-control wpcf7-checkbox roundcircle" id="roundcircle">
<span class="wpcf7-list-item first last">
<label>
<input type="checkbox" name="checkbox[]" value="Subscribe" />&nbsp;
<span class="wpcf7-list-item-label">Subscribe</span>
</label></span></span></span></p>

I've been trying to style the checkboxes with various successes, but wasn't able to get it to work and display the way I want it to display.

Here's my css code

.subscribeform input[type=checkbox] {
visibility: hidden;
}
.wpcf7-list-item > label > input[type=checkbox] + span  {
width: 28px;
 height: 28px;
display:inline-block;
 position: relative;
border-radius: 50px;
border: 1px solid #000000;
vertical-align:middle;
cursor: pointer;
box-sizing: border-box;
}
.wpcf7-list-item > label:after > input[type=checkbox] + span  {
content: '';
width: 16px;
height: 16px;
position: absolute;
background-color: #000000;
top: 2px;
left: 2px;
border-radius: 50px;
opacity: 0;
}
.wpcf7-list-item > label:after > input[type=checkbox]:checked + span {
opacity: 1;
}

I'm trying to make it look like this picture below.

You can check out the codepen in action.