@keyframes hover-color {
  from {
    border-color: #e0e0e0;
  }
  to {
    border-color: #42A5F5;
  }
}

.magic-radio,
.magic-checkbox,
.magic-checkbox_disabled {
  position: absolute;
  display: none;
}

.magic-radio[disabled],
.magic-checkbox[disabled],
.magic-checkbox_disabled {
  cursor: not-allowed;
}

.input-group-addon > .magic-radio + label,
.input-group-addon > .magic-checkbox + label,
.input-group-addon > .magic-checkbox_disabled + label {
  display: block;
}

.magic-radio + label,
.magic-checkbox + label,
.magic-checkbox_disabled + label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
}

.magic-radio + label:hover:before,
.magic-checkbox + label:hover:before,
.magic-checkbox_disabled + label:hover:before {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-name: hover-color;
}

.magic-radio + label:before,
.magic-checkbox + label:before,
.magic-checkbox_disabled + label:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  content: '';
  border: 1px solid #e0e0e0;
}

.magic-radio + label:after,
.magic-checkbox + label:after,
.magic-checkbox_disabled + label:after {
  position: absolute;
  display: none;
  content: '';
}

.magic-radio + label {
  min-width: 16px;
  min-height: 16px;
}

.magic-radio + label:not(:empty) {
  padding: 0 21px !important;
}

.magic-checkbox + label,
.magic-checkbox_disabled + label {
  min-width: 16px;
  min-height: 16px;
}

.magic-checkbox + label:not(:empty),
.magic-checkbox_disabled + label:not(:empty) {
  padding: 0 21px !important;
}

.btn-group .magic-radio + label,
.btn-group .magic-checkbox + label,
.btn-group .magic-checkbox_disabled + label {
  vertical-align: baseline;
  min-height: 1em;
}

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label,
.magic-checkbox_disabled + label {
  cursor: not-allowed;
  opacity: .5;
}

.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after,
.magic-checkbox_disabled + label:hover,
.magic-checkbox_disabled + label:before,
.magic-checkbox_disabled + label:after
{
  cursor: not-allowed;
}

.magic-radio[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:hover:before,
.magic-checkbox_disabled + label:hover:before {
  animation-name: none;
}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before,
.magic-checkbox_disabled:checked + label:before {
  animation-name: none;
}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after,
.magic-checkbox_disabled:checked + label:after {
  display: block;
}

.magic-radio + label:before {
  border-radius: 50%;
  top: .1em;
  left: .1em;
}

.magic-radio + label:after {
  top: 0.22em;
  left: 0.22em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #42A5F5;
}

.magic-radio:checked + label:before {
  border: 1px solid #42A5F5;
}

.magic-checkbox + label:before,
.magic-checkbox_disabled + label:before {
  border-radius: 0;
}

.magic-checkbox + label:after,
.magic-checkbox_disabled + label:after {
  top: 1px;
  left: 5px;
  box-sizing: border-box;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-top: 0;
  border-left: 0;
}

.magic-checkbox:checked + label:before,
.magic-checkbox_disabled:checked + label:before {
  border: #42A5F5;
  background: #42A5F5;
}