.checkbox {
//    margin: 50px auto;
    position: relative;
    display: block;
    width: 75%;
    min-height: 40px;
    float: left;
}

input[type="checkbox"] {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}

.checkbox label {
    min-height: 24px;
    padding-left: 35px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    vertical-align: sub;
}

input[type="checkbox"]:focus + label::before {
    outline: rgb(00, 255, 00) auto 5px;
}

// boxvalasz
.boxvalasz {
    position: absolute;
    top: -4px;
    left: -4px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    user-select: none;
    color: firebrick;
}
.boxvalasz:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid firebrick;
}
.boxvalasz:after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid firebrick;
    border-left: 2px solid firebrick;
    -webkit-transform: rotate(-45deg) scale(0);
    -moz-transform: rotate(-45deg) scale(0);
    -ms-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    position: absolute;
    top: 12px;
    left: 10px;
}

input[type="checkbox"]checked ~ .boxvalasz::before {
    color: firebrick;
}

input[type="checkbox"]:checked ~ .boxvalasz::after {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

// boxjo
.boxjo {
    position: absolute;
    top: -4px;
    left: -4px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    user-select: none;
    color: green;
}
.boxjo:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid green;
}
.boxjo:after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid green;
    border-left: 2px solid green;
    -webkit-transform: rotate(-45deg) scale(0);
    -moz-transform: rotate(-45deg) scale(0);
    -ms-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    position: absolute;
    top: 12px;
    left: 10px;
}

input[type="checkbox"]checked ~ .boxjo::before {
    color: green;
}

input[type="checkbox"]:checked ~ .boxjo::after {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

// boxrossz
.boxrossz {
    position: absolute;
    top: -4px;
    left: -4px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    user-select: none;
    color: red;
}
.boxrossz:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid red;
}
.boxrossz:after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
    -webkit-transform: rotate(-45deg) scale(0);
    -moz-transform: rotate(-45deg) scale(0);
    -ms-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    position: absolute;
    top: 12px;
    left: 10px;
}

input[type="checkbox"]checked ~ .boxrossz::before {
    color: red;
}

input[type="checkbox"]:checked ~ .boxrossz::after {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}