.checkbox{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.checkbox__input{
    display:none;
}

.checkbox__box{
    width: 2.25em;
    height: 2.25em;
    border: 2px solid #cccccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    transition: background 0.15s, border-color: 0.15s;
}

.checkbox__box::after{
    content: '\2714';
    color: #ffffff;
    transform: scale(0);
    transition: transform 0.15s;
}

.checkbox__input:checked + .checkbox__box {
    background: #078d73;
    border-color: #078d73;
}

.checkbox__input:checked + .checkbox__box::after {
    transform: scale(1);
}