Boa tarde,
Eu estilizei um grupo de checkbox. Só que ao clicar ela não fica marcada. Segui todos os passos para fazer a mudança e mesmo assim não consigo deixar selecionado. Alguém poderia ver o meu código no codePen e me dizer onde posso estar errando?  

formulario.asp

    <div class="form-group">
    <div class="checkbox-nice">          
    <input class="checkbox-nice"  type="checkbox" name="recursos" id="recursos" value="Chat Interno">
    <label for="Chat Interno"> Chat Interno </label>
    </div>
    <div class="checkbox-nice">
    <input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="Confirmação Automatica por SMS">
    <label class="form-check-label"> Confirmação Automática por SMS </label>
    </div>
    <div class="checkbox-nice"><input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="App  para Android">
    <label class="form-check-label"> App  para Android </label>
    </div>
    <div class="checkbox-nice">
    <input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="Relatorios com Graficos">
    <label class="form-check-label"> Relatórios com Gráficos </label>
    </div>
    <div class="checkbox-nice">
    <input class="form-check-input" type="checkbox" name="recursos" id="recursos" value="Envio de E-mail pelo Sistema">
    <label class="form-check-label"> Envio de E-mail pelo Sistema </label>
    </div></div>

css do checkbox

    .checkbox-nice {
        position: relative;
        padding-left: 15px;
        
    }
    .checkbox-nice input[type=checkbox] {
        visibility: hidden;
    }
    .checkbox-nice label {
        padding-top: 3px;
    }
    .checkbox-nice.checkbox-inline>label {
        margin-left: 16px;
    }
    .checkbox-nice label:before {
        cursor: pointer;
        position: absolute;
        width: 22px;
        height: 22px;
        left: 1px;
        top: 1px;
        background: #ffffff;
        content: "";
        border: 1px solid #a62b32;
        border-radius: 3px;
        background-clip: padding-box;
    }
    .checkbox-nice label:after {
        opacity: 0;
        content: '';
        position: absolute;
        width: 12px;
        height: 7px;
        background: transparent;
        top: 7px;
        left: 6px;
        border: 3px solid #a62b32;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .checkbox-nice label:hover::after {
        opacity: 0.3;
    }
    .checkbox-nice input[type=checkbox]:checked+label:after {
        opacity: 1;
    }

Muito obrigada! 
[Codigo html e css no codepen][1]


  [1]: http://codepen.io/alepaula/pen/vybNNG