Styling radiobuttons

Hey all,

I'm trying to style the standard radio-buttons in accordance with a design provided by the client. See the below example. 

Alas, radio-buttons turn out to be taken directly from the bootstrap framework, and have no easily editable classes in the custom SCSS.

Using pseudo-classes (see test-code below) I was able to get something working on Chrome. In Firefox the result looked quite poor, and in Edge this code made the radio-buttons disappear altogether.  In short; not quite a working solution. 

Does anyone have experience applying custom styling to the radio-buttons, and have some pointers on do's and don'ts? 

.custom-radio-inline {
    input[type="radio"] {
        position: absolute;
        height: 0;
        width: 0;
        outline: none !important;
        padding-left: 20px;
        padding-right: 10px;
        margin-left: -25px;
        margin-right: 20px;
        // opacity: 0;&:before {
            content: '';
            background: #f4f4f4;
            border-radius: 100%;
            border: 1px solid darken(#f4f4f4, 25%);
            display: inline-block;
            width: 1.4em;
            height: 1.4em;
            position: relative;
            top: -5px;
            margin-right: 1em;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease;
            outline: none !important;
        }&:checked {&:before {
                background-color: $brand-primary;
                box-shadow: inset 0 0 0 4px #f4f4f4;
            }
        }&:focus,&:active {&:before {
                outline: none !important;
            }
        }&:disabled {&:before {
                box-shadow: inset 0 0 0 4px #f4f4f4;
                border-color: darken(#f4f4f4, 25%);
                background: darken(#f4f4f4, 25%);
            }
        }&:empty {&:before {
                margin-right: 0;
            }
        }
    }
}

.checkbox-inline, .radio-inline {
    margin-right: 15px;
    color: $gray;
    padding-left: 25px;
    }

Kind regards,

Chris