.switch{margin-right:.75rem;position:relative;vertical-align:middle;margin-bottom:0;display:inline-block;border-radius:30rem;min-height:1.35rem;font-size:inherit;line-height:1.4}
.switch-input{opacity:0;position:absolute;padding:0;margin:0;z-index:-1}
.switch-toggle-slider{position:absolute;overflow:hidden;border-radius:30rem;background:#e9ecee;color:#000;transition-duration:.2s;transition-property:left,right,background,box-shadow;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.switch .switch-toggle-slider{width:2.5rem;height:1.35rem;font-size:.625rem;line-height:1.35rem;border:1px solid transparent;top:0}
.switch-input:checked~.switch-toggle-slider{background:#5a8dee;color:#fff}
.switch .switch-on{padding-left:.25rem;padding-right:1.1rem}
.switch-input:checked~.switch-toggle-slider .switch-on{left:0}
.switch .switch-toggle-slider i{position:relative;font-size:.inherit;top:-1.35px}
.switch-off,.switch-on{height:100%;width:100%;text-align:center;position:absolute;top:0;transition-duration:.2s;transition-property:left,right}
.switch-off{left:0}
.switch .switch-off{padding-left:1.1rem;padding-right:.25rem}
.switch-input:checked~.switch-toggle-slider .switch-off{left:100%;color:transparent;left:100%;color:transparent}
.switch-toggle-slider::after{content:"";position:absolute;left:0;display:block;border-radius:999px;background:#fff;box-shadow:-1px 2px 3px 0 rgba(0,0,0,.2);transition-duration:.2s;transition-property:left,right,background}
.switch .switch-toggle-slider::after{top:-2px;margin:.25rem 0 0 .25rem;width:13px;height:13px}
.switch .switch-input:checked~.switch-toggle-slider::after{left:1.15rem}
.switch-label{display:inline-block;font-weight:400;color:inherit;position:relative;cursor:default}
.switch .switch-label{top:.01875rem}
.switch .switch-input~.switch-label{padding-left:3rem}
.switch-input:disabled~.switch-label{color:#a8b1bb}
.switch.red .switch-toggle-slider{border-color:red;border-color:rgba(255,0,0,0.5)}
.switch.yellow .switch-toggle-slider{border-color:rgba(255,255,0,0.5)}
.switch.green .switch-toggle-slider{border-color:rgba(0,128,0,0.5)}
.switch.blue .switch-toggle-slider{border-color:rgba(0,0,255,0.5)}
.switch.violet .switch-toggle-slider{border-color:rgba(137,43,226,0.5)}
.switch.orange .switch-toggle-slider{border-color:rgba(255,166,0,0.5)}
.switch.red .switch-input:checked~.switch-toggle-slider{background:red}
.switch.yellow .switch-input:checked~.switch-toggle-slider{background:#ff0;color:#fff}
.switch.green .switch-input:checked~.switch-toggle-slider{background:green}
.switch.blue .switch-input:checked~.switch-toggle-slider{background:blue}
.switch.violet .switch-input:checked~.switch-toggle-slider{background:#8a2be2}
.switch.orange .switch-input:checked~.switch-toggle-slider{background:orange}
.switch.red .switch-toggle-slider::after {background-color: rgb(255, 188, 188);}
.switch.yellow .switch-toggle-slider::after {background-color: rgb(253, 253, 188);}
.switch.green .switch-toggle-slider::after {background-color: rgb(188, 252, 188);}
.switch.blue .switch-toggle-slider::after {border-color: rgb(71, 71, 253);}
.switch.violet .switch-toggle-slider::after {border-color:rgb(216, 188, 255);}
.switch.orange .switch-toggle-slider::after {border-color:rgb(253, 216, 146);}