.fugu-switch {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 25px;
  border-radius: 1000px;
  background-color: #777;
  margin: 0; }
  .fugu-switch input {
    position: absolute;
    opacity: 0;
    filter: alpha(opacity=0); }
  .fugu-switch input:checked + i:before {
    top: 50%;
    bottom: 50%;
    left: 50%;
    right: 5px;
    border-width: 0; }
  .fugu-switch i:before {
    content: "";
    position: absolute;
    background-color: #fff;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    border: 1px solid #f0f0f0;
    border-radius: 1000px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s; }
  .fugu-switch input:checked + i:after {
    margin-left: 16px; }
  .fugu-switch i:after {
    content: "";
    position: absolute;
    background-color: #fff;
    width: 23px;
    top: 1px;
    bottom: 1px;
    border-radius: 50%;
    -webkit-transition: margin-left 0.3s;
    -moz-transition: margin-left 0.3s;
    transition: margin-left 0.3s;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); }

.fugu-switch-default {
  background-color: #777; }

.fugu-switch-primary {
  background-color: #428bca; }

.fugu-switch-success {
  background-color: #5cb85c; }

.fugu-switch-info {
  background-color: #5bc0de; }

.fugu-switch-error {
  background-color: #d9534f; }

.fugu-switch-sm {
  width: 35px;
  height: 20px; }
  .fugu-switch-sm input:checked + i:after {
    margin-left: 16px; }
  .fugu-switch-sm i:after {
    width: 18px; }

.fugu-switch-md {
  width: 40px;
  height: 25px; }
  .fugu-switch-md input:checked + i:after {
    margin-left: 16px; }
  .fugu-switch-md i:after {
    width: 23px; }

.fugu-switch-lg {
  width: 50px;
  height: 30px; }
  .fugu-switch-lg input:checked + i:after {
    margin-left: 21px; }
  .fugu-switch-lg i:after {
    width: 28px; }