[class|=switch] { position: relative; display: inline-block; width: 40px; height: 20px; border-radius: 20px; line-height: 20px; -webkit-tap-highlight-color: rgba(255,255,255,0); vertical-align: text-bottom; }
.switch-on { border: 1px solid #dfdfdf; box-shadow: #367fa9 0px 0px 0px 20px inset; transition: border 0.4s, box-shadow 0.2s, background-color 1.2s; background-color: #367fa9; cursor: pointer; }
[class|=switch]:before { position: absolute; display: inline-block; content: ' '; width: 18px; height: 18px; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 50%; left: 0; top: 0; }
.switch-on:before { left: auto; right: 0; transition: background-color 0.4s, left 0.2s; }
.switch-off { border: 1px solid #dfdfdf; transition: border 0.4s, box-shadow 0.4s; background-color: rgb(255, 255, 255); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; background-color: rgb(255, 255, 255); cursor: pointer; }
.switch-off:before { left: 0; transition: background-color 0.4s, left 0.2s; }
.switch-on.switch-disabled { opacity: .5; cursor: auto; }
.switch-off.switch-disabled { background-color: #F0F0F0 !important; cursor: auto; }
.switch-off.switch-readonly { }
.switch-on.switch-close{cursor:default;}
.switch-off.switch-close {cursor: default;}