[class^="ckbx-"] {
  font-size: 24px;
}

[class^="ckbx-"] label {
  position: relative;
  cursor: pointer;
  display: block;
}

[class^="ckbx-"] label:before, [class^="ckbx-"] label:after {
  content: "";
  position: absolute;
}

[class^="ckbx-"] label:before {
  transition: background 0.1s 0.1s ease;
}

[class^="ckbx-"] label:after {
  width: 0.6em;
  height: 0.6em;
  transition: all 0.2s ease;
}

[class^="ckbx-"] input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

[class^="ckbx-circle-"] label,
[class^="ckbx-square-"] label {
  width: 1em;
  height: 1em;
}

[class^="ckbx-circle-"] label:before,
[class^="ckbx-square-"] label:before {
  width: 1em;
  height: 1em;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
}

[class^="ckbx-circle-"] input[type="checkbox"]:checked + label:after,
[class^="ckbx-square-"] input[type="checkbox"]:checked + label:after {
  background: #70c1b3;
}

@-webkit-keyframes switch-on {
  50% {
    transform: scaleX(1.3);
  }
}

@keyframes switch-on {
  50% {
    transform: scaleX(1.3);
  }
}

@-webkit-keyframes switch-off {
  50% {
    transform: scaleX(1.3);
  }
}

@keyframes switch-off {
  50% {
    transform: scaleX(1.3);
  }
}

@-webkit-keyframes switch-on-circle {
  50% {
    transform: scale(1.3);
  }
}

@keyframes switch-on-circle {
  50% {
    transform: scale(1.3);
  }
}

@-webkit-keyframes switch-off-circle {
  50% {
    transform: scale(0.3);
  }
}

@keyframes switch-off-circle {
  50% {
    transform: scale(0.3);
  }
}

@-webkit-keyframes stretch {
  50% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1.3);
  }
}

@keyframes stretch {
  50% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1.3);
  }
}

@-webkit-keyframes stretchback {
  50% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1.3);
  }
}

@keyframes stretchback {
  50% {
    transform: scaleX(0.3);
  }
  100% {
    transform: scaleX(1.3);
  }
}

[class^="ckbx-style-"] label {
  width: 2em;
  height: 1em;
}

[class^="ckbx-style-"] label:before {
  width: 2em;
  height: 1em;
  background: #4d4d4d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
}

[class^="ckbx-style-"] label:after {
  z-index: 2;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  background: #fcfff4;
}

[class^="ckbx-style-"] input[type="checkbox"]:checked + label:before {
  background: #333;
}

[class^="ckbx-style-"] input[type="checkbox"]:checked + label:after {
  left: 1.1em;
}

.ckbx-style-1 label:after, .ckbx-style-2 label:after, .ckbx-style-5 label:after, .ckbx-style-6 label:after, .ckbx-style-8 label:after, .ckbx-style-10 label:after, .ckbx-style-11 label:after, .ckbx-style-12 label:after, .ckbx-style-15 label:after {
  width: 1em;
  height: 1em;
  left: 0;
}

.ckbx-style-3 label:after, .ckbx-style-4 label:after, .ckbx-style-16 label:after, .ckbx-style-17 label:after {
  left: 0.2em;
  top: 0.2em;
  border-radius: 4px;
}

.ckbx-style-1 label:before {
  left: 0.1em;
  border-radius: 50px;
}

.ckbx-style-1 label:after {
  border-radius: 50px;
}

.ckbx-style-3 label:before {
  border-radius: 4px;
}

.ckbx-style-4 label:before {
  border-radius: 4px;
}

.ckbx-style-4 label:after {
  border-radius: 100%;
}

.ckbx-style-5 label:before {
  height: 0.5em;
  left: 0.1em;
  top: 0.25em;
  border-radius: 50px;
}

.ckbx-style-5 label:after {
  border-radius: 50px;
}

.ckbx-style-6 label:before {
  left: 0.1em;
  border-radius: 50px;
}

.ckbx-style-6 label:after {
  border-radius: 50px;
  left: -0.1em;
  box-shadow: 0 0 0 5px #fcfff4 inset;
  background: #4d4d4d;
}

.ckbx-style-6 input[type="checkbox"]:checked + label:after {
  background: #333;
}

.ckbx-style-7 label:before {
  left: 0.1em;
  border-radius: 50px;
}

.ckbx-style-7 label:after {
  width: 0.8em;
  height: 0.8em;
  border-radius: 100%;
  left: 0.2em;
  top: 0.1em;
  box-shadow: 0 0 0 5px #fcfff4 inset;
  background: #4d4d4d;
  -webkit-animation: switch-off 0.3s ease-out;
          animation: switch-off 0.3s ease-out;
}

