input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    display: inline-block;
    width: 50px;   
    position: relative;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin: 0px 20px;
    box-sizing: border-box;
}
input[type="checkbox"] + label:after {
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 15px;
    height: 15px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
}

#md_3:checked + label.red:after {
    background: #D9534F;
}

#md_3:checked + label.green {
    background: #A4CDFF;
}

#md_3:checked + label.green:after {
    background: #358FFF;
}

#md_3:checked + label:after {
    left: calc(100% - 15px);
}

#md_3 + label {
    background: #ddd;
    border-radius: 30px;
    height: 10px;
}

#md_3 + label:after {
    background: #358FFF;
    border-radius: 50%;
    top: -3px;
    box-shadow: 0px 0px 3px #aaa;
}

/*#mds_3:checked + label.red {
    background: #ECA9A7;
}*/

/*#mds_3:checked + label.red:after {
    background: #D9534F;
}*/

/*#mds_3:checked + label.green {
    background: #AEDCAE;
}*/

/*#mds_3:checked + label.green:after {
    background: #5CB85C;
}*/

/*#mds_3:checked + label:after {
    left: calc(100% - 20px);
}*/

/*#mds_3 + label {
    background: #ddd;
    height: 3px;
}*/

/*#mds_3 + label:after {
    background: #fff;
    border-radius: 50%;
    top: -9px;
    box-shadow: 0px 0px 3px #aaa;
}
*/