.radio {
    margin: 0;

}

    .radio input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

        .radio input[type="radio"] + .radio-label:before {
            content: '';
            background: #f4f4f4;
            border-radius: 100%;
            border: 1px solid #b4b4b4;
            display: inline-block;
            width: 1.0em;
            height: 1.0em;
            position: relative;
            top: 0.2em;
            margin-right: 0.1em;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease;
        }

        .radio input[type="radio"]:checked + .radio-label:before {
            background-color: white;
            box-shadow: inset 0 0 0 5px #337efd;

        }

        .radio input[type="radio"]:focus + .radio-label:before {
            outline: solid 4px orange;
        }

        .radio input[type="radio"]:disabled + .radio-label:before {
            box-shadow: inset 0 0 0 4px #f4f4f4;
            border-color: #b4b4b4;
            background: #b4b4b4;
        }

        .radio input[type="radio"] + .radio-label:empty:before {
            margin-right: 0;
        }