.lbl {
    position: relative;
    /*display: block;*/
    height: 12px;
    width: 30px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lbl:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
    content: '';
    transition: all 0.3s ease;
}

.lbl:active:after {
    /*transform: scale(1.15, 0.85);*/
}

.cbx:checked~label {
    background: #F8BBD0;
}

.cbx:checked~label:after {
    left: 15px;
    background: #EC407A;
}

.cbx:disabled~label {
    background: #d5d5d5;
    pointer-events: none;
}

.cbx:disabled~label:after {
    background: #bcbdbc;
}

.hidden {
    display: none;
}