.ckbx-style-7 input[type="checkbox"]:checked + label:after {
  left: 1.2em;
  background: #333;
  -webkit-animation: switch-on 0.3s ease-out;
          animation: switch-on 0.3s ease-out;
}

.ckbx-style-8 label:before {
  left: 0.1em;
  transition: background 0.1s ease;
  background: #f25f5c;
  border-radius: 50px;
  box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);
}

.ckbx-style-8 label:after {
  border-radius: 50px;
  -webkit-animation: switch-off 0.2s ease-out;
          animation: switch-off 0.2s ease-out;
}

.ckbx-style-8 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
  box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-8 input[type="checkbox"]:checked + label:after {
  -webkit-animation: switch-on 0.2s ease-out;
          animation: switch-on 0.2s ease-out;
}

.ckbx-style-9 {
  width: 3em !important;
  position: relative;
}

.ckbx-style-9:before, .ckbx-style-9:after {
  position: absolute;
  font-size: 0.6em;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.ckbx-style-9:before {
  content: "ON";
  z-index: 1;
  left: 0.4em;
  top: 0.2em;
}

.ckbx-style-9:after {
  content: "OFF";
  right: 0.4em;
  top: 0.2em;
}

.ckbx-style-9 label:before {
  width: 3em;
  transition: background 0.1s ease;
  background: #f25f5c;
  box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);
}

.ckbx-style-9 label:after {
  width: 1.5em;
  height: 1em;
  left: 0;
}

.ckbx-style-9 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
  box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-9 input[type="checkbox"]:checked + label:after {
  left: 1.5em;
}

.ckbx-style-10 label:before {
  height: 0.5em;
  left: 0.1em;
  top: 0.25em;
}

.ckbx-style-11 label:before {
  height: 0.5em;
  left: 0.1em;
  top: 0.25em;
  background: #f25f5c;
  border-radius: 50px;
}

.ckbx-style-11 label:after {
  background: #f25f5c;
  border-radius: 100%;
  -webkit-animation: switch-off 0.4s ease-out forwards;
          animation: switch-off 0.4s ease-out forwards;
}

.ckbx-style-11 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
}

.ckbx-style-11 input[type="checkbox"]:checked + label:after {
  background: #70c1b3;
  -webkit-animation: switch-on 0.4s ease-out forwards;
          animation: switch-on 0.4s ease-out forwards;
}

.ckbx-style-12 label:before {
  height: 0.5em;
  left: 0.1em;
  top: 0.25em;
  background: #f25f5c;
  box-shadow: unset;
}

.ckbx-style-12 label:after {
  background: #f25f5c;
  -webkit-animation: switch-off 0.4s ease-out forwards;
          animation: switch-off 0.4s ease-out forwards;
}

.ckbx-style-12 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
}

.ckbx-style-12 input[type="checkbox"]:checked + label:after {
  background: #70c1b3;
  -webkit-animation: switch-on 0.4s ease-out forwards;
          animation: switch-on 0.4s ease-out forwards;
}

.ckbx-style-13 label:before {
  left: 0.1em;
  background: #f25f5c;
  border-radius: 50px;
  box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);
}

.ckbx-style-13 label:after {
  width: 0.8em;
  height: 0.8em;
  border-radius: 100%;
  left: 0.2em;
  top: 0.1em;
  box-shadow: 0 0 0 5px #fcfff4 inset;
  background: #f25f5c;
  -webkit-animation: switch-off 0.3s ease-out;
          animation: switch-off 0.3s ease-out;
}

.ckbx-style-13 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
  box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-13 input[type="checkbox"]:checked + label:after {
  left: 1.2em;
  background: #70c1b3;
  -webkit-animation: switch-on 0.3s ease-out;
          animation: switch-on 0.3s ease-out;
}

.ckbx-style-14 {
  position: relative;
  padding: 3px;
  background: #333;
  border-radius: 4px;
}

.ckbx-style-14 label {
  width: 4em;
  height: 1em;
  background: #333;
}

.ckbx-style-14 label:before {
  content: "OFF";
  width: 50%;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 0.6em;
  line-height: 1.6;
  transition: all 0.2s ease;
  background: #f25f5c;
  left: 50%;
  bottom: 0;
  top: 0;
  border-radius: 4px;
  height: unset;
  box-shadow: unset;
}

.ckbx-style-14 label:after {
  content: "ON";
  width: 50%;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  top: 0;
  bottom: 0;
  font-weight: bold;
  font-size: 0.6em;
  border-radius: 4px;
  background: #333;
  height: unset;
  box-shadow: unset;
  z-index: unset;
}

