.control {
            font-family: arial;
            display: block;
            position: relative;
            padding-left: 40px;
            margin-bottom: 20px;
            padding-top: 6px;
            cursor: pointer;
            font-size: 18px;
        }
            .control input {
                position: absolute;
                z-index: -1;
                opacity: 0;
            }
        .control_indicator {
            position: absolute;
            top: 2px;
            left: 0;
            height: 30px;
            width: 30px;
            background: #ffffff;
            border: 0px solid #000000;
            transition: all .3s;
        }
        .control-radio .control_indicator {
            border-radius: 50%;
        }
        
        .control:hover input ~ .control_indicator,
        .control input:focus ~ .control_indicator {
            background: #ffff88;
        }
        
        .control input:checked ~ .control_indicator {
            background: #fff;
        }
        .control:hover input:not([disabled]):checked ~ .control_indicator,
        .control input:checked:focus ~ .control_indicator {
            background: #fff;
        }
        .control input:disabled ~ .control_indicator {
            background: #e6e6e6;
            opacity: 0.6;
            pointer-events: none;
        }
        .control_indicator:after {
            box-sizing: unset;
            content: '';
            position: absolute;
            display: none;
        }
        .control input:checked ~ .control_indicator:after {
            display: block;
        }
        .control-radio .control_indicator:after {
            left: 7px;
            top: 7px;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #ff4d46;
            transition: all .3s;
        }
        .control-radio input:disabled ~ .control_indicator:after {
            background: #7b7b7b;
        }