input[type=checkbox],input[type=radio] {
    display: none;
}



label:before {
    content: "\2718";
    color: white;
    border: 1px solid black;
    font-weight: bold;
    margin-right: 5px;
    padding: 2px;
    background: -moz-linear-gradient(top, #494949 0%, #494949 45%, #6A6A6A 55%, #6A6A6A 100%);
    background: -webkit-linear-gradient(top, #494949 0%, #494949 46%, #6A6A6A 50%, #6A6A6A 100%);
    background: linear-gradient(to bottom, #494949 0%, #494949 46%, #6A6A6A 50%, #6A6A6A 100%);
}

label {
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
    line-height: 34px;
}

input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
    content: "\2713";
    background: rgb(98,202,255);
    background: -moz-linear-gradient(top, rgb(98,202,255) 0%, rgb(98,202,255) 20%, rgb(1,152,230) 80%, rgb(1,152,230) 100%);
    background: -webkit-linear-gradient(top, rgb(98,202,255) 0%,rgb(98,202,255) 20%, rgb(1,152,230) 80%,rgb(1,152,230) 100%);
    background: linear-gradient(to bottom, rgb(98,202,255) 0%,rgb(98,202,255) 20%,rgb(1,152,230) 80%,rgb(1,152,230) 100%);
}

/*for small media*/
@media screen and (min-width: 768px) {
    label {
        font-size:13px;
    }
}

/*for  Tablets*/
@media screen and (min-width: 992px) {
    .chcbox {
        text-align: left;
    }

    label {
        font-size:13px;
    }
}

/*for Laptops and Desktop*/
@media screen and (min-width: 1200px) {
    label {
        font-size:16px;
    }
}