.ckbx-style-14 input[type="checkbox"]:checked + label:before {
  background: #333;
  color: rgba(255, 255, 255, 0.5);
}

.ckbx-style-14 input[type="checkbox"]:checked + label:after {
  background: #70c1b3;
  color: #fff;
  left: unset;
}

.ckbx-style-15 label:before {
  content: "\2714\2718";
  color: #fff;
  font-size: 0.8em;
  top: 0;
  bottom: 0;
  padding-left: 0.25em;
  padding-right: 0.25em;
  left: 0.1em;
  background: #f25f5c;
  border-radius: 50px;
  box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);
  letter-spacing: -1px;
  height: unset;
}

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .ckbx-style-15 label:before {
    letter-spacing: 6px;
  }
}

@-moz-document url-prefix() {
  .ckbx-style-15 label:before {
    letter-spacing: 6px;
  }
}

.ckbx-style-15 label:after {
  border-radius: 50px;
  -webkit-animation: switch-off 0.2s ease-out;
          animation: switch-off 0.2s ease-out;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ckbx-style-15 label:before {
    letter-spacing: -2px;
  }
  .ckbx-style-15 label:after {
    left: 0.05em;
  }
}

.ckbx-style-15 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
  box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);
}

.ckbx-style-15 input[type="checkbox"]:checked + label:after {
  -webkit-animation: switch-on 0.2s ease-out;
          animation: switch-on 0.2s ease-out;
}

.ckbx-style-16 label:before {
  border-radius: 4px;
  background: #f25f5c;
  box-shadow: unset;
}

.ckbx-style-16 input[type="checkbox"]:checked + label:before {
  background: #70c1b3;
}

.ckbx-style-17 label:before {
  border-radius: 4px;
}

.ckbx-style-17 label:after {
  background: #f25f5c;
}

.ckbx-style-17 input[type="checkbox"]:checked + label:after {
  background: #70c1b3;
}

[class^="ckbx-circle-"] label:before {
  border-radius: 100%;
}

[class^="ckbx-circle-"] label:after {
  border-radius: 100%;
  left: 0.2em;
  top: 0.2em;
  background: #f25f5c;
  z-index: 2;
}

.ckbx-circle-2 label:after {
  z-index: unset;
}

.ckbx-circle-4 label:after {
  left: unset;
  top: unset;
  z-index: unset;
}

.ckbx-square-1 label:after {
  left: 0.2em;
  top: 0.2em;
  background: #f25f5c;
  z-index: 2;
}

.ckbx-square-2 label:after {
  left: 0.2em;
  top: 0.2em;
  background: #f25f5c;
}

.ckbx-square-3 label:after {
  background: #f25f5c;
  z-index: 2;
}

[class^="ckbx"].ckbx-small {
  font-size: 0.5em;
}

[class^="ckbx"].ckbx-large {
  font-size: 1.5em;
}

[class^="ckbx"].ckbx-xlarge {
  font-size: 2.5em;
}

.ckbx-circle-1 label:before, .ckbx-square-1 label:before {
  background: #333;
}

.ckbx-circle-2 label:before, .ckbx-square-2 label:before {
  width: 1em;
  height: 1em;
  background: #333;
}

.ckbx-circle-2 label:after, .ckbx-square-2 label:after {
  -webkit-animation: switch-off-circle 0.2s ease-out;
          animation: switch-off-circle 0.2s ease-out;
}

.ckbx-circle-2 input[type="checkbox"]:checked + label:after, .ckbx-square-2 input[type="checkbox"]:checked + label:after {
  width: 1em;
  height: 1em;
  top: 0;
  left: 0;
  -webkit-animation: switch-on-circle 0.2s ease-out;
          animation: switch-on-circle 0.2s ease-out;
}

.ckbx-circle-3 label:before, .ckbx-square-3 label:before {
  background: #fcfff4;
}

.ckbx-circle-3 label:after, .ckbx-square-3 label:after {
  left: 0.1em;
  top: 0.1em;
  border: 0.1em solid #fcfff4;
}

.ckbx-circle-4 label:before, .ckbx-square-4 label:before {
  box-shadow: unset;
}

.ckbx-circle-4 label:after, .ckbx-square-4 label:after {
  background: transparent;
  border: 0.2em solid #f25f5c;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  -webkit-animation: stretchback 0.2s ease-out;
          animation: stretchback 0.2s ease-out;
}

.ckbx-circle-4 input[type="checkbox"]:checked + label:after, .ckbx-square-4 input[type="checkbox"]:checked + label:after {
  border-color: #70c1b3;
  -webkit-animation: stretch 0.2s ease-out;
          animation: stretch 0.2s ease-out;
  background: unset;
}
/*# sourceMappingURL=checkboxes.css.map */