Checkbox within radio button showing circle instead of tick

I intend to create two radio button, the first radio button will have 2 check box indent in it. I have created the radio button and checkbox. I intend to just use CSS to toggle the behavior.

First issue: Checkbox is using the same style as radio button. Desire outcome: Checkbox is using tick, radio button is using dot.

Second issue: Unable to disabled the checkbox when second radio button is clicked. Desire outcome: When the second radio button is click, the checkbox are disabled, only when the first radio button is clicked, the checkbox will be able to select.

Below is my code. Hope someone could advice me on this.
Jsfiddle: http://ift.tt/2zyPGql

        <style>

        .control {
            font-size: 20px;
            position: relative;
            display: block;
            margin-bottom: 20px;
            padding-left: 60px;
            cursor: pointer;
            color: grey;

        }

        .control input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

        .control__indicator {
            position: absolute;
            top: 2px;
            left: 0;
            width: 35px;
            height: 35px;
            background: white;
            border: 2px solid #014586;

        }
            .control--radio{
                padding-top:8px;

            }
            .control--checkbox{
                font-weight: bold;
                line-height: 23px;

            }

        .control--radio .control__indicator {
            border-radius: 50%;
        }

        .control--checkbox .control__indicator{
                border-radius: 5px;



            }


            /* Hover and focus states */
        .control:hover input ~ .control__indicator,
        .control input:focus ~ .control__indicator {
            background: white;
        }

        /* Checked state */
        .control input:checked ~ .control__indicator {
            background: #014586;
        }

        /* Hover state whilst checked */
        .control:hover input:not([disabled]):checked ~ .control__indicator,
        .control input:checked:focus ~ .control__indicator {
            background: #014586;
        }

        /* Disabled state */
        .control input:disabled ~ .control__indicator {
            pointer-events: none;
            opacity: .6;
            background: #e6e6e6;
        }

        /* Check mark */
        .control__indicator:after {
            position: absolute;
            display: none;
            content: '';
        }

        /* Show check mark */
        .control input:checked ~ .control__indicator:after {
            display: block;
        }

        /* Checkbox tick */
        .control--checkbox .control__indicator:after {
            top: 5px;
            left: 13px;
            width: 8px;
            height: 35px;
            transform: rotate(45deg);
            border: solid #fff;
            border-width: 0 3px 3px 0;
        }

        /* Disabled tick colour */
        .control--checkbox input:disabled ~ .control__indicator:after {
            border-color: #7b7b7b;
        }

        /* Radio button inner circle */
        .control--radio .control__indicator:after {
            top: 12px;
            left: 12px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #fff;
        }

        /* Disabled circle colour */
        .control--radio input:disabled ~ .control__indicator:after {
            background: #7b7b7b;
        }
        </style>



            <label class="control control--radio">Male
                <input type="radio" name="gender" />
                <div class="control__indicator"></div>

                    <label class="control control--checkbox">First checkbox<br>test
                <input type="checkbox" checked="checked"/>
                <div class="control__indicator"></div>
            </label>
            <label class="control control--checkbox">Second checkbox
                <input type="checkbox"/>
                <div class="control__indicator"></div>
            </label>



            </label>


            <label class="control control--radio">Female
                <input type="radio" name="gender"/>
                <div class="control__indicator"></div>
            </label>