.switch-btn {position: relative; display: block; vertical-align: top; width:50px; height:12px; border-radius: 15px; cursor: pointer;}
.checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
.text-switch {background-color:#dcdcdc;  border-radius: inherit; color: #fff; display: block; font-size: 12px; height: inherit; position: relative; text-transform: uppercase;}
.text-switch:before, .text-switch:after {position: absolute; top: 50%; margin-top: -.3em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;}
.text-switch:before {content: attr(data-no); right: 11px;}
.text-switch:after {content: attr(data-yes); left: 11px; color: #FFFFFF; opacity: 0;}
.checked-switch:checked ~ .text-switch {background-color: #62a2fa; }
.checked-switch:checked ~ .text-switch:before {opacity: 0;}
.checked-switch:checked ~ .text-switch:after {opacity: 1;}
.toggle-btn {background: linear-gradient(#eee, #fafafa); border-radius: 100%; height: 22px; left: 1px; position: absolute; top:-5px; width: 22px;}
.checked-switch:checked ~ .toggle-btn {left: 30.5px;background: linear-gradient(#eee, #62a2fa); }
 .text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}

/*= add for "no-radius" =*/
.no-radius, .no-radius .toggle-btn{border-radius: 0;}
/*= add for "no-radius" end =*/
/*= add for "top-to-bottom" =*/
.circle-style .toggle-btn::before{background: linear-gradient(#dedede, #cacaca); border-radius: 50%; content: ""; height: 14px; margin-top: 6px; padding: 0; width: 14px;}
/* add for "top-to-bottom" end */

/* toggle switch css end */