.elem-switch input:disabled + label {
    pointer-events: none;
    opacity: 0.5;
}
.elem-switch input[type="checkbox"] {
  display: none;
}
.elem-switch input[type="checkbox"] + label {
  display: inline-block;
  width: 40px;
  height: 20px;
  position: relative;
  transition: 0.3s;
  margin: 0 5px;
  box-sizing: border-box;
}
.elem-switch input[type="checkbox"] + label:after,
.elem-switch input[type="checkbox"] + label:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  transition: 0.3s;
  cursor: pointer;
}
.elem-switch input[type="checkbox"]:checked + label.red {
  background: #ECA9A7 !important;
}
.elem-switch input[type="checkbox"]:checked + label.red:after {
  background: #D9534F !important;
}
.elem-switch input[type="checkbox"]:checked + label.green {
  background: #AEDCAE !important;
}
.elem-switch input[type="checkbox"]:checked + label.green:after {
  background: #5CB85C !important;
}
.elem-switch input[type="checkbox"]:checked + label:after {
  left: calc(100% - 20px);
}
.elem-switch input.typical:checked + label:after {
  left: calc(100% - 20px);
}
.elem-switch input.typical + label {
  background: #ddd;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #aaa;
}
.elem-switch input.typical + label:after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 3px #aaa;
}
.elem-switch input.wide-line:checked + label:after {
    left: calc(100% - 20px);
}
.elem-switch input.wide-line + label {
    background: #c7c7c7;
    border-radius: 20px;
    height: 10px;
}
.elem-switch input.wide-line + label:after {
    background: #fff;
    border-radius: 50%;
    top: -5px;
    box-shadow: 0 0 3px #aaa;
}
.elem-switch input.thin-line:checked + label:after {
    left: calc(100% - 20px);
}
.elem-switch input.thin-line + label {
    height: 3px;
    background: #ddd;
    vertical-align: middle;
}
.elem-switch input.thin-line + label:after {
    background: #fff;
    box-shadow: 0 0 3px #aaa;
    border-radius: 50%;
    top: -9px;
}
.elem-switch input.border:checked + label:after {
    left: calc(100% - 14px);
}
.elem-switch input.border + label {
    border: 2px solid #ddd;
    border-radius: 20px;
}
.elem-switch input.border + label:after {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}
.elem-switch input.inset:checked + label:after {
    left: calc(100% - 18px);
}
.elem-switch input.inset + label {
    background: #ddd;
    border-radius: 20px;
}
.elem-switch input.inset + label:after {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}
.elem-switch input.box:checked + label:after {
    left: calc(100% - 18px);
}
.elem-switch input.box + label {
    background: #ddd;
}
.elem-switch input.box + label:after {
    width: 16px;
    height: 16px;
    background: #fff;
    top: 2px;
    left: 2px;
}
.elem-switch input.flex:checked + label:active:after {
    left: calc(100% - 28px);
}
.elem-switch input.flex:checked + label:after {
    left: calc(100% - 18px);
}
.elem-switch input.flex + label {
    background: #ddd;
    border-radius: 20px;
}
.elem-switch input.flex + label:active:after {
    width: 26px;
}
.elem-switch input.flex + label:after {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 10px;
    top: 2px;
    left: 2px;
}
.elem-switch input.full-flex:checked + label:after {
    width: 36px;
}
.elem-switch input.full-flex + label {
    background: #ddd;
    border-radius: 20px;
}
.elem-switch input.full-flex + label:after {
    width: 16px !important;
    height: 16px;
    background: #fff;
    border-radius: 10px;
    top: 2px;
    left: 2px;
}
.elem-switch input.bubble:checked + label.red:after {
    background: #D9534F;
}
.elem-switch input.bubble:checked + label.green:after {
    background: #5CB85C;
}
.elem-switch input.bubble:checked + label.red:before {
    background: #D9534F;
}
.elem-switch input.bubble:checked + label.green:before {
    background: #5CB85C;
}
.elem-switch input.bubble:checked + label:active:before {
    left: calc(100% - 30px);
}
.elem-switch input.bubble:checked + label:after,
.elem-switch input.bubble:checked + label:before {
    left: calc(100% - 20px);
}
.elem-switch input.bubble + label {
    height: 10px;
    background: #ddd;
    border-radius: 20px;
}
.elem-switch input.bubble + label:active:before {
    width: 40px;
    height: 40px;
    left: -10px;
    top: -15px;
}
.elem-switch input.bubble + label:after {
    background: #fff;
    border-radius: 50%;
    top: -5px;
    box-shadow: 0 0 3px #aaa;
}
.elem-switch input.bubble + label:before {
    border-radius: 50%;
    background: #ddd;
    top: -5px;
    opacity: 0.5;
    transition: width height 0.01s;
}
.elem-switch input.teleport:checked + label.red {
    border-color: #ECA9A7;
}
.elem-switch input.teleport:checked + label.red:before {
    background: #D9534F;
}
.elem-switch input.teleport:checked + label.green {
    border-color: #AEDCAE;
}
.elem-switch input.teleport:checked + label.green:before {
    background: #5CB85C;
}
.elem-switch input.teleport:checked + label:after {
    left: -13px;
}
.elem-switch input.teleport:checked + label:before {
    width: 12px;
    height: 12px;
    left: calc(100% - 15px);
}
.elem-switch input.teleport + label {
    border: 2px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
}
.elem-switch input.teleport + label:after {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 10px;
    top: 2px;
    left: 2px;
}
.elem-switch input.teleport + label:before {
    width: 12px;
    height: 12px;
    background: #ddd;
    border-radius: 10px;
    top: 2px;
    left: 100%;
}